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 {