@kirbydesign/designsystem 0.0.0

package/src/lib/components/index.ts

@@ -0,0 +1,67 @@
+export * from './accordion';
+export * from './app';
+
+export { AvatarComponent, AvatarSize } from './avatar/avatar.component';
+
+export { KirbyBadge as BadgeComponent } from './web-component-proxies.component';
+
+export { ButtonComponent, ButtonSize } from './button/button.component';
+
+export * from './card';
+export * from './chart-deprecated';
+export * from './chart';
+export * from './stock-chart-deprecated';
+export * from './calendar';
+export * from './item-sliding';
+
+export { CheckboxComponent } from './checkbox/checkbox.component';
+export { ChipComponent } from './chip/chip.component';
+
+export { DividerComponent } from './divider/divider.component';
+
+export { DropdownComponent } from './dropdown/dropdown.component';
+
+export { EmptyStateComponent } from './empty-state/empty-state.component';
+
+export * from './form-field';
+export { FabSheetComponent } from './fab-sheet/fab-sheet.component';
+export { FlagComponent } from './flag/flag.component';
+
+export { GridComponent } from './grid/grid.component';
+export { GridCardConfiguration } from './grid/grid-card-configuration';
+
+export * from './icon';
+export * from './item';
+export { ItemSlidingComponent } from './item-sliding/item-sliding.component';
+export { ItemGroupComponent } from './item-group/item-group.component';
+
+export * from './loading-overlay';
+export * from './list';
+
+export * from './modal';
+
+export * from './page';
+
+export { HorizontalDirection, PopoverComponent } from './popover/popover.component';
+
+export * from './radio';
+export { RangeComponent } from './range/range.component';
+export * from './router-outlet';
+export * from './reorder-list';
+
+export * from './shared';
+
+export { SectionHeaderComponent } from './section-header/section-header.component';
+/* prettier-ignore */
+export { SegmentedControlComponent, SegmentedControlMode} from './segmented-control/segmented-control.component'; // See issue #1555 for prettier-ignore explanation
+export { SegmentItem } from './segmented-control/segment-item';
+export { SlideButtonComponent } from './slide-button/slide-button.component';
+export * from './slides/slides.component';
+export * from './spinner';
+
+export * from './tabs';
+export * from './toast';
+export { ToggleComponent } from './toggle/toggle.component';
+
+export { ProgressCircleComponent } from './progress-circle/progress-circle.component';
+export * from './toggle-button';

package/src/lib/components/item/_item.utils.scss

@@ -0,0 +1,36 @@
+@use '~@kirbydesign/core/src/scss/utils';
+
+@mixin item-typography() {
+  @include utils.slotted(h1, h2, h3, h4, h5, h6, p, data) {
+    font-size: utils.font-size('n');
+    line-height: utils.line-height('n');
+    color: utils.get-text-color('black');
+    display: block;
+    margin: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-weight: normal;
+
+    &.kirby-text-bold {
+      font-weight: utils.font-weight('bold');
+    }
+  }
+
+  @include utils.slotted(p) {
+    font-size: utils.font-size('s');
+  }
+
+  @include utils.slotted('[subtitle]', '[detail]') {
+    font-size: utils.font-size('xs');
+    line-height: utils.line-height('xs');
+  }
+
+  @include utils.slotted('[subtitle]:not(:last-child)') {
+    margin-bottom: utils.size('xxxs');
+  }
+
+  @include utils.slotted('[detail]') {
+    color: utils.get-text-color('semi-dark');
+  }
+}

package/src/lib/components/item/index.ts

@@ -0,0 +1,3 @@
+export { ItemComponent, ItemSize } from './item.component';
+export { ItemModule } from './item.module';
+export { LabelComponent } from './label/label.component';

package/src/lib/components/item/item.component.html

@@ -0,0 +1,16 @@
+<ion-item
+  lines="none"
+  [attr.disabled]="disabled"
+  [attr.button]="selectable ? true : null"
+  [attr.tabindex]="selectable ? null : 0"
+  detail="false"
+  (mousedown)="onMouseDown($event)"
+>
+  <div class="outside" slot="start">
+    <ng-content select="[slot='outside']"></ng-content>
+  </div>
+  <ng-content></ng-content>
+  <ion-reorder slot="end" *ngIf="reorderable">
+    <kirby-icon name="reorder"></kirby-icon>
+  </ion-reorder>
+</ion-item>

