@kirbydesign/designsystem 0.0.0

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

@@ -0,0 +1,213 @@
+import {
+  AfterViewInit,
+  Component,
+  ContentChild,
+  ContentChildren,
+  EventEmitter,
+  HostBinding,
+  Input,
+  OnChanges,
+  OnInit,
+  Output,
+  TemplateRef,
+  TrackByFunction,
+  ViewChild,
+} from '@angular/core';
+
+import { ThemeColor } from '@kirbydesign/core';
+
+import { ItemComponent } from '../item/item.component';
+
+import { InfiniteScrollDirective } from './directives/infinite-scroll.directive';
+import { ListHelper } from './helpers/list-helper';
+import { BoundaryClass } from './list-item/list-item.component';
+import { ListSwipeAction } from './list-swipe-action.type';
+import {
+  ListFooterDirective,
+  ListHeaderDirective,
+  ListItemTemplateDirective,
+  ListSectionHeaderDirective,
+} from './list.directive';
+import { LoadOnDemandEvent, LoadOnDemandEventData } from './list.event';
+import { GroupByPipe } from './pipes/group-by.pipe';
+
+export type ListShape = 'square' | 'rounded' | 'none';
+
+@Component({
+  selector: 'kirby-list',
+  templateUrl: './list.component.html',
+  styleUrls: ['./list.component.scss'],
+  providers: [ListHelper, GroupByPipe],
+})
+export class ListComponent implements OnInit, AfterViewInit, OnChanges {
+  @ViewChild('list', { static: true }) list: any;
+  @ViewChild(InfiniteScrollDirective) scrollDirective: InfiniteScrollDirective;
+
+  /**
+   * Provide items for the list to render. Items must be provided in the order you expect them to be rendered.
+   */
+  @Input()
+  items: any[] = [];
+
+  @Input() getItemColor: (item: any) => ThemeColor;
+
+  /**
+   * Callback to determine name of section. Sections will be ordered alphabetically.
+   */
+  @Input() getSectionName: (item: any) => string;
+
+  /**
+   * Callback that defines how to track changes for items in the iterable.
+   */
+  @Input() trackBy: TrackByFunction<any>;
+
+  /**
+   * Text to display when no more items can be loaded (used for "on demand"-loading).
+   */
+  @Input() noMoreItemsText: string;
+
+  /**
+   * Determines if dividers (bottom-border on list items) should be shown or not.
+   */
+  @Input() showDivider = false;
+
+  /**
+   * Determines if list row text should turn bold on selection
+   */
+  @Input() markSelectedRow = false;
+
+  /**
+   * Determine outline shape of:
+   * - list, if {@link #isSectionsEnabled} is `false`
+   * - section, if {@link #isSectionsEnabled} is `true`
+   *
+   * `square` means **without** rounded corners, `rounded` means **with** rounded corners.,  `none` means **without** padding, border, box-shadow and background.
+   */
+  @Input() shape: ListShape = 'rounded';
+
+  @HostBinding('class.shape-rounded')
+  public get isShapeRounded(): boolean {
+    return this.shape === 'rounded';
+  }
+
+  @HostBinding('class.shape-none')
+  public get isShapeNone(): boolean {
+    return this.shape === 'none';
+  }
+
+  @HostBinding('class.item-spacing')
+  @Input()
+  hasItemSpacing: boolean;
+
+  /**
+   * Determines if the loadOnDemand event should be emitted.
+   * Will default to true if there is at least one subscriber to the loadOnDemand event
+   */
+  @Input() isLoadOnDemandEnabled: boolean;
+
+  /**
+   * Emitting event when more items are to be loaded.
+   */
+  @Output() loadOnDemand = new EventEmitter<LoadOnDemandEvent>();
+
+  /**
+   * Determines if list items should have swipe actions or not
+   * - the order of swipe actions is used to determine edge actions,
+   * as well as their order of appearance on the screen.
+   */
+  @Input() swipeActions: ListSwipeAction[] = [];
+
+  /**
+   * Emitting event when an item is selected (tapped on mobile, clicked on web)
+   */
+  @Output() itemSelect = new EventEmitter<any>();
+
+  @Input() disableSelectionHighlight: boolean = false;
+
+  @ContentChildren(ItemComponent)
+  kirbyItems: ItemComponent[];
+
+  @ContentChild(ListHeaderDirective, { static: false, read: TemplateRef })
+  headerTemplate: TemplateRef<any>;
+
+  @ContentChild(ListSectionHeaderDirective, { static: false, read: TemplateRef })
+  sectionHeaderTemplate: TemplateRef<any>;
+
+  @ContentChild(ListFooterDirective, { static: false, read: TemplateRef })
+  footerTemplate: TemplateRef<any>;
+
+  /**
+   * The first element that matches ListItemDirective.
+   * As a structural directive it unfolds into a template. This is a reference to that.
+   */
+  @ContentChild(ListItemTemplateDirective, { static: true, read: TemplateRef })
+  itemTemplate: TemplateRef<any>;
+
+  @HostBinding('class.has-sections') _isSectionsEnabled: boolean;
+
+  _isSelectable: boolean;
+  _isLoading: boolean;
+  _groupedItems: any[];
+  _selectedItem: any;
+
+  constructor(private listHelper: ListHelper, private groupBy: GroupByPipe) {}
+
+  ngOnInit() {
+    this._isSelectable = this.itemSelect.observers.length > 0;
+
+    if (this.isLoadOnDemandEnabled === undefined) {
+      this.isLoadOnDemandEnabled = this.loadOnDemand.observers.length > 0;
+    }
+  }
+
+  ngAfterViewInit(): void {
+    if (this._isSelectable) {
+      setTimeout(() => {
+        this.kirbyItems.forEach((item) => {
+          item.selectable = true;
+        });
+      });
+    }
+  }
+
+  ngOnChanges(): void {
+    this._isSectionsEnabled = !!this.getSectionName;
+    this._groupedItems = this._isSectionsEnabled
+      ? this.groupBy.transform(this.items, this.getSectionName)
+      : null;
+  }
+
+  _onLoadOnDemand(event?: LoadOnDemandEventData) {
+    this.listHelper.onLoadOnDemand(this, event);
+  }
+
+  defaultTrackBy(index: number): any {
+    return index;
+  }
+
+  sectionTrackBy(_: number, section: { name: string }): string {
+    return section.name;
+  }
+
+  onItemSelect(item: any) {
+    if (!this.disableSelectionHighlight) {
+      this._selectedItem = item;
+    }
+    this.itemSelect.emit(item);
+  }
+
+  onSwipeActionSelect(args: any): void {
+    args.swipeAction.onSelected(args.item);
+    this.list.closeSlidingItems();
+    args.event.stopPropagation();
+  }
+
+  _getBoundaryClass(index: number, section?: any[]): BoundaryClass {
+    let _items = section || this.items;
+
+    if (index === 0 || _items[index - 1]?.headingName) return this.headerTemplate ? null : 'first';
+
+    if (index === _items.length - 1 || _items[index + 1]?.headingName)
+      return this.footerTemplate ? null : 'last';
+  }
+}

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

