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

package/fesm2022/kirbydesign-designsystem-shared.mjs

@@ -1,550 +1,686 @@
-import * as i0 from '@angular/core';
-import { Injectable, ElementRef, Input, HostBinding, Directive, LOCALE_ID, Inject } from '@angular/core';
-import * as i2 from '@kirbydesign/designsystem/helpers';
-import { DesignTokenHelper, ColorHelper, LineClampHelper } from '@kirbydesign/designsystem/helpers';
-
-/**
- * Factory that creates a new ResizeObserver and allows us to stub it out in unit tests.
- * @docs-private
- */
-class ResizeObserverFactory {
-    create(callback) {
-        return typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(callback);
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ResizeObserverFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ResizeObserverFactory, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ResizeObserverFactory, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
-class ResizeObserverService {
-    constructor(_resizeObserverFactory) {
-        this._resizeObserverFactory = _resizeObserverFactory;
-        this.observedElements = new WeakMap();
-        this.observer = this._resizeObserverFactory.create((entries) => this.handleResize(entries));
-    }
-    observe(elementOrRef, action) {
-        const element = elementOrRef instanceof ElementRef ? elementOrRef.nativeElement : elementOrRef;
-        if (!this.observedElements.has(element)) {
-            if (this.observer) {
-                this.observer.observe(element);
-            }
-            this.observedElements.set(element, action);
-        }
-    }
-    ngOnDestroy() {
-        if (this.observer) {
-            this.observer.disconnect();
-        }
-        this.observedElements = null;
-    }
-    unobserve(elementOrRef) {
-        const element = elementOrRef instanceof ElementRef ? elementOrRef.nativeElement : elementOrRef;
-        if (this.observedElements.has(element)) {
-            if (this.observer) {
-                this.observer.unobserve(element);
-            }
-            this.observedElements.delete(element);
-        }
-    }
-    handleResize(entries) {
-        entries.forEach((entry) => {
-            const action = this.observedElements.get(entry.target);
-            if (action) {
-                action(entry);
-            }
-        });
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ResizeObserverService, deps: [{ token: ResizeObserverFactory }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ResizeObserverService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ResizeObserverService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: ResizeObserverFactory }] });
-
+import * as i0 from "@angular/core";
+import { Directive, ElementRef, HostBinding, Inject, Injectable, Input, LOCALE_ID } from "@angular/core";
+import * as i2 from "@kirbydesign/designsystem/helpers";
+import { ColorHelper, DesignTokenHelper, LineClampHelper } from "@kirbydesign/designsystem/helpers";
+var ResizeObserverFactory = class ResizeObserverFactory {
+	create(callback) {
+		return typeof ResizeObserver === "undefined" ? null : new ResizeObserver(callback);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: ResizeObserverFactory,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Injectable
+		});
+	}
+	static {
+		this.ɵprov = i0.ɵɵngDeclareInjectable({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: ResizeObserverFactory,
+			providedIn: "root"
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: ResizeObserverFactory,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}]
+});
+var ResizeObserverService = class ResizeObserverService {
+	constructor(_resizeObserverFactory) {
+		this._resizeObserverFactory = _resizeObserverFactory;
+		this.observedElements = /* @__PURE__ */ new WeakMap();
+		this.observer = this._resizeObserverFactory.create((entries) => this.handleResize(entries));
+	}
+	observe(elementOrRef, action) {
+		const element = elementOrRef instanceof ElementRef ? elementOrRef.nativeElement : elementOrRef;
+		if (!this.observedElements.has(element)) {
+			if (this.observer) this.observer.observe(element);
+			this.observedElements.set(element, action);
+		}
+	}
+	ngOnDestroy() {
+		if (this.observer) this.observer.disconnect();
+	}
+	unobserve(elementOrRef) {
+		const element = elementOrRef instanceof ElementRef ? elementOrRef.nativeElement : elementOrRef;
+		if (this.observedElements.has(element)) {
+			if (this.observer) this.observer.unobserve(element);
+			this.observedElements.delete(element);
+		}
+	}
+	handleResize(entries) {
+		entries.forEach((entry) => {
+			const action = this.observedElements.get(entry.target);
+			if (action) action(entry);
+		});
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: ResizeObserverService,
+			deps: [{ token: ResizeObserverFactory }],
+			target: i0.ɵɵFactoryTarget.Injectable
+		});
+	}
+	static {
+		this.ɵprov = i0.ɵɵngDeclareInjectable({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: ResizeObserverService,
+			providedIn: "root"
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: ResizeObserverService,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}],
+	ctorParameters: () => [{ type: ResizeObserverFactory }]
+});
 const TEXT_RESIZE_THRESHOLD = parseFloat(DesignTokenHelper.textResizeThreshold());
-const TEXT_RESIZE_CLASS = 'kirby-trt';
+const TEXT_RESIZE_CLASS = "kirby-trt";
 const BASE_FONT_SIZE_PX = parseInt(DesignTokenHelper.baseFontSizePx());