package/src/lib/components/item/item.component.integration.spec.ts

@@ -0,0 +1,64 @@
+import { createHostFactory, SpectatorHost } from '@ngneat/spectator';
+
+import { DesignTokenHelper } from '@kirbydesign/core';
+
+import { IconComponent } from '..';
+import { TestHelper } from '../../testing/test-helper';
+
+import { LabelComponent } from '.';
+import { ItemComponent } from './item.component';
+
+const { fontWeight } = DesignTokenHelper;
+
+describe('ItemComponent with LabelComponent', () => {
+  let ionItem: HTMLElement;
+
+  let spectator: SpectatorHost<ItemComponent>;
+  const createHost = createHostFactory({
+    component: ItemComponent,
+    imports: [TestHelper.ionicModuleForTest],
+    declarations: [LabelComponent],
+  });
+
+  describe('selectable and selected', () => {
+    let labelElements: Element[];
+
+    beforeEach(async () => {
+      spectator = createHost(
+        `
+        <kirby-item selectable="true" selected="true">
+          <kirby-label>
+            <h3>Title</h3>
+            <p detail>Detail</p>
+          </kirby-label>
+          <kirby-label slot="end">
+            <data>Value</data>
+            <data detail>Detail</data>
+          </kirby-label>
+        </kirby-item>
+        `
+      );
+      ionItem = spectator.queryHost('ion-label');
+      await TestHelper.whenReady(ionItem);
+      labelElements = spectator.queryAll(
+        'ion-item ion-label > :is(h1, h2, h3, h4, h5, h6, p, data)'
+      );
+    });
+
+    it('should render general header, data and paragraph elements with correct font-weight', () => {
+      labelElements
+        .filter((e) => !e.attributes.getNamedItem('detail'))
+        .forEach((e) => {
+          expect(e).toHaveComputedStyle({ 'font-weight': fontWeight('bold') });
+        });
+    });
+
+    it('should render detail data and paragraph elements with correct font-weight', () => {
+      labelElements
+        .filter((e) => !!e.attributes.getNamedItem('detail'))
+        .forEach((e) => {
+          expect(e).toHaveComputedStyle({ 'font-weight': fontWeight('normal') });
+        });
+    });
+  });
+});

package/src/lib/components/item/item.component.scss

