@kirbydesign/designsystem 0.0.0

package/src/lib/components/empty-state/empty-state.component.scss

@@ -0,0 +1,50 @@
+@use '~@kirbydesign/core/src/scss/utils';
+
+article {
+  max-width: 330px;
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: center;
+}
+
+.icon-outline {
+  $icon-size: utils.size('xxl') * 2;
+
+  width: $icon-size;
+  height: $icon-size;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: utils.size('m');
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  border: utils.size('xxxs') solid utils.get-color('medium');
+  border-radius: 50%;
+}
+
+kirby-icon {
+  color: utils.get-color('medium');
+}
+
+h3.title {
+  margin-bottom: utils.size('xxs');
+}
+
+p.subtitle {
+  margin-bottom: utils.size('m');
+  white-space: pre-wrap;
+}
+
+@each $color-name, $color-value in utils.$main-colors {
+  :host(.#{$color-name}) {
+    .icon-outline {
+      border-color: #{utils.get-color($color-name)};
+    }
+
+    kirby-icon {
+      color: #{utils.get-color($color-name)};
+    }
+  }
+}

package/src/lib/components/empty-state/empty-state.component.spec.ts

@@ -0,0 +1,40 @@
+import { createHostFactory, SpectatorHost } from '@ngneat/spectator';
+import { MockComponent } from 'ng-mocks';
+
+import { DesignTokenHelper } from '@kirbydesign/core';
+
+import { IconComponent } from '../icon/icon.component';
+
+import { EmptyStateComponent } from './empty-state.component';
+
+describe('EmptyStateComponent', () => {
+  let spectator: SpectatorHost<EmptyStateComponent>;
+  let element: HTMLElement;
+
+  const createHost = createHostFactory({
+    component: EmptyStateComponent,
+    declarations: [MockComponent(IconComponent)],
+  });
+
+  beforeEach(() => {
+    spectator = createHost(`
+    <kirby-empty-state
+      iconName="help"
+      title="No items"
+      subtitle="You don't have any items. Call support to add some items to your account."
+    >
+      <button kirby-button>Call support</button>
+    </kirby-empty-state>
+    `);
+    element = spectator.element;
+  });
+
+  it('should create', () => {
+    expect(spectator.component).toBeTruthy();
+  });
+
+  it('should render with the correct border width', () => {
+    const outlineElement = element.getElementsByClassName('icon-outline')[0];
+    expect(outlineElement).toHaveComputedStyle({ 'border-width': DesignTokenHelper.size('xxxs') });
+  });
+});

package/src/lib/components/empty-state/empty-state.component.ts

