@kirbydesign/designsystem 0.0.0

package/src/lib/components/form-field/textarea/textarea.component.spec.ts

@@ -0,0 +1,100 @@
+import { fakeAsync, tick } from '@angular/core/testing';
+import { createHostFactory, SpectatorHost } from '@ngneat/spectator';
+
+import { DesignTokenHelper } from '@kirbydesign/core';
+
+import { TextareaComponent } from './textarea.component';
+
+const getColor = DesignTokenHelper.getColor;
+
+describe('TextareaComponent', () => {
+  let spectator: SpectatorHost<TextareaComponent>;
+  let element: HTMLTextAreaElement;
+
+  const createHost = createHostFactory({
+    component: TextareaComponent,
+  });
+
+  beforeEach(() => {
+    spectator = createHost('<textarea kirby-textarea></textarea>');
+    element = spectator.element as HTMLTextAreaElement;
+  });
+
+  it('should create', () => {
+    expect(spectator.component).toBeTruthy();
+  });
+
+  it('should render with correct color', () => {
+    expect(element).toHaveComputedStyle({ color: getColor('black') });
+  });
+
+  it('should render with correct box-sizing', () => {
+    expect(element).toHaveComputedStyle({ 'box-sizing': 'border-box' });
+  });
+
+  it('should render without border', () => {
+    expect(element).toHaveComputedStyle({
+      'border-width': '0px',
+      'border-style': 'none',
+    });
+  });
+
+  it('should render without outline', () => {
+    expect(element).toHaveComputedStyle({
+      'outline-width': '0px',
+      'outline-style': 'none',
+    });
+  });
+
+  it('should render with correct border-radius', () => {
+    const expected = DesignTokenHelper.borderRadius();
+    expect(element).toHaveComputedStyle({ 'border-radius': expected });
+  });
+
+  it('should emit change on cut event', fakeAsync(() => {
+    const onChangeSpy = spyOn(spectator.component.kirbyChange, 'emit');
+    const testValue = 'Test 123';
+    element.value = testValue;
+    spectator.debugElement.triggerEventHandler('cut', { target: element });
+    tick();
+    expect(onChangeSpy).toHaveBeenCalledTimes(1);
+    expect(onChangeSpy).toHaveBeenCalledWith(testValue);
+  }));
+
+  it('should emit change on paste event', fakeAsync(() => {
+    const onChangeSpy = spyOn(spectator.component.kirbyChange, 'emit');
+    const testValue = 'Test 123';
+    element.value = testValue;
+    spectator.debugElement.triggerEventHandler('paste', { target: element });
+    tick();
+    expect(onChangeSpy).toHaveBeenCalledTimes(1);
+    expect(onChangeSpy).toHaveBeenCalledWith(testValue);
+  }));
+
+  describe('when hasError', () => {
+    beforeEach(() => {
+      spectator.component.hasError = true;
+      spectator.detectChanges();
+    });
+
+    it('should render with correct border', () => {
+      expect(element).toHaveComputedStyle({
+        'border-width': '1px',
+        'border-style': 'solid',
+        'border-color': getColor('danger'),
+      });
+    });
+  });
+
+  describe('when disabled', () => {
+    beforeEach(() => {
+      element.disabled = true;
+    });
+
+    it('should render with correct background-color', () => {
+      expect(element).toHaveComputedStyle({
+        'background-color': getColor('light', 'tint'),
+      });
+    });
+  });
+});

package/src/lib/components/form-field/textarea/textarea.component.ts

@@ -0,0 +1,64 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  HostBinding,
+  EventEmitter,
+  HostListener,
+  SimpleChanges,
+  OnChanges,
+} from '@angular/core';
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  // tslint:disable-next-line:component-selector
+  selector: 'textarea[kirby-textarea]',
+  styleUrls: ['./textarea.component.scss'],
+  templateUrl: './textarea.component.html',
+})
+export class TextareaComponent implements OnChanges {
+  kirbyChange = new EventEmitter<string>();
+
+  @Input() value: string;
+
+  /**
+   * Removes padding, width, rounded borders and drop-shadow when set to `true`.
+   */
+  @HostBinding('class.borderless')
+  @Input()
+  borderless: boolean;
+
+  @HostBinding('class.error')
+  @Input()
+  hasError: boolean;
+
+  @HostBinding('attr.autocomplete')
+  @Input()
+  autocomplete: 'on' | 'off' = 'off';
+
+  @HostBinding('attr.autocorrect')
+  @Input()
+  autocorrect: 'on' | 'off' = 'off';
+
+  @HostBinding('attr.maxlength')
+  @Input()
+  maxlength: number;
+
+  @HostListener('keyup', ['$event.target.value'])
+  _onKeyUp(value: string) {
+    this.kirbyChange.emit(value);
+  }
+
+  @HostListener('paste', ['$event.target'])
+  @HostListener('cut', ['$event.target'])
+  _onCutPaste(target: HTMLInputElement) {
+    //Value of textarea element is updated after cut/paste:
+    setTimeout(() => this.kirbyChange.emit(target.value));
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.value) {
+      this.kirbyChange.emit(changes.value.currentValue);
+    }
+  }
+}

