@kirbydesign/designsystem 0.0.0

package/src/lib/components/progress-circle/progress-circle.component.spec.ts

@@ -0,0 +1,339 @@
+import { ChangeDetectorRef } from '@angular/core';
+import {
+  createComponentFactory,
+  createHostFactory,
+  Spectator,
+  SpectatorHost,
+} from '@ngneat/spectator';
+
+import { TestHelper } from '../../testing/test-helper';
+
+import { ProgressCircleRingComponent } from './progress-circle-ring.component';
+import { ProgressCircleComponent } from './progress-circle.component';
+
+describe('ProgressCircleComponent', () => {
+  describe('with stubbed IntersectionObserver', () => {
+    let spectator: Spectator<ProgressCircleComponent>;
+    let changeDetectorRef: ChangeDetectorRef;
+    let intersectionObserverConstructorSpy: jasmine.Spy;
+
+    const createHost = createComponentFactory({
+      component: ProgressCircleComponent,
+      declarations: [ProgressCircleRingComponent],
+    });
+
+    beforeEach(() => {
+      // IntersectionObserver not exposed in the DOM lib for TS. See: https://github.com/microsoft/TypeScript/pull/18110
+      intersectionObserverConstructorSpy = spyOn(
+        window as any,
+        'IntersectionObserver'
+      ).and.returnValue({
+        observe: jasmine.createSpy('observe()'),
+        unobserve: jasmine.createSpy('unobserve()'),
+        disconnect: jasmine.createSpy('disconnect'),
+      });
+
+      spectator = createHost({
+        props: { value: 30 },
+      });
+      changeDetectorRef = (spectator as any).instance.changeDetectorRef;
+    });
+
+    it('should create', () => {
+      expect(spectator.component).toBeTruthy();
+    });
+
+    describe('diameter', () => {
+      it('should default to md', () => {
+        expect(spectator.component._diameter).toBe(56);
+      });
+
+      it('should map sm to correct value', () => {
+        spectator.setInput({ size: 'sm' });
+        expect(spectator.component._diameter).toBe(40);
+      });
+
+      it('should map md to correct value', () => {
+        spectator.setInput({ size: 'md' });
+        expect(spectator.component._diameter).toBe(56);
+      });
+
+      it('should map lg to correct value', () => {
+        spectator.setInput({ size: 'lg' });
+        expect(spectator.component._diameter).toBe(96);
+      });
+    });
+
+    describe('strokeWidth', () => {
+      it('should default to md', () => {
+        expect(spectator.component._strokeWidth).toBe(4);
+      });
+
+      it('should map sm to correct value', () => {
+        spectator.setInput({ size: 'sm' });
+        expect(spectator.component._strokeWidth).toBe(3);
+      });
+
+      it('should map md to correct value', () => {
+        spectator.setInput({ size: 'md' });
+        expect(spectator.component._strokeWidth).toBe(4);
+      });
+
+      it('should map lg to correct value', () => {
+        spectator.setInput({ size: 'lg' });
+        expect(spectator.component._strokeWidth).toBe(6);
+      });
+    });
+
+    describe('shownValue', () => {
+      it('should return 0 until element has been visible', () => {
+        spectator.setInput({ value: 50 });
+        spectator.component['hasElementBeenVisible'] = false;
+
+        expect(spectator.component._shownValue).toBe(0);
+      });
+
+      it('should return value after element has been visible', () => {
+        spectator.setInput({ value: 50 });
+        spectator.component['hasElementBeenVisible'] = true;
+
+        expect(spectator.component._shownValue).toBe(50);
+      });
+    });
+
+    describe('radius', () => {
+      it('should calculate radius as diameter / 2', () => {
+        spectator.setInput({ size: 'sm' });
+        expect(spectator.component._radius).toBe(
+          spectator.component.SIZE_CONFIG['sm'].diameter / 2
+        );
+      });
+    });
+
+    describe('ngAfterViewInit', () => {
+      it('should instantiate IntersectionObserver with onIntersectionChange as callback', async () => {
+        expect(intersectionObserverConstructorSpy).toHaveBeenCalledWith(
+          spectator.component['onIntersectionChange'],
+          jasmine.any(Object)
+        );
+      });
+
+      it('should set up an intersection observer on element', () => {
+        expect(spectator.component['observer'].observe).toHaveBeenCalledWith(
+          spectator.debugElement.nativeElement
+        );
+      });
+    });
+
+    describe('onIntersectionChange', () => {
+      it('should not have been visible before onIntersectionChange has been called', () => {
+        expect(spectator.component['hasElementBeenVisible']).toBeFalsy();
+      });
+
+      it('should mark element as visible if element is intersecting when observer is called', () => {
+        // Arrange
+        const entries: Partial<IntersectionObserverEntry>[] = [{ isIntersecting: true }];
+
+        // Act
+        spectator.component['onIntersectionChange'](entries as IntersectionObserverEntry[]);
+
+        // Assert
+        expect(spectator.component['hasElementBeenVisible']).toBe(true);
+      });
+
+      it('should mark element as visible if several entries are returned when observer is called and all are intersecting', () => {
+        // Arrange
+        const entries: Partial<IntersectionObserverEntry>[] = [
+          { isIntersecting: true },
+          { isIntersecting: true },
+        ];
+
+        // Act
+        spectator.component['onIntersectionChange'](entries as IntersectionObserverEntry[]);
+
+        // Assert
+        expect(spectator.component['hasElementBeenVisible']).toBe(true);
+      });
+
+      it('should mark element as visible if several entries are returned when observer is called and any is intersecting', () => {
+        // Arrange
+        const entries: Partial<IntersectionObserverEntry>[] = [
+          { isIntersecting: false },
+          { isIntersecting: true },
+        ];
+
+        // Act
+        spectator.component['onIntersectionChange'](entries as IntersectionObserverEntry[]);
+
+        // Assert
+        expect(spectator.component['hasElementBeenVisible']).toBe(true);
+      });
+
+      it('should not mark element as visible if several entries are returned when observer is called but none are intersecting', () => {
+        // Arrange
+        const entries: Partial<IntersectionObserverEntry>[] = [
+          { isIntersecting: false },
+          { isIntersecting: false },
+        ];
+
+        // Act
+        spectator.component['onIntersectionChange'](entries as IntersectionObserverEntry[]);
+
+        // Assert
+        expect(spectator.component['hasElementBeenVisible']).toBe(false);
+      });
+
+      it('should not mark element as visible if elements are not intersecting when observer is called (on init)', () => {
+        // Arrange
+        const entries: Partial<IntersectionObserverEntry>[] = [{ isIntersecting: false }];
+
+        // Act
+        spectator.component['onIntersectionChange'](entries as IntersectionObserverEntry[]);
+
+        // Assert
+        expect(spectator.component['hasElementBeenVisible']).toBeFalsy();
+      });
+
+      it('should not mark element as visible if elements array is undefined', () => {
+        // Arrange
+        const entries: Partial<IntersectionObserverEntry>[] = undefined;
+
+        // Act
+        spectator.component['onIntersectionChange'](entries as IntersectionObserverEntry[]);
+
+        // Assert
+        expect(spectator.component['hasElementBeenVisible']).toBeFalsy();
+      });
+
+      it('should not mark element as visible if elements array is empty', () => {
+        // Arrange
+        const entries: Partial<IntersectionObserverEntry>[] = [];
+
+        // Act
+        spectator.component['onIntersectionChange'](entries as IntersectionObserverEntry[]);
+
+        // Assert
+        expect(spectator.component['hasElementBeenVisible']).toBe(false);
+      });
+
+      it('should not mark component for change detection when not intersecting', () => {
+        // Arrange
+        spyOn(changeDetectorRef, 'markForCheck').and.callThrough();
+        const entries: Partial<IntersectionObserverEntry>[] = [{ isIntersecting: false }];
+
+        // Act
+        spectator.component['onIntersectionChange'](entries as IntersectionObserverEntry[]);
+
+        // Assert
+        expect(changeDetectorRef.markForCheck).not.toHaveBeenCalled();
+      });
+
+      it('should mark component for change detection when visible to start animation', () => {
+        // Arrange
+        spyOn(changeDetectorRef, 'markForCheck').and.callThrough();
+        const entries: Partial<IntersectionObserverEntry>[] = [{ isIntersecting: true }];
+
+        // Act
+        spectator.component['onIntersectionChange'](entries as IntersectionObserverEntry[]);
+
+        // Assert
+        expect(changeDetectorRef.markForCheck).toHaveBeenCalled();
+      });
+
+      it('should unsubscribe observer when elements are intersecting', () => {
+        // Arrange
+        spectator.component['unobserve'] = jasmine.createSpy('disconnectObserver');
+        const entries: Partial<IntersectionObserverEntry>[] = [{ isIntersecting: true }];
+
+        // Act
+        spectator.component['onIntersectionChange'](entries as IntersectionObserverEntry[]);
+
+        // Assert
+        expect(spectator.component['unobserve']).toHaveBeenCalled();
+      });
+
+      it('should not unsubscribe observer if elements are not intersecting', () => {
+        // Arrange
+        spectator.component['unobserve'] = jasmine.createSpy('disconnectObserver');
+        const entries: Partial<IntersectionObserverEntry>[] = [{ isIntersecting: false }];
+
+        // Act
+        spectator.component['onIntersectionChange'](entries as IntersectionObserverEntry[]);
+
+        // Assert
+        expect(spectator.component['unobserve']).not.toHaveBeenCalled();
+      });
+    });
+
+    describe('unobserve', () => {
+      it('should handle observer being undefined (in case view init has not happened yet)', () => {
+        spectator.component['observer'] = undefined;
+
+        expect(() => {
+          spectator.component['unobserve']();
+        }).not.toThrowError();
+      });
+
+      it('should call unobserve when disconnecting', () => {
+        spectator.component['unobserve']();
+
+        expect(spectator.component['observer'].unobserve).toHaveBeenCalledWith(
+          spectator.debugElement.nativeElement
+        );
+      });
+
+      it('should call disconnect when disconnecting', () => {
+        spectator.component['unobserve']();
+
+        expect(spectator.component['observer'].disconnect).toHaveBeenCalled();
+      });
+
+      it('should be able disconnect function to be missing (some browsers do not suppport it)', () => {
+        spectator.component['observer'].disconnect = undefined;
+
+        expect(() => {
+          spectator.component['unobserve']();
+        }).not.toThrowError();
+      });
+    });
+
+    describe('ngOnDestroy', () => {
+      it('should call unobserve', () => {
+        spectator.component['unobserve'] = jasmine.createSpy('unobserve');
+
+        spectator.component.ngOnDestroy();
+
+        expect(spectator.component['unobserve']).toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('with real IntersectionObserver', () => {
+    let spectator: SpectatorHost<ProgressCircleComponent>;
+
+    const createHost = createHostFactory({
+      component: ProgressCircleComponent,
+      declarations: [ProgressCircleRingComponent],
+    });
+
+    beforeEach(() => {
+      spectator = createHost('<kirby-progress-circle></kirby-progress-circle>', {
+        props: { value: 50 },
+      });
+    });
+
+    it('should set hasElementBeenVisible after scrolled into view', async () => {
+      expect(spectator.component['hasElementBeenVisible']).toBeUndefined();
+      const paddingTop = window.innerHeight; // Ensure the element is below the fold
+      (spectator.hostElement as HTMLElement).style.paddingTop = `${paddingTop}px`;
+      await TestHelper.whenTrue(() => spectator.component['hasElementBeenVisible'] === false); // Await IntersectionObserver to fire
+      expect(spectator.component['hasElementBeenVisible']).toBeFalse();
+
+      // Act
+      spectator.element.scrollIntoView();
+
+      await TestHelper.whenTrue(() => spectator.component['hasElementBeenVisible'] === true); // Await IntersectionObserver to fire
+      expect(spectator.component['hasElementBeenVisible']).toBeTrue();
+    });
+  });
+});

package/src/lib/components/progress-circle/progress-circle.component.ts

@@ -0,0 +1,96 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  HostBinding,
+  Input,
+  OnDestroy,
+} from '@angular/core';
+
+@Component({
+  selector: 'kirby-progress-circle',
+  templateUrl: './progress-circle.component.html',
+  styleUrls: ['./progress-circle.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ProgressCircleComponent implements AfterViewInit, OnDestroy {
+  readonly SIZE_CONFIG = {
+    sm: { diameter: 40, strokeWidth: 3, upperBound: 95 },
+    md: { diameter: 56, strokeWidth: 4, upperBound: 96 },
+    lg: { diameter: 96, strokeWidth: 6, upperBound: 97 },
+  };
+
+  @Input() value: number = 0;
+  @Input() size: 'sm' | 'md' | 'lg' = 'md';
+  @Input() themeColor: 'success' | 'warning' | 'danger' = 'success';
+
+  @HostBinding('class')
+  get _cssSize() {
+    return this.size;
+  }
+
+  private hasElementBeenVisible?: boolean;
+  private observer: IntersectionObserver;
+
+  constructor(
+    private elementRef: ElementRef<HTMLElement>,
+    private changeDetectorRef: ChangeDetectorRef
+  ) {}
+
+  ngAfterViewInit(): void {
+    if (!this.observer) {
+      this.observer = new IntersectionObserver(this.onIntersectionChange, {
+        threshold: 0.5,
+      });
+      this.observer.observe(this.elementRef.nativeElement);
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.unobserve();
+  }
+
+  private onIntersectionChange = (entries: IntersectionObserverEntry[]) => {
+    this.hasElementBeenVisible = entries && entries.some((entry) => entry.isIntersecting);
+    if (this.hasElementBeenVisible) {
+      this.unobserve();
+      this.changeDetectorRef.markForCheck();
+    }
+  };
+
+  private unobserve() {
+    if (this.observer) {
+      this.observer.unobserve(this.elementRef.nativeElement);
+      // Safari does not support "disconnect", see: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Browser_compatibility
+      if (typeof this.observer.disconnect === 'function') {
+        this.observer.disconnect();
+      }
+    }
+  }
+
+  @HostBinding('style.width.px')
+  @HostBinding('style.height.px')
+  get _diameter(): number {
+    return this.SIZE_CONFIG[this.size].diameter;
+  }
+
+  get _shownValue() {
+    // This is needed to make an animation [0 -> value] when element is shown to the user
+    return this.hasElementBeenVisible ? this.value : 0;
+  }
+
+  get _radius() {
+    return this._diameter / 2;
+  }
+
+  get _strokeWidth() {
+    return this.SIZE_CONFIG[this.size].strokeWidth;
+  }
+
+  get _upperBound() {
+    // This is needed to make sure that an input value close to 100 is not shown as 100
+    return this.SIZE_CONFIG[this.size].upperBound;
+  }
+}

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

@@ -0,0 +1,2 @@
+export { RadioComponent } from './radio.component';
+export { RadioGroupComponent } from './radio-group/radio-group.component';

package/src/lib/components/radio/radio-group/radio-group.component.html

@@ -0,0 +1,24 @@
+<ion-radio-group *ngIf="_hasItems" [value]="value" (ionChange)="_onChange($event.detail.value)">
+  <ng-container *ngIf="!items || !items.length; else itemsTemplate">
+    <ng-content></ng-content>
+  </ng-container>
+</ion-radio-group>
+
+<ng-template #itemsTemplate>
+  <ng-container *ngFor="let item of items; let i = index">
+    <ng-container
+      *ngTemplateOutlet="
+        _customItemTemplate || defaultItemTemplate;
+        context: { $implicit: item, selected: i === selectedIndex, index: i }
+      "
+    ></ng-container>
+  </ng-container>
+</ng-template>
+
+<ng-template #defaultItemTemplate let-item>
+  <kirby-radio
+    [value]="item"
+    [disabled]="disabled || _getDisabledStateFromItem(item)"
+    [text]="_getTextFromItem(item)"
+  ></kirby-radio>
+</ng-template>