@kirbydesign/designsystem 8.2.0-rc.2 → 8.3.0

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@kirbydesign/designsystem",
-  "version": "8.2.0-rc.2",
+  "version": "8.3.0",
   "dependencies": {
     "@floating-ui/dom": "^1.1.0",
     "@fontsource/roboto": "4.2.1",
     "@ionic/angular": "6.2.1",
-    "@kirbydesign/core": "0.0.44",
+    "@kirbydesign/core": "0.0.46",
     "inputmask": "5.0.5",
     "tslib": "^2.3.0"
   },
@@ -261,6 +261,14 @@
       "node": "./fesm2015/kirbydesign-designsystem-loading-overlay.mjs",
       "default": "./fesm2020/kirbydesign-designsystem-loading-overlay.mjs"
     },
+    "./menu": {
+      "types": "./menu/index.d.ts",
+      "esm2020": "./esm2020/menu/kirbydesign-designsystem-menu.mjs",
+      "es2020": "./fesm2020/kirbydesign-designsystem-menu.mjs",
+      "es2015": "./fesm2015/kirbydesign-designsystem-menu.mjs",
+      "node": "./fesm2015/kirbydesign-designsystem-menu.mjs",
+      "default": "./fesm2020/kirbydesign-designsystem-menu.mjs"
+    },
     "./modal": {
       "types": "./modal/index.d.ts",
       "esm2020": "./esm2020/modal/kirbydesign-designsystem-modal.mjs",
@@ -389,6 +397,14 @@
       "node": "./fesm2015/kirbydesign-designsystem-spinner.mjs",
       "default": "./fesm2020/kirbydesign-designsystem-spinner.mjs"
     },