-/**
- * Element width combines both signals: rem scaling (desktop/iOS) and env(preferred-text-scale)
- * (Android). On platforms where env() is unsupported, the fallback `1` makes it a no-op multiplier.
- */
-const OBSERVER_ELEMENT_STYLES = 'position:absolute;width:calc(1rem * env(preferred-text-scale, 1));height:1rem;top:-9999px;visibility:hidden;pointer-events:none';
-/**
- * Detects when text is resized above a certain threshold in browser/OS settings and toggles a
- * `kirby-trt` class on the root html element.
- *
- * Uses a `ResizeObserver` on a hidden element sized with `calc(1rem * env(preferred-text-scale, 1))`.
- * This combines two detections into one element:
- *
- * - **rem scaling** — on desktop browsers and iOS, changing text size modifies the root font-size,
- *   which changes `1rem` and triggers the observer.
- *
- * - **`env(preferred-text-scale)`** — on platforms that support this CSS environment variable
- *   (e.g. Android Chrome/WebView), the multiplier reflects the OS/browser text scale factor.
- *   When the user changes font size in system settings, the env value updates and the element resizes.
- *
- * On platforms where `env(preferred-text-scale)` is not supported, the value falls back to `1`,
- * making the width equivalent to `1rem`.
- *
- * @example
- * ```scss
- * @include utils.media('<medium') {
- *   :host-context(.kirby-trt) {
- *     // Styles for narrow screens with scaled text
- *   }
- * }
- * ```
- *
- * @see https://drafts.csswg.org/css-env-1/#preferred-text-scale
- */
-class TextResizeObserverService {
-    constructor() {
-        this.resizeObserver = null;
-        this.textResizeObserverElement = null;
-        this.onObservedResize = () => {
-            const widthInPx = this.textResizeObserverElement?.offsetWidth ?? BASE_FONT_SIZE_PX;
-            const scale = widthInPx / BASE_FONT_SIZE_PX;
-            document.documentElement.classList.toggle(TEXT_RESIZE_CLASS, scale > TEXT_RESIZE_THRESHOLD);
-        };
-    }
-    initialize() {
-        if (typeof window === 'undefined') {
-            return;
-        }
-        this.textResizeObserverElement = document.createElement('div');
-        this.textResizeObserverElement.style.cssText = OBSERVER_ELEMENT_STYLES;
-        document.body.appendChild(this.textResizeObserverElement);
-        this.resizeObserver = new ResizeObserver(this.onObservedResize);
-        this.resizeObserver.observe(this.textResizeObserverElement);
-        this.onObservedResize();
-    }
-    ngOnDestroy() {
-        this.resizeObserver?.disconnect();
-        this.textResizeObserverElement?.remove();
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: TextResizeObserverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: TextResizeObserverService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: TextResizeObserverService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
-class ThemeColorDirective {
-    constructor() {
-        this._isDefault = true;
-    }
-    get isDefault() {
-        return this._isDefault;
-    }
-    get isPrimary() {
-        return this._isPrimary;
-    }
-    get isSecondary() {
-        return this._isSecondary;
-    }
-    get isTertiary() {
-        return this._isTertiary;
-    }
-    get isSuccess() {
-        return this._isSuccess;
-    }
-    get isWarning() {
-        return this._isWarning;
-    }
-    get isDanger() {
-        return this._isDanger;
-    }
-    get isLight() {
-        return this._isLight;
-    }
-    get isMedium() {
-        return this._isMedium;
-    }
-    get isDark() {
-        return this._isDark;
-    }
-    get isWhite() {
-        return this._isWhite;
-    }
-    get isBrightnessWhite() {
-        return this._isBrightnessWhite;
-    }
-    get isBrightnessLight() {
-        return this._isBrightnessLight;
-    }
-    get isBrightnessDark() {
-        return this._isBrightnessDark;
-    }
-    set themeColor(value) {
-        this._isDefault = !value;
-        this._isPrimary = value === 'primary';
-        this._isSecondary = value === 'secondary';
-        this._isTertiary = value === 'tertiary';
-        this._isSuccess = value === 'success';
-        this._isWarning = value === 'warning';
-        this._isDanger = value === 'danger';
-        this._isLight = value === 'light';
-        this._isMedium = value === 'medium';
-        this._isDark = value === 'dark';
-        this._isWhite = value === 'white';
-        const colorBrightness = ColorHelper.getColorBrightness(value);
-        this._isBrightnessWhite = colorBrightness === 'white';
-        this._isBrightnessLight = colorBrightness === 'light';
-        this._isBrightnessDark = colorBrightness === 'dark';
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ThemeColorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.23", type: ThemeColorDirective, isStandalone: true, selector: "kirby-avatar[themeColor],\n             kirby-card[themeColor],\n             kirby-icon[themeColor],\n             kirby-progress-circle-ring[themeColor],\n             kirby-modal-footer[themeColor],\n             kirby-empty-state[themeColor]", inputs: { themeColor: "themeColor" }, host: { properties: { "class.default": "this.isDefault", "class.primary": "this.isPrimary", "class.secondary": "this.isSecondary", "class.tertiary": "this.isTertiary", "class.success": "this.isSuccess", "class.warning": "this.isWarning", "class.danger": "this.isDanger", "class.light": "this.isLight", "class.medium": "this.isMedium", "class.dark": "this.isDark", "class.white": "this.isWhite", "class.kirby-color-brightness-white": "this.isBrightnessWhite", "class.kirby-color-brightness-light": "this.isBrightnessLight", "class.kirby-color-brightness-dark": "this.isBrightnessDark" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ThemeColorDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    standalone: true,
-                    // eslint-disable-next-line @angular-eslint/directive-selector
-                    selector: `kirby-avatar[themeColor],
+const OBSERVER_ELEMENT_STYLES = "position:absolute;width:calc(1rem * env(preferred-text-scale, 1));height:1rem;top:-9999px;visibility:hidden;pointer-events:none";
+var TextResizeObserverService = class TextResizeObserverService {
+	constructor() {
+		this.resizeObserver = null;
+		this.textResizeObserverElement = null;
+		this.onObservedResize = () => {
+			const scale = (this.textResizeObserverElement?.offsetWidth ?? BASE_FONT_SIZE_PX) / BASE_FONT_SIZE_PX;
+			document.documentElement.classList.toggle(TEXT_RESIZE_CLASS, scale > TEXT_RESIZE_THRESHOLD);
+		};
+	}
+	initialize() {
+		if (typeof window === "undefined") return;
+		this.textResizeObserverElement = document.createElement("div");
+		this.textResizeObserverElement.style.cssText = OBSERVER_ELEMENT_STYLES;
+		document.body.appendChild(this.textResizeObserverElement);
+		this.resizeObserver = new ResizeObserver(this.onObservedResize);
+		this.resizeObserver.observe(this.textResizeObserverElement);
+		this.onObservedResize();
+	}
+	ngOnDestroy() {
+		this.resizeObserver?.disconnect();
+		this.textResizeObserverElement?.remove();
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: TextResizeObserverService,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Injectable
+		});
+	}
+	static {
+		this.ɵprov = i0.ɵɵngDeclareInjectable({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: TextResizeObserverService,
+			providedIn: "root"
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: TextResizeObserverService,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}]
+});
+var ThemeColorDirective = class ThemeColorDirective {
+	constructor() {
+		this._isDefault = true;
+		this._isPrimary = false;
+		this._isSecondary = false;
+		this._isTertiary = false;
+		this._isSuccess = false;
+		this._isWarning = false;
+		this._isDanger = false;
+		this._isLight = false;
+		this._isMedium = false;
+		this._isDark = false;
+		this._isWhite = false;
+		this._isBrightnessWhite = false;
+		this._isBrightnessLight = false;
+		this._isBrightnessDark = false;
+	}
+	get isDefault() {
+		return this._isDefault;
+	}
+	get isPrimary() {
+		return this._isPrimary;
+	}
+	get isSecondary() {
+		return this._isSecondary;
+	}
+	get isTertiary() {
+		return this._isTertiary;
+	}
+	get isSuccess() {
+		return this._isSuccess;
+	}
+	get isWarning() {
+		return this._isWarning;
+	}
+	get isDanger() {
+		return this._isDanger;
+	}
+	get isLight() {
+		return this._isLight;
+	}
+	get isMedium() {
+		return this._isMedium;
+	}
+	get isDark() {
+		return this._isDark;
+	}
+	get isWhite() {
+		return this._isWhite;
+	}
+	get isBrightnessWhite() {
+		return this._isBrightnessWhite;
+	}
+	get isBrightnessLight() {
+		return this._isBrightnessLight;
+	}
+	get isBrightnessDark() {
+		return this._isBrightnessDark;
+	}
+	set themeColor(value) {
+		this._isDefault = !value;
+		this._isPrimary = value === "primary";
+		this._isSecondary = value === "secondary";
+		this._isTertiary = value === "tertiary";
+		this._isSuccess = value === "success";
+		this._isWarning = value === "warning";
+		this._isDanger = value === "danger";
+		this._isLight = value === "light";
+		this._isMedium = value === "medium";
+		this._isDark = value === "dark";
+		this._isWhite = value === "white";
+		const colorBrightness = ColorHelper.getColorBrightness(value);
+		this._isBrightnessWhite = colorBrightness === "white";
+		this._isBrightnessLight = colorBrightness === "light";
+		this._isBrightnessDark = colorBrightness === "dark";
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: ThemeColorDirective,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			type: ThemeColorDirective,
+			isStandalone: true,
+			selector: "kirby-avatar[themeColor],\n             kirby-card[themeColor],\n             kirby-icon[themeColor],\n             kirby-progress-circle-ring[themeColor],\n             kirby-modal-footer[themeColor],\n             kirby-empty-state[themeColor]",
+			inputs: { themeColor: "themeColor" },
+			host: { properties: {
+				"class.default": "this.isDefault",
+				"class.primary": "this.isPrimary",
+				"class.secondary": "this.isSecondary",
+				"class.tertiary": "this.isTertiary",
+				"class.success": "this.isSuccess",
+				"class.warning": "this.isWarning",
+				"class.danger": "this.isDanger",
+				"class.light": "this.isLight",
+				"class.medium": "this.isMedium",
+				"class.dark": "this.isDark",
+				"class.white": "this.isWhite",
+				"class.kirby-color-brightness-white": "this.isBrightnessWhite",
+				"class.kirby-color-brightness-light": "this.isBrightnessLight",
+				"class.kirby-color-brightness-dark": "this.isBrightnessDark"
+			} },
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: ThemeColorDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			standalone: true,
+			selector: `kirby-avatar[themeColor],
              kirby-card[themeColor],
              kirby-icon[themeColor],
              kirby-progress-circle-ring[themeColor],
              kirby-modal-footer[themeColor],
-             kirby-empty-state[themeColor]`,
-                }]
-        }], propDecorators: { isDefault: [{
-                type: HostBinding,
-                args: ['class.default']
-            }], isPrimary: [{
-                type: HostBinding,
-                args: ['class.primary']
-            }], isSecondary: [{
-                type: HostBinding,
-                args: ['class.secondary']
-            }], isTertiary: [{
-                type: HostBinding,
-                args: ['class.tertiary']
-            }], isSuccess: [{
-                type: HostBinding,
-                args: ['class.success']
-            }], isWarning: [{
-                type: HostBinding,
-                args: ['class.warning']
-            }], isDanger: [{
-                type: HostBinding,
-                args: ['class.danger']
-            }], isLight: [{
-                type: HostBinding,
-                args: ['class.light']
-            }], isMedium: [{
-                type: HostBinding,
-                args: ['class.medium']
-            }], isDark: [{
-                type: HostBinding,
-                args: ['class.dark']
-            }], isWhite: [{
-                type: HostBinding,
-                args: ['class.white']
-            }], isBrightnessWhite: [{
-                type: HostBinding,
-                args: ['class.kirby-color-brightness-white']
-            }], isBrightnessLight: [{
-                type: HostBinding,
-                args: ['class.kirby-color-brightness-light']
-            }], isBrightnessDark: [{
-                type: HostBinding,
-                args: ['class.kirby-color-brightness-dark']
-            }], themeColor: [{
-                type: Input
-            }] } });
-
-class ComponentLoaderDirective {
-    constructor(componentFactoryResolver, viewContainerRef, renderer) {
-        this.componentFactoryResolver = componentFactoryResolver;
-        this.viewContainerRef = viewContainerRef;
-        this.renderer = renderer;
-    }
-    ngOnInit() {
-        this.loadCard();
-    }
-    loadCard() {
-        const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.configuration.component);
-        this.viewContainerRef.clear();
-        const componentRef = this.viewContainerRef.createComponent(componentFactory);
-        if (componentRef && componentRef.location && componentRef.location.nativeElement) {
-            this.renderer.addClass(componentRef.location.nativeElement, this.cssClass);
-        }
-        componentRef.instance.data = this.configuration.data;
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ComponentLoaderDirective, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.ViewContainerRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.23", type: ComponentLoaderDirective, isStandalone: true, selector: "[kirbyLoadComponent]", inputs: { configuration: ["kirbyLoadComponent", "configuration"], cssClass: "cssClass" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ComponentLoaderDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kirbyLoadComponent]',
-                    standalone: true,
-                }]
-        }], ctorParameters: () => [{ type: i0.ComponentFactoryResolver }, { type: i0.ViewContainerRef }, { type: i0.Renderer2 }], propDecorators: { configuration: [{
-                type: Input,
-                args: ['kirbyLoadComponent']
-            }], cssClass: [{
-                type: Input
-            }] } });
-
-class FitHeadingDirective {
-    constructor(elementRef, renderer, resizeObserverService, lineClampHelper) {
-        this.elementRef = elementRef;
-        this.renderer = renderer;
-        this.resizeObserverService = resizeObserverService;
-        this.lineClampHelper = lineClampHelper;
-        this.headingSizes = [
-            {
-                name: 'h1',
-                fontSize: 'var(--kirby-font-size-xl)',
-                lineHeight: 'var(--kirby-line-height-xl)',
-            },
-            {
-                name: 'h2',
-                fontSize: 'var(--kirby-font-size-l)',
-                lineHeight: 'var(--kirby-line-height-l)',
-            },
-            {
-                name: 'h3',
-                fontSize: 'var(--kirby-font-size-m)',
-                lineHeight: 'var(--kirby-line-height-m)',
-            },
-        ];
-    }
-    ngOnInit() {
-        if (this.config && this.config.maxLines) {
-            this.observeResize();
-            this.isObservingHostElement = true;
-        }
-    }
-    ngOnDestroy() {
-        if (this.isObservingHostElement) {
-            this.resizeObserverService.unobserve(this.elementRef);
-            if (this.hostElementClone) {
-                this.renderer.removeChild(this.elementRef.nativeElement, this.hostElementClone);
-            }
-        }
-    }
-    observeResize() {
-        this.resizeObserverService.observe(this.elementRef, () => {
-            /**
-             * setTimeout is used here to avoid repeated size changes
-             * while the first size change is still ongoing.
-             * This would result in the ResizeObserver being called again,
-             * giving 'ResizeObserver loop limit exceeded' types of errors.
-             */
-            setTimeout(() => {
-                this.scaleHeader();
-            }, 0);
-        });
-    }
-    scaleHeader() {
-        if (this.isScalingHeader)
-            return;
-        this.isScalingHeader = true;
-        if (!this.hostElementClone) {
-            // Capture original CSS size before any scaling
-            const computed = getComputedStyle(this.elementRef.nativeElement);
-            this.originalSize = {
-                name: 'original',
-                fontSize: computed.fontSize,
-                lineHeight: computed.lineHeight,
-            };
-            // Skip line-clamp for elements with line-height: normal (e.g. key-value) — conflicts with flex layout
-            if (computed.lineHeight !== 'normal') {
-                this.lineClampHelper.setMaxLines(this.elementRef.nativeElement, this.config.maxLines);
-            }
-            this.hostElementClone = this.generateHostElementClone();
-            this.renderer.appendChild(this.elementRef.nativeElement.parentElement, this.hostElementClone);
-        }
-        // Use parent width to avoid feedback loop from shrink-wrapped element width
-        const availableWidth = this.elementRef.nativeElement.parentElement.clientWidth;
-        this.renderer.setStyle(this.hostElementClone, 'width', `${availableWidth}px`);
-        // Try original CSS size first, then scale down through heading sizes
-        const candidates = [this.originalSize, ...this.headingSizes];
-        const fallbackSize = this.headingSizes[this.headingSizes.length - 1];
-        const fittedSize = candidates.find(this.canFitHeading.bind(this)) || fallbackSize;
-        this.setSize(this.elementRef.nativeElement, fittedSize);
-        this.lineClampHelper.setLineHeight(this.elementRef.nativeElement, fittedSize.lineHeight);
-        this.isScalingHeader = false;
-    }
-    canFitHeading(size) {
-        this.setSize(this.hostElementClone, size);
-        // Resolve line-height to pixels via getComputedStyle (handles unitless ratios)
-        const computedLineHeight = parseFloat(getComputedStyle(this.hostElementClone).lineHeight);
-        // Skip vertical check for line-height: normal (single-line content like values)
-        const fitsVertically = isNaN(computedLineHeight)
-            ? true
-            : Math.round(this.hostElementClone.clientHeight / computedLineHeight) <= this.config.maxLines;
-        // Check horizontal overflow for non-wrapping content (e.g. numbers)
-        const fitsHorizontally = this.hostElementClone.scrollWidth <= this.hostElementClone.clientWidth;
-        return fitsVertically && fitsHorizontally;
-    }
-    generateHostElementClone() {
-        const clone = this.elementRef.nativeElement.cloneNode(true);
-        this.renderer.setStyle(clone, 'position', 'absolute');
-        this.renderer.setStyle(clone, 'visibility', 'hidden');
-        this.lineClampHelper.removeLineClamp(clone);
-        return clone;
-    }
-    setSize(el, size) {
-        this.renderer.setStyle(el, 'font-size', size.fontSize);
-        this.renderer.setStyle(el, 'line-height', size.lineHeight);
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FitHeadingDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: ResizeObserverService }, { token: i2.LineClampHelper }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.23", type: FitHeadingDirective, isStandalone: true, selector: "h1[kirbyFitHeading],h2[kirbyFitHeading],h3[kirbyFitHeading],[kirbyFitHeading]", inputs: { config: ["kirbyFitHeading", "config"] }, providers: [LineClampHelper], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FitHeadingDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    standalone: true,
-                    selector: `h1[kirbyFitHeading],h2[kirbyFitHeading],h3[kirbyFitHeading],[kirbyFitHeading]`,
-                    providers: [LineClampHelper],
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: ResizeObserverService }, { type: i2.LineClampHelper }], propDecorators: { config: [{
-                type: Input,
-                args: ['kirbyFitHeading']
-            }] } });
-
+             kirby-empty-state[themeColor]`
+		}]
+	}],
+	propDecorators: {
+		isDefault: [{
+			type: HostBinding,
+			args: ["class.default"]
+		}],
+		isPrimary: [{
+			type: HostBinding,
+			args: ["class.primary"]
+		}],
+		isSecondary: [{
+			type: HostBinding,
+			args: ["class.secondary"]
+		}],
+		isTertiary: [{
+			type: HostBinding,
+			args: ["class.tertiary"]
+		}],
+		isSuccess: [{
+			type: HostBinding,
+			args: ["class.success"]
+		}],
+		isWarning: [{
+			type: HostBinding,
+			args: ["class.warning"]
+		}],
+		isDanger: [{
+			type: HostBinding,
+			args: ["class.danger"]
+		}],
+		isLight: [{
+			type: HostBinding,
+			args: ["class.light"]
+		}],
+		isMedium: [{
+			type: HostBinding,
+			args: ["class.medium"]
+		}],
+		isDark: [{
+			type: HostBinding,
+			args: ["class.dark"]
+		}],
+		isWhite: [{
+			type: HostBinding,
+			args: ["class.white"]
+		}],
+		isBrightnessWhite: [{
+			type: HostBinding,
+			args: ["class.kirby-color-brightness-white"]
+		}],
+		isBrightnessLight: [{
+			type: HostBinding,
+			args: ["class.kirby-color-brightness-light"]
+		}],
+		isBrightnessDark: [{
+			type: HostBinding,
+			args: ["class.kirby-color-brightness-dark"]
+		}],
+		themeColor: [{ type: Input }]
+	}
+});
+var ComponentLoaderDirective = class ComponentLoaderDirective {
+	constructor(viewContainerRef, renderer) {
+		this.viewContainerRef = viewContainerRef;
+		this.renderer = renderer;
+		this.cssClass = "";
+	}
+	ngOnInit() {
+		this.loadCard();
+	}
+	loadCard() {
+		this.viewContainerRef.clear();
+		const componentRef = this.viewContainerRef.createComponent(this.configuration.component);
+		if (componentRef && componentRef.location && componentRef.location.nativeElement) this.renderer.addClass(componentRef.location.nativeElement, this.cssClass);
+		componentRef.instance.data = this.configuration.data;
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: ComponentLoaderDirective,
+			deps: [{ token: i0.ViewContainerRef }, { token: i0.Renderer2 }],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			type: ComponentLoaderDirective,
+			isStandalone: true,
+			selector: "[kirbyLoadComponent]",
+			inputs: {
+				configuration: ["kirbyLoadComponent", "configuration"],
+				cssClass: "cssClass"
+			},
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: ComponentLoaderDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[kirbyLoadComponent]",
+			standalone: true
+		}]
+	}],
+	ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.Renderer2 }],
+	propDecorators: {
+		configuration: [{
+			type: Input,
+			args: ["kirbyLoadComponent"]
+		}],
+		cssClass: [{ type: Input }]
+	}
+});
+var FitHeadingDirective = class FitHeadingDirective {
+	constructor(elementRef, renderer, resizeObserverService, lineClampHelper) {
+		this.elementRef = elementRef;
+		this.renderer = renderer;
+		this.resizeObserverService = resizeObserverService;
+		this.lineClampHelper = lineClampHelper;
+		this.isObservingHostElement = false;
+		this.isScalingHeader = false;
+		this.headingSizes = [
+			{
+				name: "h1",
+				fontSize: "var(--kirby-font-size-xl)",
+				lineHeight: "var(--kirby-line-height-xl)"
+			},
+			{
+				name: "h2",
+				fontSize: "var(--kirby-font-size-l)",
+				lineHeight: "var(--kirby-line-height-l)"
+			},
+			{
+				name: "h3",
+				fontSize: "var(--kirby-font-size-m)",
+				lineHeight: "var(--kirby-line-height-m)"
+			}
+		];
+	}
+	ngOnInit() {
+		if (this.config && this.config.maxLines) {
+			this.observeResize();
+			this.isObservingHostElement = true;
+		}
+	}
+	ngOnDestroy() {
+		if (this.isObservingHostElement) {
+			this.resizeObserverService.unobserve(this.elementRef);
+			if (this.hostElementClone) this.renderer.removeChild(this.elementRef.nativeElement, this.hostElementClone);
+		}
+	}
+	observeResize() {
+		this.resizeObserverService.observe(this.elementRef, () => {
+			setTimeout(() => {
+				this.scaleHeader();
+			}, 0);
+		});
+	}
+	scaleHeader() {
+		const maxLines = this.config?.maxLines;
+		if (!maxLines || this.isScalingHeader) return;
+		this.isScalingHeader = true;
+		if (!this.hostElementClone) {
+			const computed = getComputedStyle(this.elementRef.nativeElement);
+			this.originalSize = {
+				name: "original",
+				fontSize: computed.fontSize,
+				lineHeight: computed.lineHeight
+			};
+			if (computed.lineHeight !== "normal") this.lineClampHelper.setMaxLines(this.elementRef.nativeElement, maxLines);
+			this.hostElementClone = this.generateHostElementClone();
+			this.renderer.appendChild(this.elementRef.nativeElement.parentElement, this.hostElementClone);
+		}
+		const availableWidth = this.elementRef.nativeElement.parentElement.clientWidth;
+		this.renderer.setStyle(this.hostElementClone, "width", `${availableWidth}px`);
+		const candidates = this.originalSize ? [this.originalSize, ...this.headingSizes] : this.headingSizes;
+		const fallbackSize = this.headingSizes[this.headingSizes.length - 1];
+		const fittedSize = candidates.find(this.canFitHeading.bind(this)) || fallbackSize;
+		this.setSize(this.elementRef.nativeElement, fittedSize);
+		this.lineClampHelper.setLineHeight(this.elementRef.nativeElement, fittedSize.lineHeight);
+		this.isScalingHeader = false;
+	}
+	canFitHeading(size) {
+		const hostElementClone = this.hostElementClone;
+		if (!hostElementClone || !this.config) return false;
+		this.setSize(hostElementClone, size);
+		const computedLineHeight = parseFloat(getComputedStyle(hostElementClone).lineHeight);
+		const fitsVertically = isNaN(computedLineHeight) ? true : Math.round(hostElementClone.clientHeight / computedLineHeight) <= this.config.maxLines;
+		const fitsHorizontally = hostElementClone.scrollWidth <= hostElementClone.clientWidth;
+		return fitsVertically && fitsHorizontally;
+	}
+	generateHostElementClone() {
+		const clone = this.elementRef.nativeElement.cloneNode(true);
+		this.renderer.setStyle(clone, "position", "absolute");
+		this.renderer.setStyle(clone, "visibility", "hidden");
+		this.lineClampHelper.removeLineClamp(clone);
+		return clone;
+	}
+	setSize(el, size) {
+		this.renderer.setStyle(el, "font-size", size.fontSize);
+		this.renderer.setStyle(el, "line-height", size.lineHeight);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: FitHeadingDirective,
+			deps: [
+				{ token: i0.ElementRef },
+				{ token: i0.Renderer2 },
+				{ token: ResizeObserverService },
+				{ token: i2.LineClampHelper }
+			],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			type: FitHeadingDirective,
+			isStandalone: true,
+			selector: "h1[kirbyFitHeading],h2[kirbyFitHeading],h3[kirbyFitHeading],[kirbyFitHeading]",
+			inputs: { config: ["kirbyFitHeading", "config"] },
+			providers: [LineClampHelper],
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: FitHeadingDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			standalone: true,
+			selector: `h1[kirbyFitHeading],h2[kirbyFitHeading],h3[kirbyFitHeading],[kirbyFitHeading]`,
+			providers: [LineClampHelper]
+		}]
+	}],
+	ctorParameters: () => [
+		{ type: i0.ElementRef },
+		{ type: i0.Renderer2 },
+		{ type: ResizeObserverService },
+		{ type: i2.LineClampHelper }
+	],
+	propDecorators: { config: [{
+		type: Input,
+		args: ["kirbyFitHeading"]
+	}] }
+});
 function findItemLabel(element) {
-    const itemEl = element.closest('kirby-item');
-    if (itemEl) {
-        return itemEl.querySelector('kirby-label');
-    }
-    return null;
+	const itemEl = element.closest("kirby-item");
+	if (itemEl) return itemEl.querySelector("kirby-label");
+	return null;
 }
 function setAccessibleLabel(element) {
-    const label = findItemLabel(element);
-    if (label) {
-        label.setAttribute('aria-hidden', 'true');
-        return label.textContent;
-    }
+	const label = findItemLabel(element);
+	if (!label) return "";
+	label.setAttribute("aria-hidden", "true");
+	return label.textContent ?? "";
 }
 function inheritAriaLabelText(element) {
-    const attribute = 'aria-label';
-    if (element.hasAttribute(attribute)) {
-        const value = element.getAttribute(attribute);
-        element.removeAttribute(attribute);
-        return value;
-    }
+	const attribute = "aria-label";
+	if (!element.hasAttribute(attribute)) return "";
+	const value = element.getAttribute(attribute);
+	element.removeAttribute(attribute);
+	return value ?? "";
 }
