@kirbydesign/designsystem 4.0.19 → 4.0.23

package/lib/components/index.d.ts

@@ -17,6 +17,7 @@ export { GridComponent } from './grid/grid.component';
 export { GridCardConfiguration } from './grid/grid-card-configuration';
 export * from './icon';
 export * from './item';
+export { ItemGroupComponent } from './item-group/item-group.component';
 export * from './loading-overlay';
 export * from './list';
 export * from './reorder-list';

package/lib/components/item-group/item-group.component.d.ts

@@ -0,0 +1,3 @@
+export declare class ItemGroupComponent {
+    role: string;
+}

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,39 @@ 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>;
+    disableSelectionHighlight: boolean;
     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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kirbydesign/designsystem",
-  "version": "4.0.19",
+  "version": "4.0.23",
   "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 ɵbi } 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';
@@ -26,33 +26,35 @@ export { MockGridComponent as ɵx } from './lib/components/mock.grid.component';
 export { MockIconComponent as ɵy } from './lib/components/mock.icon.component';
 export { MockInputCounterComponent as ɵv } from './lib/components/mock.input-counter.component';
 export { MockInputComponent as ɵu } from './lib/components/mock.input.component';
+export { MockItemGroupComponent as ɵbb } from './lib/components/mock.item-group.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 ɵbc } from './lib/components/mock.list-experimental.component';
+export { MockListHeaderComponent as ɵbd } from './lib/components/mock.list-header.component';
+export { MockListItemComponent as ɵbe } from './lib/components/mock.list-item.component';
+export { MockListSectionHeaderComponent as ɵbf } from './lib/components/mock.list-section-header.component';
+export { MockListComponent as ɵbg } from './lib/components/mock.list.component';
+export { MockLoadingOverlayComponent as ɵbh } from './lib/components/mock.loading-overlay.component';
+export { MockModalFooterComponent as ɵbj } from './lib/components/mock.modal-footer.component';
+export { MockPageFooterComponent as ɵbk } from './lib/components/mock.page-footer.component';
+export { MockPageActionsComponent as ɵbs, MockPageActionsDirective as ɵbn, MockPageComponent as ɵbt, MockPageContentComponent as ɵbr, MockPageContentDirective as ɵbo, MockPageProgressComponent as ɵbp, MockPageTitleComponent as ɵbq, MockPageTitleDirective as ɵbl, MockPageToolbarTitleDirective as ɵbm } from './lib/components/mock.page.component';
+export { MockPopoverComponent as ɵbu } from './lib/components/mock.popover.component';
+export { MockProgressCircleComponent as ɵbv } from './lib/components/mock.progress-circle.component';
+export { MockRadioGroupComponent as ɵbw } from './lib/components/mock.radio-group.component';
+export { MockRadioComponent as ɵbx } from './lib/components/mock.radio.component';
+export { MockRangeComponent as ɵby } from './lib/components/mock.range.component';
+export { MockReorderListComponent as ɵbz } from './lib/components/mock.reorder-list.component';
+export { MockRouterOutletComponent as ɵca } from './lib/components/mock.router-outlet.component';
+export { MockSegmentedControlComponent as ɵcb } from './lib/components/mock.segmented-control.component';
+export { MockSlideButtonComponent as ɵcc } from './lib/components/mock.slide-button.component';
+export { MockSpinnerComponent as ɵcd } from './lib/components/mock.spinner.component';
+export { MockTabButtonComponent as ɵce } from './lib/components/mock.tab-button.component';
+export { MockTabsComponent as ɵcf } 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 ɵch } from './lib/components/mock.toggle-button.component';
+export { MockToggleComponent as ɵcg } from './lib/components/mock.toggle.component';
+export { MockAccordionDirective as ɵcl } from './lib/directives/mock.accordion.directive';
+export { MockFitHeadingDirective as ɵck } from './lib/directives/mock.fit-heading.directive';
+export { MockThemeColorDirective as ɵcj } 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 ɵci } from './lib/mock-directives';