@kirbydesign/designsystem 12.0.0-dev-67d5287 → 12.0.0-dev-286cdc0

package/fesm2022/kirbydesign-designsystem-shared-floating.mjs

@@ -1,6 +1,6 @@
 import * as i0 from "@angular/core";
-import { Directive, EventEmitter, HostListener, Input, Output } from "@angular/core";
-import { autoPlacement, autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
+import { Directive, EventEmitter, HostListener, Input, Output, RendererStyleFlags2 } from "@angular/core";
+import { autoPlacement, autoUpdate, computePosition, flip, offset, shift, size } from "@floating-ui/dom";
 import { DesignTokenHelper } from "@kirbydesign/core";
 import { from } from "rxjs";
 import * as i1 from "@kirbydesign/designsystem/shared/portal";
@@ -130,6 +130,7 @@ var FloatingDirective = class FloatingDirective {
 		this.tearDownDocumentClickEventHandling();
 		this.renderer.setStyle(this.elementRef.nativeElement, "display", "none");
 		this.isShown = false;
+		this.renderer.removeStyle(this.elementRef.nativeElement, "--kirby-floating-available-height", RendererStyleFlags2.DashCase);
 		this.displayChanged.emit(this.isShown);
 	}
 	toggleShow() {
@@ -157,9 +158,17 @@ var FloatingDirective = class FloatingDirective {
 	}
 	getMiddlewareConfig() {
 		const middleware = [];
+		const padding = parseInt(DesignTokenHelper.size("s"));
 		middleware.push(offset(this.offset));
-		middleware.push(flip());
-		if (this.shift) middleware.push(shift({ padding: parseInt(DesignTokenHelper.size("s")) }));
+		middleware.push(flip({ padding }));
+		if (this.shift) middleware.push(shift({ padding }));
+		middleware.push(size({
+			padding,
+			apply: ({ availableHeight, elements }) => {
+				if (!this.isShown) return;
+				this.renderer.setStyle(elements.floating, "--kirby-floating-available-height", `${Math.max(0, availableHeight)}px`, RendererStyleFlags2.DashCase);
+			}
+		}));
 		if (this.autoPlacement) middleware.push(autoPlacement());
 		return middleware;
 	}
@@ -239,7 +248,7 @@ var FloatingDirective = class FloatingDirective {
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
 			minVersion: "12.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			ngImport: i0,
 			type: FloatingDirective,
 			deps: [
@@ -253,7 +262,7 @@ var FloatingDirective = class FloatingDirective {
 	static {
 		this.ɵdir = i0.ɵɵngDeclareDirective({
 			minVersion: "14.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			type: FloatingDirective,
 			isStandalone: true,
 			selector: "[kirbyFloating]",
@@ -282,7 +291,7 @@ var FloatingDirective = class FloatingDirective {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: FloatingDirective,
 	decorators: [{

package/fesm2022/kirbydesign-designsystem-shared-floating.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"kirbydesign-designsystem-shared-floating.mjs","names":[],"sources":["../../shared/floating/src/floating.directive.ts"],"sourcesContent":["import {\n  Directive,\n  ElementRef,\n  EventEmitter,\n  HostListener,\n  Input,\n  OnDestroy,\n  OnInit,\n  Output,\n  Renderer2,\n} from '@angular/core';\nimport {\n  autoPlacement,\n  autoUpdate,\n  computePosition,\n  ComputePositionConfig,\n  flip,\n  Middleware,\n  offset,\n  Placement,\n  shift,\n  Strategy,\n} from '@floating-ui/dom';\nimport { DesignTokenHelper } from '@kirbydesign/core';\nimport { from } from 'rxjs';\nimport { PortalDirective } from '@kirbydesign/designsystem/shared/portal';\nimport { EventListenerDisposeFn } from '@kirbydesign/designsystem/types';\n\nexport type TriggerEvent = 'hover' | 'click' | 'focus';\n\nexport enum FloatingOffset {\n  none = 0,\n  small = 4,\n  medium = 8,\n}\n\nexport enum OutletSelector {\n  tag = 'tag',\n  id = 'id',\n  class = 'class',\n  name = 'name',\n}\n\nexport interface PortalOutletConfig {\n  selector: OutletSelector;\n  value: string;\n}\n\ninterface EventMethods {\n  event: string;\n  method: () => void;\n}\n\n/**\n * @summary FloatingDirective is a utility that lets you declarative anchor \"popup\" containers to another element.\n *\n * Uses floating-ui, with this directive wraps the functionality: https://floating-ui.com/docs/getting-started\n *\n * Uses PortalDirective to enable functionality for portaling the floated content. This should be used when needed\n * and not as the default option.\n */\n@Directive({\n  selector: '[kirbyFloating]',\n  providers: [PortalDirective],\n  hostDirectives: [PortalDirective],\n  standalone: true,\n})\nexport class FloatingDirective implements OnInit, OnDestroy {\n  /**\n   * Reference to the element for which the host should anchor to\n   * */\n  @Input() public set reference(ref: ElementRef<HTMLElement> | undefined) {\n    this.tearDownReferenceElementEventHandling();\n    this._reference = ref;\n    this.setupEventHandling();\n    if (this.isShown) {\n      this.autoUpdatePosition();\n    }\n  }\n\n  public get reference(): ElementRef<HTMLElement> | undefined {\n    return this._reference;\n  }\n\n  /**\n   * How the host should be placed relative to the reference. Can be affected by middleware\n   * */\n  @Input() public set placement(placement: Placement) {\n    this._placement = placement;\n    if (this.isShown) {\n      this.updateHostElementPosition();\n    }\n  }\n\n  public get placement() {\n    return this._placement;\n  }\n\n  /**\n   * The strategy for how the host should be positioned.\n   * */\n  @Input() public set strategy(strategy: Strategy) {\n    this._strategy = strategy;\n    if (this.isShown) {\n      this.updateHostElementPosition();\n    }\n  }\n\n  public get strategy(): Strategy {\n    return this._strategy;\n  }\n\n  /**\n   * Defines when the host should be displayed/hidden, i.e. click will attach a click listener to the reference\n   * that makes the host toggle display. Supports multiple triggers, to provide functionality for combinations\n   * like click/focus.\n   * */\n  @Input() public set triggers(eventTriggers: Array<TriggerEvent>) {\n    this._triggers = eventTriggers;\n    this.tearDownReferenceElementEventHandling();\n    this.setupEventHandling();\n  }\n\n  public get triggers(): Array<TriggerEvent> {\n    return this._triggers;\n  }\n\n  /**\n   * The HTMLElement for which the content should portal into.\n   * Providing an outlet enables the portal, if nothing is provided, the provided strategy is used.\n   * This should be used when there's issues with the stacking context, and not as a default option.\n   * */\n  @Input() public set DOMPortalOutlet(outlet: HTMLElement | undefined) {\n    this._providedPortalOutlet = outlet;\n    this.portalDirective.outlet =\n      this.DOMPortalOutlet ?? this.getOutletElement(this.portalOutletConfig);\n  }\n\n  public get DOMPortalOutlet(): HTMLElement | undefined {\n    return this._providedPortalOutlet;\n  }\n\n  /**\n   * Defines how to automatically find and assign DOMPortalOutlet if none is provided in DOMPortalOutlet.\n   * If nothing is provided here and in DOMPortalOutlet, the provided strategy is used\n   * */\n  @Input() public set portalOutletConfig(config: PortalOutletConfig | undefined) {\n    this._portalOutletConfig = config;\n\n    if (!this.DOMPortalOutlet) {\n      this.portalDirective.outlet = this.getOutletElement(config);\n    }\n  }\n\n  public get portalOutletConfig(): PortalOutletConfig | undefined {\n    return this._portalOutletConfig;\n  }\n\n  /**\n   * Prevent host from being toggled if set.\n   * */\n  @Input() public isDisabled: boolean = false;\n\n  /**\n   * Displaces the floating element from its core placement along the specified axes.\n   * */\n  @Input() public offset: FloatingOffset = FloatingOffset.none;\n\n  /**\n   * Moves the floating element along the specified axes in order to keep it in view.\n   * This does not always work as expected, so don't \"just\" set it.\n   * */\n  @Input() public shift: boolean = false;\n\n  /**\n   * Chooses the placement that has the most space available automatically.\n   * */\n  @Input() public autoPlacement: boolean = false;\n\n  /**\n   * Enables hiding the host by events. See variable names.\n   * */\n  @Input() public closeOnSelect: boolean = true;\n  @Input() public closeOnEscapeKey: boolean = true;\n  @Input() public closeOnBackdrop: boolean = true;\n\n  /**\n   * Enables the option to be notified when the host changes display. The new display value is provided.\n   * */\n  @Output() public displayChanged: EventEmitter<boolean> = new EventEmitter<boolean>();\n\n  @HostListener('document:keydown.escape')\n  public onEscapeKeyPressed(): void {\n    if (this.closeOnEscapeKey) {\n      this.hide();\n    }\n  }\n\n  private _placement: Placement = 'bottom-start';\n\n  private _strategy: Strategy = 'absolute';\n\n  private _providedPortalOutlet: HTMLElement | undefined;\n\n  private _portalOutletConfig: PortalOutletConfig | undefined;\n\n  private _triggers: Array<TriggerEvent> = ['click'];\n\n  private _reference: ElementRef<HTMLElement> | undefined;\n\n  private autoUpdaterRef: () => void;\n  private isShown: boolean = false;\n  private disposeTriggerEventListeners: EventListenerDisposeFn[] = [];\n  private disposeDocumentClickListener: EventListenerDisposeFn;\n  private disposeHostClickListener: EventListenerDisposeFn;\n  private triggerEventMap: Map<TriggerEvent, EventMethods[]> = new Map([\n    ['click', [{ event: 'click', method: this.toggleShow.bind(this) }]],\n    [\n      'hover',\n      [\n        { event: 'mouseenter', method: this.show.bind(this) },\n        { event: 'mouseleave', method: this.hide.bind(this) },\n      ],\n    ],\n    [\n      'focus',\n      [\n        { event: 'focus', method: this.show.bind(this) },\n        { event: 'blur', method: this.hide.bind(this) },\n      ],\n    ],\n  ]);\n\n  private HTMLElements: {\n    [key in OutletSelector | 'default']: (value?: string) => Array<Element> | null;\n  } = {\n    id: (value) => Array.of(document.getElementById(value)),\n    class: (value) => Array.from(document.getElementsByClassName(value)),\n    name: (value) => Array.from(document.getElementsByName(value)),\n    tag: (value) => Array.from(document.getElementsByTagName(value)),\n    default: () => null,\n  };\n\n  public constructor(\n    private elementRef: ElementRef<HTMLElement>,\n    private renderer: Renderer2,\n    private portalDirective: PortalDirective\n  ) {}\n\n  public ngOnInit(): void {\n    this.addFloatStylingToHostElement();\n  }\n\n  /* Should be accessible for programmatically setting display */\n  public show(): void {\n    if (this.isDisabled) {\n      return;\n    }\n\n    this.attachDocumentClickEventHandler();\n    this.attachHostClickEventHandler();\n    this.renderer.setStyle(this.elementRef.nativeElement, 'display', 'block');\n    this.isShown = true;\n    this.autoUpdatePosition();\n    this.displayChanged.emit(this.isShown);\n  }\n\n  /* Should be accessible for programmatically setting display */\n  public hide(): void {\n    if (this.isDisabled || !this.isShown) {\n      return;\n    }\n\n    this.removeAutoUpdaterRef();\n    this.tearDownDocumentClickEventHandling();\n    this.renderer.setStyle(this.elementRef.nativeElement, 'display', 'none');\n    this.isShown = false;\n    this.displayChanged.emit(this.isShown);\n  }\n\n  /* Should be accessible for programmatically setting display */\n  public toggleShow(): void {\n    if (this.isShown) {\n      this.hide();\n    } else {\n      this.show();\n    }\n  }\n\n  private addFloatStylingToHostElement(): void {\n    this.renderer.setStyle(this.elementRef.nativeElement, 'left', `0px`);\n    this.renderer.setStyle(this.elementRef.nativeElement, 'top', `0px`);\n    this.renderer.setStyle(this.elementRef.nativeElement, 'position', this.strategy);\n    this.renderer.setStyle(\n      this.elementRef.nativeElement,\n      'z-index',\n      DesignTokenHelper.zLayer('popover')\n    );\n    this.setDisplayStyling();\n  }\n\n  private setDisplayStyling(): void {\n    this.renderer.setStyle(\n      this.elementRef.nativeElement,\n      'display',\n      this.isShown ? `block` : `none`\n    );\n  }\n\n  private updateHostElementPosition(): void {\n    if (!this.reference) {\n      return;\n    }\n\n    const config: ComputePositionConfig = {\n      placement: this.placement,\n      middleware: this.getMiddlewareConfig(),\n      strategy: this.strategy,\n    } as ComputePositionConfig;\n\n    from(\n      computePosition(this.reference?.nativeElement, this.elementRef.nativeElement, config)\n    ).subscribe(({ x, y }) => this.setPositionStylingOnHostElement(x, y));\n  }\n\n  private getMiddlewareConfig(): Array<Middleware | null | undefined | false> {\n    const middleware: Array<Middleware | null | undefined | false> = [];\n    middleware.push(offset(this.offset));\n    middleware.push(flip());\n\n    if (this.shift) {\n      middleware.push(shift({ padding: parseInt(DesignTokenHelper.size('s')) }));\n    }\n\n    if (this.autoPlacement) {\n      middleware.push(autoPlacement());\n    }\n\n    return middleware;\n  }\n\n  private autoUpdatePosition(): void {\n    this.removeAutoUpdaterRef();\n\n    if (!this.reference) {\n      return;\n    }\n\n    this.autoUpdaterRef = autoUpdate(\n      this.reference?.nativeElement,\n      this.elementRef.nativeElement,\n      this.updateHostElementPosition.bind(this)\n    );\n  }\n\n  private setPositionStylingOnHostElement(xPosition: number, yPosition: number): void {\n    this.renderer.setStyle(this.elementRef.nativeElement, 'left', `${xPosition}px`);\n    this.renderer.setStyle(this.elementRef.nativeElement, 'top', `${yPosition}px`);\n    this.setDisplayStyling();\n  }\n\n  private setupEventHandling(): void {\n    if (!this.reference || !this.triggers) {\n      return;\n    }\n\n    this.triggers.forEach((trigger: TriggerEvent) =>\n      this.attachTriggerEventToReferenceElement(trigger)\n    );\n  }\n\n  private attachDocumentClickEventHandler(): void {\n    if (this.disposeDocumentClickListener) {\n      return;\n    }\n\n    this.disposeDocumentClickListener = this.renderer.listen('document', 'mousedown', (event) =>\n      this.handleClickOutsideHostElement(event)\n    );\n  }\n\n  private attachHostClickEventHandler(): void {\n    if (this.disposeHostClickListener || !this.closeOnSelect) {\n      return;\n    }\n\n    this.disposeHostClickListener = this.renderer.listen(\n      this.elementRef.nativeElement,\n      'click',\n      () => this.handleClickInsideHostElement()\n    );\n  }\n\n  private attachTriggerEventToReferenceElement(trigger: TriggerEvent): void {\n    const events: EventMethods[] | undefined = this.triggerEventMap.get(trigger);\n\n    if (!events) {\n      throw new Error(`${trigger} is missing event definition(s)`);\n    }\n\n    events.forEach((event: EventMethods) => {\n      const disposeTriggerEventListener: EventListenerDisposeFn = this.renderer.listen(\n        this.reference?.nativeElement,\n        event.event,\n        event.method\n      );\n      this.disposeTriggerEventListeners.push(disposeTriggerEventListener);\n    });\n  }\n\n  private handleClickInsideHostElement(): void {\n    if (this.closeOnSelect) {\n      this.hide();\n    }\n  }\n\n  private handleClickOutsideHostElement(event: Event): void {\n    if (event.target instanceof Node) {\n      const clickedOnHost: boolean = this.elementRef.nativeElement.contains(event.target);\n      if (clickedOnHost) return;\n\n      const clickedOnReferenceWithClickTriggerEnabled: boolean =\n        this.reference?.nativeElement.contains(event.target) && this.triggers.includes('click');\n\n      if (this.closeOnBackdrop && !clickedOnReferenceWithClickTriggerEnabled) {\n        this.hide();\n      }\n    }\n  }\n\n  private getOutletElement(config: PortalOutletConfig | undefined): HTMLElement | null {\n    if (!config || !config.selector || !config.value) {\n      return null;\n    }\n\n    const elements: Array<Element> | null = this.getHTMLElements(config);\n\n    if (!elements || elements.length === 0) {\n      throw Error(`Could not locate HTMLElement for ${config.selector}. Did you misspell it?`);\n    }\n\n    if (elements.length > 1) {\n      throw Error(\n        `Multiple HTMLElements found for ${config.selector}.\n         This can lead to unintended behaviours. Provide an unique outlet`\n      );\n    }\n\n    return elements[0] as HTMLElement;\n  }\n\n  private getHTMLElements(config: PortalOutletConfig | undefined): Array<Element> | null {\n    return (\n      this.HTMLElements[config.selector](config.value) || this.HTMLElements['default'](config.value)\n    );\n  }\n\n  private tearDownReferenceElementEventHandling(): void {\n    this.disposeTriggerEventListeners.forEach((disposeTriggerEventListener) =>\n      disposeTriggerEventListener?.()\n    );\n    this.disposeTriggerEventListeners = [];\n  }\n\n  private tearDownDocumentClickEventHandling(): void {\n    if (this.disposeDocumentClickListener) {\n      this.disposeDocumentClickListener();\n      this.disposeDocumentClickListener = null;\n    }\n\n    if (this.disposeHostClickListener) {\n      this.disposeHostClickListener();\n      this.disposeHostClickListener = null;\n    }\n  }\n\n  private removeAutoUpdaterRef(): void {\n    if (this.autoUpdaterRef) {\n      this.autoUpdaterRef();\n    }\n  }\n\n  public ngOnDestroy() {\n    this.tearDownDocumentClickEventHandling();\n    this.tearDownReferenceElementEventHandling();\n    this.removeAutoUpdaterRef();\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"kirbydesign-designsystem-shared-floating.mjs","names":[],"sources":["../../shared/floating/src/floating.directive.ts"],"sourcesContent":["import {\n  Directive,\n  ElementRef,\n  EventEmitter,\n  HostListener,\n  Input,\n  OnDestroy,\n  OnInit,\n  Output,\n  Renderer2,\n  RendererStyleFlags2,\n} from '@angular/core';\nimport {\n  autoPlacement,\n  autoUpdate,\n  computePosition,\n  ComputePositionConfig,\n  flip,\n  Middleware,\n  offset,\n  Placement,\n  shift,\n  size,\n  Strategy,\n} from '@floating-ui/dom';\nimport { DesignTokenHelper } from '@kirbydesign/core';\nimport { from } from 'rxjs';\nimport { PortalDirective } from '@kirbydesign/designsystem/shared/portal';\nimport { EventListenerDisposeFn } from '@kirbydesign/designsystem/types';\n\nexport type TriggerEvent = 'hover' | 'click' | 'focus';\n\nexport enum FloatingOffset {\n  none = 0,\n  small = 4,\n  medium = 8,\n}\n\nexport enum OutletSelector {\n  tag = 'tag',\n  id = 'id',\n  class = 'class',\n  name = 'name',\n}\n\nexport interface PortalOutletConfig {\n  selector: OutletSelector;\n  value: string;\n}\n\ninterface EventMethods {\n  event: string;\n  method: () => void;\n}\n\n/**\n * @summary FloatingDirective is a utility that lets you declarative anchor \"popup\" containers to another element.\n *\n * Uses floating-ui, with this directive wraps the functionality: https://floating-ui.com/docs/getting-started\n *\n * Uses PortalDirective to enable functionality for portaling the floated content. This should be used when needed\n * and not as the default option.\n */\n@Directive({\n  selector: '[kirbyFloating]',\n  providers: [PortalDirective],\n  hostDirectives: [PortalDirective],\n  standalone: true,\n})\nexport class FloatingDirective implements OnInit, OnDestroy {\n  /**\n   * Reference to the element for which the host should anchor to\n   * */\n  @Input() public set reference(ref: ElementRef<HTMLElement> | undefined) {\n    this.tearDownReferenceElementEventHandling();\n    this._reference = ref;\n    this.setupEventHandling();\n    if (this.isShown) {\n      this.autoUpdatePosition();\n    }\n  }\n\n  public get reference(): ElementRef<HTMLElement> | undefined {\n    return this._reference;\n  }\n\n  /**\n   * How the host should be placed relative to the reference. Can be affected by middleware\n   * */\n  @Input() public set placement(placement: Placement) {\n    this._placement = placement;\n    if (this.isShown) {\n      this.updateHostElementPosition();\n    }\n  }\n\n  public get placement() {\n    return this._placement;\n  }\n\n  /**\n   * The strategy for how the host should be positioned.\n   * */\n  @Input() public set strategy(strategy: Strategy) {\n    this._strategy = strategy;\n    if (this.isShown) {\n      this.updateHostElementPosition();\n    }\n  }\n\n  public get strategy(): Strategy {\n    return this._strategy;\n  }\n\n  /**\n   * Defines when the host should be displayed/hidden, i.e. click will attach a click listener to the reference\n   * that makes the host toggle display. Supports multiple triggers, to provide functionality for combinations\n   * like click/focus.\n   * */\n  @Input() public set triggers(eventTriggers: Array<TriggerEvent>) {\n    this._triggers = eventTriggers;\n    this.tearDownReferenceElementEventHandling();\n    this.setupEventHandling();\n  }\n\n  public get triggers(): Array<TriggerEvent> {\n    return this._triggers;\n  }\n\n  /**\n   * The HTMLElement for which the content should portal into.\n   * Providing an outlet enables the portal, if nothing is provided, the provided strategy is used.\n   * This should be used when there's issues with the stacking context, and not as a default option.\n   * */\n  @Input() public set DOMPortalOutlet(outlet: HTMLElement | undefined) {\n    this._providedPortalOutlet = outlet;\n    this.portalDirective.outlet =\n      this.DOMPortalOutlet ?? this.getOutletElement(this.portalOutletConfig);\n  }\n\n  public get DOMPortalOutlet(): HTMLElement | undefined {\n    return this._providedPortalOutlet;\n  }\n\n  /**\n   * Defines how to automatically find and assign DOMPortalOutlet if none is provided in DOMPortalOutlet.\n   * If nothing is provided here and in DOMPortalOutlet, the provided strategy is used\n   * */\n  @Input() public set portalOutletConfig(config: PortalOutletConfig | undefined) {\n    this._portalOutletConfig = config;\n\n    if (!this.DOMPortalOutlet) {\n      this.portalDirective.outlet = this.getOutletElement(config);\n    }\n  }\n\n  public get portalOutletConfig(): PortalOutletConfig | undefined {\n    return this._portalOutletConfig;\n  }\n\n  /**\n   * Prevent host from being toggled if set.\n   * */\n  @Input() public isDisabled: boolean = false;\n\n  /**\n   * Displaces the floating element from its core placement along the specified axes.\n   * */\n  @Input() public offset: FloatingOffset = FloatingOffset.none;\n\n  /**\n   * Moves the floating element along the specified axes in order to keep it in view.\n   * This does not always work as expected, so don't \"just\" set it.\n   * */\n  @Input() public shift: boolean = false;\n\n  /**\n   * Chooses the placement that has the most space available automatically.\n   * */\n  @Input() public autoPlacement: boolean = false;\n\n  /**\n   * Enables hiding the host by events. See variable names.\n   * */\n  @Input() public closeOnSelect: boolean = true;\n  @Input() public closeOnEscapeKey: boolean = true;\n  @Input() public closeOnBackdrop: boolean = true;\n\n  /**\n   * Enables the option to be notified when the host changes display. The new display value is provided.\n   * */\n  @Output() public displayChanged: EventEmitter<boolean> = new EventEmitter<boolean>();\n\n  @HostListener('document:keydown.escape')\n  public onEscapeKeyPressed(): void {\n    if (this.closeOnEscapeKey) {\n      this.hide();\n    }\n  }\n\n  private _placement: Placement = 'bottom-start';\n\n  private _strategy: Strategy = 'absolute';\n\n  private _providedPortalOutlet: HTMLElement | undefined;\n\n  private _portalOutletConfig: PortalOutletConfig | undefined;\n\n  private _triggers: Array<TriggerEvent> = ['click'];\n\n  private _reference: ElementRef<HTMLElement> | undefined;\n\n  private autoUpdaterRef: () => void;\n  private isShown: boolean = false;\n  private disposeTriggerEventListeners: EventListenerDisposeFn[] = [];\n  private disposeDocumentClickListener: EventListenerDisposeFn;\n  private disposeHostClickListener: EventListenerDisposeFn;\n  private triggerEventMap: Map<TriggerEvent, EventMethods[]> = new Map([\n    ['click', [{ event: 'click', method: this.toggleShow.bind(this) }]],\n    [\n      'hover',\n      [\n        { event: 'mouseenter', method: this.show.bind(this) },\n        { event: 'mouseleave', method: this.hide.bind(this) },\n      ],\n    ],\n    [\n      'focus',\n      [\n        { event: 'focus', method: this.show.bind(this) },\n        { event: 'blur', method: this.hide.bind(this) },\n      ],\n    ],\n  ]);\n\n  private HTMLElements: {\n    [key in OutletSelector | 'default']: (value?: string) => Array<Element> | null;\n  } = {\n    id: (value) => Array.of(document.getElementById(value)),\n    class: (value) => Array.from(document.getElementsByClassName(value)),\n    name: (value) => Array.from(document.getElementsByName(value)),\n    tag: (value) => Array.from(document.getElementsByTagName(value)),\n    default: () => null,\n  };\n\n  public constructor(\n    private elementRef: ElementRef<HTMLElement>,\n    private renderer: Renderer2,\n    private portalDirective: PortalDirective\n  ) {}\n\n  public ngOnInit(): void {\n    this.addFloatStylingToHostElement();\n  }\n\n  /* Should be accessible for programmatically setting display */\n  public show(): void {\n    if (this.isDisabled) {\n      return;\n    }\n\n    this.attachDocumentClickEventHandler();\n    this.attachHostClickEventHandler();\n    this.renderer.setStyle(this.elementRef.nativeElement, 'display', 'block');\n    this.isShown = true;\n    this.autoUpdatePosition();\n    this.displayChanged.emit(this.isShown);\n  }\n\n  /* Should be accessible for programmatically setting display */\n  public hide(): void {\n    if (this.isDisabled || !this.isShown) {\n      return;\n    }\n\n    this.removeAutoUpdaterRef();\n    this.tearDownDocumentClickEventHandling();\n    this.renderer.setStyle(this.elementRef.nativeElement, 'display', 'none');\n    this.isShown = false;\n    this.renderer.removeStyle(\n      this.elementRef.nativeElement,\n      '--kirby-floating-available-height',\n      RendererStyleFlags2.DashCase\n    );\n    this.displayChanged.emit(this.isShown);\n  }\n\n  /* Should be accessible for programmatically setting display */\n  public toggleShow(): void {\n    if (this.isShown) {\n      this.hide();\n    } else {\n      this.show();\n    }\n  }\n\n  private addFloatStylingToHostElement(): void {\n    this.renderer.setStyle(this.elementRef.nativeElement, 'left', `0px`);\n    this.renderer.setStyle(this.elementRef.nativeElement, 'top', `0px`);\n    this.renderer.setStyle(this.elementRef.nativeElement, 'position', this.strategy);\n    this.renderer.setStyle(\n      this.elementRef.nativeElement,\n      'z-index',\n      DesignTokenHelper.zLayer('popover')\n    );\n    this.setDisplayStyling();\n  }\n\n  private setDisplayStyling(): void {\n    this.renderer.setStyle(\n      this.elementRef.nativeElement,\n      'display',\n      this.isShown ? `block` : `none`\n    );\n  }\n\n  private updateHostElementPosition(): void {\n    if (!this.reference) {\n      return;\n    }\n\n    const config: ComputePositionConfig = {\n      placement: this.placement,\n      middleware: this.getMiddlewareConfig(),\n      strategy: this.strategy,\n    } as ComputePositionConfig;\n\n    from(\n      computePosition(this.reference?.nativeElement, this.elementRef.nativeElement, config)\n    ).subscribe(({ x, y }) => this.setPositionStylingOnHostElement(x, y));\n  }\n\n  private getMiddlewareConfig(): Array<Middleware | null | undefined | false> {\n    const middleware: Array<Middleware | null | undefined | false> = [];\n    const padding = parseInt(DesignTokenHelper.size('s'));\n\n    middleware.push(offset(this.offset));\n    middleware.push(flip({ padding }));\n\n    if (this.shift) {\n      middleware.push(shift({ padding }));\n    }\n\n    middleware.push(\n      size({\n        padding,\n        apply: ({ availableHeight, elements }) => {\n          if (!this.isShown) return;\n\n          this.renderer.setStyle(\n            elements.floating,\n            '--kirby-floating-available-height',\n            `${Math.max(0, availableHeight)}px`,\n            RendererStyleFlags2.DashCase\n          );\n        },\n      })\n    );\n\n    if (this.autoPlacement) {\n      middleware.push(autoPlacement());\n    }\n\n    return middleware;\n  }\n\n  private autoUpdatePosition(): void {\n    this.removeAutoUpdaterRef();\n\n    if (!this.reference) {\n      return;\n    }\n\n    this.autoUpdaterRef = autoUpdate(\n      this.reference?.nativeElement,\n      this.elementRef.nativeElement,\n      this.updateHostElementPosition.bind(this)\n    );\n  }\n\n  private setPositionStylingOnHostElement(xPosition: number, yPosition: number): void {\n    this.renderer.setStyle(this.elementRef.nativeElement, 'left', `${xPosition}px`);\n    this.renderer.setStyle(this.elementRef.nativeElement, 'top', `${yPosition}px`);\n    this.setDisplayStyling();\n  }\n\n  private setupEventHandling(): void {\n    if (!this.reference || !this.triggers) {\n      return;\n    }\n\n    this.triggers.forEach((trigger: TriggerEvent) =>\n      this.attachTriggerEventToReferenceElement(trigger)\n    );\n  }\n\n  private attachDocumentClickEventHandler(): void {\n    if (this.disposeDocumentClickListener) {\n      return;\n    }\n\n    this.disposeDocumentClickListener = this.renderer.listen('document', 'mousedown', (event) =>\n      this.handleClickOutsideHostElement(event)\n    );\n  }\n\n  private attachHostClickEventHandler(): void {\n    if (this.disposeHostClickListener || !this.closeOnSelect) {\n      return;\n    }\n\n    this.disposeHostClickListener = this.renderer.listen(\n      this.elementRef.nativeElement,\n      'click',\n      () => this.handleClickInsideHostElement()\n    );\n  }\n\n  private attachTriggerEventToReferenceElement(trigger: TriggerEvent): void {\n    const events: EventMethods[] | undefined = this.triggerEventMap.get(trigger);\n\n    if (!events) {\n      throw new Error(`${trigger} is missing event definition(s)`);\n    }\n\n    events.forEach((event: EventMethods) => {\n      const disposeTriggerEventListener: EventListenerDisposeFn = this.renderer.listen(\n        this.reference?.nativeElement,\n        event.event,\n        event.method\n      );\n      this.disposeTriggerEventListeners.push(disposeTriggerEventListener);\n    });\n  }\n\n  private handleClickInsideHostElement(): void {\n    if (this.closeOnSelect) {\n      this.hide();\n    }\n  }\n\n  private handleClickOutsideHostElement(event: Event): void {\n    if (event.target instanceof Node) {\n      const clickedOnHost: boolean = this.elementRef.nativeElement.contains(event.target);\n      if (clickedOnHost) return;\n\n      const clickedOnReferenceWithClickTriggerEnabled: boolean =\n        this.reference?.nativeElement.contains(event.target) && this.triggers.includes('click');\n\n      if (this.closeOnBackdrop && !clickedOnReferenceWithClickTriggerEnabled) {\n        this.hide();\n      }\n    }\n  }\n\n  private getOutletElement(config: PortalOutletConfig | undefined): HTMLElement | null {\n    if (!config || !config.selector || !config.value) {\n      return null;\n    }\n\n    const elements: Array<Element> | null = this.getHTMLElements(config);\n\n    if (!elements || elements.length === 0) {\n      throw Error(`Could not locate HTMLElement for ${config.selector}. Did you misspell it?`);\n    }\n\n    if (elements.length > 1) {\n      throw Error(\n        `Multiple HTMLElements found for ${config.selector}.\n         This can lead to unintended behaviours. Provide an unique outlet`\n      );\n    }\n\n    return elements[0] as HTMLElement;\n  }\n\n  private getHTMLElements(config: PortalOutletConfig | undefined): Array<Element> | null {\n    return (\n      this.HTMLElements[config.selector](config.value) || this.HTMLElements['default'](config.value)\n    );\n  }\n\n  private tearDownReferenceElementEventHandling(): void {\n    this.disposeTriggerEventListeners.forEach((disposeTriggerEventListener) =>\n      disposeTriggerEventListener?.()\n    );\n    this.disposeTriggerEventListeners = [];\n  }\n\n  private tearDownDocumentClickEventHandling(): void {\n    if (this.disposeDocumentClickListener) {\n      this.disposeDocumentClickListener();\n      this.disposeDocumentClickListener = null;\n    }\n\n    if (this.disposeHostClickListener) {\n      this.disposeHostClickListener();\n      this.disposeHostClickListener = null;\n    }\n  }\n\n  private removeAutoUpdaterRef(): void {\n    if (this.autoUpdaterRef) {\n      this.autoUpdaterRef();\n    }\n  }\n\n  public ngOnDestroy() {\n    this.tearDownDocumentClickEventHandling();\n    this.tearDownReferenceElementEventHandling();\n    this.removeAutoUpdaterRef();\n  }\n}\n"],"mappings":";;;;;;;AAgCA,IAAY;CAAZ,SAAY,gBAAc;CACxB,eAAA,eAAA,UAAA,KAAA;CACA,eAAA,eAAA,WAAA,KAAA;CACA,eAAA,eAAA,YAAA,KAAA;AACF,EAAA,CAJY,mBAAA,iBAAc,CAAA,EAAA;AAM1B,IAAY;CAAZ,SAAY,gBAAc;CACxB,eAAA,SAAA;CACA,eAAA,QAAA;CACA,eAAA,WAAA;CACA,eAAA,UAAA;AACF,EAAA,CALY,mBAAA,iBAAc,CAAA,EAAA;AA+B1B,IAAa,oBAAb,MAAa,kBAAiB;CAI5B,IAAoB,UAAU,KAAwC;EACpE,KAAK,sCAAqC;EAC1C,KAAK,aAAa;EAClB,KAAK,mBAAkB;EACvB,IAAI,KAAK,SACP,KAAK,mBAAkB;CAE3B;CAEA,IAAW,YAAS;EAClB,OAAO,KAAK;CACd;CAKA,IAAoB,UAAU,WAAoB;EAChD,KAAK,aAAa;EAClB,IAAI,KAAK,SACP,KAAK,0BAAyB;CAElC;CAEA,IAAW,YAAS;EAClB,OAAO,KAAK;CACd;CAKA,IAAoB,SAAS,UAAkB;EAC7C,KAAK,YAAY;EACjB,IAAI,KAAK,SACP,KAAK,0BAAyB;CAElC;CAEA,IAAW,WAAQ;EACjB,OAAO,KAAK;CACd;CAOA,IAAoB,SAAS,eAAkC;EAC7D,KAAK,YAAY;EACjB,KAAK,sCAAqC;EAC1C,KAAK,mBAAkB;CACzB;CAEA,IAAW,WAAQ;EACjB,OAAO,KAAK;CACd;CAOA,IAAoB,gBAAgB,QAA+B;EACjE,KAAK,wBAAwB;EAC7B,KAAK,gBAAgB,SACnB,KAAK,mBAAmB,KAAK,iBAAiB,KAAK,kBAAkB;CACzE;CAEA,IAAW,kBAAe;EACxB,OAAO,KAAK;CACd;CAMA,IAAoB,mBAAmB,QAAsC;EAC3E,KAAK,sBAAsB;EAE3B,IAAI,CAAC,KAAK,iBACR,KAAK,gBAAgB,SAAS,KAAK,iBAAiB,MAAM;CAE9D;CAEA,IAAW,qBAAkB;EAC3B,OAAO,KAAK;CACd;CAoCO,qBAAkB;EACvB,IAAI,KAAK,kBACP,KAAK,KAAI;CAEb;CA+CA,YACU,YACA,UACA,iBAAgC;EAFhC,KAAA,aAAA;EACA,KAAA,WAAA;EACA,KAAA,kBAAA;EArFM,KAAA,aAAsB;EAKtB,KAAA,SAAyB,eAAe;EAMxC,KAAA,QAAiB;EAKjB,KAAA,gBAAyB;EAKzB,KAAA,gBAAyB;EACzB,KAAA,mBAA4B;EAC5B,KAAA,kBAA2B;EAK1B,KAAA,iBAAwC,IAAI,aAAY;EASjE,KAAA,aAAwB;EAExB,KAAA,YAAsB;EAMtB,KAAA,YAAiC,CAAC,OAAO;EAKzC,KAAA,UAAmB;EACnB,KAAA,+BAAyD,CAAA;EAGzD,KAAA,kCAAqD,IAAI,IAAI;GACnE,CAAC,SAAS,CAAC;IAAE,OAAO;IAAS,QAAQ,KAAK,WAAW,KAAK,IAAI;GAAC,CAAE,CAAC;GAClE,CACE,SACA,CACE;IAAE,OAAO;IAAc,QAAQ,KAAK,KAAK,KAAK,IAAI;GAAC,GACnD;IAAE,OAAO;IAAc,QAAQ,KAAK,KAAK,KAAK,IAAI;GAAC,CACpD,CACF;GACD,CACE,SACA,CACE;IAAE,OAAO;IAAS,QAAQ,KAAK,KAAK,KAAK,IAAI;GAAC,GAC9C;IAAE,OAAO;IAAQ,QAAQ,KAAK,KAAK,KAAK,IAAI;GAAC,CAC9C,CACF;EACF,CAAA;EAEO,KAAA,eAEJ;GACF,KAAK,UAAU,MAAM,GAAG,SAAS,eAAe,KAAK,CAAC;GACtD,QAAQ,UAAU,MAAM,KAAK,SAAS,uBAAuB,KAAK,CAAC;GACnE,OAAO,UAAU,MAAM,KAAK,SAAS,kBAAkB,KAAK,CAAC;GAC7D,MAAM,UAAU,MAAM,KAAK,SAAS,qBAAqB,KAAK,CAAC;GAC/D,eAAe;EAChB;CAME;CAEI,WAAQ;EACb,KAAK,6BAA4B;CACnC;CAGO,OAAI;EACT,IAAI,KAAK,YACP;EAGF,KAAK,gCAA+B;EACpC,KAAK,4BAA2B;EAChC,KAAK,SAAS,SAAS,KAAK,WAAW,eAAe,WAAW,OAAO;EACxE,KAAK,UAAU;EACf,KAAK,mBAAkB;EACvB,KAAK,eAAe,KAAK,KAAK,OAAO;CACvC;CAGO,OAAI;EACT,IAAI,KAAK,cAAc,CAAC,KAAK,SAC3B;EAGF,KAAK,qBAAoB;EACzB,KAAK,mCAAkC;EACvC,KAAK,SAAS,SAAS,KAAK,WAAW,eAAe,WAAW,MAAM;EACvE,KAAK,UAAU;EACf,KAAK,SAAS,YACZ,KAAK,WAAW,eAChB,qCACA,oBAAoB,QAAQ;EAE9B,KAAK,eAAe,KAAK,KAAK,OAAO;CACvC;CAGO,aAAU;EACf,IAAI,KAAK,SACP,KAAK,KAAI;OAET,KAAK,KAAI;CAEb;CAEQ,+BAA4B;EAClC,KAAK,SAAS,SAAS,KAAK,WAAW,eAAe,QAAQ,KAAK;EACnE,KAAK,SAAS,SAAS,KAAK,WAAW,eAAe,OAAO,KAAK;EAClE,KAAK,SAAS,SAAS,KAAK,WAAW,eAAe,YAAY,KAAK,QAAQ;EAC/E,KAAK,SAAS,SACZ,KAAK,WAAW,eAChB,WACA,kBAAkB,OAAO,SAAS,CAAC;EAErC,KAAK,kBAAiB;CACxB;CAEQ,oBAAiB;EACvB,KAAK,SAAS,SACZ,KAAK,WAAW,eAChB,WACA,KAAK,UAAU,UAAU,MAAM;CAEnC;CAEQ,4BAAyB;EAC/B,IAAI,CAAC,KAAK,WACR;EAGF,MAAM,SAAgC;GACpC,WAAW,KAAK;GAChB,YAAY,KAAK,oBAAmB;GACpC,UAAU,KAAK;EACS;EAE1B,KACE,gBAAgB,KAAK,WAAW,eAAe,KAAK,WAAW,eAAe,MAAM,CAAC,CACtF,CAAC,WAAW,EAAE,GAAG,QAAQ,KAAK,gCAAgC,GAAG,CAAC,CAAC;CACtE;CAEQ,sBAAmB;EACzB,MAAM,aAA2D,CAAA;EACjE,MAAM,UAAU,SAAS,kBAAkB,KAAK,GAAG,CAAC;EAEpD,WAAW,KAAK,OAAO,KAAK,MAAM,CAAC;EACnC,WAAW,KAAK,KAAK,EAAE,QAAO,CAAE,CAAC;EAEjC,IAAI,KAAK,OACP,WAAW,KAAK,MAAM,EAAE,QAAO,CAAE,CAAC;EAGpC,WAAW,KACT,KAAK;GACH;GACA,QAAQ,EAAE,iBAAiB,eAAc;IACvC,IAAI,CAAC,KAAK,SAAS;IAEnB,KAAK,SAAS,SACZ,SAAS,UACT,qCACA,GAAG,KAAK,IAAI,GAAG,eAAe,EAAC,KAC/B,oBAAoB,QAAQ;GAEhC;EACD,CAAA,CAAC;EAGJ,IAAI,KAAK,eACP,WAAW,KAAK,cAAa,CAAE;EAGjC,OAAO;CACT;CAEQ,qBAAkB;EACxB,KAAK,qBAAoB;EAEzB,IAAI,CAAC,KAAK,WACR;EAGF,KAAK,iBAAiB,WACpB,KAAK,WAAW,eAChB,KAAK,WAAW,eAChB,KAAK,0BAA0B,KAAK,IAAI,CAAC;CAE7C;CAEQ,gCAAgC,WAAmB,WAAiB;EAC1E,KAAK,SAAS,SAAS,KAAK,WAAW,eAAe,QAAQ,GAAG,UAAS,GAAI;EAC9E,KAAK,SAAS,SAAS,KAAK,WAAW,eAAe,OAAO,GAAG,UAAS,GAAI;EAC7E,KAAK,kBAAiB;CACxB;CAEQ,qBAAkB;EACxB,IAAI,CAAC,KAAK,aAAa,CAAC,KAAK,UAC3B;EAGF,KAAK,SAAS,SAAS,YACrB,KAAK,qCAAqC,OAAO,CAAC;CAEtD;CAEQ,kCAA+B;EACrC,IAAI,KAAK,8BACP;EAGF,KAAK,+BAA+B,KAAK,SAAS,OAAO,YAAY,cAAc,UACjF,KAAK,8BAA8B,KAAK,CAAC;CAE7C;CAEQ,8BAA2B;EACjC,IAAI,KAAK,4BAA4B,CAAC,KAAK,eACzC;EAGF,KAAK,2BAA2B,KAAK,SAAS,OAC5C,KAAK,WAAW,eAChB,eACM,KAAK,6BAA4B,CAAE;CAE7C;CAEQ,qCAAqC,SAAqB;EAChE,MAAM,SAAqC,KAAK,gBAAgB,IAAI,OAAO;EAE3E,IAAI,CAAC,QACH,MAAM,IAAI,MAAM,GAAG,QAAO,gCAAiC;EAG7D,OAAO,SAAS,UAAuB;GACrC,MAAM,8BAAsD,KAAK,SAAS,OACxE,KAAK,WAAW,eAChB,MAAM,OACN,MAAM,MAAM;GAEd,KAAK,6BAA6B,KAAK,2BAA2B;EACpE,CAAC;CACH;CAEQ,+BAA4B;EAClC,IAAI,KAAK,eACP,KAAK,KAAI;CAEb;CAEQ,8BAA8B,OAAY;EAChD,IAAI,MAAM,kBAAkB,MAAM;GAEhC,IAD+B,KAAK,WAAW,cAAc,SAAS,MAAM,MACxE,GAAe;GAEnB,MAAM,4CACJ,KAAK,WAAW,cAAc,SAAS,MAAM,MAAM,KAAK,KAAK,SAAS,SAAS,OAAO;GAExF,IAAI,KAAK,mBAAmB,CAAC,2CAC3B,KAAK,KAAI;EAEb;CACF;CAEQ,iBAAiB,QAAsC;EAC7D,IAAI,CAAC,UAAU,CAAC,OAAO,YAAY,CAAC,OAAO,OACzC,OAAO;EAGT,MAAM,WAAkC,KAAK,gBAAgB,MAAM;EAEnE,IAAI,CAAC,YAAY,SAAS,WAAW,GACnC,MAAM,MAAM,oCAAoC,OAAO,SAAQ,uBAAwB;EAGzF,IAAI,SAAS,SAAS,GACpB,MAAM,MACJ,mCAAmC,OAAO,SAAQ;0EACgB;EAItE,OAAO,SAAS;CAClB;CAEQ,gBAAgB,QAAsC;EAC5D,OACE,KAAK,aAAa,OAAO,SAAS,CAAC,OAAO,KAAK,KAAK,KAAK,aAAa,UAAU,CAAC,OAAO,KAAK;CAEjG;CAEQ,wCAAqC;EAC3C,KAAK,6BAA6B,SAAS,gCACzC,8BAA6B,CAAE;EAEjC,KAAK,+BAA+B,CAAA;CACtC;CAEQ,qCAAkC;EACxC,IAAI,KAAK,8BAA8B;GACrC,KAAK,6BAA4B;GACjC,KAAK,+BAA+B;EACtC;EAEA,IAAI,KAAK,0BAA0B;GACjC,KAAK,yBAAwB;GAC7B,KAAK,2BAA2B;EAClC;CACF;CAEQ,uBAAoB;EAC1B,IAAI,KAAK,gBACP,KAAK,eAAc;CAEvB;CAEO,cAAW;EAChB,KAAK,mCAAkC;EACvC,KAAK,sCAAqC;EAC1C,KAAK,qBAAoB;CAC3B;CA1bW;EAAA,KAAA,OAAA,GAAA,mBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,UAAA;GAAA,MAAA;GAAiB,MAAA;IAAA,EAAA,OAAA,GAAA,WAAA;IAAA,EAAA,OAAA,GAAA,UAAA;IAAA,EAAA,OAAA,GAAA,gBAAA;GAAA;GAAA,QAAA,GAAA,gBAAA;EAAA,CAAA;CAAA;CAAjB;EAAA,KAAA,OAAA,GAAA,qBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,MAAA;GAAiB,cAAA;GAAA,UAAA;GAAA,QAAA;IAAA,WAAA;IAAA,WAAA;IAAA,UAAA;IAAA,UAAA;IAAA,iBAAA;IAAA,oBAAA;IAAA,YAAA;IAAA,QAAA;IAAA,OAAA;IAAA,eAAA;IAAA,eAAA;IAAA,kBAAA;IAAA,iBAAA;GAAA;GAAA,SAAA,EAAA,gBAAA,iBAAA;GAAA,MAAA,EAAA,WAAA,EAAA,2BAAA,uBAAA,EAAA;GAAA,WAJjB,CAAC,eAAe;GAAC,gBAAA,CAAA,EAAA,WAAA,GAAA,gBAAA,CAAA;GAAA,UAAA;EAAA,CAAA;CAAA;;AAIjB,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAiB,YAAA,CAAA;EAN7B,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GACV,WAAW,CAAC,eAAe;GAC3B,gBAAgB,CAAC,eAAe;GAChC,YAAY;EACb,CAAA;;;;;;;;EAKE,WAAA,CAAA,EAAA,MAAA,MAAA,CAAA;EAgBA,WAAA,CAAA,EAAA,MAAA,MAAA,CAAA;EAcA,UAAA,CAAA,EAAA,MAAA,MAAA,CAAA;EAgBA,UAAA,CAAA,EAAA,MAAA,MAAA,CAAA;EAeA,iBAAA,CAAA,EAAA,MAAA,MAAA,CAAA;EAcA,oBAAA,CAAA,EAAA,MAAA,MAAA,CAAA;EAeA,YAAA,CAAA,EAAA,MAAA,MAAA,CAAA;EAKA,QAAA,CAAA,EAAA,MAAA,MAAA,CAAA;EAMA,OAAA,CAAA,EAAA,MAAA,MAAA,CAAA;EAKA,eAAA,CAAA,EAAA,MAAA,MAAA,CAAA;EAKA,eAAA,CAAA,EAAA,MAAA,MAAA,CAAA;EACA,kBAAA,CAAA,EAAA,MAAA,MAAA,CAAA;EACA,iBAAA,CAAA,EAAA,MAAA,MAAA,CAAA;EAKA,gBAAA,CAAA,EAAA,MAAA,OAAA,CAAA;;GAEA,MAAA;GAAa,MAAA,CAAA,yBAAyB"}

package/fesm2022/kirbydesign-designsystem-shared-portal.mjs

@@ -34,7 +34,7 @@ var PortalDirective = class PortalDirective extends CdkPortalOutlet {
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
 			minVersion: "12.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			ngImport: i0,
 			type: PortalDirective,
 			deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }],
@@ -44,7 +44,7 @@ var PortalDirective = class PortalDirective extends CdkPortalOutlet {
 	static {
 		this.ɵdir = i0.ɵɵngDeclareDirective({
 			minVersion: "14.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			type: PortalDirective,
 			isStandalone: true,
 			selector: "[kirbyPortal]",
@@ -56,7 +56,7 @@ var PortalDirective = class PortalDirective extends CdkPortalOutlet {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: PortalDirective,
 	decorators: [{

package/fesm2022/kirbydesign-designsystem-shared.mjs

@@ -9,7 +9,7 @@ var ResizeObserverFactory = class ResizeObserverFactory {
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
 			minVersion: "12.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			ngImport: i0,
 			type: ResizeObserverFactory,
 			deps: [],
@@ -19,7 +19,7 @@ var ResizeObserverFactory = class ResizeObserverFactory {
 	static {
 		this.ɵprov = i0.ɵɵngDeclareInjectable({
 			minVersion: "12.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			ngImport: i0,
 			type: ResizeObserverFactory,
 			providedIn: "root"
@@ -28,7 +28,7 @@ var ResizeObserverFactory = class ResizeObserverFactory {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: ResizeObserverFactory,
 	decorators: [{
@@ -68,7 +68,7 @@ var ResizeObserverService = class ResizeObserverService {
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
 			minVersion: "12.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			ngImport: i0,
 			type: ResizeObserverService,
 			deps: [{ token: ResizeObserverFactory }],
@@ -78,7 +78,7 @@ var ResizeObserverService = class ResizeObserverService {
 	static {
 		this.ɵprov = i0.ɵɵngDeclareInjectable({
 			minVersion: "12.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			ngImport: i0,
 			type: ResizeObserverService,
 			providedIn: "root"
@@ -87,7 +87,7 @@ var ResizeObserverService = class ResizeObserverService {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: ResizeObserverService,
 	decorators: [{
@@ -125,7 +125,7 @@ var TextResizeObserverService = class TextResizeObserverService {
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
 			minVersion: "12.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			ngImport: i0,
 			type: TextResizeObserverService,
 			deps: [],
@@ -135,7 +135,7 @@ var TextResizeObserverService = class TextResizeObserverService {
 	static {
 		this.ɵprov = i0.ɵɵngDeclareInjectable({
 			minVersion: "12.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			ngImport: i0,
 			type: TextResizeObserverService,
 			providedIn: "root"
@@ -144,7 +144,7 @@ var TextResizeObserverService = class TextResizeObserverService {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: TextResizeObserverService,
 	decorators: [{
@@ -231,7 +231,7 @@ var ThemeColorDirective = class ThemeColorDirective {
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
 			minVersion: "12.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			ngImport: i0,
 			type: ThemeColorDirective,
 			deps: [],
@@ -241,7 +241,7 @@ var ThemeColorDirective = class ThemeColorDirective {
 	static {
 		this.ɵdir = i0.ɵɵngDeclareDirective({
 			minVersion: "14.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			type: ThemeColorDirective,
 			isStandalone: true,
 			selector: "kirby-avatar[themeColor],\n             kirby-card[themeColor],\n             kirby-icon[themeColor],\n             kirby-progress-circle-ring[themeColor],\n             kirby-modal-footer[themeColor],\n             kirby-empty-state[themeColor]",
@@ -268,7 +268,7 @@ var ThemeColorDirective = class ThemeColorDirective {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: ThemeColorDirective,
 	decorators: [{
@@ -361,7 +361,7 @@ var ComponentLoaderDirective = class ComponentLoaderDirective {
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
 			minVersion: "12.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			ngImport: i0,
 			type: ComponentLoaderDirective,
 			deps: [{ token: i0.ViewContainerRef }, { token: i0.Renderer2 }],
@@ -371,7 +371,7 @@ var ComponentLoaderDirective = class ComponentLoaderDirective {
 	static {
 		this.ɵdir = i0.ɵɵngDeclareDirective({
 			minVersion: "14.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			type: ComponentLoaderDirective,
 			isStandalone: true,
 			selector: "[kirbyLoadComponent]",
@@ -385,7 +385,7 @@ var ComponentLoaderDirective = class ComponentLoaderDirective {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: ComponentLoaderDirective,
 	decorators: [{
@@ -496,7 +496,7 @@ var FitHeadingDirective = class FitHeadingDirective {
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
 			minVersion: "12.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			ngImport: i0,
 			type: FitHeadingDirective,
 			deps: [
@@ -511,7 +511,7 @@ var FitHeadingDirective = class FitHeadingDirective {
 	static {
 		this.ɵdir = i0.ɵɵngDeclareDirective({
 			minVersion: "14.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			type: FitHeadingDirective,
 			isStandalone: true,
 			selector: "h1[kirbyFitHeading],h2[kirbyFitHeading],h3[kirbyFitHeading],[kirbyFitHeading]",
@@ -523,7 +523,7 @@ var FitHeadingDirective = class FitHeadingDirective {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: FitHeadingDirective,
 	decorators: [{
@@ -647,7 +647,7 @@ var TranslationService = class TranslationService {
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
 			minVersion: "12.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			ngImport: i0,
 			type: TranslationService,
 			deps: [{ token: LOCALE_ID }],
@@ -657,7 +657,7 @@ var TranslationService = class TranslationService {
 	static {
 		this.ɵprov = i0.ɵɵngDeclareInjectable({
 			minVersion: "12.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			ngImport: i0,
 			type: TranslationService,
 			providedIn: "root"
@@ -666,7 +666,7 @@ var TranslationService = class TranslationService {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: TranslationService,
 	decorators: [{

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

@@ -56,7 +56,7 @@ var SlideButtonComponent = class SlideButtonComponent {
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
 			minVersion: "12.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			ngImport: i0,
 			type: SlideButtonComponent,
 			deps: [
@@ -70,7 +70,7 @@ var SlideButtonComponent = class SlideButtonComponent {
 	static {
 		this.ɵcmp = i0.ɵɵngDeclareComponent({
 			minVersion: "14.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			type: SlideButtonComponent,
 			isStandalone: true,
 			selector: "kirby-slide-button",
@@ -107,7 +107,7 @@ var SlideButtonComponent = class SlideButtonComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: SlideButtonComponent,
 	decorators: [{

package/fesm2022/kirbydesign-designsystem-slide.mjs

@@ -11,7 +11,7 @@ var SlideDirective = class SlideDirective {
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
 			minVersion: "12.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			ngImport: i0,
 			type: SlideDirective,
 			deps: [],
@@ -21,7 +21,7 @@ var SlideDirective = class SlideDirective {
 	static {
 		this.ɵdir = i0.ɵɵngDeclareDirective({
 			minVersion: "14.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			type: SlideDirective,
 			isStandalone: true,
 			selector: "[kirbySlide]",
@@ -31,7 +31,7 @@ var SlideDirective = class SlideDirective {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: SlideDirective,
 	decorators: [{
@@ -118,7 +118,7 @@ var SlidesComponent = class SlidesComponent {
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
 			minVersion: "12.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			ngImport: i0,
 			type: SlidesComponent,
 			deps: [
@@ -132,7 +132,7 @@ var SlidesComponent = class SlidesComponent {
 	static {
 		this.ɵcmp = i0.ɵɵngDeclareComponent({
 			minVersion: "17.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			type: SlidesComponent,
 			isStandalone: true,
 			selector: "kirby-slides",
@@ -205,7 +205,7 @@ var SlidesComponent = class SlidesComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: SlidesComponent,
 	decorators: [{
@@ -257,7 +257,7 @@ var SlideStretchHeightDirective = class SlideStretchHeightDirective {
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
 			minVersion: "12.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			ngImport: i0,
 			type: SlideStretchHeightDirective,
 			deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }],
@@ -267,7 +267,7 @@ var SlideStretchHeightDirective = class SlideStretchHeightDirective {
 	static {
 		this.ɵdir = i0.ɵɵngDeclareDirective({
 			minVersion: "14.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			type: SlideStretchHeightDirective,
 			isStandalone: true,
 			selector: "[slideStretchHeight]",
@@ -277,7 +277,7 @@ var SlideStretchHeightDirective = class SlideStretchHeightDirective {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: SlideStretchHeightDirective,
 	decorators: [{
@@ -295,7 +295,7 @@ var SlideModule = class SlideModule {
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
 			minVersion: "12.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			ngImport: i0,
 			type: SlideModule,
 			deps: [],
@@ -305,7 +305,7 @@ var SlideModule = class SlideModule {
 	static {
 		this.ɵmod = i0.ɵɵngDeclareNgModule({
 			minVersion: "14.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			ngImport: i0,
 			type: SlideModule,
 			imports: [
@@ -326,7 +326,7 @@ var SlideModule = class SlideModule {
 	static {
 		this.ɵinj = i0.ɵɵngDeclareInjector({
 			minVersion: "12.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			ngImport: i0,
 			type: SlideModule,
 			imports: [
@@ -340,7 +340,7 @@ var SlideModule = class SlideModule {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: SlideModule,
 	decorators: [{

package/fesm2022/kirbydesign-designsystem-spinner.mjs

@@ -5,7 +5,7 @@ var SpinnerComponent = class SpinnerComponent {
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
 			minVersion: "12.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			ngImport: i0,
 			type: SpinnerComponent,
 			deps: [],
@@ -15,7 +15,7 @@ var SpinnerComponent = class SpinnerComponent {
 	static {
 		this.ɵcmp = i0.ɵɵngDeclareComponent({
 			minVersion: "14.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			type: SpinnerComponent,
 			isStandalone: true,
 			selector: "kirby-spinner",
@@ -28,7 +28,7 @@ var SpinnerComponent = class SpinnerComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: SpinnerComponent,
 	decorators: [{
@@ -45,7 +45,7 @@ var SpinnerModule = class SpinnerModule {
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
 			minVersion: "12.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			ngImport: i0,
 			type: SpinnerModule,
 			deps: [],
@@ -55,7 +55,7 @@ var SpinnerModule = class SpinnerModule {
 	static {
 		this.ɵmod = i0.ɵɵngDeclareNgModule({
 			minVersion: "14.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			ngImport: i0,
 			type: SpinnerModule,
 			imports: [CommonModule, SpinnerComponent],
@@ -65,7 +65,7 @@ var SpinnerModule = class SpinnerModule {
 	static {
 		this.ɵinj = i0.ɵɵngDeclareInjector({
 			minVersion: "12.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			ngImport: i0,
 			type: SpinnerModule,
 			imports: [CommonModule]
@@ -74,7 +74,7 @@ var SpinnerModule = class SpinnerModule {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: SpinnerModule,
 	decorators: [{