diff --git a/libs/designsystem/toggle/src/toggle.component.html b/libs/designsystem/toggle/src/toggle.component.html index 5bcaa5cb75..7c0c04fda8 100644 --- a/libs/designsystem/toggle/src/toggle.component.html +++ b/libs/designsystem/toggle/src/toggle.component.html @@ -7,6 +7,10 @@ (blur)="_onInactive()" (ionChange)="onCheckedChange($event.detail.checked)" [attr.aria-label]="_ariaLabel" + [justify]="_justify" + [labelPlacement]="_labelPlacement" > - + + + diff --git a/libs/designsystem/toggle/src/toggle.component.scss b/libs/designsystem/toggle/src/toggle.component.scss index a693d73951..e53a1e3584 100644 --- a/libs/designsystem/toggle/src/toggle.component.scss +++ b/libs/designsystem/toggle/src/toggle.component.scss @@ -1,9 +1,24 @@ @use 'sass:math'; +@use 'sass:map'; @use '@kirbydesign/core/src/scss/interaction-state'; @use '@kirbydesign/core/src/scss/utils'; :host { display: inline-flex; + + &:has(ion-toggle.in-item.toggle-justify-space-between) { + width: 100%; + } + + // @each $size, $properties in utils.$checkbox-sizes { + // &.#{$size} { + // $vertical-padding: map.get($properties, vertical-padding); + + // ion-toggle:not(.in-item)::part(label) { + // padding-block: $vertical-padding; + // } + // } + // } } ion-toggle { diff --git a/libs/designsystem/toggle/src/toggle.component.ts b/libs/designsystem/toggle/src/toggle.component.ts index dac7989027..498cbf0c9b 100644 --- a/libs/designsystem/toggle/src/toggle.component.ts +++ b/libs/designsystem/toggle/src/toggle.component.ts @@ -36,6 +36,21 @@ export class ToggleComponent implements ControlValueAccessor, OnInit { ) {} ngOnInit(): void { + /** + * We cannot query ion-toggle for slotted content at this point as the slot has not been rendered. + * But we need to know if content is slotted to set justify and labelPlacement BEFORE ion-toggle is rendered. + * So it has to be done by querying an additional wrapper around the default content slot like this. + */ + this._hasSlottedContent = this.elementRef.nativeElement + .querySelector('.default-content') + .hasChildNodes(); + + const slot = this.elementRef.nativeElement.getAttribute('slot'); + if (slot === 'end' && this._hasSlottedContent) { + this._justify = 'space-between'; + this._labelPlacement = 'start'; + } + this.inheritAriaAttributes(); } @@ -60,6 +75,10 @@ export class ToggleComponent implements ControlValueAccessor, OnInit { @Output() checkedChange = new EventEmitter(); + _justify: 'start' | 'end' | 'space-between' = 'start'; + _labelPlacement: 'end' | 'fixed' | 'stacked' | 'start' = 'end'; + _hasSlottedContent: boolean; + _pressed = false; onCheckedChange(checked: boolean): void {