@kirbydesign/designsystem 0.0.0

package/src/lib/components/form-field/directives/date/date-input.directive.spec.ts

@@ -0,0 +1,127 @@
+import { registerLocaleData } from '@angular/common';
+import localeDa from '@angular/common/locales/da';
+import { LOCALE_ID } from '@angular/core';
+import { createDirectiveFactory, SpectatorDirective } from '@ngneat/spectator';
+import { TestHelper } from 'libs/designsystem/src/lib/testing/test-helper';
+
+import { InputComponent } from '../../input/input.component';
+
+import { DateInputDirective } from './date-input.directive';
+
+describe('DateInputDirective', () => {
+  let locale: 'da' | 'en-GB' = 'en-GB';
+  let spectator: SpectatorDirective<DateInputDirective>;
+
+  registerLocaleData(localeDa);
+
+  const createDirective = createDirectiveFactory({
+    directive: DateInputDirective,
+    imports: [],
+    declarations: [InputComponent],
+    providers: [
+      {
+        provide: LOCALE_ID,
+        useFactory: () => locale,
+      },
+    ],
+  });
+
+  beforeEach(() => {
+    spectator = createDirective(`<input kirby-input type="date" />`);
+  });
+
+  it('should get the instance', () => {
+    const instance = spectator.directive;
+    expect(instance).toBeDefined();
+  });
+
+  it('should have initial date-mask value', () => {
+    // @ts-ignore
+    expect(spectator.element.placeholder).toEqual('mm/dd/yyyy');
+  });
+
+  it('should keep date-mask when typing', () => {
+    spectator.typeInElement('11', spectator.element);
+    expect(spectator.element).toHaveValue('11/dd/yyyy');
+  });
+
+  it('should add leading zero for month > 4', () => {
+    spectator.typeInElement('4', spectator.element);
+    expect(spectator.element).toHaveValue('04/dd/yyyy');
+  });
+
+  it('should add leading zero for day > 4', () => {
+    spectator.typeInElement('01/4', spectator.element);
+    expect(spectator.element).toHaveValue('01/04/yyyy');
+  });
+
+  it('should have inputmode="numeric"', () => {
+    expect((spectator.element as HTMLInputElement).inputMode).toBe('numeric');
+  });
+
+  it('should replace type="date", with type="text"', () => {
+    expect((spectator.element as HTMLInputElement).type).toBe('text');
+  });
+
+  it('should only allow numeric characters', () => {
+    spectator.typeInElement('a', spectator.element);
+    expect(spectator.element).toHaveValue('');
+  });
+
+  it('should handle multiple seperators', () => {
+    spectator.typeInElement('01/01-2021', spectator.element);
+    expect(spectator.element).toHaveValue('01/01/2021');
+
+    spectator.typeInElement('01-01-2021', spectator.element);
+    expect(spectator.element).toHaveValue('01/01/2021');
+
+    spectator.typeInElement('01/01/2021', spectator.element);
+    expect(spectator.element).toHaveValue('01/01/2021');
+  });
+
+  it('should replace yyyy with åååå', () => {
+    locale = 'da';
+
+    // @ts-ignore
+    expect(spectator.element.placeholder).toEqual('mm/dd/yyyy');
+    locale = 'en-GB';
+  });
+
+  describe('datemask element', () => {
+    it('should have the same font-family as input', () => {
+      const datemask = spectator.element.parentNode.querySelector('.date-mask');
+
+      const inputFontFamily = TestHelper.getCssProperty(spectator.element, 'font-family');
+      const datemaskFontFamily = TestHelper.getCssProperty(datemask, 'font-family');
+
+      expect(datemaskFontFamily).toEqual(inputFontFamily);
+    });
+
+    it('should have the same font-size as input', () => {
+      const datemask = spectator.element.parentNode.querySelector('.date-mask');
+
+      const inputFontSize = TestHelper.getCssProperty(spectator.element, 'font-size');
+      const datemaskFontSize = TestHelper.getCssProperty(datemask, 'font-size');
+
+      expect(datemaskFontSize).toEqual(inputFontSize);
+    });
+
+    it('should have the same line-height as input', () => {
+      const datemask = spectator.element.parentNode.querySelector('.date-mask');
+
+      const inputLineHeight = TestHelper.getCssProperty(spectator.element, 'line-height');
+      const datemaskLineHeight = TestHelper.getCssProperty(datemask, 'line-height');
+
+      expect(datemaskLineHeight).toEqual(inputLineHeight);
+    });
+
+    it('should have same margin as input padding', () => {
+      const datemask = spectator.element.parentNode.querySelector('.date-mask');
+
+      const inputPadding = TestHelper.getCssProperty(spectator.element, 'padding');
+      const datemaskMargin = TestHelper.getCssProperty(datemask, 'margin');
+
+      expect(datemaskMargin).toEqual(inputPadding);
+    });
+  });
+});

