@kirbydesign/designsystem 0.0.0

package/src/lib/components/segmented-control/segmented-control.component.spec.ts

@@ -0,0 +1,247 @@
+import { By } from '@angular/platform-browser';
+import { createHostFactory, SpectatorHost } from '@ngneat/spectator';
+import { MockComponents, MockDirective } from 'ng-mocks';
+
+import { DesignTokenHelper } from '@kirbydesign/core';
+
+import { ThemeColorDirective } from '../../directives';
+import { BadgeComponent } from '../../index';
+import { TestHelper } from '../../testing/test-helper';
+import { ChipComponent } from '../chip/chip.component';
+import { IconComponent } from '../icon';
+
+import { SegmentItem } from './segment-item';
+import { SegmentedControlComponent, SegmentedControlMode } from './segmented-control.component';
+
+const fatFingerSize = DesignTokenHelper.fatFingerSize;
+
+describe('SegmentedControlComponent', () => {
+  let component: SegmentedControlComponent;
+  let onSegmentSelectSpy: jasmine.Spy;
+  let items: SegmentItem[] = [
+    {
+      text: 'First item',
+      id: 'first',
+      badge: {
+        content: '2',
+        themeColor: 'danger',
+      },
+    },
+    {
+      text: 'Second item',
+      id: 'second',
+    },
+    {
+      text: 'Third item',
+      id: 'third',
+    },
+  ];
+
+  let spectator: SpectatorHost<SegmentedControlComponent>;
+
+  const createHost = createHostFactory({
+    component: SegmentedControlComponent,
+    declarations: [
+      MockComponents(ChipComponent, BadgeComponent),
+      MockDirective(ThemeColorDirective),
+    ],
+    imports: [TestHelper.ionicModuleForTest],
+  });
+
+  beforeEach(() => {
+    spectator = createHost(
+      `<kirby-segmented-control [items]="items" selectedIndex="1">
+       </kirby-segmented-control>`,
+      {
+        hostProps: {
+          items: items,
+        },
+      }
+    );
+    component = spectator.component;
+    onSegmentSelectSpy = spyOn(component.segmentSelect, 'emit');
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should have checked item as value when created', () => {
+    expect(component.value).toBe(items[1]);
+  });
+
+  describe("in 'default' mode", () => {
+    it("should have a 'default' mode when created", () => {
+      expect(component.mode).toBe(SegmentedControlMode.default);
+    });
+
+    it('should have a segment button per item', () => {
+      expect(spectator.queryHostAll('ion-segment-button').length).toBe(items.length);
+    });
+
+    it('should not have any segmented chips', () => {
+      expect(spectator.queryHostAll('kirby-chip').length).toBe(0);
+    });
+
+    it('should call onSegmentSelect when ionChange event fires', async () => {
+      expect(component.value).toBe(items[1]);
+      const ionSegmentElement = spectator.queryHost<HTMLIonSegmentElement>('ion-segment');
+      await TestHelper.whenReady(ionSegmentElement);
+      spyOn(component, 'onSegmentSelect');
+      const changeEvent = new CustomEvent('ionChange', { detail: { value: items[0].id } });
+      ionSegmentElement.dispatchEvent(changeEvent);
+      expect(component.onSegmentSelect).toHaveBeenCalledWith(items[0].id);
+    });
+
+    it('should set value to event.detail.value when ionChange event fires', async () => {
+      expect(component.value).toBe(items[1]);
+      const ionSegmentElement = spectator.queryHost<HTMLIonSegmentElement>('ion-segment');
+      await TestHelper.whenReady(ionSegmentElement);
+      const changeEvent = new CustomEvent('ionChange', { detail: { value: items[2].id } });
+      ionSegmentElement.dispatchEvent(changeEvent);
+      expect(component.value).toBe(items[2]);
+    });
+
+    it('should have touch area with minimum size equal to fat finger size', () => {
+      const touchArea = window.getComputedStyle(
+        spectator.element.querySelector('ion-segment-button'),
+        '::after'
+      );
+
+      expect(parseInt(touchArea.height)).toBeGreaterThanOrEqual(parseInt(fatFingerSize()));
+      expect(parseInt(touchArea.width)).toBeGreaterThanOrEqual(parseInt(fatFingerSize()));
+    });
+
+    describe('when updating items', () => {
+      it('should not emit segmentSelect event', async () => {
+        const ionSegmentElement = spectator.queryHost<HTMLIonSegmentElement>('ion-segment');
+        await TestHelper.whenReady(ionSegmentElement);
+
+        const clonedItems = JSON.parse(JSON.stringify(items));
+        spectator.setHostInput({ items: clonedItems });
+        expect(onSegmentSelectSpy).not.toHaveBeenCalled();
+      });
+    });
+  });
+
+  const testModes = [SegmentedControlMode.chip, SegmentedControlMode.compactChip];
+
+  testModes.forEach((testMode) => {
+    describe(`in '${testMode}' mode`, () => {
+      beforeEach(() => {
+        spectator.setInput('mode', testMode);
+      });
+
+      it(`should have a '${testMode}' mode when created`, () => {
+        expect(component.mode).toBe(testMode);
+      });
+
+      it('should not have an ion-segment control', () => {
+        expect(spectator.queryHost('ion-segment')).toBeNull();
+      });
+
+      it('should not have any segments buttons', () => {
+        expect(spectator.queryHostAll('ion-segment-button').length).toBe(0);
+      });
+
+      it('should have a segment chip per item', () => {
+        expect(spectator.queryHostAll('kirby-chip').length).toBe(items.length);
+      });
+
+      it('should call onSegmentSelect when clicking a different segment chip', () => {
+        expect(component.value).toBe(items[1]);
+
+        spyOn(component, 'onSegmentSelect');
+        spectator.dispatchMouseEvent('kirby-chip:first-of-type', 'click');
+
+        expect(component.onSegmentSelect).toHaveBeenCalled();
+      });
+
+      it('should set value when clicking a different segment chip', () => {
+        expect(component.value).toBe(items[1]);
+
+        spectator.dispatchMouseEvent('kirby-chip:last-of-type', 'click');
+
+        expect(component.value).toBe(items[2]);
+      });
+    });
+  });
+});
+
+describe('SegmentedControl with Badge', () => {
+  let itemsWithBadge: SegmentItem[] = [
+    {
+      text: 'First Item',
+      id: 'first',
+      badge: {
+        content: '1',
+        themeColor: 'danger',
+      },
+    },
+    {
+      text: 'Second item',
+      id: 'second',
+      badge: {
+        icon: 'attach',
+        themeColor: 'danger',
+      },
+    },
+    {
+      text: 'Third item',
+      id: 'third',
+      badge: {
+        content: '1',
+        icon: 'attach',
+        themeColor: 'danger',
+      },
+    },
+  ];
+
+  let spectator: SpectatorHost<SegmentedControlComponent>;
+
+  const createHost = createHostFactory({
+    component: SegmentedControlComponent,
+    declarations: [MockComponents(ChipComponent, BadgeComponent, IconComponent)],
+    imports: [TestHelper.ionicModuleForTest],
+  });
+
+  beforeEach(() => {
+    spectator = createHost(
+      `<kirby-segmented-control>
+       </kirby-segmented-control>`
+    );
+  });
+
+  it('should render a badge per item with badge property defined', () => {
+    spectator.setInput({ items: itemsWithBadge });
+
+    expect(spectator.queryHostAll('kirby-badge').length).toBe(itemsWithBadge.length);
+  });
+
+  it('should render badge with content (text-string)', () => {
+    const item: SegmentItem = itemsWithBadge[0];
+    spectator.setInput({ items: [item] });
+    const badgeElement: HTMLElement = spectator.query('kirby-badge');
+
+    expect(badgeElement.innerText.trim).toContainText(item.badge.content);
+  });
+
+  it('should render icon in badge with correct name', () => {
+    const item: SegmentItem = itemsWithBadge[1];
+    spectator.setInput({ items: [item] });
+    const iconComponent = spectator.debugElement.query(
+      By.directive(IconComponent)
+    ).componentInstance;
+
+    expect(iconComponent.name).toBe(item.badge.icon);
+  });
+
+  it('should render badge with icon if both icon and content is provided', () => {
+    spectator.setInput({ items: [itemsWithBadge[2]] });
+    const iconComponent = spectator.debugElement.query(
+      By.directive(IconComponent)
+    ).componentInstance;
+
+    expect(iconComponent).toBeDefined();
+  });
+});

