@kirbydesign/designsystem 4.0.17 → 4.0.21

package/lib/components/card/card.component.d.ts

@@ -1,4 +1,4 @@
-import { OnInit, ElementRef, Renderer2, OnDestroy } from '@angular/core';
+import { ElementRef, OnDestroy, OnInit, Renderer2 } from '@angular/core';
 import { ResizeObserverService } from '../shared/resize-observer/resize-observer.service';
 export declare class CardComponent implements OnInit, OnDestroy {
     private elementRef;

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

@@ -6,7 +6,6 @@ export { ListItemComponent } from './list-item/list-item.component';
 export { BoundaryClass } from './list-item/list-item.component';
 export { LoadOnDemandEvent } from './list.event';
 export { ListSwipeAction, ListSwipeActionType, ListSwipeEnd } from './list-swipe-action.type';
-export { VirtualScrollerSettings } from './list-virtual-scroll-settings.type';
 export { InfiniteScrollDirective } from './directives/infinite-scroll.directive';
 export { ListItemColorDirective } from './directives/list-item-color.directive';
 export { ListFlexItemDirective } from './list.directive';
@@ -15,4 +14,5 @@ export { ListItemDirective } 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/lib/components/list/list-experimental/list-experimental.component.d.ts

@@ -0,0 +1,2 @@
+export declare class ListExperimentalComponent {
+}

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

@@ -1,12 +1,10 @@
 import { AfterViewInit, EventEmitter, OnChanges, OnInit, TemplateRef, TrackByFunction } from '@angular/core';
-import { IDatasource } from 'ngx-ui-scroll';
 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 { VirtualScrollerSettings } from './list-virtual-scroll-settings.type';
 import { LoadOnDemandEvent, LoadOnDemandEventData } from './list.event';
 import { GroupByPipe } from './pipes/group-by.pipe';
 export declare type ListShape = 'square' | 'rounded' | 'none';
@@ -15,12 +13,30 @@ export declare class ListComponent implements OnInit, AfterViewInit, OnChanges {
     private groupBy;
     list: any;
     scrollDirective: InfiniteScrollDirective;
+    /**
+     * Provide items for the list to render. Items must be provided in the order you expect them to be rendered.
+     */
     items: any[];
     getItemColor: (item: any) => ThemeColor;
+    /**
+     * Callback to determine name of section. Sections will be ordered alphabetically.
+     */
     getSectionName: (item: any) => string;
+    /**
+     * Callback that defines how to track changes for items in the iterable.
+     */
     trackBy: TrackByFunction<any>;
+    /**
+     * Text to display when no more items can be loaded (used for "on demand"-loading).
+     */
     noMoreItemsText: string;
+    /**
+     * Determines if dividers (bottom-border on list items) should be shown or not.
+     */
     showDivider: boolean;
+    /**
+     * Determines if list row text should turn bold on selection
+     */
     markSelectedRow: boolean;
     /**
      * Determine outline shape of:
@@ -33,31 +49,38 @@ export declare class ListComponent implements OnInit, AfterViewInit, OnChanges {
     get isShapeRounded(): boolean;
     get isShapeNone(): boolean;
     hasItemSpacing: boolean;
-    useVirtualScroll: boolean;
-    virtualScrollViewportHeight: number;
-    virtualScrollSettings: VirtualScrollerSettings;
-    virtualScrollTimeout: number;
-    _virtualScrollData: IDatasource;
-    private getVirtualDataset;
-    private getItemsSlice;
     /**
      * Determines if the loadOnDemand event should be emitted.
      * Will default to true if there is at least one subscriber to the loadOnDemand event
      */
     isLoadOnDemandEnabled: boolean;
+    /**
+     * Emitting event when more items are to be loaded.
+     */
     loadOnDemand: 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.
+     */
     swipeActions: ListSwipeAction[];
+    /**
+     * Emitting event when an item is selected (tapped on mobile, clicked on web)
+     */
     itemSelect: EventEmitter<any>;
     kirbyItems: ItemComponent[];
     headerTemplate: TemplateRef<any>;
     sectionHeaderTemplate: TemplateRef<any>;
     footerTemplate: TemplateRef<any>;
+    /**
+     * The first element that matches ListItemDirective.
+     * As a structural directive it unfolds into a template. This is a reference to that.
+     */
     itemTemplate: TemplateRef<any>;
     _isSectionsEnabled: boolean;
     _isSelectable: boolean;
     _isLoading: boolean;
     _groupedItems: any[];
-    _virtualGroupedItems: any[];
     _selectedItem: any;
     constructor(listHelper: ListHelper, groupBy: GroupByPipe);
     ngOnInit(): void;

package/lib/directives/element-as-button/element-as-button.directive.d.ts

@@ -0,0 +1,11 @@
+import { ElementRef, OnInit } from '@angular/core';
+import { CardComponent } from '../../components/card/card.component';
+export declare class ElementAsButtonDirective implements OnInit {
+    private card;
+    private clickableElement;
+    role: string;
+    tabindex: number;
+    constructor(card: CardComponent, clickableElement: ElementRef);
+    ngOnInit(): void;
+    _onKeydownHandler(event: KeyboardEvent): void;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kirbydesign/designsystem",
-  "version": "4.0.17",
+  "version": "4.0.21",
   "dependencies": {
     "chart.js": "3.3.2",
     "chartjs-plugin-annotation": "1.0.2",
@@ -10,7 +10,6 @@
     "date-fns-tz": "1.1.4",
     "highcharts": "8.0.4",
     "@fontsource/roboto": "4.2.1",
-    "ngx-ui-scroll": "^2.0.1",
     "inputmask": "5.0.5",
     "tslib": "^2.0.0"
   },

package/testing-base/kirbydesign-designsystem-testing-base.d.ts

@@ -3,7 +3,7 @@
  */
 export * from './public_api';
 export { MockAccordionItemComponent as ɵb } from './lib/components/mock.accordion-item.component';
-export { MockActionSheetComponent as ɵbg } from './lib/components/mock.action-sheet.component';
+export { MockActionSheetComponent as ɵbh } from './lib/components/mock.action-sheet.component';
 export { MockAppComponent as ɵc } from './lib/components/mock.app.component';
 export { MockAvatarComponent as ɵd } from './lib/components/mock.avatar.component';
 export { MockButtonComponent as ɵe } from './lib/components/mock.button.component';
@@ -28,31 +28,32 @@ export { MockInputCounterComponent as ɵv } from './lib/components/mock.input-co
 export { MockInputComponent as ɵu } from './lib/components/mock.input.component';
 export { MockItemComponent as ɵz } from './lib/components/mock.item.component';
 export { MockLabelComponent as ɵba } from './lib/components/mock.label.component';
-export { MockListHeaderComponent as ɵbb } from './lib/components/mock.list-header.component';
-export { MockListItemComponent as ɵbc } from './lib/components/mock.list-item.component';
-export { MockListSectionHeaderComponent as ɵbd } from './lib/components/mock.list-section-header.component';
-export { MockListComponent as ɵbe } from './lib/components/mock.list.component';
-export { MockLoadingOverlayComponent as ɵbf } from './lib/components/mock.loading-overlay.component';
-export { MockModalFooterComponent as ɵbh } from './lib/components/mock.modal-footer.component';
-export { MockPageFooterComponent as ɵbi } from './lib/components/mock.page-footer.component';
-export { MockPageActionsComponent as ɵbq, MockPageActionsDirective as ɵbl, MockPageComponent as ɵbr, MockPageContentComponent as ɵbp, MockPageContentDirective as ɵbm, MockPageProgressComponent as ɵbn, MockPageTitleComponent as ɵbo, MockPageTitleDirective as ɵbj, MockPageToolbarTitleDirective as ɵbk } from './lib/components/mock.page.component';
-export { MockPopoverComponent as ɵbs } from './lib/components/mock.popover.component';
-export { MockProgressCircleComponent as ɵbt } from './lib/components/mock.progress-circle.component';
-export { MockRadioGroupComponent as ɵbu } from './lib/components/mock.radio-group.component';
-export { MockRadioComponent as ɵbv } from './lib/components/mock.radio.component';
-export { MockRangeComponent as ɵbw } from './lib/components/mock.range.component';
-export { MockReorderListComponent as ɵbx } from './lib/components/mock.reorder-list.component';
-export { MockRouterOutletComponent as ɵby } from './lib/components/mock.router-outlet.component';
-export { MockSegmentedControlComponent as ɵbz } from './lib/components/mock.segmented-control.component';
-export { MockSlideButtonComponent as ɵca } from './lib/components/mock.slide-button.component';
-export { MockSpinnerComponent as ɵcb } from './lib/components/mock.spinner.component';
-export { MockTabButtonComponent as ɵcc } from './lib/components/mock.tab-button.component';
-export { MockTabsComponent as ɵcd } from './lib/components/mock.tabs.component';
+export { MockListExperimentalComponent as ɵbb } from './lib/components/mock.list-experimental.component';
+export { MockListHeaderComponent as ɵbc } from './lib/components/mock.list-header.component';
+export { MockListItemComponent as ɵbd } from './lib/components/mock.list-item.component';
+export { MockListSectionHeaderComponent as ɵbe } from './lib/components/mock.list-section-header.component';
+export { MockListComponent as ɵbf } from './lib/components/mock.list.component';
+export { MockLoadingOverlayComponent as ɵbg } from './lib/components/mock.loading-overlay.component';
+export { MockModalFooterComponent as ɵbi } from './lib/components/mock.modal-footer.component';
+export { MockPageFooterComponent as ɵbj } from './lib/components/mock.page-footer.component';
+export { MockPageActionsComponent as ɵbr, MockPageActionsDirective as ɵbm, MockPageComponent as ɵbs, MockPageContentComponent as ɵbq, MockPageContentDirective as ɵbn, MockPageProgressComponent as ɵbo, MockPageTitleComponent as ɵbp, MockPageTitleDirective as ɵbk, MockPageToolbarTitleDirective as ɵbl } from './lib/components/mock.page.component';
+export { MockPopoverComponent as ɵbt } from './lib/components/mock.popover.component';
+export { MockProgressCircleComponent as ɵbu } from './lib/components/mock.progress-circle.component';
+export { MockRadioGroupComponent as ɵbv } from './lib/components/mock.radio-group.component';
+export { MockRadioComponent as ɵbw } from './lib/components/mock.radio.component';
+export { MockRangeComponent as ɵbx } from './lib/components/mock.range.component';
+export { MockReorderListComponent as ɵby } from './lib/components/mock.reorder-list.component';
+export { MockRouterOutletComponent as ɵbz } from './lib/components/mock.router-outlet.component';
+export { MockSegmentedControlComponent as ɵca } from './lib/components/mock.segmented-control.component';
+export { MockSlideButtonComponent as ɵcb } from './lib/components/mock.slide-button.component';
+export { MockSpinnerComponent as ɵcc } from './lib/components/mock.spinner.component';
+export { MockTabButtonComponent as ɵcd } from './lib/components/mock.tab-button.component';
+export { MockTabsComponent as ɵce } from './lib/components/mock.tabs.component';
 export { MockTextareaComponent as ɵw } from './lib/components/mock.textarea.component';
-export { MockToggleButtonComponent as ɵcf } from './lib/components/mock.toggle-button.component';
-export { MockToggleComponent as ɵce } from './lib/components/mock.toggle.component';
-export { MockAccordionDirective as ɵcj } from './lib/directives/mock.accordion.directive';
-export { MockFitHeadingDirective as ɵci } from './lib/directives/mock.fit-heading.directive';
-export { MockThemeColorDirective as ɵch } from './lib/directives/mock.theme-color.directive';
+export { MockToggleButtonComponent as ɵcg } from './lib/components/mock.toggle-button.component';
+export { MockToggleComponent as ɵcf } from './lib/components/mock.toggle.component';
+export { MockAccordionDirective as ɵck } from './lib/directives/mock.accordion.directive';
+export { MockFitHeadingDirective as ɵcj } from './lib/directives/mock.fit-heading.directive';
+export { MockThemeColorDirective as ɵci } from './lib/directives/mock.theme-color.directive';
 export { MOCK_COMPONENTS as ɵa } from './lib/mock-components';
-export { MOCK_DIRECTIVES as ɵcg } from './lib/mock-directives';
+export { MOCK_DIRECTIVES as ɵch } from './lib/mock-directives';