@kirbydesign/designsystem 11.11.3 → 12.0.0-dev-67d5287

package/fesm2022/kirbydesign-designsystem-fab-sheet.mjs

@@ -1,86 +1,214 @@
-import * as i0 from '@angular/core';
-import { ElementRef, ViewChild, ContentChild, HostBinding, Input, Inject, ChangeDetectionStrategy, Component } from '@angular/core';
-import { ActionSheetComponent } from '@kirbydesign/designsystem/modal';
-import { IonBackdrop, IonFab, IonFabButton, IonFabList } from '@ionic/angular';
-import { DOCUMENT } from '@angular/common';
-
-const KIRBY_FAB_SHEET_DEPRECATION_WARNING = '[Kirby fab sheet] Deprecated - Use Header with Action Group instead';
-class FabSheetComponent {
-    get isFabSheetOpen() {
-        return this._isFabSheetOpen;
-    }
-    constructor(changeDetectorRef, renderer, document) {
-        this.changeDetectorRef = changeDetectorRef;
-        this.renderer = renderer;
-        this.document = document;
-        this.disabled = false;
-        this.horizontalAlignment = 'right';
-        this._isFabSheetOpen = false;
-        console.warn(KIRBY_FAB_SHEET_DEPRECATION_WARNING);
-    }
-    ngAfterContentInit() {
-        if (this.actionSheet) {
-            this.actionSheet.hideCancel = true;
-        }
-    }
-    ngAfterViewInit() {
-        this.renderer.removeClass(this.document.body, 'backdrop-no-scroll');
-    }
-    hideActions() {
-        this.ionFab.close().then(() => this.fabSheetStateChanged(false));
-    }
-    onFabButtonClick() {
-        setTimeout(() => {
-            this.fabSheetStateChanged(this.ionFab.activated);
-        });
-    }
-    onFabListClick() {
-        this.ionFab.close().then(() => {
-            this.fabSheetStateChanged(false);
-        });
-    }
-    fabSheetStateChanged(isOpen) {
-        this._isFabSheetOpen = isOpen;
-        if (this.isFabSheetOpen) {
-            this.renderer.addClass(this.document.body, 'fab-sheet-active');
-            this.renderer.addClass(this.document.body, 'backdrop-no-scroll');
-        }
-        else {
-            this.renderer.removeClass(this.document.body, 'fab-sheet-active');
-            this.renderer.removeClass(this.document.body, 'backdrop-no-scroll');
-        }
-        this.changeDetectorRef.detectChanges();
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FabSheetComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: FabSheetComponent, isStandalone: true, selector: "kirby-fab-sheet", inputs: { disabled: "disabled", horizontalAlignment: "horizontalAlignment" }, host: { properties: { "class.is-open": "this.isFabSheetOpen" } }, queries: [{ propertyName: "actionSheet", first: true, predicate: ActionSheetComponent, descendants: true }], viewQueries: [{ propertyName: "ionFabButton", first: true, predicate: IonFabButton, descendants: true, read: ElementRef, static: true }, { propertyName: "ionFab", first: true, predicate: IonFab, descendants: true, static: true }], ngImport: i0, template: "<ion-backdrop\n  [class.backdrop-visible]=\"isFabSheetOpen\"\n  [stopPropagation]=\"false\"\n  (ionBackdropTap)=\"hideActions()\"\n  (click)=\"hideActions()\"\n></ion-backdrop>\n<ion-fab>\n  <ion-fab-button\n    (click)=\"onFabButtonClick()\"\n    [disabled]=\"disabled\"\n    [attr.disabled]=\"disabled ? true : null\"\n    tabindex=\"-1\"\n  >\n    <ng-content select=\"kirby-icon\"></ng-content>\n  </ion-fab-button>\n  @if (actionSheet) {\n    <ion-fab-list side=\"top\" class=\"{{ horizontalAlignment }}\" (click)=\"onFabListClick()\">\n      <ng-content select=\"kirby-action-sheet\"></ng-content>\n    </ion-fab-list>\n  }\n</ion-fab>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{--kirby-action-sheet-margin-horizontal: var(--kirby-spacing-s)}@media(hover:hover){ion-fab-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-fab-button:active,ion-fab-button.ion-activated{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}ion-fab-button::part(native):after{transition:all 80ms linear 0ms}ion-fab-button:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset);outline:none;border-radius:var(--kirby-border-radius-pill)}ion-fab-button{--box-shadow: var(--kirby-elevation-4);width:64px;height:64px;-webkit-user-select:none;user-select:none}ion-fab-button[disabled]{--background: var(--kirby-semi-light);--box-shadow: none;opacity:1}ion-fab{position:fixed;bottom:var(--kirby-spacing-s);right:var(--kirby-spacing-s)}:host-context(.fixed-content) ion-fab{position:absolute}ion-backdrop{visibility:hidden;opacity:0;transition:opacity .75s;position:fixed;z-index:999}ion-backdrop.backdrop-visible{visibility:visible;opacity:.4}@media(min-width:768px){ion-backdrop.backdrop-visible{opacity:0}}ion-fab-list{margin-top:76px;margin-bottom:76px;right:0}\n"], dependencies: [{ kind: "component", type: IonBackdrop, selector: "ion-backdrop", inputs: ["stopPropagation", "tappable", "visible"], outputs: ["ionBackdropTap"] }, { kind: "component", type: IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"], outputs: ["ionFocus", "ionBlur"] }, { kind: "component", type: IonFabList, selector: "ion-fab-list", inputs: ["activated", "side"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FabSheetComponent, decorators: [{
-            type: Component,
-            args: [{ imports: [IonBackdrop, IonFab, IonFabButton, IonFabList], selector: 'kirby-fab-sheet', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-backdrop\n  [class.backdrop-visible]=\"isFabSheetOpen\"\n  [stopPropagation]=\"false\"\n  (ionBackdropTap)=\"hideActions()\"\n  (click)=\"hideActions()\"\n></ion-backdrop>\n<ion-fab>\n  <ion-fab-button\n    (click)=\"onFabButtonClick()\"\n    [disabled]=\"disabled\"\n    [attr.disabled]=\"disabled ? true : null\"\n    tabindex=\"-1\"\n  >\n    <ng-content select=\"kirby-icon\"></ng-content>\n  </ion-fab-button>\n  @if (actionSheet) {\n    <ion-fab-list side=\"top\" class=\"{{ horizontalAlignment }}\" (click)=\"onFabListClick()\">\n      <ng-content select=\"kirby-action-sheet\"></ng-content>\n    </ion-fab-list>\n  }\n</ion-fab>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{--kirby-action-sheet-margin-horizontal: var(--kirby-spacing-s)}@media(hover:hover){ion-fab-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-fab-button:active,ion-fab-button.ion-activated{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}ion-fab-button::part(native):after{transition:all 80ms linear 0ms}ion-fab-button:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset);outline:none;border-radius:var(--kirby-border-radius-pill)}ion-fab-button{--box-shadow: var(--kirby-elevation-4);width:64px;height:64px;-webkit-user-select:none;user-select:none}ion-fab-button[disabled]{--background: var(--kirby-semi-light);--box-shadow: none;opacity:1}ion-fab{position:fixed;bottom:var(--kirby-spacing-s);right:var(--kirby-spacing-s)}:host-context(.fixed-content) ion-fab{position:absolute}ion-backdrop{visibility:hidden;opacity:0;transition:opacity .75s;position:fixed;z-index:999}ion-backdrop.backdrop-visible{visibility:visible;opacity:.4}@media(min-width:768px){ion-backdrop.backdrop-visible{opacity:0}}ion-fab-list{margin-top:76px;margin-bottom:76px;right:0}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: Document, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }], propDecorators: { disabled: [{
-                type: Input
-            }], horizontalAlignment: [{
-                type: Input
-            }], isFabSheetOpen: [{
-                type: HostBinding,
-                args: ['class.is-open']
-            }], actionSheet: [{
-                type: ContentChild,
-                args: [ActionSheetComponent, { static: false }]
-            }], ionFabButton: [{
-                type: ViewChild,
-                args: [IonFabButton, { static: true, read: ElementRef }]
-            }], ionFab: [{
-                type: ViewChild,
-                args: [IonFab, { static: true }]
-            }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ContentChild, ElementRef, HostBinding, Inject, Input, ViewChild } from "@angular/core";
+import { ActionSheetComponent } from "@kirbydesign/designsystem/modal";
+import { IonBackdrop, IonFab, IonFabButton, IonFabList } from "@ionic/angular";
+import { DOCUMENT } from "@angular/common";
+const KIRBY_FAB_SHEET_DEPRECATION_WARNING = "[Kirby fab sheet] Deprecated - Use Header with Action Group instead";
+var FabSheetComponent = class FabSheetComponent {
+	get isFabSheetOpen() {
+		return this._isFabSheetOpen;
+	}
+	constructor(changeDetectorRef, renderer, document) {
+		this.changeDetectorRef = changeDetectorRef;
+		this.renderer = renderer;
+		this.document = document;
+		this.disabled = false;
+		this.horizontalAlignment = "right";
+		this._isFabSheetOpen = false;
+		console.warn(KIRBY_FAB_SHEET_DEPRECATION_WARNING);
+	}
+	ngAfterContentInit() {
+		if (this.actionSheet) this.actionSheet.hideCancel = true;
+	}
+	ngAfterViewInit() {
+		this.renderer.removeClass(this.document.body, "backdrop-no-scroll");
+	}
+	hideActions() {
+		this.ionFab.close().then(() => this.fabSheetStateChanged(false));
+	}
+	onFabButtonClick() {
+		setTimeout(() => {
+			this.fabSheetStateChanged(this.ionFab.activated);
+		});
+	}
+	onFabListClick() {
+		this.ionFab.close().then(() => {
+			this.fabSheetStateChanged(false);
+		});
+	}
+	fabSheetStateChanged(isOpen) {
+		this._isFabSheetOpen = isOpen;
+		if (this.isFabSheetOpen) {
+			this.renderer.addClass(this.document.body, "fab-sheet-active");
+			this.renderer.addClass(this.document.body, "backdrop-no-scroll");
+		} else {
+			this.renderer.removeClass(this.document.body, "fab-sheet-active");
+			this.renderer.removeClass(this.document.body, "backdrop-no-scroll");
+		}
+		this.changeDetectorRef.detectChanges();
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: FabSheetComponent,
+			deps: [
+				{ token: i0.ChangeDetectorRef },
+				{ token: i0.Renderer2 },
+				{ token: DOCUMENT }
+			],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: FabSheetComponent,
+			isStandalone: true,
+			selector: "kirby-fab-sheet",
+			inputs: {
+				disabled: "disabled",
+				horizontalAlignment: "horizontalAlignment"
+			},
+			host: { properties: { "class.is-open": "this.isFabSheetOpen" } },
+			queries: [{
+				propertyName: "actionSheet",
+				first: true,
+				predicate: ActionSheetComponent,
+				descendants: true
+			}],
+			viewQueries: [{
+				propertyName: "ionFabButton",
+				first: true,
+				predicate: IonFabButton,
+				descendants: true,
+				read: ElementRef,
+				static: true
+			}, {
+				propertyName: "ionFab",
+				first: true,
+				predicate: IonFab,
+				descendants: true,
+				static: true
+			}],
+			ngImport: i0,
+			template: "<ion-backdrop\n  [class.backdrop-visible]=\"isFabSheetOpen\"\n  [stopPropagation]=\"false\"\n  (ionBackdropTap)=\"hideActions()\"\n  (click)=\"hideActions()\"\n></ion-backdrop>\n<ion-fab>\n  <ion-fab-button\n    (click)=\"onFabButtonClick()\"\n    [disabled]=\"disabled\"\n    [attr.disabled]=\"disabled ? true : null\"\n    tabindex=\"-1\"\n  >\n    <ng-content select=\"kirby-icon\"></ng-content>\n  </ion-fab-button>\n  @if (actionSheet) {\n    <ion-fab-list side=\"top\" class=\"{{ horizontalAlignment }}\" (click)=\"onFabListClick()\">\n      <ng-content select=\"kirby-action-sheet\"></ng-content>\n    </ion-fab-list>\n  }\n</ion-fab>\n",
+			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{--kirby-action-sheet-margin-horizontal: var(--kirby-spacing-s)}@media(hover:hover){ion-fab-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-fab-button:active,ion-fab-button.ion-activated{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}ion-fab-button::part(native):after{transition:all 80ms linear 0ms}ion-fab-button:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset);outline:none;border-radius:var(--kirby-border-radius-pill)}ion-fab-button{--box-shadow: var(--kirby-elevation-4);width:64px;height:64px;-webkit-user-select:none;user-select:none}ion-fab-button[disabled]{--background: var(--kirby-semi-light);--box-shadow: none;opacity:1}ion-fab{position:fixed;bottom:var(--kirby-spacing-s);right:var(--kirby-spacing-s)}:host-context(.fixed-content) ion-fab{position:absolute}ion-backdrop{visibility:hidden;opacity:0;transition:opacity .75s;position:fixed;z-index:999}ion-backdrop.backdrop-visible{visibility:visible;opacity:.4}@media(min-width:768px){ion-backdrop.backdrop-visible{opacity:0}}ion-fab-list{margin-top:76px;margin-bottom:76px;right:0}\n"],
+			dependencies: [
+				{
+					kind: "component",
+					type: IonBackdrop,
+					selector: "ion-backdrop",
+					inputs: [
+						"stopPropagation",
+						"tappable",
+						"visible"
+					],
+					outputs: ["ionBackdropTap"]
+				},
+				{
+					kind: "component",
+					type: IonFab,
+					selector: "ion-fab",
+					inputs: [
+						"activated",
+						"edge",
+						"horizontal",
+						"vertical"
+					]
+				},
+				{
+					kind: "component",
+					type: IonFabButton,
+					selector: "ion-fab-button",
+					inputs: [
+						"activated",
+						"closeIcon",
+						"color",
+						"disabled",
+						"download",
+						"form",
+						"href",
+						"mode",
+						"rel",
+						"routerAnimation",
+						"routerDirection",
+						"show",
+						"size",
+						"target",
+						"translucent",
+						"type"
+					],
+					outputs: ["ionFocus", "ionBlur"]
+				},
+				{
+					kind: "component",
+					type: IonFabList,
+					selector: "ion-fab-list",
+					inputs: ["activated", "side"]
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: FabSheetComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			imports: [
+				IonBackdrop,
+				IonFab,
+				IonFabButton,
+				IonFabList
+			],
+			selector: "kirby-fab-sheet",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<ion-backdrop\n  [class.backdrop-visible]=\"isFabSheetOpen\"\n  [stopPropagation]=\"false\"\n  (ionBackdropTap)=\"hideActions()\"\n  (click)=\"hideActions()\"\n></ion-backdrop>\n<ion-fab>\n  <ion-fab-button\n    (click)=\"onFabButtonClick()\"\n    [disabled]=\"disabled\"\n    [attr.disabled]=\"disabled ? true : null\"\n    tabindex=\"-1\"\n  >\n    <ng-content select=\"kirby-icon\"></ng-content>\n  </ion-fab-button>\n  @if (actionSheet) {\n    <ion-fab-list side=\"top\" class=\"{{ horizontalAlignment }}\" (click)=\"onFabListClick()\">\n      <ng-content select=\"kirby-action-sheet\"></ng-content>\n    </ion-fab-list>\n  }\n</ion-fab>\n",
+			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{--kirby-action-sheet-margin-horizontal: var(--kirby-spacing-s)}@media(hover:hover){ion-fab-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-fab-button:active,ion-fab-button.ion-activated{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}ion-fab-button::part(native):after{transition:all 80ms linear 0ms}ion-fab-button:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset);outline:none;border-radius:var(--kirby-border-radius-pill)}ion-fab-button{--box-shadow: var(--kirby-elevation-4);width:64px;height:64px;-webkit-user-select:none;user-select:none}ion-fab-button[disabled]{--background: var(--kirby-semi-light);--box-shadow: none;opacity:1}ion-fab{position:fixed;bottom:var(--kirby-spacing-s);right:var(--kirby-spacing-s)}:host-context(.fixed-content) ion-fab{position:absolute}ion-backdrop{visibility:hidden;opacity:0;transition:opacity .75s;position:fixed;z-index:999}ion-backdrop.backdrop-visible{visibility:visible;opacity:.4}@media(min-width:768px){ion-backdrop.backdrop-visible{opacity:0}}ion-fab-list{margin-top:76px;margin-bottom:76px;right:0}\n"]
+		}]
+	}],
+	ctorParameters: () => [
+		{ type: i0.ChangeDetectorRef },
+		{ type: i0.Renderer2 },
+		{
+			type: Document,
+			decorators: [{
+				type: Inject,
+				args: [DOCUMENT]
+			}]
+		}
+	],
+	propDecorators: {
+		disabled: [{ type: Input }],
+		horizontalAlignment: [{ type: Input }],
+		isFabSheetOpen: [{
+			type: HostBinding,
+			args: ["class.is-open"]
+		}],
+		actionSheet: [{
+			type: ContentChild,
+			args: [ActionSheetComponent, { static: false }]
+		}],
+		ionFabButton: [{
+			type: ViewChild,
+			args: [IonFabButton, {
+				static: true,
+				read: ElementRef
+			}]
+		}],
+		ionFab: [{
+			type: ViewChild,
+			args: [IonFab, { static: true }]
+		}]
+	}
+});
 export { FabSheetComponent };