package/src/lib/components/grid/breakpoint-helper.service.ts

@@ -0,0 +1,27 @@
+import { Injectable, OnDestroy } from '@angular/core';
+import { Subject, Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class BreakpointHelperService implements OnDestroy {
+  currentScreenWidth: 800;
+  private orientationChangedSubject = new Subject<void>();
+
+  constructor() {
+    this.init();
+  }
+
+  private init() {
+    // TODO JEO: Implement Angular/CDK BreakpointObserver:
+    this.orientationChangedSubject.next();
+  }
+
+  observe(): Observable<void> {
+    return this.orientationChangedSubject.asObservable();
+  }
+
+  ngOnDestroy() {
+    this.orientationChangedSubject.complete();
+  }
+}

package/src/lib/components/grid/grid-card-configuration.ts

@@ -0,0 +1,7 @@
+import { Type } from '@angular/core';
+
+import { ComponentConfiguration } from '../shared/component-configuration';
+
+export class GridCardConfiguration implements ComponentConfiguration {
+  constructor(public component: Type<any>, public data: any, public preferredSize: number) {}
+}

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

@@ -0,0 +1,6 @@
+<ng-container *ngFor="let card of cards">
+  <ng-template
+    [kirbyLoadComponent]="card.configuration"
+    [cssClass]="'grid-item--col-' + card.colSpan"
+  ></ng-template>
+</ng-container>

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

@@ -0,0 +1,26 @@
+@use '~@kirbydesign/core/src/scss/utils';
+
+:host {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  grid-auto-rows: minmax(var(--kirby-grid-item-min-height, auto), auto);
+  gap: utils.size('m');
+  max-width: var(--kirby-page-max-width);
+  margin: 0 auto;
+
+  @include utils.media('>=medium') {
+    @for $i from 1 through 10 {
+      &[max-columns='#{$i}'] {
+        grid-template-columns: repeat($i, 1fr);
+      }
+    }
+  }
+}
+
+@for $i from 1 through 10 {
+  ::ng-deep .grid-item--col-#{$i} {
+    @include utils.media('>=medium') {
+      grid-column: span $i;
+    }
+  }
+}

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