@@ -0,0 +1,21 @@
+import { Directive } from '@angular/core';
+
+@Directive({
+  selector: '[kirbyListItemTemplate]',
+})
+export class ListItemTemplateDirective {}
+
+@Directive({
+  selector: '[kirbyListHeader], [kirbyListHeaderTemplate]',
+})
+export class ListHeaderDirective {}
+
+@Directive({
+  selector: '[kirbyListSectionHeader], [kirbyListSectionHeaderTemplate]',
+})
+export class ListSectionHeaderDirective {}
+
+@Directive({
+  selector: '[kirbyListFooter], [kirbyListFooterTemplate]',
+})
+export class ListFooterDirective {}

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

@@ -0,0 +1,8 @@
+export interface LoadOnDemandEvent {
+  complete: (disableLoadOnDemand?: boolean) => void;
+}
+
+export interface LoadOnDemandEventData {
+  object: any;
+  returnValue: any;
+}

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

@@ -0,0 +1,47 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
+
+import { IconModule } from '../icon/icon.module';
+import { SpinnerModule } from '../spinner/spinner.module';
+
+import { InfiniteScrollDirective } from './directives/infinite-scroll.directive';
+import { ListItemColorDirective } from './directives/list-item-color.directive';
+import { ListExperimentalComponent } from './list-experimental/list-experimental.component';
+import { ListHeaderComponent } from './list-header/list-header.component';
+import { ListItemComponent } from './list-item/list-item.component';
+import { ListSectionHeaderComponent } from './list-section-header/list-section-header.component';
+import { ListComponent } from './list.component';
+import {
+  ListFooterDirective,
+  ListHeaderDirective,
+  ListItemTemplateDirective,
+  ListSectionHeaderDirective,
+} from './list.directive';
+
+const exportedDeclarations = [
+  ListComponent,
+  ListItemComponent,
+  ListItemTemplateDirective,
+  ListSectionHeaderComponent,
+  ListSectionHeaderDirective,
+  ListHeaderDirective,
+  ListHeaderComponent,
+  ListFooterDirective,
+  ListExperimentalComponent,
+];
+
+const declarations = [
+  ...exportedDeclarations,
+  ListItemColorDirective,
+  InfiniteScrollDirective,
+  ListItemComponent,
+];
+
+@NgModule({
+  declarations: declarations,
+  imports: [CommonModule, IconModule, IonicModule, SpinnerModule],
+  exports: exportedDeclarations,
+  providers: [],
+})
+export class ListModule {}

