@kirbydesign/designsystem 0.0.0

package/src/lib/components/stock-chart-deprecated/stock-chart-deprecated.component.ts

@@ -0,0 +1,92 @@
+import { Component, ElementRef, Inject, Input, LOCALE_ID } from '@angular/core';
+import { Options } from 'highcharts';
+import * as Highcharts from 'highcharts/highstock';
+import AnnotationsModule from 'highcharts/modules/annotations';
+
+import {
+  annotations,
+  StockChartDeprecatedDataPoint,
+} from './options/stock-chart-deprecated-options';
+
+// @ts-ignore
+AnnotationsModule(Highcharts);
+
+@Component({
+  selector: 'kirby-stock-chart-deprecated',
+  template: '',
+  styleUrls: ['./stock-chart-deprecated.component.scss'],
+})
+export class StockChartDeprecatedComponent {
+  chartContainer: ElementRef;
+  private _data: StockChartDeprecatedDataPoint[];
+  @Input() set data(val: StockChartDeprecatedDataPoint[]) {
+    this.onDataChanges(val);
+  }
+  get data() {
+    return this._data;
+  }
+  private _options: Options;
+  @Input() set options(val: Options) {
+    this.onOptionsChanges(val);
+  }
+  get options() {
+    return this._options;
+  }
+  private _height = 300;
+  @Input() set height(height: number) {
+    this._height = height;
+    if (this.chart) {
+      this.chart.setSize(null, height);
+    }
+  }
+  get height() {
+    return this._height;
+  }
+  @Input() description = '';
+  @Input() showDataLabels = true;
+
+  chart: Highcharts.Chart;
+
+  constructor(hostElement: ElementRef, @Inject(LOCALE_ID) private locale: string) {
+    this.chartContainer = hostElement;
+  }
+
+  onOptionsChanges(options: Options) {
+    this._options = options;
+    this.chart = Highcharts.stockChart(this.chartContainer.nativeElement, this._options);
+  }
+
+  onDataChanges(data: StockChartDeprecatedDataPoint[]) {
+    this._data = data;
+
+    if (this.chart != null) {
+      // First delete all points in the previous series.
+      this.chart.update(
+        {
+          series: [],
+        },
+        false,
+        true
+      );
+      // Remove the annotations.
+      this.chart.removeAnnotation('minmax');
+      // Then update the chart with new series data.
+      this.chart.update(
+        {
+          series: [
+            {
+              type: 'area',
+              data: data,
+            },
+          ],
+        },
+        false,
+        true
+      );
+      // Add the new annotations.
+      this.chart.addAnnotation(annotations(this.locale), false);
+      // And finally redraw the graph with all the changes.
+      this.chart.redraw();
+    }
+  }
+}

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

@@ -0,0 +1,5 @@
+export { TabsComponent } from './tabs.component';
+export { TabButtonComponent } from './tab-button/tab-button.component';
+export { selectedTabClickEvent } from './tab-button/tab-button.events';
+export { TabsModule } from './tabs.module';
+export { TabsService, IonRouterOutlet } from './tabs.service';

package/src/lib/components/tabs/tab-button/tab-button.component.html

@@ -0,0 +1,13 @@
+<ion-tab-button #ionTabButton [tab]="routerLink" (click)="onClick($event, ionTabButton.selected)">
+  <div class="icon-container" *ngIf="icons.length">
+    <ng-content
+      *ngIf="icons.length === 1 || !ionTabButton.selected"
+      select="kirby-icon[:not([selected-tab])]"
+    ></ng-content>
+    <ng-content *ngIf="ionTabButton.selected" select="kirby-icon[selected-tab]"></ng-content>
+    <ng-content select="kirby-badge"></ng-content>
+  </div>
+  <ion-label>
+    <ng-content></ng-content>
+  </ion-label>
+</ion-tab-button>

package/src/lib/components/tabs/tab-button/tab-button.component.scss

