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

package/fesm2022/kirbydesign-designsystem-action-group.mjs

@@ -1,135 +1,230 @@
-import * as i0 from '@angular/core';
-import { InjectionToken, ElementRef, HostBinding, ViewChild, ContentChildren, Input, Optional, Inject, ChangeDetectionStrategy, Component } from '@angular/core';
-import { ButtonComponent } from '@kirbydesign/designsystem/button';
-import { ItemComponent } from '@kirbydesign/designsystem/item';
-import { MenuComponent } from '@kirbydesign/designsystem/menu';
-
-const ACTIONGROUP_CONFIG = new InjectionToken('action-group.config');
-class ActionGroupComponent {
-    get _align() {
-        return 'align-' + this.align;
-    }
-    constructor(elementRef, renderer, config) {
-        this.elementRef = elementRef;
-        this.renderer = renderer;
-        this.config = config;
-        this.align = 'end';
-        this._collapsedActions = [];
-        this.collapseThreshold = 2;
-    }
-    ngAfterContentInit() {
-        // Ensure we collapse according to visibleActions if lower than our default threshold (2).
-        // I.e. if there are 2 buttons and visibleActions = 1 we'll collapse the 2nd button into the menu:
-        if (this.visibleActions < this.collapseThreshold) {
-            this.collapseThreshold = this.visibleActions;
-        }
-        this.initializeFromConfig();
-        if (this.visibleActions !== undefined) {
-            this.initializeCollapsing();
-        }
-    }
-    ngOnChanges(changes) {
-        if (changes.visibleActions && !changes.visibleActions.firstChange) {
-            const satifiesMaxVisibleActions = this.config?.maxVisibleActions === undefined ||
-                this.config?.maxVisibleActions === null ||
-                changes.visibleActions.currentValue <= this.config?.maxVisibleActions;
-            if (satifiesMaxVisibleActions) {
-                this.initializeCollapsing();
-            }
-        }
-    }
-    onActionSelect(action) {
-        const event = new PointerEvent('click', {
-            bubbles: true,
-            cancelable: true,
-            view: window,
-        });
-        action.button.dispatchEvent(event);
-    }
-    initializeFromConfig() {
-        if (!this.config)
-            return;
-        if (this.visibleActions === undefined && this.config.defaultVisibleActions !== undefined) {
-            this.visibleActions = this.config.defaultVisibleActions;
-        }
-        if (this.config.maxVisibleActions !== undefined) {
-            // Don't overwrite visibleActions value if configured lower than maxVisibleActions:
-            if (!(this.visibleActions < this.config.maxVisibleActions)) {
-                this.visibleActions = this.config.maxVisibleActions;
-            }
-        }
-        if (this.config.isCondensed) {
-            this.buttons?.forEach((button) => (button.showIconOnly = true));
-        }
-    }
-    initializeCollapsing() {
-        if (this.buttonElements.length <= this.collapseThreshold)
-            return;
-        this.moveButtons();
-        this.populateMenu();
-        this.toggleMenu();
-    }
-    moveButtons() {
-        const buttonsToShow = [...this.buttonElements]
-            .slice(0, this.visibleActions)
-            .filter((btn) => btn.nativeElement.parentElement === this.hiddenLayer.nativeElement);
-        buttonsToShow.forEach((button) => {
-            this.renderer.insertBefore(this.elementRef.nativeElement, button.nativeElement, this.menuElement.nativeElement);
-        });
-        const buttonsToHide = [...this.buttonElements].slice(this.visibleActions);
-        buttonsToHide.forEach((button) => {
-            this.renderer.appendChild(this.hiddenLayer.nativeElement, button.nativeElement);
-        });
-    }
-    toggleMenu() {
-        const hasHiddenButtons = this.hiddenLayer.nativeElement.childElementCount > 0;
-        this._isCollapsed = hasHiddenButtons;
-    }
-    populateMenu() {
-        const hiddenButtons = Array.from(this.hiddenLayer.nativeElement.children);
-        this._collapsedActions = hiddenButtons.map((button) => ({
-            button,
-            text: button.textContent.trim(),
-        }));
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ActionGroupComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: ACTIONGROUP_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: ActionGroupComponent, isStandalone: true, selector: "kirby-action-group", inputs: { visibleActions: "visibleActions", align: "align" }, host: { properties: { "class.is-collapsed": "this._isCollapsed", "class": "this._align" } }, queries: [{ propertyName: "buttonElements", predicate: ButtonComponent, read: ElementRef }, { propertyName: "buttons", predicate: ButtonComponent }], viewQueries: [{ propertyName: "hiddenLayer", first: true, predicate: ["hiddenLayer"], descendants: true, read: ElementRef, static: true }, { propertyName: "menuElement", first: true, predicate: MenuComponent, descendants: true, read: ElementRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-content select=\"button[kirby-button]\"></ng-content>\n\n<kirby-menu [placement]=\"'bottom-end'\">\n  @for (action of _collapsedActions; track action.text) {\n    <kirby-item\n      [selectable]=\"true\"\n      [disabled]=\"action.button?.disabled\"\n      (click)=\"onActionSelect(action)\"\n    >\n      {{ action.text }}\n    </kirby-item>\n  }\n</kirby-menu>\n\n<div class=\"hidden-layer\" #hiddenLayer></div>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:flex;flex-wrap:wrap;position:relative;gap:var(--kirby-spacing-xxs)}:host(.align-end){justify-content:flex-end}:host(.align-end) .hidden-layer{order:-1}@media(max-width:767px){:host-context(kirby-header .actions.emphasize){justify-content:flex-start}}.hidden-layer{display:none;visibility:hidden}kirby-menu{display:none;z-index:1}:host(.is-collapsed) kirby-menu{display:inline-block}\n"], dependencies: [{ kind: "component", type: ItemComponent, selector: "kirby-item", inputs: ["disabled", "selected", "disclosure", "selectable", "reorderable", "size", "href", "rotateIcon"] }, { kind: "component", type: MenuComponent, selector: "kirby-menu", inputs: ["isDisabled", "buttonSize", "placement", "attentionLevel", "triggers", "DOMPortalOutlet", "portalOutletConfig", "autoPlacement", "closeOnSelect", "closeOnEscapeKey", "closeOnBackdrop", "shift", "minWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ActionGroupComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'kirby-action-group', imports: [ItemComponent, MenuComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"button[kirby-button]\"></ng-content>\n\n<kirby-menu [placement]=\"'bottom-end'\">\n  @for (action of _collapsedActions; track action.text) {\n    <kirby-item\n      [selectable]=\"true\"\n      [disabled]=\"action.button?.disabled\"\n      (click)=\"onActionSelect(action)\"\n    >\n      {{ action.text }}\n    </kirby-item>\n  }\n</kirby-menu>\n\n<div class=\"hidden-layer\" #hiddenLayer></div>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:flex;flex-wrap:wrap;position:relative;gap:var(--kirby-spacing-xxs)}:host(.align-end){justify-content:flex-end}:host(.align-end) .hidden-layer{order:-1}@media(max-width:767px){:host-context(kirby-header .actions.emphasize){justify-content:flex-start}}.hidden-layer{display:none;visibility:hidden}kirby-menu{display:none;z-index:1}:host(.is-collapsed) kirby-menu{display:inline-block}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [ACTIONGROUP_CONFIG]
-                }] }], propDecorators: { visibleActions: [{
-                type: Input
-            }], align: [{
-                type: Input
-            }], buttonElements: [{
-                type: ContentChildren,
-                args: [ButtonComponent, { read: ElementRef }]
-            }], buttons: [{
-                type: ContentChildren,
-                args: [ButtonComponent]
-            }], hiddenLayer: [{
-                type: ViewChild,
-                args: ['hiddenLayer', { read: ElementRef, static: true }]
-            }], menuElement: [{
-                type: ViewChild,
-                args: [MenuComponent, { read: ElementRef, static: true }]
-            }], _isCollapsed: [{
-                type: HostBinding,
-                args: ['class.is-collapsed']
-            }], _align: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ContentChildren, ElementRef, HostBinding, Inject, InjectionToken, Input, Optional, ViewChild } from "@angular/core";
+import { ButtonComponent } from "@kirbydesign/designsystem/button";
+import { ItemComponent } from "@kirbydesign/designsystem/item";
+import { MenuComponent } from "@kirbydesign/designsystem/menu";
+const ACTIONGROUP_CONFIG = new InjectionToken("action-group.config");
+var ActionGroupComponent = class ActionGroupComponent {
+	get _align() {
+		return "align-" + this.align;
+	}
+	constructor(elementRef, renderer, config) {
+		this.elementRef = elementRef;
+		this.renderer = renderer;
+		this.config = config;
+		this.align = "end";
+		this._collapsedActions = [];
+		this.collapseThreshold = 2;
+	}
+	ngAfterContentInit() {
+		if (this.visibleActions < this.collapseThreshold) this.collapseThreshold = this.visibleActions;
+		this.initializeFromConfig();
+		if (this.visibleActions !== void 0) this.initializeCollapsing();
+	}
+	ngOnChanges(changes) {
+		if (changes.visibleActions && !changes.visibleActions.firstChange) {
+			if (this.config?.maxVisibleActions === void 0 || this.config?.maxVisibleActions === null || changes.visibleActions.currentValue <= this.config?.maxVisibleActions) this.initializeCollapsing();
+		}
+	}
+	onActionSelect(action) {
+		const event = new PointerEvent("click", {
+			bubbles: true,
+			cancelable: true,
+			view: window
+		});
+		action.button.dispatchEvent(event);
+	}
+	initializeFromConfig() {
+		if (!this.config) return;
+		if (this.visibleActions === void 0 && this.config.defaultVisibleActions !== void 0) this.visibleActions = this.config.defaultVisibleActions;
+		if (this.config.maxVisibleActions !== void 0) {
+			if (!(this.visibleActions < this.config.maxVisibleActions)) this.visibleActions = this.config.maxVisibleActions;
+		}
+		if (this.config.isCondensed) this.buttons?.forEach((button) => button.showIconOnly = true);
+	}
+	initializeCollapsing() {
+		if (this.buttonElements.length <= this.collapseThreshold) return;
+		this.moveButtons();
+		this.populateMenu();
+		this.toggleMenu();
+	}
+	moveButtons() {
+		[...this.buttonElements].slice(0, this.visibleActions).filter((btn) => btn.nativeElement.parentElement === this.hiddenLayer.nativeElement).forEach((button) => {
+			this.renderer.insertBefore(this.elementRef.nativeElement, button.nativeElement, this.menuElement.nativeElement);
+		});
+		[...this.buttonElements].slice(this.visibleActions).forEach((button) => {
+			this.renderer.appendChild(this.hiddenLayer.nativeElement, button.nativeElement);
+		});
+	}
+	toggleMenu() {
+		const hasHiddenButtons = this.hiddenLayer.nativeElement.childElementCount > 0;
+		this._isCollapsed = hasHiddenButtons;
+	}
+	populateMenu() {
+		const hiddenButtons = Array.from(this.hiddenLayer.nativeElement.children);
+		this._collapsedActions = hiddenButtons.map((button) => ({
+			button,
+			text: button.textContent.trim()
+		}));
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: ActionGroupComponent,
+			deps: [
+				{ token: i0.ElementRef },
+				{ token: i0.Renderer2 },
+				{
+					token: ACTIONGROUP_CONFIG,
+					optional: true
+				}
+			],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: ActionGroupComponent,
+			isStandalone: true,
+			selector: "kirby-action-group",
+			inputs: {
+				visibleActions: "visibleActions",
+				align: "align"
+			},
+			host: { properties: {
+				"class.is-collapsed": "this._isCollapsed",
+				"class": "this._align"
+			} },
+			queries: [{
+				propertyName: "buttonElements",
+				predicate: ButtonComponent,
+				read: ElementRef
+			}, {
+				propertyName: "buttons",
+				predicate: ButtonComponent
+			}],
+			viewQueries: [{
+				propertyName: "hiddenLayer",
+				first: true,
+				predicate: ["hiddenLayer"],
+				descendants: true,
+				read: ElementRef,
+				static: true
+			}, {
+				propertyName: "menuElement",
+				first: true,
+				predicate: MenuComponent,
+				descendants: true,
+				read: ElementRef,
+				static: true
+			}],
+			usesOnChanges: true,
+			ngImport: i0,
+			template: "<ng-content select=\"button[kirby-button]\"></ng-content>\n\n<kirby-menu [placement]=\"'bottom-end'\">\n  @for (action of _collapsedActions; track action.text) {\n    <kirby-item\n      [selectable]=\"true\"\n      [disabled]=\"action.button?.disabled\"\n      (click)=\"onActionSelect(action)\"\n    >\n      {{ action.text }}\n    </kirby-item>\n  }\n</kirby-menu>\n\n<div class=\"hidden-layer\" #hiddenLayer></div>\n",
+			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:flex;flex-wrap:wrap;position:relative;gap:var(--kirby-spacing-xxs)}:host(.align-end){justify-content:flex-end}:host(.align-end) .hidden-layer{order:-1}@media(max-width:767px){:host-context(kirby-header .actions.emphasize){justify-content:flex-start}}.hidden-layer{display:none;visibility:hidden}kirby-menu{display:none;z-index:1}:host(.is-collapsed) kirby-menu{display:inline-block}\n"],
+			dependencies: [{
+				kind: "component",
+				type: ItemComponent,
+				selector: "kirby-item",
+				inputs: [
+					"disabled",
+					"selected",
+					"disclosure",
+					"selectable",
+					"reorderable",
+					"size",
+					"href",
+					"rotateIcon"
+				]
+			}, {
+				kind: "component",
+				type: MenuComponent,
+				selector: "kirby-menu",
+				inputs: [
+					"isDisabled",
+					"buttonSize",
+					"placement",
+					"attentionLevel",
+					"triggers",
+					"DOMPortalOutlet",
+					"portalOutletConfig",
+					"autoPlacement",
+					"closeOnSelect",
+					"closeOnEscapeKey",
+					"closeOnBackdrop",
+					"shift",
+					"minWidth"
+				]
+			}],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: ActionGroupComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "kirby-action-group",
+			imports: [ItemComponent, MenuComponent],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<ng-content select=\"button[kirby-button]\"></ng-content>\n\n<kirby-menu [placement]=\"'bottom-end'\">\n  @for (action of _collapsedActions; track action.text) {\n    <kirby-item\n      [selectable]=\"true\"\n      [disabled]=\"action.button?.disabled\"\n      (click)=\"onActionSelect(action)\"\n    >\n      {{ action.text }}\n    </kirby-item>\n  }\n</kirby-menu>\n\n<div class=\"hidden-layer\" #hiddenLayer></div>\n",
+			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:flex;flex-wrap:wrap;position:relative;gap:var(--kirby-spacing-xxs)}:host(.align-end){justify-content:flex-end}:host(.align-end) .hidden-layer{order:-1}@media(max-width:767px){:host-context(kirby-header .actions.emphasize){justify-content:flex-start}}.hidden-layer{display:none;visibility:hidden}kirby-menu{display:none;z-index:1}:host(.is-collapsed) kirby-menu{display:inline-block}\n"]
+		}]
+	}],
+	ctorParameters: () => [
+		{ type: i0.ElementRef },
+		{ type: i0.Renderer2 },
+		{
+			type: void 0,
+			decorators: [{ type: Optional }, {
+				type: Inject,
+				args: [ACTIONGROUP_CONFIG]
+			}]
+		}
+	],
+	propDecorators: {
+		visibleActions: [{ type: Input }],
+		align: [{ type: Input }],
+		buttonElements: [{
+			type: ContentChildren,
+			args: [ButtonComponent, { read: ElementRef }]
+		}],
+		buttons: [{
+			type: ContentChildren,
+			args: [ButtonComponent]
+		}],
+		hiddenLayer: [{
+			type: ViewChild,
+			args: ["hiddenLayer", {
+				read: ElementRef,
+				static: true
+			}]
+		}],
+		menuElement: [{
+			type: ViewChild,
+			args: [MenuComponent, {
+				read: ElementRef,
+				static: true
+			}]
+		}],
+		_isCollapsed: [{
+			type: HostBinding,
+			args: ["class.is-collapsed"]
+		}],
+		_align: [{
+			type: HostBinding,
+			args: ["class"]
+		}]
+	}
+});
 export { ACTIONGROUP_CONFIG, ActionGroupComponent };
