@kirbydesign/designsystem 0.0.0

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

@@ -0,0 +1,6 @@
+@use '~@kirbydesign/core/src/scss/utils';
+@use '~@kirbydesign/core/src/scss/base/list';
+
+:host {
+  display: block;
+}

package/src/lib/components/list/list-experimental/list-experimental.component.spec.ts

@@ -0,0 +1,112 @@
+import { IonItem, IonList } from '@ionic/angular';
+import { createHostFactory, SpectatorHost } from '@ngneat/spectator';
+import { MockComponent } from 'ng-mocks';
+
+import { DesignTokenHelper } from '../../../helpers';
+import { ItemComponent } from '../../item';
+
+import { ListExperimentalComponent } from './list-experimental.component';
+
+const borderRadius = DesignTokenHelper.borderRadius();
+const { getElevation } = DesignTokenHelper;
+
+describe('ListExperimental', () => {
+  let spectator: SpectatorHost<ListExperimentalComponent>;
+
+  const createHost = createHostFactory({
+    component: ListExperimentalComponent,
+    declarations: [
+      ListExperimentalComponent,
+      MockComponent(IonList),
+      MockComponent(IonItem),
+      MockComponent(ItemComponent),
+    ],
+  });
+
+  describe('with slotted kirby-item elements', () => {
+    let listContent: HTMLElement;
+    let items: HTMLElement[];
+
+    beforeEach(() => {
+      spectator = createHost<ListExperimentalComponent>(`
+      <kirby-list-experimental>
+        <kirby-item>Test Item</kirby-item>
+        <kirby-item>Test Item</kirby-item>
+        <kirby-item>Test Item</kirby-item>
+        <kirby-item>Test Item</kirby-item>
+      </kirby-list-experimental>`);
+
+      items = spectator.queryHostAll('kirby-item');
+      listContent = items[0].parentElement;
+      expect(listContent).not.toBeUndefined();
+    });
+
+    it('should create', () => {
+      expect(spectator.component).toBeTruthy();
+    });
+
+    it('should render items in list', () => {
+      expect(items).toHaveLength(4);
+    });
+
+    it('should apply rounded corners to the list content', () => {
+      expect(listContent).toHaveComputedStyle({
+        'border-radius': borderRadius,
+        overflow: 'hidden',
+      });
+    });
+
+    it('should apply correct elevation to the list content', () => {
+      const correctElevation = getElevation(2);
+      expect(listContent).toHaveComputedStyle({
+        'box-shadow': correctElevation,
+      });
+    });
+
+    it('should not apply --item-padding-top/bottom to items that are not first or last', () => {
+      items.forEach((item, index) => {
+        if (index === items.length - 1 || index === 0) return;
+        expect(item).toHaveComputedStyle({
+          '--item-padding-top': '',
+          '--item-padding-bottom': '',
+        });
+      });
+    });
+
+    it('should apply correct --item-padding-top to the first item', () => {
+      const correctPadding = DesignTokenHelper.size('xxs');
+      expect(items[0]).toHaveComputedStyle({
+        '--item-padding-top': correctPadding,
+      });
+    });
+
+    it('should apply correct --item-padding-bottom to the last item', () => {
+      const correctPadding = DesignTokenHelper.size('xxs');
+      expect(items[items.length - 1]).toHaveComputedStyle({
+        '--item-padding-bottom': correctPadding,
+      });
+    });
+  });
+
+  describe('with content in the "outside" slot', () => {
+    let listContent: HTMLElement;
+
+    beforeEach(() => {
+      spectator = createHost<ListExperimentalComponent>(`
+      <kirby-list-experimental>
+        <div id="slotted-outside" outside>Hello</div>
+        <div id="slotted-default">List item</div>
+      </kirby-list-experimental>`);
+      listContent = spectator.queryHost('#slotted-default').parentElement;
+      expect(listContent).not.toBeUndefined();
+    });
+
+    it('should place slotted content above the list-content', () => {
+      const { previousElementSibling } = listContent;
+      console.log(previousElementSibling);
+      console.log(listContent);
+
+      expect(previousElementSibling.id).toEqual('slotted-outside');
+    });
+  });
+});

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