package/src/lib/components/form-field/directives/date/date-input.directive.ts

@@ -0,0 +1,94 @@
+import { FormatWidth, getLocaleDateFormat } from '@angular/common';
+import {
+  AfterViewInit,
+  Directive,
+  ElementRef,
+  HostListener,
+  Inject,
+  LOCALE_ID,
+  Renderer2,
+} from '@angular/core';
+import 'inputmask/lib/extensions/inputmask.date.extensions';
+import Inputmask from 'inputmask/lib/inputmask';
+
+@Directive({
+  selector: '[kirby-input][type="date"]',
+})
+export class DateInputDirective implements AfterViewInit {
+  @HostListener('input')
+  onInput() {
+    this.updateMask(this.elementRef.nativeElement.value);
+  }
+
+  private maskingElement: HTMLElement;
+
+  constructor(
+    private elementRef: ElementRef,
+    private renderer: Renderer2,
+    @Inject(LOCALE_ID) private locale: string
+  ) {
+    // Remove type to avoid user-agent specific behaviour for [type="date"]
+    this.elementRef.nativeElement.removeAttribute('type');
+  }
+
+  ngAfterViewInit(): void {
+    this.initMask();
+  }
+
+  private initMask(): void {
+    const inputFormat = this.getInputFormat();
+    const placeholder = this.getPlaceholder(inputFormat);
+
+    // Set initial placeholder ex. dd/mm/yyyy
+    this.renderer.setAttribute(this.elementRef.nativeElement, 'placeholder', placeholder);
+
+    // Init InputMask
+    new Inputmask('datetime', {
+      inputFormat,
+      placeholder,
+    }).mask(this.elementRef.nativeElement);
+
+    // Append input overlay, so it's possible to style typed date differntly than the date-mask
+    this.appendMaskingElement();
+  }
+
+  // Keeps order and seperator from speficied locale
+  private getInputFormat(): string {
+    const localeDateFormat = getLocaleDateFormat(this.locale, FormatWidth.Short);
+    return localeDateFormat
+      .toLowerCase()
+      .replace(/d+/, 'dd')
+      .replace(/m+/, 'mm')
+      .replace(/y+/, 'yyyy');
+  }
+
+  private getPlaceholder(inputFormat: string): string {
+    return this.locale === 'da' ? inputFormat.split('y').join('å') : inputFormat;
+  }
+
+  private appendMaskingElement(): void {
+    const wrapper = this.wrapElement(this.elementRef.nativeElement);
+    this.renderer.addClass(wrapper, 'date-mask-wrapper');
+
+    this.maskingElement = this.renderer.createElement('div');
+    this.renderer.appendChild(wrapper, this.maskingElement);
+
+    this.renderer.addClass(this.maskingElement, 'date-mask');
+  }
+
+  private wrapElement(element: HTMLElement): HTMLElement {
+    const wrapper = this.renderer.createElement('div');
+    const parent = element.parentElement;
+    this.renderer.insertBefore(parent, wrapper, element);
+    this.renderer.appendChild(wrapper, element);
+    return wrapper;
+  }
+
+  private updateMask(value: string): void {
+    if (!this.maskingElement) return;
+    const lastNumber = value.match(/.*?(\d)[^\d]*$/); // get last number in string
+    this.maskingElement.innerHTML = value
+      ? value.slice(0, value.lastIndexOf(lastNumber[1]) + 1)
+      : '';
+  }
+}

package/src/lib/components/form-field/directives/decimal-mask/decimal-mask.directive.spec.ts