@@ -0,0 +1,48 @@
+@use '~@kirbydesign/core/src/scss/utils';
+
+ion-tab-button {
+  height: 100%;
+  flex: 1 1 0%;
+  max-width: 168px;
+  font-size: utils.font-size('xxs');
+
+  --color-selected: utils.get-color('black');
+  --kirby-badge-position: absolute;
+  --kirby-badge-top: 0;
+  --kirby-badge-right: 0;
+
+  @include utils.slotted(div kirby-badge) {
+    &.md {
+      --kirby-badge-top: -5px;
+      --kirby-badge-right: -5px;
+    }
+  }
+
+  .icon-container {
+    position: relative;
+  }
+
+  @include utils.media('>=medium') {
+    flex: none;
+    padding: 0 utils.size('m');
+    margin-right: utils.size('m');
+
+    &:last-child {
+      margin-right: 0;
+    }
+
+    font-size: utils.font-size('s');
+    flex-direction: row;
+
+    .icon-container {
+      margin-right: utils.size('xxs');
+    }
+  }
+
+  @include utils.media('>=large') {
+    @include utils.not-touch {
+      padding: 0 utils.size('xs');
+      margin-right: 0;
+    }
+  }
+}

package/src/lib/components/tabs/tab-button/tab-button.component.spec.ts

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

package/src/lib/components/tabs/tab-button/tab-button.component.ts

@@ -0,0 +1,47 @@
+import {
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+  Renderer2,
+  QueryList,
+  ContentChildren,
+} from '@angular/core';
+
+import { IconComponent } from '../../icon/icon.component';
+import { selectedTabClickEvent } from './tab-button.events';
+
+@Component({
+  selector: 'kirby-tab-button',
+  templateUrl: './tab-button.component.html',
+  styleUrls: ['./tab-button.component.scss'],
+})
+export class TabButtonComponent implements OnInit {
+  @Input() routerLink: string;
+  @Output() click = new EventEmitter<Event>();
+  @ContentChildren(IconComponent) icons: QueryList<IconComponent>;
+
+  constructor(private elementRef: ElementRef, private renderer: Renderer2) {}
+
+  ngOnInit(): void {
+    this.removeWrapper();
+  }
+
+  onClick(event: Event, isSelected: boolean) {
+    this.click.emit(event);
+
+    if (isSelected) {
+      const clickEvent = new CustomEvent(selectedTabClickEvent);
+      dispatchEvent(clickEvent);
+    }
+  }
+
+  private removeWrapper() {
+    const parent = this.elementRef.nativeElement.parentNode;
+    const button = this.elementRef.nativeElement.childNodes[0];
+    this.renderer.removeChild(parent, this.elementRef.nativeElement);
+    this.renderer.appendChild(parent, button);
+  }
+}

package/src/lib/components/tabs/tab-button/tab-button.events.ts

@@ -0,0 +1 @@
+export const selectedTabClickEvent = 'kirbySelectedTabClick';

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

@@ -0,0 +1,5 @@
+<ion-tabs>
+  <ion-tab-bar [class.bottom-hidden]="tabBarBottomHidden">
+    <ng-content></ng-content>
+  </ion-tab-bar>
+</ion-tabs>

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

