@kirbydesign/designsystem 0.0.0

package/src/lib/components/item-sliding/item-sliding.component.spec.ts

@@ -0,0 +1,174 @@
+import { IonicModule } from '@ionic/angular';
+import { createHostFactory, SpectatorHost } from '@ngneat/spectator';
+import { MockComponent, MockModule } from 'ng-mocks';
+
+import { DesignTokenHelper } from '../../helpers';
+import { ItemComponent } from '../item/item.component';
+
+import { ItemSlidingComponent, ItemSwipeAction } from './';
+import { ItemSwipeActionType } from './item-sliding.types';
+
+const { getColor } = DesignTokenHelper;
+
+describe('ItemSlidingComponent', () => {
+  let spectator: SpectatorHost<ItemSlidingComponent>;
+
+  const createHost = createHostFactory({
+    imports: [MockModule(IonicModule)],
+    declarations: [MockComponent(ItemComponent)],
+    component: ItemSlidingComponent,
+  });
+
+  let ionItemOptionsElement: HTMLIonItemOptionsElement;
+  let ionItemOptionElements: NodeListOf<HTMLIonItemOptionElement>;
+
+  function queryItemOptionElements() {
+    ionItemOptionElements = spectator.element.querySelectorAll('ion-item-option');
+  }
+
+  function queryItemOptionsElement() {
+    ionItemOptionsElement = spectator.element.querySelector('ion-item-options');
+  }
+
+  beforeEach(() => {
+    spectator = createHost(
+      '<kirby-item-sliding><kirby-item>Item</kirby-item></kirby-item-sliding>'
+    );
+
+    queryItemOptionsElement();
+    queryItemOptionElements();
+  });
+
+  it('should create', () => {
+    expect(spectator.component).toBeTruthy;
+  });
+
+  it('should project slotted content', () => {
+    const itemElement = spectator.element.querySelector('kirby-item');
+    expect(itemElement).toBeTruthy();
+  });
+
+  describe('without swipeActions', () => {
+    it('should not render ion-item-options', () => {
+      expect(ionItemOptionsElement).toBeFalsy();
+    });
+  });
+
+  describe('with swipeActions', () => {
+    const swipeActions: ItemSwipeAction[] = [
+      {
+        title: 'Delete',
+        onSelected: () => console.log('test'),
+        type: 'danger',
+      },
+      {
+        title: 'Edit',
+        icon: 'link',
+        type: 'success',
+        onSelected: () => console.log('test'),
+      },
+      {
+        title: 'Archive',
+        icon: 'link',
+        onSelected: () => console.log('test'),
+        type: 'warning',
+      },
+    ];
+
+    beforeEach(() => {
+      spectator.setInput('swipeActions', swipeActions);
+      queryItemOptionElements();
+      queryItemOptionsElement();
+
+      // Verify each title is unique; it can then be used as identifier in tests
+      const uniqueSwipeActionTitles = new Set(swipeActions.map(({ title }) => title));
+      expect(swipeActions.length).not.toBe(0);
+      expect(uniqueSwipeActionTitles.size).toBe(swipeActions.length);
+    });
+
+    it('should render swipeActions in the correct slot by default', () => {
+      expect(ionItemOptionsElement.getAttribute('ng-reflect-side')).toEqual('start');
+    });
+
+    it('should render an ion-item-option element for each swipe action', () => {
+      expect(ionItemOptionElements.length).toEqual(swipeActions.length);
+    });
+
+    it('should render ion-item-option elements in same order as swipeActions are given', () => {
+      // QuerySelectorAll returns elements in document order
+      ionItemOptionElements.forEach((ionItemOptionElement, index) => {
+        const optionLabel = ionItemOptionElement.querySelector('ion-label');
+        expect(optionLabel.innerHTML).toEqual(swipeActions[index].title);
+      });
+    });
+
+    describe('when a swipeAction is disabled', () => {
+      beforeEach(() => {
+        const swipeActionsWithDisabled = JSON.parse(JSON.stringify(swipeActions));
+        swipeActionsWithDisabled[0]['isDisabled'] = true;
+
+        expect(swipeActionsWithDisabled.length).toBe(swipeActions.length);
+
+        spectator.setInput('swipeActions', swipeActionsWithDisabled);
+        queryItemOptionElements();
+      });
+
+      it('should not render the disabled swipeAction', () => {
+        expect(ionItemOptionElements.length).toBe(swipeActions.length - 1);
+      });
+    });
+
+    const swipeActionTypesScenarios: { [key in ItemSwipeActionType]: string } = {
+      warning: getColor('warning').hex,
+      success: getColor('success').hex,
+      danger: getColor('danger').hex,
+    };
+
+    Object.entries(swipeActionTypesScenarios).forEach(([type, color]) => {
+      describe(`when a swipeAction has type ${type}`, () => {
+        let swipeActionWithType: HTMLIonItemOptionElement;
+        beforeEach(() => {
+          const typeIdx = swipeActions.findIndex((swipeAction) => swipeAction.type === type);
+          swipeActionWithType = ionItemOptionElements[typeIdx];
+          expect(swipeActionWithType).not.toBeUndefined();
+        });
+
+        it('should render with correct background color', () => {
+          expect(swipeActionWithType).toHaveComputedStyle({ 'background-color': color });
+        });
+      });
+    });
+
+    describe('when a swipeAction is clicked', () => {
+      it('should call onSelected', () => {
+        const idx = 0;
+        const onSelectedSpy = spyOn(spectator.component.swipeActions[idx], 'onSelected');
+        ionItemOptionElements[idx].click();
+        expect(onSelectedSpy).toHaveBeenCalled();
+      });
+    });
+
+    describe('when a swipeAction has an icon', () => {
+      let kirbyIconElement: HTMLElement;
+
+      beforeEach(() => {
+        const swipeActionsWithIcons = swipeActions.map((swipeAction) => ({
+          ...swipeAction,
+          icon: 'flash',
+        }));
+        spectator.setInput('swipeActions', swipeActionsWithIcons);
+        queryItemOptionElements();
+        kirbyIconElement = ionItemOptionElements[0].querySelector('kirby-icon');
+      });
+
+      it('should render the icon in the correct slot', () => {
+        expect(kirbyIconElement.slot).toEqual('top');
+      });
+
+      it('should render the title', () => {
+        const optionLabel = ionItemOptionElements[0].querySelector('ion-label');
+        expect(optionLabel.innerHTML).toEqual(swipeActions[0].title);
+      });
+    });
+  });
+});

