@kirbydesign/designsystem 0.0.0

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

@@ -0,0 +1,244 @@
+import { createComponentFactory, Spectator } from '@ngneat/spectator';
+
+import { DesignTokenHelper } from '@kirbydesign/core';
+
+import { TestHelper } from '../../testing/test-helper';
+
+import { RadioComponent } from './radio.component';
+
+const fatFingerSize = DesignTokenHelper.fatFingerSize();
+const getColor = DesignTokenHelper.getColor;
+const getElevation = DesignTokenHelper.getElevation;
+const size = DesignTokenHelper.size;
+
+describe('RadioComponent', () => {
+  const createComponent = createComponentFactory({
+    component: RadioComponent,
+    imports: [TestHelper.ionicModuleForTest],
+  });
+
+  let spectator: Spectator<RadioComponent>;
+  let ionRadioElement: HTMLIonRadioElement;
+  let radioIcon: HTMLElement;
+  let radioCheckmark: HTMLElement;
+  let label: HTMLSpanElement;
+
+  beforeEach(async () => {
+    spectator = createComponent({ props: { text: 'test' } });
+    ionRadioElement = spectator.query('ion-radio');
+    ionRadioElement.tabIndex = -1;
+    await TestHelper.whenReady(ionRadioElement);
+    radioIcon = ionRadioElement.shadowRoot.querySelector('[part=container]');
+    radioCheckmark = ionRadioElement.shadowRoot.querySelector('[part=mark]');
+    label = spectator.query('span');
+  });
+
+  it('should be created', () => {
+    expect(spectator.component).toBeTruthy();
+  });
+
+  describe('by default', () => {
+    it('should not be checked', () => {
+      expect(ionRadioElement.classList.contains('radio-checked')).toBe(false);
+    });
+
+    it('should not be disabled', () => {
+      expect(spectator.component.disabled).toBe(undefined);
+    });
+
+    it('should get tabindex from ion-radio', () => {
+      expect(spectator.component.buttonTabIndex).toBe(-1);
+
+      ionRadioElement.tabIndex = 0;
+
+      expect(spectator.component.buttonTabIndex).toBe(0);
+    });
+  });
+
+  describe('when configured with', () => {
+    describe('value', () => {
+      it('should be bound to "value"-property of ion-radio', () => {
+        const value = 'some random value';
+        spectator.setInput('value', value);
+        expect(ionRadioElement.value).toBe(value);
+      });
+    });
+
+    describe('disabled', () => {
+      it('should be bound to "disabled"-property of ion-radio', () => {
+        const disabled = true;
+        spectator.setInput('disabled', disabled);
+        expect(ionRadioElement.disabled).toBe(disabled);
+      });
+    });
+  });
+
+  describe('presentation', () => {
+    describe('by default', () => {
+      it('should be that of material design (traditional round radio button) and not an iOS checkmark', () => {
+        expect(ionRadioElement.mode).toBe('md');
+      });
+
+      it('should have correct icon size', () => {
+        expectIconSize();
+      });
+
+      it('should have correct icon styling', () => {
+        expect(radioIcon).toHaveComputedStyle({
+          'border-width': '1px',
+          'border-color': getColor('semi-dark'),
+          'background-color': getColor('white'),
+        });
+      });
+
+      it('should have minimum fat finger size', () => {
+        expect(spectator.element).toHaveComputedStyle({
+          height: `>=${fatFingerSize}`,
+          width: `>=${fatFingerSize}`,
+        });
+      });
+
+      it('should have have correct label font-size ', () => {
+        expect(label).toHaveComputedStyle({ 'font-size': '16px' });
+      });
+
+      it('should have have correct label line-height', () => {
+        expect(label).toHaveComputedStyle({ 'line-height': '24px' });
+      });
+    });
+
+    describe('when configured with size', () => {
+      it(`should have correct size when size = 'xs'`, () => {
+        spectator.setInput('size', 'xs');
+        spectator.detectChanges();
+
+        expectIconSize();
+        expect(spectator.element).toHaveComputedStyle({
+          height: size('l'),
+        });
+      });
+
+      it(`should have correct size when size = 'sm'`, () => {
+        spectator.setInput('size', 'sm');
+        spectator.detectChanges();
+
+        expectIconSize();
+        expect(spectator.element).toHaveComputedStyle({
+          height: fatFingerSize,
+        });
+      });
+
+      it(`should have correct size when size = 'md'`, () => {
+        spectator.setInput('size', 'md');
+        spectator.detectChanges();
+
+        expectIconSize();
+        expect(spectator.element).toHaveComputedStyle({
+          height: size('xxxl'),
+        });
+      });
+    });
+
+    describe('when state is', () => {
+      describe('checked', () => {
+        beforeEach(() => {
+          ionRadioElement.classList.add('radio-checked');
+        });
+
+        it('should have correct icon styling', () => {
+          expect(radioIcon).toHaveComputedStyle({
+            'background-color': getColor('white'),
+            'border-width': '0px',
+            'box-shadow': getElevation(2),
+          });
+        });
+
+        it('should have correct checkmark styling', () => {
+          expect(radioCheckmark).toHaveComputedStyle({
+            width: '12px',
+            height: '12px',
+            'background-color': getColor('success'),
+          });
+        });
+      });
+
+      describe('disabled', () => {
+        beforeEach(async () => {
+          spectator.setInput('disabled', true);
+          spectator.detectChanges();
+          await TestHelper.whenTrue(() => ionRadioElement.classList.contains('radio-disabled'));
+        });
+
+        it('should have correct icon styling', () => {
+          expect(ionRadioElement).toHaveComputedStyle({
+            opacity: '1',
+          });
+          expect(radioIcon).toHaveComputedStyle({
+            'background-color': getColor('semi-light'),
+            'border-width': '1px',
+            'border-color': getColor('medium'),
+            'box-shadow': 'none',
+          });
+        });
+
+        it('should have correct checkmark styling', () => {
+          expect(radioCheckmark).toHaveComputedStyle({
+            'background-color': getColor('medium'),
+          });
+        });
+      });
+
+      describe('checked and disabled', () => {
+        beforeEach(async () => {
+          spectator.setInput('disabled', true);
+          spectator.detectChanges();
+          ionRadioElement.classList.add('radio-checked');
+          await TestHelper.whenTrue(() => ionRadioElement.classList.contains('radio-disabled'));
+        });
+
+        it('should have correct icon styling', () => {
+          expect(ionRadioElement).toHaveComputedStyle({
+            opacity: '1',
+          });
+          expect(radioIcon).toHaveComputedStyle({
+            'background-color': getColor('semi-light'),
+            'border-width': '0px',
+            'box-shadow': 'none',
+          });
+        });
+
+        it('should have correct checkmark styling', () => {
+          expect(radioCheckmark).toHaveComputedStyle({
+            'background-color': getColor('medium'),
+          });
+        });
+      });
+    });
+  });
+
+  describe('focus()', () => {
+    it('should focus ion-radio', () => {
+      const focusSpy = spyOn(ionRadioElement, 'focus');
+
+      spectator.component.focus();
+
+      expect(focusSpy).toHaveBeenCalled();
+    });
+  });
+
+  function expectIconSize() {
+    const radioIconOuterSize = size('m');
+    const radioPadding = size('xxxxs');
+    const radioIconInnerSize = `${parseInt(radioIconOuterSize) - parseInt(radioPadding) * 2}px`;
+
+    expect(ionRadioElement).toHaveComputedStyle({
+      width: radioIconOuterSize,
+      height: radioIconOuterSize,
+      padding: radioPadding,
+    });
+    expect(radioIcon).toHaveComputedStyle({
+      width: radioIconInnerSize,
+      height: radioIconInnerSize,
+    });
+  }
+});

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