@@ -0,0 +1,106 @@
+import { Component, OnInit, Input, OnDestroy } from '@angular/core';
+import { Subscription } from 'rxjs';
+
+import { ScssHelper } from '../../scss/scss-helper';
+import { BreakpointHelperService } from './breakpoint-helper.service';
+import { GridCardConfiguration } from './grid-card-configuration';
+
+class GridCard {
+  configuration: GridCardConfiguration;
+  row: number;
+  col: number;
+  colSpan: number;
+
+  constructor(configuration: GridCardConfiguration, row: number, col: number, colSpan: number) {
+    this.configuration = configuration;
+    this.row = row;
+    this.col = col;
+    this.colSpan = colSpan;
+  }
+}
+
+@Component({
+  selector: 'kirby-grid',
+  templateUrl: './grid.component.html',
+  styleUrls: ['./grid.component.scss'],
+  // tslint:disable-next-line
+  host: { '[attr.max-columns]': 'maxColumns' },
+})
+export class GridComponent implements OnInit, OnDestroy {
+  cardConfigs: GridCardConfiguration[];
+  cards: GridCard[] = [];
+  private breakpointSubscription: Subscription;
+
+  @Input() maxColumns: number;
+
+  @Input()
+  set cardConfigurations(cardConfigurations: GridCardConfiguration[]) {
+    this.cardConfigs = cardConfigurations;
+    // TODO TRM/JEO Remove this when breakpoint observe something something...
+    this.configureGrid();
+  }
+
+  constructor(private breakpointHelper: BreakpointHelperService) {}
+
+  configureGrid() {
+    let calculatedMaxColumns = 0;
+    if (this.maxColumns === undefined) {
+      calculatedMaxColumns =
+        this.breakpointHelper.currentScreenWidth >= ScssHelper.BREAKPOINT_SCREEN_L ? 2 : 1;
+    } else {
+      calculatedMaxColumns = this.maxColumns;
+    }
+    this.cards = [];
+    let columnCounter = 0;
+    let currentRow = 0;
+    let currentColumn = 0;
+
+    this.cardConfigs.forEach((card, index) => {
+      // Cards colspan is added to the column counter
+      columnCounter += card.preferredSize;
+      // If only maxColumns are set to 1, just add all cards with a colspan of 1
+      if (calculatedMaxColumns === 1) {
+        this.cards.push(new GridCard(card, currentRow, currentColumn, 1));
+        currentRow += 1;
+        return;
+      }
+      // If we are below maxColumns, then add the card to the array
+      if (columnCounter <= calculatedMaxColumns) {
+        this.cards.push(new GridCard(card, currentRow, currentColumn, card.preferredSize));
+        // Update currentColumn, so the next card will be placed correctly
+        currentColumn += card.preferredSize;
+      } else {
+        // The new card didn't fit - Calculate remaining columns for previous card
+        const restColumns = calculatedMaxColumns - (columnCounter - card.preferredSize);
+        const prevCard = this.cards[index - 1];
+        // Add the restColumns to the previous cards colspan, to make it span out
+        prevCard.colSpan = restColumns + prevCard.colSpan;
+        // We are now on a new row
+        currentRow += 1;
+        currentColumn = 0;
+        this.cards.push(new GridCard(card, currentRow, currentColumn, card.preferredSize));
+        // Update currentColumn to match the size of the new card and reset columnCounter
+        currentColumn = card.preferredSize;
+        columnCounter = card.preferredSize;
+      }
+      // If we on the last card, make sure it spans all the rest of the columns
+      if (this.cardConfigs.length - 1 === index) {
+        const restColumns = calculatedMaxColumns - columnCounter;
+        const currentCard = this.cards[index];
+        currentCard.colSpan += restColumns;
+      }
+    });
+  }
+
+  ngOnInit() {
+    // this.breakpointSubscription = this.breakpointHelper.observe().subscribe(() => {
+    //   this.configureGrid();
+    // });
+  }
+
+  ngOnDestroy() {
+    if (this.breakpointSubscription) {
+      this.breakpointSubscription.unsubscribe();
+    }
+  }
+}

package/src/lib/components/icon/icon-registry.service.spec.ts

@@ -0,0 +1,107 @@
+import { IconRegistryService } from './icon-registry.service';
+
+describe('KirbyIconRegistryService', () => {
+  let service: IconRegistryService;
+
+  beforeEach(() => {
+    service = new IconRegistryService();
+  });
+
+  it('should create service', () => {
+    expect(service).toBeTruthy();
+  });
+
+  describe('getIcon', () => {
+    it('should return undefined if no icons registered', () => {
+      expect(service.getIcon('test')).toBeUndefined();
+    });
+
+    it('should return undefined if no icon match name', () => {
+      const icons = [
+        { name: 'name1', svg: 'svg1' },
+        { name: 'name2', svg: 'svg2' },
+      ];
+      service.addIcons(icons);
+      expect(service.getIcon('test')).toBeUndefined();
+    });
+
+    it('should return icon if name matches registered icon', () => {
+      const icons = [
+        { name: 'name1', svg: 'svg1' },
+        { name: 'name2', svg: 'svg2' },
+      ];
+      service.addIcons(icons);
+      expect(service.getIcon('name1')).toEqual(icons[0]);
+      expect(service.getIcon('name2')).toEqual(icons[1]);
+    });
+  });
+
+  describe('getIcons', () => {
+    it('should return empty map by default', () => {
+      const expectedIcons = [];
+      expect(service.getIcons()).toEqual(expectedIcons);
+    });
+
+    it('should return registed icons', () => {
+      const icons = [
+        { name: 'name1', svg: 'svg1' },
+        { name: 'name2', svg: 'svg2' },
+      ];
+      service.addIcons(icons);
+      expect(service.getIcons()).toEqual(icons);
+    });
+  });
+
+  describe('addIcon', () => {
+    let consoleWarnSpy: jasmine.Spy;
+
+    beforeAll(() => {
+      consoleWarnSpy = spyOn(console, 'warn');
+    });
+
+    it('should add the icon to the regitry', () => {
+      service.addIcon('name1', 'svg1');
+      expect(service.getIcons()).toEqual([{ name: 'name1', svg: 'svg1' }]);
+    });
+
+    it('should only add distinct icon names', () => {
+      service.addIcon('name1', 'svg1');
+      service.addIcon('name1', 'svg2');
+      expect(service.getIcons()).toEqual([{ name: 'name1', svg: 'svg1' }]);
+    });
+
+    it('should warn when overwriting existing icon name', () => {
+      service.addIcon('name1', 'svg1');
+      service.addIcon('name1', 'svg2');
+      expect(consoleWarnSpy).toHaveBeenCalledWith('Icon with name: "name1" already exists');
+    });
+  });
+
+  describe('addIcons', () => {
+    let consoleWarnSpy: jasmine.Spy;
+    const icon1 = { name: 'name1', svg: 'svg1' };
+    const icon2 = { name: 'name1', svg: 'svg2' };
+    const icon3 = { name: 'name3', svg: 'svg3' };
+    const expectedIcons = [icon1, icon3];
+
+    beforeAll(() => {
+      consoleWarnSpy = spyOn(console, 'warn');
+    });
+
+    it('should only add distinct icon names from same set', () => {
+      service.addIcons([icon1, icon2, icon3]);
+      expect(service.getIcons()).toEqual(expectedIcons);
+    });
+
+    it('should only add distinct icon names from different sets', () => {
+      service.addIcons([icon1]);
+      service.addIcons([icon2, icon3]);
+      expect(service.getIcons()).toEqual(expectedIcons);
+    });
+
+    it('should warn when overwriting existing icon name', () => {
+      service.addIcons([icon1, icon2, icon3]);
+      expect(consoleWarnSpy).toHaveBeenCalledWith('Icon with name: "name1" already exists');
+    });
+  });
+});

