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

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

@@ -1 +1 @@
-{"version":3,"file":"kirbydesign-designsystem-shared-floating.mjs","sources":["../../shared/floating/src/floating.directive.ts","../../shared/floating/src/kirbydesign-designsystem-shared-floating.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","/**\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-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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"}

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

@@ -1,85 +1,74 @@
-import { CdkPortalOutlet, DomPortal } from '@angular/cdk/portal';
-import * as i0 from '@angular/core';
-import { Input, Directive } from '@angular/core';
-
-/**
- * @summary PortalDirective is a utility that lets you portal the host element into another DOM element.
- * This is designed to be beneficial when there's issues with the stacking context.
- *
- * Extends CdkPortalOutlet to gain functionality for attaching/detaching the host element, and for proper cleanup.
- *
- * Using portal directive to reposition HTML elements, might break angular functionality and/or styling, so use
- * with care.
- */
-class PortalDirective extends CdkPortalOutlet {
-    /** The DOM element for which the host element should be appended as a child. */
-    set outlet(outlet) {
-        this._outlet = outlet;
-        if (this.outlet) {
-            this.portal = new DomPortal(this.elementRef);
-        }
-    }
-    get outlet() {
-        return this._outlet;
-    }
-    /**
-     * Override portal to handle if user provides a portal of another type than DOMPortal, which CdkPortal would
-     * otherwise allow. This can be modified to handle other portal types in the future, should the need arise
-     */
-    set portal(portal) {
-        const isDOMPortal = portal instanceof DomPortal;
-        if (!isDOMPortal) {
-            throw Error(`Portal type ${portal} is not supported`);
-        }
-        super.portal = portal;
-    }
-    constructor(elementRef, componentFactoryResolver, viewContainerRef) {
-        super(componentFactoryResolver, viewContainerRef);
-        this.elementRef = elementRef;
-        this.componentFactoryResolver = componentFactoryResolver;
-        this.viewContainerRef = viewContainerRef;
-        /**
-         * Nearly identical to super class, yet we want to use provided outlet instead of directive host as new content
-         * parent which is otherwise the default for CdKPortal
-         */
-        this.attachDomPortal = (portal) => {
-            if (!this.outlet) {
-                throw Error('Outlet must be defined!');
-            }
-            const { element } = portal;
-            if (!element.parentNode) {
-                throw Error('DOM portal content must be attached to a parent node.');
-            }
-            // Anchor used to save the element's previous position so
-            // that we can restore it when the portal is detached.
-            const anchorNode = document.createComment('dom-portal');
-            portal.setAttachedHost(this);
-            element.parentNode.insertBefore(anchorNode, element);
-            this.outlet.appendChild(element);
-            this._attachedPortal = portal;
-            super.setDisposeFn(() => {
-                if (anchorNode.parentNode) {
-                    anchorNode.parentNode.replaceChild(element, anchorNode);
-                }
-            });
-        };
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: PortalDirective, deps: [{ token: i0.ElementRef }, { token: i0.ComponentFactoryResolver }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.23", type: PortalDirective, isStandalone: true, selector: "[kirbyPortal]", inputs: { outlet: "outlet" }, usesInheritance: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: PortalDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kirbyPortal]',
-                    standalone: true,
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ComponentFactoryResolver }, { type: i0.ViewContainerRef }], propDecorators: { outlet: [{
-                type: Input
-            }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+import { CdkPortalOutlet, DomPortal } from "@angular/cdk/portal";
+import * as i0 from "@angular/core";
+import { Directive, Input } from "@angular/core";
+var PortalDirective = class PortalDirective extends CdkPortalOutlet {
+	set outlet(outlet) {
+		this._outlet = outlet;
+		if (this.outlet) this.portal = new DomPortal(this.elementRef);
+	}
+	get outlet() {
+		return this._outlet;
+	}
+	set portal(portal) {
+		if (!(portal instanceof DomPortal)) throw Error(`Portal type ${portal} is not supported`);
+		super.portal = portal;
+	}
+	constructor(elementRef, viewContainerRef) {
+		super();
+		this.elementRef = elementRef;
+		this.viewContainerRef = viewContainerRef;
+		this.attachDomPortal = (portal) => {
+			if (!this.outlet) throw Error("Outlet must be defined!");
+			const { element } = portal;
+			if (!element.parentNode) throw Error("DOM portal content must be attached to a parent node.");
+			const anchorNode = document.createComment("dom-portal");
+			portal.setAttachedHost(this);
+			element.parentNode.insertBefore(anchorNode, element);
+			this.outlet.appendChild(element);
+			this._attachedPortal = portal;
+			super.setDisposeFn(() => {
+				if (anchorNode.parentNode) anchorNode.parentNode.replaceChild(element, anchorNode);
+			});
+		};
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: PortalDirective,
+			deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			type: PortalDirective,
+			isStandalone: true,
+			selector: "[kirbyPortal]",
+			inputs: { outlet: "outlet" },
+			usesInheritance: true,
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: PortalDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[kirbyPortal]",
+			standalone: true
+		}]
+	}],
+	ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }],
+	propDecorators: { outlet: [{ type: Input }] }
+});
 export { PortalDirective };
