@kirbydesign/designsystem 0.0.0

package/src/lib/components/modal/footer/modal-footer.component.spec.ts

@@ -0,0 +1,209 @@
+import { Component } from '@angular/core';
+import { IonFooter } from '@ionic/angular';
+import { createHostFactory, SpectatorHost } from '@ngneat/spectator';
+import { MockComponents } from 'ng-mocks';
+
+import { DesignTokenHelper } from '@kirbydesign/core';
+
+import { ThemeColorDirective } from '../../../directives';
+import { TestHelper } from '../../../testing/test-helper';
+import { ModalFooterComponent } from '../footer/modal-footer.component';
+
+const getColor = DesignTokenHelper.getColor;
+const size = DesignTokenHelper.size;
+
+const KEYBOARD_HEIGHT = 216; // sample value, depends upon device
+const BASE_PADDING_VERTICAL_PX = size('xxs');
+const BASE_PADDING_VERTICAL = parseInt(BASE_PADDING_VERTICAL_PX);
+const BASE_PADDING_HORIZONTAL_PX = size('s');
+const SAFE_AREA_BOTTOM = 22;
+const SAFE_AREA_BOTTOM_PX = `${SAFE_AREA_BOTTOM}px`;
+
+const TRANSFORM_PUSHED_BY_KEYBOARD = `matrix(1, 0, 0, 1, 0, -${KEYBOARD_HEIGHT})`;
+
+@Component({
+  template: '<kirby-modal-footer [snapToKeyboard]="snapToKeyboard"></kirby-modal-footer>',
+})
+class TestHostComponent {
+  snapToKeyboard = false;
+}
+
+describe('ModalFooterComponent', () => {
+  let spectator: SpectatorHost<ModalFooterComponent, TestHostComponent>;
+  let modalFooterElement: HTMLElement;
+  let ionFooterElement: HTMLIonFooterElement;
+
+  const createHost = createHostFactory({
+    component: ModalFooterComponent,
+    host: TestHostComponent,
+    declarations: [MockComponents(IonFooter), ThemeColorDirective],
+  });
+
+  beforeEach(() => {});
+
+  it('should create', () => {
+    spectator = createHost(`<kirby-modal-footer></kirby-modal-footer>`);
+    expect(spectator.component).toBeTruthy();
+  });
+
+  it('should set correct padding', () => {
+    spectator = createHost(`<kirby-modal-footer></kirby-modal-footer>`);
+    expect(spectator.component).toBeTruthy();
+    ionFooterElement = spectator.query('ion-footer');
+    expect(ionFooterElement).toHaveComputedStyle({
+      'padding-left': BASE_PADDING_HORIZONTAL_PX,
+      'padding-right': BASE_PADDING_HORIZONTAL_PX,
+      'padding-top': BASE_PADDING_VERTICAL_PX,
+      'padding-bottom': BASE_PADDING_VERTICAL_PX,
+    });
+  });
+
+  describe('Set bottom padding', () => {
+    beforeEach(() => {
+      spectator = createHost(`<kirby-modal-footer></kirby-modal-footer>`);
+      modalFooterElement = spectator.element;
+      ionFooterElement = spectator.query('ion-footer');
+    });
+
+    it('when --kirby-safe-area-bottom is not set', () => {
+      expect(ionFooterElement).toHaveComputedStyle({ 'padding-bottom': BASE_PADDING_VERTICAL_PX });
+    });
+
+    it('when --kirby-safe-area-bottom is set', () => {
+      setSafeAreaBottom();
+      expect(ionFooterElement).toHaveComputedStyle({ 'padding-bottom': BASE_PADDING_VERTICAL_PX });
+    });
+
+    describe('on small screens', () => {
+      beforeAll(async () => {
+        await TestHelper.resizeTestWindow(TestHelper.screensize.phone);
+      });
+
+      afterAll(() => {
+        TestHelper.resetTestWindow();
+      });
+
+      it('when --kirby-safe-area-bottom is not set', () => {
+        expect(ionFooterElement).toHaveComputedStyle({
+          'padding-bottom': BASE_PADDING_VERTICAL_PX,
+        });
+      });
+
+      it('when --kirby-safe-area-bottom is set', () => {
+        setSafeAreaBottom();
+        const expected = BASE_PADDING_VERTICAL + SAFE_AREA_BOTTOM + 'px';
+        expect(ionFooterElement).toHaveComputedStyle({ 'padding-bottom': expected });
+      });
+    });
+  });
+
+  describe('Snap to keyboard', () => {
+    beforeEach(() => {
+      spectator = createHost(
+        `<kirby-modal-footer [snapToKeyboard]="snapToKeyboard"></kirby-modal-footer>`
+      );
+      modalFooterElement = spectator.element;
+      ionFooterElement = spectator.query('ion-footer');
+    });
+
+    describe('when snapToKeyboard is true', () => {
+      beforeEach(() => {
+        spectator.setHostInput('snapToKeyboard', true);
+      });
+
+      it('should follow the keyboard up', () => {
+        keyboardSlideIn();
+        expect(ionFooterElement).toHaveComputedStyle({
+          transform: TRANSFORM_PUSHED_BY_KEYBOARD,
+        });
+      });
+
+      it('should follow the keyboard down', () => {
+        keyboardSlideOut();
+        expect(ionFooterElement).toHaveComputedStyle({
+          transform: 'none',
+        });
+      });
+    });
+
+    describe('when snapToKeyboard is false', () => {
+      it('should not follow the keyboard up', () => {
+        spectator.setHostInput('snapToKeyboard', false);
+        keyboardSlideIn();
+        expect(ionFooterElement).toHaveComputedStyle({
+          transform: 'none',
+        });
+      });
+    });
+  });
+
+  describe('ModalFooterComponent background color', () => {
+    it('should be background-color when themeColor is light', () => {
+      spectator = createHost(`<kirby-modal-footer themeColor="light"></kirby-modal-footer>`);
+      expect(spectator.query('ion-footer')).toHaveComputedStyle({
+        'background-color': getColor('background-color'),
+      });
+    });
+
+    it('should be white when themeColor is white', () => {
+      spectator = createHost(`<kirby-modal-footer themeColor="white"></kirby-modal-footer>`);
+      expect(spectator.query('ion-footer')).toHaveComputedStyle({
+        'background-color': getColor('white'),
+      });
+    });
+
+    it('should be white when themeColor not set', () => {
+      spectator = createHost(`<kirby-modal-footer></kirby-modal-footer>`);
+      expect(spectator.query('ion-footer')).toHaveComputedStyle({
+        'background-color': getColor('white'),
+      });
+    });
+
+    it('should be white when color set by themeColor is not supported', () => {
+      spectator = createHost(`<kirby-modal-footer themeColor="primary"></kirby-modal-footer>`);
+      expect(spectator.query('ion-footer')).toHaveComputedStyle({
+        'background-color': getColor('white'),
+      });
+    });
+  });
+
+  describe('when inline type is set', () => {
+    it('should have a transparent background color', () => {
+      spectator = createHost(`<kirby-modal-footer type="inline"></kirby-modal-footer>`);
+      expect(spectator.query('ion-footer')).toHaveComputedStyle({
+        'background-color': 'transparent',
+      });
+    });
+
+    it('should have a transparent background even when themeColor is specified', () => {
+      spectator = createHost(
+        `<kirby-modal-footer type="inline" themeColor="primary"></kirby-modal-footer>`
+      );
+      expect(spectator.query('ion-footer')).toHaveComputedStyle({
+        'background-color': 'transparent',
+      });
+    });
+
+    it('should not show a box shadow', () => {
+      spectator = createHost(`<kirby-modal-footer type="inline"></kirby-modal-footer>`);
+      expect(spectator.query('ion-footer')).toHaveComputedStyle({
+        'box-shadow': 'none',
+      });
+    });
+  });
+
+  // utility functions
+  function setSafeAreaBottom() {
+    modalFooterElement.style.setProperty('--kirby-safe-area-bottom', SAFE_AREA_BOTTOM_PX);
+  }
+
+  function keyboardSlideIn() {
+    modalFooterElement.style.setProperty('--keyboard-offset', KEYBOARD_HEIGHT + 'px');
+    modalFooterElement.classList.add('keyboard-visible');
+  }
+
+  function keyboardSlideOut() {
+    modalFooterElement.style.setProperty('--keyboard-offset', '0px');
+    modalFooterElement.classList.remove('keyboard-visible');
+  }
+});

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