package/src/lib/components/segmented-control/segmented-control.component.ts

@@ -0,0 +1,96 @@
+import { Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';
+
+import { IconRegistryService } from '../icon/icon-registry.service';
+
+import { SegmentItem, SegmentItemInternal } from './segment-item';
+
+export enum SegmentedControlMode {
+  chip = 'chip',
+  compactChip = 'compactChip',
+  default = 'default',
+}
+
+@Component({
+  selector: 'kirby-segmented-control',
+  templateUrl: './segmented-control.component.html',
+  styleUrls: ['./segmented-control.component.scss'],
+  // tslint:disable-next-line: no-host-metadata-property
+  host: { role: 'group' },
+})
+export class SegmentedControlComponent {
+  constructor(private iconRegistryService: IconRegistryService) {}
+
+  preventWrapperClick(event: Event) {
+    if (event.target instanceof HTMLElement) {
+      if (event.target.classList.contains('segment-btn-wrapper')) {
+        event.stopImmediatePropagation();
+      }
+    }
+  }
+
+  @Input() mode: SegmentedControlMode | `${SegmentedControlMode}` = SegmentedControlMode.default;
+
+  @HostBinding('class')
+  get _modeCssClass() {
+    return {
+      [SegmentedControlMode.chip]: 'chip-mode',
+      [SegmentedControlMode.default]: 'default-mode',
+      [SegmentedControlMode.compactChip]: 'compact chip-mode',
+    }[this.mode];
+  }
+
+  private _items: SegmentItemInternal[] = [];
+  get items(): SegmentItem[] {
+    return this._items;
+  }
+
+  @Input() set items(value: SegmentItem[]) {
+    this._items = value || [];
+    this._items.forEach((item) => {
+      if (!item.badge) return;
+      // We need to verify whether badges icon is custom or default, so we can check for it in the template
+      item.badge.isCustomIcon =
+        item.badge.icon !== undefined &&
+        this.iconRegistryService.getIcon(item.badge.icon) !== undefined;
+    });
+    this._value = this.items[this.selectedIndex];
+  }
+
+  private _selectedIndex: number = -1;
+  get selectedIndex(): number {
+    return this._selectedIndex;
+  }
+
+  @Input() set selectedIndex(value: number) {
+    if (value !== this._selectedIndex) {
+      this._selectedIndex = value;
+      this._value = this.items[this.selectedIndex];
+    }
+  }
+
+  private _value: SegmentItem;
+  get value(): SegmentItem {
+    return this._value;
+  }
+
+  @Input() set value(value: SegmentItem) {
+    this.selectedIndex = this.items.indexOf(value);
+  }
+
+  @HostBinding('class.sm')
+  isSmallSize: boolean;
+
+  @Input() set size(size: 'sm' | 'md') {
+    this.isSmallSize = size === 'sm';
+  }
+
+  @Output() segmentSelect: EventEmitter<SegmentItem> = new EventEmitter();
+
+  onSegmentSelect(selectedId: string) {
+    const selectedItemIndex = this.items.findIndex((item) => selectedId === item.id);
+    if (selectedItemIndex !== this.selectedIndex) {
+      this.selectedIndex = selectedItemIndex;
+      this.segmentSelect.emit(this.value);
+    }
+  }
+}

package/src/lib/components/shared/component-configuration.ts

@@ -0,0 +1,6 @@
+import { Type } from '@angular/core';
+
+export interface ComponentConfiguration {
+  component: Type<any>;
+  data: any;
+}

package/src/lib/components/shared/component-loader.directive.ts

@@ -0,0 +1,42 @@
+import {
+  Directive,
+  Input,
+  ComponentFactoryResolver,
+  OnInit,
+  Renderer2,
+  ViewContainerRef,
+} from '@angular/core';
+
+import { ComponentConfiguration } from './component-configuration';
+import { DynamicComponent } from './dynamic-component';
+
+@Directive({
+  selector: '[kirbyLoadComponent]',
+})
+export class ComponentLoaderDirective implements OnInit {
+  // tslint:disable-next-line:no-input-rename
+  @Input('kirbyLoadComponent') configuration: ComponentConfiguration;
+  @Input() cssClass: string;
+
+  constructor(
+    private componentFactoryResolver: ComponentFactoryResolver,
+    private viewContainerRef: ViewContainerRef,
+    private renderer: Renderer2
+  ) {}
+
+  ngOnInit() {
+    this.loadCard();
+  }
+
+  loadCard() {
+    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(
+      this.configuration.component
+    );
+    this.viewContainerRef.clear();
+    const componentRef = this.viewContainerRef.createComponent(componentFactory);
+    if (componentRef && componentRef.location && componentRef.location.nativeElement) {
+      this.renderer.addClass(componentRef.location.nativeElement, this.cssClass);
+    }
+    (<DynamicComponent>componentRef.instance).data = this.configuration.data;
+  }
+}

package/src/lib/components/shared/dynamic-component.ts

@@ -0,0 +1,3 @@
+export interface DynamicComponent {
+  data: any;
+}

package/src/lib/components/shared/index.ts

@@ -0,0 +1,9 @@
+export * from './resize-observer/resize-observer.factory';
+export * from './resize-observer/resize-observer.service';
+export * from './resize-observer/types/resize-observer';
+export * from './resize-observer/types/resize-observer-callback';
+export * from './resize-observer/types/resize-observer-entry';
+
+export * from './component-configuration';
+export * from './component-loader.directive';
+export * from './dynamic-component';

package/src/lib/components/shared/resize-observer/resize-observer.factory.ts

@@ -0,0 +1,20 @@
+import { Injectable } from '@angular/core';
+
+import { ResizeObserver } from './types/resize-observer';
+import { ResizeObserverCallback } from './types/resize-observer-callback';
+
+declare var ResizeObserver: {
+  prototype: ResizeObserver;
+  new (callback: ResizeObserverCallback): ResizeObserver;
+};
+
+/**
+ * Factory that creates a new ResizeObserver and allows us to stub it out in unit tests.
+ * @docs-private
+ */
+@Injectable({ providedIn: 'root' })
+export class ResizeObserverFactory {
+  create(callback: ResizeObserverCallback): ResizeObserver | null {
+    return typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(callback);
+  }
+}

package/src/lib/components/shared/resize-observer/resize-observer.service.ts

@@ -0,0 +1,65 @@
+import { ElementRef, Injectable, OnDestroy, NgZone } from '@angular/core';
+
+import { ResizeObserver } from './types/resize-observer';
+import { ResizeObserverEntry } from './types/resize-observer-entry';
+import { ResizeObserverFactory } from './resize-observer.factory';
+
+@Injectable({ providedIn: 'root' })
+export class ResizeObserverService implements OnDestroy {
+  // IMPORTANT: Keeps track of the existing ResizeObserver so it can be reused for performance.
+  // See: https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/z6ienONUb5A/F5-VcUZtBAAJ
+  private observer: ResizeObserver | null;
+  private observedElements = new WeakMap<Element, (entry: ResizeObserverEntry) => void>();
+
+  constructor(private _resizeObserverFactory: ResizeObserverFactory, private zone: NgZone) {
+    this.observer = this._resizeObserverFactory.create((entries) => this.handleResize(entries));
+  }
+
+  observe(
+    elementOrRef: Element | ElementRef<Element>,
+    action: (entry: ResizeObserverEntry) => void
+  ): void {
+    const element = elementOrRef instanceof ElementRef ? elementOrRef.nativeElement : elementOrRef;
+    if (!this.observedElements.has(element)) {
+      if (this.observer) {
+        // IMPORTANT: Has to be run outside the Angular zone, for it to work with ResizeObserver polyfill:
+        this.zone.runOutsideAngular(() => {
+          this.observer.observe(element);
+        });
+      }
+      this.observedElements.set(element, action);
+    }
+  }
+
+  ngOnDestroy() {
+    if (this.observer) {
+      // IMPORTANT: Has to be run outside the Angular zone, for it to work with ResizeObserver polyfill:
+      this.zone.runOutsideAngular(() => {
+        this.observer.disconnect();
+      });
+    }
+    this.observedElements = null;
+  }
+
+  unobserve(elementOrRef: Element | ElementRef<Element>) {
+    const element = elementOrRef instanceof ElementRef ? elementOrRef.nativeElement : elementOrRef;
+    if (this.observedElements.has(element)) {
+      if (this.observer) {
+        // IMPORTANT: Has to be run outside the Angular zone, for it to work with ResizeObserver polyfill:
+        this.zone.runOutsideAngular(() => {
+          this.observer.unobserve(element);
+        });
+      }
+      this.observedElements.delete(element);
+    }
+  }
+
+  private handleResize(entries: ResizeObserverEntry[]) {
+    entries.forEach((entry) => {
+      const action = this.observedElements.get(entry.target);
+      if (action) {
+        action(entry);
+      }
+    });
+  }
+}

package/src/lib/components/shared/resize-observer/types/resize-observer-callback.ts

@@ -0,0 +1,7 @@
+import { ResizeObserver } from './resize-observer';
+import { ResizeObserverEntry } from './resize-observer-entry';
+
+export type ResizeObserverCallback = (
+  entries: ResizeObserverEntry[],
+  observer: ResizeObserver
+) => void;

package/src/lib/components/shared/resize-observer/types/resize-observer-entry.ts

@@ -0,0 +1,14 @@
+export interface ResizeObserverEntry {
+  /**
+   * @param target The Element whose size has changed.
+   */
+  new (target: Element);
+  /**
+   * The Element whose size has changed.
+   */
+  readonly target: Element;
+  /**
+   * Element's content rect when ResizeObserverCallback is invoked.
+   */
+  readonly contentRect: DOMRectReadOnly;
+}

package/src/lib/components/shared/resize-observer/types/resize-observer.ts

@@ -0,0 +1,17 @@
+import { ResizeObserverCallback } from './resize-observer-callback';
+
+export interface ResizeObserver {
+  new (callback: ResizeObserverCallback);
+  /**
+   * Adds target to the list of observed elements.
+   */
+  observe: (target: Element) => void;
+  /**
+   * Removes target from the list of observed elements.
+   */
+  unobserve: (target: Element) => void;
+  /**
+   * Clears both the observationTargets and activeTargets lists.
+   */
+  disconnect: () => void;
+}

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

@@ -0,0 +1,14 @@
+<div class="slide-button-container" [ngClass]="{ 'slide-done': isSlideDone }">
+  <input
+    type="range"
+    (mouseup)="onSliderMouseup()"
+    (touchend)="onSliderMouseup()"
+    (input)="onSliderValueChange($event.target.value)"
+    (mousedown)="onSliderMousedown()"
+    (touchstart)="onSliderMousedown()"
+    class="slide-button"
+    [value]="value"
+    max="100"
+  />
+  <p class="slide-button-text slide-{{ pctInTens }}-pct">{{ text }}</p>
+</div>

package/src/lib/components/slide-button/slide-button.component.scss

@@ -0,0 +1,81 @@
+@use '~@kirbydesign/core/src/scss/utils';
+@use 'slide-button.component.shared';
+
+@mixin _slider-thumb() {
+  appearance: none;
+  border-radius: 50%;
+  background-color: slide-button.$slider-thumb-bg-color;
+  background-image: url('/assets/kirby/icons/svg/arrow-more.svg');
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: utils.size('m');
+  width: slide-button.$slide-button-width;
+  height: slide-button.$slide-button-width;
+  border: none;
+  cursor: pointer;
+}
+
+:host {
+  position: relative;
+  display: inline-block;
+  width: slide-button.$slide-button-container-width;
+  user-select: none;
+
+  &[expand='block'] {
+    display: block;
+    width: 100%;
+  }
+
+  .slide-button-container {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: slide-button.$slide-button-text-color;
+    background-color: slide-button.$slide-button-container-bg-color;
+    height: slide-button.$slide-button-container-height;
+    border-radius: slide-button.$slide-button-container-radius;
+  }
+
+  @for $i from 1 through 10 {
+    $i-tenth: $i * 10;
+    .slide-#{$i-tenth}-pct {
+      opacity: 1 - ($i * 0.1);
+    }
+  }
+
+  .slide-button-text {
+    position: absolute;
+    font-size: utils.font-size('n');
+    margin: 0;
+    line-height: 1;
+    z-index: 1;
+    width: 100%;
+    text-align: center;
+    padding: slide-button.$slide-button-text-padding;
+  }
+
+  .slide-button {
+    width: 100%;
+    height: 100%;
+    appearance: none;
+    background: transparent;
+    z-index: 2;
+  }
+
+  .slide-button::-webkit-slider-thumb {
+    @include _slider-thumb;
+  }
+
+  .slide-button::-moz-range-thumb {
+    @include _slider-thumb;
+  }
+
+  .slide-done {
+    transition: all 0.3s ease-in-out;
+    opacity: 0;
+    height: 0;
+    transform: scale(0);
+    pointer-events: none;
+  }
+}

package/src/lib/components/slide-button/slide-button.component.shared.scss

@@ -0,0 +1,12 @@
+@use '~@kirbydesign/core/src/scss/utils';
+
+$slide-button-container-width: 256px;
+$slide-button-spacing: 2px;
+$slide-button-width: 52px;
+$slide-button-container-height: $slide-button-width + 2 * $slide-button-spacing;
+$slide-button-container-bg-color: utils.get-color('primary');
+$slider-thumb-bg-color: utils.get-color('white');
+$slide-button-text-color: utils.get-color('primary-contrast');
+$total-slider-thumb-width: $slide-button-width + $slide-button-spacing * 2;
+$slide-button-container-radius: $slide-button-width * 0.5;
+$slide-button-text-padding: 0 $slide-button-container-radius 0 $total-slider-thumb-width;