@kirbydesign/designsystem 0.0.0

package/src/lib/components/modal/action-sheet/action-sheet.component.spec.ts

@@ -0,0 +1,153 @@
+import { CUSTOM_ELEMENTS_SCHEMA, DebugElement } from '@angular/core';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/testing';
+import * as ionic from '@ionic/angular';
+import { MockComponent } from 'ng-mocks';
+
+import { ButtonComponent } from '../../button/button.component';
+import { CardHeaderComponent } from '../../card/card-header/card-header.component';
+import { CardComponent } from '../../card/card.component';
+import { InfiniteScrollDirective } from '../../list/directives/infinite-scroll.directive';
+import { ListItemColorDirective } from '../../list/directives/list-item-color.directive';
+import { ListComponent } from '../../list/list.component';
+import { GroupByPipe } from '../../list/pipes/group-by.pipe';
+import { SpinnerComponent } from '../../spinner/spinner.component';
+
+import { ActionSheetComponent } from './action-sheet.component';
+
+describe('ActionSheetComponent', () => {
+  let component: ActionSheetComponent;
+  let fixture: ComponentFixture<ActionSheetComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        ActionSheetComponent,
+        ListComponent,
+        CardComponent,
+        CardHeaderComponent,
+        GroupByPipe,
+        SpinnerComponent,
+        InfiniteScrollDirective,
+        ButtonComponent,
+        ListItemColorDirective,
+        MockComponent(ionic.IonList),
+        MockComponent(ionic.IonListHeader),
+        MockComponent(ionic.IonLabel),
+        MockComponent(ionic.IonItem),
+        MockComponent(ionic.IonItemDivider),
+        MockComponent(ionic.IonItemGroup),
+        MockComponent(ionic.IonItemOptions),
+        MockComponent(ionic.IonItemSliding),
+      ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    }).compileComponents();
+    TestBed.overrideModule(BrowserDynamicTestingModule, {
+      set: {
+        entryComponents: [ActionSheetComponent],
+      },
+    });
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ActionSheetComponent);
+    component = fixture.componentInstance;
+    component.header = 'Test header';
+    component.subheader = 'Test subheader';
+    component.items = [
+      { id: '1', text: 'Action 1' },
+      { id: '2', text: 'Action 2' },
+      { id: '3', text: 'Action 3' },
+    ];
+    component.cancelButtonText = 'Test cancel button text';
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('header', () => {
+    it('should render', () => {
+      const expected = 'Test header';
+      const rootElement: HTMLElement = fixture.debugElement.nativeElement;
+      const header = rootElement.querySelector('kirby-card-header header').firstElementChild;
+      expect(component.header).toEqual(expected);
+      expect(header.textContent).toEqual(expected);
+    });
+
+    it('should reflect changes in the UI', () => {
+      const newHeader = 'Another header';
+      component.header = newHeader;
+      fixture.detectChanges();
+      const rootElement: HTMLElement = fixture.debugElement.nativeElement;
+      const header = rootElement.querySelector('kirby-card-header header').firstElementChild;
+      expect(header.textContent).toEqual(newHeader);
+    });
+  });
+
+  describe('subheader', () => {
+    it('should render', () => {
+      const expected = 'Test subheader';
+      const rootElement: HTMLElement = fixture.debugElement.nativeElement;
+      const subheader = rootElement.querySelector('kirby-card-header header').lastElementChild;
+      expect(component.subheader).toEqual(expected);
+      expect(subheader.textContent).toEqual(expected);
+    });
+
+    it('should reflect changes in the UI', () => {
+      const newSubheader = 'Another subheader';
+      component.subheader = newSubheader;
+      fixture.detectChanges();
+      const rootElement: HTMLElement = fixture.debugElement.nativeElement;
+      const subheader = rootElement.querySelector('kirby-card-header header').lastElementChild;
+      expect(subheader.textContent).toEqual(newSubheader);
+    });
+  });
+
+  describe('actions', () => {
+    it('should contain each item', () => {
+      const rootElement: DebugElement = fixture.debugElement;
+      const actionSheetItems = rootElement
+        .query(By.directive(CardComponent))
+        .queryAll(By.directive(ButtonComponent));
+      expect(actionSheetItems.length).toBe(3);
+      Array.from(actionSheetItems).forEach((item, index) => {
+        expect(item.nativeElement.innerText).toEqual(`Action ${index + 1}`);
+      });
+    });
+
+    it('should reflect add/remove/edit changes of items', () => {
+      component.items = [
+        { id: '1', text: 'New Action 1' },
+        { id: '2', text: 'Action 2' },
+        { id: '4', text: 'Action 4' },
+      ];
+
+      fixture.detectChanges();
+      const rootElement: DebugElement = fixture.debugElement;
+      const actionSheetItems = rootElement
+        .query(By.directive(CardComponent))
+        .queryAll(By.directive(ButtonComponent));
+      const actionSheetItemsText = Array.from(actionSheetItems).map((item) => {
+        return item.nativeElement.innerText;
+      });
+      expect(actionSheetItemsText).not.toContain('Action 1');
+      expect(actionSheetItemsText).toContain('New Action 1');
+      expect(actionSheetItemsText).toContain('Action 2');
+      expect(actionSheetItemsText).not.toContain('Action 3');
+      expect(actionSheetItemsText).toContain('Action 4');
+    });
+  });
+
+  describe('cancel button text', () => {
+    it('should render', () => {
+      const expected = 'Test cancel button text';
+      fixture.detectChanges();
+      const cancelButton = fixture.debugElement.query(By.css('.cancel-btn'));
+      expect(component.cancelButtonText).toEqual(expected);
+      expect(cancelButton.nativeElement.innerText).toEqual(expected);
+    });
+  });
+});