@@ -0,0 +1,52 @@
+@use '~@kirbydesign/core/src/scss/utils';
+
+:host(:not(.tab-bar-bottom-hidden)) {
+  --kirby-page-footer-safe-area-bottom: 0px;
+}
+
+ion-tabs {
+  ion-tab-bar {
+    --background: rgba(#{utils.get-color('white-rgb')}, 0.94);
+    --border: 1px solid #{utils.get-color('light')};
+    --color: #{utils.get-color('black')};
+
+    display: flex;
+    max-width: var(--kirby-tab-bar-max-width, none);
+    justify-content: center;
+    height: var(--kirby-tab-bar-height);
+
+    $padding: calc((100vw - var(--kirby-tab-bar-max-width, none)) / 2);
+
+    padding-left: $padding;
+    padding-right: $padding;
+    width: 100%;
+
+    &.bottom-hidden {
+      display: none;
+    }
+  }
+
+  @include utils.media('>=medium') {
+    --kirby-tab-bar-height: 70px;
+  }
+
+  // move tabs to top of screen if not touch and large device
+  @include utils.media('>=large') {
+    @include utils.not-touch {
+      flex-direction: column-reverse;
+
+      // Ensure page-footer falls back to safe-area default
+      --kirby-page-footer-safe-area-bottom: initial;
+
+      ion-tab-bar {
+        margin: 0 auto;
+        justify-content: flex-end;
+
+        // Ensure tabs are not hidden when displayed at top of screen
+        &.bottom-hidden {
+          display: flex;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,125 @@
+import { IonicModule } from '@ionic/angular';
+import { createComponentFactory, Spectator } from '@ngneat/spectator';
+import { MockModule } from 'ng-mocks';
+
+import { ScreenSize, TestHelper } from '../../testing/test-helper';
+
+import { TabsComponent } from './tabs.component';
+
+describe('TabsComponent', () => {
+  let spectator: Spectator<TabsComponent>;
+
+  const createHost = createComponentFactory({
+    imports: [MockModule(IonicModule)],
+    component: TabsComponent,
+    declarations: [],
+  });
+
+  beforeEach(() => {
+    spectator = createHost({});
+  });
+
+  describe('tabBarBottomHidden', () => {
+    afterAll(() => {
+      TestHelper.resetTestWindow();
+    });
+
+    describe('on screensize phone', () => {
+      beforeAll(async () => {
+        await TestHelper.resizeTestWindow(TestHelper.screensize.phone);
+      });
+
+      describe('tabBarBottomHidden: true', () => {
+        beforeEach(() => {
+          spectator.component.tabBarBottomHidden = true;
+          spectator.detectChanges();
+        });
+
+        it('should hide tab bar', async () => {
+          const ionTabBarElm = spectator.query('ion-tab-bar');
+          expect(ionTabBarElm).toHaveComputedStyle({ display: 'none' });
+        });
+
+        it('should NOT set page footer safe area override', async () => {
+          const ionTabBarElm = spectator.query('ion-tab-bar');
+          expect(ionTabBarElm).toHaveComputedStyle({
+            '--kirby-page-footer-safe-area-bottom': '',
+          });
+        });
+      });
+
+      describe('tabBarBottomHidden: false', () => {
+        beforeEach(() => {
+          spectator.component.tabBarBottomHidden = false;
+          spectator.detectChanges();
+        });
+
+        it('should show tab bar', () => {
+          const ionTabBarElm = spectator.query('ion-tab-bar');
+          expect(ionTabBarElm).not.toHaveComputedStyle({ display: 'none' });
+        });
+
+        it('should set footer safe area to 0px', () => {
+          const ionTabBarElm = spectator.query('ion-tab-bar');
+          expect(ionTabBarElm).toHaveComputedStyle({
+            '--kirby-page-footer-safe-area-bottom': '0px',
+          });
+        });
+      });
+    });
+
+    // Only run test on non-touch devices
+    if (window.matchMedia('(hover: hover) and (pointer: fine)').matches) {
+      describe('on screensize large', () => {
+        beforeEach(async () => {
+          await TestHelper.resizeTestWindow(TestHelper.screensize.desktop);
+        });
+
+        describe('tabBarBottomHidden: true', () => {
+          it('should NOT hide tab bar when tabBarBottomHidden', async () => {
+            spectator.component.tabBarBottomHidden = true;
+            spectator.detectChanges();
+
+            const ionTabBarElm = spectator.query('ion-tab-bar');
+            expect(ionTabBarElm).not.toHaveComputedStyle({ display: 'none' });
+          });
+        });
+
+        describe('tabBarBottomHidden: false', () => {
+          it('should NOT set page footer safe area override', async () => {
+            spectator.component.tabBarBottomHidden = false;
+            spectator.detectChanges();
+
+            const ionTabBarElm = spectator.query('ion-tab-bar');
+            expect(ionTabBarElm).toHaveComputedStyle({
+              '--kirby-page-footer-safe-area-bottom': '',
+            });
+          });
+        });
+      });
+    }
+  });
+
+  describe('tab-bar sizing', () => {
+    afterAll(() => {
+      TestHelper.resetTestWindow();
+    });
+
+    const scenarios: { [key in ScreenSize]?: string } = {
+      phone: '50px',
+      tablet: '70px',
+      desktop: '70px',
+    };
+
+    Object.entries(scenarios).forEach(([screenSize, expectedHeight]) => {
+      it(`should have correct height on screensize ${screenSize}`, async () => {
+        await TestHelper.resizeTestWindow(TestHelper.screensize[screenSize]);
+
+        const ionTabBarElm = spectator.query('ion-tab-bar');
+        expect(ionTabBarElm).toHaveComputedStyle({
+          height: expectedHeight,
+        });
+      });
+    });
+  });
+});

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

@@ -0,0 +1,21 @@
+import { AfterViewInit, Component, HostBinding, ViewChild } from '@angular/core';
+import { IonTabs } from '@ionic/angular';
+
+import { TabsService } from './tabs.service';
+
+@Component({
+  selector: 'kirby-tab-bar',
+  templateUrl: './tabs.component.html',
+  styleUrls: ['./tabs.component.scss'],
+})
+export class TabsComponent implements AfterViewInit {
+  @HostBinding('class.tab-bar-bottom-hidden')
+  tabBarBottomHidden = false;
+  @ViewChild(IonTabs, { static: true }) tabs: IonTabs;
+
+  constructor(private tabsService: TabsService) {}
+
+  ngAfterViewInit() {
+    this.tabsService.setOutlet(this.tabs.outlet);
+  }
+}

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

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
+import { CommonModule } from '@angular/common';
+
+import { TabsComponent } from './tabs.component';
+import { TabButtonComponent } from './tab-button/tab-button.component';
+import { IconModule } from '../icon/icon.module';
+import { TabsService } from './tabs.service';
+
+@NgModule({
+  imports: [IonicModule, IconModule, CommonModule],
+  providers: [TabsService],
+  declarations: [TabsComponent, TabButtonComponent],
+  exports: [TabsComponent, TabButtonComponent],
+})
+export class TabsModule {}

package/src/lib/components/tabs/tabs.service.ts

@@ -0,0 +1,17 @@
+import { Injectable } from '@angular/core';
+import { IonRouterOutlet } from '@ionic/angular';
+import { ReplaySubject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class TabsService {
+  private outletSubject$: ReplaySubject<IonRouterOutlet> = new ReplaySubject();
+  public outlet$ = this.outletSubject$.asObservable();
+
+  public setOutlet(outlet: IonRouterOutlet) {
+    this.outletSubject$.next(outlet);
+  }
+}
+
+export { IonRouterOutlet };

package/src/lib/components/toast/config/toast-config.ts

@@ -0,0 +1,8 @@
+export interface ToastConfig {
+  message: string;
+  messageType: MessageType;
+  durationInMs?: number;
+  animated?: boolean;
+}
+
+export type MessageType = 'success' | 'warning';

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

@@ -0,0 +1,2 @@
+export * from './config/toast-config';
+export { ToastController } from './services/toast.controller';

package/src/lib/components/toast/services/toast.controller.ts

@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core';
+
+import { ToastConfig } from '../config/toast-config';
+
+import { ToastHelper } from './toast.helper';
+
+@Injectable()
+export class ToastController {
+  constructor(private toastHelper: ToastHelper) {}
+
+  public showToast(config: ToastConfig, onCloseToast?: () => void) {
+    this.toastHelper.showToast(config).then((overlay) => {
+      if (onCloseToast) {
+        overlay.onDidDismiss.then(() => onCloseToast());
+      }
+    });
+  }
+}

package/src/lib/components/toast/services/toast.helper.spec.ts

@@ -0,0 +1,89 @@
+import { ToastController } from '@ionic/angular';
+import { createServiceFactory, SpectatorService } from '@ngneat/spectator';
+
+import { DesignTokenHelper } from '@kirbydesign/core';
+
+import { TestHelper } from '../../../testing/test-helper';
+import { Overlay } from '../../modal/services/modal.interfaces';
+
+import { ToastHelper } from './toast.helper';
+
+const getColor = DesignTokenHelper.getColor;
+
+describe('ToastHelper', () => {
+  let spectator: SpectatorService<ToastHelper>;
+  let overlay: Overlay;
+
+  const createService = createServiceFactory({
+    service: ToastHelper,
+    imports: [TestHelper.ionicModuleForTest],
+    providers: [ToastController],
+  });
+
+  beforeEach(() => {
+    spectator = createService();
+  });
+
+  afterEach(() => {
+    if (overlay) {
+      overlay.dismiss();
+    }
+  });
+
+  describe('showToast', () => {
+    const testMessage = 'Test Message';
+
+    describe('by default', () => {
+      let ionToast: HTMLIonToastElement;
+      let toastMessage: Element;
+      beforeEach(async () => {
+        overlay = await spectator.service.showToast({
+          message: testMessage,
+          messageType: 'success',
+        });
+
+        ionToast = window.document.getElementsByTagName('ion-toast')[0];
+        await TestHelper.whenReady(ionToast);
+        toastMessage = ionToast.shadowRoot.querySelector('.toast-message');
+      });
+
+      it('should render a toast message', () => {
+        expect(ionToast).toBeTruthy();
+      });
+
+      it('should render toast with the configured message text', () => {
+        expect(toastMessage.textContent).toEqual(testMessage);
+      });
+
+      it('should render toast message with center aligned text xxx', () => {
+        expect(toastMessage).toHaveComputedStyle({ 'text-align': 'center' });
+      });
+    });
+
+    describe('when configured with messageType', () => {
+      type MessageType = 'success' | 'warning';
+      type NotificationColor = 'success' | 'warning';
+
+      const messageTypeColorMap = new Map<MessageType, NotificationColor>([
+        ['success', 'success'],
+        ['warning', 'warning'],
+      ]);
+
+      messageTypeColorMap.forEach((notificationColor, messageType) => {
+        it(`should render with correct background color for messageType = '${messageType}'`, async () => {
+          overlay = await spectator.service.showToast({
+            message: 'Test Message',
+            messageType: messageType,
+          });
+          const ionToast = window.document.getElementsByTagName('ion-toast')[0];
+          await TestHelper.whenReady(ionToast);
+          const toastWrapper = ionToast.shadowRoot.querySelector('.toast-wrapper');
+
+          expect(toastWrapper).toHaveComputedStyle({
+            'background-color': getColor(notificationColor),
+          });
+        });
+      });
+    });
+  });
+});

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

@@ -0,0 +1,39 @@
+import { Injectable } from '@angular/core';
+import { ToastController } from '@ionic/angular';
+
+import { Overlay } from '../../modal/services/modal.interfaces';
+import { MessageType, ToastConfig } from '../config/toast-config';
+
+@Injectable()
+export class ToastHelper {
+  static CSS_CLASS = 'kirby-toast';
+  static DURATION_IN_MS = 4000;
+
+  constructor(private toastController: ToastController) {}
+
+  public async showToast(config: ToastConfig): Promise<Overlay> {
+    const toast = await this.toastController.create({
+      animated: config.animated,
+      message: config.message,
+      position: 'top',
+      duration: config.durationInMs ? config.durationInMs : ToastHelper.DURATION_IN_MS,
+      cssClass: this.getCssClass(config.messageType),
+    });
+    await toast.present();
+    return {
+      dismiss: toast.dismiss.bind(toast),
+      onWillDismiss: toast.onWillDismiss(),
+      onDidDismiss: toast.onDidDismiss(),
+    };
+  }
+
+  private getCssClass(messageType: MessageType): string {
+    let cssClass = ToastHelper.CSS_CLASS;
+
+    if (messageType) {
+      cssClass += ' ' + messageType;
+    }
+
+    return cssClass;
+  }
+}

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

@@ -0,0 +1,5 @@
+<ion-toggle
+  [checked]="checked"
+  [disabled]="disabled"
+  (ionChange)="onCheckedChange($event.detail.checked)"
+></ion-toggle>

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

@@ -0,0 +1,5 @@
+@use '~@kirbydesign/core/src/scss/utils';
+
+.toggle-checked {
+  --background-checked: #{utils.get-color('success')};
+}