@kirbydesign/designsystem 0.0.0

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

@@ -0,0 +1,83 @@
+import { createHostFactory, SpectatorHost } from '@ngneat/spectator';
+
+import { DesignTokenHelper } from '@kirbydesign/core';
+
+import { TestHelper } from '../../../testing/test-helper';
+import { ItemComponent } from '../../item';
+
+import { InputComponent } from './input.component';
+
+const size = DesignTokenHelper.size;
+
+describe('InputComponent in Item', () => {
+  let spectator: SpectatorHost<InputComponent>;
+  let element: HTMLInputElement;
+
+  const createHost = createHostFactory({
+    component: InputComponent,
+    declarations: [ItemComponent],
+    imports: [TestHelper.ionicModuleForTest],
+  });
+
+  describe('by default', () => {
+    beforeEach(() => {
+      spectator = createHost(`
+      <kirby-item>
+        <input kirby-input/>
+      </kirby-item>`);
+      element = spectator.element as HTMLInputElement;
+    });
+
+    it('should render with correct padding', () => {
+      expect(element).toHaveComputedStyle({
+        padding: '0px',
+      });
+    });
+
+    it('should render without border-radius', () => {
+      expect(element).toHaveComputedStyle({
+        'border-radius': '0px',
+      });
+    });
+
+    it('should render without box-shadow', () => {
+      expect(element).toHaveComputedStyle({
+        'border-shadow': '',
+      });
+    });
+
+    it('should render with correct width', () => {
+      //window.getComputedStyle() returns width in pixels - so use element.computedStyleMap:
+      const styleWidth = (element as any).computedStyleMap().get('width').toString();
+      expect(styleWidth).toBe('100%');
+    });
+  });
+
+  describe('slotted end', () => {
+    beforeEach(() => {
+      spectator = createHost(`
+      <kirby-item>
+        <input slot="end" kirby-input/>
+      </kirby-item>`);
+      element = spectator.element as HTMLInputElement;
+    });
+
+    it('should render with default width', () => {
+      //window.getComputedStyle() returns width in pixels - so use element.computedStyleMap:
+      const styleWidth = (element as any).computedStyleMap().get('width').toString();
+      expect(styleWidth).toBe('auto');
+    });
+
+    it('should render with correct margin', () => {
+      expect(element).toHaveComputedStyle({
+        'margin-inline-start': size('s'),
+      });
+    });
+
+    it('should render with text alignment right', () => {
+      expect(element).toHaveComputedStyle({
+        'text-align': 'right',
+      });
+    });
+  });
+});

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

@@ -0,0 +1,54 @@
+@use '../form-field-inputs.shared' as shared;
+@use '~@kirbydesign/core/src/scss/utils';
+
+:host {
+  &[type='number'] {
+    // fallback
+    appearance: textfield;
+  }
+
+  // Chrome, Safari, Edge, Opera
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    appearance: none;
+    margin: 0;
+  }
+
+  height: utils.size('xxxl');
+}
+
+:host(.md) {
+  height: utils.size('xl');
+  border-radius: utils.size('m');
+}
+
+/* clean-css ignore:start */
+:host-context(kirby-item kirby-form-field[slot='end']) {
+  &[type='number'] {
+    font-weight: utils.font-weight('bold');
+  }
+}
+
+/* clean-css ignore:end */
+
+/*
+ * Date-mask
+ */
+.date-mask-wrapper {
+  position: relative;
+}
+
+:host-context(.date-mask-wrapper) {
+  color: var(--kirby-text-color-semi-dark);
+}
+
+.date-mask {
+  font-family: shared.$form-field-input-font-family;
+  font-size: shared.$form-field-input-font-size;
+  line-height: shared.$form-field-input-line-height;
+  color: var(--kirby-white-contrast);
+  position: absolute;
+  top: 0;
+  left: 0;
+  margin: shared.$form-field-input-padding;
+}

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