@@ -0,0 +1,21 @@
+import { ChangeDetectionStrategy, Component, HostListener, ViewChild } from '@angular/core';
+import { IonList } from '@ionic/angular';
+
+import { elementHasAncestor } from '../../../helpers/element-has-ancestor';
+
+@Component({
+  selector: 'kirby-list-experimental',
+  templateUrl: './list-experimental.component.html',
+  styleUrls: ['./list-experimental.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ListExperimentalComponent {
+  @ViewChild(IonList, { static: true }) list: IonList;
+
+  @HostListener('click', ['$event'])
+  closeAllSlidingItems(e: MouseEvent) {
+    if (elementHasAncestor(e.target as HTMLElement, 'ion-item-option', 'ion-list')) {
+      this.list.closeSlidingItems();
+    }
+  }
+}

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

@@ -0,0 +1 @@
+<ng-content></ng-content>

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

@@ -0,0 +1,10 @@
+@use '~@kirbydesign/core/src/scss/utils';
+
+:host {
+  background-color: transparent;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 100%;
+  padding: utils.size('m');
+}

package/src/lib/components/list/list-header/list-header.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { ListHeaderComponent } from './list-header.component';
+
+describe('ListHeaderComponent', () => {
+  let component: ListHeaderComponent;
+  let fixture: ComponentFixture<ListHeaderComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ListHeaderComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ListHeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/list/list-header/list-header.component.ts

@@ -0,0 +1,11 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'kirby-list-header',
+  templateUrl: './list-header.component.html',
+  styleUrls: ['./list-header.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ListHeaderComponent {
+  constructor() {}
+}

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

@@ -0,0 +1,39 @@
+<ion-item-sliding
+  [class.selected]="isSelected"
+  [kirbyListItemColor]="getItemColor"
+  [item]="item"
+  [disabled]="_isSwipingEnabled ? null : true"
+  keyHandler
+  [ngClass]="boundaryClass"
+  (click)="_onItemSelect(item)"
+>
+  <ng-container
+    *ngTemplateOutlet="swipeActionsTemplate; context: { $implicit: item }"
+  ></ng-container>
+  <ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: item }"></ng-container>
+</ion-item-sliding>
+
+<ng-template #swipeActionsTemplate let-item>
+  <ion-item-options *ngIf="_hasSwipeActions(item)" [side]="_getSwipeActionEnd(item)">
+    <div class="swipe-action">
+      <ng-container *ngFor="let swipeAction of _getSwipeActions(item)">
+        <ion-item-option
+          [ngClass]="_getSwipeActionType(swipeAction, item)"
+          (click)="_onSwipeActionSelect(swipeAction, item, $event)"
+        >
+          <div class="item-content">
+            <kirby-icon
+              *ngIf="_getSwipeActionIcon(swipeAction, item)"
+              size="sm"
+              [name]="_getSwipeActionIcon(swipeAction, item)"
+            >
+            </kirby-icon>
+            <ion-label>
+              {{ _getSwipeActionTitle(swipeAction, item) }}
+            </ion-label>
+          </div>
+        </ion-item-option>
+      </ng-container>
+    </div>
+  </ion-item-options>
+</ng-template>

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

@@ -0,0 +1,13 @@
+@use '~@kirbydesign/core/src/scss/utils';
+
+$divider-color: utils.get-color('background-color');
+
+:host {
+  overflow: hidden;
+}
+
+:host-context(.has-divider) {
+  ion-item-sliding:not(.last) {
+    border-bottom: 1px solid $divider-color;
+  }
+}

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

@@ -0,0 +1,144 @@
+import {
+  AfterViewInit,
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+  TemplateRef,
+  ViewChild,
+} from '@angular/core';
+import { IonItemSliding } from '@ionic/angular';
+
+import { ThemeColor } from '@kirbydesign/core';
+
+import { PlatformService } from '../../../helpers/platform.service';
+import { ListSwipeAction, ListSwipeDirection, ListSwipeEnd } from '../list-swipe-action.type';
+
+export type BoundaryClass = 'first' | 'last';
+
+@Component({
+  selector: 'kirby-list-item',
+  templateUrl: './list-item.component.html',
+  styleUrls: ['../list.component.scss', './list-item.component.scss'],
+})
+export class ListItemComponent implements OnInit, AfterViewInit {
+  _isSwipingEnabled = false;
+
+  constructor(private platform: PlatformService) {
+    this.initializeSwipeActions();
+  }
+
+  @ViewChild(IonItemSliding) ionItemSliding: IonItemSliding;
+
+  @Input() item: any;
+
+  @Input() boundaryClass: BoundaryClass;
+
+  @Input() swipeActions: ListSwipeAction[] = [];
+
+  @Input() itemTemplate: TemplateRef<any>;
+
+  @Input() isSelected: boolean;
+
+  @Input() isSelectable: boolean;
+
+  @Input() getItemColor: (item: any) => ThemeColor;
+
+  @Output() itemSelect = new EventEmitter<any>();
+
+  _onItemSelect(item: any) {
+    if (!this.isSelectable) return;
+    this.itemSelect.emit(item);
+  }
+
+  @Output() swipeActionSelect = new EventEmitter<any>();
+
+  _onSwipeActionSelect(swipeAction, item, event) {
+    this.swipeActionSelect.emit({
+      swipeAction,
+      item,
+      event,
+    });
+  }
+
+  ngOnInit() {
+    this.initializeSwipeActions();
+  }
+
+  ngAfterViewInit(): void {
+    if (!this.itemTemplate) {
+      console.warn('No item template was provided.');
+    }
+  }
+
+  _hasSwipeActions(item: any): boolean {
+    if (!Array.isArray(this.swipeActions)) {
+      return false;
+    }
+    return this.swipeActions.some((swipeAction) => {
+      if (swipeAction.isDisabled instanceof Function && swipeAction.isDisabled(item)) {
+        return false;
+      }
+      if (swipeAction.isDisabled === true) {
+        return false;
+      }
+      return swipeAction.position === 'left' || swipeAction.position === 'right';
+    });
+  }
+
+  _getSwipeActions(item: any, direction?: ListSwipeDirection): ListSwipeAction[] {
+    if (!Array.isArray(this.swipeActions)) {
+      return [];
+    }
+    return this.swipeActions.filter((swipeAction) => {
+      if (this.isSwipeActionDisabled(swipeAction, item)) {
+        return false;
+      }
+      return direction ? swipeAction.position === direction : true;
+    });
+  }
+
+  private isSwipeActionDisabled(swipeAction: ListSwipeAction, item: any): boolean {
+    if (swipeAction.isDisabled instanceof Function && swipeAction.isDisabled(item)) {
+      return true;
+    }
+    return swipeAction.isDisabled === true;
+  }
+
+  _getSwipeActionEnd(item: any): ListSwipeEnd {
+    if (this._getSwipeActions(item, 'left').length) {
+      return 'start';
+    }
+    return 'end';
+  }
+
+  _getSwipeActionIcon(swipeAction: ListSwipeAction, item: any): string {
+    if (!swipeAction.icon) return;
+
+    if (swipeAction.icon instanceof Function) {
+      return swipeAction.icon(item);
+    }
+    return swipeAction.icon;
+  }
+
+  _getSwipeActionTitle(swipeAction: ListSwipeAction, item: any): string {
+    if (swipeAction.title instanceof Function) {
+      return swipeAction.title(item);
+    }
+    return swipeAction.title;
+  }
+
+  _getSwipeActionType(swipeAction: ListSwipeAction, item: any): ThemeColor {
+    if (swipeAction.type instanceof Function) {
+      return swipeAction.type(item);
+    }
+    return swipeAction.type;
+  }
+
+  private initializeSwipeActions(): void {
+    if (this.swipeActions && this.swipeActions.length) {
+      this._isSwipingEnabled = this.platform.isTouch();
+    }
+  }
+}

package/src/lib/components/list/list-section-header/list-section-header.component.html

@@ -0,0 +1,3 @@
+<div class="header">
+  <span class="kirby-text-small">{{ title }}</span>
+</div>

package/src/lib/components/list/list-section-header/list-section-header.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { ListSectionHeaderComponent } from './list-section-header.component';
+
+describe('ListSectionHeaderComponent', () => {
+  let component: ListSectionHeaderComponent;
+  let fixture: ComponentFixture<ListSectionHeaderComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ListSectionHeaderComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ListSectionHeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/list/list-section-header/list-section-header.component.ts

@@ -0,0 +1,13 @@
+import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'kirby-list-section-header',
+  templateUrl: './list-section-header.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ListSectionHeaderComponent implements OnInit {
+  @Input() title: string;
+  constructor() {}
+
+  ngOnInit() {}
+}

package/src/lib/components/list/list-swipe-action.ts

@@ -0,0 +1,2 @@
+/* Re-export for backwards compatibility */
+export { ListSwipeAction } from './list-swipe-action.type';

package/src/lib/components/list/list-swipe-action.type.ts

@@ -0,0 +1,23 @@
+import {
+  ItemSlidingSide as ListSwipeDirection,
+  ItemSwipeAction,
+} from '../item-sliding/item-sliding.types';
+
+// Copy each property in ItemSwipeAction but make it possible to provide them via a function.
+type ListSwipeActionBaseTypes = Pick<ItemSwipeAction, 'title' | 'icon' | 'type' | 'isDisabled'>;
+export type ListSwipeAction = {
+  [Property in keyof ListSwipeActionBaseTypes]:
+    | ((item: any) => ListSwipeActionBaseTypes[Property])
+    | ListSwipeActionBaseTypes[Property];
+} & {
+  position: ListSwipeDirection;
+  onSelected: (item: any) => void;
+};
+
+// To not break old imports relying on ListSwipeActionType
+export {
+  ItemSwipeActionType as ListSwipeActionType,
+  ItemSwipeActionSlots as ListSwipeEnd,
+} from '../item-sliding/item-sliding.types';
+
+export { ListSwipeDirection };

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

@@ -0,0 +1,65 @@
+<ion-list
+  #list
+  kirbyInfiniteScroll
+  (scrollEnd)="_onLoadOnDemand()"
+  [disabled]="!isLoadOnDemandEnabled"
+  class="list"
+  [class.has-header]="headerTemplate"
+  [class.has-footer]="footerTemplate"
+  [class.has-divider]="showDivider"
+>
+  <ion-list-header *ngIf="headerTemplate">
+    <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
+  </ion-list-header>
+
+  <ng-container
+    *ngTemplateOutlet="
+      _isSectionsEnabled ? groupedListTemplate : itemsTemplate;
+      context: { $implicit: items }
+    "
+  ></ng-container>
+
+  <div *ngIf="footerTemplate" class="footer">
+    <ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
+  </div>
+</ion-list>
+
+<p *ngIf="!isLoadOnDemandEnabled && noMoreItemsText" class="no-more-items">
+  {{ noMoreItemsText }}
+</p>
+<div *ngIf="_isLoading" class="loading">
+  <kirby-spinner></kirby-spinner>
+</div>
+
+<ng-template #groupedListTemplate>
+  <ion-item-group *ngFor="let section of _groupedItems; trackBy: sectionTrackBy">
+    <ion-item-divider>
+      <ng-container
+        *ngTemplateOutlet="sectionHeaderTemplate; context: { $implicit: section.name }"
+      ></ng-container>
+    </ion-item-divider>
+
+    <div class="list-items">
+      <ng-container
+        *ngTemplateOutlet="itemsTemplate; context: { $implicit: section.items }"
+      ></ng-container>
+    </div>
+  </ion-item-group>
+</ng-template>
+
+<ng-template #itemsTemplate let-items>
+  <kirby-list-item
+    *ngFor="let item of items; let i = index; trackBy: trackBy || defaultTrackBy"
+    [item]="item"
+    [itemTemplate]="itemTemplate"
+    [swipeActions]="swipeActions"
+    [boundaryClass]="_getBoundaryClass(i, items)"
+    [isSelectable]="_isSelectable"
+    [getItemColor]="getItemColor"
+    [isSelected]="_isSelectable && item === _selectedItem"
+    (itemSelect)="onItemSelect($event)"
+    (swipeActionSelect)="onSwipeActionSelect($event)"
+    [class.is-single]="items.length === 1"
+  >
+  </kirby-list-item>
+</ng-template>