Merge remote-tracking branch 'origin/develop' into bug/3680-error-mes…

…sage-not-announced
kirbydesign · Feb 7, 2025 · 0fb42ae · 0fb42ae
2 parents 8cd47c3 + 2127a74
commit 0fb42ae
Show file tree

Hide file tree

Showing 64 changed files with 5,934 additions and 10,717 deletions.
diff --git a/apps/cookbook/src/app/examples/dropdown-example/examples/custom-item-template.ts b/apps/cookbook/src/app/examples/dropdown-example/examples/custom-item-template.ts
@@ -2,6 +2,7 @@ import { Component, Input } from '@angular/core';
 import { DropdownModule } from '@kirbydesign/designsystem/dropdown';
 import { JsonPipe, NgIf } from '@angular/common';
 import { IconModule } from '@kirbydesign/designsystem/icon';
+import { ItemModule } from '@kirbydesign/designsystem/item';
 
 const config = {
   selector: 'cookbook-dropdown-example-custom-item-template',
@@ -41,7 +42,7 @@ const config = {
   selector: config.selector,
   template: config.template,
   styles: config.styles,
-  imports: [DropdownModule, NgIf, IconModule, JsonPipe],
+  imports: [DropdownModule, NgIf, IconModule, JsonPipe, ItemModule],
 })
 export class DropdownExampleCustomItemTemplateComponent {
   template: string = config.template;

diff --git a/apps/cookbook/src/app/examples/item-example/examples/settings/settings.ts b/apps/cookbook/src/app/examples/item-example/examples/settings/settings.ts
@@ -5,8 +5,9 @@ import { ToggleComponent } from '@kirbydesign/designsystem/toggle';
 const config = {
   selector: 'cookbook-item-example-settings',
   template: `<kirby-item>
-  <p class="kirby-item-title">Title</p>
-  <kirby-toggle slot="end" checked="true"></kirby-toggle>
+  <kirby-toggle slot="end" checked="true">
+    Title
+  </kirby-toggle>
 </kirby-item>`,
 };
 

diff --git a/libs/designsystem/divider/src/divider.component.spec.ts b/libs/designsystem/divider/src/divider.component.spec.ts
@@ -1,7 +1,7 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { DividerComponent } from './divider.component';
-//TODO: Remove!
+
 describe('DividerComponent', () => {
   let component: DividerComponent;
   let fixture: ComponentFixture<DividerComponent>;

diff --git a/libs/designsystem/dropdown/src/dropdown.module.ts b/libs/designsystem/dropdown/src/dropdown.module.ts
@@ -8,6 +8,7 @@ import { IconModule } from '@kirbydesign/designsystem/icon';
 import { ItemModule } from '@kirbydesign/designsystem/item';
 import { PopoverComponent } from '@kirbydesign/designsystem/popover';
 
+import { ListItemTemplateDirective, ListModule } from '@kirbydesign/designsystem/list';
 import { DropdownComponent } from './dropdown.component';
 import { KeyboardHandlerService } from './keyboard-handler.service';
 
@@ -22,9 +23,10 @@ const declarations = [DropdownComponent];
     PopoverComponent,
     ButtonComponent,
     CommonModule,
+    ListModule,
   ],
   declarations: [...declarations],
-  exports: [...declarations],
+  exports: [...declarations, ListItemTemplateDirective],
   providers: [KeyboardHandlerService],
 })
 export class DropdownModule {}