@@ -0,0 +1,231 @@
+import { registerLocaleData } from '@angular/common';
+import localeDa from '@angular/common/locales/da';
+import { Component, LOCALE_ID } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { createDirectiveFactory, SpectatorDirective } from '@ngneat/spectator';
+
+import { InputComponent } from '../../input/input.component';
+
+import { DecimalMaskDirective } from './decimal-mask.directive';
+
+// tslint:disable-next-line:component-selector
+@Component({ selector: 'numeric-input-host', template: '' })
+class NumericInputHostComponent {
+  numericInput = new FormControl('');
+}
+
+describe('NumberInputDirective', () => {
+  let locale: 'da' | 'en-GB' = 'en-GB';
+  let spectator: SpectatorDirective<DecimalMaskDirective>;
+
+  registerLocaleData(localeDa);
+
+  const createDirective = createDirectiveFactory({
+    directive: DecimalMaskDirective,
+    host: NumericInputHostComponent,
+    imports: [ReactiveFormsModule],
+    declarations: [InputComponent],
+    providers: [
+      {
+        provide: LOCALE_ID,
+        useFactory: () => {
+          return locale;
+        },
+      },
+    ],
+  });
+
+  it('should get the instance', () => {
+    spectator = createDirective(`<input kirby-input kirby-decimal-mask type="number" />`);
+    const instance = spectator.directive;
+    expect(instance).toBeDefined();
+  });
+
+  describe('grouping seperator', () => {
+    it('should be "," if locale is EN', () => {
+      locale = 'en-GB';
+      spectator = createDirective(`<input kirby-input kirby-decimal-mask type="number" />`);
+      spectator.typeInElement('1000', spectator.element);
+      expect(spectator.element).toHaveValue('1,000');
+    });
+
+    it('should be "." if locale is DA', () => {
+      locale = 'da';
+      spectator = createDirective(`<input kirby-input kirby-decimal-mask type="number" />`);
+      spectator.typeInElement('1000', spectator.element);
+      expect(spectator.element).toHaveValue('1.000');
+    });
+
+    it('should be disabled when [disableGroupSeperator] is added wihtout a value', () => {
+      locale = 'en-GB';
+      spectator = createDirective(
+        `<input kirby-input kirby-decimal-mask type="number" disableGroupSeperator />`
+      );
+      spectator.typeInElement('1000', spectator.element);
+      expect(spectator.element).toHaveValue('1000');
+    });
+
+    it('should be disabled when [disableGroupSeperator="true"] is added', () => {
+      locale = 'en-GB';
+      spectator = createDirective(
+        `<input kirby-input kirby-decimal-mask type="number" disableGroupSeperator="true" />`
+      );
+      spectator.typeInElement('1000', spectator.element);
+      expect(spectator.element).toHaveValue('1000');
+    });
+
+    it('should be not be disabled when [disableGroupSeperator="false"] is added', () => {
+      locale = 'en-GB';
+      spectator = createDirective(
+        `<input kirby-input kirby-decimal-mask type="number" disableGroupSeperator="false" />`
+      );
+      spectator.typeInElement('1000', spectator.element);
+      expect(spectator.element).toHaveValue('1,000');
+    });
+  });
+
+  describe('radix point', () => {
+    it('should be "." if locale is EN', () => {
+      locale = 'en-GB';
+      spectator = createDirective(`<input kirby-input kirby-decimal-mask type="number" />`);
+      expect(spectator.directive.radixPoint).toEqual('.');
+    });
+
+    it('should be "," if locale is DA', () => {
+      locale = 'da';
+      spectator = createDirective(`<input kirby-input kirby-decimal-mask type="number" />`);
+      expect(spectator.directive.radixPoint).toEqual(',');
+    });
+
+    it('should add leading zero, if user just types radix point symbol', () => {
+      locale = 'en-GB';
+      spectator = createDirective(`<input kirby-input kirby-decimal-mask type="number" />`);
+      spectator.typeInElement('.1', spectator.element);
+      expect(spectator.element).toHaveValue('0.1');
+    });
+  });
+
+  describe('fractional digits', () => {
+    it('should be 2 as default', () => {
+      locale = 'en-GB';
+      spectator = createDirective(`<input kirby-input kirby-decimal-mask type="number" />`);
+      spectator.typeInElement('0.123', spectator.element);
+      expect(spectator.element).toHaveValue('0.12');
+    });
+
+    it('should be possible to configure desired amount of fractions digits', () => {
+      locale = 'en-GB';
+      spectator = createDirective(
+        `<input kirby-input kirby-decimal-mask type="number" precision="3" />`
+      );
+      spectator.typeInElement('0,123', spectator.element);
+      expect(spectator.element).toHaveValue('0,123');
+    });
+
+    it('should be possible to disallow fractional digits', () => {
+      locale = 'en-GB';
+      spectator = createDirective(
+        `<input kirby-input kirby-decimal-mask type="number" precision="0" />`
+      );
+      spectator.typeInElement('0.123', spectator.element);
+      expect(spectator.element).toHaveValue('0');
+    });
+  });
+
+  describe('reactive form', () => {
+    it('should be able to receive value with locale radix point from form-control', () => {
+      locale = 'da';
+      spectator = createDirective(
+        `<input kirby-input kirby-decimal-mask type="number" [formControl]="numericInput" />`
+      );
+      // @ts-ignore
+      const numericInput = spectator.hostComponent.numericInput;
+      numericInput.setValue('1000,12');
+      expect(numericInput.value).toEqual('1000.12');
+    });
+
+    it('should be able to receive value as number from form-control', () => {
+      spectator = createDirective(
+        `<input kirby-input kirby-decimal-mask type="number" [formControl]="numericInput" />`
+      );
+      // @ts-ignore
+      const numericInput = spectator.hostComponent.numericInput;
+      numericInput.setValue('1000.12');
+      expect(numericInput.value).toEqual('1000.12');
+    });
+
+    it('should replace radix point recieved from form-control to locale radix point', () => {
+      spectator = createDirective(
+        `<input kirby-input kirby-decimal-mask type="number" [formControl]="numericInput" />`
+      );
+      // @ts-ignore
+      const numericInput = spectator.hostComponent.numericInput;
+      numericInput.setValue('1000.12');
+      expect(numericInput.value).toEqual('1000.12');
+    });
+
+    it('should update form value, on change', () => {
+      locale = 'en-GB';
+      spectator = createDirective(
+        `<input kirby-input kirby-decimal-mask type="number" [formControl]="numericInput" />`
+      );
+      spectator.typeInElement('1,000.12', spectator.element);
+
+      // @ts-ignore
+      const numericInput = spectator.hostComponent.numericInput;
+      expect(numericInput.value).toEqual('1000.12');
+    });
+  });
+
+  describe('negative numbers', () => {
+    it('should not allow negative numbers as default', () => {
+      spectator = createDirective(`<input kirby-input kirby-decimal-mask type="number" />`);
+      spectator.typeInElement('-', spectator.element);
+      expect(spectator.element).toHaveValue('');
+    });
+
+    it('should not allow negative numbers if "allowMinus" is set to false', () => {
+      spectator = createDirective(
+        `<input kirby-input kirby-decimal-mask type="number" [allowMinus]="false" />`
+      );
+      spectator.typeInElement('-', spectator.element);
+      expect(spectator.element).toHaveValue('');
+    });
+
+    it('should allow negative numbers, if min. is a negative number, even though allowMinus is set to false', () => {
+      spectator = createDirective(
+        `<input kirby-input kirby-decimal-mask type="number" min="-100" [allowMinus]="false" />`
+      );
+      spectator.typeInElement('-', spectator.element);
+      expect(spectator.element).toHaveValue('-');
+    });
+
+    it('should allow negative numbers, if "allowMinus" is set to true', () => {
+      spectator = createDirective(
+        `<input kirby-input kirby-decimal-mask type="number" [allowMinus]="true" />`
+      );
+      spectator.typeInElement('-', spectator.element);
+      expect(spectator.element).toHaveValue('-');
+    });
+  });
+
+  describe('maxlength', () => {
+    it('should restrict input according to maxlength', () => {
+      locale = 'en-GB';
+      spectator = createDirective(
+        `<input kirby-input kirby-decimal-mask type="number" maxlength="4" precision="0" />`
+      );
+      spectator.typeInElement('10000', spectator.element);
+      expect(spectator.element).toHaveValue('9,999');
+    });
+
+    it('should disable fractional digits', () => {
+      locale = 'en-GB';
+      spectator = createDirective(
+        `<input kirby-input kirby-decimal-mask type="number" maxlength="4" />`
+      );
+      spectator.typeInElement('10000.88', spectator.element);
+      expect(spectator.element).toHaveValue('9,999');
+    });
+  });
+});

