@kirbydesign/designsystem 0.0.0

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

@@ -0,0 +1,62 @@
+import { By } from '@angular/platform-browser';
+import * as ionic from '@ionic/angular';
+import { createComponentFactory, Spectator } from '@ngneat/spectator';
+
+import { TestHelper } from '../../testing/test-helper';
+
+import { ToggleComponent } from './toggle.component';
+
+describe('ToggleComponent', () => {
+  let spectator: Spectator<ToggleComponent>;
+
+  const createComponent = createComponentFactory({
+    component: ToggleComponent,
+    imports: [TestHelper.ionicModuleForTest],
+  });
+
+  beforeEach(() => {
+    spectator = createComponent();
+  });
+
+  it('should create', () => {
+    expect(spectator.component).toBeTruthy();
+  });
+
+  describe('checked', () => {
+    it('should not be checked by default', () => {
+      expect(spectator.component.checked).toBeFalse();
+    });
+
+    it('should not be rendered as checked by default', () => {
+      const ionToggle = spectator.debugElement.query(By.directive(ionic.IonToggle));
+
+      expect(ionToggle.componentInstance.checked).toBeFalse();
+    });
+
+    it('should be rendered as checked when checked is set to true', () => {
+      spectator.setInput({ checked: true });
+      const ionToggle = spectator.debugElement.query(By.directive(ionic.IonToggle));
+
+      expect(ionToggle.componentInstance.checked).toBeTrue();
+    });
+  });
+
+  describe('disabled', () => {
+    it('should not be disabled by default', () => {
+      expect(spectator.component.disabled).toBeFalse();
+    });
+
+    it('should not be rendered as disabled by default', () => {
+      const ionToggle = spectator.debugElement.query(By.directive(ionic.IonToggle));
+
+      expect(ionToggle.componentInstance.disabled).toBeFalse();
+    });
+
+    it('should be rendered as disabled when disabled is set to true', () => {
+      spectator.setInput({ disabled: true });
+      const ionToggle = spectator.debugElement.query(By.directive(ionic.IonToggle));
+
+      expect(ionToggle.componentInstance.disabled).toBeTrue();
+    });
+  });
+});

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

@@ -0,0 +1,17 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'kirby-toggle',
+  templateUrl: './toggle.component.html',
+  styleUrls: ['./toggle.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ToggleComponent {
+  @Input() checked: boolean = false;
+  @Input() disabled: boolean = false;
+  @Output() checkedChange = new EventEmitter<boolean>();
+  onCheckedChange(checked: boolean): void {
+    this.checked = checked;
+    this.checkedChange.emit(this.checked);
+  }
+}

package/src/lib/components/toggle-button/index.ts

@@ -0,0 +1,2 @@
+export { ToggleButtonComponent } from './toggle-button.component';
+export { ToggleButtonModule } from './toggle-button.module';

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

@@ -0,0 +1,6 @@
+<ng-container *ngIf="!checked">
+  <ng-content select="button[kirby-button][unchecked]"></ng-content>
+</ng-container>
+<ng-container *ngIf="checked">
+  <ng-content select="button[kirby-button][checked]"></ng-content>
+</ng-container>

package/src/lib/components/toggle-button/toggle-button.component.spec.ts

@@ -0,0 +1,23 @@
+import { Spectator, createComponentFactory } from '@ngneat/spectator';
+import { first } from 'rxjs/operators';
+
+import { ToggleButtonComponent } from './toggle-button.component';
+
+describe('ToggleButtonComponent', () => {
+  let spectator: Spectator<ToggleButtonComponent>;
+  const createComponent = createComponentFactory(ToggleButtonComponent);
+
+  beforeEach(() => (spectator = createComponent()));
+
+  it('should toggle checked state on click', (done) => {
+    spectator.component.checked = true;
+    spectator.component.checkChanged.pipe(first()).subscribe((check) => {
+      expect(check).toBe(false);
+      done();
+    });
+
+    spectator.component.onClick();
+
+    expect(spectator.component.checked).toBe(false);
+  });
+});