package/src/lib/components/list/pipes/group-by.pipe.spec.ts

@@ -0,0 +1,71 @@
+import { GroupByPipe } from './group-by.pipe';
+
+describe('Pipe: GroupBy', () => {
+  it('create an instance', () => {
+    const pipe = new GroupByPipe();
+    expect(pipe).toBeTruthy();
+  });
+
+  it('should return collection if no callback is given', () => {
+    const pipe = new GroupByPipe();
+    const collection = [{ id: 1 }, { id: 2 }, { id: 3 }];
+
+    const result = pipe.transform(collection);
+
+    expect(result).toEqual(collection);
+  });
+
+  it('should section list by callback function', () => {
+    const callback = (item: any) => {
+      return item.title;
+    };
+    const collection = [
+      {
+        title: 'section 1',
+        value: 1,
+      },
+      {
+        title: 'section 2',
+        value: 2,
+      },
+      {
+        title: 'section 3',
+        value: 3,
+      },
+    ];
+    const pipe = new GroupByPipe();
+
+    const result = pipe.transform(collection, callback);
+
+    expect(result.length).toBe(3);
+    result.forEach((section: any, index: number) => {
+      expect(section.items.length).toBe(1);
+      expect(section.items[0]).toEqual(collection[index]);
+    });
+  });
+
+  it('should order sections by alphabetical order', () => {
+    const callback = (item: any) => {
+      return item.title;
+    };
+    const collection = [
+      {
+        title: 'section 202',
+        value: 1,
+      },
+      {
+        title: 'section 1',
+        value: 2,
+      },
+      {
+        title: 'section 44',
+        value: 3,
+      },
+    ];
+    const pipe = new GroupByPipe();
+    const result = pipe.transform(collection, callback);
+    expect(result[0].name).toEqual('section 1');
+    expect(result[1].name).toEqual('section 202');
+    expect(result[2].name).toEqual('section 44');
+  });
+});

package/src/lib/components/list/pipes/group-by.pipe.ts

@@ -0,0 +1,34 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'groupBy',
+})
+export class GroupByPipe implements PipeTransform {
+  transform(items: any[], getGroupName?: (item: any) => string): any[] {
+    if (!items) {
+      return null;
+    }
+    if (!getGroupName) {
+      return items;
+    }
+
+    const groupsMap = new Map<string, any[]>();
+
+    items.forEach((item: any) => {
+      const itemGroup = getGroupName(item);
+      const groupItems = groupsMap.get(itemGroup);
+
+      if (groupItems) {
+        groupItems.push(item);
+      } else {
+        groupsMap.set(itemGroup, [item]);
+      }
+    });
+
+    return Array.from(groupsMap)
+      .sort(([name], [otherName]) => name.localeCompare(otherName))
+      .map(([name, items]) => {
+        return { name, items };
+      });
+  }
+}

package/src/lib/components/loading-overlay/index.ts

@@ -0,0 +1,2 @@
+export { LoadingOverlayService } from './loading-overlay.service';
+export { LoadingOverlayComponent } from './loading-overlay.component';

package/src/lib/components/loading-overlay/loading-overlay.component.html

@@ -0,0 +1,8 @@
+<div class="overlay-wrapper">
+  <div *ngIf="isLoading" [class.backdrop]="showBackdrop" class="spinner-wrapper">
+    <kirby-spinner class="spinner"></kirby-spinner>
+  </div>
+  <div class="content-wrapper">
+    <ng-content></ng-content>
+  </div>
+</div>

package/src/lib/components/loading-overlay/loading-overlay.component.scss

@@ -0,0 +1,37 @@
+@use '~@kirbydesign/core/src/scss/utils';
+
+:host {
+  display: block;
+  min-height: utils.size('l');
+}
+
+.overlay-wrapper {
+  min-height: inherit;
+  height: 100%;
+  width: 100%;
+  position: relative;
+
+  .spinner-wrapper {
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    z-index: utils.z('loading-overlay');
+    display: flex;
+    background: transparent;
+    justify-content: center;
+    align-items: center;
+    justify-items: center;
+
+    &.backdrop {
+      background-color: rgba(
+        utils.get-color('background-color', $getValueOnly: true),
+        utils.$loading-overlay-backdrop-opacity
+      );
+    }
+
+    .spinner {
+      width: utils.size(l);
+      height: utils.size(l);
+    }
+  }
+}