-/**
- * Forwards specified attributes from a source element to a target element.
- *
- * @param sourceElement - The HTML element from which attributes will be removed from.
- * @param attributes - An array of attribute names to inherit from the source element.
- * @param renderer - An instance of Angular's Renderer2.
- * @param targetElement - (Optional) The HTML element to which the attributes should be applied.
- *                        If not provided, the attributes will only be removed from the source element.
- *
- * @returns A record of the inherited attributes and their values. If no attributes are inherited, an empty object is returned.
- */
 function forwardAttributes(sourceElement, attributes, renderer, targetElement) {
-    const inheritedAttributes = {};
-    if (!sourceElement || !attributes || attributes.length === 0) {
-        return inheritedAttributes;
-    }
-    attributes.forEach((attribute) => {
-        if (sourceElement.hasAttribute(attribute)) {
-            const value = sourceElement.getAttribute(attribute);
-            inheritedAttributes[attribute] = value;
-            if (targetElement) {
-                renderer.setAttribute(targetElement, attribute, value);
-            }
-            renderer.removeAttribute(sourceElement, attribute);
-        }
-    });
-    return inheritedAttributes;
+	const inheritedAttributes = {};
+	if (!sourceElement || !attributes || attributes.length === 0) return inheritedAttributes;
+	attributes.forEach((attribute) => {
+		if (sourceElement.hasAttribute(attribute)) {
+			const value = sourceElement.getAttribute(attribute);
+			inheritedAttributes[attribute] = value;
+			if (targetElement) renderer.setAttribute(targetElement, attribute, value ?? "");
+			renderer.removeAttribute(sourceElement, attribute);
+		}
+	});
+	return inheritedAttributes;
 }