package/src/lib/components/toggle-button/toggle-button.component.ts

@@ -0,0 +1,24 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  HostListener,
+  Input,
+  Output,
+} from '@angular/core';
+
+@Component({
+  selector: 'kirby-toggle-button',
+  templateUrl: './toggle-button.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ToggleButtonComponent {
+  @Input() checked: boolean;
+  @Output() checkChanged = new EventEmitter<boolean>();
+
+  @HostListener('click')
+  onClick() {
+    this.checked = !this.checked;
+    this.checkChanged.emit(this.checked);
+  }
+}

package/src/lib/components/toggle-button/toggle-button.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { ToggleButtonComponent } from './toggle-button.component';
+
+const DECLARATIONS = [ToggleButtonComponent];
+
+@NgModule({
+  declarations: [...DECLARATIONS],
+  imports: [CommonModule],
+  exports: [...DECLARATIONS],
+})
+export class ToggleButtonModule {}

package/src/lib/components/web-component-proxies.component.ts

@@ -0,0 +1,25 @@
+/* tslint:disable */
+/* auto-generated angular directive proxies */
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, NgZone } from '@angular/core';
+import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';
+
+import { Components } from '@kirbydesign/core';
+
+
+export declare interface KirbyBadge extends Components.KirbyBadge {}
+@ProxyCmp({
+  inputs: ['size', 'text', 'themeColor']
+})
+@Component({
+  selector: 'kirby-badge',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  inputs: ['size', 'text', 'themeColor']
+})
+export class KirbyBadge {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}

package/src/lib/custom-elements-initializer.ts

@@ -0,0 +1,19 @@
+import { DOCUMENT } from '@angular/common';
+import { APP_INITIALIZER } from '@angular/core';
+
+import { defineCustomElements } from '@kirbydesign/core/loader';
+
+export const appInitialize = (doc: Document) => {
+  return () => {
+    defineCustomElements(doc.defaultView);
+  };
+};
+
+export function customElementsInitializer() {
+  return {
+    provide: APP_INITIALIZER,
+    useFactory: appInitialize,
+    deps: [DOCUMENT],
+    multi: true,
+  };
+}

package/src/lib/directives/element-as-button/element-as-button.directive.spec.ts

@@ -0,0 +1,31 @@
+import { createDirectiveFactory, SpectatorDirective } from '@ngneat/spectator';
+
+import { CardComponent } from '../../components/card/card.component';
+
+import { ElementAsButtonDirective } from './element-as-button.directive';
+
+describe('ElementAsButtonDirective', () => {
+  let spectator: SpectatorDirective<ElementAsButtonDirective>;
+
+  const createDirective = createDirectiveFactory({
+    directive: ElementAsButtonDirective,
+    imports: [],
+    declarations: [CardComponent],
+  });
+  beforeEach(() => {
+    spectator = createDirective(`<kirby-card (click)="someMethod()"> </kirby-card>`);
+  });
+
+  it('should get the instance', () => {
+    const instance = spectator.directive;
+    expect(instance).toBeDefined();
+  });
+
+  it('should have cursor: pointer', () => {
+    expect(spectator.element).toHaveComputedStyle({ cursor: 'pointer' });
+  });
+
+  it('should have an outline-offset of 2px', () => {
+    expect(spectator.element).toHaveComputedStyle({ 'outline-offset': '2px' });
+  });
+});

package/src/lib/directives/element-as-button/element-as-button.directive.ts