package/src/lib/components/item-sliding/item-sliding.component.ts

@@ -0,0 +1,23 @@
+import { Component, Input } from '@angular/core';
+
+import { ItemSlidingSide, ItemSwipeAction } from './item-sliding.types';
+
+@Component({
+  selector: 'kirby-item-sliding',
+  templateUrl: './item-sliding.component.html',
+  styleUrls: ['./item-sliding.component.scss'],
+})
+export class ItemSlidingComponent {
+  @Input() swipeActions: ItemSwipeAction[];
+
+  _side: 'start' | 'end' = 'start';
+  @Input() set side(value: ItemSlidingSide) {
+    this._side = value === 'left' ? 'start' : 'end';
+  }
+
+  get _hasSwipeActions(): boolean {
+    // Using '>' instead of '!==';
+    // will only return true when swipeActions is an array
+    return this.swipeActions?.length > 0;
+  }
+}

package/src/lib/components/item-sliding/item-sliding.shared.scss

@@ -0,0 +1,18 @@
+/* 
+  These styles are moved here as they are shared between 
+  the new kirby-item-sliding component and the old template driven 
+  list. This reduces the amount of duplication. 
+
+  When the old template driven list is deprecated however - this should 
+  just be used directly in item-sliding.component.scss.
+ */
+@use '~@kirbydesign/core/src/scss/utils';
+
+ion-item-option {
+  @each $color-name, $color-value in utils.$main-colors {
+    &.#{$color-name} {
+      background-color: #{utils.get-color($color-name)};
+      color: #{utils.get-color($color-name + '-contrast')};
+    }
+  }
+}

package/src/lib/components/item-sliding/item-sliding.types.ts