package/src/lib/components/modal/action-sheet/action-sheet.component.ts

@@ -0,0 +1,27 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+import { ActionSheetItem } from './config/action-sheet-item';
+
+@Component({
+  selector: 'kirby-action-sheet',
+  templateUrl: './action-sheet.component.html',
+  styleUrls: ['./action-sheet.component.scss'],
+})
+export class ActionSheetComponent {
+  @Input() cancelButtonText = 'Cancel';
+  @Input() hideCancel: boolean = false;
+  @Input() disabled: boolean = false;
+  @Input() header: string;
+  @Input() subheader: string;
+  @Input() items: Array<ActionSheetItem>;
+  @Output() cancel = new EventEmitter();
+  @Output() itemSelect: EventEmitter<ActionSheetItem> = new EventEmitter<ActionSheetItem>();
+
+  onItemSelect(selection: ActionSheetItem) {
+    this.itemSelect.emit(selection);
+  }
+
+  onCancel() {
+    this.cancel.emit();
+  }
+}

package/src/lib/components/modal/action-sheet/config/action-sheet-config.ts

@@ -0,0 +1,8 @@
+import { ActionSheetItem } from './action-sheet-item';
+
+export interface ActionSheetConfig {
+  header?: string;
+  subheader?: string;
+  items: Array<ActionSheetItem>;
+  cancelButtonText?: string;
+}

package/src/lib/components/modal/action-sheet/config/action-sheet-item.ts

@@ -0,0 +1,4 @@
+export interface ActionSheetItem {
+  id: string;
+  text: string;
+}

package/src/lib/components/modal/alert/alert.component.html

@@ -0,0 +1,29 @@
+<article #alertWrapper>
+  <kirby-empty-state
+    [iconName]="iconName"
+    [themeColor]="iconThemeColor"
+    [title]="title$ | async"
+    [subtitle]="message$ | async"
+  ></kirby-empty-state>
+  <div class="buttongroup">
+    <button
+      kirby-button
+      *ngIf="cancelBtn"
+      attentionLevel="3"
+      class="cancel-btn"
+      (click)="onCancel()"
+    >
+      {{ cancelBtn }}
+    </button>
+    <button
+      kirby-button
+      [size]="cancelBtn ? null : 'lg'"
+      attentionLevel="1"
+      class="ok-btn"
+      [isDestructive]="okBtnIsDestructive"
+      (click)="onOk()"
+    >
+      {{ okBtn }}
+    </button>
+  </div>
+</article>

package/src/lib/components/modal/alert/alert.component.scss