-//# sourceMappingURL=kirbydesign-designsystem-fab-sheet.mjs.map
+
+//# sourceMappingURL=kirbydesign-designsystem-fab-sheet.mjs.map

package/fesm2022/kirbydesign-designsystem-fab-sheet.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"kirbydesign-designsystem-fab-sheet.mjs","sources":["../../fab-sheet/src/fab-sheet.component.ts","../../fab-sheet/src/fab-sheet.component.html","../../fab-sheet/src/kirbydesign-designsystem-fab-sheet.ts"],"sourcesContent":["import {\n  AfterContentInit,\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ContentChild,\n  ElementRef,\n  HostBinding,\n  Inject,\n  Input,\n  Renderer2,\n  ViewChild,\n} from '@angular/core';\nimport { ActionSheetComponent } from '@kirbydesign/designsystem/modal';\nimport { IonBackdrop, IonFab, IonFabButton, IonFabList } from '@ionic/angular';\nimport { DOCUMENT } from '@angular/common';\n\nconst KIRBY_FAB_SHEET_DEPRECATION_WARNING =\n  '[Kirby fab sheet] Deprecated - Use Header with Action Group instead';\n\n@Component({\n  imports: [IonBackdrop, IonFab, IonFabButton, IonFabList],\n  selector: 'kirby-fab-sheet',\n  templateUrl: './fab-sheet.component.html',\n  styleUrls: ['./fab-sheet.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class FabSheetComponent implements AfterContentInit, AfterViewInit {\n  @Input() disabled: boolean = false;\n  @Input() horizontalAlignment: 'left' | 'center' | 'right' = 'right';\n\n  private _isFabSheetOpen: boolean = false;\n  @HostBinding('class.is-open')\n  get isFabSheetOpen() {\n    return this._isFabSheetOpen;\n  }\n\n  @ContentChild(ActionSheetComponent, { static: false }) actionSheet: ActionSheetComponent;\n\n  @ViewChild(IonFabButton, { static: true, read: ElementRef })\n  ionFabButton: ElementRef<HTMLElement>;\n\n  @ViewChild(IonFab, { static: true })\n  ionFab: IonFab;\n\n  constructor(\n    private changeDetectorRef: ChangeDetectorRef,\n    private renderer: Renderer2,\n    @Inject(DOCUMENT) private document: Document\n  ) {\n    console.warn(KIRBY_FAB_SHEET_DEPRECATION_WARNING);\n  }\n\n  ngAfterContentInit(): void {\n    if (this.actionSheet) {\n      this.actionSheet.hideCancel = true;\n    }\n  }\n\n  ngAfterViewInit(): void {\n    this.renderer.removeClass(this.document.body, 'backdrop-no-scroll');\n  }\n\n  hideActions() {\n    this.ionFab.close().then(() => this.fabSheetStateChanged(false));\n  }\n\n  onFabButtonClick() {\n    setTimeout(() => {\n      this.fabSheetStateChanged(this.ionFab.activated);\n    });\n  }\n\n  onFabListClick() {\n    this.ionFab.close().then(() => {\n      this.fabSheetStateChanged(false);\n    });\n  }\n\n  fabSheetStateChanged(isOpen: boolean) {\n    this._isFabSheetOpen = isOpen;\n    if (this.isFabSheetOpen) {\n      this.renderer.addClass(this.document.body, 'fab-sheet-active');\n      this.renderer.addClass(this.document.body, 'backdrop-no-scroll');\n    } else {\n      this.renderer.removeClass(this.document.body, 'fab-sheet-active');\n      this.renderer.removeClass(this.document.body, 'backdrop-no-scroll');\n    }\n\n    this.changeDetectorRef.detectChanges();\n  }\n}\n","<ion-backdrop\n  [class.backdrop-visible]=\"isFabSheetOpen\"\n  [stopPropagation]=\"false\"\n  (ionBackdropTap)=\"hideActions()\"\n  (click)=\"hideActions()\"\n></ion-backdrop>\n<ion-fab>\n  <ion-fab-button\n    (click)=\"onFabButtonClick()\"\n    [disabled]=\"disabled\"\n    [attr.disabled]=\"disabled ? true : null\"\n    tabindex=\"-1\"\n  >\n    <ng-content select=\"kirby-icon\"></ng-content>\n  </ion-fab-button>\n  @if (actionSheet) {\n    <ion-fab-list side=\"top\" class=\"{{ horizontalAlignment }}\" (click)=\"onFabListClick()\">\n      <ng-content select=\"kirby-action-sheet\"></ng-content>\n    </ion-fab-list>\n  }\n</ion-fab>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"kirbydesign-designsystem-fab-sheet.mjs","names":[],"sources":["../../fab-sheet/src/fab-sheet.component.ts","../../fab-sheet/src/fab-sheet.component.html"],"sourcesContent":["import {\n  AfterContentInit,\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ContentChild,\n  ElementRef,\n  HostBinding,\n  Inject,\n  Input,\n  Renderer2,\n  ViewChild,\n} from '@angular/core';\nimport { ActionSheetComponent } from '@kirbydesign/designsystem/modal';\nimport { IonBackdrop, IonFab, IonFabButton, IonFabList } from '@ionic/angular';\nimport { DOCUMENT } from '@angular/common';\n\nconst KIRBY_FAB_SHEET_DEPRECATION_WARNING =\n  '[Kirby fab sheet] Deprecated - Use Header with Action Group instead';\n\n@Component({\n  imports: [IonBackdrop, IonFab, IonFabButton, IonFabList],\n  selector: 'kirby-fab-sheet',\n  templateUrl: './fab-sheet.component.html',\n  styleUrls: ['./fab-sheet.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class FabSheetComponent implements AfterContentInit, AfterViewInit {\n  @Input() disabled: boolean = false;\n  @Input() horizontalAlignment: 'left' | 'center' | 'right' = 'right';\n\n  private _isFabSheetOpen: boolean = false;\n  @HostBinding('class.is-open')\n  get isFabSheetOpen() {\n    return this._isFabSheetOpen;\n  }\n\n  @ContentChild(ActionSheetComponent, { static: false }) actionSheet: ActionSheetComponent;\n\n  @ViewChild(IonFabButton, { static: true, read: ElementRef })\n  ionFabButton: ElementRef<HTMLElement>;\n\n  @ViewChild(IonFab, { static: true })\n  ionFab: IonFab;\n\n  constructor(\n    private changeDetectorRef: ChangeDetectorRef,\n    private renderer: Renderer2,\n    @Inject(DOCUMENT) private document: Document\n  ) {\n    console.warn(KIRBY_FAB_SHEET_DEPRECATION_WARNING);\n  }\n\n  ngAfterContentInit(): void {\n    if (this.actionSheet) {\n      this.actionSheet.hideCancel = true;\n    }\n  }\n\n  ngAfterViewInit(): void {\n    this.renderer.removeClass(this.document.body, 'backdrop-no-scroll');\n  }\n\n  hideActions() {\n    this.ionFab.close().then(() => this.fabSheetStateChanged(false));\n  }\n\n  onFabButtonClick() {\n    setTimeout(() => {\n      this.fabSheetStateChanged(this.ionFab.activated);\n    });\n  }\n\n  onFabListClick() {\n    this.ionFab.close().then(() => {\n      this.fabSheetStateChanged(false);\n    });\n  }\n\n  fabSheetStateChanged(isOpen: boolean) {\n    this._isFabSheetOpen = isOpen;\n    if (this.isFabSheetOpen) {\n      this.renderer.addClass(this.document.body, 'fab-sheet-active');\n      this.renderer.addClass(this.document.body, 'backdrop-no-scroll');\n    } else {\n      this.renderer.removeClass(this.document.body, 'fab-sheet-active');\n      this.renderer.removeClass(this.document.body, 'backdrop-no-scroll');\n    }\n\n    this.changeDetectorRef.detectChanges();\n  }\n}\n","<ion-backdrop\n  [class.backdrop-visible]=\"isFabSheetOpen\"\n  [stopPropagation]=\"false\"\n  (ionBackdropTap)=\"hideActions()\"\n  (click)=\"hideActions()\"\n></ion-backdrop>\n<ion-fab>\n  <ion-fab-button\n    (click)=\"onFabButtonClick()\"\n    [disabled]=\"disabled\"\n    [attr.disabled]=\"disabled ? true : null\"\n    tabindex=\"-1\"\n  >\n    <ng-content select=\"kirby-icon\"></ng-content>\n  </ion-fab-button>\n  @if (actionSheet) {\n    <ion-fab-list side=\"top\" class=\"{{ horizontalAlignment }}\" (click)=\"onFabListClick()\">\n      <ng-content select=\"kirby-action-sheet\"></ng-content>\n    </ion-fab-list>\n  }\n</ion-fab>\n"],"mappings":"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"}

package/fesm2022/kirbydesign-designsystem-flag.mjs

@@ -1,36 +1,70 @@
-import * as i0 from '@angular/core';
-import { HostBinding, Input, ChangeDetectionStrategy, Component } from '@angular/core';
-
-class FlagComponent {
-    constructor() {
-        this.size = 'md';
-        this.themeColor = 'transparent';
-    }
-    get _cssClass() {
-        return [this.themeColor, this.size];
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FlagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.23", type: FlagComponent, isStandalone: true, selector: "kirby-flag", inputs: { size: "size", themeColor: "themeColor" }, host: { properties: { "class": "this._cssClass" } }, ngImport: i0, template: `
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, HostBinding, Input } from "@angular/core";
+var FlagComponent = class FlagComponent {
+	constructor() {
+		this.size = "md";
+		this.themeColor = "transparent";
+	}
+	get _cssClass() {
+		return [this.themeColor, this.size];
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: FlagComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			type: FlagComponent,
+			isStandalone: true,
+			selector: "kirby-flag",
+			inputs: {
+				size: "size",
+				themeColor: "themeColor"
+			},
+			host: { properties: { "class": "this._cssClass" } },
+			ngImport: i0,
+			template: `
     <ng-content></ng-content>
-  `, isInline: true, styles: [":host{display:inline-block;background-color:var(--kirby-flag-background-color, transparent);color:var(--kirby-flag-color, var(--kirby-white-contrast));border:1px solid var(--kirby-flag-border-color, var(--kirby-medium));border-radius:var(--kirby-border-radius-xs);font-size:var(--kirby-font-size-n);padding:calc(var(--kirby-spacing-xxxs) + 1px) var(--kirby-spacing-xxs);font-weight:var(--kirby-font-weight-medium);line-height:1}:host.sm{font-size:var(--kirby-font-size-s);padding-block:var(--kirby-spacing-xxxs)}:host.xs{font-size:var(--kirby-font-size-xs);padding:calc(var(--kirby-spacing-xxxs) - 1px) var(--kirby-spacing-xxxs)}:host.success{--kirby-flag-background-color: var(--kirby-success-tint)}:host.warning{--kirby-flag-background-color: var(--kirby-warning-tint)}:host.danger{--kirby-flag-background-color: var(--kirby-danger-tint)}:host.semi-light{--kirby-flag-background-color: var(--kirby-semi-light)}:host{--kirby-flag-border-color: var(--kirby-flag-background-color);--kirby-flag-color: var(--kirby-black)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FlagComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'kirby-flag', template: `
+  `,
+			isInline: true,
+			styles: [":host{--kirby-flag-color: var(--kirby-color-content-neutral);--kirby-flag-border-color: var(--kirby-color-border-neutral);display:inline-block;background-color:var(--kirby-flag-background-color, transparent);color:var(--kirby-flag-color);border:1px solid var(--kirby-flag-border-color);border-radius:var(--kirby-border-radius-xs);font-size:var(--kirby-font-size-n);padding:calc(var(--kirby-spacing-xxxs) + 1px) var(--kirby-spacing-xxs);font-weight:var(--kirby-font-weight-medium);line-height:1}:host.sm{font-size:var(--kirby-font-size-s);padding-block:var(--kirby-spacing-xxxs)}:host.xs{font-size:var(--kirby-font-size-xs);padding:calc(var(--kirby-spacing-xxxs) - 1px) var(--kirby-spacing-xxxs)}:host.success{--kirby-flag-background-color: var(--kirby-color-fill-success-quiet);--kirby-flag-color: var(--kirby-color-content-success-quiet);--kirby-flag-border-color: var(--kirby-color-border-success-quiet)}:host.warning{--kirby-flag-background-color: var(--kirby-color-fill-warning-quiet);--kirby-flag-color: var(--kirby-color-content-warning-quiet);--kirby-flag-border-color: var(--kirby-color-border-warning-quiet)}:host.danger{--kirby-flag-background-color: var(--kirby-color-fill-danger-quiet);--kirby-flag-color: var(--kirby-color-content-danger-quiet);--kirby-flag-border-color: var(--kirby-color-border-danger-quiet)}:host.semi-light{--kirby-flag-background-color: var(--kirby-color-fill-neutral)}\n"],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: FlagComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "kirby-flag",
+			template: `
     <ng-content></ng-content>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-block;background-color:var(--kirby-flag-background-color, transparent);color:var(--kirby-flag-color, var(--kirby-white-contrast));border:1px solid var(--kirby-flag-border-color, var(--kirby-medium));border-radius:var(--kirby-border-radius-xs);font-size:var(--kirby-font-size-n);padding:calc(var(--kirby-spacing-xxxs) + 1px) var(--kirby-spacing-xxs);font-weight:var(--kirby-font-weight-medium);line-height:1}:host.sm{font-size:var(--kirby-font-size-s);padding-block:var(--kirby-spacing-xxxs)}:host.xs{font-size:var(--kirby-font-size-xs);padding:calc(var(--kirby-spacing-xxxs) - 1px) var(--kirby-spacing-xxxs)}:host.success{--kirby-flag-background-color: var(--kirby-success-tint)}:host.warning{--kirby-flag-background-color: var(--kirby-warning-tint)}:host.danger{--kirby-flag-background-color: var(--kirby-danger-tint)}:host.semi-light{--kirby-flag-background-color: var(--kirby-semi-light)}:host{--kirby-flag-border-color: var(--kirby-flag-background-color);--kirby-flag-color: var(--kirby-black)}\n"] }]
-        }], propDecorators: { size: [{
-                type: Input
-            }], themeColor: [{
-                type: Input
-            }], _cssClass: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+  `,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			styles: [":host{--kirby-flag-color: var(--kirby-color-content-neutral);--kirby-flag-border-color: var(--kirby-color-border-neutral);display:inline-block;background-color:var(--kirby-flag-background-color, transparent);color:var(--kirby-flag-color);border:1px solid var(--kirby-flag-border-color);border-radius:var(--kirby-border-radius-xs);font-size:var(--kirby-font-size-n);padding:calc(var(--kirby-spacing-xxxs) + 1px) var(--kirby-spacing-xxs);font-weight:var(--kirby-font-weight-medium);line-height:1}:host.sm{font-size:var(--kirby-font-size-s);padding-block:var(--kirby-spacing-xxxs)}:host.xs{font-size:var(--kirby-font-size-xs);padding:calc(var(--kirby-spacing-xxxs) - 1px) var(--kirby-spacing-xxxs)}:host.success{--kirby-flag-background-color: var(--kirby-color-fill-success-quiet);--kirby-flag-color: var(--kirby-color-content-success-quiet);--kirby-flag-border-color: var(--kirby-color-border-success-quiet)}:host.warning{--kirby-flag-background-color: var(--kirby-color-fill-warning-quiet);--kirby-flag-color: var(--kirby-color-content-warning-quiet);--kirby-flag-border-color: var(--kirby-color-border-warning-quiet)}:host.danger{--kirby-flag-background-color: var(--kirby-color-fill-danger-quiet);--kirby-flag-color: var(--kirby-color-content-danger-quiet);--kirby-flag-border-color: var(--kirby-color-border-danger-quiet)}:host.semi-light{--kirby-flag-background-color: var(--kirby-color-fill-neutral)}\n"]
+		}]
+	}],
+	propDecorators: {
+		size: [{ type: Input }],
+		themeColor: [{ type: Input }],
+		_cssClass: [{
+			type: HostBinding,
+			args: ["class"]
+		}]
+	}
+});
 export { FlagComponent };
-//# sourceMappingURL=kirbydesign-designsystem-flag.mjs.map
+
+//# sourceMappingURL=kirbydesign-designsystem-flag.mjs.map

package/fesm2022/kirbydesign-designsystem-flag.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"kirbydesign-designsystem-flag.mjs","sources":["../../flag/src/flag.component.ts","../../flag/src/kirbydesign-designsystem-flag.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';\n\nexport type FlagThemeColor = 'success' | 'warning' | 'danger' | 'semi-light' | 'transparent';\n\n@Component({\n  selector: 'kirby-flag',\n  template: `\n    <ng-content></ng-content>\n  `,\n  styleUrls: ['./flag.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class FlagComponent {\n  @Input() size: 'xs' | 'sm' | 'md' = 'md';\n  @Input() themeColor: FlagThemeColor = 'transparent';\n\n  @HostBinding('class')\n  get _cssClass() {\n    return [this.themeColor, this.size];\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;MAYa,aAAa,CAAA;AAR1B,IAAA,WAAA,GAAA;QASW,IAAA,CAAA,IAAI,GAAuB,IAAI;QAC/B,IAAA,CAAA,UAAU,GAAmB,aAAa;AAMpD,IAAA;AAJC,IAAA,IACI,SAAS,GAAA;QACX,OAAO,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC;IACrC;kIAPW,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAb,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,aAAa,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,UAAA,EAAA,YAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,gBAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EANd;;AAET,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,+/BAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FAIU,aAAa,EAAA,UAAA,EAAA,CAAA;kBARzB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,YAAY,EAAA,QAAA,EACZ;;GAET,EAAA,eAAA,EAEgB,uBAAuB,CAAC,MAAM,EAAA,MAAA,EAAA,CAAA,+/BAAA,CAAA,EAAA;;sBAG9C;;sBACA;;sBAEA,WAAW;uBAAC,OAAO;;;AChBtB;;AAEG;;;;"}
+{"version":3,"file":"kirbydesign-designsystem-flag.mjs","names":[],"sources":["../../flag/src/flag.component.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';\n\nexport type FlagThemeColor = 'success' | 'warning' | 'danger' | 'semi-light' | 'transparent';\n\n@Component({\n  selector: 'kirby-flag',\n  template: `\n    <ng-content></ng-content>\n  `,\n  styleUrls: ['./flag.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class FlagComponent {\n  @Input() size: 'xs' | 'sm' | 'md' = 'md';\n  @Input() themeColor: FlagThemeColor = 'transparent';\n\n  @HostBinding('class')\n  get _cssClass() {\n    return [this.themeColor, this.size];\n  }\n}\n"],"mappings":";;AAYA,IAAa,gBAAb,MAAa,cAAa;CAR1B,cAAA;EASW,KAAA,OAA2B;EAC3B,KAAA,aAA6B;CAMvC;CAJC,IACI,YAAS;EACX,OAAO,CAAC,KAAK,YAAY,KAAK,IAAI;CACpC;CAPW;EAAA,KAAA,OAAA,GAAA,mBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,UAAA;GAAA,MAAA;GAAa,MAAA,CAAA;GAAA,QAAA,GAAA,gBAAA;EAAA,CAAA;CAAA;CAAb;EAAA,KAAA,OAAA,GAAA,qBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,MAAA;GAAa,cAAA;GAAA,UAAA;GAAA,QAAA;IAAA,MAAA;IAAA,YAAA;GAAA;GAAA,MAAA,EAAA,YAAA,EAAA,SAAA,iBAAA,EAAA;GAAA,UAAA;GAAA,UANd;;;GAET,UAAA;GAAA,QAAA,CAAA,g4CAAA;GAAA,iBAAA,GAAA,wBAAA;EAAA,CAAA;CAAA;;AAIU,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAa,YAAA,CAAA;EARzB,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAY,UACZ;;;GAET,iBAEgB,wBAAwB;GAAM,QAAA,CAAA,g4CAAA;EAAA,CAAA;;;EAG9C,MAAA,CAAA,EAAA,MAAA,MAAA,CAAA;EACA,YAAA,CAAA,EAAA,MAAA,MAAA,CAAA;;GAEA,MAAA;GAAY,MAAA,CAAA,OAAO"}