@kirbydesign/designsystem 0.0.0

package/src/lib/components/modal/services/modal.helper.ts

@@ -0,0 +1,128 @@
+import { Injectable } from '@angular/core';
+import { ModalController } from '@ionic/angular';
+
+import { KirbyAnimation } from '../../../animation/kirby-animation';
+import { WindowRef } from '../../../types/window-ref';
+import { ModalCompactWrapperComponent } from '../modal-wrapper/compact/modal-compact-wrapper.component';
+import { ModalConfig, ModalFlavor, ModalSize } from '../modal-wrapper/config/modal-config';
+import { ModalWrapperComponent } from '../modal-wrapper/modal-wrapper.component';
+
+import { ModalAnimationBuilderService } from './modal-animation-builder.service';
+import { Overlay } from './modal.interfaces';
+
+@Injectable()
+export class ModalHelper {
+  // TODO: Make presentingElement an instance field when
+  // forRoot()/singleton services has been solved:
+  private static presentingElement: HTMLElement = undefined;
+
+  constructor(
+    private ionicModalController: ModalController,
+    private modalAnimationBuilder: ModalAnimationBuilderService,
+    private windowRef: WindowRef
+  ) {}
+
+  public async showModalWindow(config: ModalConfig): Promise<Overlay> {
+    config.flavor = config.flavor || 'modal';
+    const modalPresentingElement = await this.getPresentingElement(config.flavor);
+
+    let currentBackdrop: HTMLIonBackdropElement;
+    const topMostModal = await this.ionicModalController.getTop();
+    if (topMostModal) {
+      currentBackdrop = topMostModal.querySelector<HTMLIonBackdropElement>('ion-backdrop');
+    }
+
+    const enterAnimation = this.modalAnimationBuilder.enterAnimation(currentBackdrop);
+    const leaveAnimation = this.modalAnimationBuilder.leaveAnimation(currentBackdrop);
+
+    const defaultModalSize: ModalSize = config.flavor === 'modal' ? 'medium' : null;
+    const modalSize = config.size || defaultModalSize;
+    const allow_scroll_class = 'allow-background-scroll';
+
+    let customCssClasses = [];
+    if (config.cssClass) {
+      customCssClasses = Array.isArray(config.cssClass) ? config.cssClass : [config.cssClass];
+    }
+
+    if (config.interactWithBackground) {
+      this.windowRef.nativeWindow.document.body.classList.add(allow_scroll_class);
+    }
+
+    const ionModal = await this.ionicModalController.create({
+      component: config.flavor === 'compact' ? ModalCompactWrapperComponent : ModalWrapperComponent,
+      cssClass: [
+        'kirby-overlay',
+        'kirby-modal',
+        config.flavor === 'drawer' ? 'kirby-drawer' : null,
+        config.flavor === 'compact' ? 'kirby-modal-compact' : null,
+        'kirby-modal-' + modalSize,
+        config.interactWithBackground ? 'interact-with-background' : null,
+        ...customCssClasses,
+      ],
+      backdropDismiss: config.flavor === 'compact' || config.interactWithBackground ? false : true,
+      showBackdrop: !config.interactWithBackground,
+      componentProps: { config: config },
+      swipeToClose: config.flavor != 'compact',
+      presentingElement: modalPresentingElement,
+      keyboardClose: false,
+      enterAnimation,
+      leaveAnimation,
+    });
+
+    if (config.interactWithBackground) {
+      ionModal.onDidDismiss().then(() => {
+        this.windowRef.nativeWindow.document.body.classList.remove(allow_scroll_class);
+      });
+    }
+
+    await ionModal.present();
+
+    return {
+      dismiss: ionModal.dismiss.bind(ionModal),
+      onWillDismiss: ionModal.onWillDismiss(),
+      onDidDismiss: ionModal.onDidDismiss(),
+    };
+  }
+
+  public registerPresentingElement(element: HTMLElement) {
+    ModalHelper.presentingElement = element;
+  }
+
+  private async getPresentingElement(flavor?: ModalFlavor) {
+    let modalPresentingElement: HTMLElement = undefined;
+    if (!flavor || flavor === 'modal') {
+      const topMostModal = await this.ionicModalController.getTop();
+      if (!topMostModal) {
+        modalPresentingElement = ModalHelper.presentingElement;
+      } else if (
+        !topMostModal.classList.contains('kirby-drawer') &&
+        !topMostModal.classList.contains('kirby-modal-compact')
+      ) {
+        modalPresentingElement = topMostModal;
+      }
+    }
+    return modalPresentingElement;
+  }
+
+  public async scrollToTop(
+    noModalRegisteredErrorMessage: string,
+    duration?: KirbyAnimation.Duration
+  ) {
+    const modal = await this.ionicModalController.getTop();
+    if (!modal || !(modal.component instanceof ModalWrapperComponent)) {
+      throw new Error(noModalRegisteredErrorMessage);
+    }
+    modal.component.scrollToTop(duration);
+  }
+
+  public async scrollToBottom(
+    noModalRegisteredErrorMessage: string,
+    duration?: KirbyAnimation.Duration
+  ) {
+    const modal = await this.ionicModalController.getTop();
+    if (!modal || !(modal.component instanceof ModalWrapperComponent)) {
+      throw new Error(noModalRegisteredErrorMessage);
+    }
+    modal.component.scrollToBottom(duration);
+  }
+}