@@ -0,0 +1,26 @@
+import { Directive, ElementRef, HostBinding, HostListener, OnInit, Optional } from '@angular/core';
+
+import { CardComponent } from '../../components/card/card.component';
+
+@Directive({
+  // tslint:disable-next-line
+  selector: 'kirby-card[click]',
+})
+export class ElementAsButtonDirective implements OnInit {
+  @HostBinding('attr.role') role: string = 'button';
+  @HostBinding('attr.tabindex') tabindex: number = 0;
+
+  constructor(@Optional() private card: CardComponent, private clickableElement: ElementRef) {}
+
+  ngOnInit(): void {
+    if (this.card) {
+      this.card.flat = false;
+    }
+  }
+
+  @HostListener('keydown.space', ['$event'])
+  @HostListener('keydown.enter', ['$event'])
+  _onKeydownHandler(event: KeyboardEvent) {
+    this.clickableElement.nativeElement.click(event);
+  }
+}

package/src/lib/directives/fit-heading/fit-heading.directive.ts

@@ -0,0 +1,131 @@
+import { Directive, ElementRef, Input, OnDestroy, OnInit, Renderer2 } from '@angular/core';
+
+import { DesignTokenHelper } from '@kirbydesign/core';
+
+import { ResizeObserverService } from '../../components/shared/resize-observer/resize-observer.service';
+import { LineClampHelper } from '../../helpers/line-clamp-helper';
+
+const fontSize = DesignTokenHelper.fontSize;
+const lineHeight = DesignTokenHelper.lineHeight;
+
+interface HeadingSize {
+  name: string;
+  fontSize: string;
+  lineHeight: string;
+}
+
+export interface FitHeadingConfig {
+  maxLines: number;
+}
+
+@Directive({
+  selector: `h1[kirbyFitHeading],h2[kirbyFitHeading],h3[kirbyFitHeading]`,
+  providers: [LineClampHelper],
+})
+export class FitHeadingDirective implements OnInit, OnDestroy {
+  // tslint:disable-next-line:no-input-rename
+  @Input('kirbyFitHeading') config?: FitHeadingConfig;
+
+  private isObservingHostElement: boolean;
+  private hostElementClone: Element;
+  private isScalingHeader: boolean; // used to prevent resizeObserver to trigger on font scaling by this.scaleHeader()
+
+  private headingSizes: HeadingSize[] = [
+    {
+      name: 'h1',
+      fontSize: fontSize('xl'),
+      lineHeight: lineHeight('xl'),
+    },
+    {
+      name: 'h2',
+      fontSize: fontSize('l'),
+      lineHeight: lineHeight('l'),
+    },
+    {
+      name: 'h3',
+      fontSize: fontSize('m'),
+      lineHeight: lineHeight('m'),
+    },
+  ];
+
+  constructor(
+    private elementRef: ElementRef,
+    private renderer: Renderer2,
+    private resizeObserverService: ResizeObserverService,
+    private lineClampHelper: LineClampHelper
+  ) {}
+
+  ngOnInit(): void {
+    if (this.config && this.config.maxLines) {
+      this.lineClampHelper.setMaxLines(this.elementRef.nativeElement, this.config.maxLines);
+      this.observeResize();
+      this.isObservingHostElement = true;
+    }
+  }
+
+  ngOnDestroy(): void {
+    if (this.isObservingHostElement) {
+      this.resizeObserverService.unobserve(this.elementRef);
+      if (this.hostElementClone) {
+        this.renderer.removeChild(this.elementRef.nativeElement, this.hostElementClone);
+      }
+    }
+  }
+
+  private observeResize(): void {
+    this.resizeObserverService.observe(this.elementRef, () => {
+      /**
+       * setTimeout is used here to avoid repeated size changes
+       * while the first size change is still ongoing.
+       * This would result in the ResizeObserver being called again,
+       * giving 'ResizeObserver loop limit exceeded' types of errors.
+       */
+      setTimeout(() => {
+        this.scaleHeader();
+      }, 0);
+    });
+  }
+
+  private scaleHeader(): void {
+    if (this.isScalingHeader) return;
+
+    this.isScalingHeader = true;
+
+    if (!this.hostElementClone) {
+      this.hostElementClone = this.generateHostElementClone();
+      this.renderer.appendChild(this.elementRef.nativeElement, this.hostElementClone);
+    }
+
+    this.renderer.setStyle(
+      this.hostElementClone,
+      'width',
+      `${this.elementRef.nativeElement.clientWidth}px`
+    );
+
+    const fallbackSize = this.headingSizes[this.headingSizes.length - 1];
+    const fittedSize = this.headingSizes.find(this.canFitHeading.bind(this)) || fallbackSize;
+
+    this.setSize(this.elementRef.nativeElement, fittedSize);
+    this.lineClampHelper.setLineHeight(this.elementRef.nativeElement, fittedSize.lineHeight);
+    this.isScalingHeader = false;
+  }
+
+  private canFitHeading(size: HeadingSize) {
+    this.setSize(this.hostElementClone, size);
+    const lines = this.hostElementClone.clientHeight / parseInt(size.lineHeight);
+    return lines <= this.config.maxLines;
+  }
+
+  private generateHostElementClone(): Element {
+    const clone = this.elementRef.nativeElement.cloneNode(true);
+    this.renderer.setStyle(clone, 'position', 'absolute');
+    this.renderer.setStyle(clone, 'visibility', 'hidden');
+    this.lineClampHelper.removeLineClamp(clone);
+    return clone;
+  }
+
+  private setSize(el: Element, size: HeadingSize): void {
+    this.renderer.setStyle(el, 'font-size', size.fontSize);
+    this.renderer.setStyle(el, 'line-height', size.lineHeight);
+  }
+}