-
 const da = {
-    $code: 'da',
-    back: 'Tilbage',
-    close: 'Luk',
-    nextMonth: 'Næste måned',
-    nextSlide: 'Næste slide',
-    previousMonth: 'Forrige måned',
-    previousSlide: 'Forrige slide',
-    selectYear: 'Vælg år',
-    readMore: 'Læs mere',
-    more: 'Mere',
-    characters: 'Tegn',
-    outOf: 'af',
-    entered: 'indtastet',
+	$code: "da",
+	back: "Tilbage",
+	close: "Luk",
+	nextMonth: "Næste måned",
+	nextSlide: "Næste slide",
+	previousMonth: "Forrige måned",
+	previousSlide: "Forrige slide",
+	selectYear: "Vælg år",
+	readMore: "Læs mere",
+	more: "Mere",
+	characters: "Tegn",
+	outOf: "af",
+	entered: "indtastet"
 };
-
 const en = {
-    $code: 'en',
-    back: 'Back',
-    close: 'Close',
-    nextMonth: 'Next month',
-    nextSlide: 'Next slide',
-    previousMonth: 'Previous month',
-    previousSlide: 'Previous slide',
-    selectYear: 'Select year',
-    readMore: 'Read more',
-    more: 'More',
-    characters: 'Characters',
-    outOf: 'out of',
-    entered: 'entered',
+	$code: "en",
+	back: "Back",
+	close: "Close",
+	nextMonth: "Next month",
+	nextSlide: "Next slide",
+	previousMonth: "Previous month",
+	previousSlide: "Previous slide",
+	selectYear: "Select year",
+	readMore: "Read more",
+	more: "More",
+	characters: "Characters",
+	outOf: "out of",
+	entered: "entered"
 };
