@kirbydesign/designsystem 0.0.0

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

@@ -0,0 +1,26 @@
+@use '~@kirbydesign/core/src/scss/utils';
+
+:host {
+  display: none;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: utils.z('popover');
+}
+
+:host(.is-opening) {
+  display: block;
+  visibility: hidden;
+}
+
+:host(.is-open) {
+  display: block;
+}
+
+.wrapper {
+  position: fixed;
+  margin-top: utils.size('xxxs');
+  margin-bottom: utils.size('xxxs');
+}

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

@@ -0,0 +1,221 @@
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  EventEmitter,
+  HostListener,
+  Input,
+  OnDestroy,
+  Output,
+  Renderer2,
+  ViewChild,
+} from '@angular/core';
+
+import { DesignTokenHelper } from '../../helpers';
+
+export enum HorizontalDirection {
+  right = 'right',
+  left = 'left',
+}
+
+@Component({
+  selector: 'kirby-popover',
+  template: ` <div #wrapper class="wrapper"><ng-content></ng-content></div> `,
+  styleUrls: ['./popover.component.scss'],
+})
+export class PopoverComponent implements AfterViewInit, OnDestroy {
+  // removeEventListener same instance of event handler & options
+  private readonly preventScrollEventListenerOptions = {
+    passive: false,
+  } as EventListenerOptions;
+
+  private readonly POPOVER_BODY_PADDING = 12;
+
+  private isShowing: boolean = false;
+  private isFirstToLockScroll: boolean;
+  private zIndex: number;
+  private document: Document;
+
+  @ViewChild('wrapper', { static: true, read: ElementRef })
+  wrapperElement: ElementRef<HTMLDivElement>;
+
+  @Input()
+  popout: HorizontalDirection | `${HorizontalDirection}` = HorizontalDirection.right;
+
+  @Input()
+  target: HTMLElement | ElementRef<HTMLElement>;
+
+  @Output()
+  willHide = new EventEmitter<void>();
+
+  private get targetElement(): HTMLElement {
+    if (this.target instanceof ElementRef) {
+      return this.target.nativeElement;
+    } else {
+      return this.target;
+    }
+  }
+
+  @HostListener('click')
+  _backdropClick() {
+    this.willHide.emit();
+    this.hide();
+  }
+
+  @HostListener('window:resize')
+  _onWindowResize() {
+    if (this.isShowing) {
+      this.willHide.emit();
+      this.hide();
+    }
+  }
+
+  constructor(private elementRef: ElementRef<HTMLElement>, private renderer: Renderer2) {
+    this.document = elementRef.nativeElement.ownerDocument;
+  }
+
+  ngAfterViewInit(): void {
+    this.placePopoverAboveClosestModal();
+    this.renderer.removeChild(
+      this.elementRef.nativeElement.parentElement,
+      this.elementRef.nativeElement
+    );
+  }
+
+  ngOnDestroy(): void {
+    this.hide();
+  }
+
+  private placePopoverAboveClosestModal() {
+    const closestIonModal = this.elementRef.nativeElement.closest('ion-modal');
+    if (closestIonModal) {
+      this.zIndex = parseInt(closestIonModal.style.zIndex) + 1;
+      this.elementRef.nativeElement.style.zIndex = `${this.zIndex}`;
+    } else {
+      this.zIndex = parseInt(DesignTokenHelper.zLayer('popover'));
+    }
+  }
+
+  // document.removeEventListener needs the exact same event handler & options reference:
+  private preventEvent(event: TouchEvent) {
+    event.preventDefault();
+  }
+
+  private preventScroll() {
+    this.isFirstToLockScroll = !this.document.body.classList.contains('backdrop-no-scroll');
+    if (this.isFirstToLockScroll) {
+      this.renderer.addClass(this.document.body, 'backdrop-no-scroll');
+    }
+
+    // preventDefault does not work with Renderer2.listen method; add event listener directly to document instead
+    this.document.addEventListener(
+      'touchmove',
+      this.preventEvent,
+      this.preventScrollEventListenerOptions
+    );
+  }
+
+  private releaseScroll() {
+    if (this.isFirstToLockScroll) {
+      this.renderer.removeClass(this.document.body, 'backdrop-no-scroll');
+    }
+
+    this.document.removeEventListener(
+      'touchmove',
+      this.preventEvent,
+      this.preventScrollEventListenerOptions
+    );
+  }
+
+  show() {
+    this.renderer.addClass(this.elementRef.nativeElement, 'is-opening');
+    this.renderer.appendChild(this.document.body, this.elementRef.nativeElement);
+
+    this.preventScroll();
+    this.positionWrapper();
+
+    this.renderer.addClass(this.elementRef.nativeElement, 'is-open');
+    this.renderer.removeClass(this.elementRef.nativeElement, 'is-opening');
+
+    this.isShowing = true;
+  }
+
+  hide() {
+    this.renderer.removeChild(this.document.body, this.elementRef.nativeElement);
+    this.releaseScroll();
+
+    this.renderer.removeStyle(this.targetElement, 'z-index');
+    this.renderer.removeStyle(this.targetElement, 'pointer-events');
+    this.isShowing = false;
+  }
+
+  private positionWrapper() {
+    const targetDimensions = this.targetElement.getBoundingClientRect();
+
+    this.renderer.appendChild(this.document.body, this.elementRef.nativeElement);
+
+    const wrapperElement = this.wrapperElement.nativeElement;
+    const wrapperDimensions = wrapperElement.getBoundingClientRect();
+    const viewport = wrapperElement.ownerDocument.defaultView;
+    this.positionHorizontally(viewport, wrapperElement, targetDimensions, wrapperDimensions);
+    this.positionVertically(viewport, wrapperElement, targetDimensions, wrapperDimensions);
+  }
+
+  private positionHorizontally(
+    viewPort: Window,
+    wrapperElement: HTMLDivElement,
+    targetDimensions: DOMRect,
+    wrapperDimensions: DOMRect
+  ) {
+    const viewPortWidth = viewPort.innerWidth;
+    const contentWidth = wrapperDimensions.width;
+    const availableSpaceRight = viewPortWidth - targetDimensions.left;
+    const availableSpaceLeft = targetDimensions.right;
+    const contentCanFitRightOfTarget =
+      availableSpaceRight >= contentWidth + this.POPOVER_BODY_PADDING;
+    const openRight = contentCanFitRightOfTarget || availableSpaceRight >= availableSpaceLeft;
+
+    const [direction, oppositeDirection] =
+      this.popout === HorizontalDirection.left || !openRight
+        ? ['left', 'right']
+        : ['right', 'left'];
+
+    const pxValue =
+      direction === 'left' ? viewPortWidth - targetDimensions.right : targetDimensions.left;
+
+    this.renderer.removeStyle(wrapperElement, direction);
+    this.renderer.setStyle(wrapperElement, oppositeDirection, `${pxValue}px`);
+  }
+
+  private positionVertically(
+    viewPort: Window,
+    wrapperElement: HTMLDivElement,
+    targetDimensions: DOMRect,
+    wrapperDimensions: DOMRect
+  ) {
+    const viewPortHeight = viewPort.innerHeight;
+    const contentHeight = wrapperDimensions.height;
+    const availableSpaceDown = viewPortHeight - targetDimensions.bottom;
+    const availableSpaceUp = targetDimensions.top;
+    const contentCanFitBelowTarget =
+      availableSpaceDown >= contentHeight + this.POPOVER_BODY_PADDING;
+
+    const isAvailableSpaceBelow =
+      contentCanFitBelowTarget || availableSpaceDown >= availableSpaceUp;
+    const [direction, oppositeDirection] = isAvailableSpaceBelow
+      ? ['bottom', 'top']
+      : ['top', 'bottom'];
+
+    const pxValue =
+      direction === 'bottom' ? targetDimensions.bottom : viewPortHeight - targetDimensions.top;
+
+    this.renderer.removeStyle(wrapperElement, direction);
+    this.renderer.setStyle(wrapperElement, oppositeDirection, `${pxValue}px`);
+
+    if (direction === 'top') {
+      // Ensure target is elevated above shadows in popover, i.e. content wrapped in Card:
+      this.renderer.setStyle(this.targetElement, 'z-index', `${this.zIndex + 1}`);
+      this.renderer.setStyle(this.targetElement, 'pointer-events', 'none');
+    }
+  }
+}

