@kirbydesign/designsystem 9.4.1 → 9.6.0

package/modal/modal/modal-component/modal.component.d.ts

@@ -1,13 +1,15 @@
-import { AfterContentInit, ElementRef, EventEmitter, OnChanges, SimpleChanges, TemplateRef } from '@angular/core';
+import { ElementRef, EventEmitter, OnChanges, SimpleChanges, TemplateRef } from '@angular/core';
 import { IonContent } from '@ionic/angular/standalone';
 import { OverlayEventDetail } from '@ionic/core/components';
 import { KirbyAnimation } from '@kirbydesign/designsystem/helpers';
 import { WindowRef } from '@kirbydesign/designsystem/types';
+import { ModalNavigationService } from '../../modal-navigation.service';
 import { DrawerSupplementaryAction, ModalConfig, ModalFlavor, ModalSize, ShowAlertCallback } from '../../modal-wrapper';
 import { CanDismissHelper } from '../services';
 import * as i0 from "@angular/core";
-export declare class ModalComponent implements OnChanges, AfterContentInit {
+export declare class ModalComponent implements OnChanges {
     private canDismissHelper;
+    private modalNavigationService;
     private windowRef;
     modalElement: ElementRef<HTMLIonModalElement>;
     ionContent: IonContent;
@@ -33,8 +35,7 @@ export declare class ModalComponent implements OnChanges, AfterContentInit {
      */
     _config: ModalConfig;
     _canDismiss: ShowAlertCallback | boolean;
-    constructor(canDismissHelper: CanDismissHelper, windowRef: WindowRef);
-    ngAfterContentInit(): void;
+    constructor(canDismissHelper: CanDismissHelper, modalNavigationService: ModalNavigationService, windowRef: WindowRef);
     ngOnChanges(changes: SimpleChanges): void;
     scrollToTop(scrollDuration?: KirbyAnimation.Duration): void;
     scrollToBottom(scrollDuration?: KirbyAnimation.Duration): void;
@@ -42,7 +43,6 @@ export declare class ModalComponent implements OnChanges, AfterContentInit {
     _onDidPresent(event: CustomEvent<OverlayEventDetail>): void;
     _onWillDismiss(event: CustomEvent<OverlayEventDetail>): void;
     _onDidDismiss(event: CustomEvent<OverlayEventDetail>): void;
-    private handleBrowserBackButton;
     private updateModalConfigOnChange;
     static ɵfac: i0.ɵɵFactoryDeclaration<ModalComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ModalComponent, "kirby-modal", never, { "isOpen": { "alias": "isOpen"; "required": false; }; "trigger": { "alias": "trigger"; "required": false; }; "size": { "alias": "size"; "required": false; }; "scrollDisabled": { "alias": "scrollDisabled"; "required": false; }; "canDismiss": { "alias": "canDismiss"; "required": false; }; "collapseTitle": { "alias": "collapseTitle"; "required": false; }; "customHeight": { "alias": "customHeight"; "required": false; }; "flavor": { "alias": "flavor"; "required": false; }; "drawerSupplementaryAction": { "alias": "drawerSupplementaryAction"; "required": false; }; "interactWithBackground": { "alias": "interactWithBackground"; "required": false; }; }, { "willPresent": "willPresent"; "didPresent": "didPresent"; "didDismiss": "didDismiss"; "willDismiss": "willDismiss"; }, ["template"], never, true, never>;

package/modal/modal/services/can-dismiss-modal-guard.d.ts

@@ -0,0 +1,2 @@
+import { CanDeactivateFn } from '@angular/router';
+export declare const CanDismissModalGuard: CanDeactivateFn<unknown>;

package/modal/modal/services/index.d.ts

@@ -3,3 +3,4 @@ export * from './action-sheet.helper';
 export * from './alert.helper';
 export * from './modal.controller';
 export * from './can-dismiss.helper';
+export * from './can-dismiss-modal-guard';

package/modal/modal/services/modal.controller.d.ts

@@ -1,5 +1,6 @@
 import { OnDestroy } from '@angular/core';
 import { Params, Routes } from '@angular/router';
+import { Overlay } from '../../modal.interfaces';
 import { ActionSheetConfig } from '../action-sheet/config/action-sheet-config';
 import { AlertConfig } from '../alert/config/alert-config';
 import { ModalNavigationService } from '../../modal-navigation.service';
@@ -30,6 +31,7 @@ export declare class ModalController implements OnDestroy {
     private showAndRegisterOverlay;
     hideTopmost(data?: any): Promise<boolean>;
     hideAll(): Promise<void>;
+    getTopMost(): Overlay | null;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ModalController, [null, null, null, null, { optional: true; }]>;
     static ɵprov: i0.ɵɵInjectableDeclaration<ModalController>;

package/modal/modal/services/modal.helper.d.ts

@@ -1,22 +1,21 @@
 import { ModalController } from '@ionic/angular/standalone';
 import { WindowRef } from '@kirbydesign/designsystem/types';
 import { Overlay } from '../../modal.interfaces';
+import { ModalNavigationService } from '../../modal-navigation.service';
 import { ModalConfig } from '../../modal-wrapper';
 import { AlertConfig } from '../alert/config/alert-config';
 import { ModalAnimationBuilderService } from './modal-animation-builder.service';
 import { CanDismissHelper } from './can-dismiss.helper';
-import { AlertHelper } from './alert.helper';
 import * as i0 from "@angular/core";
 export declare class ModalHelper {
     private ionicModalController;
     private modalAnimationBuilder;
+    private modalNavigationService;
     private windowRef;
     private canDismissHelper;
-    private alertHelper;
-    constructor(ionicModalController: ModalController, modalAnimationBuilder: ModalAnimationBuilderService, windowRef: WindowRef, canDismissHelper: CanDismissHelper, alertHelper: AlertHelper);
+    constructor(ionicModalController: ModalController, modalAnimationBuilder: ModalAnimationBuilderService, modalNavigationService: ModalNavigationService, windowRef: WindowRef, canDismissHelper: CanDismissHelper);
     private isModalOpening;
     showModalWindow(config: ModalConfig, alertConfig?: AlertConfig): Promise<Overlay>;
-    private handleBrowserBackButton;
     static ɵfac: i0.ɵɵFactoryDeclaration<ModalHelper, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<ModalHelper>;
 }

package/modal/modal-navigation.service.d.ts

@@ -35,6 +35,7 @@ export declare class ModalNavigationService {
     navigateWithinModal(relativePath: string, queryParams?: Params): Promise<boolean>;
     navigateOutOfModalOutlet(): Promise<boolean>;
     private getBackdropRoute;
+    handleBrowserBackButton(modal: HTMLIonModalElement): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ModalNavigationService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<ModalNavigationService>;
 }

package/modal/modal.interfaces.d.ts

@@ -11,6 +11,7 @@ export interface Overlay {
     dismiss: (data?: any) => Promise<boolean>;
     onWillDismiss: Promise<OverlayEventDetail>;
     onDidDismiss: Promise<OverlayEventDetail>;
+    isDismissing?: boolean;
 }
 export interface ModalData {
     alertConfig: AlertConfig;

package/package.json

@@ -1,29 +1,46 @@
 {
   "name": "@kirbydesign/designsystem",
-  "version": "9.4.1",
+  "version": "9.6.0",
+  "description": "The Kirby Design Angular Components.",
+  "author": "kirby@bankdata.dk",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/kirbydesign/designsystem.git"
+  },
+  "keywords": [
+    "Angular",
+    "Angular2",
+    "Library",
+    "Kirby"
+  ],
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/kirbydesign/designsystem/issues"
+  },
+  "homepage": "https://cookbook.kirby.design",
   "dependencies": {
     "@floating-ui/dom": "^1.1.0",
     "@fontsource/roboto": "4.2.1",
-    "@kirbydesign/core": "0.0.60",
-    "inputmask": "5.0.5",
+    "@kirbydesign/core": "0.0.62",
+    "inputmask": "5.0.8",
     "tslib": "^2.3.0"
   },
   "peerDependencies": {
-    "@ionic/angular": "7.8.3",
     "@angular/cdk": "^17.0.0",
     "@angular/common": "^17.0.0",
     "@angular/core": "^17.0.0",
     "@angular/forms": "^17.0.0",
     "@angular/router": "^17.0.0",
-    "chart.js": ">=3.9.1",
-    "chartjs-adapter-date-fns": ">=2.0.0",
-    "chartjs-plugin-annotation": ">=1.0.2",
-    "chartjs-plugin-datalabels": ">=2.0.0",
+    "@ionic/angular": "7.8.3",
+    "chart.js": "^3.9.1",
+    "chartjs-adapter-date-fns": "^2.0.0",
+    "chartjs-plugin-annotation": "^1.0.2",
+    "chartjs-plugin-datalabels": "^2.0.0",
     "date-fns": "^2.30.0",
     "date-fns-tz": "^1.3.8",
-    "rxjs": ">=7.0.0",
+    "rxjs": "^7.0.0",
     "swiper": "^9.2.0",
-    "zone.js": ">=0.10.2"
+    "zone.js": "^0.14.3"
   },
   "exports": {
     "./scss/global-styles": "./scss/_global-styles.scss",
@@ -364,24 +381,5 @@
   },
   "module": "fesm2022/kirbydesign-designsystem.mjs",
   "typings": "index.d.ts",
-  "sideEffects": false,
-  "description": "The Kirby Design Angular Components.",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/kirbydesign/designsystem.git"
-  },
-  "keywords": [
-    "Angular",
-    "Angular2",
-    "Library",
-    "Kirby"
-  ],
-  "author": {
-    "name": "bdyjeo@bankdata.dk"
-  },
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/kirbydesign/designsystem/issues"
-  },
-  "homepage": "https://cookbook.kirby.design"
+  "sideEffects": false
 }

package/page/page.component.d.ts

@@ -13,7 +13,7 @@ type stickyConfig = {
 type fixedConfig = {
     fixed: boolean;
 };
-type MaxWidth = 'default' | 'standard' | 'optimized' | 'full';
+type MaxWidth = 'default' | 'standard' | 'optimized' | 'lg' | 'xl' | 'full';
 export declare const PAGE_BACK_BUTTON_OVERRIDE: InjectionToken<PageBackButtonOverride>;
 export interface PageBackButtonOverride {
     navigateBack: (routerOutlet: IonRouterOutlet, navCtrl: NavController, defaultBackHref: string) => void;

package/progress-circle/progress-circle-ring.component.d.ts

@@ -1,15 +1,19 @@
+import { AfterViewInit } from '@angular/core';
 import * as i0 from "@angular/core";
-export declare class ProgressCircleRingComponent {
+export declare class ProgressCircleRingComponent implements AfterViewInit {
     radius: number;
     value: number;
     themeColor: 'success' | 'warning' | 'danger';
     strokeWidth: number;
     upperBound: number;
-    get _offset(): number;
+    viewInitialized: any;
+    ngAfterViewInit(): void;
     get _diameter(): number;
     get _centerRadius(): number;
     get _centerCircumference(): number;
-    private calculateOffset;
+    get _progress(): number;
+    get _remainder(): number;
+    get _progressStrokeWidth(): number;
     static ɵfac: i0.ɵɵFactoryDeclaration<ProgressCircleRingComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ProgressCircleRingComponent, "kirby-progress-circle-ring", never, { "radius": { "alias": "radius"; "required": false; }; "value": { "alias": "value"; "required": false; }; "themeColor": { "alias": "themeColor"; "required": false; }; "strokeWidth": { "alias": "strokeWidth"; "required": false; }; "upperBound": { "alias": "upperBound"; "required": false; }; }, {}, never, never, true, never>;
 }

package/readme.md

@@ -193,15 +193,16 @@ A basic walkthrough is outlined in the structure below:
 Below is an overview of most widely used scripts, available for this project.  
 Use them in your terminal like: `npm run <script>` :
 
-| Command           | Description                                                                                                                                            |
-| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| start             | Starts the development server, providing a means of running (and developing on the Cookbook)                                                           |
-| lint              | Lints the entire project (both TypeScript and SCSS source code)                                                                                        |
-| lint:cookbook     | Lints the Cookbook application (both TypeScript and SCSS source code)                                                                                  |
-| lint:designsystem | Lints the Designsystem library (both TypeScript and SCSS source code)                                                                                  |
-| dist:cookbook     | Builds a distribution folder of the Cookbook application                                                                                               |
-| dist:designsystem | Builds a distribution folder of the Designsystem library                                                                                               |
-| transpile:tools   | Transpiles tools, required to produce library distribution (this is done as a `post-install` hook, but may have value if altering tool implementation) |
+| Command       | Description                                                                                                                    |
+| ------------- | ------------------------------------------------------------------------------------------------------------------------------ |
+| start         | Starts the development server, providing a means of running the cookbook while developing                                      |
+| start:ios     | Builds the flows app and deploys it to an iOS device (real or simulated) using Capacitor                                       |
+| start:android | Builds the flows app and deploys it to an Android device (real or simulated) using Capacitor                                   |
+| publish       | When run locally it produces a set of npm packages in `dist/` that can be installed locally with npm install <path to tarball> |
+| storybook     | Opens up Storybook where component states are set up for snapshot testing with Chromatic                                       |
+
+We use [nx][nx] to run common tasks like building, linting and testing projects.
+This is done with `npx nx <target name> <project name>`, e.g. `npx nx lint designsystem` preferrably _from the root of the workspace_ to ensure config paths are resolved correctly.
 
 ## Contributing
 
@@ -211,7 +212,7 @@ If you wish to contribute new features, bug fixes or something third to the proj
 [jasmine]: https://jasmine.github.io/
 [jest]: https://jestjs.io/
 [nrwl]: https://nrwl.io/
-[nx]: https://nx.dev/angular
+[nx]: https://nx.dev/getting-started/intro
 [kirby.design]: https://kirby.design/
 [kirby.cookbook]: https://cookbook.kirby.design
 [kirby.cookbook.fonts]: https://cookbook.kirby.design/home/showcase/fonts

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

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

package/testing-base/lib/components/mock.avatar.component.d.ts

@@ -1,4 +1,4 @@
-import { BrandColor, NotificationColor } from '@kirbydesign/core/dist/types/helpers';
+import { BrandColor, NotificationColor } from '@kirbydesign/core';
 import { AvatarSize } from '@kirbydesign/designsystem/avatar';
 import * as i0 from "@angular/core";
 export declare class MockAvatarComponent {

package/testing-base/lib/components/mock.button.component.d.ts

@@ -1,4 +1,4 @@
-import { NotificationColor } from '@kirbydesign/core/dist/types/helpers';
+import { NotificationColor } from '@kirbydesign/core';
 import { AttentionLevel, ButtonSize } from '@kirbydesign/designsystem/button';
 import * as i0 from "@angular/core";
 export declare class MockButtonComponent {

package/testing-jest/lib/mock-providers.d.ts

@@ -1,47 +1,47 @@
 import { ChartConfigService, ChartJSService, IconRegistryService, LoadingOverlayService, ModalController, TabsService } from '@kirbydesign/designsystem';
 import { ToastController } from '@kirbydesign/designsystem/toast';
 export declare function chartConfigServiceFactory(): {
-    getTypeConfig: jest.Mock<any, any, any>;
-    getAnnotationDefaults: jest.Mock<any, any, any>;
-    chartTypeToChartJSType: jest.Mock<any, any, any>;
-    applyInteractionFunctionsExtensions: jest.Mock<any, any, any>;
-    getStockChartOptions: jest.Mock<any, any, any>;
+    getTypeConfig: jest.Mock<any, any>;
+    getAnnotationDefaults: jest.Mock<any, any>;
+    chartTypeToChartJSType: jest.Mock<any, any>;
+    applyInteractionFunctionsExtensions: jest.Mock<any, any>;
+    getStockChartOptions: jest.Mock<any, any>;
 };
 export declare function chartJSServiceFactory(): {
-    renderChart: jest.Mock<any, any, any>;
-    redrawChart: jest.Mock<any, any, any>;
-    destroyChart: jest.Mock<any, any, any>;
-    updateData: jest.Mock<any, any, any>;
-    updateLabels: jest.Mock<any, any, any>;
-    updateType: jest.Mock<any, any, any>;
-    updateOptions: jest.Mock<any, any, any>;
-    updateAnnotations: jest.Mock<any, any, any>;
-    updateHighlightedElements: jest.Mock<any, any, any>;
+    renderChart: jest.Mock<any, any>;
+    redrawChart: jest.Mock<any, any>;
+    destroyChart: jest.Mock<any, any>;
+    updateData: jest.Mock<any, any>;
+    updateLabels: jest.Mock<any, any>;
+    updateType: jest.Mock<any, any>;
+    updateOptions: jest.Mock<any, any>;
+    updateAnnotations: jest.Mock<any, any>;
+    updateHighlightedElements: jest.Mock<any, any>;
 };
 export declare function iconRegistryServiceFactory(): {
-    addIcon: jest.Mock<any, any, any>;
-    addIcons: jest.Mock<any, any, any>;
+    addIcon: jest.Mock<any, any>;
+    addIcons: jest.Mock<any, any>;
 };
 export declare function loadingOverlayServiceFactory(): {
-    showLoadingOverlay: jest.Mock<any, any, any>;
-    hideLoadingOverlay: jest.Mock<any, any, any>;
+    showLoadingOverlay: jest.Mock<any, any>;
+    hideLoadingOverlay: jest.Mock<any, any>;
 };
 export declare function modalControllerFactory(): {
-    showModal: jest.Mock<any, any, any>;
-    navigateToModal: jest.Mock<any, any, any>;
-    navigateWithinModal: jest.Mock<any, any, any>;
-    showActionSheet: jest.Mock<any, any, any>;
-    showAlert: jest.Mock<any, any, any>;
-    hideTopmost: jest.Mock<any, any, any>;
-    hideAll: jest.Mock<any, any, any>;
+    showModal: jest.Mock<any, any>;
+    navigateToModal: jest.Mock<any, any>;
+    navigateWithinModal: jest.Mock<any, any>;
+    showActionSheet: jest.Mock<any, any>;
+    showAlert: jest.Mock<any, any>;
+    hideTopmost: jest.Mock<any, any>;
+    hideAll: jest.Mock<any, any>;
 };
 export declare function tabsServiceFactory(): {
-    setOutlet: jest.Mock<any, any, any>;
-    resetOutlet: jest.Mock<any, any, any>;
+    setOutlet: jest.Mock<any, any>;
+    resetOutlet: jest.Mock<any, any>;
     outlet$: import("rxjs").Observable<never>;
 };
 export declare function toastControllerFactory(): {
-    showToast: jest.Mock<any, any, any>;
+    showToast: jest.Mock<any, any>;
 };
 export declare const MOCK_PROVIDERS: ({
     provide: typeof ChartConfigService;