@@ -0,0 +1,21 @@
+@use '~@kirbydesign/core/src/scss/utils';
+
+article {
+  overflow: hidden;
+  padding: utils.size('s');
+  padding-top: utils.size('m');
+  @include utils.media('<small') {
+    padding: utils.size('xxs');
+  }
+}
+
+.buttongroup {
+  display: flex;
+  justify-content: space-around;
+
+  button {
+    width: 50%;
+    margin-left: 6px;
+    margin-right: 6px;
+  }
+}

package/src/lib/components/modal/alert/alert.component.spec.ts

@@ -0,0 +1,104 @@
+import { createHostFactory, SpectatorHost } from '@ngneat/spectator';
+
+import { DesignTokenHelper } from '@kirbydesign/core';
+
+import { ButtonComponent } from '../../button/button.component';
+import { EmptyStateComponent } from '../../empty-state/empty-state.component';
+
+import { AlertComponent } from './alert.component';
+
+const getColor = DesignTokenHelper.getColor;
+
+describe('AlertComponent', () => {
+  let spectator: SpectatorHost<AlertComponent>;
+
+  const createHost = createHostFactory({
+    component: AlertComponent,
+    declarations: [ButtonComponent, EmptyStateComponent],
+  });
+
+  beforeEach(() => {
+    spectator = createHost(`
+      <kirby-alert 
+        okBtn="Test OK Button Text"
+        cancelBtn="Test Cancel Button Text"
+      >
+      </kirby-alert>
+    `);
+  });
+
+  it('should create', () => {
+    expect(spectator.component).toBeTruthy();
+  });
+
+  describe('ok button', () => {
+    let okButton: HTMLElement;
+
+    beforeEach(() => {
+      okButton = spectator.query('.ok-btn');
+    });
+    it('should render', () => {
+      const expected = 'Test OK Button Text';
+
+      expect(spectator.component.okBtn).toEqual(expected);
+      expect(okButton).toHaveText(expected);
+    });
+
+    it('should support isDestructive', () => {
+      spectator.setInput({ okBtnIsDestructive: true });
+
+      expect(okButton).toBeDefined();
+      expect(okButton).toHaveClass('destructive');
+    });
+
+    it('should default to not being destructive', () => {
+      expect(okButton).toBeDefined();
+      expect(okButton).not.toHaveClass('destructive');
+    });
+
+    it('should have large ok button when no cancel button', () => {
+      spectator.setInput({ cancelBtn: null });
+
+      expect(okButton).toHaveClass('lg');
+    });
+
+    it('should have success colors on button', () => {
+      expect(okButton).toHaveComputedStyle({
+        'background-color': getColor('success'),
+        color: getColor('success', 'contrast'),
+      });
+    });
+
+    it('should have default size when cancel button', () => {
+      expect(okButton.attributes['ng-reflect-size']).toBeUndefined();
+    });
+  });
+
+  describe('cancel button', () => {
+    let cancelButton: HTMLElement;
+
+    beforeEach(() => {
+      cancelButton = spectator.query('.cancel-btn');
+    });
+    it('should render', () => {
+      const expected = 'Test Cancel Button Text';
+
+      expect(spectator.component.cancelBtn).toEqual(expected);
+      expect(cancelButton).toHaveText(expected);
+    });
+
+    it('should not render when cancelBtn not set', () => {
+      spectator.setInput({ cancelBtn: null });
+
+      expect(spectator.query('.cancel-btn')).toBeNull();
+    });
+  });
+  describe('icon', () => {
+    it('should render', () => {
+      spectator.setInput({ iconName: 'warning' });
+      const icon: HTMLElement = spectator.query('.icon-outline');
+
+      expect(icon).not.toBeNull();
+    });
+  });
+});

package/src/lib/components/modal/alert/alert.component.ts