package/src/lib/components/form-field/directives/decimal-mask/decimal-mask.directive.ts

@@ -0,0 +1,113 @@
+import { getLocaleNumberSymbol, NumberSymbol } from '@angular/common';
+import { Directive, ElementRef, Inject, Input, LOCALE_ID, OnInit } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import 'inputmask/lib/extensions/inputmask.numeric.extensions';
+import Inputmask from 'inputmask/lib/inputmask';
+
+interface InputMask {
+  unmaskedvalue: () => string;
+  setValue: (val: string) => void;
+}
+
+@Directive({
+  // tslint:disable-next-line
+  selector: '[kirby-decimal-mask]',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      multi: true,
+      useExisting: DecimalMaskDirective,
+    },
+  ],
+})
+export class DecimalMaskDirective implements ControlValueAccessor, OnInit {
+  @Input() min: number;
+  @Input() max: number;
+  @Input() precision = 2;
+  @Input() setMaxOnOverflow = false;
+
+  @Input() set allowMinus(allowMinus: boolean) {
+    this._allowMinus = allowMinus || (this.min || 0) < 0;
+  }
+
+  @Input() set disableGroupSeperator(disabled: string) {
+    this._groupSeperatorDisabled = String(disabled) === '' || String(disabled) === 'true';
+  }
+
+  @Input() set maxlength(maxlength: number) {
+    this._maxlength = maxlength;
+
+    const maxlengthValue = parseInt('9'.repeat(maxlength));
+    this.max = this.getMax(maxlengthValue);
+    this.min = this.getMin(maxlengthValue);
+  }
+
+  groupSeparator = getLocaleNumberSymbol(this.locale, NumberSymbol.Group);
+  radixPoint = getLocaleNumberSymbol(this.locale, NumberSymbol.Decimal);
+  inputmask: InputMask;
+
+  _allowMinus = false;
+  _maxlength: number;
+  _groupSeperatorDisabled: boolean;
+
+  onChange = (_: string) => {};
+
+  constructor(private elementRef: ElementRef, @Inject(LOCALE_ID) private locale: string) {}
+
+  ngOnInit(): void {
+    // Set type="text", because functionality like 'setSelectionRange' are not supported on type="number"
+    this.elementRef.nativeElement.setAttribute('type', 'text');
+
+    // Remove maxlength as this is handled by the mask
+    this.elementRef.nativeElement.removeAttribute('maxlength');
+
+    this.initMask();
+  }
+
+  writeValue(val: number): void {
+    if (!this.inputmask) return;
+    const formattedValue = String(val).replace('.', this.radixPoint);
+    this.inputmask.setValue(formattedValue);
+  }
+
+  registerOnChange(onChange: any): void {
+    this.onChange = onChange;
+  }
+
+  registerOnTouched(_: any): void {}
+
+  private initMask(): void {
+    new Inputmask('decimal', {
+      groupSeparator: this._groupSeperatorDisabled ? '' : this.groupSeparator,
+      radixPoint: this.radixPoint,
+      digits: this._maxlength ? 0 : this.precision,
+      min: this.min,
+      max: this.max,
+      allowMinus: this._allowMinus,
+      negationSymbol: {
+        front: getLocaleNumberSymbol(this.locale, NumberSymbol.MinusSign),
+        back: '',
+      },
+      SetMaxOnOverflow: this.setMaxOnOverflow,
+      showMaskOnFocus: false,
+      showMaskOnHover: false,
+      placeholder: '',
+      onBeforeWrite: () => {
+        if (!this.inputmask) return;
+        const unmaskedValue = this.inputmask.unmaskedvalue();
+        this.onChange(unmaskedValue.replace(this.radixPoint, '.'));
+      },
+    }).mask(this.elementRef.nativeElement);
+    this.inputmask = this.elementRef.nativeElement.inputmask;
+  }
+
+  private getMax(maxlengthValue: number): number {
+    return this.max === undefined ? maxlengthValue : Math.min(this.max, maxlengthValue);
+  }
+
+  private getMin(maxlengthValue: number): number {
+    if (!this.allowMinus) return;
+    maxlengthValue = -Math.abs(maxlengthValue);
+    return this.min === undefined ? maxlengthValue : -Math.abs(Math.max(this.min, maxlengthValue));
+  }
+}

