@kirbydesign/designsystem 11.11.2 → 12.0.0

package/fesm2022/kirbydesign-designsystem-button.mjs

@@ -1,173 +1,206 @@
-import * as i0 from '@angular/core';
-import { ElementRef, ContentChild, Input, HostBinding, ChangeDetectionStrategy, Component } from '@angular/core';
-import { IconComponent } from '@kirbydesign/designsystem/icon';
-
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ContentChild, ElementRef, HostBinding, Input } from "@angular/core";
+import { IconComponent } from "@kirbydesign/designsystem/icon";
 var ButtonSize;
-(function (ButtonSize) {
-    ButtonSize["XS"] = "xs";
-    ButtonSize["SM"] = "sm";
-    ButtonSize["MD"] = "md";
-    ButtonSize["LG"] = "lg";
+(function(ButtonSize) {
+	ButtonSize["XS"] = "xs";
+	ButtonSize["SM"] = "sm";
+	ButtonSize["MD"] = "md";
+	ButtonSize["LG"] = "lg";
 })(ButtonSize || (ButtonSize = {}));
-class ButtonComponent {
-    get isButtonFloating() {
-        return this.isFloating;
-    }
-    get isIconOnly() {
-        return !!this.iconElementRef && this.showIconOnly;
-    }
-    get isIconLeft() {
-        return this._isIconLeft && !this.showIconOnly;
-    }
-    get isIconRight() {
-        return this._isIconRight && !this.showIconOnly;
-    }
-    get _cssClass() {
-        const attentionLevel = this.getAttentionLevelCssClass();
-        return [this.themeColor, this.size, attentionLevel].filter((cssClass) => !!cssClass);
-    }
-    getAttentionLevelCssClass() {
-        if (this.noDecoration)
-            return;
-        const attentionLevelDefault = '1';
-        return `attention-level${this.attentionLevel || attentionLevelDefault}`;
-    }
-    get showIconOnly() {
-        return this._showIconOnly;
-    }
-    set showIconOnly(value) {
-        if (value) {
-            // If the button text is supplied as plain text (i.e. as a text node not within an element tag),
-            // we need to wrap it in an element to be able to target and hide it with css:
-            this.wrapTextNode(this.iconElementRef?.nativeElement);
-        }
-        this._showIconOnly = value;
-    }
-    constructor(elementRef, renderer) {
-        this.elementRef = elementRef;
-        this.renderer = renderer;
-        this.noDecoration = false;
-        this._isIconLeft = false;
-        this._isIconRight = false;
-        this.isFloating = false;
-        this.size = ButtonSize.MD;
-        this._showIconOnly = false;
-        this.disposeEventListeners = [];
-    }
-    ngOnInit() {
-        this.setupEventListenerForAriaDisabledHandling();
-    }
-    setupEventListenerForAriaDisabledHandling() {
-        // Prevent event bubbling for aria-disabled buttons using a native event listener.
-        // HostListener cannot block event bubbling, see: https://github.com/angular/angular/issues/9587
-        ['click', 'keydown.enter', 'keydown.space'].forEach((evt) => {
-            const disposeEventListener = this.renderer.listen(this.elementRef.nativeElement, evt, this.blockEventIfAriaDisabled.bind(this), { capture: true });
-            this.disposeEventListeners.push(disposeEventListener);
-        });
-    }
-    wrapTextNode(iconElement) {
-        if (!iconElement) {
-            return;
-        }
-        const ifTextNode = (node) => {
-            return node?.nodeType === Node.TEXT_NODE ? node : undefined;
-        };
-        const textNode = ifTextNode(iconElement.previousSibling) || ifTextNode(iconElement.nextSibling);
-        if (textNode) {
-            const placement = textNode === iconElement.previousSibling ? 'before' : 'after';
-            const textWrapper = this.renderer.createElement('span');
-            const parent = textNode.parentNode;
-            this.renderer.removeChild(textNode.parentNode, textNode);
-            this.renderer.appendChild(textWrapper, textNode);
-            if (placement === 'before') {
-                this.renderer.insertBefore(parent, textWrapper, iconElement);
-            }
-            else if (placement === 'after') {
-                this.renderer.appendChild(parent, textWrapper);
-            }
-        }
-    }
-    ngAfterContentInit() {
-        const iconElement = this.iconElementRef?.nativeElement;
-        if (iconElement === undefined) {
-            // Nothing to do here when there's no icon:
-            return;
-        }
-        // Ensure buttons with icon is always shown as icon only inside the toolbar:
-        if (this.elementRef.nativeElement.closest('ion-toolbar')) {
-            this._showIconOnly = true;
-        }
-        if (this.showIconOnly) {
-            // If the button text is supplied as plain text (i.e. as a text node not within an element tag),
-            // we need to wrap it in an element to be able to target and hide it with css:
-            this.wrapTextNode(iconElement);
-        }
-        const hasText = !!this.elementRef.nativeElement.textContent;
-        if (!hasText) {
-            // Button doesn't contain any text, make it round:
-            this._showIconOnly = true;
-        }
-        if (hasText && !this.showIconOnly) {
-            this._isIconLeft =
-                this.elementRef.nativeElement.querySelector('.content-layer').firstChild === iconElement;
-            this._isIconRight = !this._isIconLeft;
-        }
-    }
-    blockEventIfAriaDisabled(event) {
-        if (this.elementRef.nativeElement.ariaDisabled === 'true') {
-            event.preventDefault();
-            event.stopImmediatePropagation();
-        }
-    }
-    ngOnDestroy() {
-        this.disposeEventListeners.forEach((unlistenEvent) => unlistenEvent());
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: ButtonComponent, isStandalone: true, selector: "button[kirby-button],Button[kirby-button],a[kirby-button]", inputs: { attentionLevel: "attentionLevel", noDecoration: "noDecoration", themeColor: "themeColor", expand: "expand", isFloating: "isFloating", size: "size", showIconOnly: "showIconOnly" }, host: { properties: { "class.no-decoration": "this.noDecoration", "class.floating": "this.isButtonFloating", "class.icon-only": "this.isIconOnly", "class.icon-left": "this.isIconLeft", "class.icon-right": "this.isIconRight", "class": "this._cssClass" } }, queries: [{ propertyName: "iconElementRef", first: true, predicate: IconComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "<ng-container>\n  <span class=\"state-layer\" aria-hidden=\"true\"></span>\n  <span class=\"content-layer\"><ng-content></ng-content></span>\n</ng-container>\n<!--\n  TODO: Fix globally exposed .state-layer and .content-layer\n  \n  See: https://github.com/kirbydesign/designsystem/issues/2101\n-->\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{--kirby-button-padding-left: 24px;--kirby-button-padding-right: 24px;flex-shrink:0}:host{position:relative}:host:after{content:\"\";position:absolute;min-height:44px;min-width:44px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset)}:host{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative}:host .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}:host .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}:host .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:0;border-radius:inherit;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}@media(hover:hover){:host:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host:active,:host.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black)}:host .content-layer{display:inherit;width:inherit;flex-direction:inherit;align-items:inherit;justify-content:inherit;padding-inline:var(--kirby-button-padding-left) var(--kirby-button-padding-right)}:host{font-family:var(--kirby-font-family);background-color:var(--kirby-button-background-color, initial);color:var(--kirby-button-color, inherit);border-radius:999px;box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;font-size:clamp(12px,.875rem,28px);height:40px;min-width:88px;padding:0;margin:4px;outline:none;border:none}:host.no-margin{margin:0}:host.icon-left{--kirby-icon-margin-right: 8px;--kirby-button-padding-left: 12px;--kirby-button-padding-right: 16px;padding:0}:host.icon-right{--kirby-icon-margin-left: 8px;--kirby-button-padding-left: 16px;--kirby-button-padding-right: 12px;padding:0}:host.icon-only{--kirby-button-padding-left: 0;--kirby-button-padding-right: 0;width:40px;padding:0;min-width:unset}:host.icon-only .content-layer ::ng-deep>:not(kirby-icon){position:absolute;scale:0}:host.xs{position:relative}:host.xs:after{content:\"\";position:absolute;min-height:32px;min-width:32px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}:host.xs{--kirby-icon-font-size: 16px;font-size:clamp(11px,.75rem,24px);height:max(24px,1rem);min-width:44px}:host.xs:not(.icon-only){--kirby-button-padding-left: 12px;--kirby-button-padding-right: 12px}:host.xs.icon-only{width:max(24px,1rem);min-width:unset}:host.xs.icon-left{--kirby-button-padding-left: 8px;--kirby-icon-margin-right: 4px}:host.xs.icon-right{--kirby-button-padding-right: 8px;--kirby-icon-margin-left: 4px}:host.xs.icon-left,:host.xs.icon-right{min-width:44px}:host.sm{--kirby-icon-font-size: 16px;font-size:clamp(11px,.75rem,24px);height:32px;min-width:44px}:host.sm:not(.icon-only){--kirby-button-padding-left: 16px;--kirby-button-padding-right: 16px}:host.sm.icon-only{width:32px;min-width:unset}:host.sm.icon-left{--kirby-button-padding-left: 12px}:host.sm.icon-right{--kirby-button-padding-right: 12px}:host.sm.icon-left,:host.sm.icon-right{min-width:88px}:host.lg{font-size:clamp(13px,1rem,32px);height:48px;min-width:220px}:host.lg.icon-only{width:48px;min-width:unset}:host.no-decoration{--kirby-button-background-color: transparent;--kirby-button-color: var(--kirby-black)}@media(hover:hover){:host.no-decoration:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host.no-decoration:active,:host.no-decoration.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host.attention-level1{--kirby-button-background-color: var(--kirby-primary);--kirby-button-color: var(--kirby-primary-contrast)}:host.attention-level1.destructive{--kirby-button-background-color: var(--kirby-danger);--kirby-button-color: var(--kirby-danger-contrast)}:host.attention-level2{--kirby-button-background-color: var(--kirby-black);--kirby-button-color: var(--kirby-black-contrast)}@media(hover:hover){:host.attention-level2:hover{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host.attention-level2:active,:host.attention-level2.interaction-state-active{--state-layer-opacity: .2;--state-layer-background-color: var(--kirby-black-contrast)}:host.attention-level3{--kirby-button-background-color: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@media(hover:hover){:host.attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host.attention-level3:active,:host.attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host.attention-level3 .state-layer{box-shadow:var(--kirby-inputs-elevation)}:host[expand=block]{width:100%}:host:disabled,:host[aria-disabled=true]{color:var(--kirby-semi-dark-shade);border-color:transparent;pointer-events:none}:host:disabled:not(.no-decoration),:host[aria-disabled=true]:not(.no-decoration){background-color:var(--kirby-semi-light)}:host.floating{width:64px!important;height:64px!important;min-width:unset}:host.floating:not(:disabled){box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14}:host(a){text-decoration:none}:host-context(.kirby-color-brightness-dark).no-decoration{--kirby-button-color: var(--kirby-white)}@media(hover:hover){:host-context(.kirby-color-brightness-dark).no-decoration:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host-context(.kirby-color-brightness-dark).no-decoration:active,:host-context(.kirby-color-brightness-dark).no-decoration.interaction-state-active{--state-layer-opacity: .2;--state-layer-background-color: var(--kirby-black-contrast)}:host-context(.kirby-color-brightness-dark).attention-level2{--kirby-button-background-color: var(--kirby-white);--kirby-button-color: var(--kirby-white-contrast)}@media(hover:hover){:host-context(.kirby-color-brightness-dark).attention-level2:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(.kirby-color-brightness-dark).attention-level2:active,:host-context(.kirby-color-brightness-dark).attention-level2.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}@media(hover:hover){:host-context(.kirby-color-brightness-dark).attention-level3:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host-context(.kirby-color-brightness-dark).attention-level3:active,:host-context(.kirby-color-brightness-dark).attention-level3.interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black-contrast)}:host-context(kirby-item)[slot=end]{margin-inline:16px 0}:host-context(kirby-dropdown){justify-content:space-between}:host-context(kirby-dropdown) .content-layer{min-width:0}:host-context(ion-toolbar ion-buttons.legacy-actions){font-size:clamp(12px,.875rem,28px);height:40px}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only{width:40px}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3{--kirby-button-background-color: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@media(hover:hover){:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(.page-title kirby-page-actions).no-decoration,:host-context(.page-title kirby-page-actions).attention-level1,:host-context(.page-title kirby-page-actions).attention-level2,:host-context(.page-title kirby-page-actions).attention-level3{--kirby-button-background-color: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@media(hover:hover){:host-context(.page-title kirby-page-actions).no-decoration:hover,:host-context(.page-title kirby-page-actions).attention-level1:hover,:host-context(.page-title kirby-page-actions).attention-level2:hover,:host-context(.page-title kirby-page-actions).attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(.page-title kirby-page-actions).no-decoration:active,:host-context(.page-title kirby-page-actions).no-decoration.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level1:active,:host-context(.page-title kirby-page-actions).attention-level1.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level2:active,:host-context(.page-title kirby-page-actions).attention-level2.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level3:active,:host-context(.page-title kirby-page-actions).attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-empty-state .content){font-size:clamp(13px,1rem,32px);height:48px;min-width:220px}:host-context(kirby-empty-state .content).icon-only{width:48px;min-width:unset}:host-context(kirby-toggle-button).success{--kirby-button-background-color: var(--kirby-success);--kirby-button-color: var(--kirby-success-contrast)}@media(hover:hover){:host-context(kirby-toggle-button).success:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).success:active,:host-context(kirby-toggle-button).success.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-toggle-button).warning{--kirby-button-background-color: var(--kirby-warning);--kirby-button-color: var(--kirby-warning-contrast)}@media(hover:hover){:host-context(kirby-toggle-button).warning:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).warning:active,:host-context(kirby-toggle-button).warning.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-toggle-button).danger{--kirby-button-background-color: var(--kirby-danger);--kirby-button-color: var(--kirby-danger-contrast)}@media(hover:hover){:host-context(kirby-toggle-button).danger:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).danger:active,:host-context(kirby-toggle-button).danger.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-page-actions),:host-context(kirby-action-group),:host-context(.kirby-modal ion-header ion-toolbar ion-buttons){margin:0}:host-context(kirby-modal-footer){margin-top:0;margin-bottom:0}:host-context(kirby-modal-footer):first-child{margin-left:0}:host-context(kirby-modal-footer):last-child{margin-right:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'button[kirby-button],Button[kirby-button],a[kirby-button]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\n  <span class=\"state-layer\" aria-hidden=\"true\"></span>\n  <span class=\"content-layer\"><ng-content></ng-content></span>\n</ng-container>\n<!--\n  TODO: Fix globally exposed .state-layer and .content-layer\n  \n  See: https://github.com/kirbydesign/designsystem/issues/2101\n-->\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{--kirby-button-padding-left: 24px;--kirby-button-padding-right: 24px;flex-shrink:0}:host{position:relative}:host:after{content:\"\";position:absolute;min-height:44px;min-width:44px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset)}:host{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative}:host .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}:host .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}:host .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:0;border-radius:inherit;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}@media(hover:hover){:host:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host:active,:host.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black)}:host .content-layer{display:inherit;width:inherit;flex-direction:inherit;align-items:inherit;justify-content:inherit;padding-inline:var(--kirby-button-padding-left) var(--kirby-button-padding-right)}:host{font-family:var(--kirby-font-family);background-color:var(--kirby-button-background-color, initial);color:var(--kirby-button-color, inherit);border-radius:999px;box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;font-size:clamp(12px,.875rem,28px);height:40px;min-width:88px;padding:0;margin:4px;outline:none;border:none}:host.no-margin{margin:0}:host.icon-left{--kirby-icon-margin-right: 8px;--kirby-button-padding-left: 12px;--kirby-button-padding-right: 16px;padding:0}:host.icon-right{--kirby-icon-margin-left: 8px;--kirby-button-padding-left: 16px;--kirby-button-padding-right: 12px;padding:0}:host.icon-only{--kirby-button-padding-left: 0;--kirby-button-padding-right: 0;width:40px;padding:0;min-width:unset}:host.icon-only .content-layer ::ng-deep>:not(kirby-icon){position:absolute;scale:0}:host.xs{position:relative}:host.xs:after{content:\"\";position:absolute;min-height:32px;min-width:32px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}:host.xs{--kirby-icon-font-size: 16px;font-size:clamp(11px,.75rem,24px);height:max(24px,1rem);min-width:44px}:host.xs:not(.icon-only){--kirby-button-padding-left: 12px;--kirby-button-padding-right: 12px}:host.xs.icon-only{width:max(24px,1rem);min-width:unset}:host.xs.icon-left{--kirby-button-padding-left: 8px;--kirby-icon-margin-right: 4px}:host.xs.icon-right{--kirby-button-padding-right: 8px;--kirby-icon-margin-left: 4px}:host.xs.icon-left,:host.xs.icon-right{min-width:44px}:host.sm{--kirby-icon-font-size: 16px;font-size:clamp(11px,.75rem,24px);height:32px;min-width:44px}:host.sm:not(.icon-only){--kirby-button-padding-left: 16px;--kirby-button-padding-right: 16px}:host.sm.icon-only{width:32px;min-width:unset}:host.sm.icon-left{--kirby-button-padding-left: 12px}:host.sm.icon-right{--kirby-button-padding-right: 12px}:host.sm.icon-left,:host.sm.icon-right{min-width:88px}:host.lg{font-size:clamp(13px,1rem,32px);height:48px;min-width:220px}:host.lg.icon-only{width:48px;min-width:unset}:host.no-decoration{--kirby-button-background-color: transparent;--kirby-button-color: var(--kirby-black)}@media(hover:hover){:host.no-decoration:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host.no-decoration:active,:host.no-decoration.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host.attention-level1{--kirby-button-background-color: var(--kirby-primary);--kirby-button-color: var(--kirby-primary-contrast)}:host.attention-level1.destructive{--kirby-button-background-color: var(--kirby-danger);--kirby-button-color: var(--kirby-danger-contrast)}:host.attention-level2{--kirby-button-background-color: var(--kirby-black);--kirby-button-color: var(--kirby-black-contrast)}@media(hover:hover){:host.attention-level2:hover{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host.attention-level2:active,:host.attention-level2.interaction-state-active{--state-layer-opacity: .2;--state-layer-background-color: var(--kirby-black-contrast)}:host.attention-level3{--kirby-button-background-color: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@media(hover:hover){:host.attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host.attention-level3:active,:host.attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host.attention-level3 .state-layer{box-shadow:var(--kirby-inputs-elevation)}:host[expand=block]{width:100%}:host:disabled,:host[aria-disabled=true]{color:var(--kirby-semi-dark-shade);border-color:transparent;pointer-events:none}:host:disabled:not(.no-decoration),:host[aria-disabled=true]:not(.no-decoration){background-color:var(--kirby-semi-light)}:host.floating{width:64px!important;height:64px!important;min-width:unset}:host.floating:not(:disabled){box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14}:host(a){text-decoration:none}:host-context(.kirby-color-brightness-dark).no-decoration{--kirby-button-color: var(--kirby-white)}@media(hover:hover){:host-context(.kirby-color-brightness-dark).no-decoration:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host-context(.kirby-color-brightness-dark).no-decoration:active,:host-context(.kirby-color-brightness-dark).no-decoration.interaction-state-active{--state-layer-opacity: .2;--state-layer-background-color: var(--kirby-black-contrast)}:host-context(.kirby-color-brightness-dark).attention-level2{--kirby-button-background-color: var(--kirby-white);--kirby-button-color: var(--kirby-white-contrast)}@media(hover:hover){:host-context(.kirby-color-brightness-dark).attention-level2:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(.kirby-color-brightness-dark).attention-level2:active,:host-context(.kirby-color-brightness-dark).attention-level2.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}@media(hover:hover){:host-context(.kirby-color-brightness-dark).attention-level3:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host-context(.kirby-color-brightness-dark).attention-level3:active,:host-context(.kirby-color-brightness-dark).attention-level3.interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black-contrast)}:host-context(kirby-item)[slot=end]{margin-inline:16px 0}:host-context(kirby-dropdown){justify-content:space-between}:host-context(kirby-dropdown) .content-layer{min-width:0}:host-context(ion-toolbar ion-buttons.legacy-actions){font-size:clamp(12px,.875rem,28px);height:40px}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only{width:40px}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3{--kirby-button-background-color: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@media(hover:hover){:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(.page-title kirby-page-actions).no-decoration,:host-context(.page-title kirby-page-actions).attention-level1,:host-context(.page-title kirby-page-actions).attention-level2,:host-context(.page-title kirby-page-actions).attention-level3{--kirby-button-background-color: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@media(hover:hover){:host-context(.page-title kirby-page-actions).no-decoration:hover,:host-context(.page-title kirby-page-actions).attention-level1:hover,:host-context(.page-title kirby-page-actions).attention-level2:hover,:host-context(.page-title kirby-page-actions).attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(.page-title kirby-page-actions).no-decoration:active,:host-context(.page-title kirby-page-actions).no-decoration.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level1:active,:host-context(.page-title kirby-page-actions).attention-level1.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level2:active,:host-context(.page-title kirby-page-actions).attention-level2.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level3:active,:host-context(.page-title kirby-page-actions).attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-empty-state .content){font-size:clamp(13px,1rem,32px);height:48px;min-width:220px}:host-context(kirby-empty-state .content).icon-only{width:48px;min-width:unset}:host-context(kirby-toggle-button).success{--kirby-button-background-color: var(--kirby-success);--kirby-button-color: var(--kirby-success-contrast)}@media(hover:hover){:host-context(kirby-toggle-button).success:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).success:active,:host-context(kirby-toggle-button).success.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-toggle-button).warning{--kirby-button-background-color: var(--kirby-warning);--kirby-button-color: var(--kirby-warning-contrast)}@media(hover:hover){:host-context(kirby-toggle-button).warning:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).warning:active,:host-context(kirby-toggle-button).warning.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-toggle-button).danger{--kirby-button-background-color: var(--kirby-danger);--kirby-button-color: var(--kirby-danger-contrast)}@media(hover:hover){:host-context(kirby-toggle-button).danger:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).danger:active,:host-context(kirby-toggle-button).danger.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-page-actions),:host-context(kirby-action-group),:host-context(.kirby-modal ion-header ion-toolbar ion-buttons){margin:0}:host-context(kirby-modal-footer){margin-top:0;margin-bottom:0}:host-context(kirby-modal-footer):first-child{margin-left:0}:host-context(kirby-modal-footer):last-child{margin-right:0}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { attentionLevel: [{
-                type: Input
-            }], noDecoration: [{
-                type: HostBinding,
-                args: ['class.no-decoration']
-            }, {
-                type: Input
-            }], isButtonFloating: [{
-                type: HostBinding,
-                args: ['class.floating']
-            }], isIconOnly: [{
-                type: HostBinding,
-                args: ['class.icon-only']
-            }], isIconLeft: [{
-                type: HostBinding,
-                args: ['class.icon-left']
-            }], isIconRight: [{
-                type: HostBinding,
-                args: ['class.icon-right']
-            }], _cssClass: [{
-                type: HostBinding,
-                args: ['class']
-            }], themeColor: [{
-                type: Input
-            }], expand: [{
-                type: Input
-            }], isFloating: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], showIconOnly: [{
-                type: Input
-            }], iconElementRef: [{
-                type: ContentChild,
-                args: [IconComponent, { read: ElementRef }]
-            }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+var ButtonComponent = class ButtonComponent {
+	get isButtonFloating() {
+		return this.isFloating;
+	}
+	get isIconOnly() {
+		return !!this.iconElementRef && this.showIconOnly;
+	}
+	get isIconLeft() {
+		return this._isIconLeft && !this.showIconOnly;
+	}
+	get isIconRight() {
+		return this._isIconRight && !this.showIconOnly;
+	}
+	get _cssClass() {
+		const attentionLevel = this.getAttentionLevelCssClass();
+		return [
+			this.themeColor,
+			this.size,
+			attentionLevel
+		].filter((cssClass) => !!cssClass);
+	}
+	getAttentionLevelCssClass() {
+		if (this.noDecoration) return;
+		return `attention-level${this.attentionLevel || "1"}`;
+	}
+	get showIconOnly() {
+		return this._showIconOnly;
+	}
+	set showIconOnly(value) {
+		if (value) this.wrapTextNode(this.iconElementRef?.nativeElement);
+		this._showIconOnly = value;
+	}
+	constructor(elementRef, renderer) {
+		this.elementRef = elementRef;
+		this.renderer = renderer;
+		this.noDecoration = false;
+		this._isIconLeft = false;
+		this._isIconRight = false;
+		this.isFloating = false;
+		this.size = ButtonSize.MD;
+		this._showIconOnly = false;
+		this.disposeEventListeners = [];
+	}
+	ngOnInit() {
+		this.setupEventListenerForAriaDisabledHandling();
+	}
+	setupEventListenerForAriaDisabledHandling() {
+		[
+			"click",
+			"keydown.enter",
+			"keydown.space"
+		].forEach((evt) => {
+			const disposeEventListener = this.renderer.listen(this.elementRef.nativeElement, evt, this.blockEventIfAriaDisabled.bind(this), { capture: true });
+			this.disposeEventListeners.push(disposeEventListener);
+		});
+	}
+	wrapTextNode(iconElement) {
+		if (!iconElement) return;
+		const ifTextNode = (node) => {
+			return node?.nodeType === Node.TEXT_NODE ? node : void 0;
+		};
+		const textNode = ifTextNode(iconElement.previousSibling) || ifTextNode(iconElement.nextSibling);
+		if (textNode) {
+			const placement = textNode === iconElement.previousSibling ? "before" : "after";
+			const textWrapper = this.renderer.createElement("span");
+			const parent = textNode.parentNode;
+			this.renderer.removeChild(textNode.parentNode, textNode);
+			this.renderer.appendChild(textWrapper, textNode);
+			if (placement === "before") this.renderer.insertBefore(parent, textWrapper, iconElement);
+			else if (placement === "after") this.renderer.appendChild(parent, textWrapper);
+		}
+	}
+	ngAfterContentInit() {
+		const iconElement = this.iconElementRef?.nativeElement;
+		if (iconElement === void 0) return;
+		if (this.elementRef.nativeElement.closest("ion-toolbar")) this._showIconOnly = true;
+		if (this.showIconOnly) this.wrapTextNode(iconElement);
+		const hasText = !!this.elementRef.nativeElement.textContent;
+		if (!hasText) this._showIconOnly = true;
+		if (hasText && !this.showIconOnly) {
+			this._isIconLeft = this.elementRef.nativeElement.querySelector(".content-layer").firstChild === iconElement;
+			this._isIconRight = !this._isIconLeft;
+		}
+	}
+	blockEventIfAriaDisabled(event) {
+		if (this.elementRef.nativeElement.ariaDisabled === "true") {
+			event.preventDefault();
+			event.stopImmediatePropagation();
+		}
+	}
+	ngOnDestroy() {
+		this.disposeEventListeners.forEach((unlistenEvent) => unlistenEvent());
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: ButtonComponent,
+			deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			type: ButtonComponent,
+			isStandalone: true,
+			selector: "button[kirby-button],Button[kirby-button],a[kirby-button]",
+			inputs: {
+				attentionLevel: "attentionLevel",
+				noDecoration: "noDecoration",
+				themeColor: "themeColor",
+				expand: "expand",
+				isFloating: "isFloating",
+				size: "size",
+				showIconOnly: "showIconOnly"
+			},
+			host: { properties: {
+				"class.no-decoration": "this.noDecoration",
+				"class.floating": "this.isButtonFloating",
+				"class.icon-only": "this.isIconOnly",
+				"class.icon-left": "this.isIconLeft",
+				"class.icon-right": "this.isIconRight",
+				"class": "this._cssClass"
+			} },
+			queries: [{
+				propertyName: "iconElementRef",
+				first: true,
+				predicate: IconComponent,
+				descendants: true,
+				read: ElementRef
+			}],
+			ngImport: i0,
+			template: "<ng-container>\n  <span class=\"state-layer\" aria-hidden=\"true\"></span>\n  <span class=\"content-layer\"><ng-content></ng-content></span>\n</ng-container>\n<!--\n  TODO: Fix globally exposed .state-layer and .content-layer\n  \n  See: https://github.com/kirbydesign/designsystem/issues/2101\n-->\n",
+			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{--kirby-button-padding-left: var(--kirby-spacing-m);--kirby-button-padding-right: var(--kirby-spacing-m);flex-shrink:0}:host{position:relative}:host:after{content:\"\";position:absolute;min-height:44px;min-width:44px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset)}:host{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative}:host .content-layer{position:relative;z-index:var(--content-layer-z-index, var(--kirby-z-index-default))}:host .state-layer{position:absolute;inset:-0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:calc(var(--kirby-z-index-default) + 1)}:host .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:0;border-radius:inherit;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}@media(hover:hover){:host:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host:active,:host.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black)}:host .content-layer{display:inherit;width:inherit;flex-direction:inherit;align-items:inherit;justify-content:inherit;padding-inline:var(--kirby-button-padding-left) var(--kirby-button-padding-right)}:host{font-family:var(--kirby-font-family);background-color:var(--kirby-button-background-color, initial);color:var(--kirby-button-color, inherit);border-radius:var(--kirby-border-radius-pill);box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;font-size:var(--kirby-font-size-s);height:var(--kirby-spacing-xl);min-width:88px;padding:0;margin:var(--kirby-spacing-xxxs);outline:none;border:none}:host.no-margin{margin:0}:host.icon-left{--kirby-icon-margin-right: var(--kirby-spacing-xxs);--kirby-button-padding-left: var(--kirby-spacing-xs);--kirby-button-padding-right: var(--kirby-spacing-s);padding:0}:host.icon-right{--kirby-icon-margin-left: var(--kirby-spacing-xxs);--kirby-button-padding-left: var(--kirby-spacing-s);--kirby-button-padding-right: var(--kirby-spacing-xs);padding:0}:host.icon-only{--kirby-button-padding-left: 0;--kirby-button-padding-right: 0;width:var(--kirby-spacing-xl);padding:0;min-width:unset}:host.icon-only .content-layer ::ng-deep>:not(kirby-icon){position:absolute;scale:0}:host.xs{position:relative}:host.xs:after{content:\"\";position:absolute;min-height:calc(var(--kirby-spacing-m) + var(--kirby-spacing-xxxs) * 2);min-width:calc(var(--kirby-spacing-m) + var(--kirby-spacing-xxxs) * 2);width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}:host.xs{--kirby-icon-font-size: var(--kirby-icon-font-size-xs);font-size:var(--kirby-font-size-xs);height:max(var(--kirby-spacing-m),var(--kirby-relative-size-s));min-width:44px}:host.xs:not(.icon-only){--kirby-button-padding-left: var(--kirby-spacing-xs);--kirby-button-padding-right: var(--kirby-spacing-xs)}:host.xs.icon-only{width:max(var(--kirby-spacing-m),var(--kirby-relative-size-s));min-width:unset}:host.xs.icon-left{--kirby-button-padding-left: var(--kirby-spacing-xxs);--kirby-icon-margin-right: var(--kirby-spacing-xxxs)}:host.xs.icon-right{--kirby-button-padding-right: var(--kirby-spacing-xxs);--kirby-icon-margin-left: var(--kirby-spacing-xxxs)}:host.xs.icon-left,:host.xs.icon-right{min-width:44px}:host.sm{--kirby-icon-font-size: var(--kirby-spacing-s);font-size:var(--kirby-font-size-xs);height:var(--kirby-spacing-l);min-width:44px}:host.sm:not(.icon-only){--kirby-button-padding-left: var(--kirby-spacing-s);--kirby-button-padding-right: var(--kirby-spacing-s)}:host.sm.icon-only{width:var(--kirby-spacing-l);min-width:unset}:host.sm.icon-left{--kirby-button-padding-left: var(--kirby-spacing-xs)}:host.sm.icon-right{--kirby-button-padding-right: var(--kirby-spacing-xs)}:host.sm.icon-left,:host.sm.icon-right{min-width:88px}:host.lg{font-size:var(--kirby-font-size-n);height:var(--kirby-spacing-xxl);min-width:220px}:host.lg.icon-only{width:var(--kirby-spacing-xxl);min-width:unset}:host.no-decoration{--kirby-button-background-color: transparent;--kirby-button-color: var(--kirby-black)}@media(hover:hover){:host.no-decoration:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host.no-decoration:active,:host.no-decoration.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host.attention-level1{--kirby-button-background-color: var(--kirby-primary);--kirby-button-color: var(--kirby-primary-contrast)}:host.attention-level1.destructive{--kirby-button-background-color: var(--kirby-danger);--kirby-button-color: var(--kirby-danger-contrast)}:host.attention-level2{--kirby-button-background-color: var(--kirby-black);--kirby-button-color: var(--kirby-black-contrast)}@media(hover:hover){:host.attention-level2:hover{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host.attention-level2:active,:host.attention-level2.interaction-state-active{--state-layer-opacity: .2;--state-layer-background-color: var(--kirby-black-contrast)}:host.attention-level3{--kirby-button-background-color: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@media(hover:hover){:host.attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host.attention-level3:active,:host.attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host.attention-level3 .state-layer{box-shadow:var(--kirby-inputs-elevation)}:host[expand=block]{width:100%}:host:disabled,:host[aria-disabled=true]{color:var(--kirby-semi-dark-shade);border-color:transparent;pointer-events:none}:host:disabled:not(.no-decoration),:host[aria-disabled=true]:not(.no-decoration){background-color:var(--kirby-semi-light)}:host.floating{width:64px!important;height:64px!important;min-width:unset}:host.floating:not(:disabled){box-shadow:var(--kirby-elevation-8)}:host(a){text-decoration:none}:host-context(.kirby-color-brightness-dark).no-decoration{--kirby-button-color: var(--kirby-white)}@media(hover:hover){:host-context(.kirby-color-brightness-dark).no-decoration:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host-context(.kirby-color-brightness-dark).no-decoration:active,:host-context(.kirby-color-brightness-dark).no-decoration.interaction-state-active{--state-layer-opacity: .2;--state-layer-background-color: var(--kirby-black-contrast)}:host-context(.kirby-color-brightness-dark).attention-level2{--kirby-button-background-color: var(--kirby-white);--kirby-button-color: var(--kirby-white-contrast)}@media(hover:hover){:host-context(.kirby-color-brightness-dark).attention-level2:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(.kirby-color-brightness-dark).attention-level2:active,:host-context(.kirby-color-brightness-dark).attention-level2.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}@media(hover:hover){:host-context(.kirby-color-brightness-dark).attention-level3:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host-context(.kirby-color-brightness-dark).attention-level3:active,:host-context(.kirby-color-brightness-dark).attention-level3.interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black-contrast)}:host-context(kirby-item)[slot=end]{margin-inline:var(--kirby-spacing-s) 0}:host-context(kirby-dropdown){justify-content:space-between}:host-context(kirby-dropdown) .content-layer{min-width:0}:host-context(ion-toolbar ion-buttons.legacy-actions){font-size:var(--kirby-font-size-s);height:var(--kirby-spacing-xl)}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only{width:var(--kirby-spacing-xl)}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3{--kirby-button-background-color: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@media(hover:hover){:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(.page-title kirby-page-actions).no-decoration,:host-context(.page-title kirby-page-actions).attention-level1,:host-context(.page-title kirby-page-actions).attention-level2,:host-context(.page-title kirby-page-actions).attention-level3{--kirby-button-background-color: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@media(hover:hover){:host-context(.page-title kirby-page-actions).no-decoration:hover,:host-context(.page-title kirby-page-actions).attention-level1:hover,:host-context(.page-title kirby-page-actions).attention-level2:hover,:host-context(.page-title kirby-page-actions).attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(.page-title kirby-page-actions).no-decoration:active,:host-context(.page-title kirby-page-actions).no-decoration.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level1:active,:host-context(.page-title kirby-page-actions).attention-level1.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level2:active,:host-context(.page-title kirby-page-actions).attention-level2.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level3:active,:host-context(.page-title kirby-page-actions).attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-empty-state .content){font-size:var(--kirby-font-size-n);height:var(--kirby-spacing-xxl);min-width:220px}:host-context(kirby-empty-state .content).icon-only{width:var(--kirby-spacing-xxl);min-width:unset}:host-context(kirby-toggle-button).success{--kirby-button-background-color: var(--kirby-success);--kirby-button-color: var(--kirby-success-contrast)}:host-context(kirby-toggle-button).warning{--kirby-button-background-color: var(--kirby-warning);--kirby-button-color: var(--kirby-warning-contrast)}:host-context(kirby-toggle-button).danger{--kirby-button-background-color: var(--kirby-danger);--kirby-button-color: var(--kirby-danger-contrast)}@media(hover:hover){:host-context(kirby-toggle-button):is(.success,.warning,.danger):hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button):is(.success,.warning,.danger):active,:host-context(kirby-toggle-button):is(.success,.warning,.danger).interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-page-actions),:host-context(kirby-action-group),:host-context(.kirby-modal ion-header ion-toolbar ion-buttons){margin:0}:host-context(kirby-modal-footer){margin-top:0;margin-bottom:0}:host-context(kirby-modal-footer):first-child{margin-left:0}:host-context(kirby-modal-footer):last-child{margin-right:0}\n"],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: ButtonComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "button[kirby-button],Button[kirby-button],a[kirby-button]",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<ng-container>\n  <span class=\"state-layer\" aria-hidden=\"true\"></span>\n  <span class=\"content-layer\"><ng-content></ng-content></span>\n</ng-container>\n<!--\n  TODO: Fix globally exposed .state-layer and .content-layer\n  \n  See: https://github.com/kirbydesign/designsystem/issues/2101\n-->\n",
+			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{--kirby-button-padding-left: var(--kirby-spacing-m);--kirby-button-padding-right: var(--kirby-spacing-m);flex-shrink:0}:host{position:relative}:host:after{content:\"\";position:absolute;min-height:44px;min-width:44px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset)}:host{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative}:host .content-layer{position:relative;z-index:var(--content-layer-z-index, var(--kirby-z-index-default))}:host .state-layer{position:absolute;inset:-0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:calc(var(--kirby-z-index-default) + 1)}:host .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:0;border-radius:inherit;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}@media(hover:hover){:host:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host:active,:host.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black)}:host .content-layer{display:inherit;width:inherit;flex-direction:inherit;align-items:inherit;justify-content:inherit;padding-inline:var(--kirby-button-padding-left) var(--kirby-button-padding-right)}:host{font-family:var(--kirby-font-family);background-color:var(--kirby-button-background-color, initial);color:var(--kirby-button-color, inherit);border-radius:var(--kirby-border-radius-pill);box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;font-size:var(--kirby-font-size-s);height:var(--kirby-spacing-xl);min-width:88px;padding:0;margin:var(--kirby-spacing-xxxs);outline:none;border:none}:host.no-margin{margin:0}:host.icon-left{--kirby-icon-margin-right: var(--kirby-spacing-xxs);--kirby-button-padding-left: var(--kirby-spacing-xs);--kirby-button-padding-right: var(--kirby-spacing-s);padding:0}:host.icon-right{--kirby-icon-margin-left: var(--kirby-spacing-xxs);--kirby-button-padding-left: var(--kirby-spacing-s);--kirby-button-padding-right: var(--kirby-spacing-xs);padding:0}:host.icon-only{--kirby-button-padding-left: 0;--kirby-button-padding-right: 0;width:var(--kirby-spacing-xl);padding:0;min-width:unset}:host.icon-only .content-layer ::ng-deep>:not(kirby-icon){position:absolute;scale:0}:host.xs{position:relative}:host.xs:after{content:\"\";position:absolute;min-height:calc(var(--kirby-spacing-m) + var(--kirby-spacing-xxxs) * 2);min-width:calc(var(--kirby-spacing-m) + var(--kirby-spacing-xxxs) * 2);width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}:host.xs{--kirby-icon-font-size: var(--kirby-icon-font-size-xs);font-size:var(--kirby-font-size-xs);height:max(var(--kirby-spacing-m),var(--kirby-relative-size-s));min-width:44px}:host.xs:not(.icon-only){--kirby-button-padding-left: var(--kirby-spacing-xs);--kirby-button-padding-right: var(--kirby-spacing-xs)}:host.xs.icon-only{width:max(var(--kirby-spacing-m),var(--kirby-relative-size-s));min-width:unset}:host.xs.icon-left{--kirby-button-padding-left: var(--kirby-spacing-xxs);--kirby-icon-margin-right: var(--kirby-spacing-xxxs)}:host.xs.icon-right{--kirby-button-padding-right: var(--kirby-spacing-xxs);--kirby-icon-margin-left: var(--kirby-spacing-xxxs)}:host.xs.icon-left,:host.xs.icon-right{min-width:44px}:host.sm{--kirby-icon-font-size: var(--kirby-spacing-s);font-size:var(--kirby-font-size-xs);height:var(--kirby-spacing-l);min-width:44px}:host.sm:not(.icon-only){--kirby-button-padding-left: var(--kirby-spacing-s);--kirby-button-padding-right: var(--kirby-spacing-s)}:host.sm.icon-only{width:var(--kirby-spacing-l);min-width:unset}:host.sm.icon-left{--kirby-button-padding-left: var(--kirby-spacing-xs)}:host.sm.icon-right{--kirby-button-padding-right: var(--kirby-spacing-xs)}:host.sm.icon-left,:host.sm.icon-right{min-width:88px}:host.lg{font-size:var(--kirby-font-size-n);height:var(--kirby-spacing-xxl);min-width:220px}:host.lg.icon-only{width:var(--kirby-spacing-xxl);min-width:unset}:host.no-decoration{--kirby-button-background-color: transparent;--kirby-button-color: var(--kirby-black)}@media(hover:hover){:host.no-decoration:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host.no-decoration:active,:host.no-decoration.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host.attention-level1{--kirby-button-background-color: var(--kirby-primary);--kirby-button-color: var(--kirby-primary-contrast)}:host.attention-level1.destructive{--kirby-button-background-color: var(--kirby-danger);--kirby-button-color: var(--kirby-danger-contrast)}:host.attention-level2{--kirby-button-background-color: var(--kirby-black);--kirby-button-color: var(--kirby-black-contrast)}@media(hover:hover){:host.attention-level2:hover{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host.attention-level2:active,:host.attention-level2.interaction-state-active{--state-layer-opacity: .2;--state-layer-background-color: var(--kirby-black-contrast)}:host.attention-level3{--kirby-button-background-color: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@media(hover:hover){:host.attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host.attention-level3:active,:host.attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host.attention-level3 .state-layer{box-shadow:var(--kirby-inputs-elevation)}:host[expand=block]{width:100%}:host:disabled,:host[aria-disabled=true]{color:var(--kirby-semi-dark-shade);border-color:transparent;pointer-events:none}:host:disabled:not(.no-decoration),:host[aria-disabled=true]:not(.no-decoration){background-color:var(--kirby-semi-light)}:host.floating{width:64px!important;height:64px!important;min-width:unset}:host.floating:not(:disabled){box-shadow:var(--kirby-elevation-8)}:host(a){text-decoration:none}:host-context(.kirby-color-brightness-dark).no-decoration{--kirby-button-color: var(--kirby-white)}@media(hover:hover){:host-context(.kirby-color-brightness-dark).no-decoration:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host-context(.kirby-color-brightness-dark).no-decoration:active,:host-context(.kirby-color-brightness-dark).no-decoration.interaction-state-active{--state-layer-opacity: .2;--state-layer-background-color: var(--kirby-black-contrast)}:host-context(.kirby-color-brightness-dark).attention-level2{--kirby-button-background-color: var(--kirby-white);--kirby-button-color: var(--kirby-white-contrast)}@media(hover:hover){:host-context(.kirby-color-brightness-dark).attention-level2:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(.kirby-color-brightness-dark).attention-level2:active,:host-context(.kirby-color-brightness-dark).attention-level2.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}@media(hover:hover){:host-context(.kirby-color-brightness-dark).attention-level3:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host-context(.kirby-color-brightness-dark).attention-level3:active,:host-context(.kirby-color-brightness-dark).attention-level3.interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black-contrast)}:host-context(kirby-item)[slot=end]{margin-inline:var(--kirby-spacing-s) 0}:host-context(kirby-dropdown){justify-content:space-between}:host-context(kirby-dropdown) .content-layer{min-width:0}:host-context(ion-toolbar ion-buttons.legacy-actions){font-size:var(--kirby-font-size-s);height:var(--kirby-spacing-xl)}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only{width:var(--kirby-spacing-xl)}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3{--kirby-button-background-color: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@media(hover:hover){:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(.page-title kirby-page-actions).no-decoration,:host-context(.page-title kirby-page-actions).attention-level1,:host-context(.page-title kirby-page-actions).attention-level2,:host-context(.page-title kirby-page-actions).attention-level3{--kirby-button-background-color: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@media(hover:hover){:host-context(.page-title kirby-page-actions).no-decoration:hover,:host-context(.page-title kirby-page-actions).attention-level1:hover,:host-context(.page-title kirby-page-actions).attention-level2:hover,:host-context(.page-title kirby-page-actions).attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(.page-title kirby-page-actions).no-decoration:active,:host-context(.page-title kirby-page-actions).no-decoration.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level1:active,:host-context(.page-title kirby-page-actions).attention-level1.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level2:active,:host-context(.page-title kirby-page-actions).attention-level2.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level3:active,:host-context(.page-title kirby-page-actions).attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-empty-state .content){font-size:var(--kirby-font-size-n);height:var(--kirby-spacing-xxl);min-width:220px}:host-context(kirby-empty-state .content).icon-only{width:var(--kirby-spacing-xxl);min-width:unset}:host-context(kirby-toggle-button).success{--kirby-button-background-color: var(--kirby-success);--kirby-button-color: var(--kirby-success-contrast)}:host-context(kirby-toggle-button).warning{--kirby-button-background-color: var(--kirby-warning);--kirby-button-color: var(--kirby-warning-contrast)}:host-context(kirby-toggle-button).danger{--kirby-button-background-color: var(--kirby-danger);--kirby-button-color: var(--kirby-danger-contrast)}@media(hover:hover){:host-context(kirby-toggle-button):is(.success,.warning,.danger):hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button):is(.success,.warning,.danger):active,:host-context(kirby-toggle-button):is(.success,.warning,.danger).interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-page-actions),:host-context(kirby-action-group),:host-context(.kirby-modal ion-header ion-toolbar ion-buttons){margin:0}:host-context(kirby-modal-footer){margin-top:0;margin-bottom:0}:host-context(kirby-modal-footer):first-child{margin-left:0}:host-context(kirby-modal-footer):last-child{margin-right:0}\n"]
+		}]
+	}],
+	ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }],
+	propDecorators: {
+		attentionLevel: [{ type: Input }],
+		noDecoration: [{
+			type: HostBinding,
+			args: ["class.no-decoration"]
+		}, { type: Input }],
+		isButtonFloating: [{
+			type: HostBinding,
+			args: ["class.floating"]
+		}],
+		isIconOnly: [{
+			type: HostBinding,
+			args: ["class.icon-only"]
+		}],
+		isIconLeft: [{
+			type: HostBinding,
+			args: ["class.icon-left"]
+		}],
+		isIconRight: [{
+			type: HostBinding,
+			args: ["class.icon-right"]
+		}],
+		_cssClass: [{
+			type: HostBinding,
+			args: ["class"]
+		}],
+		themeColor: [{ type: Input }],
+		expand: [{ type: Input }],
+		isFloating: [{ type: Input }],
+		size: [{ type: Input }],
+		showIconOnly: [{ type: Input }],
+		iconElementRef: [{
+			type: ContentChild,
+			args: [IconComponent, { read: ElementRef }]
+		}]
+	}
+});
 export { ButtonComponent, ButtonSize };
