@kirbydesign/designsystem 0.0.0

package/src/lib/components/reorder-list/reorder-list.component.spec.ts

@@ -0,0 +1,123 @@
+import { createComponentFactory, Spectator } from '@ngneat/spectator';
+import { MockComponent } from 'ng-mocks';
+
+import { TestHelper } from '../../testing/test-helper';
+import { CardComponent } from '../card';
+import { IconModule } from '../icon/icon.module';
+import { ItemComponent } from '../item';
+
+import { ReorderEvent } from './reorder-event';
+import { ReorderListComponent } from './reorder-list.component';
+
+describe('ReorderListComponent', () => {
+  let spectator: Spectator<ReorderListComponent>;
+  let component: ReorderListComponent;
+  const items = [
+    { title: '1', subItems: [{ title: '1a' }, { title: '1b' }, { title: '1c' }] },
+    { title: '2' },
+    { title: '3' },
+  ];
+
+  function runNgOnChanges() {
+    // Forces ngOnChanges to run (since that won't happen, when inputs are changed programmatically)
+    component.ngOnChanges();
+    // Detect changes, since ngOnChanges altered state of component
+    spectator.detectChanges();
+  }
+
+  const createHost = createComponentFactory({
+    imports: [TestHelper.ionicModuleForTest, IconModule],
+    component: ReorderListComponent,
+    declarations: [MockComponent(CardComponent), MockComponent(ItemComponent)],
+  });
+
+  beforeEach(() => {
+    spectator = createHost({
+      props: {
+        items: items,
+        subItemsName: 'subItems',
+        getItemTextDefault: (item: any) => {
+          return item.title;
+        },
+      },
+    });
+    component = spectator.component;
+  });
+
+  it('should create', () => {
+    expect(spectator.component).toBeTruthy();
+  });
+
+  describe('items', () => {
+    it('should render a card for each item in array', () => {
+      expect(spectator.queryAll('kirby-card').length).toBe(items.length);
+    });
+
+    it('should accept null items without errors', () => {
+      spectator.setInput({
+        items: null,
+      });
+      runNgOnChanges();
+
+      expect(spectator.component.items).toBe(null);
+    });
+  });
+
+  describe('event: itemReorder', () => {
+    it('should emit event', () => {
+      spyOn(spectator.component.itemReorder, 'emit');
+
+      let customEvent = new CustomEvent('itemReorder test', { detail: {} });
+
+      spectator.component.doReorder(customEvent);
+
+      expect(spectator.component.itemReorder.emit).toHaveBeenCalledTimes(1);
+      expect(spectator.component.itemReorder.emit).toHaveBeenCalledWith(jasmine.any(ReorderEvent));
+    });
+  });
+
+  describe('event: subItemReorder', () => {
+    it('should emit event with parentItem', () => {
+      spyOn(spectator.component.subItemReorder, 'emit');
+
+      let customEvent = new CustomEvent('subItemReorder test', { detail: {} });
+      spectator.component.doSubReorder(customEvent, items[0]);
+
+      expect(spectator.component.subItemReorder.emit).toHaveBeenCalledTimes(1);
+      expect(spectator.component.subItemReorder.emit).toHaveBeenCalledWith(
+        jasmine.any(ReorderEvent)
+      );
+      let arg: any = (spectator.component.subItemReorder.emit as any).calls.mostRecent().args[0];
+      expect(arg.parentItem).toEqual(items[0]);
+    });
+  });
+
+  describe('subItems', () => {
+    it('should render a kirby-item for each item in subitems array', () => {
+      expect(spectator.queryAll('kirby-card ion-reorder-group kirby-item').length).toBe(
+        items[0].subItems.length
+      );
+    });
+
+    it('should accept invalid name, but not show anything', () => {
+      spectator.setInput({
+        items: items,
+        subItemsName: 'invalidName',
+      });
+      runNgOnChanges();
+
+      expect(spectator.queryAll('kirby-card ion-reorder-group kirby-item').length).toBe(0);
+    });
+
+    it('should not show anything, if subitems array is empty', () => {
+      items[0].subItems = [];
+      spectator.setInput({
+        items: items,
+        subItemsName: 'subItems',
+      });
+      runNgOnChanges();
+
+      expect(spectator.queryAll('kirby-card ion-reorder-group kirby-item').length).toBe(0);
+    });
+  });
+});