package/src/lib/components/modal/services/modal.interfaces.ts

@@ -0,0 +1,28 @@
+import { ActivatedRoute } from '@angular/router';
+
+import { KirbyAnimation } from '../../../animation/kirby-animation';
+
+export interface OverlayEventDetail<T = any> {
+  data?: T;
+  role?: string;
+}
+
+export interface Overlay {
+  dismiss: (data?: any) => Promise<boolean>;
+  onWillDismiss: Promise<OverlayEventDetail>;
+  onDidDismiss: Promise<OverlayEventDetail>;
+}
+
+export interface ModalRouteActivation {
+  route: ActivatedRoute;
+  isNewModal: boolean;
+}
+
+export abstract class Modal {
+  didPresent: Promise<void>;
+  willClose: Promise<void>;
+  close: (data?: any) => Promise<void>;
+  scrollToTop: (scrollDuration?: KirbyAnimation.Duration) => void;
+  scrollToBottom: (scrollDuration?: KirbyAnimation.Duration) => void;
+  scrollDisabled: boolean;
+}

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

@@ -0,0 +1,13 @@
+export { PageComponent } from './page.component';
+export { PageProgressComponent } from './page.component';
+export { PageTitleComponent } from './page.component';
+export { PageTitleDirective } from './page.component';
+export { PageSubtitleDirective } from './page.component';
+export { PageToolbarTitleDirective } from './page.component';
+export { PageActionsDirective } from './page.component';
+export { PageContentDirective } from './page.component';
+export { PageContentComponent } from './page.component';
+export { PageActionsComponent } from './page.component';
+export { PageFooterComponent } from './page-footer/page-footer.component';
+export { PageModule } from './page.module';
+export { PullToRefreshEvent } from './page.component';

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

@@ -0,0 +1,3 @@
+<div class="wrapper" [class.padding]="hasPadding">
+  <ng-content></ng-content>
+</div>

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

@@ -0,0 +1,23 @@
+@use '~@kirbydesign/core/src/scss/utils';
+
+$padding-horizontal: utils.size('s');
+$padding-vertical: utils.size('xxs');
+
+:host {
+  display: block;
+  background-color: utils.get-color('white');
+
+  .wrapper {
+    position: relative;
+    max-width: var(--page-content-max-width, utils.$page-content-max-width);
+    margin: 0 auto;
+    padding-bottom: var(--kirby-page-footer-safe-area-bottom, var(--kirby-safe-area-bottom));
+
+    &.padding {
+      padding: $padding-vertical $padding-horizontal;
+      padding-bottom: calc(
+        #{$padding-vertical} + var(--kirby-page-footer-safe-area-bottom, var(--kirby-safe-area-bottom))
+      );
+    }
+  }
+}

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