+    "./tab-navigation": {
+      "types": "./tab-navigation/index.d.ts",
+      "esm2020": "./esm2020/tab-navigation/kirbydesign-designsystem-tab-navigation.mjs",
+      "es2020": "./fesm2020/kirbydesign-designsystem-tab-navigation.mjs",
+      "es2015": "./fesm2015/kirbydesign-designsystem-tab-navigation.mjs",
+      "node": "./fesm2015/kirbydesign-designsystem-tab-navigation.mjs",
+      "default": "./fesm2020/kirbydesign-designsystem-tab-navigation.mjs"
+    },
     "./tabs": {
       "types": "./tabs/index.d.ts",
       "esm2020": "./esm2020/tabs/kirbydesign-designsystem-tabs.mjs",

package/page/page.component.d.ts

@@ -1,9 +1,10 @@
-import { AfterContentChecked, AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, Injector, NgZone, OnChanges, OnDestroy, OnInit, QueryList, Renderer2, SimpleChanges, TemplateRef } from '@angular/core';
+import { AfterContentChecked, AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, InjectionToken, Injector, NgZone, OnChanges, OnDestroy, OnInit, QueryList, Renderer2, SimpleChanges, TemplateRef } from '@angular/core';
 import { Router } from '@angular/router';
+import { IonRouterOutlet, NavController } from '@ionic/angular';
 import { TabsComponent } from '@kirbydesign/designsystem/tabs';
 import { ModalElementComponent, ModalElementsAdvertiser, ModalNavigationService, ModalWrapperComponent } from '@kirbydesign/designsystem/modal';
 import { FitHeadingConfig, ResizeObserverService } from '@kirbydesign/designsystem/shared';
-import { HeaderComponent, HeaderConfig } from '@kirbydesign/designsystem/header';
+import { HeaderComponent } from '@kirbydesign/designsystem/header';
 import * as i0 from "@angular/core";
 declare type stickyConfig = {
     sticky: boolean;
@@ -11,6 +12,10 @@ declare type stickyConfig = {
 declare type fixedConfig = {
     fixed: boolean;
 };
+export declare const PAGE_BACK_BUTTON_OVERRIDE: InjectionToken<PageBackButtonOverride>;
+export interface PageBackButtonOverride {
+    navigateBack: (routerOutlet: IonRouterOutlet, navCtrl: NavController, defaultBackHref: string) => void;
+}
 /**
  * Event emitted when "pull-to-refresh" begins.
  */
@@ -85,8 +90,10 @@ export declare class PageComponent implements OnInit, OnDestroy, AfterViewInit,
     private zone;
     private modalNavigationService;
     private resizeObserverService;
-    private headerConfig;
     private tabsComponent;
+    private backButtonOverride;
+    private routerOutlet;
+    private navCtrl;
     title: string;
     subtitle: string;
     toolbarTitle: string;
@@ -144,7 +151,7 @@ export declare class PageComponent implements OnInit, OnDestroy, AfterViewInit,
     private navigationStart$;
     private navigationEnd$;
     toolbarActionGroupInjector: Injector;
-    constructor(elementRef: ElementRef, injector: Injector, renderer: Renderer2, router: Router, changeDetectorRef: ChangeDetectorRef, zone: NgZone, modalNavigationService: ModalNavigationService, resizeObserverService: ResizeObserverService, headerConfig: HeaderConfig, tabsComponent: TabsComponent);
+    constructor(elementRef: ElementRef, injector: Injector, renderer: Renderer2, router: Router, changeDetectorRef: ChangeDetectorRef, zone: NgZone, modalNavigationService: ModalNavigationService, resizeObserverService: ResizeObserverService, tabsComponent: TabsComponent, backButtonOverride: PageBackButtonOverride, routerOutlet: IonRouterOutlet, navCtrl: NavController);
     private contentReadyPromise;
     private whenContentReady;
     ngOnInit(): void;
@@ -174,7 +181,7 @@ export declare class PageComponent implements OnInit, OnDestroy, AfterViewInit,
     }): void;
     _onKeyboardWillHide(): void;
     _onSelectedTabClick(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<PageComponent, [null, null, null, null, null, null, null, null, null, { optional: true; skipSelf: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PageComponent, [null, null, null, null, null, null, null, null, { optional: true; skipSelf: true; }, { optional: true; }, { optional: true; }, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<PageComponent, "kirby-page", never, { "title": "title"; "subtitle": "subtitle"; "toolbarTitle": "toolbarTitle"; "titleAlignment": "titleAlignment"; "defaultBackHref": "defaultBackHref"; "hideBackButton": "hideBackButton"; "titleMaxLines": "titleMaxLines"; "maxWidth": "maxWidth"; "tabBarBottomHidden": "tabBarBottomHidden"; }, { "enter": "enter"; "leave": "leave"; "refresh": "refresh"; "backButtonClick": "backButtonClick"; }, ["customToolbarTitleTemplate", "customTitleTemplate", "customSubtitleTemplate", "stickyContentRef", "header", "customActions", "customContent"], ["kirby-header", "kirby-page-footer", "kirby-page-actions", "kirby-page-content"], false, never>;
 }
 export {};

package/page/public_api.d.ts

@@ -1,14 +1,3 @@
-export { PageComponent } from './page.component';
-export { PageProgressComponent } from './page.component';
-export { PageTitleComponent } from './page.component';
-export { PageTitleDirective } from './page.component';
-export { PageSubtitleDirective } from './page.component';
-export { PageToolbarTitleDirective } from './page.component';
-export { PageActionsDirective } from './page.component';
-export { PageContentDirective } from './page.component';
-export { PageContentComponent } from './page.component';
-export { PageActionsComponent } from './page.component';
+export { PageComponent, PageProgressComponent, PageTitleComponent, PageTitleDirective, PageSubtitleDirective, PageToolbarTitleDirective, PageActionsDirective, PageContentDirective, PageContentComponent, PageActionsComponent, PullToRefreshEvent, PageStickyContentDirective, PAGE_BACK_BUTTON_OVERRIDE, PageBackButtonOverride, } from './page.component';
 export { PageFooterComponent } from './page-footer/page-footer.component';
 export { PageModule } from './page.module';
-export { PullToRefreshEvent } from './page.component';
-export { PageStickyContentDirective } from './page.component';

package/shared/floating/floating.directive.d.ts

@@ -10,6 +10,16 @@ export declare enum FloatingOffset {
     small = 4,
     medium = 8
 }
+export declare enum OutletSelector {
+    tag = "tag",
+    id = "id",
+    class = "class",
+    name = "name"
+}
+export interface PortalOutletConfig {
+    selector: OutletSelector;
+    value: string;
+}
 /**
  * @summary FloatingDirective is a utility that lets you declarative anchor "popup" containers to another element.
  *
@@ -50,6 +60,13 @@ export declare class FloatingDirective implements OnInit, OnDestroy {
      * This should be used when there's issues with the stacking context, and not as a default option.
      * */
     set DOMPortalOutlet(outlet: HTMLElement | undefined);
+    get DOMPortalOutlet(): HTMLElement | undefined;
+    /**
+     * Defines how to automatically find and assign DOMPortalOutlet if none is provided in DOMPortalOutlet.
+     * If nothing is provided here and in DOMPortalOutlet, the provided strategy is used
+     * */
+    set portalOutletConfig(config: PortalOutletConfig | undefined);
+    get portalOutletConfig(): PortalOutletConfig | undefined;
     /**
      * Prevent host from being toggled if set.
      * */
@@ -78,32 +95,41 @@ export declare class FloatingDirective implements OnInit, OnDestroy {
      * */
     displayChanged: EventEmitter<boolean>;
     onEscapeKeyPressed(): void;
-    onMouseClick(event: Event): void;
     private _placement;
     private _strategy;
+    private _providedPortalOutlet;
+    private _portalOutletConfig;
     private _triggers;
     private _reference;
     private autoUpdaterRef;
     private isShown;
-    private eventListenerDisposeFns;
+    private referenceEventListenerDisposeFns;
+    private documentClickEventListenerDisposeFn;
     private triggerEventMap;
+    private HTMLElements;
     constructor(elementRef: ElementRef, renderer: Renderer2, portalDirective: PortalDirective);
     ngOnInit(): void;
     show(): void;
     hide(): void;
     toggleShow(): void;
+    private onDocumentClickWhileHostShown;
     private addFloatStylingToHostElement;
+    private setDisplayStyling;
     private updateHostElementPosition;
     private getMiddlewareConfig;
     private autoUpdatePosition;
     private setPositionStylingOnHostElement;
     private setupEventHandling;
+    private attachDocumentClickEvent;
     private attachTriggerEventToReferenceElement;
     private handleClickInsideHostElement;
     private handleClickOutsideHostElement;
-    private tearDownEventHandling;
+    private getOutletElement;
+    private getHTMLElements;
+    private tearDownReferenceElementEventHandling;
+    private tearDownDocumentClickEventHandling;
     private removeAutoUpdaterRef;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<FloatingDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<FloatingDirective, "[kirbyFloating]", never, { "reference": "reference"; "placement": "placement"; "strategy": "strategy"; "triggers": "triggers"; "DOMPortalOutlet": "DOMPortalOutlet"; "isDisabled": "isDisabled"; "offset": "offset"; "shift": "shift"; "autoPlacement": "autoPlacement"; "closeOnSelect": "closeOnSelect"; "closeOnEscapeKey": "closeOnEscapeKey"; "closeOnBackdrop": "closeOnBackdrop"; }, { "displayChanged": "displayChanged"; }, never, never, true, [{ directive: typeof i1.PortalDirective; inputs: {}; outputs: {}; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<FloatingDirective, "[kirbyFloating]", never, { "reference": "reference"; "placement": "placement"; "strategy": "strategy"; "triggers": "triggers"; "DOMPortalOutlet": "DOMPortalOutlet"; "portalOutletConfig": "portalOutletConfig"; "isDisabled": "isDisabled"; "offset": "offset"; "shift": "shift"; "autoPlacement": "autoPlacement"; "closeOnSelect": "closeOnSelect"; "closeOnEscapeKey": "closeOnEscapeKey"; "closeOnBackdrop": "closeOnBackdrop"; }, { "displayChanged": "displayChanged"; }, never, never, true, [{ directive: typeof i1.PortalDirective; inputs: {}; outputs: {}; }]>;
 }

package/shared/floating/public_api.d.ts

@@ -1 +1 @@
-export { FloatingDirective, TriggerEvent } from './floating.directive';
+export { FloatingDirective, TriggerEvent, FloatingOffset, PortalOutletConfig, OutletSelector, } from './floating.directive';

package/tab-navigation/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@kirbydesign/designsystem/tab-navigation" />
+export * from './public_api';

package/tab-navigation/public_api.d.ts

@@ -0,0 +1,3 @@
+export { TabNavigationComponent } from './tab-navigation/tab-navigation.component';
+export { TabNavigationItemComponent } from './tab-navigation-item/tab-navigation-item.component';
+export { TabNavigationModule } from './tab-navigation.module';

package/tab-navigation/tab-navigation/tab-navigation.component.d.ts

@@ -0,0 +1,30 @@
+import { AfterViewInit, EventEmitter } from '@angular/core';
+import { WindowRef } from '@kirbydesign/designsystem/types';
+import { KeyboardHandlerService } from '@kirbydesign/designsystem/dropdown';
+import * as i0 from "@angular/core";
+export declare class TabNavigationComponent implements AfterViewInit {
+    private window;
+    private keyboardHandlerService;
+    readonly DEBOUNCE_TIME_MS = 250;
+    private tabBar;
+    private tabs;
+    private tabBarElement;
+    private tabElements;
+    private tabButtonElements;
+    get selectedIndex(): number;
+    set selectedIndex(index: number);
+    private _selectedIndex;
+    get focusIndex(): number;
+    set focusIndex(index: number);
+    private _focusIndex;
+    selectedIndexChange: EventEmitter<number>;
+    constructor(window: WindowRef, keyboardHandlerService: KeyboardHandlerService);
+    ngAfterViewInit(): void;
+    onItemSelect(event: PointerEvent): void;
+    onKeydown(event: KeyboardEvent): void;
+    private selectTab;
+    private focusTab;
+    private scrollToTab;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TabNavigationComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TabNavigationComponent, "kirby-tab-navigation", never, { "selectedIndex": "selectedIndex"; }, { "selectedIndexChange": "selectedIndexChange"; }, ["tabs"], ["*"], false, never>;
+}

package/tab-navigation/tab-navigation-item/tab-navigation-item.component.d.ts

@@ -0,0 +1,7 @@
+import * as i0 from "@angular/core";
+export declare class TabNavigationItemComponent {
+    label: string;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<TabNavigationItemComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TabNavigationItemComponent, "kirby-tab-navigation-item", never, { "label": "label"; }, {}, never, ["*"], false, never>;
+}

package/tab-navigation/tab-navigation.module.d.ts

@@ -0,0 +1,9 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./tab-navigation/tab-navigation.component";
+import * as i2 from "./tab-navigation-item/tab-navigation-item.component";
+import * as i3 from "@angular/common";
+export declare class TabNavigationModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<TabNavigationModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<TabNavigationModule, [typeof i1.TabNavigationComponent, typeof i2.TabNavigationItemComponent], [typeof i3.CommonModule], [typeof i1.TabNavigationComponent, typeof i2.TabNavigationItemComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<TabNavigationModule>;
+}

package/icon/src/README.md

@@ -1,16 +0,0 @@
-# Add new icons
-
-To add new icons, you should use the [icomoon app](https://icomoon.io).
-
-## Generate font from svg's
-
-1. Upload selection.json to get existing icons and settings
-2. Upload new icons
-3. Download Font
-
-## Update kirby icons
-
-1. Replace src/kirby/icon/selection.json, with newly generated selection.json
-2. Replace src/fonts/kirby.ttf, with newly generated kirby.ttf
-3. Update kirby-custom-icon-settings.ts with new icons (old icons should not have changed)
-4. Add new icon svg's to src/assets/icons/kirby