package/src/lib/components/progress-circle/progress-circle-ring.component.scss

@@ -0,0 +1,22 @@
+@use '~@kirbydesign/core/src/scss/utils';
+
+.circle {
+  stroke: utils.get-color('semi-light');
+}
+
+.progress {
+  transition-property: stroke-dashoffset, stroke;
+  transition-duration: utils.get-transition-duration('extra-long');
+  transition-timing-function: utils.get-transition-easing('enter-exit');
+  transform: rotate(-90deg);
+  transform-origin: 50% 50%;
+  stroke: var(--kirby-progress-circle-stroke-color, #{utils.get-color('success')});
+}
+
+:host {
+  @each $color-name, $color-value in utils.$notification-colors {
+    &.#{$color-name} {
+      --kirby-progress-circle-stroke-color: #{$color-value};
+    }
+  }
+}

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

@@ -0,0 +1,143 @@
+import { createComponentFactory, Spectator } from '@ngneat/spectator';
+
+import { DesignTokenHelper, ThemeColor } from '@kirbydesign/core';
+
+import { ProgressCircleRingComponent } from './progress-circle-ring.component';
+
+const getColor = DesignTokenHelper.getColor;
+
+describe('ProgressCircleRingComponent', () => {
+  let spectator: Spectator<ProgressCircleRingComponent>;
+
+  const createHost = createComponentFactory({
+    component: ProgressCircleRingComponent,
+  });
+
+  beforeEach(() => {
+    spectator = createHost({ props: { radius: 50, strokeWidth: 4 } });
+  });
+
+  it('should create', () => {
+    expect(spectator.component).toBeTruthy();
+    expect(spectator.component.value).toBe(0);
+  });
+
+  describe('centerRadius', () => {
+    it('should return distance from center to middle of stroke', () => {
+      expect(spectator.component._centerRadius).toBe(
+        spectator.component.radius - spectator.component.strokeWidth / 2
+      );
+    });
+  });
+
+  describe('centerCircumference', () => {
+    it('should return circumference in middle of stroke', () => {
+      expect(spectator.component._centerCircumference).toBe(
+        spectator.component._centerRadius * 2 * Math.PI
+      );
+    });
+  });
+
+  describe('diameter', () => {
+    it('should calculate diameter as 2*radius', () => {
+      expect(spectator.component._diameter).toBe(spectator.component.radius * 2);
+    });
+  });
+
+  describe('offset (progress) within upperBound', () => {
+    it('should return the non-progress circumference (1 - progress) as offset', () => {
+      const value = 33;
+      const upperBound = 96;
+      spectator.setInput({
+        value,
+        upperBound,
+      });
+
+      expect(spectator.component._offset).toBe(
+        spectator.component._centerCircumference -
+          spectator.component._centerCircumference * (value / 100)
+      );
+    });
+  });
+
+  describe('offset (progress) larger than upperBound', () => {
+    it('should return the non-progress circumference (1 - upperBound) as offset', () => {
+      const value = 99;
+      const upperBound = 96;
+      spectator.setInput({
+        value,
+        upperBound,
+      });
+
+      expect(spectator.component._offset).toBe(
+        spectator.component._centerCircumference -
+          spectator.component._centerCircumference * (upperBound / 100)
+      );
+    });
+  });
+
+  describe('rendering', () => {
+    beforeEach(() => {
+      spectator.setInput({
+        value: 50,
+      });
+    });
+
+    it('computed size should equal 2*radius', () => {
+      const radius = 33;
+      const expectedSize = `${2 * radius}px`;
+      spectator.setInput({ radius });
+      // As width and height are set via hostbinding, it is necessary to run a change detection cycle.
+      spectator.detectChanges();
+
+      expect(spectator.element).toHaveComputedStyle({
+        width: expectedSize,
+        height: expectedSize,
+      });
+    });
+
+    it('should render progress stroke with themeColor when themeColor class is set', () => {
+      const themeColor: ThemeColor = 'warning';
+      spectator.element.classList.add(themeColor);
+      spectator.element.style.transition = 'none';
+      spectator.detectChanges();
+
+      expect(spectator.query('circle.progress')).toHaveComputedStyle({
+        stroke: getColor(themeColor),
+      });
+    });
+
+    it('should have default themeColor when themeColor is not set from outside', () => {
+      expect(spectator.component.themeColor).toBe('success');
+    });
+
+    it('should render background stroke in semi-light', () => {
+      expect(spectator.query('circle.circle')).toHaveComputedStyle({
+        stroke: getColor('semi-light'),
+      });
+    });
+
+    it('should render progress stroke with the correct width', () => {
+      expect(spectator.query('circle.progress')).toHaveAttribute(
+        'stroke-width',
+        '' + spectator.component.strokeWidth
+      );
+    });
+
+    it('should render background stroke with the defined stroke width', () => {
+      spectator.detectChanges();
+      expect(spectator.query('circle.circle')).toHaveAttribute(
+        'stroke-width',
+        '' + spectator.component.strokeWidth
+      );
+    });
+
+    it('should render circle with a radius equivalent to calculated centerRadius', () => {
+      spectator.detectChanges();
+      expect(spectator.query('circle.progress')).toHaveAttribute(
+        'r',
+        '' + spectator.component._centerRadius
+      );
+    });
+  });
+});

