@kirbydesign/designsystem 0.0.0

package/src/lib/components/slide-button/slide-button.component.spec.ts

@@ -0,0 +1,75 @@
+import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing';
+
+import { SlideButtonComponent } from './slide-button.component';
+
+describe('SlideButtonComponent', () => {
+  let component: SlideButtonComponent;
+  let fixture: ComponentFixture<SlideButtonComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [SlideButtonComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SlideButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('onSliderMouseup', () => {
+    it('should emit slide done if value is 100', () => {
+      spyOn(component.slideDone, 'emit');
+
+      component.value = 100;
+
+      component.onSliderMouseup();
+      expect(component.slideDone.emit).toHaveBeenCalled();
+    });
+
+    it('should decrease value with 2 if not 100', fakeAsync(() => {
+      spyOn(component.slideDone, 'emit');
+
+      const initValue = 99;
+
+      component.value = initValue;
+
+      component.onSliderMouseup();
+
+      tick(1);
+      component.ngOnDestroy();
+      expect(component.value).toBe(initValue - 2);
+    }));
+  });
+
+  describe('onSliderValueChange', () => {
+    it('should set value and emit change', () => {
+      const newVal = 50;
+
+      spyOn(component.slidingPercentageChanged, 'emit');
+      component.onSliderValueChange(newVal.toString());
+
+      expect(component.value).toBe(newVal);
+      expect(component.slidingPercentageChanged.emit).toHaveBeenCalledWith(newVal);
+    });
+  });
+
+  describe('onSliderMousedown', () => {
+    it('should stop decrement slider value timer', fakeAsync(() => {
+      const initVal = 50;
+      component.value = initVal;
+      component.onSliderMouseup();
+
+      tick(1);
+
+      component.onSliderMousedown();
+
+      expect(component.value).toBe(initVal - 2);
+    }));
+  });
+});

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

@@ -0,0 +1,81 @@
+import {
+  Component,
+  OnDestroy,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Input,
+  Output,
+  EventEmitter,
+} from '@angular/core';
+
+@Component({
+  selector: 'kirby-slide-button',
+  templateUrl: './slide-button.component.html',
+  styleUrls: ['./slide-button.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SlideButtonComponent implements OnDestroy {
+  @Input() text = '';
+  @Input() expand: 'block';
+
+  @Output() slideDone = new EventEmitter();
+  @Output() slidingPercentageChanged = new EventEmitter<number>();
+
+  readonly slideDoneFadeTime = 500;
+  readonly slideResetTime = 100;
+
+  isSlideDone = false;
+  pctInTens = 0;
+
+  get value(): number {
+    return this._value;
+  }
+  set value(v: number) {
+    this._value = v;
+    this.calculatePctInTens();
+  }
+
+  private _value: number = 0;
+  private resetSliderIntervalTimer: any;
+  private calculatePctInTens() {
+    this.pctInTens = Math.ceil(this.value / 10) * 10;
+  }
+
+  constructor(private changeDetectionRef: ChangeDetectorRef) {}
+
+  ngOnDestroy(): void {
+    if (this.resetSliderIntervalTimer) {
+      clearInterval(this.resetSliderIntervalTimer);
+    }
+  }
+
+  onSliderMouseup() {
+    if (this.value == 100) {
+      this.handleSlideDone();
+    } else {
+      this.resetSliderIntervalTimer = setInterval(() => {
+        if (this.value > 0) {
+          this.value -= 2;
+        } else {
+          clearInterval(this.resetSliderIntervalTimer);
+        }
+
+        this.changeDetectionRef.markForCheck();
+      }, 1);
+    }
+  }
+
+  onSliderValueChange(val: string) {
+    this.value = +val;
+    this.slidingPercentageChanged.emit(this.value);
+  }
+
+  onSliderMousedown() {
+    clearInterval(this.resetSliderIntervalTimer);
+  }
+
+  private handleSlideDone() {
+    this.slideDone.emit();
+    this.isSlideDone = true;
+  }
+}

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

@@ -0,0 +1,76 @@
+import { Component } from '@angular/core';
+import { fakeAsync } from '@angular/core/testing';
+import { IonSlide, IonSlides } from '@ionic/angular';
+import { byTestId, createHostFactory, HostComponent, SpectatorHost } from '@ngneat/spectator';
+
+import { SlideDirective, SlidesComponent } from './slides.component';
+
+class IonSlidesFake extends IonSlides {
+  getSwiper = () =>
+    Promise.resolve({
+      on: () => {},
+      params: {
+        slidesPerView: 1,
+      },
+    });
+  slideTo = (_index: number, _speed?: number, _runCallbacks?: boolean) => Promise.resolve();
+}
+
+describe('SlidesComponent', () => {
+  let spectator: SpectatorHost<SlidesComponent, HostComponent>;
+
+  @Component({ selector: 'kirby-slides-host-component', template: '' })
+  class KirbySlidesHostComponent {
+    slides = [0, 1, 2, 3, 4];
+    slidesOptions = {
+      spaceBetween: 5,
+      centeredSlides: true,
+      slidesPerView: 1.15,
+      breakpoints: {
+        721: {
+          slidesPerView: 2.15,
+          centeredSlides: false,
+        },
+      },
+    };
+  }
+
+  const createHost = createHostFactory({
+    component: SlidesComponent,
+    host: KirbySlidesHostComponent,
+    declarations: [IonSlidesFake, IonSlide, SlideDirective],
+  });
+
+  beforeEach(() => {
+    spectator = createHost(
+      `<kirby-slides [slidesOptions]="slidesOptions" [slides]="slides">
+      <span data-testid="slideContent" *kirbySlide>MockContent</span>
+      </kirby-slides>`
+    );
+
+    spectator.detectChanges();
+  });
+
+  it('should create', fakeAsync(() => {
+    expect(spectator.component).toBeTruthy();
+  }));
+
+  it('should contain 5 slides', () => {
+    expect(spectator.queryAll(byTestId('slideContent')).length).toBe(5);
+  });
+
+  it('should pass options-object to ion-slides', () => {
+    expect(spectator.component.slidesOptions).toEqual(new KirbySlidesHostComponent().slidesOptions);
+  });
+
+  it('should call slideTo with 4', () => {
+    // Arrange
+    spyOn(spectator.component.ionSlides, 'slideTo');
+
+    // Act
+    spectator.component.slideTo(2);
+
+    // Assert
+    expect(spectator.component.ionSlides.slideTo).toHaveBeenCalledWith(2);
+  });
+});

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

@@ -0,0 +1,57 @@
+import { AfterViewInit, EventEmitter } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ContentChild,
+  Directive,
+  Input,
+  Output,
+  TemplateRef,
+  ViewChild,
+} from '@angular/core';
+import { IonSlides } from '@ionic/angular';
+
+@Directive({
+  selector: '[kirbySlide]',
+})
+export class SlideDirective {}
+
+@Component({
+  selector: 'kirby-slides',
+  template: `
+    <ion-slides [options]="slidesOptions" #ionslides (ionSlideDidChange)="onSlideChanged()">
+      <ion-slide *ngFor="let slide of slides; let i = index">
+        <ng-container
+          *ngTemplateOutlet="slideTemplate; context: { $implicit: slide, index: i }"
+        ></ng-container>
+      </ion-slide>
+    </ion-slides>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SlidesComponent implements AfterViewInit {
+  @ViewChild('ionslides', { static: false }) ionSlides: IonSlides;
+  @Input() slidesOptions: any;
+  @Input() slides: any[];
+  @Output() selectedSlide = new EventEmitter<any>();
+
+  @ContentChild(SlideDirective, { static: true, read: TemplateRef })
+  public slideTemplate: TemplateRef<any>;
+
+  ngAfterViewInit() {
+    this.slideTo(0);
+  }
+
+  onSlideChanged() {
+    this.ionSlides.getActiveIndex().then((selectedIndex) => {
+      this.selectedSlide.emit({
+        slide: this.slides[selectedIndex],
+        index: selectedIndex,
+      });
+    });
+  }
+
+  slideTo(index: number) {
+    this.ionSlides.slideTo(index);
+  }
+}

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

@@ -0,0 +1,2 @@
+export { SpinnerComponent } from './spinner.component';
+export { SpinnerModule } from './spinner.module';

package/src/lib/components/spinner/spinner.component.html

@@ -0,0 +1,4 @@
+<div class="spinner">
+  <div class="inner-circle"></div>
+  <div class="outer-circle"></div>
+</div>

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

@@ -0,0 +1,37 @@
+@use '~@kirbydesign/core/src/scss/utils';
+
+.spinner {
+  overflow: hidden;
+  width: utils.size('l');
+  height: utils.size('l');
+  position: relative;
+  margin: 0 auto;
+}
+
+.inner-circle,
+.outer-circle {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background-color: utils.get-color('primary');
+  opacity: 0.6;
+  position: absolute;
+  top: 0;
+  left: 0;
+  animation: sk-bounce 2s infinite ease-in-out;
+}
+
+.outer-circle {
+  animation-delay: -1s;
+}
+
+@keyframes sk-bounce {
+  0%,
+  100% {
+    transform: scale(0);
+  }
+
+  50% {
+    transform: scale(1);
+  }
+}

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

@@ -0,0 +1,13 @@
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'kirby-spinner',
+  templateUrl: './spinner.component.html',
+  styleUrls: ['./spinner.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SpinnerComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit() {}
+}

package/src/lib/components/spinner/spinner.module.ts

@@ -0,0 +1,12 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { SpinnerComponent } from './spinner.component';
+
+@NgModule({
+  declarations: [SpinnerComponent],
+  imports: [CommonModule],
+  exports: [SpinnerComponent],
+  providers: [],
+})
+export class SpinnerModule {}

package/src/lib/components/stock-chart-deprecated/index.ts

@@ -0,0 +1,2 @@
+export * from './options/stock-chart-deprecated-options';
+export * from './stock-chart-deprecated.component';

package/src/lib/components/stock-chart-deprecated/options/stock-chart-deprecated-options.ts

@@ -0,0 +1,220 @@
+import { formatNumber } from '@angular/common';
+import { Options } from 'highcharts';
+import { dateFormat } from 'highcharts/highstock';
+
+import { ColorHelper } from '@kirbydesign/core';
+
+export interface StockChartDeprecatedDataPoint {
+  x: number;
+  y: number;
+  id: 'min' | 'max' | '';
+}
+
+export const stockChartDeprecatedOptions = (locale: string, height: number) => {
+  const options: Options = defaultOptions(locale) as Options;
+  const transparentColor = 'rgba(255,255,255,0)';
+  options.chart.backgroundColor = transparentColor;
+  options.chart.height = height;
+
+  options.tooltip.backgroundColor = ColorHelper.getThemeColorRgbString('background-color');
+  // Using a function instead of a lamdba-expression because of a reference to this.
+  options.tooltip.formatter = function () {
+    return (
+      '<div class="kirby-text-xsmall">' +
+      // @ts-ignore
+      dateFormat('%e. %b', new Date(this.x)) +
+      '</div><br/><div class="kirby-text-small kirby-text-bold">' +
+      formatNumber(this.y, locale) +
+      '</div>'
+    );
+  };
+  options.plotOptions.area.fillColor = transparentColor;
+  options.plotOptions.area.lineColor = ColorHelper.getThemeColorRgbString('tertiary');
+
+  options.plotOptions.area.marker.lineColor = 'rgba(255,255,255,0.3)';
+  options.plotOptions.area.marker.fillColor = ColorHelper.getThemeColorRgbString('primary');
+
+  options.xAxis = {
+    ...options.xAxis,
+    crosshair: {
+      color: ColorHelper.getThemeColorRgbString('primary'),
+    },
+    tickColor: transparentColor,
+    lineColor: ColorHelper.getThemeColorRgbString('medium'),
+    labels: {
+      style: {
+        color: ColorHelper.getThemeColorRgbString('semi-dark-tint'),
+      },
+    },
+  };
+
+  options.yAxis = {
+    ...options.yAxis,
+    lineColor: transparentColor,
+    gridLineColor: ColorHelper.getThemeColorRgbString('medium'),
+    labels: {
+      style: {
+        color: ColorHelper.getThemeColorRgbString('semi-dark-tint'),
+      },
+    },
+  };
+
+  /*
+  // Using a function instead of a lamdba-expression because of a reference to this.
+  options.plotOptions.area.events.mouseOver = function() {
+    const transparentColor = 'rgba(255,255,255,0)';
+    this.chart.xAxis[0].update({
+      tickColor: transparentColor,
+      lineColor: ColorHelper.getThemeColorRgbString('medium'),
+      labels: {
+        style: {
+          color: ColorHelper.getThemeColorRgbString('semi-dark-tint'),
+        },
+      },
+    });
+  };
+
+  // Using a function instead of a lamdba-expression because of a reference to this.
+  options.plotOptions.area.events.mouseOut = function() {
+    const transparentColor = 'rgba(255,255,255,0)';
+    this.chart.xAxis[0].update({
+      lineColor: transparentColor,
+      labels: {
+        style: {
+          color: transparentColor,
+        },
+      },
+    });
+  };
+   */
+
+  return options;
+};
+
+export const annotations = (locale: string): Highcharts.AnnotationsOptions => {
+  return {
+    id: 'minmax',
+    zIndex: 2,
+    labels: [
+      {
+        point: 'max',
+        shape: 'rect',
+        distance: 5,
+        align: 'center',
+        verticalAlign: 'top',
+        backgroundColor: ColorHelper.getThemeColorRgbString('tertiary'),
+        // Using a function instead of a lamdba-expression because of a reference to this.
+        formatter: function () {
+          return formatNumber(this.y, locale, '1.1-1');
+        },
+      },
+      {
+        point: 'min',
+        shape: 'rect',
+        distance: -28,
+        align: 'center',
+        verticalAlign: 'bottom',
+        backgroundColor: ColorHelper.getThemeColorRgbString('tertiary'),
+        // Using a function instead of a lamdba-expression because of a reference to this.
+        formatter: function () {
+          return formatNumber(this.y, locale, '1.1-1');
+        },
+      },
+    ],
+    labelOptions: {
+      y: 0,
+      allowOverlap: true,
+    },
+  };
+};
+
+const defaultOptions = (locale: string) => {
+  return {
+    chart: {
+      zoomType: 'x',
+      type: 'StockChart',
+      spacingTop: 30,
+      //spacingRight: 55,
+    },
+    navigator: {
+      enabled: false,
+    },
+    rangeSelector: {
+      enabled: false,
+    },
+    scrollbar: {
+      enabled: false,
+    },
+    credits: {
+      enabled: false,
+    },
+    title: {
+      text: '',
+    },
+    subtitle: {
+      text: '',
+    },
+    xAxis: {
+      ordinal: true,
+      type: 'datetime',
+      lineWidth: 0.5,
+      opposite: false,
+      labels: {
+        format: '{value:%Y-%b-%e %l:%M %p }',
+      },
+    },
+    yAxis: {
+      opposite: false,
+      title: {
+        text: '',
+      },
+      /* Doesn't work before upgrade.
+        labels: {
+          x: 0,
+          y: 10,
+          align: 'right',
+        },
+         */
+    },
+    annotations: [annotations(locale)],
+    legend: {
+      enabled: false,
+    },
+    tooltip: {
+      crosshairs: {
+        width: 1,
+        zIndex: 2,
+      },
+      shadow: false,
+      borderWidth: 0,
+    },
+    plotOptions: {
+      area: {
+        marker: {
+          lineWidth: 16,
+          radius: 7,
+        },
+        lineWidth: 2,
+        states: {
+          hover: {
+            lineWidth: 2,
+          },
+        },
+        events: {},
+        threshold: null,
+      },
+      series: {
+        marker: {
+          zIndex: 100,
+          enabledThreshold: 50,
+        },
+      },
+    },
+    series: [
+      {
+        type: 'area',
+        data: [],
+      },
+    ],
+  };
+};

package/src/lib/components/stock-chart-deprecated/stock-chart-deprecated.component.scss

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

package/src/lib/components/stock-chart-deprecated/stock-chart-deprecated.component.spec.ts

@@ -0,0 +1,32 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { stockChartDeprecatedOptions } from './options/stock-chart-deprecated-options';
+import { StockChartDeprecatedComponent } from './stock-chart-deprecated.component';
+
+describe('StockChartDeprecatedComponent', () => {
+  let component: StockChartDeprecatedComponent;
+  let fixture: ComponentFixture<StockChartDeprecatedComponent>;
+
+  const expectedDefaultHeight = 300;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [StockChartDeprecatedComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(StockChartDeprecatedComponent);
+    component = fixture.componentInstance;
+    component.options = stockChartDeprecatedOptions('da', expectedDefaultHeight);
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should have correct default height input', () => {
+    expect(component.height).toBe(expectedDefaultHeight);
+  });
+});