@@ -0,0 +1,67 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  Input,
+  ViewChild,
+} from '@angular/core';
+import { Observable, of } from 'rxjs';
+
+import { WindowRef } from '../../../types/window-ref';
+
+@Component({
+  selector: 'kirby-alert',
+  templateUrl: './alert.component.html',
+  styleUrls: ['./alert.component.scss'],
+  // tslint:disable-next-line: no-host-metadata-property
+  host: { '[class.ion-page]': 'false' }, //Ensure ion-page class doesn't get applied by Ionic Modal Controller
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AlertComponent implements AfterViewInit {
+  readonly BLUR_WRAPPER_DELAY_IN_MS = 50;
+  @ViewChild('alertWrapper', { static: true }) private alertWrapper: ElementRef;
+  private scrollY: number = Math.abs(this.windowRef.nativeWindow.scrollY);
+
+  title$: Observable<string>;
+  @Input()
+  set title(title: string | Observable<string>) {
+    this.title$ = typeof title === 'string' ? of(title) : title;
+  }
+
+  message$: Observable<string>;
+  @Input()
+  set message(message: string & Observable<string>) {
+    this.message$ = typeof message === 'string' ? of(message) : message;
+  }
+
+  @Input() iconName: string;
+  @Input() iconThemeColor: string;
+  @Input() okBtn: string;
+  @Input() okBtnIsDestructive: boolean;
+  @Input() cancelBtn: string;
+
+  constructor(private elementRef: ElementRef<HTMLElement>, private windowRef: WindowRef) {}
+
+  ngAfterViewInit(): void {
+    setTimeout(() => {
+      this.alertWrapper.nativeElement.focus();
+      this.alertWrapper.nativeElement.blur();
+    }, this.BLUR_WRAPPER_DELAY_IN_MS);
+  }
+
+  onFocusChange() {
+    // This fixes an undesired scroll behaviour occurring on keyboard-tabbing
+    this.windowRef.nativeWindow.scrollTo({ top: this.scrollY });
+  }
+
+  onCancel() {
+    const ionModalElement = this.elementRef.nativeElement.closest('ion-modal');
+    ionModalElement && ionModalElement.dismiss(false);
+  }
+
+  onOk() {
+    const ionModalElement = this.elementRef.nativeElement.closest('ion-modal');
+    ionModalElement && ionModalElement.dismiss(true);
+  }
+}

package/src/lib/components/modal/alert/config/alert-config.ts

@@ -0,0 +1,19 @@
+import { Observable } from 'rxjs';
+
+export interface AlertConfig {
+  title: string | Observable<string>;
+  message?: string | Observable<string>;
+  cancelBtn?: string;
+
+  icon?: {
+    name: string;
+    themeColor?: string;
+  };
+
+  okBtn?:
+    | string
+    | {
+        text: string;
+        isDestructive: boolean;
+      };
+}

package/src/lib/components/modal/footer/modal-footer.component.html

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

package/src/lib/components/modal/footer/modal-footer.component.scss

@@ -0,0 +1,57 @@
+@use '~@kirbydesign/core/src/scss/utils';
+
+$padding-horizontal: utils.size('s');
+$padding-vertical: utils.size('xxs');
+
+ion-footer {
+  box-shadow: utils.get-elevation(8);
+  display: flex;
+  justify-content: var(--kirby-modal-footer-justify-content, center);
+  align-items: center;
+  background-color: var(--kirby-modal-footer-background, utils.get-color('white'));
+  color: var(--kirby-modal-footer-color, utils.get-color('white-contrast'));
+  padding: $padding-vertical $padding-horizontal;
+  padding-bottom: calc(#{$padding-vertical} + var(--kirby-modal-footer-safe-area-bottom, 0px));
+}
+
+@include utils.media('<medium') {
+  :host {
+    --kirby-modal-footer-safe-area-bottom: var(--kirby-safe-area-bottom);
+  }
+}
+
+:host(.snap-to-keyboard) {
+  ion-footer {
+    transition: transform utils.$soft-keyboard-transition-leave;
+  }
+}
+
+:host(.light) ion-footer {
+  background-color: utils.get-color('background-color');
+}
+
+:host(.inline) ion-footer {
+  background: transparent;
+  box-shadow: none;
+}
+
+:host-context(.keyboard-visible) {
+  &.snap-to-keyboard {
+    ion-footer {
+      transition: transform utils.$soft-keyboard-transition-enter;
+
+      // Prevent clean-css from replacing `0px` with `0` or `calc()` won't work:
+
+      /* clean-css ignore:start */
+      transform: translateY(
+        calc((var(--keyboard-offset, 0px) - var(--kirby-modal-footer-safe-area-bottom, 0px)) * -1)
+      );
+
+      /* clean-css ignore:end */
+    }
+  }
+}
+
+:host-context(.modal-wrapper.full-height) {
+  --kirby-modal-footer-safe-area-bottom: var(--kirby-safe-area-bottom);
+}