diff --git a/libs/designsystem/form-field/src/input/input.component.ts b/libs/designsystem/form-field/src/input/input.component.ts
@@ -25,7 +25,6 @@ export enum InputSize {
   hostDirectives: [
     {
       directive: DateInputDirective,
-
       inputs: ['prefillYear', 'useNativeDatePicker'],
     },
   ],

diff --git a/libs/designsystem/icon/src/kirby-icon-settings.ts b/libs/designsystem/icon/src/kirby-icon-settings.ts
@@ -5,7 +5,6 @@ const sortIconsByName = (icons: Icon[]) => {
   return icons.sort((a, b) => collator.compare(a.name, b.name));
 };
 
-/* eslint-disable */
 export const kirbyIconSettings: IconSettings = {
   icons: sortIconsByName([
     { name: 'accounts-outline', svg: 'accounts-outline.svg' },

diff --git a/libs/designsystem/item/src/item.component.stories.ts b/libs/designsystem/item/src/item.component.stories.ts
@@ -604,98 +604,92 @@ export const ItemWithToggleModernSyntax: Story = {
     styles: [`h2 { margin-top: 32px; }`],
     template: `<h2>Extra small</h2>
     <kirby-item size="xs">
-      <kirby-toggle [checked]="true" slot="start"></kirby-toggle>
-      <kirby-label>Slot start, selected</kirby-label>
-    </kirby-item> 
+      <kirby-toggle [checked]="true" slot="start">Slot start, selected</kirby-toggle>
+    </kirby-item>
     <kirby-item size="xs">
-      <kirby-toggle slot="start"></kirby-toggle>
-      <kirby-label>Slot start</kirby-label>
-    </kirby-item> 
+      <kirby-toggle slot="start">Slot start</kirby-toggle>
+    </kirby-item>
     <kirby-item size="xs">
-      <kirby-toggle slot="end"></kirby-toggle>
-      <kirby-label>Slot end</kirby-label>
-    </kirby-item> 
+      <kirby-toggle slot="end">Slot end</kirby-toggle>
+    </kirby-item>
     <kirby-item size="xs">
-      <kirby-toggle slot="start"></kirby-toggle>
-      <kirby-label>No slot</kirby-label>
-    </kirby-item> 
+      <kirby-toggle>No slot</kirby-toggle>
+    </kirby-item>
     <kirby-item size="xs">
-      <kirby-toggle slot="start"></kirby-toggle>
-      <kirby-label>
-        <h3>Slot start, complex label</h3>
-        <p detail>Label</p>
-      </kirby-label>
-    </kirby-item> 
+      <kirby-toggle slot="start">
+        <kirby-label>
+          <p class="kirby-item-title">Slot start, complex label</p>
+          <p class="kirby-item-detail">Label</p>
+        </kirby-label>
+      </kirby-toggle>
+    </kirby-item>
     <kirby-item size="xs">
-      <kirby-toggle slot="end"></kirby-toggle>
-      <kirby-label>
-        <h3>Slot end, complex label</h3>
-        <p detail>Label</p>
-      </kirby-label>
+      <kirby-toggle slot="end">
+        <kirby-label>
+          <p class="kirby-item-title">Slot end, complex label</p>
+          <p class="kirby-item-detail">Label</p>
+        </kirby-label>
+      </kirby-toggle>
     </kirby-item>
     
     <h2>Small</h2>
     <kirby-item size="sm">
-      <kirby-toggle [checked]="true" slot="start"></kirby-toggle>
-      <kirby-label>Slot start, selected</kirby-label>
-    </kirby-item> 
+      <kirby-toggle [checked]="true" slot="start">Slot start, selected</kirby-toggle>
+    </kirby-item>
     <kirby-item size="sm">
-      <kirby-toggle slot="start"></kirby-toggle>
-      <kirby-label>Slot start</kirby-label>
-    </kirby-item> 
+      <kirby-toggle slot="start">Slot start</kirby-toggle>
+    </kirby-item>
     <kirby-item size="sm">
-      <kirby-toggle slot="end"></kirby-toggle>
-      <kirby-label>Slot end</kirby-label>
-    </kirby-item> 
+      <kirby-toggle slot="end">Slot end</kirby-toggle>
+    </kirby-item>
     <kirby-item size="sm">
-      <kirby-toggle slot="start"></kirby-toggle>
-      <kirby-label>No slot</kirby-label>
-    </kirby-item> 
+      <kirby-toggle>No slot</kirby-toggle>
+    </kirby-item>
     <kirby-item size="sm">
-      <kirby-toggle slot="start"></kirby-toggle>
-      <kirby-label>
-        <h3>Slot start, complex label</h3>
-        <p detail>Label</p>
-      </kirby-label>
-    </kirby-item> 
+      <kirby-toggle slot="start">
+        <kirby-label>
+          <p class="kirby-item-title">Slot start, complex label</p>
+          <p class="kirby-item-detail">Label</p>
+        </kirby-label>
+      </kirby-toggle>
+    </kirby-item>
     <kirby-item size="sm">
-      <kirby-toggle slot="end"></kirby-toggle>
-      <kirby-label>
-        <h3>Slot end, complex label</h3>
-        <p detail>Label</p>
-      </kirby-label>
+      <kirby-toggle slot="end">
+        <kirby-label>
+          <p class="kirby-item-title">Slot end, complex label</p>
+          <p class="kirby-item-detail">Label</p>
+        </kirby-label>
+      </kirby-toggle>
     </kirby-item>
     
     <h2>Medium</h2>
     <kirby-item size="md">
-      <kirby-toggle [checked]="true" slot="start"></kirby-toggle>
-      <kirby-label>Slot start, selected</kirby-label>
-    </kirby-item> 
+      <kirby-toggle [checked]="true" slot="start">Slot start, selected</kirby-toggle>
+    </kirby-item>
     <kirby-item size="md">
-      <kirby-toggle slot="start"></kirby-toggle>
-      <kirby-label>Slot start</kirby-label>
-    </kirby-item> 
+      <kirby-toggle slot="start">Slot start</kirby-toggle>
+    </kirby-item>
     <kirby-item size="md">
-      <kirby-toggle slot="end"></kirby-toggle>
-      <kirby-label>Slot end</kirby-label>
+      <kirby-toggle slot="end">Slot end</kirby-toggle>
     </kirby-item>
     <kirby-item size="md">
-      <kirby-toggle slot="start"></kirby-toggle>
-      <kirby-label>No slot</kirby-label>
+      <kirby-toggle>No slot</kirby-toggle>
     </kirby-item>
     <kirby-item size="md">
-      <kirby-toggle slot="start"></kirby-toggle>
-      <kirby-label>
-        <h3>Slot start, complex label</h3>
-        <p detail>Label</p>
-      </kirby-label>
+      <kirby-toggle slot="start">
+        <kirby-label>
+          <p class="kirby-item-title">Slot start, complex label</p>
+          <p class="kirby-item-detail">Label</p>
+        </kirby-label>
+      </kirby-toggle>
     </kirby-item>
     <kirby-item size="md">
-      <kirby-toggle slot="end"></kirby-toggle>
-      <kirby-label>
-        <h3>Slot end, complex label</h3>
-        <p detail>Label</p>
-      </kirby-label>
+      <kirby-toggle slot="end">
+        <kirby-label>
+          <p class="kirby-item-title">Slot end, complex label</p>
+          <p class="kirby-item-detail">Label</p>
+        </kirby-label>
+      </kirby-toggle>
     </kirby-item>`,
   }),
 };

diff --git a/libs/designsystem/toggle/src/toggle.component.html b/libs/designsystem/toggle/src/toggle.component.html
@@ -6,7 +6,11 @@
   (keyup.space)="_onInactive()"
   (blur)="_onInactive()"
   (ionChange)="onCheckedChange($event.detail.checked)"
-  [attr.aria-label]="_ariaLabel"
+  [justify]="_justify"
+  [labelPlacement]="_labelPlacement"
 >
-  <ng-content></ng-content>
+  <span class="hidden-label" *ngIf="_labelText">{{ _labelText }}</span>
+  <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,45 @@
 @use 'sass:math';
+@use 'sass:map';
 @use '@kirbydesign/core/src/scss/interaction-state';
 @use '@kirbydesign/core/src/scss/utils';
 
+$spacing-to-edge: map.get(utils.$checkbox-radio-spacing, 'to-edge');
+$spacing-to-label: map.get(utils.$checkbox-radio-spacing, 'to-label');
+
 :host {
   display: inline-flex;
+
+  &:has(ion-toggle.in-item.toggle-justify-space-between) {
+    width: 100%;
+  }
+
+  &.has-hidden-label {
+    position: initial;
+
+    &[slot='end'] {
+      ion-toggle {
+        margin-inline-start: $spacing-to-label;
+      }
+    }
+
+    ion-toggle {
+      position: initial;
+
+      &::part(label) {
+        position: initial;
+      }
+
+      &.in-item::part(label-text-wrapper) {
+        margin-inline: 0;
+      }
+    }
+
+    .hidden-label {
+      position: absolute;
+      inset: 0;
+      opacity: 0;
+    }
+  }
 }
 
 ion-toggle {
@@ -66,6 +102,36 @@ ion-toggle {
       height: $toggle-size;
     }
   }
+
+  ::part(label-text-wrapper) {
+    line-height: utils.line-height('n');
+    white-space: pre-line;
+  }
+
+  // Overrides for kirby-toggle inside kirby-item
+  &.in-item {
+    &::part(label) {
+      align-items: center;
+      padding-inline: 0;
+    }
+
+    &::part(label),
+    &::part(label-text-wrapper) {
+      margin-block: 0;
+    }
+
+    &.toggle-label-placement-start {
+      &::part(label-text-wrapper) {
+        margin-inline: 0 $spacing-to-label;
+      }
+    }
+
+    &.toggle-label-placement-end {
+      &::part(label-text-wrapper) {
+        margin-inline: $spacing-to-label 0;
+      }
+    }
+  }
   /* stylelint-enable no-duplicate-selectors */
 }
 
@@ -77,3 +143,15 @@ ion-toggle {
 ion-toggle.in-item.legacy-toggle {
   padding: 0;
 }
+
+:host-context(kirby-item) {
+  z-index: utils.z('default'); // Makes whole kirby-item clickable above item-inner.
+
+  ion-toggle {
+    margin: 0;
+  }
+
+  &[slot='start'] {
+    margin-inline-end: $spacing-to-label;
+  }
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -25,7 +25,6 @@ export enum InputSize { @@
       hostDirectives: [
         {
           directive: DateInputDirective,
           inputs: ['prefillYear', 'useNativeDatePicker'],
         },
       ],
@@ Expand Down @@