@@ -0,0 +1,50 @@
+import {
+  AfterContentInit,
+  ChangeDetectionStrategy,
+  Component,
+  ContentChildren,
+  Input,
+  QueryList,
+} from '@angular/core';
+
+import { ButtonComponent } from '../button/button.component';
+
+@Component({
+  selector: 'kirby-empty-state',
+  templateUrl: './empty-state.component.html',
+  styleUrls: ['./empty-state.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class EmptyStateComponent implements AfterContentInit {
+  @Input() iconName: string;
+  @Input() customIconName: string;
+  @Input() title: string;
+  @Input() subtitle: string;
+
+  @ContentChildren(ButtonComponent)
+  private slottedButtons: QueryList<ButtonComponent>;
+
+  ngAfterContentInit() {
+    this.enforceAttentionLevelRules();
+
+    /* setTimeout prevents ExpressionChangedAfterItHasBeenCheckedError when changing attention 
+    levels of slotted buttons in this.enforceAttentionLevelRules */
+    this.slottedButtons.changes.subscribe(() => {
+      setTimeout(() => this.enforceAttentionLevelRules());
+    });
+  }
+
+  /** Enforces that all slotted buttons will have their attention
+   * level set to 3, except the first button if it has
+   * level 1.
+   */
+  private enforceAttentionLevelRules() {
+    this.slottedButtons.forEach((button, index) => {
+      if (index === 0 && button.isAttentionLevel1) return;
+
+      if (!button.isAttentionLevel3) {
+        button.attentionLevel = '3';
+      }
+    });
+  }
+}

package/src/lib/components/fab-sheet/fab-sheet.component.html

@@ -0,0 +1,13 @@
+<ion-backdrop
+  *ngIf="actionSheet && isFabSheetOpen"
+  (ionBackdropTap)="hideActions(fab)"
+  (click)="hideActions(fab)"
+></ion-backdrop>
+<ion-fab #fab (click)="disabled || onFabClick(fab)">
+  <ion-fab-button [disabled]="disabled" [attr.disabled]="disabled ? true : null" tabindex="-1">
+    <ng-content select="kirby-icon"></ng-content>
+  </ion-fab-button>
+  <ion-fab-list *ngIf="actionSheet" side="top" class="{{ horizontalAlignment }}">
+    <ng-content select="kirby-action-sheet"></ng-content>
+  </ion-fab-list>
+</ion-fab>

package/src/lib/components/fab-sheet/fab-sheet.component.scss

@@ -0,0 +1,67 @@
+@use '~@kirbydesign/core/src/scss/utils';
+
+$fab-sheet-margin: utils.size('s');
+
+:host {
+  --kirby-action-sheet-margin-horizontal: #{$fab-sheet-margin};
+}
+
+// Ionic fab can be customized by using the css properties listed in the CSS Custom Properties section of the below docs page:
+// https://ionicframework.com/docs/api/fab-button
+ion-fab-button {
+  --box-shadow: #{utils.get-elevation(8)};
+
+  width: 64px;
+  height: 64px;
+  user-select: none;
+
+  // Outline is applied on button border instead,
+  // to keep the rounded shape:
+  outline: none;
+
+  // Only apply focus ring if pointer device can hover
+  // (effectively desktop/mouse devices):
+  @include utils.focus {
+    --border-width: 1px;
+    --border-style: solid;
+    --border-color: #{utils.$focus-ring-color};
+  }
+
+  &[disabled] {
+    --background: #{utils.get-color('semi-light')};
+    --box-shadow: none;
+
+    opacity: 1;
+  }
+}
+
+ion-fab {
+  position: fixed;
+  bottom: $fab-sheet-margin;
+  right: $fab-sheet-margin;
+}
+
+:host-context(.fixed-content) ion-fab {
+  position: absolute;
+}
+
+ion-backdrop {
+  opacity: 0;
+  transition: opacity 750ms;
+  position: fixed;
+  z-index: 999;
+}
+
+:host(.backdrop-visible) ion-backdrop {
+  opacity: 0.4;
+
+  @include utils.media('>=medium') {
+    opacity: 0;
+  }
+}
+
+ion-fab-list {
+  margin-top: 76px;
+  margin-bottom: 76px;
+  right: 0;
+}

package/src/lib/components/fab-sheet/fab-sheet.component.spec.ts

@@ -0,0 +1,29 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import * as ionic from '@ionic/angular';
+import { MockComponents } from 'ng-mocks';
+
+import { FabSheetComponent } from './fab-sheet.component';
+
+describe('FabSheetComponent', () => {
+  let component: FabSheetComponent;
+  let fixture: ComponentFixture<FabSheetComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        FabSheetComponent,
+        MockComponents(ionic.IonFab, ionic.IonFabButton, ionic.IonFabList, ionic.IonBackdrop),
+      ],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FabSheetComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/fab-sheet/fab-sheet.component.ts

@@ -0,0 +1,100 @@
+import { DOCUMENT } from '@angular/common';
+import {
+  AfterContentInit,
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  Component,
+  ContentChild,
+  ElementRef,
+  HostBinding,
+  Inject,
+  Input,
+  Renderer2,
+  ViewChild,
+} from '@angular/core';
+import { IonFab, IonFabButton, IonIcon } from '@ionic/angular';
+
+import { Icon } from '../icon/icon-settings';
+import { kirbyIconSettings } from '../icon/kirby-icon-settings';
+import { ActionSheetComponent } from '../modal/action-sheet/action-sheet.component';
+
+@Component({
+  selector: 'kirby-fab-sheet',
+  templateUrl: './fab-sheet.component.html',
+  styleUrls: ['./fab-sheet.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FabSheetComponent implements AfterContentInit, AfterViewInit {
+  @Input() disabled: boolean = false;
+  @Input() horizontalAlignment: 'left' | 'center' | 'right' = 'right';
+
+  private _isFabSheetOpen: boolean = false;
+  @HostBinding('class.is-open')
+  get isFabSheetOpen() {
+    return this._isFabSheetOpen;
+  }
+
+  private _isBackdropVisible: boolean = false;
+  @HostBinding('class.backdrop-visible')
+  get isBackdropVisible() {
+    return this._isBackdropVisible;
+  }
+
+  @ContentChild(ActionSheetComponent, { static: false }) actionSheet: ActionSheetComponent;
+
+  @ViewChild(IonFabButton, { static: true, read: ElementRef })
+  ionFabButton: ElementRef<HTMLElement>;
+
+  constructor(private renderer: Renderer2, @Inject(DOCUMENT) private document: any) {}
+
+  ngAfterViewInit(): void {
+    const kirbyCloseIcon = kirbyIconSettings.icons.find((icon) => icon.name === 'close');
+    this.setCloseIcon(kirbyCloseIcon);
+  }
+
+  private setCloseIcon(kirbyCloseIcon: Icon, retryCount = 0) {
+    const maxRetryCount = 20;
+    const retryDelayInMs = 20;
+    const fabButtonElement = this.ionFabButton.nativeElement;
+    if (!fabButtonElement || !kirbyCloseIcon || retryCount >= maxRetryCount) {
+      return;
+    }
+    if (fabButtonElement.shadowRoot && fabButtonElement.shadowRoot.innerHTML) {
+      const closeIcon = fabButtonElement.shadowRoot.querySelector('.close-icon ion-icon');
+      if (closeIcon) {
+        const closeIconSvgLoaded = closeIcon.shadowRoot.querySelector('.icon-inner svg');
+        // prettier-ignore
+        const ionCloseIcon = (closeIcon as unknown) as IonIcon;
+        if (ionCloseIcon && closeIconSvgLoaded) {
+          ionCloseIcon.src = kirbyCloseIcon.svg;
+          return;
+        }
+      }
+    }
+    retryCount++;
+    setTimeout(() => this.setCloseIcon(kirbyCloseIcon, retryCount), retryDelayInMs);
+  }
+
+  ngAfterContentInit(): void {
+    if (this.actionSheet) {
+      this.actionSheet.hideCancel = true;
+    }
+  }
+
+  hideActions(fab: IonFab) {
+    fab.close();
+    this._isFabSheetOpen = false;
+    this._isBackdropVisible = false;
+    this.renderer.removeClass(this.document.body, 'fab-sheet-active');
+  }
+
+  onFabClick(fab: IonFab) {
+    this._isFabSheetOpen = !fab.activated;
+    if (this._isFabSheetOpen) {
+      this.renderer.addClass(this.document.body, 'fab-sheet-active');
+    } else {
+      this.renderer.removeClass(this.document.body, 'fab-sheet-active');
+    }
+    setTimeout(() => (this._isBackdropVisible = this.isFabSheetOpen));
+  }
+}

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

@@ -0,0 +1,40 @@
+@use 'sass:map';
+@use '~@kirbydesign/core/src/scss/utils';
+
+:host {
+  display: inline-block;
+  background-color: var(--kirby-flag-background-color, transparent);
+  color: var(--kirby-flag-color, utils.get-color('white-contrast'));
+  border: 1px solid var(--kirby-flag-border-color, utils.get-color('medium'));
+  border-radius: utils.size('xxxs');
+  font-size: utils.font-size('n');
+  padding: utils.size('xxxxs') utils.size('xxs');
+  font-weight: utils.font-weight('medium');
+
+  &.sm {
+    font-size: utils.font-size('s');
+  }
+
+  &.xs {
+    font-size: utils.font-size('xs');
+    padding-left: utils.size('xxxs');
+    padding-right: utils.size('xxxs');
+  }
+}
+
+@each $color-name,
+  $color-value
+    in map.merge(
+      utils.$notification-colors,
+      (
+        'semi-light': utils.get-color('semi-light'),
+        'danger': utils.$danger-background-weak,
+      )
+    )
+{
+  :host(.#{$color-name}) {
+    --kirby-flag-background-color: #{$color-value};
+    --kirby-flag-color: #{utils.get-color($color-name + '-contrast')};
+    --kirby-flag-border-color: #{$color-value};
+  }
+}

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

@@ -0,0 +1,152 @@
+import { createHostFactory, SpectatorHost } from '@ngneat/spectator';
+
+import { DesignTokenHelper, ThemeColorExtended } from '@kirbydesign/core';
+
+import { FlagComponent } from './flag.component';
+
+const getColor = DesignTokenHelper.getColor;
+const size = DesignTokenHelper.size;
+const fontSize = DesignTokenHelper.fontSize;
+const fontWeight = DesignTokenHelper.fontWeight;
+
+describe('FlagComponent', () => {
+  let spectator: SpectatorHost<FlagComponent>;
+  let element: HTMLElement;
+
+  const createHost = createHostFactory({
+    component: FlagComponent,
+  });
+
+  beforeEach(() => {
+    spectator = createHost('<kirby-flag>Value</kirby-flag>');
+    element = spectator.element as HTMLElement;
+  });
+
+  it('should create', () => {
+    expect(spectator.component).toBeTruthy();
+  });
+
+  it('should render with correct display', () => {
+    expect(element).toHaveComputedStyle({
+      display: 'inline-block',
+    });
+  });
+
+  it('should render with transparent background-color', () => {
+    expect(element).toHaveComputedStyle({
+      'background-color': 'transparent',
+    });
+  });
+
+  it('should render with correct color', () => {
+    expect(element).toHaveComputedStyle({ color: getColor('white', 'contrast') });
+  });
+
+  it('should render with correct border', () => {
+    expect(element).toHaveComputedStyle({
+      'border-color': getColor('medium'),
+      'border-width': '1px',
+      'border-style': 'solid',
+    });
+  });
+
+  it('should render with correct border-radius', () => {
+    expect(element).toHaveComputedStyle({ 'border-radius': '4px' });
+  });
+
+  it('should render with correct font-size', () => {
+    expect(element).toHaveComputedStyle({ 'font-size': fontSize('n') });
+  });
+
+  it('should render with correct font-weight', () => {
+    expect(element).toHaveComputedStyle({ 'font-weight': fontWeight('medium') });
+  });
+
+  it('should render with correct padding', () => {
+    expect(element).toHaveComputedStyle({
+      'padding-left': size('xxs'),
+      'padding-right': size('xxs'),
+      'padding-top': size('xxxxs'),
+      'padding-bottom': size('xxxxs'),
+    });
+  });
+
+  describe('when configured with size', () => {
+    describe('and size = xs', () => {
+      beforeEach(() => {
+        spectator.component.size = 'xs';
+        spectator.detectChanges();
+      });
+
+      it('should render with correct font-size', () => {
+        expect(element).toHaveComputedStyle({ 'font-size': fontSize('xs') });
+      });
+
+      it('should render with correct padding', () => {
+        expect(element).toHaveComputedStyle({
+          'padding-left': size('xxxs'),
+          'padding-right': size('xxxs'),
+          'padding-top': size('xxxxs'),
+          'padding-bottom': size('xxxxs'),
+        });
+      });
+    });
+
+    describe('and size = sm', () => {
+      beforeEach(() => {
+        spectator.component.size = 'sm';
+        spectator.detectChanges();
+      });
+
+      it('should render with correct font-size', () => {
+        expect(element).toHaveComputedStyle({ 'font-size': fontSize('s') });
+      });
+
+      it('should render with correct padding', () => {
+        expect(element).toHaveComputedStyle({
+          'padding-left': size('xxs'),
+          'padding-right': size('xxs'),
+          'padding-top': size('xxxxs'),
+          'padding-bottom': size('xxxxs'),
+        });
+      });
+    });
+  });
+
+  describe(`when configured with themeColor`, () => {
+    const allowedThemeColors = ['success', 'warning', 'semi-light'] as const;
+    type FlagThemeColor = typeof allowedThemeColors[number];
+    const themeColors = allowedThemeColors.map((color) => getColor(color));
+    themeColors.forEach((color) => {
+      it(`should render with correct colors when themeColor = '${color.name}'`, async () => {
+        spectator.component.themeColor = color.name as FlagThemeColor;
+        spectator.detectChanges();
+
+        expect(element).toHaveComputedStyle({
+          'background-color': color,
+          color: getColor(color.name as ThemeColorExtended, 'contrast'),
+        });
+      });
+    });
+
+    it(`should render with correct colors when themeColor = 'danger'`, async () => {
+      spectator.component.themeColor = 'danger';
+      spectator.detectChanges();
+
+      expect(element).toHaveComputedStyle({ 'background-color': '#ff878a' });
+    });
+
+    it(`should render with correct colors when themeColor = 'transparent'`, async () => {
+      spectator.component.themeColor = 'transparent';
+      spectator.detectChanges();
+
+      expect(element).toHaveComputedStyle({
+        'background-color': 'transparent',
+        color: getColor('white', 'contrast'),
+        'border-color': getColor('medium'),
+        'border-width': '1px',
+        'border-style': 'solid',
+      });
+    });
+  });
+});

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

@@ -0,0 +1,18 @@
+import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';
+
+@Component({
+  selector: 'kirby-flag',
+  template: ` <ng-content></ng-content> `,
+  styleUrls: ['./flag.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FlagComponent {
+  @Input() size: 'xs' | 'sm' | 'md' = 'md';
+  @Input() themeColor: 'success' | 'warning' | 'danger' | 'semi-light' | 'transparent' =
+    'transparent';
+
+  @HostBinding('class')
+  get _cssClass() {
+    return [this.themeColor, this.size];
+  }
+}

package/src/lib/components/form-field/_form-field-inputs.shared.scss

@@ -0,0 +1,62 @@
+@use '~@kirbydesign/core/src/scss/utils';
+
+$form-field-label-height: 24px;
+$form-field-input-font-family: var(--kirby-font-family);
+$form-field-input-font-size: utils.font-size('n');
+$form-field-input-line-height: utils.line-height('n');
+$form-field-input-padding: utils.size('s');
+
+:host(.error) {
+  border: 1px solid utils.get-color('danger');
+}
+
+// Ensures correct position of cloned input when Ionic scrollAssist is enabled
+:host(.cloned-input) {
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+// Ensures correct position of cloned input when Ionic scrollAssist is enabled
+:host-context(label) {
+  &.cloned-input {
+    top: $form-field-label-height;
+  }
+}
+
+:host {
+  background-color: utils.get-color('white');
+  color: utils.get-color('white-contrast');
+  border: none;
+  box-sizing: border-box;
+  display: block;
+  font-family: $form-field-input-font-family;
+  font-size: $form-field-input-font-size;
+  line-height: $form-field-input-line-height;
+  outline: none;
+  margin: 0;
+  appearance: none;
+  border-radius: utils.size('s');
+  box-shadow: utils.get-elevation(2);
+  padding: $form-field-input-padding;
+  width: 100%;
+
+  &:host-context(kirby-item),
+  &.borderless {
+    border-radius: 0;
+    box-shadow: none;
+    padding: 0;
+    width: auto;
+  }
+
+  &:disabled {
+    background-color: utils.get-color('light-tint');
+    color: utils.get-text-color('semi-dark');
+    box-shadow: none;
+  }
+
+  &::placeholder {
+    color: utils.get-text-color('semi-dark');
+  }
+}