@@ -0,0 +1,13 @@
+export type ItemSlidingSide = 'left' | 'right';
+
+export type ItemSwipeActionType = 'success' | 'warning' | 'danger';
+
+export type ItemSwipeActionSlots = 'start' | 'end';
+
+export type ItemSwipeAction = {
+  title: string;
+  onSelected: () => void;
+  icon?: string;
+  type?: ItemSwipeActionType;
+  isDisabled?: boolean;
+};

package/src/lib/components/list/directives/infinite-scroll.directive.spec.ts

@@ -0,0 +1,131 @@
+import { ElementRef, NgZone } from '@angular/core';
+import { fakeAsync, tick } from '@angular/core/testing';
+import { SpyObject } from '@ngneat/spectator';
+
+import { WindowRef } from '../../../types/window-ref';
+
+import { InfiniteScrollDirective, INFINITE_SCROLL_DEBOUNCE } from './infinite-scroll.directive';
+
+describe('InfiniteScrollDirective', () => {
+  let nativeElement: SpyObject<any>;
+  let document: SpyObject<Document>;
+
+  const createDirective = (
+    scrollPercentage: number,
+    runNgAfterViewInit = true
+  ): InfiniteScrollDirective => {
+    const height = 800;
+    const bottom = height * (1 - scrollPercentage);
+    const viewHeight = 0;
+
+    nativeElement.getBoundingClientRect.and.returnValue({ height, bottom });
+    nativeElement.closest.and.returnValue(null);
+    document.getElementsByTagName.and.returnValue([]);
+
+    const mockNgZone: SpyObject<NgZone> = jasmine.createSpyObj('ngZone', [
+      'runOutsideAngular',
+      'run',
+    ]);
+
+    mockNgZone.run.and.callFake((fn) => fn());
+    mockNgZone.runOutsideAngular.and.callFake((fn) => fn());
+
+    const directive = new InfiniteScrollDirective(
+      { nativeElement } as ElementRef,
+      { nativeWindow: { innerHeight: viewHeight, document: document as Document } } as WindowRef,
+      mockNgZone
+    );
+    spyOn(directive.scrollEnd, 'emit');
+    if (runNgAfterViewInit) directive.ngAfterViewInit();
+
+    return directive;
+  };
+
+  beforeEach(() => {
+    nativeElement = jasmine.createSpyObj('nativeElement', ['getBoundingClientRect', 'closest']);
+    document = jasmine.createSpyObj('document', ['getElementsByTagName']);
+  });
+
+  it('should create an instance', () => {
+    const directive = createDirective(0);
+    expect(directive).toBeTruthy();
+  });
+
+  describe('event: scrollEnd', () => {
+    it('should emit event when 80% of the element has been scrolled', fakeAsync(() => {
+      const directive = createDirective(0.8);
+
+      directive.onScroll();
+      // we need to wait the debounce time.
+      tick(INFINITE_SCROLL_DEBOUNCE);
+
+      expect(directive.scrollEnd.emit).toHaveBeenCalledTimes(1);
+    }));
+
+    it('should emit event when more then 80% of the element has been scrolled', fakeAsync(() => {
+      const directive = createDirective(0.81);
+
+      directive.onScroll();
+      // we need to wait the debounce time.
+      tick(INFINITE_SCROLL_DEBOUNCE);
+
+      expect(directive.scrollEnd.emit).toHaveBeenCalledTimes(1);
+    }));
+
+    it('should emit event if initalized as disabled and then enabled while more than 80% of the element has been scrolled', fakeAsync(() => {
+      const directive = createDirective(81, false);
+      directive.disabled = true;
+      directive.ngAfterViewInit();
+
+      directive.disabled = false;
+      directive.onScroll();
+      // we need to wait the debounce time.
+      tick(INFINITE_SCROLL_DEBOUNCE);
+
+      expect(directive.scrollEnd.emit).toHaveBeenCalled();
+    }));
+
+    it('should not emit event when less then 80% of the element has been scrolled', fakeAsync(() => {
+      const directive = createDirective(0.79);
+
+      directive.onScroll();
+      // we need to wait the debounce time.
+      tick(INFINITE_SCROLL_DEBOUNCE);
+
+      expect(directive.scrollEnd.emit).not.toHaveBeenCalled();
+    }));
+
+    it('should not emit event when it is disabled', fakeAsync(() => {
+      const directive = createDirective(81);
+      directive.disabled = true;
+
+      directive.onScroll();
+      // we need to wait the debounce time.
+      tick(INFINITE_SCROLL_DEBOUNCE);
+
+      expect(directive.scrollEnd.emit).not.toHaveBeenCalled();
+    }));
+
+    it('should only emit event when debounce time has passed', fakeAsync(() => {
+      const directive = createDirective(0.8);
+
+      directive.onScroll();
+
+      tick(1);
+      expect(directive.scrollEnd.emit).not.toHaveBeenCalled();
+
+      tick(INFINITE_SCROLL_DEBOUNCE);
+      expect(directive.scrollEnd.emit).toHaveBeenCalledTimes(1);
+    }));
+
+    it('should not emit event after ngDestroy', fakeAsync(() => {
+      const directive = createDirective(0.8);
+      directive.ngOnDestroy();
+
+      directive.onScroll();
+
+      tick(INFINITE_SCROLL_DEBOUNCE);
+      expect(directive.scrollEnd.emit).not.toHaveBeenCalled();
+    }));
+  });
+});