package/src/lib/components/progress-circle/progress-circle-ring.component.svg

@@ -0,0 +1,23 @@
+<svg [attr.width]="_diameter" [attr.height]="_diameter">
+  <circle
+    shape-rendering="geometricPrecision"
+    class="circle"
+    fill="transparent"
+    [attr.stroke-width]="strokeWidth"
+    [attr.r]="_centerRadius"
+    [attr.cx]="radius"
+    [attr.cy]="radius"
+  />
+  <circle
+    shape-rendering="geometricPrecision"
+    class="progress"
+    fill="transparent"
+    stroke-linecap="round"
+    [attr.stroke-width]="strokeWidth"
+    [attr.r]="_centerRadius"
+    [attr.cx]="radius"
+    [attr.cy]="radius"
+    [attr.stroke-dashoffset]="_offset"
+    [attr.stroke-dasharray]="_centerCircumference"
+  />
+</svg>

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

@@ -0,0 +1,42 @@
+import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';
+
+@Component({
+  selector: 'kirby-progress-circle-ring',
+  templateUrl: './progress-circle-ring.component.svg',
+  styleUrls: ['./progress-circle-ring.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ProgressCircleRingComponent {
+  @Input() radius: number; // The desired outer radius of the SVG circle
+  @Input() value: number = 0;
+  @Input() themeColor: 'success' | 'warning' | 'danger' = 'success';
+  @Input() strokeWidth: number;
+  @Input() upperBound: number;
+
+  get _offset(): number {
+    const valueWithinBounds = this.value < this.upperBound || this.value > 99;
+    if (valueWithinBounds) {
+      return this.calculateOffset(this.value);
+    } else {
+      return this.calculateOffset(this.upperBound);
+    }
+  }
+
+  @HostBinding('style.width.px')
+  @HostBinding('style.height.px')
+  get _diameter(): number {
+    return this.radius * 2;
+  }
+
+  get _centerRadius(): number {
+    return this.radius - this.strokeWidth / 2;
+  }
+
+  get _centerCircumference(): number {
+    return this._centerRadius * 2 * Math.PI;
+  }
+
+  private calculateOffset(value: number): number {
+    return this._centerCircumference - this._centerCircumference * (value / 100);
+  }
+}

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

@@ -0,0 +1,11 @@
+<div class="transcluded-content">
+  <ng-content></ng-content>
+</div>
+<kirby-progress-circle-ring
+  [themeColor]="themeColor"
+  [value]="_shownValue"
+  [radius]="_radius"
+  [strokeWidth]="_strokeWidth"
+  [upperBound]="_upperBound"
+>
+</kirby-progress-circle-ring>

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

@@ -0,0 +1,28 @@
+@use '~@kirbydesign/core/src/scss/utils';
+
+:host {
+  display: inline-block;
+  position: relative;
+}
+
+.transcluded-content,
+kirby-progress-circle-ring {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+kirby-progress-circle-ring {
+  z-index: utils.z('default') + 1;
+}
+
+.transcluded-content {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: utils.z('default');
+  border-radius: 50%;
+  overflow: hidden;
+}