package/src/lib/directives/fit-heading/fit-heading.module.ts

@@ -0,0 +1,9 @@
+import { NgModule } from '@angular/core';
+
+import { FitHeadingDirective } from './fit-heading.directive';
+
+@NgModule({
+  declarations: [FitHeadingDirective],
+  exports: [FitHeadingDirective],
+})
+export class FitHeadingModule {}

package/src/lib/directives/index.ts

@@ -0,0 +1,9 @@
+export { FitHeadingConfig } from './fit-heading/fit-heading.directive';
+export { FitHeadingDirective } from './fit-heading/fit-heading.directive';
+export { FitHeadingModule } from './fit-heading/fit-heading.module';
+
+export { KeyHandlerDirective } from './key-handler/key-handler.directive';
+
+export { ThemeColorDirective } from './theme-color/theme-color.directive';
+export { ElementAsButtonDirective } from './element-as-button/element-as-button.directive';
+export { ModalRouterLinkDirective } from './modal-router-link/modal-router-link.directive';

package/src/lib/directives/key-handler/key-handler.directive.ts

@@ -0,0 +1,20 @@
+import { Directive, HostListener, ElementRef } from '@angular/core';
+
+@Directive({
+  // tslint:disable-next-line:directive-selector
+  selector: `[keyHandler]`,
+})
+export class KeyHandlerDirective {
+  constructor(private element: ElementRef) {}
+
+  @HostListener('keyup', ['$event'])
+  keyEvent(event: KeyboardEvent) {
+    if (event.key === ' ' || event.key === 'Enter' || event.key === 'Spacebar') {
+      // Prevent the default action to stop scrolling when space is pressed
+      event.preventDefault();
+
+      const hostElement = <HTMLElement>this.element.nativeElement;
+      hostElement.click();
+    }
+  }
+}

package/src/lib/directives/modal-router-link/modal-router-link.directive.ts

@@ -0,0 +1,24 @@
+import { Directive, HostListener, Input } from '@angular/core';
+import { Params } from '@angular/router';
+
+import { ModalNavigationService } from '../../components/modal/services/modal-navigation.service';
+
+@Directive({
+  selector: `[kirbyModalRouterLink]`,
+})
+export class ModalRouterLinkDirective {
+  constructor(private modalNavigationService: ModalNavigationService) {}
+
+  @Input('kirbyModalRouterLink') path: string | string[];
+  // tslint:disable-next-line:no-input-rename
+  @Input('kirbyModalQueryParams') queryParams?: Params;
+
+  @HostListener('click')
+  onClick(): boolean {
+    this.modalNavigationService.navigateToModal(
+      this.path,
+      typeof this.queryParams !== 'string' ? this.queryParams : null
+    );
+    return false;
+  }
+}