-//# sourceMappingURL=kirbydesign-designsystem-button.mjs.map
+
+//# sourceMappingURL=kirbydesign-designsystem-button.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"kirbydesign-designsystem-button.mjs","sources":["../../button/src/button.component.ts","../../button/src/button.component.html","../../button/src/kirbydesign-designsystem-button.ts"],"sourcesContent":["import {\n  AfterContentInit,\n  ChangeDetectionStrategy,\n  Component,\n  ContentChild,\n  ElementRef,\n  HostBinding,\n  Input,\n  OnDestroy,\n  OnInit,\n  Renderer2,\n} from '@angular/core';\n\nimport { NotificationColor } from '@kirbydesign/core';\nimport { EventListenerDisposeFn } from '@kirbydesign/designsystem/types';\n\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\n\nexport enum ButtonSize {\n  XS = 'xs',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n}\n\nexport type AttentionLevel = '1' | '2' | '3';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'button[kirby-button],Button[kirby-button],a[kirby-button]',\n  templateUrl: './button.component.html',\n  styleUrls: ['./button.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ButtonComponent implements AfterContentInit, OnDestroy, OnInit {\n  @Input() attentionLevel: AttentionLevel;\n\n  @HostBinding('class.no-decoration')\n  @Input()\n  noDecoration = false;\n\n  @HostBinding('class.floating')\n  public get isButtonFloating(): boolean {\n    return this.isFloating;\n  }\n\n  @HostBinding('class.icon-only')\n  public get isIconOnly(): boolean {\n    return !!this.iconElementRef && this.showIconOnly;\n  }\n  private _isIconLeft = false;\n  @HostBinding('class.icon-left')\n  public get isIconLeft() {\n    return this._isIconLeft && !this.showIconOnly;\n  }\n  private _isIconRight = false;\n  @HostBinding('class.icon-right')\n  public get isIconRight() {\n    return this._isIconRight && !this.showIconOnly;\n  }\n\n  @HostBinding('class')\n  get _cssClass() {\n    const attentionLevel = this.getAttentionLevelCssClass();\n    return [this.themeColor, this.size, attentionLevel].filter((cssClass) => !!cssClass);\n  }\n\n  private getAttentionLevelCssClass() {\n    if (this.noDecoration) return;\n    const attentionLevelDefault: AttentionLevel = '1';\n    return `attention-level${this.attentionLevel || attentionLevelDefault}`;\n  }\n\n  @Input()\n  themeColor: NotificationColor;\n  @Input() expand: 'full' | 'block';\n  @Input() isFloating: boolean = false;\n  @Input()\n  size: ButtonSize | `${ButtonSize}` = ButtonSize.MD;\n\n  private _showIconOnly: boolean = false;\n  get showIconOnly() {\n    return this._showIconOnly;\n  }\n  @Input() set showIconOnly(value: boolean) {\n    if (value) {\n      // If the button text is supplied as plain text (i.e. as a text node not within an element tag),\n      // we need to wrap it in an element to be able to target and hide it with css:\n      this.wrapTextNode(this.iconElementRef?.nativeElement);\n    }\n    this._showIconOnly = value;\n  }\n\n  @ContentChild(IconComponent, { read: ElementRef })\n  iconElementRef?: ElementRef<HTMLElement>;\n\n  private disposeEventListeners: EventListenerDisposeFn[] = [];\n\n  constructor(\n    private elementRef: ElementRef<HTMLElement>,\n    private renderer: Renderer2\n  ) {}\n\n  ngOnInit(): void {\n    this.setupEventListenerForAriaDisabledHandling();\n  }\n\n  setupEventListenerForAriaDisabledHandling() {\n    // Prevent event bubbling for aria-disabled buttons using a native event listener.\n    // HostListener cannot block event bubbling, see: https://github.com/angular/angular/issues/9587\n    ['click', 'keydown.enter', 'keydown.space'].forEach((evt) => {\n      const disposeEventListener = this.renderer.listen(\n        this.elementRef.nativeElement,\n        evt,\n        this.blockEventIfAriaDisabled.bind(this),\n        { capture: true }\n      );\n      this.disposeEventListeners.push(disposeEventListener);\n    });\n  }\n\n  private wrapTextNode(iconElement?: HTMLElement) {\n    if (!iconElement) {\n      return;\n    }\n\n    const ifTextNode = (node?: ChildNode): ChildNode | undefined => {\n      return node?.nodeType === Node.TEXT_NODE ? node : undefined;\n    };\n\n    const textNode = ifTextNode(iconElement.previousSibling) || ifTextNode(iconElement.nextSibling);\n    if (textNode) {\n      const placement = textNode === iconElement.previousSibling ? 'before' : 'after';\n      const textWrapper = this.renderer.createElement('span');\n      const parent = textNode.parentNode;\n      this.renderer.removeChild(textNode.parentNode, textNode);\n      this.renderer.appendChild(textWrapper, textNode);\n      if (placement === 'before') {\n        this.renderer.insertBefore(parent, textWrapper, iconElement);\n      } else if (placement === 'after') {\n        this.renderer.appendChild(parent, textWrapper);\n      }\n    }\n  }\n\n  ngAfterContentInit(): void {\n    const iconElement = this.iconElementRef?.nativeElement;\n\n    if (iconElement === undefined) {\n      // Nothing to do here when there's no icon:\n      return;\n    }\n\n    // Ensure buttons with icon is always shown as icon only inside the toolbar:\n    if (this.elementRef.nativeElement.closest('ion-toolbar')) {\n      this._showIconOnly = true;\n    }\n\n    if (this.showIconOnly) {\n      // If the button text is supplied as plain text (i.e. as a text node not within an element tag),\n      // we need to wrap it in an element to be able to target and hide it with css:\n      this.wrapTextNode(iconElement);\n    }\n\n    const hasText = !!this.elementRef.nativeElement.textContent;\n    if (!hasText) {\n      // Button doesn't contain any text, make it round:\n      this._showIconOnly = true;\n    }\n\n    if (hasText && !this.showIconOnly) {\n      this._isIconLeft =\n        this.elementRef.nativeElement.querySelector('.content-layer').firstChild === iconElement;\n      this._isIconRight = !this._isIconLeft;\n    }\n  }\n\n  private blockEventIfAriaDisabled(event: Event) {\n    if (this.elementRef.nativeElement.ariaDisabled === 'true') {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n    }\n  }\n\n  ngOnDestroy() {\n    this.disposeEventListeners.forEach((unlistenEvent) => unlistenEvent());\n  }\n}\n","<ng-container>\n  <span class=\"state-layer\" aria-hidden=\"true\"></span>\n  <span class=\"content-layer\"><ng-content></ng-content></span>\n</ng-container>\n<!--\n  TODO: Fix globally exposed .state-layer and .content-layer\n  \n  See: https://github.com/kirbydesign/designsystem/issues/2101\n-->\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-button.mjs","names":[],"sources":["../../button/src/button.component.ts","../../button/src/button.component.html"],"sourcesContent":["import {\n  AfterContentInit,\n  ChangeDetectionStrategy,\n  Component,\n  ContentChild,\n  ElementRef,\n  HostBinding,\n  Input,\n  OnDestroy,\n  OnInit,\n  Renderer2,\n} from '@angular/core';\n\nimport { NotificationColor } from '@kirbydesign/core';\nimport { EventListenerDisposeFn } from '@kirbydesign/designsystem/types';\n\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\n\nexport enum ButtonSize {\n  XS = 'xs',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n}\n\nexport type AttentionLevel = '1' | '2' | '3';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'button[kirby-button],Button[kirby-button],a[kirby-button]',\n  templateUrl: './button.component.html',\n  styleUrls: ['./button.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ButtonComponent implements AfterContentInit, OnDestroy, OnInit {\n  @Input() attentionLevel: AttentionLevel;\n\n  @HostBinding('class.no-decoration')\n  @Input()\n  noDecoration = false;\n\n  @HostBinding('class.floating')\n  public get isButtonFloating(): boolean {\n    return this.isFloating;\n  }\n\n  @HostBinding('class.icon-only')\n  public get isIconOnly(): boolean {\n    return !!this.iconElementRef && this.showIconOnly;\n  }\n  private _isIconLeft = false;\n  @HostBinding('class.icon-left')\n  public get isIconLeft() {\n    return this._isIconLeft && !this.showIconOnly;\n  }\n  private _isIconRight = false;\n  @HostBinding('class.icon-right')\n  public get isIconRight() {\n    return this._isIconRight && !this.showIconOnly;\n  }\n\n  @HostBinding('class')\n  get _cssClass() {\n    const attentionLevel = this.getAttentionLevelCssClass();\n    return [this.themeColor, this.size, attentionLevel].filter((cssClass) => !!cssClass);\n  }\n\n  private getAttentionLevelCssClass() {\n    if (this.noDecoration) return;\n    const attentionLevelDefault: AttentionLevel = '1';\n    return `attention-level${this.attentionLevel || attentionLevelDefault}`;\n  }\n\n  @Input()\n  themeColor: NotificationColor;\n  @Input() expand: 'full' | 'block';\n  @Input() isFloating: boolean = false;\n  @Input()\n  size: ButtonSize | `${ButtonSize}` = ButtonSize.MD;\n\n  private _showIconOnly: boolean = false;\n  get showIconOnly() {\n    return this._showIconOnly;\n  }\n  @Input() set showIconOnly(value: boolean) {\n    if (value) {\n      // If the button text is supplied as plain text (i.e. as a text node not within an element tag),\n      // we need to wrap it in an element to be able to target and hide it with css:\n      this.wrapTextNode(this.iconElementRef?.nativeElement);\n    }\n    this._showIconOnly = value;\n  }\n\n  @ContentChild(IconComponent, { read: ElementRef })\n  iconElementRef?: ElementRef<HTMLElement>;\n\n  private disposeEventListeners: EventListenerDisposeFn[] = [];\n\n  constructor(\n    private elementRef: ElementRef<HTMLElement>,\n    private renderer: Renderer2\n  ) {}\n\n  ngOnInit(): void {\n    this.setupEventListenerForAriaDisabledHandling();\n  }\n\n  setupEventListenerForAriaDisabledHandling() {\n    // Prevent event bubbling for aria-disabled buttons using a native event listener.\n    // HostListener cannot block event bubbling, see: https://github.com/angular/angular/issues/9587\n    ['click', 'keydown.enter', 'keydown.space'].forEach((evt) => {\n      const disposeEventListener = this.renderer.listen(\n        this.elementRef.nativeElement,\n        evt,\n        this.blockEventIfAriaDisabled.bind(this),\n        { capture: true }\n      );\n      this.disposeEventListeners.push(disposeEventListener);\n    });\n  }\n\n  private wrapTextNode(iconElement?: HTMLElement) {\n    if (!iconElement) {\n      return;\n    }\n\n    const ifTextNode = (node?: ChildNode): ChildNode | undefined => {\n      return node?.nodeType === Node.TEXT_NODE ? node : undefined;\n    };\n\n    const textNode = ifTextNode(iconElement.previousSibling) || ifTextNode(iconElement.nextSibling);\n    if (textNode) {\n      const placement = textNode === iconElement.previousSibling ? 'before' : 'after';\n      const textWrapper = this.renderer.createElement('span');\n      const parent = textNode.parentNode;\n      this.renderer.removeChild(textNode.parentNode, textNode);\n      this.renderer.appendChild(textWrapper, textNode);\n      if (placement === 'before') {\n        this.renderer.insertBefore(parent, textWrapper, iconElement);\n      } else if (placement === 'after') {\n        this.renderer.appendChild(parent, textWrapper);\n      }\n    }\n  }\n\n  ngAfterContentInit(): void {\n    const iconElement = this.iconElementRef?.nativeElement;\n\n    if (iconElement === undefined) {\n      // Nothing to do here when there's no icon:\n      return;\n    }\n\n    // Ensure buttons with icon is always shown as icon only inside the toolbar:\n    if (this.elementRef.nativeElement.closest('ion-toolbar')) {\n      this._showIconOnly = true;\n    }\n\n    if (this.showIconOnly) {\n      // If the button text is supplied as plain text (i.e. as a text node not within an element tag),\n      // we need to wrap it in an element to be able to target and hide it with css:\n      this.wrapTextNode(iconElement);\n    }\n\n    const hasText = !!this.elementRef.nativeElement.textContent;\n    if (!hasText) {\n      // Button doesn't contain any text, make it round:\n      this._showIconOnly = true;\n    }\n\n    if (hasText && !this.showIconOnly) {\n      this._isIconLeft =\n        this.elementRef.nativeElement.querySelector('.content-layer').firstChild === iconElement;\n      this._isIconRight = !this._isIconLeft;\n    }\n  }\n\n  private blockEventIfAriaDisabled(event: Event) {\n    if (this.elementRef.nativeElement.ariaDisabled === 'true') {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n    }\n  }\n\n  ngOnDestroy() {\n    this.disposeEventListeners.forEach((unlistenEvent) => unlistenEvent());\n  }\n}\n","<ng-container>\n  <span class=\"state-layer\" aria-hidden=\"true\"></span>\n  <span class=\"content-layer\"><ng-content></ng-content></span>\n</ng-container>\n<!--\n  TODO: Fix globally exposed .state-layer and .content-layer\n  \n  See: https://github.com/kirbydesign/designsystem/issues/2101\n-->\n"],"mappings":"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"}