package/src/lib/components/list/directives/infinite-scroll.directive.ts

@@ -0,0 +1,137 @@
+import {
+  AfterViewInit,
+  Directive,
+  ElementRef,
+  EventEmitter,
+  HostListener,
+  Input,
+  NgZone,
+  OnDestroy,
+  Output,
+} from '@angular/core';
+import { fromEvent, Subject } from 'rxjs';
+import { debounceTime, filter, map, takeUntil } from 'rxjs/operators';
+
+import { WindowRef } from '../../../types/window-ref';
+
+import { Scroll } from './scroll.model';
+
+/**
+ * Specify debounce duration in ms
+ */
+export const INFINITE_SCROLL_DEBOUNCE = 100;
+
+@Directive({
+  selector: '[kirbyInfiniteScroll]',
+})
+export class InfiniteScrollDirective implements AfterViewInit, OnDestroy {
+  /**
+   * Event that will be triggered when the user has scrolled to
+   * bottom of the element
+   */
+  @Output() scrollEnd = new EventEmitter<void>();
+
+  /**
+   * If true then {@link scrollEnd} event should NOT be emitted
+   */
+  @Input() disabled = false;
+
+  /**
+   * Emits a new value on element scroll event
+   */
+  scroll$: Subject<Scroll> = new Subject<Scroll>();
+
+  /**
+   * Completes on component destroy lifecycle event
+   * used to unsubscribe from infinite observables
+   */
+  private ngUnsubscribe$ = new Subject<void>();
+
+  /**
+   * An offset from the bottom of the element to trigger {@link scrollEnd} event
+   */
+  private offset = 0.8;
+
+  constructor(private elementRef: ElementRef, private windowRef: WindowRef, private zone: NgZone) {}
+
+  ngAfterViewInit(): void {
+    /**
+     * Subscribe to {@link scroll$} observable and emit {@link scrollEnd} event
+     * when element scroll position has surpassed the offset.
+     */
+    this.scroll$
+      .pipe(
+        takeUntil(this.ngUnsubscribe$),
+        debounceTime(INFINITE_SCROLL_DEBOUNCE),
+        filter(() => !this.disabled),
+        filter((scroll) => {
+          return (
+            scroll.elementHeight * (1 - this.offset) >=
+            scroll.distanceToViewBottom - scroll.viewHeight
+          );
+        })
+      )
+      .subscribe(() => {
+        this.scrollEnd.emit();
+      });
+
+    /**
+     * Subscribe to the ionScroll event on the ion-content around the list (if any)
+     * and emit {@link scrollEnd} event when element scroll position has surpassed the offset.
+     */
+    setTimeout(() => {
+      const ionContent: HTMLElement = this.elementRef.nativeElement.closest('ion-content');
+      if (ionContent) {
+        // we run the 'ionScroll' event outside angular, as it would trigger change detection on each scroll
+        this.zone.runOutsideAngular(() => {
+          fromEvent<any>(ionContent, 'ionScroll')
+            .pipe(
+              takeUntil(this.ngUnsubscribe$),
+              debounceTime(INFINITE_SCROLL_DEBOUNCE),
+              filter(() => !this.disabled),
+              map(() => this.getScroll()),
+              filter((scroll) => {
+                return (
+                  scroll.elementHeight * (1 - this.offset) >=
+                  scroll.distanceToViewBottom - scroll.viewHeight
+                );
+              })
+            )
+            .subscribe(() => {
+              // we make sure to emit the event inside angular again. As we want to show the spinner and need change detection for that.
+              this.zone.run(() => this.scrollEnd.emit());
+            });
+        });
+      }
+    });
+  }
+
+  /**
+   * On element scroll event emit next {@link scroll$} observable value
+   */
+  @HostListener('window:scroll')
+  onScroll(): void {
+    if (this.disabled) return;
+    const scroll = this.getScroll();
+    this.scroll$.next(scroll);
+  }
+
+  /**
+   * trigger {@link ngUnsubscribe} complete on component destroy lifecycle hook
+   */
+  ngOnDestroy(): void {
+    this.ngUnsubscribe$.next();
+    this.ngUnsubscribe$.complete();
+  }
+
+  private getScroll(): Scroll {
+    const element = this.elementRef.nativeElement as HTMLElement;
+    const boundindClientRect = element.getBoundingClientRect();
+
+    const distanceToViewBottom = boundindClientRect.bottom;
+    const elementHeight = boundindClientRect.height;
+    const viewHeight = this.windowRef.nativeWindow.innerHeight;
+
+    return { distanceToViewBottom, elementHeight, viewHeight };
+  }
+}

