@kirbydesign/designsystem 0.0.0

package/README.md

@@ -0,0 +1,7 @@
+# designsystem
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test designsystem` to execute the unit tests.

package/karma.conf.js

@@ -0,0 +1,34 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+const { join } = require('path');
+const getBaseKarmaConfig = require('../../karma.conf');
+
+module.exports = function (config) {
+  const baseConfig = getBaseKarmaConfig();
+  config.set({
+    ...baseConfig,
+    coverageReporter: {
+      ...baseConfig.coverageReporter,
+      dir: join(__dirname, '../../coverage/libs/designsystem'),
+    },
+    junitReporter: {
+      outputDir: require('path').join(__dirname, '../../test-reports'),
+    },
+    reporters: ['kjhtml', 'junit', 'spec'],
+    files: [
+      {
+        pattern: './src/lib/icons/svg/*.svg',
+        type: 'dom',
+        watched: false,
+        include: false,
+        served: true,
+        nocache: false,
+      },
+    ],
+    proxies: {
+      '/assets/kirby/icons/svg/': '/base/src/lib/icons/svg/',
+      '/svg/': '/base/src/lib/icons/svg/',
+    },
+  });
+};

package/ng-package.json

@@ -0,0 +1,32 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/libs/designsystem",
+  "assets": ["ngcc.config.js"],
+  "lib": {
+    "entryFile": "src/index.ts",
+    "umdModuleIds": {
+      "@ionic/angular": "ionic",
+      "date-fns-tz": "date-fns-tz",
+      "date-fns": "date-fns",
+      "highcharts": "highcharts",
+      "highcharts/highstock": "highcharts/highstock",
+      "highcharts/modules/annotations": "highcharts",
+      "inputmask/lib/inputmask": "inputmask"
+    }
+  },
+  "allowedNonPeerDependencies": [
+    "@fontsource/roboto",
+    "@ionic/angular",
+    "@kirbydesign/core",
+    "chart.js",
+    "chartjs-adapter-date-fns",
+    "chartjs-plugin-annotation",
+    "chartjs-plugin-datalabels",
+    "date-fns-tz",
+    "date-fns",
+    "highcharts",
+    "include-media",
+    "inputmask",
+    "ts-deepcopy"
+  ]
+}

package/ngcc.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  ignorableDeepImportMatchers: [/highcharts\//, /inputmask\//],
+};

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@kirbydesign/designsystem",
+  "version": "0.0.0",
+  "dependencies": {
+    "@fontsource/roboto": "4.2.1",
+    "@ionic/angular": "5.5.2",
+    "@kirbydesign/core": "0.0.26-rc.0",
+    "chart.js": "3.3.2",
+    "chartjs-adapter-date-fns": "^2.0.0",
+    "chartjs-plugin-annotation": "^1.0.2",
+    "chartjs-plugin-datalabels": "^2.0.0",
+    "date-fns-tz": "1.1.4",
+    "date-fns": "2.21.1",
+    "highcharts": "8.0.4",
+    "include-media": "^1.4.10",
+    "inputmask": "5.0.5",
+    "ts-deepcopy": "^0.1.4"
+  },
+  "peerDependencies": {
+    "@angular/common": ">=9.0.0",
+    "@angular/core": ">=9.0.0",
+    "@angular/forms": ">=9.0.0",
+    "@angular/router": ">=9.0.0",
+    "rxjs": ">=6.5.3",
+    "zone.js": ">=0.10.2"
+  }
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/index';

package/src/lib/animation/kirby-animation.ts

@@ -0,0 +1,12 @@
+import { DesignTokenHelper } from '@kirbydesign/core';
+
+export namespace KirbyAnimation {
+  export enum Duration {
+    // Duration in milliseconds
+    QUICK = parseInt(DesignTokenHelper.transitionDuration('quick')),
+    SHORT = parseInt(DesignTokenHelper.transitionDuration('short')),
+    LONG = parseInt(DesignTokenHelper.transitionDuration('long')),
+    EXTRA_LONG = parseInt(DesignTokenHelper.transitionDuration('extraLong')),
+  }
+  export const Easing = DesignTokenHelper.transitionEasings();
+}

package/src/lib/components/accordion/accordion-item.component.html

@@ -0,0 +1,25 @@
+<ng-container>
+  <div
+    (click)="isExpanded = !isExpanded"
+    class="header"
+    role="button"
+    [class.expanded]="isExpanded"
+    [attr.aria-expanded]="isExpanded"
+    [attr.aria-controls]="_contentId"
+    [id]="_titleId"
+  >
+    <div class="title">{{ title }}</div>
+    <kirby-icon name="arrow-down"></kirby-icon>
+  </div>
+  <div
+    class="content"
+    role="region"
+    [attr.aria-labelledby]="_titleId"
+    [id]="_contentId"
+    [@isExpanded]="!!isExpanded"
+  >
+    <div class="content-body">
+      <ng-content></ng-content>
+    </div>
+  </div>
+</ng-container>

package/src/lib/components/accordion/accordion-item.component.scss

@@ -0,0 +1,64 @@
+@use '~@kirbydesign/core/src/scss/utils';
+
+$divider-color: utils.get-color('medium');
+$padding: utils.size('s');
+
+:host {
+  display: block;
+  border-top: 1px solid $divider-color;
+  border-bottom: 1px solid $divider-color;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  height: utils.size('xxxl');
+  padding-left: $padding;
+  padding-right: $padding;
+  cursor: pointer;
+  user-select: none;
+}
+
+.title {
+  flex-grow: 2;
+}
+
+.kirby-icon {
+  transition: transform utils.get-transition-duration('quick');
+}
+
+.content {
+  overflow: hidden;
+}
+
+.content-body {
+  padding: 0 $padding $padding $padding;
+}
+
+.expanded {
+  .title {
+    font-weight: utils.font-weight('bold');
+  }
+
+  .kirby-icon {
+    transform: rotate(180deg);
+  }
+}
+
+:host-context(kirby-accordion) {
+  &:not(:first-child) {
+    border-top: none;
+  }
+}
+
+:host-context(kirby-card) {
+  border-color: utils.get-color('background-color');
+
+  &:first-child {
+    border-top: none;
+  }
+
+  &:last-child {
+    border-bottom: none;
+  }
+}

package/src/lib/components/accordion/accordion-item.component.spec.ts

@@ -0,0 +1,52 @@
+import { createHostFactory, SpectatorHost } from '@ngneat/spectator';
+
+import { TestHelper } from '../../testing/test-helper';
+import { IconComponent } from '../icon/icon.component';
+
+import { AccordionItemComponent } from './accordion-item.component';
+
+describe('AccordionItemComponent', () => {
+  let spectator: SpectatorHost<AccordionItemComponent>;
+
+  const createHost = createHostFactory({
+    component: AccordionItemComponent,
+    declarations: [IconComponent],
+    imports: [TestHelper.ionicModuleForTest],
+  });
+
+  beforeEach(() => {
+    spectator = createHost(`<kirby-accordion-item>content</kirby-accordion-item>`, {
+      props: { title: 'Title' },
+    });
+  });
+
+  it('should create', () => {
+    expect(spectator.component).toBeTruthy();
+  });
+
+  it('should have the configured title', () => {
+    const expectedText = 'Title';
+    expect(spectator.component.title).toEqual(expectedText);
+    expect(spectator.query('.title')).toHaveText(expectedText, true);
+  });
+
+  it('should not be expanded', () => {
+    expect(spectator.component.isExpanded).toBeFalsy();
+  });
+
+  it('should not show the content', () => {
+    expect(spectator.query('.content')).toHaveComputedStyle({
+      visibility: 'hidden',
+    });
+  });
+
+  describe('when expanded', () => {
+    it('should show the content', () => {
+      spectator.setInput('isExpanded', true);
+      spectator.detectChanges();
+      expect(spectator.query('.content')).toHaveComputedStyle({
+        visibility: 'visible',
+      });
+    });
+  });
+});

package/src/lib/components/accordion/accordion-item.component.ts

@@ -0,0 +1,27 @@
+import { animate, state, style, transition, trigger } from '@angular/animations';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+// Counter for generating unique element ids
+let uniqueId = 0;
+
+@Component({
+  selector: 'kirby-accordion-item',
+  templateUrl: './accordion-item.component.html',
+  styleUrls: ['./accordion-item.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: [
+    trigger('isExpanded', [
+      state('true', style({ height: '*', visibility: 'visible' })),
+      state('false', style({ height: '0px', visibility: 'hidden' })),
+      transition('true <=> false', animate('0.2s')),
+    ]),
+  ],
+})
+export class AccordionItemComponent {
+  @Input() title: string;
+  @Input() isExpanded: boolean = false;
+
+  // IDs used for a11y labelling
+  _titleId = `kirby-accordion-item-title-${++uniqueId}`;
+  _contentId = `kirby-accordion-item-content-${uniqueId}`;
+}

package/src/lib/components/accordion/accordion.directive.ts

@@ -0,0 +1,7 @@
+import { Directive } from '@angular/core';
+
+@Directive({
+  selector: '[kirbyAccordion], kirby-accordion',
+  exportAs: 'kirby-accordion',
+})
+export class AccordionDirective {}

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

@@ -0,0 +1,2 @@
+export { AccordionDirective } from './accordion.directive';
+export { AccordionItemComponent } from './accordion-item.component';

package/src/lib/components/angular-component-lib/utils.ts

@@ -0,0 +1,43 @@
+import { fromEvent } from 'rxjs';
+
+export const proxyInputs = (Cmp: any, inputs: string[]) => {
+  const Prototype = Cmp.prototype;
+  inputs.forEach((item) => {
+    Object.defineProperty(Prototype, item, {
+      get() {
+        return this.el[item];
+      },
+      set(val: any) {
+        this.z.runOutsideAngular(() => (this.el[item] = val));
+      },
+    });
+  });
+};
+
+export const proxyMethods = (Cmp: any, methods: string[]) => {
+  const Prototype = Cmp.prototype;
+  methods.forEach((methodName) => {
+    Prototype[methodName] = function () {
+      const args = arguments;
+      return this.z.runOutsideAngular(() => this.el[methodName].apply(this.el, args));
+    };
+  });
+};
+
+export const proxyOutputs = (instance: any, el: any, events: string[]) => {
+  events.forEach((eventName) => (instance[eventName] = fromEvent(el, eventName)));
+};
+
+// tslint:disable-next-line: only-arrow-functions
+export function ProxyCmp(opts: { inputs?: any; methods?: any }) {
+  const decorator = function (cls: any) {
+    if (opts.inputs) {
+      proxyInputs(cls, opts.inputs);
+    }
+    if (opts.methods) {
+      proxyMethods(cls, opts.methods);
+    }
+    return cls;
+  };
+  return decorator;
+}

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

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

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

@@ -0,0 +1,10 @@
+:host {
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  position: absolute;
+  contain: size layout style;
+  z-index: 0;
+  overflow: hidden;
+}

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

@@ -0,0 +1,52 @@
+import { Component, ElementRef, forwardRef } from '@angular/core';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { IonApp } from '@ionic/angular';
+
+import { ModalController } from '../modal';
+
+import { AppComponent } from './app.component';
+
+@Component({
+  // tslint:disable-next-line:component-selector
+  selector: 'ion-app',
+  template: '<ng-content></ng-content>',
+  providers: [
+    {
+      provide: IonApp,
+      useExisting: forwardRef(() => IonAppMockComponent),
+    },
+  ],
+})
+export class IonAppMockComponent {
+  constructor(private elementRef: ElementRef) {
+    this.elementRef.nativeElement.componentOnReady = () => Promise.resolve();
+  }
+}
+
+describe('AppComponent', () => {
+  let component: AppComponent;
+  let fixture: ComponentFixture<AppComponent>;
+
+  beforeEach(waitForAsync(() => {
+    const modalControllerSpy = jasmine.createSpyObj('ModalController', [
+      'registerPresentingElement',
+    ]);
+
+    TestBed.configureTestingModule({
+      imports: [NoopAnimationsModule],
+      declarations: [AppComponent, IonAppMockComponent],
+      providers: [{ provide: ModalController, useValue: modalControllerSpy }],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AppComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,50 @@
+import {
+  AfterContentInit,
+  ChangeDetectionStrategy,
+  Component,
+  ContentChild,
+  ElementRef,
+  ViewChild,
+} from '@angular/core';
+import { IonApp } from '@ionic/angular';
+
+import { ModalController } from '../modal/services/modal.controller';
+import { RouterOutletComponent } from '../router-outlet/router-outlet.component';
+
+@Component({
+  selector: 'kirby-app',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AppComponent implements AfterContentInit {
+  @ViewChild(IonApp, { static: true, read: ElementRef })
+  private ionAppElement: ElementRef<HTMLIonAppElement>;
+
+  @ContentChild(RouterOutletComponent, { static: false, read: ElementRef })
+  private routerOutlet?: ElementRef<HTMLElement>;
+
+  constructor(private modalController: ModalController) {}
+
+  ngAfterContentInit(): void {
+    if (this.routerOutlet && this.routerOutlet.nativeElement) {
+      this.modalController.registerPresentingElement(this.routerOutlet.nativeElement);
+    }
+
+    this.ionAppElement.nativeElement.componentOnReady().then(() => this.registerInputs());
+  }
+
+  registerInputs() {
+    // Input might be already loaded in the DOM before ion-device-hacks did.
+    // At this point we need to look for all of the inputs not registered yet
+    // and register them.
+    // There is no Ionic event to hook into, so we'll use a timeout
+    // to ensure ion-device-hacks has run:
+    const ensureIonicDeviceHacksDelay = 250;
+    setTimeout(() => {
+      document.querySelectorAll('kirby-form-field').forEach((formField) => {
+        formField.dispatchEvent(new CustomEvent('kirbyRegisterFormField'));
+      });
+    }, ensureIonicDeviceHacksDelay);
+  }
+}

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

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

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

@@ -0,0 +1,2 @@
+export { AppComponent } from './app.component';
+export { AppModule } from './app.module';

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

@@ -0,0 +1,6 @@
+<div class="avatar" [ngClass]="{ shadow: shadow, overlay: overlay }">
+  <img *ngIf="imageSrc" [src]="imageSrc" [attr.alt]="altText" />
+  <ng-content *ngIf="!text" select="kirby-icon"></ng-content>
+  <span class="avatar-text" *ngIf="text">{{ text }}</span>
+</div>
+<ng-content select="kirby-badge"></ng-content>

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

@@ -0,0 +1,153 @@
+@use 'sass:map';
+@use 'sass:math';
+@use '~@kirbydesign/core/src/scss/utils';
+
+$diameter-xsmall: map.get(utils.$avatar-sizes, 'xs');
+$diameter-small: map.get(utils.$avatar-sizes, 's');
+$diameter-medium: map.get(utils.$avatar-sizes, 'm');
+$diameter-large: map.get(utils.$avatar-sizes, 'l');
+$badge-diameter: utils.$avatar-badge-size;
+
+@function get-badge-position($avatar-diameter) {
+  $cos-to-45-degrees: 0.7071;
+  $avatar-radius: $avatar-diameter * 0.5;
+  $position-from-center: math.round($cos-to-45-degrees * $avatar-radius);
+  $position-from-edge: $avatar-radius - $position-from-center;
+  $badge-radius: $badge-diameter * 0.5;
+  $badge-position: $position-from-edge - $badge-radius;
+  @return $badge-position;
+}
+
+:host {
+  --kirby-badge-elevation: #{utils.get-elevation(2)};
+  --kirby-badge-position: absolute;
+  --kirby-badge-right: #{get-badge-position($diameter-small)};
+  --kirby-badge-top: #{get-badge-position($diameter-small)};
+  --kirby-badge-z-index: #{utils.z('avatar-badge')};
+
+  position: relative;
+}
+
+.avatar {
+  // default to size 'sm'
+  width: $diameter-small;
+  height: $diameter-small;
+  border-radius: 50%;
+  overflow: hidden;
+  position: relative;
+  z-index: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: utils.get-color('white');
+  color: utils.get-color('light-contrast');
+
+  // default to icon size 'sm'
+  --kirby-icon-font-size: #{utils.icon-font-size('sm')};
+
+  &.shadow {
+    box-shadow: 0 2px 4px 2px rgb(113 113 113 / 40%);
+  }
+
+  &.overlay::before {
+    content: '';
+    background-color: utils.get-color('black');
+    opacity: 0.05;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  img {
+    object-fit: cover;
+    max-width: 100%;
+    height: 100%;
+    width: 100%;
+  }
+}
+
+:host(.xs) {
+  .avatar {
+    width: $diameter-xsmall;
+    height: $diameter-xsmall;
+    border-radius: 8px;
+
+    .avatar-text {
+      font-size: utils.font-size('s');
+    }
+  }
+}
+
+:host-context(kirby-progress-circle.sm),
+:host(.sm) {
+  .avatar {
+    width: $diameter-small;
+    height: $diameter-small;
+
+    .avatar-text {
+      font-size: utils.font-size('s');
+    }
+  }
+}
+
+:host-context(kirby-progress-circle.md),
+:host(.md) {
+  --kirby-badge-right: #{get-badge-position($diameter-medium)};
+  --kirby-badge-top: #{get-badge-position($diameter-medium)};
+
+  .avatar {
+    width: $diameter-medium;
+    height: $diameter-medium;
+
+    --kirby-icon-font-size: #{utils.icon-font-size('md')};
+
+    .avatar-text {
+      font-size: utils.font-size('m');
+    }
+  }
+}
+
+:host-context(kirby-progress-circle.lg),
+:host(.lg) {
+  --kirby-badge-right: #{get-badge-position($diameter-large)};
+  --kirby-badge-top: #{get-badge-position($diameter-large)};
+
+  .avatar {
+    width: $diameter-large;
+    height: $diameter-large;
+
+    --kirby-icon-font-size: #{utils.icon-font-size('lg')};
+
+    .avatar-text {
+      font-size: utils.font-size('xl');
+    }
+  }
+}
+
+:host-context(kirby-item)[slot='start'] {
+  margin-inline-end: utils.size('xs');
+
+  &.xs {
+    margin-inline-end: utils.size('s');
+  }
+}
+
+@each $color-name,
+  $color-value
+    in map.merge(
+      utils.$main-colors,
+      (
+        'white': utils.get-color('white'),
+        'semi-light': utils.get-color('semi-light'),
+      )
+    )
+{
+  :host(.#{$color-name}) {
+    .avatar {
+      background-color: utils.get-color($color-name);
+      color: utils.get-color($color-name + '-contrast');
+    }
+  }
+}