package/src/lib/components/form-field/form-field-message/form-field-message.component.html

@@ -0,0 +1 @@
+{{ text }}<ng-content></ng-content>

package/src/lib/components/form-field/form-field-message/form-field-message.component.scss

@@ -0,0 +1,11 @@
+@use '~@kirbydesign/core/src/scss/utils';
+
+:host {
+  font-style: italic;
+  font-size: utils.font-size('xs');
+  font-weight: utils.font-weight('normal');
+  font-stretch: normal;
+  line-height: utils.line-height('xs');
+  letter-spacing: normal;
+  color: utils.get-text-color('black');
+}

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

@@ -0,0 +1,12 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  selector: 'kirby-form-field-message',
+  styleUrls: ['./form-field-message.component.scss'],
+  templateUrl: './form-field-message.component.html',
+})
+export class FormFieldMessageComponent {
+  @Input() text: string;
+  @Input() position: 'left' | 'right' = 'left';
+}

package/src/lib/components/form-field/form-field.component.html

@@ -0,0 +1,39 @@
+<label *ngIf="_wrapContentInLabel">
+  <ng-container *ngTemplateOutlet="labelTextTemplate"></ng-container>
+  <ng-container *ngTemplateOutlet="slottedInputTemplate"></ng-container>
+</label>
+
+<ng-container *ngIf="!_wrapContentInLabel">
+  <ng-container *ngTemplateOutlet="labelTemplate"></ng-container>
+  <ng-container *ngTemplateOutlet="slottedInputTemplate"></ng-container>
+</ng-container>
+
+<div *ngIf="message || counter" class="texts">
+  <kirby-form-field-message
+    *ngIf="message"
+    class="message"
+    [text]="message"
+  ></kirby-form-field-message>
+
+  <div *ngIf="counter" class="counter">
+    <ng-content select="kirby-input-counter"></ng-content>
+  </div>
+</div>
+
+<ng-template #slottedInputTemplate>
+  <ng-content select="input[kirby-input]"></ng-content>
+  <ng-content select="textarea[kirby-textarea]"></ng-content>
+  <ng-content select="kirby-radio-group"></ng-content>
+</ng-template>
+
+<ng-template #labelTextTemplate>
+  <ng-container *ngIf="label">
+    <span class="text">{{ label }}</span>
+  </ng-container>
+</ng-template>
+
+<ng-template #labelTemplate>
+  <ng-container *ngIf="label">
+    <label class="text" [id]="_labelId" (click)="onLabelClick()">{{ label }}</label>
+  </ng-container>
+</ng-template>

package/src/lib/components/form-field/form-field.component.scss

@@ -0,0 +1,43 @@
+@use '~@kirbydesign/core/src/scss/utils';
+
+:host {
+  display: block;
+  position: relative; // Ensures correct position of cloned child input when Ionic scrollAssist is enabled
+  margin-bottom: utils.size('s');
+}
+
+:host-context(kirby-item) {
+  margin-bottom: 0;
+}
+
+.texts {
+  display: flex;
+  justify-content: space-between;
+  padding: 2px utils.size('s') 0 utils.size('s');
+
+  .message {
+    flex: 75%;
+
+    &:only-child {
+      flex-basis: auto;
+    }
+  }
+
+  .counter {
+    flex: 25%;
+    text-align: right;
+  }
+}
+
+label {
+  display: block;
+}
+
+.text {
+  display: block;
+  font-size: utils.font-size('s');
+  font-weight: utils.font-weight('light');
+  line-height: utils.line-height('s');
+  margin-bottom: utils.size('xxxs');
+  padding: 0 utils.size('s');
+}