package/src/lib/components/icon/icon-registry.service.ts

@@ -0,0 +1,39 @@
+import { Injectable } from '@angular/core';
+
+import { Icon } from './icon-settings';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class IconRegistryService {
+  private iconRegistry = new Map<string, string>();
+
+  public addIcon(iconName: string, svgPath: string): void {
+    if (!this.iconRegistry.has(iconName)) {
+      this.iconRegistry.set(iconName, svgPath);
+    } else {
+      console.warn(`Icon with name: "${iconName}" already exists`);
+    }
+  }
+
+  public addIcons(icons: Icon[]): void {
+    if (!icons) {
+      console.error('Icons not defined');
+      return;
+    }
+    icons.forEach((icon) => {
+      this.addIcon(icon.name, icon.svg);
+    });
+  }
+
+  getIcons(): Icon[] {
+    return [...this.iconRegistry].map(
+      (keyValPair) => ({ name: keyValPair[0], svg: keyValPair[1] } as Icon)
+    );
+  }
+
+  getIcon(name: string): Icon {
+    const svg = this.iconRegistry.get(name);
+    return svg ? { name, svg } : undefined;
+  }
+}

package/src/lib/components/icon/icon-settings.ts

@@ -0,0 +1,8 @@
+export interface Icon {
+  name: string;
+  svg?: string;
+}
+
+export interface IconSettings {
+  icons: Icon[];
+}

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

@@ -0,0 +1 @@
+<ion-icon [src]="icon?.svg"></ion-icon>

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

@@ -0,0 +1,47 @@
+@use '~@kirbydesign/core/src/scss/utils';
+
+:host {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--kirby-icon-font-size, utils.icon-font-size('sm'));
+  margin-left: var(--kirby-icon-margin-left, unset);
+  margin-right: var(--kirby-icon-margin-right, unset);
+
+  svg path {
+    fill: currentcolor;
+    stroke: currentcolor;
+  }
+}
+
+:host(.xs) {
+  --kirby-icon-font-size: #{utils.icon-font-size('xs')};
+}
+
+:host(.sm) {
+  --kirby-icon-font-size: #{utils.icon-font-size('sm')};
+}
+
+:host(.md) {
+  --kirby-icon-font-size: #{utils.icon-font-size('md')};
+}
+
+:host(.lg) {
+  --kirby-icon-font-size: #{utils.icon-font-size('lg')};
+}
+
+@each $color-name, $color-value in utils.$main-colors {
+  :host(.#{$color-name}) {
+    color: utils.get-color($color-name);
+  }
+}
+
+:host-context(kirby-item) {
+  &[slot='start'] {
+    margin-inline-end: utils.size('xxs');
+  }
+
+  &[slot='end'] {
+    margin-inline-start: utils.size('xxs');
+  }
+}