-
 const de = {
-    $code: 'de',
-    back: 'Zurück',
-    close: 'Schließen',
-    nextMonth: 'Nächsten Monat',
-    nextSlide: 'Zur nächsten Folie',
-    previousMonth: 'Letzten Monat',
-    previousSlide: 'Zur vorherigen Folie',
-    selectYear: 'Jahr auswählen',
-    readMore: 'Mehr lesen',
-    more: 'Mehr',
-    characters: 'Zeichen',
-    outOf: 'von',
-    entered: 'eingegeben',
+	$code: "de",
+	back: "Zurück",
+	close: "Schließen",
+	nextMonth: "Nächsten Monat",
+	nextSlide: "Zur nächsten Folie",
+	previousMonth: "Letzten Monat",
+	previousSlide: "Zur vorherigen Folie",
+	selectYear: "Jahr auswählen",
+	readMore: "Mehr lesen",
+	more: "Mehr",
+	characters: "Zeichen",
+	outOf: "von",
+	entered: "eingegeben"
 };
-
-class TranslationService {
-    constructor(localeId) {
-        this.localeId = localeId;
-        this.activeTranslation = en;
-        this.translations = { da, en, de };
-        this.setActiveTranslation(localeId);
-    }
-    setActiveTranslation(localeId) {
-        const baseLocaleId = localeId.split('-')[0];
-        const translation = this.translations[baseLocaleId];
-        if (!translation) {
-            console.warn(`[Kirby] Internal component translations were not found for locale "${this.localeId}", falling back to ${this.get('$code')}`);
-            return;
-        }
-        this.activeTranslation = translation;
-    }
-    get(key) {
-        return this.activeTranslation[key];
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: TranslationService, deps: [{ token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: TranslationService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: TranslationService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [LOCALE_ID]
-                }] }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+var TranslationService = class TranslationService {
+	constructor(localeId) {
+		this.localeId = localeId;
+		this.activeTranslation = en;
+		this.translations = {
+			da,
+			en,
+			de
+		};
+		this.setActiveTranslation(localeId);
+	}
+	setActiveTranslation(localeId) {
+		const baseLocaleId = localeId.split("-")[0];
+		const translation = this.translations[baseLocaleId];
+		if (!translation) {
+			console.warn(`[Kirby] Internal component translations were not found for locale "${this.localeId}", falling back to ${this.get("$code")}`);
+			return;
+		}
+		this.activeTranslation = translation;
+	}
+	get(key) {
+		return this.activeTranslation[key];
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: TranslationService,
+			deps: [{ token: LOCALE_ID }],
+			target: i0.ɵɵFactoryTarget.Injectable
+		});
+	}
+	static {
+		this.ɵprov = i0.ɵɵngDeclareInjectable({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: TranslationService,
+			providedIn: "root"
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: TranslationService,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}],
+	ctorParameters: () => [{
+		type: void 0,
+		decorators: [{
+			type: Inject,
+			args: [LOCALE_ID]
+		}]
+	}]
+});
 export { ComponentLoaderDirective, FitHeadingDirective, ResizeObserverFactory, ResizeObserverService, TextResizeObserverService, ThemeColorDirective, TranslationService, findItemLabel, forwardAttributes, inheritAriaLabelText, setAccessibleLabel };
-//# sourceMappingURL=kirbydesign-designsystem-shared.mjs.map
+
+//# sourceMappingURL=kirbydesign-designsystem-shared.mjs.map