@@ -0,0 +1,159 @@
+import { fakeAsync, tick } from '@angular/core/testing';
+import { createHostFactory, SpectatorHost } from '@ngneat/spectator';
+
+import { DesignTokenHelper } from '@kirbydesign/core';
+
+import { InputComponent } from './input.component';
+
+const { getColor, size } = DesignTokenHelper;
+
+describe('InputComponent', () => {
+  let spectator: SpectatorHost<InputComponent>;
+  let element: HTMLInputElement;
+
+  const createHost = createHostFactory({
+    component: InputComponent,
+  });
+
+  beforeEach(() => {
+    spectator = createHost('<input kirby-input/>');
+    element = spectator.element as HTMLInputElement;
+  });
+
+  it('should create', () => {
+    expect(spectator.component).toBeTruthy();
+  });
+
+  it('should render with correct color', () => {
+    expect(element).toHaveComputedStyle({ color: getColor('black') });
+  });
+
+  it('should render with default height', () => {
+    expect(element).toHaveComputedStyle({ height: size('xxxl') });
+  });
+
+  it('should render with correct width', () => {
+    //window.getComputedStyle() returns width in pixels - so use element.computedStyleMap:
+    const styleWidth = (element as any).computedStyleMap().get('width').toString();
+    expect(styleWidth).toBe('100%');
+  });
+
+  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 configured with borderless=true', () => {
+    beforeEach(() => {
+      spectator.component.borderless = true;
+      spectator.detectChanges();
+    });
+
+    it('should render with correct padding', () => {
+      expect(element).toHaveComputedStyle({
+        padding: '0px',
+      });
+    });
+
+    it('should render without border-radius', () => {
+      expect(element).toHaveComputedStyle({
+        'border-radius': '0px',
+      });
+    });
+
+    it('should render without box-shadow', () => {
+      expect(element).toHaveComputedStyle({
+        'border-shadow': '',
+      });
+    });
+
+    it('should render with default width', () => {
+      //window.getComputedStyle() returns width in pixels - so use element.computedStyleMap:
+      const styleWidth = (element as any).computedStyleMap().get('width').toString();
+      expect(styleWidth).toBe('auto');
+    });
+  });
+
+  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'),
+      });
+    });
+
+    it('should render with correct height', () => {
+      expect(element).toHaveComputedStyle({ height: size('xxxl') });
+    });
+  });
+
+  describe('when disabled', () => {
+    beforeEach(() => {
+      element.disabled = true;
+    });
+
+    it('should render with correct background-color', () => {
+      expect(element).toHaveComputedStyle({
+        'background-color': getColor('light', 'tint'),
+      });
+    });
+  });
+});
+
+describe('when configured with size medium', () => {
+  const createHost = createHostFactory({
+    component: InputComponent,
+  });
+  it('should render with correct height', () => {
+    const spectator = createHost(`
+    <input kirby-input size="md"/>
+    `);
+    expect(spectator.element).toHaveComputedStyle({
+      height: size('xl'),
+    });
+  });
+});

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