@@ -0,0 +1,52 @@
+import { Renderer2 } from '@angular/core';
+import { createComponentFactory, createSpyObject, Spectator } from '@ngneat/spectator';
+
+import { PageComponent } from '../page.component';
+
+import { PageFooterComponent } from './page-footer.component';
+
+describe('PageFooterComponent', () => {
+  let spectator: Spectator<PageFooterComponent>;
+  const pageComponent = createSpyObject(PageComponent, { tabBarBottomHidden: true });
+  const createComponent = createComponentFactory({
+    component: PageFooterComponent,
+    providers: [
+      {
+        provide: PageComponent,
+        useValue: pageComponent,
+      },
+      Renderer2,
+    ],
+  });
+
+  beforeEach(() => (spectator = createComponent()));
+
+  describe('close', () => {
+    it('should show tabs', () => {
+      pageComponent.tabBarBottomHidden = true;
+      spectator.component.close();
+
+      expect(pageComponent.tabBarBottomHidden).toBe(false);
+    });
+
+    it('should remove host element', () => {
+      expect(spectator.element.parentElement).not.toBeNull();
+
+      spectator.component.close();
+      spectator.detectChanges();
+
+      expect(spectator.element.parentElement).toBeNull();
+      expect(spectator.element.isConnected).toBe(false);
+    });
+  });
+
+  describe('ngOnDestroy', () => {
+    it('should show tabs', () => {
+      pageComponent.tabBarBottomHidden = true;
+
+      spectator.component.ngOnDestroy();
+
+      expect(pageComponent.tabBarBottomHidden).toBe(false);
+    });
+  });
+});

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