@@ -0,0 +1,50 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  HostBinding,
+  Input,
+  ViewChild,
+} from '@angular/core';
+import { IonRadio } from '@ionic/angular';
+
+import { UniqueIdGenerator } from '../../helpers/unique-id-generator.helper';
+
+@Component({
+  selector: 'kirby-radio',
+  templateUrl: './radio.component.html',
+  styleUrls: ['./radio.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class RadioComponent {
+  @Input()
+  value: any;
+
+  @HostBinding('class.has-label')
+  @Input()
+  text: string;
+
+  @HostBinding('class')
+  @Input()
+  size?: 'xs' | 'sm' | 'md';
+
+  @Input()
+  disabled: boolean;
+  @HostBinding('attr.disabled')
+  get _isDisabled() {
+    return this.disabled ? 'disabled' : null;
+  }
+
+  get buttonTabIndex(): number {
+    return this.ionRadioElement ? this.ionRadioElement.nativeElement.tabIndex : -1;
+  }
+
+  focus() {
+    this.ionRadioElement && this.ionRadioElement.nativeElement.focus();
+  }
+
+  _labelId = UniqueIdGenerator.scopedTo('kirby-radio-label').next();
+
+  @ViewChild(IonRadio, { read: ElementRef, static: true })
+  private ionRadioElement?: ElementRef<HTMLIonRadioElement>;
+}

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

@@ -0,0 +1,16 @@
+<ion-range
+  (ionChange)="_onRangeValueChange($event)"
+  [min]="min"
+  [max]="max"
+  [step]="step"
+  [value]="value"
+  [pin]="pin"
+  [snaps]="ticks"
+  [ticks]="ticks"
+  [debounce]="debounce"
+  [disabled]="disabled"
+>
+</ion-range>
+
+<label *ngIf="minLabel" class="min-label">{{ minLabel }}</label>
+<label *ngIf="maxLabel" class="max-label">{{ maxLabel }}</label>

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

@@ -0,0 +1,81 @@
+@use '~@kirbydesign/core/src/scss/utils';
+
+$tick-height: 6px;
+$tick-width: 6px;
+
+:host {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
+ion-range {
+  --knob-background: #{utils.get-color('white')};
+  --knob-box-shadow: 0 5px 10px 0 rgb(28 28 28 / 30%), 0 0 5px 0 rgb(28 28 28 / 8%);
+  --knob-size: 24px;
+  --pin-color: #{utils.get-text-color('black')};
+  --pin-background: #{utils.get-color('semi-light')};
+  --bar-background: #{utils.get-color('medium')};
+  --bar-background-active: #{utils.get-color('dark')};
+  --bar-border-radius: #{utils.size('xxxs')};
+  --bar-height: #{utils.size('xxxxs')};
+
+  &.range-disabled {
+    --knob-background: #{utils.get-color('semi-light')};
+    --knob-box-shadow: none;
+    --bar-background: #{utils.get-color('semi-light')};
+    --bar-background-active: #{utils.get-color('semi-light')};
+
+    &::part(tick) {
+      background: utils.get-color('semi-light');
+    }
+  }
+
+  flex: 1 1 100%;
+  padding: 0;
+
+  &.range-has-pin {
+    padding: 0 $tick-width * 0.5;
+  }
+
+  &::part(pin) {
+    font-size: utils.font-size('xs');
+    color: var(--pin-color);
+    background-color: var(--pin-background);
+    padding: utils.size('xxxxs') utils.size('xxxs');
+    border-radius: 4px;
+    min-width: 40px;
+    position: relative;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      display: block;
+      border: solid transparent 6px;
+      border-top-color: var(--pin-background);
+    }
+  }
+
+  &::part(tick),
+  &::part(tick-active) {
+    border-radius: 50%;
+    width: $tick-width;
+    height: $tick-height;
+    z-index: 1;
+    margin-inline-start: -$tick-width * 0.5;
+  }
+
+  &::part(tick) {
+    background: utils.get-color('medium');
+  }
+}
+
+label {
+  font-size: utils.font-size('xs');
+  line-height: utils.line-height('xs');
+  color: utils.get-text-color('semi-dark');
+  margin-top: -#{utils.size('xxxs')};
+}

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

@@ -0,0 +1,105 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  forwardRef,
+  Input,
+  OnChanges,
+  Output,
+  SimpleChanges,
+} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+@Component({
+  selector: 'kirby-range',
+  templateUrl: './range.component.html',
+  styleUrls: ['./range.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      multi: true,
+      useExisting: forwardRef(() => RangeComponent),
+    },
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class RangeComponent implements OnChanges, ControlValueAccessor {
+  @Input() minLabel: string;
+  @Input() maxLabel: string;
+  @Input() debounce: number;
+  @Input() max: number;
+  @Input() min: number;
+  @Input() pin: boolean;
+  @Input() step = 1;
+  @Input() ticks: boolean;
+  @Input() disabled = false;
+  @Input()
+  set value(value: number) {
+    if (value !== this.currentValue) {
+      this.currentValue = value;
+      this.propagateChange(this.currentValue);
+      this.change.emit(this.currentValue);
+    }
+  }
+
+  get value(): number {
+    return this.currentValue;
+  }
+
+  @Output() change: EventEmitter<number> = new EventEmitter<number>();
+
+  private currentValue: number;
+
+  ngOnChanges(_: SimpleChanges) {
+    if (!this.ticks) return;
+
+    /*
+     * Max 10 ticks are allowed
+     */
+    const amountOfTicks = (this.max - this.min) / this.step;
+    if (amountOfTicks > 9) {
+      this.step = (this.max - this.min) / 9;
+    }
+
+    /*
+     * Set value to the nearest tick
+     */
+    this.value = this.getTicks().reduce((a, b) => {
+      return Math.abs(b - this.value) < Math.abs(a - this.value) ? b : a;
+    });
+  }
+
+  private getTicks() {
+    const ticks = [];
+    for (let value = Number(this.min); value <= Number(this.max); value += Number(this.step)) {
+      ticks.push(value);
+    }
+    return ticks;
+  }
+
+  public setDisabledState?(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+
+  public _onRangeValueChange($event: any): void {
+    this.writeValue($event.detail.value);
+  }
+
+  public onTouched = () => {};
+
+  public propagateChange = (_: any) => {};
+
+  public writeValue(value: any): void {
+    if (value !== undefined) {
+      this.value = value;
+    }
+  }
+
+  public registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  public registerOnChange(fn: any): void {
+    this.propagateChange = fn;
+  }
+}

package/src/lib/components/reorder-list/index.ts

@@ -0,0 +1,3 @@
+export { ReorderListComponent } from './reorder-list.component';
+
+export { ReorderEvent } from './reorder-event';

package/src/lib/components/reorder-list/reorder-event.ts

@@ -0,0 +1,17 @@
+export class ReorderEvent {
+  private origEvent: CustomEvent<any>;
+  private parent?: any;
+
+  constructor(ev: CustomEvent<any>, parentItem?: any) {
+    this.origEvent = ev;
+    this.parent = parentItem;
+    this.origEvent.cancelBubble = true;
+  }
+  complete(listOrReorder?: boolean | any[]): Promise<any> {
+    return this.origEvent.detail.complete(listOrReorder);
+  }
+
+  get parentItem(): any {
+    return this.parent;
+  }
+}

package/src/lib/components/reorder-list/reorder-list.component.html

@@ -0,0 +1,30 @@
+<ion-backdrop *ngIf="reorderActive" [tappable]="false" [visible]="true" [stopPropagation]="false">
+</ion-backdrop>
+<ion-reorder-group (ionItemReorder)="doReorder($event)" disabled="false">
+  <div *ngFor="let reorderItem of items" class="outer-group">
+    <kirby-card>
+      <ng-container
+        *ngTemplateOutlet="itemTemplate || defaultItemTemplate; context: { $implicit: reorderItem }"
+      >
+      </ng-container>
+      <div *ngIf="reorderItem[subItemsName]" #reorderGroupContainer>
+        <ion-reorder-group (ionItemReorder)="doSubReorder($event, reorderItem)" disabled="false">
+          <div *ngFor="let subItem of reorderItem[subItemsName]">
+            <ng-container
+              *ngTemplateOutlet="
+                itemTemplate || defaultItemTemplate;
+                context: { $implicit: subItem, isSubItem: true }
+              "
+            ></ng-container>
+          </div>
+        </ion-reorder-group>
+      </div>
+    </kirby-card>
+  </div>
+</ion-reorder-group>
+
+<ng-template #defaultItemTemplate let-item let-isSubItem>
+  <kirby-item [reorderable]="true">
+    <h3>{{ getItemTextDefault(item) }}</h3>
+  </kirby-item>
+</ng-template>

package/src/lib/components/reorder-list/reorder-list.component.scss

@@ -0,0 +1,90 @@
+@use '~@kirbydesign/core/src/scss/utils';
+
+ion-backdrop {
+  opacity: 0.3;
+  z-index: 101;
+  position: fixed;
+}
+
+.reorder-selected {
+  box-shadow: none;
+  opacity: 1;
+  z-index: 104;
+
+  kirby-card {
+    transform: scale(1.05, 1.05);
+
+    & div:first-child {
+      border-top: 1px solid var(--kirby-background-color);
+    }
+  }
+
+  @include utils.slotted('kirby-item') {
+    box-shadow: 0 0 10px rgb(0 0 0 / 40%);
+    transform: scale(1.05, 1.05);
+    border-radius: utils.$border-radius;
+    overflow: hidden;
+  }
+}
+
+.reorder-list-active {
+  & > * {
+    position: relative;
+    z-index: 103;
+  }
+
+  & > .reorder-selected {
+    z-index: 104;
+  }
+
+  & div:first-child {
+    border-top: none;
+  }
+
+  @include utils.slotted('div:last-child kirby-item') {
+    border-bottom-left-radius: utils.$border-radius;
+    border-bottom-right-radius: utils.$border-radius;
+    overflow: hidden;
+  }
+
+  .reorder-selected {
+    @include utils.slotted('kirby-item') {
+      box-shadow: 0 0 10px rgb(0 0 0 / 40%);
+      transform: scale(1.05, 1.05);
+      border-radius: utils.$border-radius;
+      overflow: hidden;
+    }
+  }
+}
+
+.outer-group {
+  border-bottom: 20px transparent solid;
+}
+
+kirby-card {
+  overflow: inherit;
+  z-index: auto;
+
+  @include utils.slotted('div:last-child ion-reorder-group div:last-child>kirby-item') {
+    border-bottom-left-radius: utils.$border-radius;
+    border-bottom-right-radius: utils.$border-radius;
+    overflow: hidden;
+  }
+
+  @include utils.slotted('div kirby-item') {
+    z-index: 1; // for showing rounded corners on ios devices
+  }
+
+  @include utils.slotted('div:first-child>kirby-item') {
+    border-radius: utils.$border-radius;
+    overflow: hidden;
+  }
+
+  @include utils.slotted('div .reorder-list-active kirby-item') {
+    z-index: 103;
+  }
+
+  & div:first-child {
+    border-top: 1px solid var(--kirby-background-color);
+  }
+}