package/src/lib/components/reorder-list/reorder-list.component.ts

@@ -0,0 +1,86 @@
+import {
+  ChangeDetectorRef,
+  Component,
+  ContentChild,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnDestroy,
+  Output,
+  QueryList,
+  TemplateRef,
+  ViewChildren,
+} from '@angular/core';
+
+import { ListItemTemplateDirective } from '../list/list.directive';
+
+import { ReorderEvent } from './reorder-event';
+
+@Component({
+  selector: 'kirby-reorder-list',
+  templateUrl: './reorder-list.component.html',
+  styleUrls: ['./reorder-list.component.scss'],
+})
+export class ReorderListComponent implements OnChanges, OnDestroy {
+  @Input() items: any[];
+  @Input() subItemsName: string;
+  @Input() getItemTextDefault: (item: any) => string;
+
+  @Output() itemReorder = new EventEmitter<ReorderEvent>();
+  @Output() subItemReorder = new EventEmitter<ReorderEvent>();
+
+  @ContentChild(ListItemTemplateDirective, { static: true, read: TemplateRef })
+  itemTemplate: TemplateRef<any>;
+  @ViewChildren('reorderGroupContainer')
+  reorderGroupContainer: QueryList<ElementRef>;
+
+  private observer: MutationObserver;
+  reorderActive: boolean = false;
+
+  constructor(private cdr: ChangeDetectorRef) {}
+
+  ngOnChanges(): void {
+    if (this.items && this.items.length > 0) {
+      setTimeout(() => {
+        this.setupDomListener();
+      });
+    }
+  }
+
+  private setupDomListener() {
+    const callback = (mutationsList: any) => {
+      for (let mutation of mutationsList) {
+        if (mutation.oldValue !== mutation.target['className']) {
+          this.reorderActive = mutation.target['className'].includes('reorder-list-active');
+        }
+      }
+      this.cdr.detectChanges();
+    };
+    this.observer = new MutationObserver(callback);
+
+    this.reorderGroupContainer.forEach((div: ElementRef) => {
+      this.observer.observe(div.nativeElement, {
+        attributes: true,
+        attributeFilter: ['class'],
+        attributeOldValue: true,
+        childList: false,
+        subtree: true,
+      });
+    });
+  }
+
+  doReorder(ev: CustomEvent) {
+    this.itemReorder.emit(new ReorderEvent(ev));
+  }
+
+  doSubReorder(ev: CustomEvent, parentItem: any) {
+    this.subItemReorder.emit(new ReorderEvent(ev, parentItem));
+  }
+
+  ngOnDestroy() {
+    //clean up the observer
+    this.observer && this.observer.disconnect();
+    delete this.observer;
+  }
+}

package/src/lib/components/router-outlet/index.ts

@@ -0,0 +1,5 @@
+export { RouterOutletComponent } from './router-outlet.component';
+export { RouterOutletModule } from './router-outlet.module';
+/* NavController allows consumers to navigate with correct 
+  animations when using the router outlet */
+export { NavController } from '@ionic/angular';

package/src/lib/components/router-outlet/router-outlet.component.html

@@ -0,0 +1,6 @@
+<ng-container *ngIf="main">
+  <ion-router-outlet main></ion-router-outlet>
+</ng-container>
+<ng-container *ngIf="!main">
+  <ion-router-outlet></ion-router-outlet>
+</ng-container>

package/src/lib/components/router-outlet/router-outlet.component.scss

@@ -0,0 +1,13 @@
+@use '~@kirbydesign/core/src/scss/utils';
+
+:host {
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  position: absolute;
+  contain: size layout style;
+  z-index: 0;
+  overflow: hidden;
+  background-color: utils.get-color('background-color');
+}

package/src/lib/components/router-outlet/router-outlet.component.spec.ts