@@ -0,0 +1,91 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  HostBinding,
+  HostListener,
+  Input,
+  OnChanges,
+  SimpleChanges,
+} from '@angular/core';
+
+export enum InputSize {
+  medium = 'md',
+  large = 'lg',
+}
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  // tslint:disable-next-line:component-selector
+  selector: 'input[kirby-input]',
+  styleUrls: ['./input.component.scss'],
+  template: '',
+})
+export class InputComponent implements OnChanges {
+  private static typeToInputmodeMap = {
+    number: 'decimal',
+    search: 'search',
+  };
+
+  kirbyChange = new EventEmitter<string>();
+
+  @Input() set type(value: string) {
+    const mappedValue = InputComponent.typeToInputmodeMap[value];
+    if (mappedValue && !this.inputmode) {
+      this.inputmode = mappedValue;
+    }
+  }
+
+  @HostBinding('class')
+  @Input()
+  size: InputSize | `${InputSize}` = InputSize.large;
+
+  /**
+   * 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.value')
+  @Input()
+  value: string;
+
+  @HostBinding('attr.maxlength')
+  @Input()
+  maxlength: number;
+
+  @HostBinding('attr.inputmode')
+  @Input()
+  inputmode: string;
+
+  @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 input 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/form-field/input-counter/input-counter.component.html

@@ -0,0 +1 @@
+<kirby-form-field-message [text]="text"></kirby-form-field-message>

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

@@ -0,0 +1,184 @@
+import { Spectator, createComponentFactory } from '@ngneat/spectator';
+
+import { InputCounterComponent } from './input-counter.component';
+import { FormFieldMessageComponent } from '../form-field-message/form-field-message.component';
+import { InputComponent } from '../input/input.component';
+import { TextareaComponent } from '../textarea/textarea.component';
+
+describe('InputCounterComponent', () => {
+  let component: InputCounterComponent;
+  let spectator: Spectator<InputCounterComponent>;
+
+  const createHost = createComponentFactory({
+    component: InputCounterComponent,
+    declarations: [FormFieldMessageComponent],
+  });
+
+  beforeEach(() => {
+    spectator = createHost();
+    component = spectator.component;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('when configured with no length', () => {
+    it('should not have any text', () => {
+      expect(component.text).toBeUndefined();
+    });
+
+    it('should render counter correctly', () => {
+      expect(spectator.element.textContent).toEqual('');
+    });
+  });
+
+  describe('when configured with length and no maxlength', () => {
+    const expectedText = '10';
+    beforeEach(() => {
+      spectator.setInput('length', 10);
+    });
+
+    it('should have correct text', () => {
+      expect(component.text).toEqual(expectedText);
+    });
+
+    it('should render text correctly', () => {
+      expect(spectator.element.textContent).toEqual(expectedText);
+    });
+  });
+
+  describe('when configured with length and maxlength = 0', () => {
+    const expectedText = '10';
+    beforeEach(() => {
+      spectator.setInput('length', 10);
+      spectator.setInput('maxlength', 0);
+    });
+
+    it('should have correct text', () => {
+      expect(component.text).toEqual(expectedText);
+    });
+
+    it('should render text correctly', () => {
+      expect(spectator.element.textContent).toEqual(expectedText);
+    });
+  });
+
+  describe('when configured with length and maxlength', () => {
+    const expectedText = '10/20';
+    beforeEach(() => {
+      spectator.setInput('length', 10);
+      spectator.setInput('maxlength', 20);
+    });
+
+    it('should have correct text', () => {
+      expect(component.text).toEqual(expectedText);
+    });
+
+    it('should render text correctly', () => {
+      expect(spectator.element.textContent).toEqual(expectedText);
+    });
+  });
+
+  describe('when configured with listenTo = input', () => {
+    describe('and input does not have initial value and maxlength', () => {
+      const input = new InputComponent();
+      beforeEach(() => {
+        component.listenTo = input;
+        component.ngOnInit();
+      });
+
+      it('should have initial length = 0', () => {
+        expect(component.length).toEqual(0);
+      });
+
+      it('should not have maxlength', () => {
+        expect(component.maxlength).toBeUndefined();
+      });
+
+      it('should get updated length from kirbyChange event', () => {
+        const testValue = 'Test 123';
+        input.kirbyChange.emit(testValue);
+        expect(component.length).toEqual(testValue.length);
+      });
+    });
+
+    describe('and input has initial value and maxlength', () => {
+      const initialValue = 'Test 123';
+      const updatedValue = 'Test 123456';
+      const maxlength = 99;
+      const input = new InputComponent();
+      input.value = initialValue;
+      input.maxlength = maxlength;
+      beforeEach(() => {
+        component.listenTo = input;
+        component.ngOnInit();
+      });
+
+      it('should get initial length from input value', () => {
+        expect(component.length).toEqual(initialValue.length);
+      });
+
+      it('should get maxlength from input', () => {
+        expect(component.maxlength).toEqual(maxlength);
+      });
+
+      it('should get updated length from kirbyChange event', () => {
+        expect(component.length).toEqual(initialValue.length);
+        input.kirbyChange.emit(updatedValue);
+        expect(component.length).toEqual(updatedValue.length);
+      });
+    });
+  });
+
+  describe('when configured with listenTo = textarea', () => {
+    describe('and textarea does not have initial value and maxlength', () => {
+      const textarea = new TextareaComponent();
+      beforeEach(() => {
+        component.listenTo = textarea;
+        component.ngOnInit();
+      });
+
+      it('should have initial length = 0', () => {
+        expect(component.length).toEqual(0);
+      });
+
+      it('should not have maxlength', () => {
+        expect(component.maxlength).toBeUndefined();
+      });
+
+      it('should get updated length from kirbyChange event', () => {
+        const testValue = 'Test 123';
+        textarea.kirbyChange.emit(testValue);
+        expect(component.length).toEqual(testValue.length);
+      });
+    });
+
+    describe('and textarea has initial value and maxlength', () => {
+      const initialValue = 'Test 123';
+      const updatedValue = 'Test 123456';
+      const maxlength = 99;
+      const textarea = new TextareaComponent();
+      textarea.value = initialValue;
+      textarea.maxlength = maxlength;
+      beforeEach(() => {
+        component.listenTo = textarea;
+        component.ngOnInit();
+      });
+
+      it('should get initial length from textarea value', () => {
+        expect(component.length).toEqual(initialValue.length);
+      });
+
+      it('should get maxlength from textarea', () => {
+        expect(component.maxlength).toEqual(maxlength);
+      });
+
+      it('should get updated length from kirbyChange event', () => {
+        expect(component.length).toEqual(initialValue.length);
+        textarea.kirbyChange.emit(updatedValue);
+        expect(component.length).toEqual(updatedValue.length);
+      });
+    });
+  });
+});

package/src/lib/components/form-field/input-counter/input-counter.component.ts

@@ -0,0 +1,41 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Subscription } from 'rxjs';
+
+import { InputComponent } from '../input/input.component';
+
+import { TextareaComponent } from './../textarea/textarea.component';
+
+@Component({
+  selector: 'kirby-input-counter',
+  templateUrl: './input-counter.component.html',
+})
+export class InputCounterComponent implements OnInit, OnDestroy {
+  @Input() listenTo: InputComponent | TextareaComponent;
+  length: number;
+  maxlength: number;
+  private _inputChangeSubscription: Subscription;
+
+  get text(): string {
+    if (this.length === undefined) {
+      return undefined;
+    }
+    const ofMaxlength = this.maxlength ? `/${this.maxlength}` : '';
+    return `${this.length}${ofMaxlength}`;
+  }
+
+  ngOnInit(): void {
+    if (this.listenTo) {
+      this.length = this.listenTo.value ? this.listenTo.value.length : 0;
+      this.maxlength = this.listenTo.maxlength;
+      this._inputChangeSubscription = this.listenTo.kirbyChange.subscribe((value) => {
+        this.length = value.length;
+      });
+    }
+  }
+
+  ngOnDestroy(): void {
+    if (this._inputChangeSubscription) {
+      this._inputChangeSubscription.unsubscribe();
+    }
+  }
+}

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

@@ -0,0 +1,2 @@
+<ng-content *ngIf="!value"></ng-content>
+<ng-container *ngIf="value">{{ value }}</ng-container>

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

@@ -0,0 +1,11 @@
+@use '../form-field-inputs.shared';
+@use '~@kirbydesign/core/src/scss/utils';
+
+:host {
+  font-family: var(--kirby-font-family);
+  resize: none;
+
+  @include utils.media('>=medium') {
+    resize: vertical;
+  }
+}