package/src/lib/components/list/directives/list-item-color.directive.ts

@@ -0,0 +1,27 @@
+import { Directive, HostBinding, Input, OnChanges } from '@angular/core';
+
+import { ThemeColor } from '@kirbydesign/core';
+
+@Directive({
+  selector: '[kirbyListItemColor]',
+})
+export class ListItemColorDirective implements OnChanges {
+  @Input()
+  kirbyListItemColor: (item: any) => ThemeColor;
+  @Input() item: any;
+  @HostBinding('class')
+  color: ThemeColor;
+
+  ngOnChanges(): void {
+    this.color = this.getColor();
+  }
+
+  private getColor(): ThemeColor {
+    if (!this.kirbyListItemColor || !this.item) {
+      return;
+    }
+
+    const themeColor = this.kirbyListItemColor(this.item);
+    return themeColor;
+  }
+}

package/src/lib/components/list/directives/scroll.model.ts

@@ -0,0 +1,5 @@
+export interface Scroll {
+  distanceToViewBottom: number;
+  elementHeight: number;
+  viewHeight: number;
+}

package/src/lib/components/list/helpers/list-helper.spec.ts

@@ -0,0 +1,109 @@
+import { EventEmitter } from '@angular/core';
+
+import { ListComponent } from '../list.component';
+import { LoadOnDemandEvent } from '../list.event';
+
+import { ListHelper } from './list-helper';
+
+describe('list helper', () => {
+  let listHelper: ListHelper;
+
+  beforeEach(() => {
+    listHelper = new ListHelper();
+  });
+
+  describe('function: onLoadOnDemand', () => {
+    let loadMoreEmitSpy: jasmine.Spy;
+    let component: ListComponent;
+    beforeEach(() => {
+      component = {
+        loadOnDemand: new EventEmitter<LoadOnDemandEvent>(),
+      } as ListComponent;
+      loadMoreEmitSpy = spyOn(component.loadOnDemand, 'emit').and.callThrough();
+      component.loadOnDemand.subscribe((_loadMoreEvent: LoadOnDemandEvent) => {});
+    });
+
+    it('should emit load more event, if load on demand is enabled and is not loading', () => {
+      component.isLoadOnDemandEnabled = true;
+      component._isLoading = false;
+
+      listHelper.onLoadOnDemand(component, null);
+
+      expect(component.loadOnDemand.emit).toHaveBeenCalledTimes(1);
+    });
+
+    it('should not emit load more event, if load more is not enabled', () => {
+      component.isLoadOnDemandEnabled = false;
+
+      listHelper.onLoadOnDemand(component, null);
+
+      expect(component.loadOnDemand.emit).not.toHaveBeenCalled();
+    });
+
+    it('should not emit load more event, if is loading', () => {
+      component._isLoading = true;
+
+      listHelper.onLoadOnDemand(component, null);
+
+      expect(component.loadOnDemand.emit).not.toHaveBeenCalled();
+    });
+
+    it('should not emit load more event, if tload on demand is disabled and is loading', () => {
+      component._isLoading = true;
+      component.isLoadOnDemandEnabled = false;
+
+      listHelper.onLoadOnDemand(component, null);
+
+      expect(component.loadOnDemand.emit).not.toHaveBeenCalled();
+    });
+
+    it('should not emit load more event, if load on demand is disabled', () => {
+      component.isLoadOnDemandEnabled = false;
+
+      listHelper.onLoadOnDemand(component, null);
+
+      expect(component.loadOnDemand.emit).not.toHaveBeenCalled();
+    });
+
+    it('should start loading, when before emitting an load more event', () => {
+      component._isLoading = false;
+      component.isLoadOnDemandEnabled = true;
+
+      listHelper.onLoadOnDemand(component, null);
+
+      expect(component._isLoading).toBeTruthy();
+    });
+
+    it('should end loading, if the load more events complete callback is called', () => {
+      component.items = [];
+      loadMoreEmitSpy.and.callFake((event: LoadOnDemandEvent) => {
+        event.complete();
+      });
+
+      listHelper.onLoadOnDemand(component, null);
+
+      expect(component._isLoading).toBeFalsy();
+    });
+
+    it('should be marked as having load on demand disabled, if the load more events complete callback is called with true', () => {
+      loadMoreEmitSpy.and.callFake((event: LoadOnDemandEvent) => {
+        event.complete(true);
+      });
+
+      listHelper.onLoadOnDemand(component, null);
+
+      expect(component.isLoadOnDemandEnabled).toBeFalsy();
+    });
+
+    it('should be marked as having load on demand disabled, if the load more events complete callback is called with false', () => {
+      loadMoreEmitSpy.and.callFake((event: LoadOnDemandEvent) => {
+        event.complete(false);
+      });
+      component.isLoadOnDemandEnabled = true;
+
+      listHelper.onLoadOnDemand(component, null);
+
+      expect(component.isLoadOnDemandEnabled).toBeTruthy();
+    });
+  });
+});

