Initial toggle fix

kirbydesign · Dec 12, 2024 · 4ef6e78 · 4ef6e78
1 parent 472f9ae
commit 4ef6e78
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 1 deletion.
diff --git 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"
 >
-  <ng-content></ng-content>
+  <span class="default-content">
+    <ng-content></ng-content>
+  </span>
 </ion-toggle>
diff --git 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
@@ -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<boolean>();
 
+  _justify: 'start' | 'end' | 'space-between' = 'start';
+  _labelPlacement: 'end' | 'fixed' | 'stacked' | 'start' = 'end';
+  _hasSlottedContent: boolean;
+
   _pressed = false;
 
   onCheckedChange(checked: boolean): void {