-//# sourceMappingURL=kirbydesign-designsystem-action-group.mjs.map
+
+//# sourceMappingURL=kirbydesign-designsystem-action-group.mjs.map

package/fesm2022/kirbydesign-designsystem-action-group.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"kirbydesign-designsystem-action-group.mjs","sources":["../../action-group/src/action-group.component.ts","../../action-group/src/action-group.component.html","../../action-group/src/kirbydesign-designsystem-action-group.ts"],"sourcesContent":["import {\n  AfterContentInit,\n  ChangeDetectionStrategy,\n  Component,\n  ContentChildren,\n  ElementRef,\n  HostBinding,\n  Inject,\n  InjectionToken,\n  Input,\n  OnChanges,\n  Optional,\n  QueryList,\n  Renderer2,\n  SimpleChanges,\n  ViewChild,\n} from '@angular/core';\nimport { ButtonComponent } from '@kirbydesign/designsystem/button';\nimport { ItemComponent } from '@kirbydesign/designsystem/item';\nimport { MenuComponent } from '@kirbydesign/designsystem/menu';\n\nexport type ActionGroupConfig = {\n  isCondensed?: boolean;\n  defaultVisibleActions?: number;\n  maxVisibleActions?: number;\n};\nexport const ACTIONGROUP_CONFIG = new InjectionToken<ActionGroupConfig>('action-group.config');\n\ntype CollapsedAction = { button: HTMLButtonElement; text: string };\n\n@Component({\n  selector: 'kirby-action-group',\n  imports: [ItemComponent, MenuComponent],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './action-group.component.html',\n  styleUrls: ['./action-group.component.scss'],\n})\nexport class ActionGroupComponent implements AfterContentInit, OnChanges {\n  @Input() visibleActions?: number;\n\n  @Input()\n  align: 'start' | 'end' = 'end';\n\n  @ContentChildren(ButtonComponent, { read: ElementRef }) private buttonElements?: QueryList<\n    ElementRef<HTMLButtonElement>\n  >;\n  @ContentChildren(ButtonComponent) private buttons?: QueryList<ButtonComponent>;\n  @ViewChild('hiddenLayer', { read: ElementRef, static: true })\n  private hiddenLayer!: ElementRef<HTMLElement>;\n\n  @ViewChild(MenuComponent, { read: ElementRef, static: true })\n  private menuElement!: ElementRef<HTMLElement>;\n\n  @HostBinding('class.is-collapsed')\n  _isCollapsed: boolean;\n  _collapsedActions: CollapsedAction[] = [];\n\n  @HostBinding('class')\n  get _align() {\n    return 'align-' + this.align;\n  }\n\n  private collapseThreshold = 2;\n\n  constructor(\n    private elementRef: ElementRef<HTMLElement>,\n    private renderer: Renderer2,\n    @Optional() @Inject(ACTIONGROUP_CONFIG) private config: ActionGroupConfig\n  ) {}\n\n  ngAfterContentInit(): void {\n    // Ensure we collapse according to visibleActions if lower than our default threshold (2).\n    // I.e. if there are 2 buttons and visibleActions = 1 we'll collapse the 2nd button into the menu:\n    if (this.visibleActions < this.collapseThreshold) {\n      this.collapseThreshold = this.visibleActions;\n    }\n\n    this.initializeFromConfig();\n\n    if (this.visibleActions !== undefined) {\n      this.initializeCollapsing();\n    }\n  }\n\n  ngOnChanges(changes: SimpleChanges): void {\n    if (changes.visibleActions && !changes.visibleActions.firstChange) {\n      const satifiesMaxVisibleActions =\n        this.config?.maxVisibleActions === undefined ||\n        this.config?.maxVisibleActions === null ||\n        changes.visibleActions.currentValue <= this.config?.maxVisibleActions;\n      if (satifiesMaxVisibleActions) {\n        this.initializeCollapsing();\n      }\n    }\n  }\n\n  onActionSelect(action: CollapsedAction) {\n    const event = new PointerEvent('click', {\n      bubbles: true,\n      cancelable: true,\n      view: window,\n    });\n\n    action.button.dispatchEvent(event);\n  }\n\n  private initializeFromConfig() {\n    if (!this.config) return;\n\n    if (this.visibleActions === undefined && this.config.defaultVisibleActions !== undefined) {\n      this.visibleActions = this.config.defaultVisibleActions;\n    }\n\n    if (this.config.maxVisibleActions !== undefined) {\n      // Don't overwrite visibleActions value if configured lower than maxVisibleActions:\n      if (!(this.visibleActions < this.config.maxVisibleActions)) {\n        this.visibleActions = this.config.maxVisibleActions;\n      }\n    }\n\n    if (this.config.isCondensed) {\n      this.buttons?.forEach((button) => (button.showIconOnly = true));\n    }\n  }\n\n  private initializeCollapsing() {\n    if (this.buttonElements.length <= this.collapseThreshold) return;\n\n    this.moveButtons();\n    this.populateMenu();\n    this.toggleMenu();\n  }\n\n  private moveButtons() {\n    const buttonsToShow = [...this.buttonElements]\n      .slice(0, this.visibleActions)\n      .filter((btn) => btn.nativeElement.parentElement === this.hiddenLayer.nativeElement);\n    buttonsToShow.forEach((button) => {\n      this.renderer.insertBefore(\n        this.elementRef.nativeElement,\n        button.nativeElement,\n        this.menuElement.nativeElement\n      );\n    });\n\n    const buttonsToHide = [...this.buttonElements].slice(this.visibleActions);\n    buttonsToHide.forEach((button) => {\n      this.renderer.appendChild(this.hiddenLayer.nativeElement, button.nativeElement);\n    });\n  }\n\n  private toggleMenu() {\n    const hasHiddenButtons = this.hiddenLayer.nativeElement.childElementCount > 0;\n    this._isCollapsed = hasHiddenButtons;\n  }\n\n  private populateMenu() {\n    const hiddenButtons = Array.from(\n      this.hiddenLayer.nativeElement.children\n    ) as HTMLButtonElement[];\n\n    this._collapsedActions = hiddenButtons.map((button) => ({\n      button,\n      text: button.textContent.trim(),\n    }));\n  }\n}\n","<ng-content select=\"button[kirby-button]\"></ng-content>\n\n<kirby-menu [placement]=\"'bottom-end'\">\n  @for (action of _collapsedActions; track action.text) {\n    <kirby-item\n      [selectable]=\"true\"\n      [disabled]=\"action.button?.disabled\"\n      (click)=\"onActionSelect(action)\"\n    >\n      {{ action.text }}\n    </kirby-item>\n  }\n</kirby-menu>\n\n<div class=\"hidden-layer\" #hiddenLayer></div>\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-action-group.mjs","names":[],"sources":["../../action-group/src/action-group.component.ts","../../action-group/src/action-group.component.html"],"sourcesContent":["import {\n  AfterContentInit,\n  ChangeDetectionStrategy,\n  Component,\n  ContentChildren,\n  ElementRef,\n  HostBinding,\n  Inject,\n  InjectionToken,\n  Input,\n  OnChanges,\n  Optional,\n  QueryList,\n  Renderer2,\n  SimpleChanges,\n  ViewChild,\n} from '@angular/core';\nimport { ButtonComponent } from '@kirbydesign/designsystem/button';\nimport { ItemComponent } from '@kirbydesign/designsystem/item';\nimport { MenuComponent } from '@kirbydesign/designsystem/menu';\n\nexport type ActionGroupConfig = {\n  isCondensed?: boolean;\n  defaultVisibleActions?: number;\n  maxVisibleActions?: number;\n};\nexport const ACTIONGROUP_CONFIG = new InjectionToken<ActionGroupConfig>('action-group.config');\n\ntype CollapsedAction = { button: HTMLButtonElement; text: string };\n\n@Component({\n  selector: 'kirby-action-group',\n  imports: [ItemComponent, MenuComponent],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './action-group.component.html',\n  styleUrls: ['./action-group.component.scss'],\n})\nexport class ActionGroupComponent implements AfterContentInit, OnChanges {\n  @Input() visibleActions?: number;\n\n  @Input()\n  align: 'start' | 'end' = 'end';\n\n  @ContentChildren(ButtonComponent, { read: ElementRef }) private buttonElements?: QueryList<\n    ElementRef<HTMLButtonElement>\n  >;\n  @ContentChildren(ButtonComponent) private buttons?: QueryList<ButtonComponent>;\n  @ViewChild('hiddenLayer', { read: ElementRef, static: true })\n  private hiddenLayer!: ElementRef<HTMLElement>;\n\n  @ViewChild(MenuComponent, { read: ElementRef, static: true })\n  private menuElement!: ElementRef<HTMLElement>;\n\n  @HostBinding('class.is-collapsed')\n  _isCollapsed: boolean;\n  _collapsedActions: CollapsedAction[] = [];\n\n  @HostBinding('class')\n  get _align() {\n    return 'align-' + this.align;\n  }\n\n  private collapseThreshold = 2;\n\n  constructor(\n    private elementRef: ElementRef<HTMLElement>,\n    private renderer: Renderer2,\n    @Optional() @Inject(ACTIONGROUP_CONFIG) private config: ActionGroupConfig\n  ) {}\n\n  ngAfterContentInit(): void {\n    // Ensure we collapse according to visibleActions if lower than our default threshold (2).\n    // I.e. if there are 2 buttons and visibleActions = 1 we'll collapse the 2nd button into the menu:\n    if (this.visibleActions < this.collapseThreshold) {\n      this.collapseThreshold = this.visibleActions;\n    }\n\n    this.initializeFromConfig();\n\n    if (this.visibleActions !== undefined) {\n      this.initializeCollapsing();\n    }\n  }\n\n  ngOnChanges(changes: SimpleChanges): void {\n    if (changes.visibleActions && !changes.visibleActions.firstChange) {\n      const satifiesMaxVisibleActions =\n        this.config?.maxVisibleActions === undefined ||\n        this.config?.maxVisibleActions === null ||\n        changes.visibleActions.currentValue <= this.config?.maxVisibleActions;\n      if (satifiesMaxVisibleActions) {\n        this.initializeCollapsing();\n      }\n    }\n  }\n\n  onActionSelect(action: CollapsedAction) {\n    const event = new PointerEvent('click', {\n      bubbles: true,\n      cancelable: true,\n      view: window,\n    });\n\n    action.button.dispatchEvent(event);\n  }\n\n  private initializeFromConfig() {\n    if (!this.config) return;\n\n    if (this.visibleActions === undefined && this.config.defaultVisibleActions !== undefined) {\n      this.visibleActions = this.config.defaultVisibleActions;\n    }\n\n    if (this.config.maxVisibleActions !== undefined) {\n      // Don't overwrite visibleActions value if configured lower than maxVisibleActions:\n      if (!(this.visibleActions < this.config.maxVisibleActions)) {\n        this.visibleActions = this.config.maxVisibleActions;\n      }\n    }\n\n    if (this.config.isCondensed) {\n      this.buttons?.forEach((button) => (button.showIconOnly = true));\n    }\n  }\n\n  private initializeCollapsing() {\n    if (this.buttonElements.length <= this.collapseThreshold) return;\n\n    this.moveButtons();\n    this.populateMenu();\n    this.toggleMenu();\n  }\n\n  private moveButtons() {\n    const buttonsToShow = [...this.buttonElements]\n      .slice(0, this.visibleActions)\n      .filter((btn) => btn.nativeElement.parentElement === this.hiddenLayer.nativeElement);\n    buttonsToShow.forEach((button) => {\n      this.renderer.insertBefore(\n        this.elementRef.nativeElement,\n        button.nativeElement,\n        this.menuElement.nativeElement\n      );\n    });\n\n    const buttonsToHide = [...this.buttonElements].slice(this.visibleActions);\n    buttonsToHide.forEach((button) => {\n      this.renderer.appendChild(this.hiddenLayer.nativeElement, button.nativeElement);\n    });\n  }\n\n  private toggleMenu() {\n    const hasHiddenButtons = this.hiddenLayer.nativeElement.childElementCount > 0;\n    this._isCollapsed = hasHiddenButtons;\n  }\n\n  private populateMenu() {\n    const hiddenButtons = Array.from(\n      this.hiddenLayer.nativeElement.children\n    ) as HTMLButtonElement[];\n\n    this._collapsedActions = hiddenButtons.map((button) => ({\n      button,\n      text: button.textContent.trim(),\n    }));\n  }\n}\n","<ng-content select=\"button[kirby-button]\"></ng-content>\n\n<kirby-menu [placement]=\"'bottom-end'\">\n  @for (action of _collapsedActions; track action.text) {\n    <kirby-item\n      [selectable]=\"true\"\n      [disabled]=\"action.button?.disabled\"\n      (click)=\"onActionSelect(action)\"\n    >\n      {{ action.text }}\n    </kirby-item>\n  }\n</kirby-menu>\n\n<div class=\"hidden-layer\" #hiddenLayer></div>\n"],"mappings":"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"}