package/src/lib/directives/theme-color/theme-color.directive.ts

@@ -0,0 +1,117 @@
+import { Directive, HostBinding, Input } from '@angular/core';
+
+import { ColorHelper } from '@kirbydesign/core';
+import { ThemeColor } from '@kirbydesign/core';
+
+@Directive({
+  // tslint:disable-next-line:directive-selector
+  selector: `kirby-avatar[themeColor],
+             kirby-card[themeColor],
+             kirby-icon[themeColor],
+             kirby-progress-circle-ring[themeColor],
+             kirby-modal-footer[themeColor],
+             kirby-empty-state[themeColor]`,
+})
+export class ThemeColorDirective {
+  private _isDefault = true;
+  @HostBinding('class.default')
+  get isDefault() {
+    return this._isDefault;
+  }
+
+  private _isPrimary: boolean;
+  @HostBinding('class.primary')
+  get isPrimary() {
+    return this._isPrimary;
+  }
+
+  private _isSecondary: boolean;
+  @HostBinding('class.secondary')
+  get isSecondary() {
+    return this._isSecondary;
+  }
+
+  private _isTertiary: boolean;
+  @HostBinding('class.tertiary')
+  get isTertiary() {
+    return this._isTertiary;
+  }
+
+  private _isSuccess: boolean;
+  @HostBinding('class.success')
+  get isSuccess() {
+    return this._isSuccess;
+  }
+
+  private _isWarning: boolean;
+  @HostBinding('class.warning')
+  get isWarning() {
+    return this._isWarning;
+  }
+
+  private _isDanger: boolean;
+  @HostBinding('class.danger')
+  get isDanger() {
+    return this._isDanger;
+  }
+
+  private _isLight: boolean;
+  @HostBinding('class.light')
+  get isLight() {
+    return this._isLight;
+  }
+
+  private _isMedium: boolean;
+  @HostBinding('class.medium')
+  get isMedium() {
+    return this._isMedium;
+  }
+
+  private _isDark: boolean;
+  @HostBinding('class.dark')
+  get isDark() {
+    return this._isDark;
+  }
+
+  private _isWhite: boolean;
+  @HostBinding('class.white')
+  get isWhite() {
+    return this._isWhite;
+  }
+
+  private _isBrightnessWhite: boolean;
+  @HostBinding('class.kirby-color-brightness-white')
+  get isBrightnessWhite() {
+    return this._isBrightnessWhite;
+  }
+
+  private _isBrightnessLight: boolean;
+  @HostBinding('class.kirby-color-brightness-light')
+  get isBrightnessLight() {
+    return this._isBrightnessLight;
+  }
+
+  private _isBrightnessDark: boolean;
+  @HostBinding('class.kirby-color-brightness-dark')
+  get isBrightnessDark() {
+    return this._isBrightnessDark;
+  }
+
+  @Input() set themeColor(value: ThemeColor) {
+    this._isDefault = !value;
+    this._isPrimary = value === 'primary';
+    this._isSecondary = value === 'secondary';
+    this._isTertiary = value === 'tertiary';
+    this._isSuccess = value === 'success';
+    this._isWarning = value === 'warning';
+    this._isDanger = value === 'danger';
+    this._isLight = value === 'light';
+    this._isMedium = value === 'medium';
+    this._isDark = value === 'dark';
+    this._isWhite = value === 'white';
+    const colorBrightness = ColorHelper.getColorBrightness(value);
+    this._isBrightnessWhite = colorBrightness === 'white';
+    this._isBrightnessLight = colorBrightness === 'light';
+    this._isBrightnessDark = colorBrightness === 'dark';
+  }
+}