@kirbydesign/designsystem 8.1.0 → 8.1.1

package/fesm2015/kirbydesign-designsystem-popover.mjs

@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { EventEmitter, ElementRef, Component, ViewChild, Input, Output, HostListener } from '@angular/core';
 import { DesignTokenHelper } from '@kirbydesign/designsystem/helpers';
@@ -137,10 +138,10 @@ class PopoverComponent {
 /** @nocollapse */ PopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PopoverComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
 /** @nocollapse */ PopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: PopoverComponent, isStandalone: true, selector: "kirby-popover", inputs: { popout: "popout", target: "target" }, outputs: { willHide: "willHide" }, host: { listeners: { "window:resize": "_onWindowResize()" } }, viewQueries: [{ propertyName: "wrapperElement", first: true, predicate: ["wrapper"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: `
     <div #wrapper class="wrapper"><ng-content></ng-content></div>
-  `, isInline: true, styles: [":host{display:none;position:fixed;inset:0;z-index:850}:host(.is-opening){display:block;visibility:hidden}:host(.is-open){display:block}.wrapper{position:fixed;margin-top:4px;margin-bottom:4px}\n"] });
+  `, isInline: true, styles: [":host{display:none;position:fixed;inset:0;z-index:850}:host(.is-opening){display:block;visibility:hidden}:host(.is-open){display:block}.wrapper{position:fixed;margin-top:4px;margin-bottom:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PopoverComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'kirby-popover', template: `
+            args: [{ standalone: true, imports: [CommonModule], selector: 'kirby-popover', template: `
     <div #wrapper class="wrapper"><ng-content></ng-content></div>
   `, styles: [":host{display:none;position:fixed;inset:0;z-index:850}:host(.is-opening){display:block;visibility:hidden}:host(.is-open){display:block}.wrapper{position:fixed;margin-top:4px;margin-bottom:4px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { wrapperElement: [{

package/fesm2015/kirbydesign-designsystem-popover.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"kirbydesign-designsystem-popover.mjs","sources":["../../../../libs/designsystem/popover/src/popover.component.ts","../../../../libs/designsystem/popover/src/kirbydesign-designsystem-popover.ts"],"sourcesContent":["import {\n  AfterViewInit,\n  Component,\n  ElementRef,\n  EventEmitter,\n  HostListener,\n  Input,\n  OnDestroy,\n  Output,\n  Renderer2,\n  ViewChild,\n} from '@angular/core';\nimport { DesignTokenHelper } from '@kirbydesign/designsystem/helpers';\n\nexport enum HorizontalDirection {\n  right = 'right',\n  left = 'left',\n}\n\n@Component({\n  standalone: true,\n  selector: 'kirby-popover',\n  template: `\n    <div #wrapper class=\"wrapper\"><ng-content></ng-content></div>\n  `,\n  styleUrls: ['./popover.component.scss'],\n})\nexport class PopoverComponent implements AfterViewInit, OnDestroy {\n  // removeEventListener same instance of event handler & options\n  private readonly preventScrollEventListenerOptions = {\n    passive: false,\n  } as EventListenerOptions;\n\n  private readonly POPOVER_BODY_PADDING = 12;\n\n  private isShowing: boolean = false;\n  private isFirstToLockScroll: boolean;\n  private zIndex: number;\n  private document: Document;\n\n  @ViewChild('wrapper', { static: true, read: ElementRef })\n  wrapperElement: ElementRef<HTMLDivElement>;\n\n  @Input()\n  popout: HorizontalDirection | `${HorizontalDirection}` = HorizontalDirection.right;\n\n  @Input()\n  target: HTMLElement | ElementRef<HTMLElement>;\n\n  @Output()\n  willHide = new EventEmitter<void>();\n\n  private get targetElement(): HTMLElement {\n    if (this.target instanceof ElementRef) {\n      return this.target.nativeElement;\n    } else {\n      return this.target;\n    }\n  }\n\n  @HostListener('window:resize')\n  _onWindowResize() {\n    this.hide();\n  }\n\n  constructor(private elementRef: ElementRef<HTMLElement>, private renderer: Renderer2) {\n    this.document = elementRef.nativeElement.ownerDocument;\n  }\n\n  ngAfterViewInit(): void {\n    this.placePopoverAboveClosestModal();\n    this.renderer.removeChild(\n      this.elementRef.nativeElement.parentElement,\n      this.elementRef.nativeElement\n    );\n  }\n\n  ngOnDestroy(): void {\n    this.hide();\n  }\n\n  private placePopoverAboveClosestModal() {\n    const closestIonModal = this.elementRef.nativeElement.closest('ion-modal');\n    if (closestIonModal) {\n      this.zIndex = parseInt((closestIonModal as HTMLElement).style.zIndex) + 1;\n      this.elementRef.nativeElement.style.zIndex = `${this.zIndex}`;\n    } else {\n      this.zIndex = parseInt(DesignTokenHelper.zLayer('popover'));\n    }\n  }\n\n  // document.removeEventListener needs the exact same event handler & options reference:\n  private static preventEventOutsidePopover(event: TouchEvent) {\n    if (event.target instanceof HTMLElement) {\n      const targetIsInPopover = !!event.target.closest('kirby-popover');\n      if (!targetIsInPopover) {\n        event.preventDefault();\n      }\n    }\n  }\n\n  private preventScroll() {\n    this.isFirstToLockScroll = !this.document.body.classList.contains('backdrop-no-scroll');\n    if (this.isFirstToLockScroll) {\n      this.renderer.addClass(this.document.body, 'backdrop-no-scroll');\n    }\n\n    // preventDefault does not work with Renderer2.listen method; add event listener directly to document instead\n    this.document.addEventListener(\n      'touchmove',\n      PopoverComponent.preventEventOutsidePopover,\n      this.preventScrollEventListenerOptions\n    );\n  }\n\n  private releaseScroll() {\n    if (this.isFirstToLockScroll) {\n      this.renderer.removeClass(this.document.body, 'backdrop-no-scroll');\n    }\n\n    this.document.removeEventListener(\n      'touchmove',\n      PopoverComponent.preventEventOutsidePopover,\n      this.preventScrollEventListenerOptions\n    );\n  }\n\n  show() {\n    this.renderer.addClass(this.elementRef.nativeElement, 'is-opening');\n    this.renderer.appendChild(this.document.body, this.elementRef.nativeElement);\n\n    this.preventScroll();\n    this.positionWrapper();\n\n    this.renderer.addClass(this.elementRef.nativeElement, 'is-open');\n    this.renderer.removeClass(this.elementRef.nativeElement, 'is-opening');\n\n    this.isShowing = true;\n  }\n\n  hide() {\n    if (!this.isShowing) return;\n\n    this.willHide.emit();\n    this.renderer.removeChild(\n      this.elementRef.nativeElement.parentElement,\n      this.elementRef.nativeElement\n    );\n    this.releaseScroll();\n\n    this.renderer.removeStyle(this.targetElement, 'z-index');\n    this.renderer.removeStyle(this.targetElement, 'pointer-events');\n    this.isShowing = false;\n  }\n\n  private positionWrapper() {\n    const targetDimensions = this.targetElement.getBoundingClientRect();\n\n    this.renderer.appendChild(this.document.body, this.elementRef.nativeElement);\n\n    const wrapperElement = this.wrapperElement.nativeElement;\n    const wrapperDimensions = wrapperElement.getBoundingClientRect();\n    const viewport = wrapperElement.ownerDocument.defaultView;\n    this.positionHorizontally(viewport, wrapperElement, targetDimensions, wrapperDimensions);\n    this.positionVertically(viewport, wrapperElement, targetDimensions, wrapperDimensions);\n  }\n\n  private positionHorizontally(\n    viewPort: Window,\n    wrapperElement: HTMLDivElement,\n    targetDimensions: DOMRect,\n    wrapperDimensions: DOMRect\n  ) {\n    const viewPortWidth = viewPort.innerWidth;\n    const contentWidth = wrapperDimensions.width;\n    const availableSpaceRight = viewPortWidth - targetDimensions.left;\n    const availableSpaceLeft = targetDimensions.right;\n    const contentCanFitRightOfTarget =\n      availableSpaceRight >= contentWidth + this.POPOVER_BODY_PADDING;\n    const openRight = contentCanFitRightOfTarget || availableSpaceRight >= availableSpaceLeft;\n\n    const [direction, oppositeDirection] =\n      this.popout === HorizontalDirection.left || !openRight\n        ? ['left', 'right']\n        : ['right', 'left'];\n\n    const pxValue =\n      direction === 'left' ? viewPortWidth - targetDimensions.right : targetDimensions.left;\n\n    this.renderer.removeStyle(wrapperElement, direction);\n    this.renderer.setStyle(wrapperElement, oppositeDirection, `${pxValue}px`);\n  }\n\n  private positionVertically(\n    viewPort: Window,\n    wrapperElement: HTMLDivElement,\n    targetDimensions: DOMRect,\n    wrapperDimensions: DOMRect\n  ) {\n    const viewPortHeight = viewPort.innerHeight;\n    const contentHeight = wrapperDimensions.height;\n    const availableSpaceDown = viewPortHeight - targetDimensions.bottom;\n    const availableSpaceUp = targetDimensions.top;\n    const contentCanFitBelowTarget =\n      availableSpaceDown >= contentHeight + this.POPOVER_BODY_PADDING;\n\n    const isAvailableSpaceBelow =\n      contentCanFitBelowTarget || availableSpaceDown >= availableSpaceUp;\n    const [direction, oppositeDirection] = isAvailableSpaceBelow\n      ? ['bottom', 'top']\n      : ['top', 'bottom'];\n\n    const pxValue =\n      direction === 'bottom' ? targetDimensions.bottom : viewPortHeight - targetDimensions.top;\n\n    this.renderer.removeStyle(wrapperElement, direction);\n    this.renderer.setStyle(wrapperElement, oppositeDirection, `${pxValue}px`);\n\n    if (direction === 'top') {\n      // Ensure target is elevated above shadows in popover, i.e. content wrapped in Card:\n      this.renderer.setStyle(this.targetElement, 'z-index', `${this.zIndex + 1}`);\n      this.renderer.setStyle(this.targetElement, 'pointer-events', 'none');\n    }\n  }\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-popover.mjs","sources":["../../../../libs/designsystem/popover/src/popover.component.ts","../../../../libs/designsystem/popover/src/kirbydesign-designsystem-popover.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n  AfterViewInit,\n  Component,\n  ElementRef,\n  EventEmitter,\n  HostListener,\n  Input,\n  OnDestroy,\n  Output,\n  Renderer2,\n  ViewChild,\n} from '@angular/core';\nimport { DesignTokenHelper } from '@kirbydesign/designsystem/helpers';\n\nexport enum HorizontalDirection {\n  right = 'right',\n  left = 'left',\n}\n\n@Component({\n  standalone: true,\n  imports: [CommonModule],\n  selector: 'kirby-popover',\n  template: `\n    <div #wrapper class=\"wrapper\"><ng-content></ng-content></div>\n  `,\n  styleUrls: ['./popover.component.scss'],\n})\nexport class PopoverComponent implements AfterViewInit, OnDestroy {\n  // removeEventListener same instance of event handler & options\n  private readonly preventScrollEventListenerOptions = {\n    passive: false,\n  } as EventListenerOptions;\n\n  private readonly POPOVER_BODY_PADDING = 12;\n\n  private isShowing: boolean = false;\n  private isFirstToLockScroll: boolean;\n  private zIndex: number;\n  private document: Document;\n\n  @ViewChild('wrapper', { static: true, read: ElementRef })\n  wrapperElement: ElementRef<HTMLDivElement>;\n\n  @Input()\n  popout: HorizontalDirection | `${HorizontalDirection}` = HorizontalDirection.right;\n\n  @Input()\n  target: HTMLElement | ElementRef<HTMLElement>;\n\n  @Output()\n  willHide = new EventEmitter<void>();\n\n  private get targetElement(): HTMLElement {\n    if (this.target instanceof ElementRef) {\n      return this.target.nativeElement;\n    } else {\n      return this.target;\n    }\n  }\n\n  @HostListener('window:resize')\n  _onWindowResize() {\n    this.hide();\n  }\n\n  constructor(private elementRef: ElementRef<HTMLElement>, private renderer: Renderer2) {\n    this.document = elementRef.nativeElement.ownerDocument;\n  }\n\n  ngAfterViewInit(): void {\n    this.placePopoverAboveClosestModal();\n    this.renderer.removeChild(\n      this.elementRef.nativeElement.parentElement,\n      this.elementRef.nativeElement\n    );\n  }\n\n  ngOnDestroy(): void {\n    this.hide();\n  }\n\n  private placePopoverAboveClosestModal() {\n    const closestIonModal = this.elementRef.nativeElement.closest('ion-modal');\n    if (closestIonModal) {\n      this.zIndex = parseInt((closestIonModal as HTMLElement).style.zIndex) + 1;\n      this.elementRef.nativeElement.style.zIndex = `${this.zIndex}`;\n    } else {\n      this.zIndex = parseInt(DesignTokenHelper.zLayer('popover'));\n    }\n  }\n\n  // document.removeEventListener needs the exact same event handler & options reference:\n  private static preventEventOutsidePopover(event: TouchEvent) {\n    if (event.target instanceof HTMLElement) {\n      const targetIsInPopover = !!event.target.closest('kirby-popover');\n      if (!targetIsInPopover) {\n        event.preventDefault();\n      }\n    }\n  }\n\n  private preventScroll() {\n    this.isFirstToLockScroll = !this.document.body.classList.contains('backdrop-no-scroll');\n    if (this.isFirstToLockScroll) {\n      this.renderer.addClass(this.document.body, 'backdrop-no-scroll');\n    }\n\n    // preventDefault does not work with Renderer2.listen method; add event listener directly to document instead\n    this.document.addEventListener(\n      'touchmove',\n      PopoverComponent.preventEventOutsidePopover,\n      this.preventScrollEventListenerOptions\n    );\n  }\n\n  private releaseScroll() {\n    if (this.isFirstToLockScroll) {\n      this.renderer.removeClass(this.document.body, 'backdrop-no-scroll');\n    }\n\n    this.document.removeEventListener(\n      'touchmove',\n      PopoverComponent.preventEventOutsidePopover,\n      this.preventScrollEventListenerOptions\n    );\n  }\n\n  show() {\n    this.renderer.addClass(this.elementRef.nativeElement, 'is-opening');\n    this.renderer.appendChild(this.document.body, this.elementRef.nativeElement);\n\n    this.preventScroll();\n    this.positionWrapper();\n\n    this.renderer.addClass(this.elementRef.nativeElement, 'is-open');\n    this.renderer.removeClass(this.elementRef.nativeElement, 'is-opening');\n\n    this.isShowing = true;\n  }\n\n  hide() {\n    if (!this.isShowing) return;\n\n    this.willHide.emit();\n    this.renderer.removeChild(\n      this.elementRef.nativeElement.parentElement,\n      this.elementRef.nativeElement\n    );\n    this.releaseScroll();\n\n    this.renderer.removeStyle(this.targetElement, 'z-index');\n    this.renderer.removeStyle(this.targetElement, 'pointer-events');\n    this.isShowing = false;\n  }\n\n  private positionWrapper() {\n    const targetDimensions = this.targetElement.getBoundingClientRect();\n\n    this.renderer.appendChild(this.document.body, this.elementRef.nativeElement);\n\n    const wrapperElement = this.wrapperElement.nativeElement;\n    const wrapperDimensions = wrapperElement.getBoundingClientRect();\n    const viewport = wrapperElement.ownerDocument.defaultView;\n    this.positionHorizontally(viewport, wrapperElement, targetDimensions, wrapperDimensions);\n    this.positionVertically(viewport, wrapperElement, targetDimensions, wrapperDimensions);\n  }\n\n  private positionHorizontally(\n    viewPort: Window,\n    wrapperElement: HTMLDivElement,\n    targetDimensions: DOMRect,\n    wrapperDimensions: DOMRect\n  ) {\n    const viewPortWidth = viewPort.innerWidth;\n    const contentWidth = wrapperDimensions.width;\n    const availableSpaceRight = viewPortWidth - targetDimensions.left;\n    const availableSpaceLeft = targetDimensions.right;\n    const contentCanFitRightOfTarget =\n      availableSpaceRight >= contentWidth + this.POPOVER_BODY_PADDING;\n    const openRight = contentCanFitRightOfTarget || availableSpaceRight >= availableSpaceLeft;\n\n    const [direction, oppositeDirection] =\n      this.popout === HorizontalDirection.left || !openRight\n        ? ['left', 'right']\n        : ['right', 'left'];\n\n    const pxValue =\n      direction === 'left' ? viewPortWidth - targetDimensions.right : targetDimensions.left;\n\n    this.renderer.removeStyle(wrapperElement, direction);\n    this.renderer.setStyle(wrapperElement, oppositeDirection, `${pxValue}px`);\n  }\n\n  private positionVertically(\n    viewPort: Window,\n    wrapperElement: HTMLDivElement,\n    targetDimensions: DOMRect,\n    wrapperDimensions: DOMRect\n  ) {\n    const viewPortHeight = viewPort.innerHeight;\n    const contentHeight = wrapperDimensions.height;\n    const availableSpaceDown = viewPortHeight - targetDimensions.bottom;\n    const availableSpaceUp = targetDimensions.top;\n    const contentCanFitBelowTarget =\n      availableSpaceDown >= contentHeight + this.POPOVER_BODY_PADDING;\n\n    const isAvailableSpaceBelow =\n      contentCanFitBelowTarget || availableSpaceDown >= availableSpaceUp;\n    const [direction, oppositeDirection] = isAvailableSpaceBelow\n      ? ['bottom', 'top']\n      : ['top', 'bottom'];\n\n    const pxValue =\n      direction === 'bottom' ? targetDimensions.bottom : viewPortHeight - targetDimensions.top;\n\n    this.renderer.removeStyle(wrapperElement, direction);\n    this.renderer.setStyle(wrapperElement, oppositeDirection, `${pxValue}px`);\n\n    if (direction === 'top') {\n      // Ensure target is elevated above shadows in popover, i.e. content wrapped in Card:\n      this.renderer.setStyle(this.targetElement, 'z-index', `${this.zIndex + 1}`);\n      this.renderer.setStyle(this.targetElement, 'pointer-events', 'none');\n    }\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2015/kirbydesign-designsystem-progress-circle.mjs

@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { Component, ChangeDetectionStrategy, Input, HostBinding } from '@angular/core';
 import { ThemeColorDirective } from '@kirbydesign/designsystem/shared';
@@ -30,10 +31,10 @@ class ProgressCircleRingComponent {
     }
 }
 /** @nocollapse */ ProgressCircleRingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ProgressCircleRingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ ProgressCircleRingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ProgressCircleRingComponent, isStandalone: true, selector: "kirby-progress-circle-ring", inputs: { radius: "radius", value: "value", themeColor: "themeColor", strokeWidth: "strokeWidth", upperBound: "upperBound" }, host: { properties: { "style.width.px": "this._diameter", "style.height.px": "this._diameter" } }, ngImport: i0, template: "<svg [attr.width]=\"_diameter\" [attr.height]=\"_diameter\">\n  <circle\n    shape-rendering=\"geometricPrecision\"\n    class=\"circle\"\n    fill=\"transparent\"\n    [attr.stroke-width]=\"strokeWidth\"\n    [attr.r]=\"_centerRadius\"\n    [attr.cx]=\"radius\"\n    [attr.cy]=\"radius\"\n  />\n  <circle\n    shape-rendering=\"geometricPrecision\"\n    class=\"progress\"\n    fill=\"transparent\"\n    stroke-linecap=\"round\"\n    [attr.stroke-width]=\"strokeWidth\"\n    [attr.r]=\"_centerRadius\"\n    [attr.cx]=\"radius\"\n    [attr.cy]=\"radius\"\n    [attr.stroke-dashoffset]=\"_offset\"\n    [attr.stroke-dasharray]=\"_centerCircumference\"\n  />\n</svg>", styles: [".circle{stroke:var(--kirby-semi-light)}.progress{transition-property:stroke-dashoffset,stroke;transition-duration:1s;transition-timing-function:ease;transform:rotate(-90deg);transform-origin:50% 50%;stroke:var(--kirby-progress-circle-stroke-color, var(--kirby-success))}:host.success{--kirby-progress-circle-stroke-color: #2cf287}:host.warning{--kirby-progress-circle-stroke-color: #ffca3a}:host.danger{--kirby-progress-circle-stroke-color: #ff595e}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+/** @nocollapse */ ProgressCircleRingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ProgressCircleRingComponent, isStandalone: true, selector: "kirby-progress-circle-ring", inputs: { radius: "radius", value: "value", themeColor: "themeColor", strokeWidth: "strokeWidth", upperBound: "upperBound" }, host: { properties: { "style.width.px": "this._diameter", "style.height.px": "this._diameter" } }, ngImport: i0, template: "<svg [attr.width]=\"_diameter\" [attr.height]=\"_diameter\">\n  <circle\n    shape-rendering=\"geometricPrecision\"\n    class=\"circle\"\n    fill=\"transparent\"\n    [attr.stroke-width]=\"strokeWidth\"\n    [attr.r]=\"_centerRadius\"\n    [attr.cx]=\"radius\"\n    [attr.cy]=\"radius\"\n  />\n  <circle\n    shape-rendering=\"geometricPrecision\"\n    class=\"progress\"\n    fill=\"transparent\"\n    stroke-linecap=\"round\"\n    [attr.stroke-width]=\"strokeWidth\"\n    [attr.r]=\"_centerRadius\"\n    [attr.cx]=\"radius\"\n    [attr.cy]=\"radius\"\n    [attr.stroke-dashoffset]=\"_offset\"\n    [attr.stroke-dasharray]=\"_centerCircumference\"\n  />\n</svg>", styles: [".circle{stroke:var(--kirby-semi-light)}.progress{transition-property:stroke-dashoffset,stroke;transition-duration:1s;transition-timing-function:ease;transform:rotate(-90deg);transform-origin:50% 50%;stroke:var(--kirby-progress-circle-stroke-color, var(--kirby-success))}:host.success{--kirby-progress-circle-stroke-color: #2cf287}:host.warning{--kirby-progress-circle-stroke-color: #ffca3a}:host.danger{--kirby-progress-circle-stroke-color: #ff595e}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ProgressCircleRingComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [ThemeColorDirective], selector: 'kirby-progress-circle-ring', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg [attr.width]=\"_diameter\" [attr.height]=\"_diameter\">\n  <circle\n    shape-rendering=\"geometricPrecision\"\n    class=\"circle\"\n    fill=\"transparent\"\n    [attr.stroke-width]=\"strokeWidth\"\n    [attr.r]=\"_centerRadius\"\n    [attr.cx]=\"radius\"\n    [attr.cy]=\"radius\"\n  />\n  <circle\n    shape-rendering=\"geometricPrecision\"\n    class=\"progress\"\n    fill=\"transparent\"\n    stroke-linecap=\"round\"\n    [attr.stroke-width]=\"strokeWidth\"\n    [attr.r]=\"_centerRadius\"\n    [attr.cx]=\"radius\"\n    [attr.cy]=\"radius\"\n    [attr.stroke-dashoffset]=\"_offset\"\n    [attr.stroke-dasharray]=\"_centerCircumference\"\n  />\n</svg>", styles: [".circle{stroke:var(--kirby-semi-light)}.progress{transition-property:stroke-dashoffset,stroke;transition-duration:1s;transition-timing-function:ease;transform:rotate(-90deg);transform-origin:50% 50%;stroke:var(--kirby-progress-circle-stroke-color, var(--kirby-success))}:host.success{--kirby-progress-circle-stroke-color: #2cf287}:host.warning{--kirby-progress-circle-stroke-color: #ffca3a}:host.danger{--kirby-progress-circle-stroke-color: #ff595e}\n"] }]
+            args: [{ standalone: true, imports: [ThemeColorDirective, CommonModule], selector: 'kirby-progress-circle-ring', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg [attr.width]=\"_diameter\" [attr.height]=\"_diameter\">\n  <circle\n    shape-rendering=\"geometricPrecision\"\n    class=\"circle\"\n    fill=\"transparent\"\n    [attr.stroke-width]=\"strokeWidth\"\n    [attr.r]=\"_centerRadius\"\n    [attr.cx]=\"radius\"\n    [attr.cy]=\"radius\"\n  />\n  <circle\n    shape-rendering=\"geometricPrecision\"\n    class=\"progress\"\n    fill=\"transparent\"\n    stroke-linecap=\"round\"\n    [attr.stroke-width]=\"strokeWidth\"\n    [attr.r]=\"_centerRadius\"\n    [attr.cx]=\"radius\"\n    [attr.cy]=\"radius\"\n    [attr.stroke-dashoffset]=\"_offset\"\n    [attr.stroke-dasharray]=\"_centerCircumference\"\n  />\n</svg>", styles: [".circle{stroke:var(--kirby-semi-light)}.progress{transition-property:stroke-dashoffset,stroke;transition-duration:1s;transition-timing-function:ease;transform:rotate(-90deg);transform-origin:50% 50%;stroke:var(--kirby-progress-circle-stroke-color, var(--kirby-success))}:host.success{--kirby-progress-circle-stroke-color: #2cf287}:host.warning{--kirby-progress-circle-stroke-color: #ffca3a}:host.danger{--kirby-progress-circle-stroke-color: #ff595e}\n"] }]
         }], propDecorators: { radius: [{
                 type: Input
             }], value: [{
@@ -114,10 +115,10 @@ class ProgressCircleComponent {
     }
 }
 /** @nocollapse */ ProgressCircleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ProgressCircleComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ ProgressCircleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ProgressCircleComponent, isStandalone: true, selector: "kirby-progress-circle", inputs: { value: "value", size: "size", themeColor: "themeColor" }, host: { properties: { "class": "this._cssSize", "style.width.px": "this._diameter", "style.height.px": "this._diameter" } }, ngImport: i0, template: "<div class=\"transcluded-content\">\n  <ng-content></ng-content>\n</div>\n<kirby-progress-circle-ring\n  [themeColor]=\"themeColor\"\n  [value]=\"_shownValue\"\n  [radius]=\"_radius\"\n  [strokeWidth]=\"_strokeWidth\"\n  [upperBound]=\"_upperBound\"\n></kirby-progress-circle-ring>\n", styles: [":host{display:inline-block;position:relative}.transcluded-content,kirby-progress-circle-ring{position:absolute;top:0;left:0}kirby-progress-circle-ring{z-index:2}.transcluded-content{width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:1;border-radius:50%;overflow:hidden}\n"], dependencies: [{ kind: "component", type: ProgressCircleRingComponent, selector: "kirby-progress-circle-ring", inputs: ["radius", "value", "themeColor", "strokeWidth", "upperBound"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+/** @nocollapse */ ProgressCircleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ProgressCircleComponent, isStandalone: true, selector: "kirby-progress-circle", inputs: { value: "value", size: "size", themeColor: "themeColor" }, host: { properties: { "class": "this._cssSize", "style.width.px": "this._diameter", "style.height.px": "this._diameter" } }, ngImport: i0, template: "<div class=\"transcluded-content\">\n  <ng-content></ng-content>\n</div>\n<kirby-progress-circle-ring\n  [themeColor]=\"themeColor\"\n  [value]=\"_shownValue\"\n  [radius]=\"_radius\"\n  [strokeWidth]=\"_strokeWidth\"\n  [upperBound]=\"_upperBound\"\n></kirby-progress-circle-ring>\n", styles: [":host{display:inline-block;position:relative}.transcluded-content,kirby-progress-circle-ring{position:absolute;top:0;left:0}kirby-progress-circle-ring{z-index:2}.transcluded-content{width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:1;border-radius:50%;overflow:hidden}\n"], dependencies: [{ kind: "component", type: ProgressCircleRingComponent, selector: "kirby-progress-circle-ring", inputs: ["radius", "value", "themeColor", "strokeWidth", "upperBound"] }, { kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ProgressCircleComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [ProgressCircleRingComponent], selector: 'kirby-progress-circle', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"transcluded-content\">\n  <ng-content></ng-content>\n</div>\n<kirby-progress-circle-ring\n  [themeColor]=\"themeColor\"\n  [value]=\"_shownValue\"\n  [radius]=\"_radius\"\n  [strokeWidth]=\"_strokeWidth\"\n  [upperBound]=\"_upperBound\"\n></kirby-progress-circle-ring>\n", styles: [":host{display:inline-block;position:relative}.transcluded-content,kirby-progress-circle-ring{position:absolute;top:0;left:0}kirby-progress-circle-ring{z-index:2}.transcluded-content{width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:1;border-radius:50%;overflow:hidden}\n"] }]
+            args: [{ standalone: true, imports: [ProgressCircleRingComponent, CommonModule], selector: 'kirby-progress-circle', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"transcluded-content\">\n  <ng-content></ng-content>\n</div>\n<kirby-progress-circle-ring\n  [themeColor]=\"themeColor\"\n  [value]=\"_shownValue\"\n  [radius]=\"_radius\"\n  [strokeWidth]=\"_strokeWidth\"\n  [upperBound]=\"_upperBound\"\n></kirby-progress-circle-ring>\n", styles: [":host{display:inline-block;position:relative}.transcluded-content,kirby-progress-circle-ring{position:absolute;top:0;left:0}kirby-progress-circle-ring{z-index:2}.transcluded-content{width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:1;border-radius:50%;overflow:hidden}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { value: [{
                 type: Input
             }], size: [{

package/fesm2015/kirbydesign-designsystem-progress-circle.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"kirbydesign-designsystem-progress-circle.mjs","sources":["../../../../libs/designsystem/progress-circle/src/progress-circle-ring.component.ts","../../../../libs/designsystem/progress-circle/src/progress-circle-ring.component.svg","../../../../libs/designsystem/progress-circle/src/progress-circle.component.ts","../../../../libs/designsystem/progress-circle/src/progress-circle.component.html","../../../../libs/designsystem/progress-circle/src/kirbydesign-designsystem-progress-circle.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';\nimport { ThemeColorDirective } from '@kirbydesign/designsystem/shared';\n\n@Component({\n  standalone: true,\n  imports: [ThemeColorDirective],\n  selector: 'kirby-progress-circle-ring',\n  templateUrl: './progress-circle-ring.component.svg',\n  styleUrls: ['./progress-circle-ring.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ProgressCircleRingComponent {\n  @Input() radius: number; // The desired outer radius of the SVG circle\n  @Input() value: number = 0;\n  @Input() themeColor: 'success' | 'warning' | 'danger' = 'success';\n  @Input() strokeWidth: number;\n  @Input() upperBound: number;\n\n  get _offset(): number {\n    const valueWithinBounds = this.value < this.upperBound || this.value > 99;\n    if (valueWithinBounds) {\n      return this.calculateOffset(this.value);\n    } else {\n      return this.calculateOffset(this.upperBound);\n    }\n  }\n\n  @HostBinding('style.width.px')\n  @HostBinding('style.height.px')\n  get _diameter(): number {\n    return this.radius * 2;\n  }\n\n  get _centerRadius(): number {\n    return this.radius - this.strokeWidth / 2;\n  }\n\n  get _centerCircumference(): number {\n    return this._centerRadius * 2 * Math.PI;\n  }\n\n  private calculateOffset(value: number): number {\n    return this._centerCircumference - this._centerCircumference * (value / 100);\n  }\n}\n","<svg [attr.width]=\"_diameter\" [attr.height]=\"_diameter\">\n  <circle\n    shape-rendering=\"geometricPrecision\"\n    class=\"circle\"\n    fill=\"transparent\"\n    [attr.stroke-width]=\"strokeWidth\"\n    [attr.r]=\"_centerRadius\"\n    [attr.cx]=\"radius\"\n    [attr.cy]=\"radius\"\n  />\n  <circle\n    shape-rendering=\"geometricPrecision\"\n    class=\"progress\"\n    fill=\"transparent\"\n    stroke-linecap=\"round\"\n    [attr.stroke-width]=\"strokeWidth\"\n    [attr.r]=\"_centerRadius\"\n    [attr.cx]=\"radius\"\n    [attr.cy]=\"radius\"\n    [attr.stroke-dashoffset]=\"_offset\"\n    [attr.stroke-dasharray]=\"_centerCircumference\"\n  />\n</svg>","import {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ElementRef,\n  HostBinding,\n  Input,\n  OnDestroy,\n} from '@angular/core';\nimport { ProgressCircleRingComponent } from './progress-circle-ring.component';\n\n@Component({\n  standalone: true,\n  imports: [ProgressCircleRingComponent],\n  selector: 'kirby-progress-circle',\n  templateUrl: './progress-circle.component.html',\n  styleUrls: ['./progress-circle.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ProgressCircleComponent implements AfterViewInit, OnDestroy {\n  readonly SIZE_CONFIG = {\n    sm: { diameter: 40, strokeWidth: 3, upperBound: 95 },\n    md: { diameter: 56, strokeWidth: 4, upperBound: 96 },\n    lg: { diameter: 96, strokeWidth: 6, upperBound: 97 },\n  };\n\n  @Input() value: number = 0;\n  @Input() size: 'sm' | 'md' | 'lg' = 'md';\n  @Input() themeColor: 'success' | 'warning' | 'danger' = 'success';\n\n  @HostBinding('class')\n  get _cssSize() {\n    return this.size;\n  }\n\n  private hasElementBeenVisible?: boolean;\n  private observer: IntersectionObserver;\n\n  constructor(\n    private elementRef: ElementRef<HTMLElement>,\n    private changeDetectorRef: ChangeDetectorRef\n  ) {}\n\n  ngAfterViewInit(): void {\n    if (!this.observer) {\n      this.observer = new IntersectionObserver(this.onIntersectionChange, {\n        threshold: 0.5,\n      });\n      this.observer.observe(this.elementRef.nativeElement);\n    }\n  }\n\n  ngOnDestroy(): void {\n    this.unobserve();\n  }\n\n  private onIntersectionChange = (entries: IntersectionObserverEntry[]) => {\n    this.hasElementBeenVisible = entries && entries.some((entry) => entry.isIntersecting);\n    if (this.hasElementBeenVisible) {\n      this.unobserve();\n      this.changeDetectorRef.markForCheck();\n    }\n  };\n\n  private unobserve() {\n    if (this.observer) {\n      this.observer.unobserve(this.elementRef.nativeElement);\n      // Safari does not support \"disconnect\", see: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Browser_compatibility\n      if (typeof this.observer.disconnect === 'function') {\n        this.observer.disconnect();\n      }\n    }\n  }\n\n  @HostBinding('style.width.px')\n  @HostBinding('style.height.px')\n  get _diameter(): number {\n    return this.SIZE_CONFIG[this.size].diameter;\n  }\n\n  get _shownValue() {\n    // This is needed to make an animation [0 -> value] when element is shown to the user\n    return this.hasElementBeenVisible ? this.value : 0;\n  }\n\n  get _radius() {\n    return this._diameter / 2;\n  }\n\n  get _strokeWidth() {\n    return this.SIZE_CONFIG[this.size].strokeWidth;\n  }\n\n  get _upperBound() {\n    // This is needed to make sure that an input value close to 100 is not shown as 100\n    return this.SIZE_CONFIG[this.size].upperBound;\n  }\n}\n","<div class=\"transcluded-content\">\n  <ng-content></ng-content>\n</div>\n<kirby-progress-circle-ring\n  [themeColor]=\"themeColor\"\n  [value]=\"_shownValue\"\n  [radius]=\"_radius\"\n  [strokeWidth]=\"_strokeWidth\"\n  [upperBound]=\"_upperBound\"\n></kirby-progress-circle-ring>\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-progress-circle.mjs","sources":["../../../../libs/designsystem/progress-circle/src/progress-circle-ring.component.ts","../../../../libs/designsystem/progress-circle/src/progress-circle-ring.component.svg","../../../../libs/designsystem/progress-circle/src/progress-circle.component.ts","../../../../libs/designsystem/progress-circle/src/progress-circle.component.html","../../../../libs/designsystem/progress-circle/src/kirbydesign-designsystem-progress-circle.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';\nimport { ThemeColorDirective } from '@kirbydesign/designsystem/shared';\n\n@Component({\n  standalone: true,\n  imports: [ThemeColorDirective, CommonModule],\n  selector: 'kirby-progress-circle-ring',\n  templateUrl: './progress-circle-ring.component.svg',\n  styleUrls: ['./progress-circle-ring.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ProgressCircleRingComponent {\n  @Input() radius: number; // The desired outer radius of the SVG circle\n  @Input() value: number = 0;\n  @Input() themeColor: 'success' | 'warning' | 'danger' = 'success';\n  @Input() strokeWidth: number;\n  @Input() upperBound: number;\n\n  get _offset(): number {\n    const valueWithinBounds = this.value < this.upperBound || this.value > 99;\n    if (valueWithinBounds) {\n      return this.calculateOffset(this.value);\n    } else {\n      return this.calculateOffset(this.upperBound);\n    }\n  }\n\n  @HostBinding('style.width.px')\n  @HostBinding('style.height.px')\n  get _diameter(): number {\n    return this.radius * 2;\n  }\n\n  get _centerRadius(): number {\n    return this.radius - this.strokeWidth / 2;\n  }\n\n  get _centerCircumference(): number {\n    return this._centerRadius * 2 * Math.PI;\n  }\n\n  private calculateOffset(value: number): number {\n    return this._centerCircumference - this._centerCircumference * (value / 100);\n  }\n}\n","<svg [attr.width]=\"_diameter\" [attr.height]=\"_diameter\">\n  <circle\n    shape-rendering=\"geometricPrecision\"\n    class=\"circle\"\n    fill=\"transparent\"\n    [attr.stroke-width]=\"strokeWidth\"\n    [attr.r]=\"_centerRadius\"\n    [attr.cx]=\"radius\"\n    [attr.cy]=\"radius\"\n  />\n  <circle\n    shape-rendering=\"geometricPrecision\"\n    class=\"progress\"\n    fill=\"transparent\"\n    stroke-linecap=\"round\"\n    [attr.stroke-width]=\"strokeWidth\"\n    [attr.r]=\"_centerRadius\"\n    [attr.cx]=\"radius\"\n    [attr.cy]=\"radius\"\n    [attr.stroke-dashoffset]=\"_offset\"\n    [attr.stroke-dasharray]=\"_centerCircumference\"\n  />\n</svg>","import { CommonModule } from '@angular/common';\nimport {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ElementRef,\n  HostBinding,\n  Input,\n  OnDestroy,\n} from '@angular/core';\nimport { ProgressCircleRingComponent } from './progress-circle-ring.component';\n\n@Component({\n  standalone: true,\n  imports: [ProgressCircleRingComponent, CommonModule],\n  selector: 'kirby-progress-circle',\n  templateUrl: './progress-circle.component.html',\n  styleUrls: ['./progress-circle.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ProgressCircleComponent implements AfterViewInit, OnDestroy {\n  readonly SIZE_CONFIG = {\n    sm: { diameter: 40, strokeWidth: 3, upperBound: 95 },\n    md: { diameter: 56, strokeWidth: 4, upperBound: 96 },\n    lg: { diameter: 96, strokeWidth: 6, upperBound: 97 },\n  };\n\n  @Input() value: number = 0;\n  @Input() size: 'sm' | 'md' | 'lg' = 'md';\n  @Input() themeColor: 'success' | 'warning' | 'danger' = 'success';\n\n  @HostBinding('class')\n  get _cssSize() {\n    return this.size;\n  }\n\n  private hasElementBeenVisible?: boolean;\n  private observer: IntersectionObserver;\n\n  constructor(\n    private elementRef: ElementRef<HTMLElement>,\n    private changeDetectorRef: ChangeDetectorRef\n  ) {}\n\n  ngAfterViewInit(): void {\n    if (!this.observer) {\n      this.observer = new IntersectionObserver(this.onIntersectionChange, {\n        threshold: 0.5,\n      });\n      this.observer.observe(this.elementRef.nativeElement);\n    }\n  }\n\n  ngOnDestroy(): void {\n    this.unobserve();\n  }\n\n  private onIntersectionChange = (entries: IntersectionObserverEntry[]) => {\n    this.hasElementBeenVisible = entries && entries.some((entry) => entry.isIntersecting);\n    if (this.hasElementBeenVisible) {\n      this.unobserve();\n      this.changeDetectorRef.markForCheck();\n    }\n  };\n\n  private unobserve() {\n    if (this.observer) {\n      this.observer.unobserve(this.elementRef.nativeElement);\n      // Safari does not support \"disconnect\", see: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Browser_compatibility\n      if (typeof this.observer.disconnect === 'function') {\n        this.observer.disconnect();\n      }\n    }\n  }\n\n  @HostBinding('style.width.px')\n  @HostBinding('style.height.px')\n  get _diameter(): number {\n    return this.SIZE_CONFIG[this.size].diameter;\n  }\n\n  get _shownValue() {\n    // This is needed to make an animation [0 -> value] when element is shown to the user\n    return this.hasElementBeenVisible ? this.value : 0;\n  }\n\n  get _radius() {\n    return this._diameter / 2;\n  }\n\n  get _strokeWidth() {\n    return this.SIZE_CONFIG[this.size].strokeWidth;\n  }\n\n  get _upperBound() {\n    // This is needed to make sure that an input value close to 100 is not shown as 100\n    return this.SIZE_CONFIG[this.size].upperBound;\n  }\n}\n","<div class=\"transcluded-content\">\n  <ng-content></ng-content>\n</div>\n<kirby-progress-circle-ring\n  [themeColor]=\"themeColor\"\n  [value]=\"_shownValue\"\n  [radius]=\"_radius\"\n  [strokeWidth]=\"_strokeWidth\"\n  [upperBound]=\"_upperBound\"\n></kirby-progress-circle-ring>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2015/kirbydesign-designsystem-section-header.mjs

@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { Component, ChangeDetectionStrategy } from '@angular/core';
 import * as i1 from '@ionic/angular';
@@ -6,10 +7,10 @@ import { IonicModule } from '@ionic/angular';
 class SectionHeaderComponent {
 }
 /** @nocollapse */ SectionHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SectionHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ SectionHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SectionHeaderComponent, isStandalone: true, selector: "kirby-section-header", ngImport: i0, template: "<ion-item-divider>\n  <ng-content></ng-content>\n</ion-item-divider>\n", styles: [":host{--kirby-section-header-color: var(--kirby-text-color-black)}:host ion-item-divider{--inner-padding-end: 0;--background: transparent;--padding-end: 16px;--padding-start: 16px;font-weight:inherit;min-height:0}:host ion-item-divider ::ng-deep>[heading]{font-weight:700;font-size:18px;line-height:24px;color:var(--kirby-section-header-color);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host ion-item-divider ::ng-deep>[detail],:host ion-item-divider ::ng-deep>[label]{font-weight:300;font-size:14px;line-height:20px;color:var(--kirby-section-header-color);margin:4px 0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "ngmodule", type: IonicModule }, { kind: "component", type: i1.IonItemDivider, selector: "ion-item-divider", inputs: ["color", "mode", "sticky"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+/** @nocollapse */ SectionHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SectionHeaderComponent, isStandalone: true, selector: "kirby-section-header", ngImport: i0, template: "<ion-item-divider>\n  <ng-content></ng-content>\n</ion-item-divider>\n", styles: [":host{--kirby-section-header-color: var(--kirby-text-color-black)}:host ion-item-divider{--inner-padding-end: 0;--background: transparent;--padding-end: 16px;--padding-start: 16px;font-weight:inherit;min-height:0}:host ion-item-divider ::ng-deep>[heading]{font-weight:700;font-size:18px;line-height:24px;color:var(--kirby-section-header-color);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host ion-item-divider ::ng-deep>[detail],:host ion-item-divider ::ng-deep>[label]{font-weight:300;font-size:14px;line-height:20px;color:var(--kirby-section-header-color);margin:4px 0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "ngmodule", type: IonicModule }, { kind: "component", type: i1.IonItemDivider, selector: "ion-item-divider", inputs: ["color", "mode", "sticky"] }, { kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SectionHeaderComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [IonicModule], selector: 'kirby-section-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-item-divider>\n  <ng-content></ng-content>\n</ion-item-divider>\n", styles: [":host{--kirby-section-header-color: var(--kirby-text-color-black)}:host ion-item-divider{--inner-padding-end: 0;--background: transparent;--padding-end: 16px;--padding-start: 16px;font-weight:inherit;min-height:0}:host ion-item-divider ::ng-deep>[heading]{font-weight:700;font-size:18px;line-height:24px;color:var(--kirby-section-header-color);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host ion-item-divider ::ng-deep>[detail],:host ion-item-divider ::ng-deep>[label]{font-weight:300;font-size:14px;line-height:20px;color:var(--kirby-section-header-color);margin:4px 0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
+            args: [{ standalone: true, imports: [IonicModule, CommonModule], selector: 'kirby-section-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-item-divider>\n  <ng-content></ng-content>\n</ion-item-divider>\n", styles: [":host{--kirby-section-header-color: var(--kirby-text-color-black)}:host ion-item-divider{--inner-padding-end: 0;--background: transparent;--padding-end: 16px;--padding-start: 16px;font-weight:inherit;min-height:0}:host ion-item-divider ::ng-deep>[heading]{font-weight:700;font-size:18px;line-height:24px;color:var(--kirby-section-header-color);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host ion-item-divider ::ng-deep>[detail],:host ion-item-divider ::ng-deep>[label]{font-weight:300;font-size:14px;line-height:20px;color:var(--kirby-section-header-color);margin:4px 0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
         }] });
 
 /**

package/fesm2015/kirbydesign-designsystem-section-header.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"kirbydesign-designsystem-section-header.mjs","sources":["../../../../libs/designsystem/section-header/src/section-header.component.ts","../../../../libs/designsystem/section-header/src/section-header.component.html","../../../../libs/designsystem/section-header/src/kirbydesign-designsystem-section-header.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { IonicModule } from '@ionic/angular';\n\n@Component({\n  standalone: true,\n  imports: [IonicModule],\n  selector: 'kirby-section-header',\n  templateUrl: './section-header.component.html',\n  styleUrls: ['./section-header.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SectionHeaderComponent {}\n","<ion-item-divider>\n  <ng-content></ng-content>\n</ion-item-divider>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;MAWa,sBAAsB,CAAA;;sIAAtB,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;0HAAtB,sBAAsB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,sBAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECXnC,wEAGA,EAAA,MAAA,EAAA,CAAA,qpBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDEY,WAAW,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,cAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,MAAA,EAAA,QAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;2FAMV,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBARlC,SAAS;iCACI,IAAI,EAAA,OAAA,EACP,CAAC,WAAW,CAAC,YACZ,sBAAsB,EAAA,eAAA,EAGf,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,wEAAA,EAAA,MAAA,EAAA,CAAA,qpBAAA,CAAA,EAAA,CAAA;;;AETjD;;AAEG;;;;"}
+{"version":3,"file":"kirbydesign-designsystem-section-header.mjs","sources":["../../../../libs/designsystem/section-header/src/section-header.component.ts","../../../../libs/designsystem/section-header/src/section-header.component.html","../../../../libs/designsystem/section-header/src/kirbydesign-designsystem-section-header.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { IonicModule } from '@ionic/angular';\n\n@Component({\n  standalone: true,\n  imports: [IonicModule, CommonModule],\n  selector: 'kirby-section-header',\n  templateUrl: './section-header.component.html',\n  styleUrls: ['./section-header.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SectionHeaderComponent {}\n","<ion-item-divider>\n  <ng-content></ng-content>\n</ion-item-divider>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;;MAYa,sBAAsB,CAAA;;sIAAtB,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAtB,mBAAA,sBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,sBAAsB,ECZnC,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,sBAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,wEAGA,EDGY,MAAA,EAAA,CAAA,qpBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,WAAW,iJAAE,YAAY,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;2FAMxB,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBARlC,SAAS;iCACI,IAAI,EAAA,OAAA,EACP,CAAC,WAAW,EAAE,YAAY,CAAC,EAAA,QAAA,EAC1B,sBAAsB,EAAA,eAAA,EAGf,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,wEAAA,EAAA,MAAA,EAAA,CAAA,qpBAAA,CAAA,EAAA,CAAA;;;AEVjD;;AAEG;;;;"}

package/fesm2015/kirbydesign-designsystem-toggle.mjs

@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output } from '@angular/core';
 import { KirbyIonicModule } from '@kirbydesign/designsystem/kirby-ionic-module';
@@ -22,10 +23,10 @@ class ToggleComponent {
     }
 }
 /** @nocollapse */ ToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ ToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ToggleComponent, isStandalone: true, selector: "kirby-toggle", inputs: { checked: "checked", disabled: "disabled" }, outputs: { checkedChange: "checkedChange" }, ngImport: i0, template: "<ion-toggle\n  [checked]=\"checked\"\n  [disabled]=\"disabled\"\n  [class.interaction-state-active]=\"_pressed\"\n  (keydown.space)=\"_onActive()\"\n  (keyup.space)=\"_onInactive()\"\n  (blur)=\"_onInactive()\"\n  (ionChange)=\"onCheckedChange($event.detail.checked)\"\n></ion-toggle>\n", styles: [":host{display:inline-flex}ion-toggle{--background: var(--kirby-semi-dark);--handle-background: var(--kirby-white);--background-checked: var(--kirby-success);--handle-background-checked: var(--kirby-white);--handle-transition: .2s;--handle-box-shadow: 0 1px 24px 0 rgba(28, 28, 28, .04)}@media (hover: hover) and (pointer: fine){ion-toggle{overflow:visible;contain:none}ion-toggle:focus-within::part(track){transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}@media (hover: hover){ion-toggle:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--background: #777777;--handle-background: whitesmoke;--background-checked: #0ee270;--handle-background-checked: whitesmoke}}ion-toggle:active,ion-toggle.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background: #6c6c6c;--handle-background: #ebebeb;--background-checked: #0dcd65;--handle-background-checked: #ebebeb}\n"], dependencies: [{ kind: "ngmodule", type: KirbyIonicModule }, { kind: "component", type: i1.IonToggle, selector: "ion-toggle", inputs: ["checked", "color", "disabled", "enableOnOffLabels", "mode", "name", "value"] }, { kind: "directive", type: i1.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+/** @nocollapse */ ToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ToggleComponent, isStandalone: true, selector: "kirby-toggle", inputs: { checked: "checked", disabled: "disabled" }, outputs: { checkedChange: "checkedChange" }, ngImport: i0, template: "<ion-toggle\n  [checked]=\"checked\"\n  [disabled]=\"disabled\"\n  [class.interaction-state-active]=\"_pressed\"\n  (keydown.space)=\"_onActive()\"\n  (keyup.space)=\"_onInactive()\"\n  (blur)=\"_onInactive()\"\n  (ionChange)=\"onCheckedChange($event.detail.checked)\"\n></ion-toggle>\n", styles: [":host{display:inline-flex}ion-toggle{--background: var(--kirby-semi-dark);--handle-background: var(--kirby-white);--background-checked: var(--kirby-success);--handle-background-checked: var(--kirby-white);--handle-transition: .2s;--handle-box-shadow: 0 1px 24px 0 rgba(28, 28, 28, .04)}@media (hover: hover) and (pointer: fine){ion-toggle{overflow:visible;contain:none}ion-toggle:focus-within::part(track){transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}@media (hover: hover){ion-toggle:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--background: #777777;--handle-background: whitesmoke;--background-checked: #0ee270;--handle-background-checked: whitesmoke}}ion-toggle:active,ion-toggle.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background: #6c6c6c;--handle-background: #ebebeb;--background-checked: #0dcd65;--handle-background-checked: #ebebeb}\n"], dependencies: [{ kind: "ngmodule", type: KirbyIonicModule }, { kind: "component", type: i1.IonToggle, selector: "ion-toggle", inputs: ["checked", "color", "disabled", "enableOnOffLabels", "mode", "name", "value"] }, { kind: "directive", type: i1.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }, { kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ToggleComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [KirbyIonicModule], selector: 'kirby-toggle', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-toggle\n  [checked]=\"checked\"\n  [disabled]=\"disabled\"\n  [class.interaction-state-active]=\"_pressed\"\n  (keydown.space)=\"_onActive()\"\n  (keyup.space)=\"_onInactive()\"\n  (blur)=\"_onInactive()\"\n  (ionChange)=\"onCheckedChange($event.detail.checked)\"\n></ion-toggle>\n", styles: [":host{display:inline-flex}ion-toggle{--background: var(--kirby-semi-dark);--handle-background: var(--kirby-white);--background-checked: var(--kirby-success);--handle-background-checked: var(--kirby-white);--handle-transition: .2s;--handle-box-shadow: 0 1px 24px 0 rgba(28, 28, 28, .04)}@media (hover: hover) and (pointer: fine){ion-toggle{overflow:visible;contain:none}ion-toggle:focus-within::part(track){transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}@media (hover: hover){ion-toggle:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--background: #777777;--handle-background: whitesmoke;--background-checked: #0ee270;--handle-background-checked: whitesmoke}}ion-toggle:active,ion-toggle.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background: #6c6c6c;--handle-background: #ebebeb;--background-checked: #0dcd65;--handle-background-checked: #ebebeb}\n"] }]
+            args: [{ standalone: true, imports: [KirbyIonicModule, CommonModule], selector: 'kirby-toggle', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-toggle\n  [checked]=\"checked\"\n  [disabled]=\"disabled\"\n  [class.interaction-state-active]=\"_pressed\"\n  (keydown.space)=\"_onActive()\"\n  (keyup.space)=\"_onInactive()\"\n  (blur)=\"_onInactive()\"\n  (ionChange)=\"onCheckedChange($event.detail.checked)\"\n></ion-toggle>\n", styles: [":host{display:inline-flex}ion-toggle{--background: var(--kirby-semi-dark);--handle-background: var(--kirby-white);--background-checked: var(--kirby-success);--handle-background-checked: var(--kirby-white);--handle-transition: .2s;--handle-box-shadow: 0 1px 24px 0 rgba(28, 28, 28, .04)}@media (hover: hover) and (pointer: fine){ion-toggle{overflow:visible;contain:none}ion-toggle:focus-within::part(track){transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}@media (hover: hover){ion-toggle:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--background: #777777;--handle-background: whitesmoke;--background-checked: #0ee270;--handle-background-checked: whitesmoke}}ion-toggle:active,ion-toggle.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background: #6c6c6c;--handle-background: #ebebeb;--background-checked: #0dcd65;--handle-background-checked: #ebebeb}\n"] }]
         }], propDecorators: { checked: [{
                 type: Input
             }], disabled: [{

package/fesm2015/kirbydesign-designsystem-toggle.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"kirbydesign-designsystem-toggle.mjs","sources":["../../../../libs/designsystem/toggle/src/toggle.component.ts","../../../../libs/designsystem/toggle/src/toggle.component.html","../../../../libs/designsystem/toggle/src/kirbydesign-designsystem-toggle.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';\nimport { KirbyIonicModule } from '@kirbydesign/designsystem/kirby-ionic-module';\n\n@Component({\n  standalone: true,\n  imports: [KirbyIonicModule],\n  selector: 'kirby-toggle',\n  templateUrl: './toggle.component.html',\n  styleUrls: ['./toggle.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ToggleComponent {\n  @Input() checked: boolean = false;\n  @Input() disabled: boolean = false;\n\n  @Output() checkedChange = new EventEmitter<boolean>();\n\n  _pressed = false;\n\n  onCheckedChange(checked: boolean): void {\n    this.checked = checked;\n    this.checkedChange.emit(this.checked);\n  }\n\n  _onActive() {\n    this._pressed = true;\n  }\n\n  _onInactive() {\n    this._pressed = false;\n  }\n}\n","<ion-toggle\n  [checked]=\"checked\"\n  [disabled]=\"disabled\"\n  [class.interaction-state-active]=\"_pressed\"\n  (keydown.space)=\"_onActive()\"\n  (keyup.space)=\"_onInactive()\"\n  (blur)=\"_onInactive()\"\n  (ionChange)=\"onCheckedChange($event.detail.checked)\"\n></ion-toggle>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;MAWa,eAAe,CAAA;AAR5B,IAAA,WAAA,GAAA;AASW,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK,CAAC;AACzB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK,CAAC;AAEzB,QAAA,IAAA,CAAA,aAAa,GAAG,IAAI,YAAY,EAAW,CAAC;AAEtD,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;KAclB;AAZC,IAAA,eAAe,CAAC,OAAgB,EAAA;AAC9B,QAAA,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;QACvB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KACvC;IAED,SAAS,GAAA;AACP,QAAA,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;KACtB;IAED,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;KACvB;;+HAnBU,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;mHAAf,eAAe,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,EAAA,aAAA,EAAA,eAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECX5B,gSASA,EAAA,MAAA,EAAA,CAAA,0/BAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDJY,gBAAgB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,OAAA,EAAA,UAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,MAAA,EAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,yBAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;2FAMf,eAAe,EAAA,UAAA,EAAA,CAAA;kBAR3B,SAAS;iCACI,IAAI,EAAA,OAAA,EACP,CAAC,gBAAgB,CAAC,YACjB,cAAc,EAAA,eAAA,EAGP,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,gSAAA,EAAA,MAAA,EAAA,CAAA,0/BAAA,CAAA,EAAA,CAAA;8BAGtC,OAAO,EAAA,CAAA;sBAAf,KAAK;gBACG,QAAQ,EAAA,CAAA;sBAAhB,KAAK;gBAEI,aAAa,EAAA,CAAA;sBAAtB,MAAM;;;AEfT;;AAEG;;;;"}
+{"version":3,"file":"kirbydesign-designsystem-toggle.mjs","sources":["../../../../libs/designsystem/toggle/src/toggle.component.ts","../../../../libs/designsystem/toggle/src/toggle.component.html","../../../../libs/designsystem/toggle/src/kirbydesign-designsystem-toggle.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';\nimport { KirbyIonicModule } from '@kirbydesign/designsystem/kirby-ionic-module';\n\n@Component({\n  standalone: true,\n  imports: [KirbyIonicModule, CommonModule],\n  selector: 'kirby-toggle',\n  templateUrl: './toggle.component.html',\n  styleUrls: ['./toggle.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ToggleComponent {\n  @Input() checked: boolean = false;\n  @Input() disabled: boolean = false;\n\n  @Output() checkedChange = new EventEmitter<boolean>();\n\n  _pressed = false;\n\n  onCheckedChange(checked: boolean): void {\n    this.checked = checked;\n    this.checkedChange.emit(this.checked);\n  }\n\n  _onActive() {\n    this._pressed = true;\n  }\n\n  _onInactive() {\n    this._pressed = false;\n  }\n}\n","<ion-toggle\n  [checked]=\"checked\"\n  [disabled]=\"disabled\"\n  [class.interaction-state-active]=\"_pressed\"\n  (keydown.space)=\"_onActive()\"\n  (keyup.space)=\"_onInactive()\"\n  (blur)=\"_onInactive()\"\n  (ionChange)=\"onCheckedChange($event.detail.checked)\"\n></ion-toggle>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;;MAYa,eAAe,CAAA;AAR5B,IAAA,WAAA,GAAA;AASW,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK,CAAC;AACzB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK,CAAC;AAEzB,QAAA,IAAA,CAAA,aAAa,GAAG,IAAI,YAAY,EAAW,CAAC;AAEtD,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;KAclB;AAZC,IAAA,eAAe,CAAC,OAAgB,EAAA;AAC9B,QAAA,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;QACvB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KACvC;IAED,SAAS,GAAA;AACP,QAAA,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;KACtB;IAED,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;KACvB;;+HAnBU,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAf,mBAAA,eAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,eAAe,ECZ5B,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,EAAA,aAAA,EAAA,eAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,gSASA,EDHY,MAAA,EAAA,CAAA,0/BAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,gBAAgB,oRAAE,YAAY,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;2FAM7B,eAAe,EAAA,UAAA,EAAA,CAAA;kBAR3B,SAAS;iCACI,IAAI,EAAA,OAAA,EACP,CAAC,gBAAgB,EAAE,YAAY,CAAC,EAAA,QAAA,EAC/B,cAAc,EAAA,eAAA,EAGP,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,gSAAA,EAAA,MAAA,EAAA,CAAA,0/BAAA,CAAA,EAAA,CAAA;8BAGtC,OAAO,EAAA,CAAA;sBAAf,KAAK;gBACG,QAAQ,EAAA,CAAA;sBAAhB,KAAK;gBAEI,aAAa,EAAA,CAAA;sBAAtB,MAAM;;;AEhBT;;AAEG;;;;"}

package/fesm2020/kirbydesign-designsystem-button.mjs

@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { ElementRef, Component, ChangeDetectionStrategy, HostBinding, Input, ContentChild } from '@angular/core';
 import { IconComponent } from '@kirbydesign/designsystem/icon';
@@ -60,10 +61,10 @@ class ButtonComponent {
     }
 }
 /** @nocollapse */ ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ButtonComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ButtonComponent, isStandalone: true, selector: "button[kirby-button],Button[kirby-button]", inputs: { attentionLevel: "attentionLevel", noDecoration: "noDecoration", themeColor: "themeColor", expand: "expand", isFloating: "isFloating", size: "size" }, host: { properties: { "class.attention-level1": "this.isAttentionLevel1", "class.attention-level2": "this.isAttentionLevel2", "class.attention-level3": "this.isAttentionLevel3", "class.no-decoration": "this.hasNoDecoration", "class.floating": "this.isButtonFloating", "class.icon-only": "this.isIconOnly", "class.icon-left": "this.isIconLeft", "class.icon-right": "this.isIconRight", "class": "this._cssClass" } }, queries: [{ propertyName: "icon", first: true, predicate: IconComponent, descendants: true }, { 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: [":host{--kirby-button-padding-left: 24px;--kirby-button-padding-right: 24px;--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative;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:14px;height:40px;min-width:88px;padding:0;margin:4px;line-height:20px;outline:none;border:none}:host:after{content:\"\";position:absolute;min-height:44px;min-width:44px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}@media (hover: hover) and (pointer: fine){:host:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}: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:-50%;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 .content-layer.attention-level3{box-shadow:var(--kirby-inputs-elevation)}: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{width:40px;padding:0;min-width:unset}:host.sm{font-size:12px;height:32px;min-width:44px}:host.sm:not(.icon-only){--kirby-button-padding-left: 16px;--kirby-button-padding-right: 16px}:host.sm.icon-only{--kirby-icon-font-size: 16px;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{--kirby-icon-font-size: 16px;min-width:88px}:host.lg{font-size:16px;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[expand=block]{width:100%}:host:disabled{background-color:var(--kirby-semi-light);color:var(--kirby-semi-dark-shade);border-color:transparent;pointer-events:none}: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-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-start:16px}:host-context(kirby-alert).ok-btn{--kirby-button-background-color: var(--kirby-success);--kirby-button-color: var(--kirby-success-contrast)}:host-context(kirby-dropdown){justify-content:space-between}:host-context(ion-toolbar ion-buttons){font-size:14px;margin:0;height:40px}:host-context(ion-toolbar ion-buttons).icon-only{width:40px}:host-context(ion-toolbar ion-buttons).icon-only.no-decoration,:host-context(ion-toolbar ion-buttons).icon-only.attention-level1,:host-context(ion-toolbar ion-buttons).icon-only.attention-level2,:host-context(ion-toolbar ion-buttons).icon-only.attention-level3{--kirby-button-background-color: transparent;--kirby-button-color: var(--kirby-black)}@media (hover: hover){:host-context(ion-toolbar ion-buttons).icon-only.no-decoration:hover,:host-context(ion-toolbar ion-buttons).icon-only.attention-level1:hover,:host-context(ion-toolbar ion-buttons).icon-only.attention-level2:hover,:host-context(ion-toolbar ion-buttons).icon-only.attention-level3:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(ion-toolbar ion-buttons).icon-only.no-decoration:active,:host-context(ion-toolbar ion-buttons).icon-only.no-decoration.interaction-state-active,:host-context(ion-toolbar ion-buttons).icon-only.attention-level1:active,:host-context(ion-toolbar ion-buttons).icon-only.attention-level1.interaction-state-active,:host-context(ion-toolbar ion-buttons).icon-only.attention-level2:active,:host-context(ion-toolbar ion-buttons).icon-only.attention-level2.interaction-state-active,:host-context(ion-toolbar ion-buttons).icon-only.attention-level3:active,:host-context(ion-toolbar ion-buttons).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:16px;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)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+/** @nocollapse */ ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ButtonComponent, isStandalone: true, selector: "button[kirby-button],Button[kirby-button]", inputs: { attentionLevel: "attentionLevel", noDecoration: "noDecoration", themeColor: "themeColor", expand: "expand", isFloating: "isFloating", size: "size" }, host: { properties: { "class.attention-level1": "this.isAttentionLevel1", "class.attention-level2": "this.isAttentionLevel2", "class.attention-level3": "this.isAttentionLevel3", "class.no-decoration": "this.hasNoDecoration", "class.floating": "this.isButtonFloating", "class.icon-only": "this.isIconOnly", "class.icon-left": "this.isIconLeft", "class.icon-right": "this.isIconRight", "class": "this._cssClass" } }, queries: [{ propertyName: "icon", first: true, predicate: IconComponent, descendants: true }, { 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: [":host{--kirby-button-padding-left: 24px;--kirby-button-padding-right: 24px;--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative;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:14px;height:40px;min-width:88px;padding:0;margin:4px;line-height:20px;outline:none;border:none}:host:after{content:\"\";position:absolute;min-height:44px;min-width:44px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}@media (hover: hover) and (pointer: fine){:host:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}: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:-50%;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 .content-layer.attention-level3{box-shadow:var(--kirby-inputs-elevation)}: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{width:40px;padding:0;min-width:unset}:host.sm{font-size:12px;height:32px;min-width:44px}:host.sm:not(.icon-only){--kirby-button-padding-left: 16px;--kirby-button-padding-right: 16px}:host.sm.icon-only{--kirby-icon-font-size: 16px;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{--kirby-icon-font-size: 16px;min-width:88px}:host.lg{font-size:16px;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[expand=block]{width:100%}:host:disabled{background-color:var(--kirby-semi-light);color:var(--kirby-semi-dark-shade);border-color:transparent;pointer-events:none}: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-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-start:16px}:host-context(kirby-alert).ok-btn{--kirby-button-background-color: var(--kirby-success);--kirby-button-color: var(--kirby-success-contrast)}:host-context(kirby-dropdown){justify-content:space-between}:host-context(ion-toolbar ion-buttons){font-size:14px;margin:0;height:40px}:host-context(ion-toolbar ion-buttons).icon-only{width:40px}:host-context(ion-toolbar ion-buttons).icon-only.no-decoration,:host-context(ion-toolbar ion-buttons).icon-only.attention-level1,:host-context(ion-toolbar ion-buttons).icon-only.attention-level2,:host-context(ion-toolbar ion-buttons).icon-only.attention-level3{--kirby-button-background-color: transparent;--kirby-button-color: var(--kirby-black)}@media (hover: hover){:host-context(ion-toolbar ion-buttons).icon-only.no-decoration:hover,:host-context(ion-toolbar ion-buttons).icon-only.attention-level1:hover,:host-context(ion-toolbar ion-buttons).icon-only.attention-level2:hover,:host-context(ion-toolbar ion-buttons).icon-only.attention-level3:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(ion-toolbar ion-buttons).icon-only.no-decoration:active,:host-context(ion-toolbar ion-buttons).icon-only.no-decoration.interaction-state-active,:host-context(ion-toolbar ion-buttons).icon-only.attention-level1:active,:host-context(ion-toolbar ion-buttons).icon-only.attention-level1.interaction-state-active,:host-context(ion-toolbar ion-buttons).icon-only.attention-level2:active,:host-context(ion-toolbar ion-buttons).icon-only.attention-level2.interaction-state-active,:host-context(ion-toolbar ion-buttons).icon-only.attention-level3:active,:host-context(ion-toolbar ion-buttons).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:16px;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)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'button[kirby-button],Button[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: [":host{--kirby-button-padding-left: 24px;--kirby-button-padding-right: 24px;--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative;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:14px;height:40px;min-width:88px;padding:0;margin:4px;line-height:20px;outline:none;border:none}:host:after{content:\"\";position:absolute;min-height:44px;min-width:44px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}@media (hover: hover) and (pointer: fine){:host:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}: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:-50%;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 .content-layer.attention-level3{box-shadow:var(--kirby-inputs-elevation)}: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{width:40px;padding:0;min-width:unset}:host.sm{font-size:12px;height:32px;min-width:44px}:host.sm:not(.icon-only){--kirby-button-padding-left: 16px;--kirby-button-padding-right: 16px}:host.sm.icon-only{--kirby-icon-font-size: 16px;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{--kirby-icon-font-size: 16px;min-width:88px}:host.lg{font-size:16px;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[expand=block]{width:100%}:host:disabled{background-color:var(--kirby-semi-light);color:var(--kirby-semi-dark-shade);border-color:transparent;pointer-events:none}: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-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-start:16px}:host-context(kirby-alert).ok-btn{--kirby-button-background-color: var(--kirby-success);--kirby-button-color: var(--kirby-success-contrast)}:host-context(kirby-dropdown){justify-content:space-between}:host-context(ion-toolbar ion-buttons){font-size:14px;margin:0;height:40px}:host-context(ion-toolbar ion-buttons).icon-only{width:40px}:host-context(ion-toolbar ion-buttons).icon-only.no-decoration,:host-context(ion-toolbar ion-buttons).icon-only.attention-level1,:host-context(ion-toolbar ion-buttons).icon-only.attention-level2,:host-context(ion-toolbar ion-buttons).icon-only.attention-level3{--kirby-button-background-color: transparent;--kirby-button-color: var(--kirby-black)}@media (hover: hover){:host-context(ion-toolbar ion-buttons).icon-only.no-decoration:hover,:host-context(ion-toolbar ion-buttons).icon-only.attention-level1:hover,:host-context(ion-toolbar ion-buttons).icon-only.attention-level2:hover,:host-context(ion-toolbar ion-buttons).icon-only.attention-level3:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(ion-toolbar ion-buttons).icon-only.no-decoration:active,:host-context(ion-toolbar ion-buttons).icon-only.no-decoration.interaction-state-active,:host-context(ion-toolbar ion-buttons).icon-only.attention-level1:active,:host-context(ion-toolbar ion-buttons).icon-only.attention-level1.interaction-state-active,:host-context(ion-toolbar ion-buttons).icon-only.attention-level2:active,:host-context(ion-toolbar ion-buttons).icon-only.attention-level2.interaction-state-active,:host-context(ion-toolbar ion-buttons).icon-only.attention-level3:active,:host-context(ion-toolbar ion-buttons).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:16px;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)}\n"] }]
+            args: [{ standalone: true, imports: [CommonModule], selector: 'button[kirby-button],Button[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: [":host{--kirby-button-padding-left: 24px;--kirby-button-padding-right: 24px;--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative;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:14px;height:40px;min-width:88px;padding:0;margin:4px;line-height:20px;outline:none;border:none}:host:after{content:\"\";position:absolute;min-height:44px;min-width:44px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}@media (hover: hover) and (pointer: fine){:host:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}: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:-50%;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 .content-layer.attention-level3{box-shadow:var(--kirby-inputs-elevation)}: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{width:40px;padding:0;min-width:unset}:host.sm{font-size:12px;height:32px;min-width:44px}:host.sm:not(.icon-only){--kirby-button-padding-left: 16px;--kirby-button-padding-right: 16px}:host.sm.icon-only{--kirby-icon-font-size: 16px;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{--kirby-icon-font-size: 16px;min-width:88px}:host.lg{font-size:16px;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[expand=block]{width:100%}:host:disabled{background-color:var(--kirby-semi-light);color:var(--kirby-semi-dark-shade);border-color:transparent;pointer-events:none}: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-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-start:16px}:host-context(kirby-alert).ok-btn{--kirby-button-background-color: var(--kirby-success);--kirby-button-color: var(--kirby-success-contrast)}:host-context(kirby-dropdown){justify-content:space-between}:host-context(ion-toolbar ion-buttons){font-size:14px;margin:0;height:40px}:host-context(ion-toolbar ion-buttons).icon-only{width:40px}:host-context(ion-toolbar ion-buttons).icon-only.no-decoration,:host-context(ion-toolbar ion-buttons).icon-only.attention-level1,:host-context(ion-toolbar ion-buttons).icon-only.attention-level2,:host-context(ion-toolbar ion-buttons).icon-only.attention-level3{--kirby-button-background-color: transparent;--kirby-button-color: var(--kirby-black)}@media (hover: hover){:host-context(ion-toolbar ion-buttons).icon-only.no-decoration:hover,:host-context(ion-toolbar ion-buttons).icon-only.attention-level1:hover,:host-context(ion-toolbar ion-buttons).icon-only.attention-level2:hover,:host-context(ion-toolbar ion-buttons).icon-only.attention-level3:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(ion-toolbar ion-buttons).icon-only.no-decoration:active,:host-context(ion-toolbar ion-buttons).icon-only.no-decoration.interaction-state-active,:host-context(ion-toolbar ion-buttons).icon-only.attention-level1:active,:host-context(ion-toolbar ion-buttons).icon-only.attention-level1.interaction-state-active,:host-context(ion-toolbar ion-buttons).icon-only.attention-level2:active,:host-context(ion-toolbar ion-buttons).icon-only.attention-level2.interaction-state-active,:host-context(ion-toolbar ion-buttons).icon-only.attention-level3:active,:host-context(ion-toolbar ion-buttons).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:16px;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)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { isAttentionLevel1: [{
                 type: HostBinding,
                 args: ['class.attention-level1']

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

@@ -1 +1 @@
-{"version":3,"file":"kirbydesign-designsystem-button.mjs","sources":["../../../../libs/designsystem/button/src/button.component.ts","../../../../libs/designsystem/button/src/button.component.html","../../../../libs/designsystem/button/src/kirbydesign-designsystem-button.ts"],"sourcesContent":["import {\n  AfterContentInit,\n  ChangeDetectionStrategy,\n  Component,\n  ContentChild,\n  ElementRef,\n  HostBinding,\n  Input,\n} from '@angular/core';\n\nimport { NotificationColor } from '@kirbydesign/core';\n\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\n\nexport enum ButtonSize {\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n}\n\nconst ATTENTION_LEVEL_4_DEPRECATION_WARNING =\n  'Deprecation warning: The \"kirby-button\" support for using input property \"attentionLevel\" with the value \"4\" will be removed in a future release of Kirby designsystem. While deprecated, all attention-level 4 buttons will be rendered as attention-level 3.';\n\n@Component({\n  standalone: true,\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'button[kirby-button],Button[kirby-button]',\n  templateUrl: './button.component.html',\n  styleUrls: ['./button.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ButtonComponent implements AfterContentInit {\n  @HostBinding('class.attention-level1')\n  isAttentionLevel1: boolean = true; // Default\n  @HostBinding('class.attention-level2')\n  isAttentionLevel2: boolean;\n  @HostBinding('class.attention-level3')\n  isAttentionLevel3: boolean;\n  @Input() set attentionLevel(level: '1' | '2' | '3' | '4') {\n    this.isAttentionLevel1 = level === '1';\n    this.isAttentionLevel2 = level === '2';\n    this.isAttentionLevel3 = level === '3' || level === '4';\n    if (level === '4') {\n      console.warn(ATTENTION_LEVEL_4_DEPRECATION_WARNING);\n    }\n  }\n\n  @HostBinding('class.no-decoration')\n  hasNoDecoration = false;\n  @Input()\n  set noDecoration(enable: boolean) {\n    this.hasNoDecoration = enable;\n    this.isAttentionLevel1 = !enable;\n    this.isAttentionLevel2 = false;\n    this.isAttentionLevel3 = false;\n  }\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.icon && !this.hasText;\n  }\n  private _isIconLeft = false;\n  @HostBinding('class.icon-left')\n  public get isIconLeft() {\n    return this._isIconLeft;\n  }\n  private _isIconRight = false;\n  @HostBinding('class.icon-right')\n  public get isIconRight() {\n    return this._isIconRight;\n  }\n\n  @HostBinding('class')\n  get _cssClass() {\n    return [this.themeColor, this.size].filter((cssClass) => !!cssClass);\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  @ContentChild(IconComponent) icon: IconComponent;\n  @ContentChild(IconComponent, { read: ElementRef })\n  iconElementRef: ElementRef<HTMLElement>;\n  private hasText = false;\n\n  constructor(private elementRef: ElementRef<HTMLElement>) {}\n\n  ngAfterContentInit(): void {\n    this.hasText = !!this.elementRef.nativeElement.textContent;\n    if (this.iconElementRef !== undefined && this.hasText) {\n      this._isIconLeft =\n        this.elementRef.nativeElement.querySelector('.content-layer').firstChild ===\n        this.iconElementRef.nativeElement;\n      this._isIconRight = !this._isIconLeft;\n    }\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","sources":["../../../../libs/designsystem/button/src/button.component.ts","../../../../libs/designsystem/button/src/button.component.html","../../../../libs/designsystem/button/src/kirbydesign-designsystem-button.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n  AfterContentInit,\n  ChangeDetectionStrategy,\n  Component,\n  ContentChild,\n  ElementRef,\n  HostBinding,\n  Input,\n} from '@angular/core';\n\nimport { NotificationColor } from '@kirbydesign/core';\n\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\n\nexport enum ButtonSize {\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n}\n\nconst ATTENTION_LEVEL_4_DEPRECATION_WARNING =\n  'Deprecation warning: The \"kirby-button\" support for using input property \"attentionLevel\" with the value \"4\" will be removed in a future release of Kirby designsystem. While deprecated, all attention-level 4 buttons will be rendered as attention-level 3.';\n\n@Component({\n  standalone: true,\n  imports: [CommonModule],\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'button[kirby-button],Button[kirby-button]',\n  templateUrl: './button.component.html',\n  styleUrls: ['./button.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ButtonComponent implements AfterContentInit {\n  @HostBinding('class.attention-level1')\n  isAttentionLevel1: boolean = true; // Default\n  @HostBinding('class.attention-level2')\n  isAttentionLevel2: boolean;\n  @HostBinding('class.attention-level3')\n  isAttentionLevel3: boolean;\n  @Input() set attentionLevel(level: '1' | '2' | '3' | '4') {\n    this.isAttentionLevel1 = level === '1';\n    this.isAttentionLevel2 = level === '2';\n    this.isAttentionLevel3 = level === '3' || level === '4';\n    if (level === '4') {\n      console.warn(ATTENTION_LEVEL_4_DEPRECATION_WARNING);\n    }\n  }\n\n  @HostBinding('class.no-decoration')\n  hasNoDecoration = false;\n  @Input()\n  set noDecoration(enable: boolean) {\n    this.hasNoDecoration = enable;\n    this.isAttentionLevel1 = !enable;\n    this.isAttentionLevel2 = false;\n    this.isAttentionLevel3 = false;\n  }\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.icon && !this.hasText;\n  }\n  private _isIconLeft = false;\n  @HostBinding('class.icon-left')\n  public get isIconLeft() {\n    return this._isIconLeft;\n  }\n  private _isIconRight = false;\n  @HostBinding('class.icon-right')\n  public get isIconRight() {\n    return this._isIconRight;\n  }\n\n  @HostBinding('class')\n  get _cssClass() {\n    return [this.themeColor, this.size].filter((cssClass) => !!cssClass);\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  @ContentChild(IconComponent) icon: IconComponent;\n  @ContentChild(IconComponent, { read: ElementRef })\n  iconElementRef: ElementRef<HTMLElement>;\n  private hasText = false;\n\n  constructor(private elementRef: ElementRef<HTMLElement>) {}\n\n  ngAfterContentInit(): void {\n    this.hasText = !!this.elementRef.nativeElement.textContent;\n    if (this.iconElementRef !== undefined && this.hasText) {\n      this._isIconLeft =\n        this.elementRef.nativeElement.querySelector('.content-layer').firstChild ===\n        this.iconElementRef.nativeElement;\n      this._isIconRight = !this._isIconLeft;\n    }\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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"}

package/fesm2020/kirbydesign-designsystem-divider.mjs

@@ -1,13 +1,14 @@
+import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
 
 class DividerComponent {
 }
 /** @nocollapse */ DividerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ DividerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DividerComponent, isStandalone: true, selector: "kirby-divider", inputs: { hasMargin: "hasMargin" }, ngImport: i0, template: "<hr [class.no-margin]=\"!hasMargin\" />\n", styles: [":host-context(kirby-card),:host-context(.kirby-color-brightness-white){--kirby-divider-color: var(--kirby-background-color)}:host-context(.kirby-color-brightness-light){--kirby-divider-color: var(--kirby-medium)}hr{margin-top:8px;margin-bottom:8px;border:0;border-top:1px solid var(--kirby-divider-color, var(--kirby-medium))}hr.no-margin{margin-top:0;margin-bottom:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+/** @nocollapse */ DividerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DividerComponent, isStandalone: true, selector: "kirby-divider", inputs: { hasMargin: "hasMargin" }, ngImport: i0, template: "<hr [class.no-margin]=\"!hasMargin\" />\n", styles: [":host-context(kirby-card),:host-context(.kirby-color-brightness-white){--kirby-divider-color: var(--kirby-background-color)}:host-context(.kirby-color-brightness-light){--kirby-divider-color: var(--kirby-medium)}hr{margin-top:8px;margin-bottom:8px;border:0;border-top:1px solid var(--kirby-divider-color, var(--kirby-medium))}hr.no-margin{margin-top:0;margin-bottom:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DividerComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'kirby-divider', changeDetection: ChangeDetectionStrategy.OnPush, template: "<hr [class.no-margin]=\"!hasMargin\" />\n", styles: [":host-context(kirby-card),:host-context(.kirby-color-brightness-white){--kirby-divider-color: var(--kirby-background-color)}:host-context(.kirby-color-brightness-light){--kirby-divider-color: var(--kirby-medium)}hr{margin-top:8px;margin-bottom:8px;border:0;border-top:1px solid var(--kirby-divider-color, var(--kirby-medium))}hr.no-margin{margin-top:0;margin-bottom:0}\n"] }]
+            args: [{ standalone: true, imports: [CommonModule], selector: 'kirby-divider', changeDetection: ChangeDetectionStrategy.OnPush, template: "<hr [class.no-margin]=\"!hasMargin\" />\n", styles: [":host-context(kirby-card),:host-context(.kirby-color-brightness-white){--kirby-divider-color: var(--kirby-background-color)}:host-context(.kirby-color-brightness-light){--kirby-divider-color: var(--kirby-medium)}hr{margin-top:8px;margin-bottom:8px;border:0;border-top:1px solid var(--kirby-divider-color, var(--kirby-medium))}hr.no-margin{margin-top:0;margin-bottom:0}\n"] }]
         }], propDecorators: { hasMargin: [{
                 type: Input
             }] } });

package/fesm2020/kirbydesign-designsystem-divider.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"kirbydesign-designsystem-divider.mjs","sources":["../../../../libs/designsystem/divider/src/divider.component.ts","../../../../libs/designsystem/divider/src/divider.component.html","../../../../libs/designsystem/divider/src/kirbydesign-designsystem-divider.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Input } from '@angular/core';\n\n@Component({\n  standalone: true,\n  selector: 'kirby-divider',\n  templateUrl: './divider.component.html',\n  styleUrls: ['./divider.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DividerComponent {\n  @Input()\n  hasMargin: boolean;\n}\n","<hr [class.no-margin]=\"!hasMargin\" />\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;MASa,gBAAgB,CAAA;;gIAAhB,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAhB,mBAAA,gBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,gBAAgB,6GCT7B,2CACA,EAAA,MAAA,EAAA,CAAA,oXAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;2FDQa,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAP5B,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,UAAA,EAAA,IAAI,EACN,QAAA,EAAA,eAAe,EAGR,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,2CAAA,EAAA,MAAA,EAAA,CAAA,oXAAA,CAAA,EAAA,CAAA;8BAI/C,SAAS,EAAA,CAAA;sBADR,KAAK;;;AEVR;;AAEG;;;;"}
+{"version":3,"file":"kirbydesign-designsystem-divider.mjs","sources":["../../../../libs/designsystem/divider/src/divider.component.ts","../../../../libs/designsystem/divider/src/divider.component.html","../../../../libs/designsystem/divider/src/kirbydesign-designsystem-divider.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core';\n\n@Component({\n  standalone: true,\n  imports: [CommonModule],\n  selector: 'kirby-divider',\n  templateUrl: './divider.component.html',\n  styleUrls: ['./divider.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DividerComponent {\n  @Input()\n  hasMargin: boolean;\n}\n","<hr [class.no-margin]=\"!hasMargin\" />\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;MAWa,gBAAgB,CAAA;;gIAAhB,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;oHAAhB,gBAAgB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,EAAA,SAAA,EAAA,WAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECX7B,2CACA,EAAA,MAAA,EAAA,CAAA,oXAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDIY,YAAY,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;2FAMX,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAR5B,SAAS;iCACI,IAAI,EAAA,OAAA,EACP,CAAC,YAAY,CAAC,YACb,eAAe,EAAA,eAAA,EAGR,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,2CAAA,EAAA,MAAA,EAAA,CAAA,oXAAA,CAAA,EAAA,CAAA;8BAI/C,SAAS,EAAA,CAAA;sBADR,KAAK;;;AEZR;;AAEG;;;;"}

package/fesm2020/kirbydesign-designsystem-flag.mjs

@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { Component, ChangeDetectionStrategy, Input, HostBinding } from '@angular/core';
 
@@ -13,10 +14,10 @@ class FlagComponent {
 /** @nocollapse */ FlagComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: FlagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
 /** @nocollapse */ FlagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: FlagComponent, isStandalone: true, selector: "kirby-flag", inputs: { size: "size", themeColor: "themeColor" }, host: { properties: { "class": "this._cssClass" } }, ngImport: i0, template: `
     <ng-content></ng-content>
-  `, isInline: true, styles: [":host{display:inline-block;background-color:var(--kirby-flag-background-color, transparent);color:var(--kirby-flag-color, var(--kirby-white-contrast));border:1px solid var(--kirby-flag-border-color, var(--kirby-medium));border-radius:4px;font-size:16px;padding:2px 8px;font-weight:500;line-height:1.375}:host.sm{font-size:14px;line-height:1.2857142857}:host.xs{font-size:12px;line-height:1.1666666667;padding-left:4px;padding-right:4px}:host(.success){--kirby-flag-background-color: var(--kirby-success);--kirby-flag-color: var(--kirby-success-contrast);--kirby-flag-border-color: var(--kirby-success)}:host(.warning){--kirby-flag-background-color: var(--kirby-warning);--kirby-flag-color: var(--kirby-warning-contrast);--kirby-flag-border-color: var(--kirby-warning)}:host(.semi-light){--kirby-flag-background-color: var(--kirby-semi-light);--kirby-flag-color: var(--kirby-semi-light-contrast);--kirby-flag-border-color: var(--kirby-semi-light)}:host(.danger){--kirby-flag-background-color: #ff878a;--kirby-flag-color: #1c1c1c;--kirby-flag-border-color: #ff878a}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:inline-block;background-color:var(--kirby-flag-background-color, transparent);color:var(--kirby-flag-color, var(--kirby-white-contrast));border:1px solid var(--kirby-flag-border-color, var(--kirby-medium));border-radius:4px;font-size:16px;padding:2px 8px;font-weight:500;line-height:1.375}:host.sm{font-size:14px;line-height:1.2857142857}:host.xs{font-size:12px;line-height:1.1666666667;padding-left:4px;padding-right:4px}:host(.success){--kirby-flag-background-color: var(--kirby-success);--kirby-flag-color: var(--kirby-success-contrast);--kirby-flag-border-color: var(--kirby-success)}:host(.warning){--kirby-flag-background-color: var(--kirby-warning);--kirby-flag-color: var(--kirby-warning-contrast);--kirby-flag-border-color: var(--kirby-warning)}:host(.semi-light){--kirby-flag-background-color: var(--kirby-semi-light);--kirby-flag-color: var(--kirby-semi-light-contrast);--kirby-flag-border-color: var(--kirby-semi-light)}:host(.danger){--kirby-flag-background-color: #ff878a;--kirby-flag-color: #1c1c1c;--kirby-flag-border-color: #ff878a}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: FlagComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'kirby-flag', template: `
+            args: [{ standalone: true, imports: [CommonModule], selector: 'kirby-flag', template: `
     <ng-content></ng-content>
   `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-block;background-color:var(--kirby-flag-background-color, transparent);color:var(--kirby-flag-color, var(--kirby-white-contrast));border:1px solid var(--kirby-flag-border-color, var(--kirby-medium));border-radius:4px;font-size:16px;padding:2px 8px;font-weight:500;line-height:1.375}:host.sm{font-size:14px;line-height:1.2857142857}:host.xs{font-size:12px;line-height:1.1666666667;padding-left:4px;padding-right:4px}:host(.success){--kirby-flag-background-color: var(--kirby-success);--kirby-flag-color: var(--kirby-success-contrast);--kirby-flag-border-color: var(--kirby-success)}:host(.warning){--kirby-flag-background-color: var(--kirby-warning);--kirby-flag-color: var(--kirby-warning-contrast);--kirby-flag-border-color: var(--kirby-warning)}:host(.semi-light){--kirby-flag-background-color: var(--kirby-semi-light);--kirby-flag-color: var(--kirby-semi-light-contrast);--kirby-flag-border-color: var(--kirby-semi-light)}:host(.danger){--kirby-flag-background-color: #ff878a;--kirby-flag-color: #1c1c1c;--kirby-flag-border-color: #ff878a}\n"] }]
         }], propDecorators: { size: [{

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

@@ -1 +1 @@
-{"version":3,"file":"kirbydesign-designsystem-flag.mjs","sources":["../../../../libs/designsystem/flag/src/flag.component.ts","../../../../libs/designsystem/flag/src/kirbydesign-designsystem-flag.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';\n\n@Component({\n  standalone: true,\n  selector: 'kirby-flag',\n  template: `\n    <ng-content></ng-content>\n  `,\n  styleUrls: ['./flag.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class FlagComponent {\n  @Input() size: 'xs' | 'sm' | 'md' = 'md';\n  @Input() themeColor: 'success' | 'warning' | 'danger' | 'semi-light' | 'transparent' =\n    'transparent';\n\n  @HostBinding('class')\n  get _cssClass() {\n    return [this.themeColor, this.size];\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;MAWa,aAAa,CAAA;AAT1B,IAAA,WAAA,GAAA;QAUW,IAAI,CAAA,IAAA,GAAuB,IAAI,CAAC;QAChC,IAAU,CAAA,UAAA,GACjB,aAAa,CAAC;AAMjB,KAAA;AAJC,IAAA,IACI,SAAS,GAAA;QACX,OAAO,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;KACrC;;6HARU,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAb,mBAAA,aAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,aAAa,EANd,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,UAAA,EAAA,YAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,gBAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA;;AAET,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,2iCAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;2FAIU,aAAa,EAAA,UAAA,EAAA,CAAA;kBATzB,SAAS;iCACI,IAAI,EAAA,QAAA,EACN,YAAY,EACZ,QAAA,EAAA,CAAA;;GAET,EAEgB,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,MAAA,EAAA,CAAA,2iCAAA,CAAA,EAAA,CAAA;8BAGtC,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBACG,UAAU,EAAA,CAAA;sBAAlB,KAAK;gBAIF,SAAS,EAAA,CAAA;sBADZ,WAAW;uBAAC,OAAO,CAAA;;;AChBtB;;AAEG;;;;"}
+{"version":3,"file":"kirbydesign-designsystem-flag.mjs","sources":["../../../../libs/designsystem/flag/src/flag.component.ts","../../../../libs/designsystem/flag/src/kirbydesign-designsystem-flag.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';\n\n@Component({\n  standalone: true,\n  imports: [CommonModule],\n  selector: 'kirby-flag',\n  template: `\n    <ng-content></ng-content>\n  `,\n  styleUrls: ['./flag.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class FlagComponent {\n  @Input() size: 'xs' | 'sm' | 'md' = 'md';\n  @Input() themeColor: 'success' | 'warning' | 'danger' | 'semi-light' | 'transparent' =\n    'transparent';\n\n  @HostBinding('class')\n  get _cssClass() {\n    return [this.themeColor, this.size];\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;MAaa,aAAa,CAAA;AAV1B,IAAA,WAAA,GAAA;QAWW,IAAI,CAAA,IAAA,GAAuB,IAAI,CAAC;QAChC,IAAU,CAAA,UAAA,GACjB,aAAa,CAAC;AAMjB,KAAA;AAJC,IAAA,IACI,SAAS,GAAA;QACX,OAAO,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;KACrC;;6HARU,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAb,mBAAA,aAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,aAAa,EANd,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,UAAA,EAAA,YAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,gBAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA;;AAET,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,2iCAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAJS,YAAY,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;2FAQX,aAAa,EAAA,UAAA,EAAA,CAAA;kBAVzB,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,UAAA,EAAA,IAAI,WACP,CAAC,YAAY,CAAC,EAAA,QAAA,EACb,YAAY,EACZ,QAAA,EAAA,CAAA;;GAET,EAEgB,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,MAAA,EAAA,CAAA,2iCAAA,CAAA,EAAA,CAAA;8BAGtC,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBACG,UAAU,EAAA,CAAA;sBAAlB,KAAK;gBAIF,SAAS,EAAA,CAAA;sBADZ,WAAW;uBAAC,OAAO,CAAA;;;AClBtB;;AAEG;;;;"}