package/fesm2022/kirbydesign-designsystem-avatar.mjs

@@ -1,58 +1,105 @@
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i0 from '@angular/core';
-import { EventEmitter, HostBinding, Output, Input, ChangeDetectionStrategy, Component } from '@angular/core';
-
+import * as i1 from "@angular/common";
+import { CommonModule } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, Input, Output } from "@angular/core";
 var AvatarSize;
-(function (AvatarSize) {
-    AvatarSize["XS"] = "xs";
-    AvatarSize["SM"] = "sm";
-    AvatarSize["MD"] = "md";
-    AvatarSize["LG"] = "lg";
+(function(AvatarSize) {
+	AvatarSize["XS"] = "xs";
+	AvatarSize["SM"] = "sm";
+	AvatarSize["MD"] = "md";
+	AvatarSize["LG"] = "lg";
 })(AvatarSize || (AvatarSize = {}));
-class AvatarComponent {
-    constructor() {
-        this.size = AvatarSize.SM;
-        this.imageError = new EventEmitter();
-    }
-    get _cssClass() {
-        return [this.themeColor, this.size].filter((cssClass) => !!cssClass);
-    }
-    onImageError($event) {
-        this.imageError.emit($event);
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: AvatarComponent, isStandalone: true, selector: "kirby-avatar", inputs: { imageSrc: "imageSrc", imageLoading: "imageLoading", altText: "altText", stroke: "stroke", text: "text", overlay: "overlay", size: "size", themeColor: "themeColor" }, outputs: { imageError: "imageError" }, host: { properties: { "class": "this._cssClass" } }, ngImport: i0, template: "<div class=\"avatar\" [ngClass]=\"{ overlay: overlay, stroke: stroke }\">\n  @if (imageSrc) {\n    <img\n      [src]=\"imageSrc\"\n      [attr.alt]=\"altText\"\n      [attr.loading]=\"imageLoading\"\n      (error)=\"onImageError($event)\"\n    />\n  }\n  @if (!text) {\n    <ng-content select=\"kirby-icon\"></ng-content>\n  }\n  @if (text) {\n    <span class=\"avatar-text\">{{ text }}</span>\n  }\n</div>\n<ng-content select=\"kirby-badge\"></ng-content>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{--kirby-badge-position: absolute;--kirby-badge-right: calc(6px - .5rem) ;--kirby-badge-top: calc(6px - .5rem) ;--kirby-badge-z-index: var(--kirby-z-index-avatar-badge);position:relative}.avatar{width:40px;height:40px;border-radius:var(--kirby-border-radius-circle);overflow:hidden;position:relative;z-index:1;display:flex;justify-content:center;align-items:center;background-color:var(--kirby-avatar-background-color, var(--kirby-white));color:var(--kirby-avatar-color, var(--kirby-light-contrast))}.avatar.stroke{border:1px solid var(--kirby-semi-light)}.avatar.overlay:before{content:\"\";background-color:var(--kirby-black);opacity:.05;width:100%;height:100%;position:absolute;top:0;left:0}.avatar img{object-fit:cover;max-width:100%;height:100%;width:100%}:host(.xs) .avatar{--kirby-icon-font-size: 24px;width:32px;height:32px;border-radius:8px}:host(.xs) .avatar .avatar-text{font-size:var(--kirby-font-size-s)}:host-context(kirby-progress-circle.sm) .avatar,:host(.sm) .avatar{--kirby-icon-font-size: 24px;width:40px;height:40px}:host-context(kirby-progress-circle.sm) .avatar .avatar-text,:host(.sm) .avatar .avatar-text{font-size:var(--kirby-font-size-s)}:host-context(kirby-progress-circle.md),:host(.md){--kirby-badge-right: calc(8px - .5rem) ;--kirby-badge-top: calc(8px - .5rem) }:host-context(kirby-progress-circle.md) .avatar,:host(.md) .avatar{--kirby-icon-font-size: 32px;width:56px;height:56px}:host-context(kirby-progress-circle.md) .avatar .avatar-text,:host(.md) .avatar .avatar-text{font-size:var(--kirby-font-size-m)}:host-context(kirby-progress-circle.lg),:host(.lg){--kirby-badge-right: calc(14px - .5rem) ;--kirby-badge-top: calc(14px - .5rem) }:host-context(kirby-progress-circle.lg) .avatar,:host(.lg) .avatar{--kirby-icon-font-size: 56px;width:96px;height:96px}:host-context(kirby-progress-circle.lg) .avatar .avatar-text,:host(.lg) .avatar .avatar-text{font-size:var(--kirby-font-size-xl)}:host-context(kirby-item)[slot=start]{margin-inline-end:var(--kirby-spacing-xs)}:host-context(kirby-item)[slot=start].xs{margin-inline-end:var(--kirby-spacing-s)}:host(.primary){--kirby-avatar-background-color: var(--kirby-primary);--kirby-avatar-color: var(--kirby-primary-contrast)}:host(.secondary){--kirby-avatar-background-color: var(--kirby-secondary);--kirby-avatar-color: var(--kirby-secondary-contrast)}:host(.tertiary){--kirby-avatar-background-color: var(--kirby-tertiary);--kirby-avatar-color: var(--kirby-tertiary-contrast)}:host(.success){--kirby-avatar-background-color: var(--kirby-success);--kirby-avatar-color: var(--kirby-success-contrast)}:host(.warning){--kirby-avatar-background-color: var(--kirby-warning);--kirby-avatar-color: var(--kirby-warning-contrast)}:host(.danger){--kirby-avatar-background-color: var(--kirby-danger);--kirby-avatar-color: var(--kirby-danger-contrast)}:host(.white-overlay){--kirby-avatar-background-color: var(--kirby-white-overlay);--kirby-avatar-color: var(--kirby-white-overlay-contrast)}:host(.light){--kirby-avatar-background-color: var(--kirby-light);--kirby-avatar-color: var(--kirby-light-contrast)}:host(.medium){--kirby-avatar-background-color: var(--kirby-medium);--kirby-avatar-color: var(--kirby-medium-contrast)}:host(.dark){--kirby-avatar-background-color: var(--kirby-dark);--kirby-avatar-color: var(--kirby-dark-contrast)}:host(.dark-overlay){--kirby-avatar-background-color: var(--kirby-dark-overlay);--kirby-avatar-color: var(--kirby-dark-overlay-contrast)}:host(.white){--kirby-avatar-background-color: var(--kirby-white);--kirby-avatar-color: var(--kirby-white-contrast)}:host(.semi-light){--kirby-avatar-background-color: var(--kirby-semi-light);--kirby-avatar-color: var(--kirby-semi-light-contrast)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: AvatarComponent, decorators: [{
-            type: Component,
-            args: [{ imports: [CommonModule], selector: 'kirby-avatar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"avatar\" [ngClass]=\"{ overlay: overlay, stroke: stroke }\">\n  @if (imageSrc) {\n    <img\n      [src]=\"imageSrc\"\n      [attr.alt]=\"altText\"\n      [attr.loading]=\"imageLoading\"\n      (error)=\"onImageError($event)\"\n    />\n  }\n  @if (!text) {\n    <ng-content select=\"kirby-icon\"></ng-content>\n  }\n  @if (text) {\n    <span class=\"avatar-text\">{{ text }}</span>\n  }\n</div>\n<ng-content select=\"kirby-badge\"></ng-content>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{--kirby-badge-position: absolute;--kirby-badge-right: calc(6px - .5rem) ;--kirby-badge-top: calc(6px - .5rem) ;--kirby-badge-z-index: var(--kirby-z-index-avatar-badge);position:relative}.avatar{width:40px;height:40px;border-radius:var(--kirby-border-radius-circle);overflow:hidden;position:relative;z-index:1;display:flex;justify-content:center;align-items:center;background-color:var(--kirby-avatar-background-color, var(--kirby-white));color:var(--kirby-avatar-color, var(--kirby-light-contrast))}.avatar.stroke{border:1px solid var(--kirby-semi-light)}.avatar.overlay:before{content:\"\";background-color:var(--kirby-black);opacity:.05;width:100%;height:100%;position:absolute;top:0;left:0}.avatar img{object-fit:cover;max-width:100%;height:100%;width:100%}:host(.xs) .avatar{--kirby-icon-font-size: 24px;width:32px;height:32px;border-radius:8px}:host(.xs) .avatar .avatar-text{font-size:var(--kirby-font-size-s)}:host-context(kirby-progress-circle.sm) .avatar,:host(.sm) .avatar{--kirby-icon-font-size: 24px;width:40px;height:40px}:host-context(kirby-progress-circle.sm) .avatar .avatar-text,:host(.sm) .avatar .avatar-text{font-size:var(--kirby-font-size-s)}:host-context(kirby-progress-circle.md),:host(.md){--kirby-badge-right: calc(8px - .5rem) ;--kirby-badge-top: calc(8px - .5rem) }:host-context(kirby-progress-circle.md) .avatar,:host(.md) .avatar{--kirby-icon-font-size: 32px;width:56px;height:56px}:host-context(kirby-progress-circle.md) .avatar .avatar-text,:host(.md) .avatar .avatar-text{font-size:var(--kirby-font-size-m)}:host-context(kirby-progress-circle.lg),:host(.lg){--kirby-badge-right: calc(14px - .5rem) ;--kirby-badge-top: calc(14px - .5rem) }:host-context(kirby-progress-circle.lg) .avatar,:host(.lg) .avatar{--kirby-icon-font-size: 56px;width:96px;height:96px}:host-context(kirby-progress-circle.lg) .avatar .avatar-text,:host(.lg) .avatar .avatar-text{font-size:var(--kirby-font-size-xl)}:host-context(kirby-item)[slot=start]{margin-inline-end:var(--kirby-spacing-xs)}:host-context(kirby-item)[slot=start].xs{margin-inline-end:var(--kirby-spacing-s)}:host(.primary){--kirby-avatar-background-color: var(--kirby-primary);--kirby-avatar-color: var(--kirby-primary-contrast)}:host(.secondary){--kirby-avatar-background-color: var(--kirby-secondary);--kirby-avatar-color: var(--kirby-secondary-contrast)}:host(.tertiary){--kirby-avatar-background-color: var(--kirby-tertiary);--kirby-avatar-color: var(--kirby-tertiary-contrast)}:host(.success){--kirby-avatar-background-color: var(--kirby-success);--kirby-avatar-color: var(--kirby-success-contrast)}:host(.warning){--kirby-avatar-background-color: var(--kirby-warning);--kirby-avatar-color: var(--kirby-warning-contrast)}:host(.danger){--kirby-avatar-background-color: var(--kirby-danger);--kirby-avatar-color: var(--kirby-danger-contrast)}:host(.white-overlay){--kirby-avatar-background-color: var(--kirby-white-overlay);--kirby-avatar-color: var(--kirby-white-overlay-contrast)}:host(.light){--kirby-avatar-background-color: var(--kirby-light);--kirby-avatar-color: var(--kirby-light-contrast)}:host(.medium){--kirby-avatar-background-color: var(--kirby-medium);--kirby-avatar-color: var(--kirby-medium-contrast)}:host(.dark){--kirby-avatar-background-color: var(--kirby-dark);--kirby-avatar-color: var(--kirby-dark-contrast)}:host(.dark-overlay){--kirby-avatar-background-color: var(--kirby-dark-overlay);--kirby-avatar-color: var(--kirby-dark-overlay-contrast)}:host(.white){--kirby-avatar-background-color: var(--kirby-white);--kirby-avatar-color: var(--kirby-white-contrast)}:host(.semi-light){--kirby-avatar-background-color: var(--kirby-semi-light);--kirby-avatar-color: var(--kirby-semi-light-contrast)}\n"] }]
-        }], propDecorators: { imageSrc: [{
-                type: Input
-            }], imageLoading: [{
-                type: Input
-            }], altText: [{
-                type: Input
-            }], stroke: [{
-                type: Input
-            }], text: [{
-                type: Input
-            }], overlay: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], themeColor: [{
-                type: Input
-            }], imageError: [{
-                type: Output
-            }], _cssClass: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+var AvatarComponent = class AvatarComponent {
+	constructor() {
+		this.size = AvatarSize.SM;
+		this.imageError = new EventEmitter();
+	}
+	set stroke(_value) {
+		console.warn(`[Kirby Avatar] The 'stroke' input is deprecated and no longer has any effect.
+        The avatar now always has an outline. This input will be removed in a future major version.`);
+	}
+	get _cssClass() {
+		return [this.themeColor, this.size].filter((cssClass) => !!cssClass);
+	}
+	onImageError($event) {
+		this.imageError.emit($event);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: AvatarComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: AvatarComponent,
+			isStandalone: true,
+			selector: "kirby-avatar",
+			inputs: {
+				imageSrc: "imageSrc",
+				imageLoading: "imageLoading",
+				altText: "altText",
+				stroke: "stroke",
+				text: "text",
+				overlay: "overlay",
+				size: "size",
+				themeColor: "themeColor"
+			},
+			outputs: { imageError: "imageError" },
+			host: { properties: { "class": "this._cssClass" } },
+			ngImport: i0,
+			template: "<div class=\"avatar\" [ngClass]=\"{ overlay: overlay }\">\n  @if (imageSrc) {\n    <img\n      [src]=\"imageSrc\"\n      [attr.alt]=\"altText\"\n      [attr.loading]=\"imageLoading\"\n      (error)=\"onImageError($event)\"\n    />\n  }\n  @if (!text) {\n    <ng-content select=\"kirby-icon\"></ng-content>\n  }\n  @if (text) {\n    <span class=\"avatar-text\">{{ text }}</span>\n  }\n</div>\n<ng-content select=\"kirby-badge\"></ng-content>\n",
+			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{--kirby-badge-position: absolute;--kirby-badge-right: calc(6px - .5rem) ;--kirby-badge-top: calc(6px - .5rem) ;--kirby-badge-z-index: var(--kirby-z-index-avatar-badge);position:relative}.avatar{width:40px;height:40px;border:1px solid var(--kirby-color-border-raised-quiet);border-radius:var(--kirby-border-radius-circle);box-sizing:border-box;overflow:hidden;position:relative;z-index:1;display:flex;justify-content:center;align-items:center;background-color:var(--kirby-avatar-background-color, var(--kirby-color-fill-raised));color:var(--kirby-avatar-color, var(--kirby-color-content-raised))}.avatar.overlay:before{content:\"\";background-color:var(--kirby-black);opacity:.05;width:100%;height:100%;position:absolute;top:0;left:0}.avatar img{object-fit:cover;max-width:100%;height:100%;width:100%}:host(.xs) .avatar{--kirby-icon-font-size: 24px;width:32px;height:32px;border-radius:8px}:host(.xs) .avatar .avatar-text{font-size:var(--kirby-font-size-s)}:host-context(kirby-progress-circle.sm) .avatar,:host(.sm) .avatar{--kirby-icon-font-size: 24px;width:40px;height:40px}:host-context(kirby-progress-circle.sm) .avatar .avatar-text,:host(.sm) .avatar .avatar-text{font-size:var(--kirby-font-size-s)}:host-context(kirby-progress-circle.md),:host(.md){--kirby-badge-right: calc(8px - .5rem) ;--kirby-badge-top: calc(8px - .5rem) }:host-context(kirby-progress-circle.md) .avatar,:host(.md) .avatar{--kirby-icon-font-size: 32px;width:56px;height:56px}:host-context(kirby-progress-circle.md) .avatar .avatar-text,:host(.md) .avatar .avatar-text{font-size:var(--kirby-font-size-m)}:host-context(kirby-progress-circle.lg),:host(.lg){--kirby-badge-right: calc(14px - .5rem) ;--kirby-badge-top: calc(14px - .5rem) }:host-context(kirby-progress-circle.lg) .avatar,:host(.lg) .avatar{--kirby-icon-font-size: 56px;width:96px;height:96px}:host-context(kirby-progress-circle.lg) .avatar .avatar-text,:host(.lg) .avatar .avatar-text{font-size:var(--kirby-font-size-xl)}:host-context(kirby-item)[slot=start]{margin-inline-end:var(--kirby-spacing-xs)}:host-context(kirby-item)[slot=start].xs{margin-inline-end:var(--kirby-spacing-s)}:host(.primary){--kirby-avatar-background-color: var(--kirby-primary);--kirby-avatar-color: var(--kirby-primary-contrast)}:host(.secondary){--kirby-avatar-background-color: var(--kirby-secondary);--kirby-avatar-color: var(--kirby-secondary-contrast)}:host(.tertiary){--kirby-avatar-background-color: var(--kirby-tertiary);--kirby-avatar-color: var(--kirby-tertiary-contrast)}:host(.success){--kirby-avatar-background-color: var(--kirby-success);--kirby-avatar-color: var(--kirby-success-contrast)}:host(.warning){--kirby-avatar-background-color: var(--kirby-warning);--kirby-avatar-color: var(--kirby-warning-contrast)}:host(.danger){--kirby-avatar-background-color: var(--kirby-danger);--kirby-avatar-color: var(--kirby-danger-contrast)}:host(.white-overlay){--kirby-avatar-background-color: var(--kirby-white-overlay);--kirby-avatar-color: var(--kirby-white-overlay-contrast)}:host(.light){--kirby-avatar-background-color: var(--kirby-color-fill-raised);--kirby-avatar-color: var(--kirby-color-content-raised)}:host(.medium){--kirby-avatar-background-color: var(--kirby-medium);--kirby-avatar-color: var(--kirby-medium-contrast)}:host(.dark){--kirby-avatar-background-color: var(--kirby-dark);--kirby-avatar-color: var(--kirby-dark-contrast)}:host(.dark-overlay){--kirby-avatar-background-color: var(--kirby-dark-overlay);--kirby-avatar-color: var(--kirby-dark-overlay-contrast)}:host(.white){--kirby-avatar-background-color: var(--kirby-color-fill-raised);--kirby-avatar-color: var(--kirby-color-content-raised)}:host(.semi-light){--kirby-avatar-background-color: var(--kirby-semi-light);--kirby-avatar-color: var(--kirby-semi-light-contrast)}\n"],
+			dependencies: [{
+				kind: "ngmodule",
+				type: CommonModule
+			}, {
+				kind: "directive",
+				type: i1.NgClass,
+				selector: "[ngClass]",
+				inputs: ["class", "ngClass"]
+			}],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: AvatarComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			imports: [CommonModule],
+			selector: "kirby-avatar",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<div class=\"avatar\" [ngClass]=\"{ overlay: overlay }\">\n  @if (imageSrc) {\n    <img\n      [src]=\"imageSrc\"\n      [attr.alt]=\"altText\"\n      [attr.loading]=\"imageLoading\"\n      (error)=\"onImageError($event)\"\n    />\n  }\n  @if (!text) {\n    <ng-content select=\"kirby-icon\"></ng-content>\n  }\n  @if (text) {\n    <span class=\"avatar-text\">{{ text }}</span>\n  }\n</div>\n<ng-content select=\"kirby-badge\"></ng-content>\n",
+			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{--kirby-badge-position: absolute;--kirby-badge-right: calc(6px - .5rem) ;--kirby-badge-top: calc(6px - .5rem) ;--kirby-badge-z-index: var(--kirby-z-index-avatar-badge);position:relative}.avatar{width:40px;height:40px;border:1px solid var(--kirby-color-border-raised-quiet);border-radius:var(--kirby-border-radius-circle);box-sizing:border-box;overflow:hidden;position:relative;z-index:1;display:flex;justify-content:center;align-items:center;background-color:var(--kirby-avatar-background-color, var(--kirby-color-fill-raised));color:var(--kirby-avatar-color, var(--kirby-color-content-raised))}.avatar.overlay:before{content:\"\";background-color:var(--kirby-black);opacity:.05;width:100%;height:100%;position:absolute;top:0;left:0}.avatar img{object-fit:cover;max-width:100%;height:100%;width:100%}:host(.xs) .avatar{--kirby-icon-font-size: 24px;width:32px;height:32px;border-radius:8px}:host(.xs) .avatar .avatar-text{font-size:var(--kirby-font-size-s)}:host-context(kirby-progress-circle.sm) .avatar,:host(.sm) .avatar{--kirby-icon-font-size: 24px;width:40px;height:40px}:host-context(kirby-progress-circle.sm) .avatar .avatar-text,:host(.sm) .avatar .avatar-text{font-size:var(--kirby-font-size-s)}:host-context(kirby-progress-circle.md),:host(.md){--kirby-badge-right: calc(8px - .5rem) ;--kirby-badge-top: calc(8px - .5rem) }:host-context(kirby-progress-circle.md) .avatar,:host(.md) .avatar{--kirby-icon-font-size: 32px;width:56px;height:56px}:host-context(kirby-progress-circle.md) .avatar .avatar-text,:host(.md) .avatar .avatar-text{font-size:var(--kirby-font-size-m)}:host-context(kirby-progress-circle.lg),:host(.lg){--kirby-badge-right: calc(14px - .5rem) ;--kirby-badge-top: calc(14px - .5rem) }:host-context(kirby-progress-circle.lg) .avatar,:host(.lg) .avatar{--kirby-icon-font-size: 56px;width:96px;height:96px}:host-context(kirby-progress-circle.lg) .avatar .avatar-text,:host(.lg) .avatar .avatar-text{font-size:var(--kirby-font-size-xl)}:host-context(kirby-item)[slot=start]{margin-inline-end:var(--kirby-spacing-xs)}:host-context(kirby-item)[slot=start].xs{margin-inline-end:var(--kirby-spacing-s)}:host(.primary){--kirby-avatar-background-color: var(--kirby-primary);--kirby-avatar-color: var(--kirby-primary-contrast)}:host(.secondary){--kirby-avatar-background-color: var(--kirby-secondary);--kirby-avatar-color: var(--kirby-secondary-contrast)}:host(.tertiary){--kirby-avatar-background-color: var(--kirby-tertiary);--kirby-avatar-color: var(--kirby-tertiary-contrast)}:host(.success){--kirby-avatar-background-color: var(--kirby-success);--kirby-avatar-color: var(--kirby-success-contrast)}:host(.warning){--kirby-avatar-background-color: var(--kirby-warning);--kirby-avatar-color: var(--kirby-warning-contrast)}:host(.danger){--kirby-avatar-background-color: var(--kirby-danger);--kirby-avatar-color: var(--kirby-danger-contrast)}:host(.white-overlay){--kirby-avatar-background-color: var(--kirby-white-overlay);--kirby-avatar-color: var(--kirby-white-overlay-contrast)}:host(.light){--kirby-avatar-background-color: var(--kirby-color-fill-raised);--kirby-avatar-color: var(--kirby-color-content-raised)}:host(.medium){--kirby-avatar-background-color: var(--kirby-medium);--kirby-avatar-color: var(--kirby-medium-contrast)}:host(.dark){--kirby-avatar-background-color: var(--kirby-dark);--kirby-avatar-color: var(--kirby-dark-contrast)}:host(.dark-overlay){--kirby-avatar-background-color: var(--kirby-dark-overlay);--kirby-avatar-color: var(--kirby-dark-overlay-contrast)}:host(.white){--kirby-avatar-background-color: var(--kirby-color-fill-raised);--kirby-avatar-color: var(--kirby-color-content-raised)}:host(.semi-light){--kirby-avatar-background-color: var(--kirby-semi-light);--kirby-avatar-color: var(--kirby-semi-light-contrast)}\n"]
+		}]
+	}],
+	propDecorators: {
+		imageSrc: [{ type: Input }],
+		imageLoading: [{ type: Input }],
+		altText: [{ type: Input }],
+		stroke: [{ type: Input }],
+		text: [{ type: Input }],
+		overlay: [{ type: Input }],
+		size: [{ type: Input }],
+		themeColor: [{ type: Input }],
+		imageError: [{ type: Output }],
+		_cssClass: [{
+			type: HostBinding,
+			args: ["class"]
+		}]
+	}
+});
 export { AvatarComponent, AvatarSize };
-//# sourceMappingURL=kirbydesign-designsystem-avatar.mjs.map
+
+//# sourceMappingURL=kirbydesign-designsystem-avatar.mjs.map