package/src/lib/components/list/helpers/list-helper.ts

@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+
+import { ListComponent } from '../list.component';
+import { LoadOnDemandEventData } from '../list.event';
+
+@Injectable()
+export class ListHelper {
+  onLoadOnDemand(component: ListComponent, _event: LoadOnDemandEventData) {
+    if (component.isLoadOnDemandEnabled && !component._isLoading) {
+      component._isLoading = true;
+      component.loadOnDemand.emit({
+        complete: (disableLoadOnDemand: boolean) => {
+          component.isLoadOnDemandEnabled = !disableLoadOnDemand;
+          component._isLoading = false;
+        },
+      });
+    }
+  }
+}

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

@@ -0,0 +1,21 @@
+export { ListComponent } from './list.component';
+export { ListShape } from './list.component';
+export { ListHeaderComponent } from './list-header/list-header.component';
+export { ListSectionHeaderComponent } from './list-section-header/list-section-header.component';
+export { ListItemComponent } from './list-item/list-item.component';
+export { ListModule } from './list.module';
+export { BoundaryClass } from './list-item/list-item.component';
+
+export { LoadOnDemandEvent } from './list.event';
+export { ListSwipeAction, ListSwipeActionType, ListSwipeEnd } from './list-swipe-action.type';
+
+export { InfiniteScrollDirective } from './directives/infinite-scroll.directive';
+export { ListItemColorDirective } from './directives/list-item-color.directive';
+export { ListHeaderDirective } from './list.directive';
+export { ListItemTemplateDirective } from './list.directive';
+export { ListSectionHeaderDirective } from './list.directive';
+export { ListFooterDirective } from './list.directive';
+
+export { ListExperimentalComponent } from './list-experimental/list-experimental.component';
+
+export { GroupByPipe } from './pipes/group-by.pipe';

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

@@ -0,0 +1,4 @@
+<ng-content select="[outside]"></ng-content>
+<div class="rounded shadow first-item-padding last-item-padding">
+  <ng-content></ng-content>
+</div>