package/src/lib/components/loading-overlay/loading-overlay.component.ts

@@ -0,0 +1,12 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'kirby-loading-overlay',
+  templateUrl: './loading-overlay.component.html',
+  styleUrls: ['./loading-overlay.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class LoadingOverlayComponent {
+  @Input() public isLoading = true;
+  @Input() public showBackdrop = true;
+}

package/src/lib/components/loading-overlay/loading-overlay.service.ts

@@ -0,0 +1,44 @@
+import { ComponentFactoryResolver, Injectable, Injector } from '@angular/core';
+import { LoadingController } from '@ionic/angular';
+
+import { SpinnerComponent } from '../spinner/spinner.component';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class LoadingOverlayService {
+  private ionLoading: HTMLIonLoadingElement = null;
+
+  constructor(
+    private loadingController: LoadingController,
+    private componentFactoryResolver: ComponentFactoryResolver,
+    private injector: Injector
+  ) {}
+
+  public async showLoadingOverlay(showBackdrop: boolean = true): Promise<void> {
+    if (!this.ionLoading) {
+      this.ionLoading = await this.loadingController.create({
+        cssClass: 'kirby-loading-overlay',
+        duration: 0,
+        message: null,
+        showBackdrop: showBackdrop,
+        spinner: null,
+      });
+
+      const loadingWrapper = this.ionLoading.querySelector('.loading-wrapper');
+      const kirbySpinner = document.createElement('kirby-spinner');
+      const factory = this.componentFactoryResolver.resolveComponentFactory(SpinnerComponent);
+      factory.create(this.injector, [], kirbySpinner);
+      loadingWrapper.appendChild(kirbySpinner);
+
+      await this.ionLoading.present();
+    }
+  }
+
+  public async hideLoadingOverlay(): Promise<void> {
+    if (!!this.ionLoading) {
+      await this.ionLoading.dismiss();
+      this.ionLoading = null;
+    }
+  }
+}

package/src/lib/components/modal/action-sheet/action-sheet.component.html

@@ -0,0 +1,24 @@
+<kirby-card>
+  <kirby-card-header *ngIf="header" [title]="header" [isTitleBold]="true" [subtitle]="subheader">
+  </kirby-card-header>
+  <button
+    kirby-button
+    expand="block"
+    size="lg"
+    attentionLevel="4"
+    (click)="onItemSelect(item)"
+    *ngFor="let item of items"
+  >
+    {{ item.text }}
+  </button>
+</kirby-card>
+<button
+  *ngIf="!hideCancel"
+  kirby-button
+  class="cancel-btn"
+  size="lg"
+  attentionLevel="2"
+  (click)="onCancel()"
+>
+  {{ cancelButtonText }}
+</button>

package/src/lib/components/modal/action-sheet/action-sheet.component.scss

@@ -0,0 +1,47 @@
+@use '~@kirbydesign/core/src/scss/utils';
+
+$margin-horizontal: utils.size('l');
+$margin-horizontal-narrow: utils.size('s');
+$max-width: 375px;
+
+:host {
+  --kirby-internal-margin-horizontal-default: #{$margin-horizontal};
+  @include utils.media('<small') {
+    --kirby-internal-margin-horizontal-default: #{$margin-horizontal-narrow};
+  }
+
+  --kirby-internal-margin-horizontal-total: calc(
+    2 * var(--kirby-action-sheet-margin-horizontal, var(--kirby-internal-margin-horizontal-default))
+  );
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  margin: 0 auto;
+  width: calc(100vw - var(--kirby-internal-margin-horizontal-total));
+  max-width: calc(#{$max-width} - var(--kirby-internal-margin-horizontal-total));
+}
+
+kirby-card {
+  align-self: stretch;
+  pointer-events: auto;
+  box-shadow: utils.get-elevation(8);
+
+  button[kirby-button] {
+    margin: 0;
+    border-radius: 0;
+
+    &:not(:focus) {
+      border-top: 1px solid utils.get-color('background-color');
+    }
+  }
+}
+
+.cancel-btn {
+  font-weight: utils.font-weight('bold');
+  margin-top: utils.size('s');
+  margin-bottom: utils.size('m');
+  pointer-events: auto;
+  box-shadow: utils.get-elevation(8);
+}