@@ -0,0 +1,17 @@
+import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';
+
+@Component({
+  selector: 'kirby-modal-footer',
+  templateUrl: './modal-footer.component.html',
+  styleUrls: ['./modal-footer.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ModalFooterComponent {
+  @HostBinding('class.snap-to-keyboard')
+  @Input()
+  snapToKeyboard = false;
+
+  @HostBinding('class')
+  @Input()
+  type: 'inline' | 'fixed' = 'fixed';
+}

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

@@ -0,0 +1,9 @@
+export { Modal } from './services/modal.interfaces';
+export { ModalController } from './services/modal.controller';
+export { ModalConfig } from './modal-wrapper/config/modal-config';
+export { ModalFooterComponent } from './footer/modal-footer.component';
+export { COMPONENT_PROPS } from './modal-wrapper/config/modal-config.helper';
+export { ActionSheetConfig } from './action-sheet/config/action-sheet-config';
+export { ActionSheetComponent } from './action-sheet/action-sheet.component';
+export { ActionSheetItem } from './action-sheet/config/action-sheet-item';
+export { AlertConfig } from './alert/config/alert-config';

package/src/lib/components/modal/modal-wrapper/compact/modal-compact-wrapper.component.html

@@ -0,0 +1,3 @@
+<ng-container
+  *ngComponentOutlet="config.component; injector: componentPropsInjector"
+></ng-container>

package/src/lib/components/modal/modal-wrapper/compact/modal-compact-wrapper.component.scss

@@ -0,0 +1,8 @@
+@use '~@kirbydesign/core/src/scss/utils';
+
+// Global modal styling can be found at scss/base/_ionic.scss
+
+:host {
+  display: block;
+  padding: utils.size('m') utils.size('s');
+}

package/src/lib/components/modal/modal-wrapper/compact/modal-compact-wrapper.component.ts

@@ -0,0 +1,79 @@
+import { Component, ElementRef, HostListener, Injector, Input, OnInit } from '@angular/core';
+import { Subject } from 'rxjs';
+
+import { WindowRef } from '../../../../types/window-ref';
+import { Modal } from '../../services/modal.interfaces';
+import { ModalConfig } from '../config/modal-config';
+import { COMPONENT_PROPS } from '../config/modal-config.helper';
+
+@Component({
+  selector: 'kirby-modal-compact-wrapper',
+  templateUrl: './modal-compact-wrapper.component.html',
+  styleUrls: ['./modal-compact-wrapper.component.scss'],
+  providers: [{ provide: Modal, useExisting: ModalCompactWrapperComponent }],
+  // 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
+})
+export class ModalCompactWrapperComponent implements Modal, OnInit {
+  scrollY: number = Math.abs(this.windowRef.nativeWindow.scrollY);
+  scrollDisabled = false;
+  @Input() config: ModalConfig;
+  componentPropsInjector: Injector;
+
+  private ionModalElement: HTMLIonModalElement;
+  private readonly ionModalDidPresent = new Subject<void>();
+  private readonly ionModalWillDismiss = new Subject<void>();
+  readonly didPresent = this.ionModalDidPresent.toPromise();
+  readonly willClose = this.ionModalWillDismiss.toPromise();
+
+  constructor(
+    private injector: Injector,
+    private elementRef: ElementRef<HTMLElement>,
+    private windowRef: WindowRef
+  ) {}
+
+  ngOnInit(): void {
+    this.ionModalElement = this.elementRef.nativeElement.closest('ion-modal');
+    this.listenForIonModalDidPresent();
+    this.listenForIonModalWillDismiss();
+    this.componentPropsInjector = Injector.create({
+      providers: [{ provide: COMPONENT_PROPS, useValue: this.config.componentProps }],
+      parent: this.injector,
+    });
+  }
+
+  private listenForIonModalDidPresent() {
+    if (this.ionModalElement) {
+      this.ionModalElement.addEventListener('ionModalDidPresent', () => {
+        this.ionModalDidPresent.next();
+        this.ionModalDidPresent.complete();
+      });
+    }
+  }
+
+  private listenForIonModalWillDismiss() {
+    if (this.ionModalElement) {
+      this.ionModalElement.addEventListener('ionModalWillDismiss', () => {
+        this.ionModalWillDismiss.next();
+        this.ionModalWillDismiss.complete();
+      });
+    }
+  }
+
+  async close(data?: any): Promise<void> {
+    const ionModalElement = this.elementRef.nativeElement.closest('ion-modal');
+    if (ionModalElement) {
+      await ionModalElement.dismiss(data);
+    }
+  }
+
+  scrollToTop: (_?: any) => void;
+  scrollToBottom: (_?: any) => void;
+
+  @HostListener('window:focus')
+  @HostListener('window:focusout')
+  onFocusChange() {
+    // This fixes an undesired scroll behaviour occurring on keyboard-tabbing backwards (with shift+tab):
+    this.windowRef.nativeWindow.scrollTo({ top: this.scrollY });
+  }
+}

package/src/lib/components/modal/modal-wrapper/config/drawer-supplementary-action.ts

@@ -0,0 +1,4 @@
+export class DrawerSupplementaryAction {
+  iconName: string;
+  action: Function;
+}

package/src/lib/components/modal/modal-wrapper/config/modal-config.helper.ts

@@ -0,0 +1,3 @@
+import { InjectionToken } from '@angular/core';
+
+export const COMPONENT_PROPS = new InjectionToken<string>('componentProps');

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

@@ -0,0 +1,22 @@
+import { ActivatedRoute } from '@angular/router';
+import { Observable } from 'rxjs';
+
+import { DrawerSupplementaryAction } from './drawer-supplementary-action';
+
+export type ModalFlavor = 'modal' | 'drawer' | 'compact';
+export type ModalSize = 'small' | 'medium' | 'large' | 'full-height';
+
+export interface ModalConfig {
+  collapseTitle?: boolean;
+  component: any;
+  size?: ModalSize;
+  modalRoute?: ActivatedRoute;
+  siblingModalRouteActivated$?: Observable<ActivatedRoute>;
+  flavor?: ModalFlavor;
+  componentProps?: { [key: string]: any };
+  // the supplementary action is only available in the drawer
+  drawerSupplementaryAction?: DrawerSupplementaryAction;
+  // drawer properties
+  interactWithBackground?: boolean;
+  cssClass?: string | string[];
+}

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

@@ -0,0 +1,43 @@
+<ion-header (touchstart)="onHeaderTouchStart($event)">
+  <ion-toolbar>
+    <ion-title></ion-title>
+    <ion-buttons slot="start" *ngIf="config.flavor === 'drawer'">
+      <ng-container *ngTemplateOutlet="closeButton; context: { icon: 'arrow-down' }"></ng-container>
+    </ion-buttons>
+    <ion-buttons slot="end" *ngIf="config.flavor === 'modal'">
+      <ng-container *ngTemplateOutlet="closeButton; context: { icon: 'close' }"></ng-container>
+    </ion-buttons>
+    <ion-buttons slot="end" *ngIf="config.flavor === 'drawer' && config.drawerSupplementaryAction">
+      <ng-container
+        *ngTemplateOutlet="supplementaryButton; context: { btn: config.drawerSupplementaryAction }"
+      ></ng-container>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [scrollEvents]="true">
+  <ion-header *ngIf="_hasCollapsibleTitle" collapse="condense">
+    <ion-toolbar>
+      <span class="kirby-text-large" #contentTitle></span>
+    </ion-toolbar>
+  </ion-header>
+  <ng-container
+    *ngComponentOutlet="config.component; injector: componentPropsInjector"
+  ></ng-container>
+  <router-outlet
+    name="kirbyModalWrapperOutlet"
+    [style.visibility]="config.modalRoute ? 'visible' : 'hidden'"
+  ></router-outlet>
+</ion-content>
+
+<ng-template #closeButton let-icon="icon">
+  <button kirby-button attentionLevel="4" size="sm" (click)="close()">
+    <kirby-icon [name]="icon"></kirby-icon>
+  </button>
+</ng-template>
+
+<ng-template #supplementaryButton let-btn="btn">
+  <button kirby-button attentionLevel="2" size="sm" (click)="btn.action($event)">
+    <kirby-icon [name]="btn.iconName"></kirby-icon>
+  </button>
+</ng-template>

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

@@ -0,0 +1,159 @@
+@use '~@kirbydesign/core/src/scss/utils';
+
+// Global modal styling can be found at scss/base/_ionic.scss
+
+@mixin contain-content() {
+  padding-top: 0;
+  position: relative;
+  contain: inherit;
+  min-height: min(var(--min-height), calc(var(--vh100) - var(--kirby-modal-padding-top, 0px)));
+
+  ion-content {
+    contain: content;
+    max-height: calc(
+      var(--vh100) - var(--kirby-modal-padding-top, 0px) - var(--header-height) -
+        var(--footer-height)
+    );
+
+    &::part(scroll) {
+      height: '100%';
+      position: relative;
+    }
+  }
+
+  &.drawer {
+    ion-content::part(scroll) {
+      transition: padding-bottom utils.$soft-keyboard-transition-leave;
+    }
+
+    &.keyboard-visible {
+      ion-content::part(scroll) {
+        transition: padding-bottom utils.$soft-keyboard-transition-enter;
+      }
+    }
+  }
+}
+
+$toolbar-padding: utils.size('s');
+
+@mixin phablet-toolbar-padding() {
+  $toolbar-top-spacing-total: utils.size('m');
+  $toolbar-padding-top: $toolbar-top-spacing-total - $toolbar-padding;
+  @include utils.media('>=medium') {
+    padding-top: $toolbar-padding-top;
+  }
+}
+
+ion-header ion-toolbar {
+  --padding-start: #{$toolbar-padding};
+  --padding-end: #{$toolbar-padding};
+  --padding-bottom: #{$toolbar-padding};
+  --padding-top: #{$toolbar-padding};
+  --border-width: 0;
+  --background: transparent;
+  --color: var(--kirby-modal-color, #{utils.get-color('black')});
+
+  button {
+    color: var(--color);
+  }
+
+  @include phablet-toolbar-padding;
+}
+
+:host {
+  --vh100: var(--vh, 1vh) * 100; /// Fixes an issue with vh units on iOS Safari
+  --header-height: 0px;
+  --footer-height: 0px;
+
+  &.drawer {
+    // Prevent iOS safe-area padding-top on drawer flavor
+    // as this is already applied on the top-level modal itself
+    // in /scss/_global-styles.scss:
+    ion-header ion-toolbar:first-of-type {
+      padding-top: 0;
+    }
+  }
+}
+
+:host-context(ion-modal:not(.kirby-modal-full-height)) {
+  @include utils.media('>=medium') {
+    @include contain-content;
+  }
+
+  &.drawer {
+    @include contain-content;
+  }
+}
+
+// Ensure iOS safe-area padding-top on default/modal flavor
+// when opened on presenting element (gets .modal-card class):
+:host-context(ion-modal.modal-card:not(.kirby-drawer)) {
+  ion-header ion-toolbar:first-of-type {
+    padding-top: var(--kirby-safe-area-top, 0);
+
+    @include phablet-toolbar-padding;
+  }
+}
+
+ion-title {
+  box-sizing: border-box;
+  padding-inline-start: calc(48px + var(--padding-start));
+  padding-inline-end: calc(48px + var(--padding-end));
+  font-size: utils.font-size('l');
+  font-weight: utils.font-weight('bold');
+}
+
+:host(.drawer) ion-title {
+  font-size: utils.font-size('m');
+}
+
+ion-content {
+  --background: transparent;
+  --color: var(--kirby-modal-color, #{utils.get-color('black')});
+
+  display: flex;
+  flex-direction: column;
+
+  @include utils.slotted('*') {
+    box-sizing: border-box;
+    display: block;
+  }
+
+  --padding-top: #{utils.size('m')};
+  --padding-bottom: #{utils.size('m')};
+  --padding-start: #{utils.size('s')};
+  --padding-end: #{utils.size('s')};
+}
+
+// Ensure padding-rules are not merged with other media query,
+// as this rule has to come AFTER the default mobile-first rule in order to override:
+
+/* clean-css ignore:start */
+@include utils.media('>=medium') {
+  ion-content {
+    --padding-start: #{utils.size('xxxl')};
+    --padding-end: #{utils.size('xxxl')};
+  }
+}
+
+:host(.collapsible-title) {
+  ion-content {
+    --padding-top: 0px;
+
+    ion-header ion-toolbar:first-of-type {
+      padding-top: 0;
+
+      --padding-top: 0px;
+      --padding-bottom: 0px;
+      --padding-start: 0px;
+      --padding-end: 0px;
+    }
+  }
+
+  ion-title {
+    font-size: utils.font-size('n');
+    font-weight: utils.font-weight('bold');
+  }
+}
+
+/* clean-css ignore:end */