@@ -0,0 +1,46 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  Input,
+  OnDestroy,
+  Optional,
+  Renderer2,
+  SkipSelf,
+} from '@angular/core';
+
+import { PageComponent } from '../page.component';
+
+@Component({
+  selector: 'kirby-page-footer',
+  templateUrl: './page-footer.component.html',
+  styleUrls: ['./page-footer.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PageFooterComponent implements OnDestroy {
+  @Input()
+  hasPadding: boolean = true;
+
+  constructor(
+    @Optional() @SkipSelf() private pageComponent: PageComponent,
+    private hostElement: ElementRef,
+    private renderer: Renderer2
+  ) {
+    if (!pageComponent) {
+      throw new Error('Page footer must reside inside of a Kirby page');
+    }
+  }
+
+  close() {
+    this.pageComponent.tabBarBottomHidden = false;
+    this.renderer.removeChild(
+      this.hostElement.nativeElement.parentElement,
+      this.hostElement.nativeElement,
+      true
+    );
+  }
+
+  ngOnDestroy(): void {
+    this.pageComponent.tabBarBottomHidden = false;
+  }
+}

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

@@ -0,0 +1,101 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button
+        text=""
+        [defaultHref]="defaultBackHref"
+        icon="assets/kirby/icons/svg/arrow-back.svg"
+        [style.visibility]="hideBackButton ? 'hidden' : null"
+      ></ion-back-button>
+    </ion-buttons>
+    <ion-title>
+      <div class="toolbar-title hide" [class.fade-in]="toolbarTitleVisible">
+        <ng-container *ngTemplateOutlet="toolbarTitleTemplate"></ng-container>
+      </div>
+    </ion-title>
+    <ion-buttons
+      class="hide"
+      slot="primary"
+      [class.fade-in]="toolbarStickyActionsVisible && stickyActionsTemplate"
+    >
+      <ng-container *ngTemplateOutlet="stickyActionsTemplate"></ng-container>
+    </ion-buttons>
+    <ion-buttons
+      class="hide"
+      slot="secondary"
+      [class.fade-in]="toolbarFixedActionsVisible && fixedActionsTemplate"
+    >
+      <ng-container *ngTemplateOutlet="fixedActionsTemplate"></ng-container>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content scrollEvents="true" forceOverscroll="false">
+  <ion-refresher
+    *ngIf="refresh.observers.length > 0"
+    (ionRefresh)="delegateRefreshEvent($event)"
+    slot="fixed"
+  >
+    <kirby-spinner></kirby-spinner>
+  </ion-refresher>
+
+  <div class="content-inner">
+    <div
+      class="page-header"
+      *ngIf="hasPageTitle"
+      [ngClass]="{
+        'text-center': titleAlignment === 'center',
+        'text-right': titleAlignment === 'right'
+      }"
+    >
+      <div #pageTitle class="page-title" [class.has-actions]="hasActionsInPage">
+        <ng-container
+          *ngTemplateOutlet="customTitleTemplate || defaultPageTitleTemplate"
+        ></ng-container>
+        <ng-container
+          *ngTemplateOutlet="pageActionsTemplate || defaultPageActionsTemplate"
+        ></ng-container>
+      </div>
+      <div *ngIf="hasPageSubtitle" class="page-subtitle">
+        <ng-container
+          *ngTemplateOutlet="customSubtitleTemplate || defaultPageSubtitleTemplate"
+        ></ng-container>
+      </div>
+    </div>
+
+    <!-- Content -->
+    <ng-container
+      *ngTemplateOutlet="customContentTemplate || defaultContentTemplate"
+    ></ng-container>
+  </div>
+
+  <div slot="fixed" class="fixed-content" *ngIf="fixedContentTemplate">
+    <div class="content-inner">
+      <ng-container *ngTemplateOutlet="fixedContentTemplate"></ng-container>
+    </div>
+  </div>
+</ion-content>
+
+<ion-footer>
+  <ng-content select="kirby-page-footer"></ng-content>
+</ion-footer>
+
+<ng-template #defaultPageTitleTemplate>
+  <h1 [kirbyFitHeading]="fitHeadingConfig">
+    <ng-container *ngTemplateOutlet="simpleTitleTemplate"></ng-container>
+  </h1>
+</ng-template>
+<ng-template #defaultPageSubtitleTemplate>
+  <ng-container *ngTemplateOutlet="simpleSubtitleTemplate"></ng-container>
+</ng-template>
+<ng-template #defaultPageActionsTemplate>
+  <ng-content select="kirby-page-actions"></ng-content>
+</ng-template>
+
+<ng-template #defaultContentTemplate>
+  <ng-content select="kirby-page-content"></ng-content>
+</ng-template>
+
+<ng-template #simpleTitleTemplate>{{ title }}</ng-template>
+<ng-template #simpleSubtitleTemplate>{{ subtitle }}</ng-template>
+<ng-template #simpleToolbarTitleTemplate>{{ toolbarTitle }}</ng-template>

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

@@ -0,0 +1,141 @@
+@use '~@kirbydesign/core/src/scss/utils';
+
+/*
+ * Page Header
+ */
+ion-header,
+ion-toolbar {
+  --background: #{utils.get-color('background-color')};
+
+  margin: 0 auto;
+
+  @include utils.media('>=large') {
+    @include utils.not-touch {
+      max-width: 768px;
+    }
+  }
+}
+
+ion-toolbar {
+  --border-width: 0 !important;
+  --padding-start: #{utils.size('xxxs')};
+  --padding-end: #{utils.size('xxxs')};
+  --padding-top: 0;
+  --padding-bottom: 0;
+
+  /*
+  * This overrides Ionic's default ios styling for the position of secondary action buttons which are to the left of content: https://ionicframework.com/docs/api/toolbar#buttons
+  * We would like the seconday actions to be to the far right after primary actions (usually as a falafel):
+  */
+  ion-buttons[slot='secondary'] {
+    order: 6;
+  }
+
+  ion-title {
+    .toolbar-title {
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      pointer-events: auto;
+      overflow: hidden;
+
+      @include utils.slotted('*') {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        pointer-events: auto;
+        overflow: hidden;
+      }
+    }
+  }
+}
+
+.hide {
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 100ms linear;
+
+  &.fade-in {
+    visibility: inherit;
+    opacity: 1;
+  }
+}
+
+ion-title {
+  box-sizing: border-box;
+  font-size: utils.font-size('n');
+  font-weight: utils.font-weight('normal');
+}
+
+ion-back-button {
+  --color: #{utils.get-color('black')};
+  --icon-font-size: 24px;
+
+  height: utils.$fat-finger-size;
+  width: utils.$fat-finger-size;
+}
+
+/*
+ * Page Header
+ */
+.page-header {
+  margin-left: utils.size('s');
+  margin-top: utils.size('xxs');
+  margin-bottom: var(--kirby-page-title-margin-bottom, #{utils.size('xl')});
+
+  .page-title {
+    &.has-actions {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      margin: 0;
+    }
+  }
+
+  .page-subtitle {
+    margin-top: #{utils.size('xxs')};
+  }
+
+  &.text-center {
+    text-align: center;
+    margin-left: 0;
+  }
+
+  &.text-right {
+    text-align: right;
+  }
+}
+
+/*
+ * Page Content
+ */
+ion-content {
+  --padding-start: var(--page-content-padding-start, #{utils.size('s')});
+  --padding-end: var(--page-content-padding-end, #{utils.size('s')});
+  --background: #{utils.get-color('background-color')};
+
+  .content-inner {
+    max-width: var(--page-content-max-width, utils.$page-content-max-width);
+    margin: 0 auto;
+    padding-bottom: utils.size('xl');
+  }
+
+  /*
+  * Fixed content
+  */
+  .fixed-content {
+    width: 100%;
+    position: absolute;
+    bottom: 0;
+
+    .content-inner {
+      position: relative;
+    }
+  }
+}