@@ -0,0 +1,156 @@
+@use 'sass:map';
+@use '~@kirbydesign/core/src/scss/utils';
+@use 'item.utils';
+
+:host {
+  display: block;
+  position: relative;
+
+  ion-item {
+    --padding-top: var(--item-padding-top, 0px);
+    --padding-bottom: var(--item-padding-bottom, 0px);
+
+    font-size: utils.font-size('s');
+
+    --min-height: #{map.get(utils.$item-heights, 'm')};
+    --padding-start: #{utils.size('s')};
+    --inner-padding-top: #{utils.size('xxs')};
+    --inner-padding-bottom: #{utils.size('xxs')};
+    --inner-padding-end: #{utils.size('s')};
+    --background: var(--kirby-item-background, #{utils.get-color('white')});
+    --background-activated: var(
+      --kirby-item-background-activated,
+      #{utils.get-color('white-shade')}
+    );
+
+    // WORKAROUND: Needed to fix ignored click on scrollend
+    // https://github.com/ionic-team/ionic-framework/issues/21871
+    --background-activated-opacity: 0.99;
+    --background-focused: var(
+      --kirby-item-background-focused,
+      #{utils.get-color('background-color')}
+    );
+    --background-focused-opacity: 1;
+    --background-hover: var(--kirby-item-background-hover, #{utils.get-color('background-color')});
+    --background-hover-opacity: 1;
+
+    // Prevent additional padding in iOS Safari on devices with "screen notch"
+    // by removing horizontal safe area when rotated to landscape orientation.
+    // See https://github.com/kirbydesign/designsystem/issues/1689
+    @media screen and (orientation: landscape) {
+      --ion-safe-area-left: 0px;
+      --ion-safe-area-right: 0px;
+    }
+
+    @include utils.slotted('[slot="end"]') {
+      margin-inline-start: 0;
+      margin-inline-end: 0;
+      text-align: right;
+    }
+
+    @include utils.slotted('time[slot="end"]') {
+      margin-inline-start: utils.size('xs');
+    }
+
+    @include utils.slotted('data[slot="end"]', '[detail][slot="end"], ion-reorder[slot="end"]') {
+      margin-inline-start: utils.size('s');
+    }
+
+    @include item.item-typography;
+
+    @include utils.slotted(':not([slot])') {
+      width: 100%;
+    }
+
+    @include utils.slotted('input[slot="end"], kirby-form-field[slot="end"] input') {
+      margin-inline-start: utils.size('s');
+      width: auto;
+      text-align: right;
+    }
+  }
+
+  &.sm ion-item {
+    --min-height: #{map.get(utils.$item-heights, 's')};
+  }
+
+  &.xs ion-item {
+    --min-height: #{map.get(utils.$item-heights, 'xs')};
+    --inner-padding-top: #{utils.size('xxxs')};
+    --inner-padding-bottom: #{utils.size('xxxs')};
+  }
+
+  .outside {
+    left: utils.size('xxxs');
+    margin: 0;
+    position: absolute;
+    width: utils.size('s');
+    z-index: 1;
+  }
+}
+
+:host-context(kirby-dropdown) ion-item,
+:host-context(kirby-popover) ion-item {
+  --min-height: #{utils.$dropdown-item-height};
+}
+
+/* clean-css ignore:start */
+// Fixes https://github.com/kirbydesign/designsystem/issues/1745
+ion-item {
+  :host-context(kirby-list-item:first-of-type) & {
+    --padding-top: #{utils.size('xxs')};
+  }
+
+  :host-context(kirby-list-item:first-of-type kirby-card) & {
+    --padding-top: 0;
+  }
+
+  :host-context(kirby-list-item:last-of-type) & {
+    --padding-bottom: #{utils.size('xxs')};
+  }
+
+  :host-context(kirby-list-item:last-of-type kirby-card) & {
+    --padding-bottom: 0;
+  }
+}
+
+/* clean-css ignore:end */
+
+:host(.selected),
+:host-context(kirby-list .selected) {
+  ion-item {
+    @include utils.slotted(h1, h2, h3, h4, h5, h6, p, data) {
+      font-weight: utils.font-weight('bold');
+    }
+  }
+}
+
+// Fixes https://github.com/kirbydesign/designsystem/issues/1711
+:host-context(.shape-rounded .is-single) {
+  ion-item {
+    --border-radius: #{utils.$border-radius};
+  }
+}
+
+// Fixes https://github.com/kirbydesign/designsystem/issues/1711
+:host-context(.has-header .is-single) {
+  ion-item::part(native) {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+}
+
+// Fixes https://github.com/kirbydesign/designsystem/issues/1711
+:host-context(.has-footer .is-single) {
+  ion-item::part(native) {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+}
+
+// Fixes https://github.com/kirbydesign/designsystem/issues/1711
+:host-context(.shape-rounded.has-sections .list-items kirby-list-item:first-of-type) {
+  ion-item::part(native) {
+    border-top-left-radius: utils.$border-radius;
+    border-top-right-radius: utils.$border-radius;
+  }
+}

package/src/lib/components/item/item.component.spec.ts

@@ -0,0 +1,85 @@
+import { IonicModule } from '@ionic/angular';
+import { createHostFactory, SpectatorHost } from '@ngneat/spectator';
+import { MockModule } from 'ng-mocks';
+
+import { DesignTokenHelper } from '@kirbydesign/core';
+
+import { IconModule } from '../icon/icon.module';
+
+import { ItemComponent, ItemSize } from './item.component';
+
+const { itemHeight, size } = DesignTokenHelper;
+
+describe('ItemComponent', () => {
+  let spectator: SpectatorHost<ItemComponent>;
+
+  const createHost = createHostFactory({
+    imports: [MockModule(IonicModule), MockModule(IconModule)],
+    component: ItemComponent,
+  });
+
+  beforeEach(() => {
+    spectator = createHost('<kirby-item>Value</kirby-item>');
+  });
+
+  it('should create', () => {
+    expect(spectator.component).toBeTruthy();
+  });
+
+  it('should have size md as default', () => {
+    expect(spectator.query('ion-item')).toHaveComputedStyle({
+      '--min-height': itemHeight('m'),
+    });
+  });
+
+  describe('when configured with size', () => {
+    describe('and size = xs', () => {
+      it('should have correct item height and padding', () => {
+        spectator.component.size = ItemSize.XS;
+        spectator.detectChanges();
+
+        expect(spectator.query('ion-item')).toHaveComputedStyle({
+          '--min-height': itemHeight('xs'),
+          '--inner-padding-top': size('xxxs'),
+          '--inner-padding-bottom': size('xxxs'),
+        });
+      });
+    });
+
+    describe('and size = sm', () => {
+      it('should have correct item height', () => {
+        spectator.component.size = ItemSize.SM;
+        spectator.detectChanges();
+
+        expect(spectator.query('ion-item')).toHaveComputedStyle({
+          '--min-height': itemHeight('s'),
+        });
+      });
+    });
+
+    describe('and size = md', () => {
+      it('should have correct item height', () => {
+        spectator.component.size = ItemSize.MD;
+        spectator.detectChanges();
+
+        expect(spectator.query('ion-item')).toHaveComputedStyle({
+          '--min-height': itemHeight('m'),
+        });
+      });
+    });
+  });
+
+  describe('when --item-padding-top css custom property is set', () => {
+    it('should set correct --padding-top css custom property', () => {
+      spectator.element.style.setProperty('--item-padding-top', '8px');
+      expect(spectator.query('ion-item')).toHaveComputedStyle({ '--padding-top': size('xxs') });
+    });
+  });
+
+  describe('when --item-padding-bottom css custom property is set', () => {
+    it('should set correct --padding-bottom css custom property', () => {
+      spectator.element.style.setProperty('--item-padding-bottom', '8px');
+      expect(spectator.query('ion-item')).toHaveComputedStyle({ '--padding-bottom': size('xxs') });
+    });
+  });
+});

package/src/lib/components/item/item.component.ts

@@ -0,0 +1,37 @@
+import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';
+
+export enum ItemSize {
+  XS = 'xs',
+  SM = 'sm',
+  MD = 'md',
+}
+
+@Component({
+  selector: 'kirby-item',
+  templateUrl: './item.component.html',
+  styleUrls: ['./item.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ItemComponent {
+  @Input() disabled: boolean;
+  @HostBinding('class.selected')
+  @Input()
+  selected: boolean;
+  @Input()
+  selectable: boolean;
+  @Input()
+  reorderable: boolean;
+  @HostBinding('class')
+  @Input()
+  size: ItemSize | `${ItemSize}` = ItemSize.MD;
+
+  // Prevent default when inside kirby-dropdown to avoid blurring dropdown:
+  onMouseDown(event: MouseEvent) {
+    if (
+      event.currentTarget instanceof HTMLElement &&
+      event.currentTarget.closest('kirby-dropdown')
+    ) {
+      event.preventDefault();
+    }
+  }
+}

package/src/lib/components/item/item.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
+import { CommonModule } from '@angular/common';
+
+import { IconModule } from '../icon/icon.module';
+import { ItemComponent } from './item.component';
+import { LabelComponent } from './label/label.component';
+
+@NgModule({
+  imports: [IonicModule, IconModule, CommonModule],
+  declarations: [ItemComponent, LabelComponent],
+  exports: [ItemComponent, LabelComponent],
+})
+export class ItemModule {}

package/src/lib/components/item/label/label.component.html

@@ -0,0 +1,3 @@
+<ion-label>
+  <ng-content></ng-content>
+</ion-label>

package/src/lib/components/item/label/label.component.scss

@@ -0,0 +1,36 @@
+@use '~@kirbydesign/core/src/scss/utils';
+@use '../item.utils';
+@use '../../section-header/section-header.utils';
+
+:host {
+  &.horizontal ion-label {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+
+    @include utils.slotted(':not(:first-child)') {
+      margin-left: utils.size('xs');
+    }
+  }
+}
+
+:host-context(kirby-item) ion-label {
+  @include item.item-typography;
+}
+
+:host-context(kirby-section-header) ion-label {
+  @include section-header.typography;
+}
+
+:host([slot='end']) ion-label {
+  @include utils.slotted(data, '[detail]') {
+    margin-inline-start: utils.size('s');
+  }
+}
+
+:host-context(kirby-item.selected) ion-label {
+  @include utils.slotted(h1, h2, h3, h4, h5, h6, 'p:not([detail])', 'data:not([detail])') {
+    font-weight: utils.font-weight('bold');
+  }
+}

package/src/lib/components/item/label/label.component.spec.ts

@@ -0,0 +1,23 @@
+import { Spectator, createComponentFactory } from '@ngneat/spectator';
+import { MockModule } from 'ng-mocks';
+import { IonicModule } from '@ionic/angular';
+
+import { LabelComponent } from './label.component';
+
+describe('LabelComponent', () => {
+  let spectator: Spectator<LabelComponent>;
+
+  const createHost = createComponentFactory({
+    imports: [MockModule(IonicModule)],
+    component: LabelComponent,
+    declarations: [],
+  });
+
+  beforeEach(() => {
+    spectator = createHost({});
+  });
+
+  it('should create', () => {
+    expect(spectator.component).toBeTruthy();
+  });
+});

package/src/lib/components/item/label/label.component.ts

@@ -0,0 +1,16 @@
+import { Component, Input, HostBinding } from '@angular/core';
+
+@Component({
+  selector: 'kirby-label',
+  templateUrl: './label.component.html',
+  styleUrls: ['./label.component.scss'],
+})
+export class LabelComponent {
+  @Input()
+  direction: 'vertical' | 'horizontal' = 'vertical';
+
+  @HostBinding('class.horizontal')
+  get _direction() {
+    return this.direction === 'horizontal';
+  }
+}

package/src/lib/components/item-group/item-group.component.html

@@ -0,0 +1 @@
+<ng-content></ng-content>

package/src/lib/components/item-group/item-group.component.scss

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

package/src/lib/components/item-group/item-group.component.spec.ts

@@ -0,0 +1,42 @@
+import { IonItem } from '@ionic/angular';
+import { createHostFactory, SpectatorHost } from '@ngneat/spectator';
+import { MockComponent } from 'ng-mocks';
+
+import { ItemComponent } from '../item';
+
+import { ItemGroupComponent } from './item-group.component';
+
+describe('ItemGroup', () => {
+  let spectator: SpectatorHost<ItemGroupComponent>;
+
+  const createHost = createHostFactory({
+    component: ItemGroupComponent,
+    declarations: [ItemGroupComponent, MockComponent(ItemComponent)],
+  });
+
+  beforeEach(() => {
+    spectator = createHost<ItemGroupComponent>(`
+      <kirby-item-group>
+        <kirby-item>Test Item</kirby-item>
+        <kirby-item>Test Item</kirby-item>
+        <kirby-item>Test Item</kirby-item>
+        <kirby-item>Test Item</kirby-item>
+      </kirby-item-group>`);
+  });
+
+  it('should create', () => {
+    expect(spectator.component).toBeTruthy();
+  });
+
+  it('should render items in group', () => {
+    const items = spectator.queryHostAll('kirby-item');
+
+    expect(items).toHaveLength(4);
+  });
+
+  it('should have correct ARIA role', () => {
+    const itemGroup = spectator.queryHost('kirby-item-group');
+
+    expect(itemGroup.attributes['role'].value).toEqual('group');
+  });
+});

package/src/lib/components/item-group/item-group.component.ts

@@ -0,0 +1,10 @@
+import { Component, HostBinding } from '@angular/core';
+
+@Component({
+  selector: 'kirby-item-group',
+  templateUrl: './item-group.component.html',
+  styleUrls: ['./item-group.component.scss'],
+})
+export class ItemGroupComponent {
+  @HostBinding('attr.role') role: string = 'group';
+}

package/src/lib/components/item-sliding/index.ts

@@ -0,0 +1,2 @@
+export * from './item-sliding.types';
+export * from './item-sliding.component';

package/src/lib/components/item-sliding/item-sliding.component.html

@@ -0,0 +1,20 @@
+<ion-item-sliding>
+  <ng-content></ng-content>
+
+  <ion-item-options *ngIf="_hasSwipeActions" [side]="_side">
+    <ng-container *ngFor="let swipeAction of swipeActions">
+      <ion-item-option
+        *ngIf="!swipeAction.isDisabled"
+        [ngClass]="swipeAction.type"
+        (click)="swipeAction.onSelected()"
+      >
+        <kirby-icon
+          *ngIf="swipeAction.icon !== undefined"
+          [name]="swipeAction.icon"
+          slot="top"
+        ></kirby-icon>
+        <ion-label>{{ swipeAction.title }}</ion-label>
+      </ion-item-option>
+    </ng-container>
+  </ion-item-options>
+</ion-item-sliding>

package/src/lib/components/item-sliding/item-sliding.component.scss

@@ -0,0 +1,9 @@
+@use './item-sliding.shared.scss';
+
+:host {
+  display: block;
+}
+
+ion-item-option {
+  min-width: 92px;
+}