-//# sourceMappingURL=kirbydesign-designsystem-shared-portal.mjs.map
+
+//# sourceMappingURL=kirbydesign-designsystem-shared-portal.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"kirbydesign-designsystem-shared-portal.mjs","sources":["../../shared/portal/src/portal.directive.ts","../../shared/portal/src/kirbydesign-designsystem-shared-portal.ts"],"sourcesContent":["import { CdkPortalOutlet, DomPortal, Portal } from '@angular/cdk/portal';\nimport {\n  ComponentFactoryResolver,\n  Directive,\n  ElementRef,\n  Input,\n  ViewContainerRef,\n} from '@angular/core';\n\n/**\n * @summary PortalDirective is a utility that lets you portal the host element into another DOM element.\n * This is designed to be beneficial when there's issues with the stacking context.\n *\n * Extends CdkPortalOutlet to gain functionality for attaching/detaching the host element, and for proper cleanup.\n *\n * Using portal directive to reposition HTML elements, might break angular functionality and/or styling, so use\n * with care.\n */\n@Directive({\n  selector: '[kirbyPortal]',\n  standalone: true,\n})\nexport class PortalDirective extends CdkPortalOutlet {\n  private _outlet: HTMLElement | undefined;\n\n  /** The DOM element for which the host element should be appended as a child. */\n  @Input() public set outlet(outlet: HTMLElement | undefined) {\n    this._outlet = outlet;\n\n    if (this.outlet) {\n      this.portal = new DomPortal(this.elementRef);\n    }\n  }\n\n  public get outlet(): HTMLElement | undefined {\n    return this._outlet;\n  }\n\n  /**\n   * Override portal to handle if user provides a portal of another type than DOMPortal, which CdkPortal would\n   * otherwise allow. This can be modified to handle other portal types in the future, should the need arise\n   */\n  public override set portal(portal: Portal<unknown> | null) {\n    const isDOMPortal: boolean = portal instanceof DomPortal;\n\n    if (!isDOMPortal) {\n      throw Error(`Portal type ${portal} is not supported`);\n    }\n\n    super.portal = portal;\n  }\n\n  public constructor(\n    private elementRef: ElementRef,\n    private componentFactoryResolver: ComponentFactoryResolver,\n    private viewContainerRef: ViewContainerRef\n  ) {\n    super(componentFactoryResolver, viewContainerRef);\n  }\n\n  /**\n   * Nearly identical to super class, yet we want to use provided outlet instead of directive host as new content\n   * parent which is otherwise the default for CdKPortal\n   */\n  public override attachDomPortal = (portal: DomPortal): void => {\n    if (!this.outlet) {\n      throw Error('Outlet must be defined!');\n    }\n\n    const { element } = portal;\n\n    if (!element.parentNode) {\n      throw Error('DOM portal content must be attached to a parent node.');\n    }\n\n    // Anchor used to save the element's previous position so\n    // that we can restore it when the portal is detached.\n    const anchorNode = document.createComment('dom-portal');\n\n    portal.setAttachedHost(this);\n    element.parentNode.insertBefore(anchorNode, element);\n    this.outlet.appendChild(element);\n    this._attachedPortal = portal;\n\n    super.setDisposeFn(() => {\n      if (anchorNode.parentNode) {\n        anchorNode.parentNode.replaceChild(element, anchorNode);\n      }\n    });\n  };\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;AASA;;;;;;;;AAQG;AAKG,MAAO,eAAgB,SAAQ,eAAe,CAAA;;IAIlD,IAAoB,MAAM,CAAC,MAA+B,EAAA;AACxD,QAAA,IAAI,CAAC,OAAO,GAAG,MAAM;AAErB,QAAA,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,MAAM,GAAG,IAAI,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC;QAC9C;IACF;AAEA,IAAA,IAAW,MAAM,GAAA;QACf,OAAO,IAAI,CAAC,OAAO;IACrB;AAEA;;;AAGG;IACH,IAAoB,MAAM,CAAC,MAA8B,EAAA;AACvD,QAAA,MAAM,WAAW,GAAY,MAAM,YAAY,SAAS;QAExD,IAAI,CAAC,WAAW,EAAE;AAChB,YAAA,MAAM,KAAK,CAAC,CAAA,YAAA,EAAe,MAAM,CAAA,iBAAA,CAAmB,CAAC;QACvD;AAEA,QAAA,KAAK,CAAC,MAAM,GAAG,MAAM;IACvB;AAEA,IAAA,WAAA,CACU,UAAsB,EACtB,wBAAkD,EAClD,gBAAkC,EAAA;AAE1C,QAAA,KAAK,CAAC,wBAAwB,EAAE,gBAAgB,CAAC;QAJzC,IAAA,CAAA,UAAU,GAAV,UAAU;QACV,IAAA,CAAA,wBAAwB,GAAxB,wBAAwB;QACxB,IAAA,CAAA,gBAAgB,GAAhB,gBAAgB;AAK1B;;;AAGG;AACa,QAAA,IAAA,CAAA,eAAe,GAAG,CAAC,MAAiB,KAAU;AAC5D,YAAA,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;AAChB,gBAAA,MAAM,KAAK,CAAC,yBAAyB,CAAC;YACxC;AAEA,YAAA,MAAM,EAAE,OAAO,EAAE,GAAG,MAAM;AAE1B,YAAA,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE;AACvB,gBAAA,MAAM,KAAK,CAAC,uDAAuD,CAAC;YACtE;;;YAIA,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,YAAY,CAAC;AAEvD,YAAA,MAAM,CAAC,eAAe,CAAC,IAAI,CAAC;YAC5B,OAAO,CAAC,UAAU,CAAC,YAAY,CAAC,UAAU,EAAE,OAAO,CAAC;AACpD,YAAA,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,OAAO,CAAC;AAChC,YAAA,IAAI,CAAC,eAAe,GAAG,MAAM;AAE7B,YAAA,KAAK,CAAC,YAAY,CAAC,MAAK;AACtB,gBAAA,IAAI,UAAU,CAAC,UAAU,EAAE;oBACzB,UAAU,CAAC,UAAU,CAAC,YAAY,CAAC,OAAO,EAAE,UAAU,CAAC;gBACzD;AACF,YAAA,CAAC,CAAC;AACJ,QAAA,CAAC;IA/BD;kIApCW,eAAe,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,wBAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;sHAAf,eAAe,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;4FAAf,eAAe,EAAA,UAAA,EAAA,CAAA;kBAJ3B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,eAAe;AACzB,oBAAA,UAAU,EAAE,IAAI;AACjB,iBAAA;;sBAKE;;;AC1BH;;AAEG;;;;"}
+{"version":3,"file":"kirbydesign-designsystem-shared-portal.mjs","names":[],"sources":["../../shared/portal/src/portal.directive.ts"],"sourcesContent":["import { CdkPortalOutlet, DomPortal, Portal } from '@angular/cdk/portal';\nimport { Directive, ElementRef, Input, ViewContainerRef } from '@angular/core';\n\n/**\n * @summary PortalDirective is a utility that lets you portal the host element into another DOM element.\n * This is designed to be beneficial when there's issues with the stacking context.\n *\n * Extends CdkPortalOutlet to gain functionality for attaching/detaching the host element, and for proper cleanup.\n *\n * Using portal directive to reposition HTML elements, might break angular functionality and/or styling, so use\n * with care.\n */\n@Directive({\n  selector: '[kirbyPortal]',\n  standalone: true,\n})\nexport class PortalDirective extends CdkPortalOutlet {\n  private _outlet: HTMLElement | undefined;\n\n  /** The DOM element for which the host element should be appended as a child. */\n  @Input() public set outlet(outlet: HTMLElement | undefined) {\n    this._outlet = outlet;\n\n    if (this.outlet) {\n      this.portal = new DomPortal(this.elementRef);\n    }\n  }\n\n  public get outlet(): HTMLElement | undefined {\n    return this._outlet;\n  }\n\n  /**\n   * Override portal to handle if user provides a portal of another type than DOMPortal, which CdkPortal would\n   * otherwise allow. This can be modified to handle other portal types in the future, should the need arise\n   */\n  public override set portal(portal: Portal<unknown> | null) {\n    const isDOMPortal: boolean = portal instanceof DomPortal;\n\n    if (!isDOMPortal) {\n      throw Error(`Portal type ${portal} is not supported`);\n    }\n\n    super.portal = portal;\n  }\n\n  public constructor(\n    private elementRef: ElementRef,\n    private viewContainerRef: ViewContainerRef\n  ) {\n    super();\n  }\n\n  /**\n   * Nearly identical to super class, yet we want to use provided outlet instead of directive host as new content\n   * parent which is otherwise the default for CdKPortal\n   */\n  public override attachDomPortal = (portal: DomPortal): void => {\n    if (!this.outlet) {\n      throw Error('Outlet must be defined!');\n    }\n\n    const { element } = portal;\n\n    if (!element.parentNode) {\n      throw Error('DOM portal content must be attached to a parent node.');\n    }\n\n    // Anchor used to save the element's previous position so\n    // that we can restore it when the portal is detached.\n    const anchorNode = document.createComment('dom-portal');\n\n    portal.setAttachedHost(this);\n    element.parentNode.insertBefore(anchorNode, element);\n    this.outlet.appendChild(element);\n    this._attachedPortal = portal;\n\n    super.setDisposeFn(() => {\n      if (anchorNode.parentNode) {\n        anchorNode.parentNode.replaceChild(element, anchorNode);\n      }\n    });\n  };\n}\n"],"mappings":";;;AAgBA,IAAa,kBAAb,MAAa,wBAAwB,gBAAe;CAIlD,IAAoB,OAAO,QAA+B;EACxD,KAAK,UAAU;EAEf,IAAI,KAAK,QACP,KAAK,SAAS,IAAI,UAAU,KAAK,UAAU;CAE/C;CAEA,IAAW,SAAM;EACf,OAAO,KAAK;CACd;CAMA,IAAoB,OAAO,QAA8B;EAGvD,IAAI,EAFyB,kBAAkB,YAG7C,MAAM,MAAM,eAAe,OAAM,kBAAmB;EAGtD,MAAM,SAAS;CACjB;CAEA,YACU,YACA,kBAAkC;EAE1C,MAAK;EAHG,KAAA,aAAA;EACA,KAAA,mBAAA;EASM,KAAA,mBAAmB,WAA2B;GAC5D,IAAI,CAAC,KAAK,QACR,MAAM,MAAM,yBAAyB;GAGvC,MAAM,EAAE,YAAY;GAEpB,IAAI,CAAC,QAAQ,YACX,MAAM,MAAM,uDAAuD;GAKrE,MAAM,aAAa,SAAS,cAAc,YAAY;GAEtD,OAAO,gBAAgB,IAAI;GAC3B,QAAQ,WAAW,aAAa,YAAY,OAAO;GACnD,KAAK,OAAO,YAAY,OAAO;GAC/B,KAAK,kBAAkB;GAEvB,MAAM,mBAAkB;IACtB,IAAI,WAAW,YACb,WAAW,WAAW,aAAa,SAAS,UAAU;GAE1D,CAAC;EACH;CA/BA;CAnCW;EAAA,KAAA,OAAA,GAAA,mBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,UAAA;GAAA,MAAA;GAAe,MAAA,CAAA,EAAA,OAAA,GAAA,WAAA,GAAA,EAAA,OAAA,GAAA,iBAAA,CAAA;GAAA,QAAA,GAAA,gBAAA;EAAA,CAAA;CAAA;CAAf;EAAA,KAAA,OAAA,GAAA,qBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,MAAA;GAAe,cAAA;GAAA,UAAA;GAAA,QAAA,EAAA,QAAA,SAAA;GAAA,iBAAA;GAAA,UAAA;EAAA,CAAA;CAAA;;AAAf,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAe,YAAA,CAAA;EAJ3B,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GACV,YAAY;EACb,CAAA;;;CAKE,gBAAA,EAAA,QAAA,CAAA,EAAA,MAAA,MAAA,CAAA,EAAA"}