@@ -0,0 +1,28 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+
+import { RouterOutletComponent } from './router-outlet.component';
+
+describe('PageComponent', () => {
+  let component: RouterOutletComponent;
+  let fixture: ComponentFixture<RouterOutletComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [NoopAnimationsModule],
+      declarations: [RouterOutletComponent],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RouterOutletComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/router-outlet/router-outlet.component.ts

@@ -0,0 +1,11 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'kirby-router-outlet',
+  templateUrl: './router-outlet.component.html',
+  styleUrls: ['./router-outlet.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class RouterOutletComponent {
+  @Input() main: boolean;
+}

package/src/lib/components/router-outlet/router-outlet.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IonicModule } from '@ionic/angular';
+
+import { RouterOutletComponent } from './router-outlet.component';
+
+@NgModule({
+  declarations: [RouterOutletComponent],
+  imports: [CommonModule, IonicModule],
+  exports: [RouterOutletComponent],
+})
+export class RouterOutletModule {}

package/src/lib/components/section-header/_section-header.utils.scss

@@ -0,0 +1,34 @@
+@use '~@kirbydesign/core/src/scss/utils';
+
+/*
+* This mixin is applied both in the section-header styles, for using 
+* headings and paragraphs directly, and in kirby-label styles, for 
+* wrapping them in a kirby-label within a section-header. 
+*/
+
+@mixin typography() {
+  --padding-end: #{utils.size('s')};
+  --padding-start: #{utils.size('s')};
+
+  @include utils.slotted('[heading]') {
+    font-weight: utils.font-weight('bold');
+    font-size: utils.font-size('m');
+    line-height: utils.line-height('m');
+    color: var(--kirby-section-header-color);
+    margin: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  @include utils.slotted('[detail]', '[label]') {
+    font-weight: utils.font-weight('light');
+    font-size: utils.font-size('s');
+    line-height: utils.line-height('s');
+    color: var(--kirby-section-header-color);
+    margin: utils.size('xxxs') 0 utils.size('xxs');
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}

package/src/lib/components/section-header/section-header.component.html

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

package/src/lib/components/section-header/section-header.component.scss

@@ -0,0 +1,15 @@
+@use '~@kirbydesign/core/src/scss/utils';
+@use './section-header.utils';
+
+:host {
+  --kirby-section-header-color: #{utils.get-text-color('black')};
+
+  ion-item-divider {
+    --inner-padding-end: 0;
+    --background: transparent;
+    @include section-header.typography;
+
+    font-weight: inherit;
+    min-height: 0;
+  }
+}

package/src/lib/components/section-header/section-header.component.spec.ts

@@ -0,0 +1,59 @@
+import { IonItemDivider } from '@ionic/angular';
+import { createHostFactory, SpectatorHost } from '@ngneat/spectator';
+import { MockComponent } from 'ng-mocks';
+
+import { DesignTokenHelper } from '../../helpers';
+
+import { SectionHeaderComponent } from './section-header.component';
+
+const { fontSize, fontWeight, lineHeight } = DesignTokenHelper;
+
+describe('SectionHeaderComponent', () => {
+  let spectator: SpectatorHost<SectionHeaderComponent>;
+
+  const createHost = createHostFactory({
+    component: SectionHeaderComponent,
+    declarations: [SectionHeaderComponent, MockComponent(IonItemDivider)],
+  });
+
+  beforeEach(() => {
+    spectator = createHost<SectionHeaderComponent>(`<kirby-section-header>
+      <p heading>Section Header</p>
+      <p label>Section Header</p>
+      <p detail>Section Header</p>
+    </kirby-section-header>`);
+  });
+
+  it('should create', () => {
+    expect(spectator.component).toBeTruthy();
+  });
+
+  describe('with heading, detail and label attributes', () => {
+    it('should have heading with correct typography styles', () => {
+      const heading = spectator.queryHost<HTMLElement>('[heading]');
+      expect(heading).toHaveComputedStyle({
+        'font-size': fontSize('m'),
+        'font-weight': fontWeight('bold'),
+        'line-height': lineHeight('m'),
+      });
+    });
+
+    it('should have detail with correct typography styles', () => {
+      const detail = spectator.queryHost<HTMLElement>('[detail]');
+      expect(detail).toHaveComputedStyle({
+        'font-size': fontSize('s'),
+        'font-weight': fontWeight('light'),
+        'line-height': lineHeight('s'),
+      });
+    });
+
+    it('should have label with correct typography styles', () => {
+      const label = spectator.queryHost<HTMLElement>('[label]');
+      expect(label).toHaveComputedStyle({
+        'font-size': fontSize('s'),
+        'font-weight': fontWeight('light'),
+        'line-height': lineHeight('s'),
+      });
+    });
+  });
+});

package/src/lib/components/section-header/section-header.component.ts

@@ -0,0 +1,9 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'kirby-section-header',
+  templateUrl: './section-header.component.html',
+  styleUrls: ['./section-header.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SectionHeaderComponent {}

package/src/lib/components/section-header/section-header.integration.spec.ts

@@ -0,0 +1,67 @@
+import { IonItemDivider, IonLabel } from '@ionic/angular';
+import { createHostFactory, SpectatorHost } from '@ngneat/spectator';
+import { MockComponent } from 'ng-mocks';
+
+import { DesignTokenHelper } from '../../helpers';
+import { LabelComponent } from '../item/label/label.component';
+
+import { SectionHeaderComponent } from './section-header.component';
+
+const { fontSize, fontWeight, lineHeight } = DesignTokenHelper;
+
+describe('SectionHeaderComponent with Kirby Label', () => {
+  let spectator: SpectatorHost<SectionHeaderComponent>;
+
+  const createHost = createHostFactory({
+    component: SectionHeaderComponent,
+    declarations: [
+      SectionHeaderComponent,
+      LabelComponent,
+      MockComponent(IonItemDivider),
+      MockComponent(IonLabel),
+    ],
+  });
+
+  beforeEach(() => {
+    spectator = createHost<SectionHeaderComponent>(`<kirby-section-header>
+      <kirby-label>
+        <p heading>Section Header</p>
+        <p label>Section Header</p>
+        <p detail>Section Header</p>
+      </kirby-label>
+    </kirby-section-header>`);
+  });
+
+  it('should create', () => {
+    expect(spectator.component).toBeTruthy();
+  });
+
+  describe('with kirby-label around heading, detail and label', () => {
+    it('should have heading with correct typography styles', () => {
+      const heading = spectator.queryHost<HTMLElement>('[heading]');
+      expect(heading).toHaveComputedStyle({
+        'font-size': fontSize('m'),
+        'font-weight': fontWeight('bold'),
+        'line-height': lineHeight('m'),
+      });
+    });
+
+    it('should have detail with correct typography styles', () => {
+      const detail = spectator.queryHost<HTMLElement>('[detail]');
+      expect(detail).toHaveComputedStyle({
+        'font-size': fontSize('s'),
+        'font-weight': fontWeight('light'),
+        'line-height': lineHeight('s'),
+      });
+    });
+
+    it('should have label with correct typography styles', () => {
+      const label = spectator.queryHost<HTMLElement>('[label]');
+      expect(label).toHaveComputedStyle({
+        'font-size': fontSize('s'),
+        'font-weight': fontWeight('light'),
+        'line-height': lineHeight('s'),
+      });
+    });
+  });
+});

package/src/lib/components/segmented-control/segment-item.ts

@@ -0,0 +1,18 @@
+import { ThemeColor } from '@kirbydesign/core';
+
+type SegmentItemBadge = {
+  content?: string;
+  icon?: string;
+  isCustomIcon?: boolean;
+  description?: string;
+  themeColor: ThemeColor;
+};
+export interface SegmentItem {
+  id: string;
+  text: string;
+  badge?: Omit<SegmentItemBadge, 'isCustomIcon'>; // we do not expose the isCustomIcon for the external type
+}
+
+export interface SegmentItemInternal extends SegmentItem {
+  badge?: SegmentItemBadge;
+}

package/src/lib/components/segmented-control/segmented-control.component.html

@@ -0,0 +1,39 @@
+<ion-segment
+  *ngIf="mode === 'default'"
+  [value]="value?.id"
+  (ionChange)="onSegmentSelect($event.detail.value)"
+  (click)="preventWrapperClick($event)"
+>
+  <div *ngFor="let item of items" class="segment-btn-wrapper">
+    <ion-segment-button [value]="item.id">{{ item.text }}</ion-segment-button>
+    <kirby-badge
+      *ngIf="item.badge"
+      role="text"
+      [attr.aria-label]="item.badge.description"
+      [themeColor]="item.badge.themeColor"
+    >
+      <ng-container *ngIf="item.badge.icon; else badgeContent">
+        <kirby-icon
+          *ngIf="item.badge.isCustomIcon; else defaultIconName"
+          [customName]="item.badge.icon"
+        ></kirby-icon>
+        <ng-template #defaultIconName>
+          <kirby-icon [name]="item.badge.icon"></kirby-icon>
+        </ng-template>
+      </ng-container>
+      <ng-template #badgeContent>
+        {{ item.badge.content }}
+      </ng-template>
+    </kirby-badge>
+  </div>
+</ion-segment>
+
+<ng-container *ngIf="mode === 'chip' || mode === 'compactChip'">
+  <kirby-chip
+    *ngFor="let item of items; let index = index"
+    [text]="item.text"
+    [isSelected]="index === selectedIndex"
+    (click)="onSegmentSelect(item.id)"
+    role="button"
+  ></kirby-chip>
+</ng-container>

package/src/lib/components/segmented-control/segmented-control.component.scss

@@ -0,0 +1,84 @@
+@use '~@kirbydesign/core/src/scss/utils';
+
+:host {
+  display: block;
+  user-select: none;
+
+  --kirby-badge-elevation: #{utils.get-elevation(2)};
+  --kirby-badge-position: absolute;
+  --kirby-badge-top: -#{utils.size('xxs')};
+  --kirby-badge-right: #{utils.size('xxs')};
+  --kirby-badge-z-index: #{utils.z('segment-badge')};
+
+  &.sm {
+    ion-segment-button {
+      min-height: utils.size('l');
+      font-size: utils.font-size('xs');
+
+      --padding-start: #{utils.size('s')};
+      --padding-end: #{utils.size('s')};
+    }
+  }
+
+  &.chip-mode {
+    display: flex;
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    overflow-y: hidden; // chip touch area height is bigger than segmented control height
+    // Hide scrollbar on touch device:
+    @include utils.touch {
+      scrollbar-width: none; /* Firefox */
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
+  }
+}
+
+ion-segment {
+  display: inline-flex; // The segmented control itself is block-level, but we don't want the background to stretch
+  width: auto; // The segmented control itself is block-level, but we don't want the background to stretch
+  overflow: visible; // Ensures the badge is not cut off
+  contain: unset; // Ensures the badge is not cut off
+
+  --background: #{utils.get-color('white')};
+
+  border-radius: utils.$border-radius-round;
+}
+
+ion-segment-button {
+  @include utils.accessible-target-size;
+
+  min-height: utils.size('xl');
+  font-weight: utils.font-weight('normal');
+  font-size: utils.font-size('s');
+  text-transform: none;
+
+  --border-radius: #{utils.$border-radius-round};
+  --border-style: none;
+  --background: none;
+  --color: #{utils.get-color('white-contrast')};
+  --indicator-color: #{utils.get-color('black')};
+  --color-checked: #{utils.get-color('black-contrast')};
+  --color-hover: #{utils.get-color('black-tint')};
+  --indicator-box-shadow: none;
+  --padding-start: #{utils.size('m')};
+  --padding-end: #{utils.size('m')};
+  --margin-bottom: 0;
+  --margin-end: 0;
+  --margin-start: 0;
+  --margin-top: 0;
+
+  margin: 0;
+}
+
+.segment-btn-wrapper {
+  position: relative;
+}
+
+:host-context(.plt-desktop) {
+  ion-segment-button:focus-within {
+    outline-color: -webkit-focus-ring-color;
+    outline-style: auto;
+  }
+}