@acorex/components 22.2.9 → 22.2.10

package/fesm2022/acorex-components-audio-wave.mjs

@@ -383,14 +383,14 @@ class AXAudioWaveComponent {
         this.ngZone.run(fn);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXAudioWaveComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXAudioWaveComponent, isStandalone: true, selector: "ax-audio-wave", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onStatusChanged: "onStatusChanged" }, host: { properties: { "attr.aria-busy": "audioState() === \"loading\" || null", "attr.aria-invalid": "audioState() === \"error\" || null" } }, providers: [{ provide: AXComponent, useExisting: AXAudioWaveComponent }], viewQueries: [{ propertyName: "wave", first: true, predicate: ["wave"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ax-audio-wave-host\" [class.ax-audio-wave-host--loading]=\"audioState() === 'loading'\">\n  <div class=\"ax-audio-wave\" #wave [class.ax-audio-wave--hidden]=\"!isWaveVisible()\"></div>\n\n  @switch (audioState()) {\n    @case ('loading') {\n      <ax-skeleton class=\"ax-audio-wave-skeleton\"></ax-skeleton>\n    }\n    @case ('error') {\n      <div class=\"ax-wave-message\">\n        {{ '@acorex:error.message' | translate: { params: { message: errorMessage() } } | async }}\n      </div>\n    }\n  }\n</div>\n", styles: ["@layer properties;@layer components{ax-audio-wave{display:block;width:100%;flex:1}ax-audio-wave .ax-audio-wave-host{position:relative;display:block;width:100%}ax-audio-wave .ax-audio-wave-host--loading{min-height:1.25rem}ax-audio-wave .ax-audio-wave{width:100%}ax-audio-wave .ax-audio-wave--hidden{visibility:hidden}ax-audio-wave .ax-audio-wave-skeleton{position:absolute;inset-inline:calc(var(--spacing, .25rem) * 0);top:50%;height:calc(var(--spacing, .25rem) * 5);width:100%;--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);border-radius:calc(infinity * 1px)}ax-audio-wave .ax-wave-message{position:absolute;inset-inline:calc(var(--spacing, .25rem) * 0);top:50%;--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);padding-inline-start:calc(var(--spacing, .25rem) * 2)}}@property --tw-translate-x{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-y{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-z{syntax: \"*\"; inherits: false; initial-value: 0;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x: 0;--tw-translate-y: 0;--tw-translate-z: 0}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXAudioWaveComponent, isStandalone: true, selector: "ax-audio-wave", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onStatusChanged: "onStatusChanged" }, host: { properties: { "attr.aria-busy": "audioState() === \"loading\" || null", "attr.aria-invalid": "audioState() === \"error\" || null" } }, providers: [{ provide: AXComponent, useExisting: AXAudioWaveComponent }], viewQueries: [{ propertyName: "wave", first: true, predicate: ["wave"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ax-audio-wave-host\" [class.ax-audio-wave-host--loading]=\"audioState() === 'loading'\">\n  <div class=\"ax-audio-wave\" #wave [class.ax-audio-wave--hidden]=\"!isWaveVisible()\"></div>\n\n  @switch (audioState()) {\n    @case ('loading') {\n      <ax-skeleton class=\"ax-audio-wave-skeleton\"></ax-skeleton>\n    }\n    @case ('error') {\n      <div class=\"ax-wave-message\">\n        {{ '@acorex:error.message' | translate: { params: { message: errorMessage() } } | async }}\n      </div>\n    }\n  }\n</div>\n", styles: ["@layer properties;@layer components{ax-audio-wave{display:block;width:100%;flex:1}ax-audio-wave .ax-audio-wave-host{position:relative;display:block;width:100%}ax-audio-wave .ax-audio-wave-host--loading{min-height:1.25rem}ax-audio-wave .ax-audio-wave{width:100%}ax-audio-wave .ax-audio-wave--hidden{visibility:hidden}ax-audio-wave .ax-audio-wave-skeleton.ax-skeleton{position:absolute;inset-inline:calc(var(--spacing, .25rem) * 0);top:50%;height:calc(var(--spacing, .25rem) * 5);width:100%;--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);border-radius:calc(infinity * 1px)}ax-audio-wave .ax-wave-message{position:absolute;inset-inline:calc(var(--spacing, .25rem) * 0);top:50%;--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);padding-inline-start:calc(var(--spacing, .25rem) * 2)}}@property --tw-translate-x{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-y{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-z{syntax: \"*\"; inherits: false; initial-value: 0;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x: 0;--tw-translate-y: 0;--tw-translate-z: 0}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXAudioWaveComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-audio-wave', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AsyncPipe, AXTranslatorPipe, AXSkeletonComponent], providers: [{ provide: AXComponent, useExisting: AXAudioWaveComponent }], host: {
                         '[attr.aria-busy]': 'audioState() === "loading" || null',
                         '[attr.aria-invalid]': 'audioState() === "error" || null',
-                    }, template: "<div class=\"ax-audio-wave-host\" [class.ax-audio-wave-host--loading]=\"audioState() === 'loading'\">\n  <div class=\"ax-audio-wave\" #wave [class.ax-audio-wave--hidden]=\"!isWaveVisible()\"></div>\n\n  @switch (audioState()) {\n    @case ('loading') {\n      <ax-skeleton class=\"ax-audio-wave-skeleton\"></ax-skeleton>\n    }\n    @case ('error') {\n      <div class=\"ax-wave-message\">\n        {{ '@acorex:error.message' | translate: { params: { message: errorMessage() } } | async }}\n      </div>\n    }\n  }\n</div>\n", styles: ["@layer properties;@layer components{ax-audio-wave{display:block;width:100%;flex:1}ax-audio-wave .ax-audio-wave-host{position:relative;display:block;width:100%}ax-audio-wave .ax-audio-wave-host--loading{min-height:1.25rem}ax-audio-wave .ax-audio-wave{width:100%}ax-audio-wave .ax-audio-wave--hidden{visibility:hidden}ax-audio-wave .ax-audio-wave-skeleton{position:absolute;inset-inline:calc(var(--spacing, .25rem) * 0);top:50%;height:calc(var(--spacing, .25rem) * 5);width:100%;--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);border-radius:calc(infinity * 1px)}ax-audio-wave .ax-wave-message{position:absolute;inset-inline:calc(var(--spacing, .25rem) * 0);top:50%;--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);padding-inline-start:calc(var(--spacing, .25rem) * 2)}}@property --tw-translate-x{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-y{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-z{syntax: \"*\"; inherits: false; initial-value: 0;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x: 0;--tw-translate-y: 0;--tw-translate-z: 0}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
+                    }, template: "<div class=\"ax-audio-wave-host\" [class.ax-audio-wave-host--loading]=\"audioState() === 'loading'\">\n  <div class=\"ax-audio-wave\" #wave [class.ax-audio-wave--hidden]=\"!isWaveVisible()\"></div>\n\n  @switch (audioState()) {\n    @case ('loading') {\n      <ax-skeleton class=\"ax-audio-wave-skeleton\"></ax-skeleton>\n    }\n    @case ('error') {\n      <div class=\"ax-wave-message\">\n        {{ '@acorex:error.message' | translate: { params: { message: errorMessage() } } | async }}\n      </div>\n    }\n  }\n</div>\n", styles: ["@layer properties;@layer components{ax-audio-wave{display:block;width:100%;flex:1}ax-audio-wave .ax-audio-wave-host{position:relative;display:block;width:100%}ax-audio-wave .ax-audio-wave-host--loading{min-height:1.25rem}ax-audio-wave .ax-audio-wave{width:100%}ax-audio-wave .ax-audio-wave--hidden{visibility:hidden}ax-audio-wave .ax-audio-wave-skeleton.ax-skeleton{position:absolute;inset-inline:calc(var(--spacing, .25rem) * 0);top:50%;height:calc(var(--spacing, .25rem) * 5);width:100%;--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);border-radius:calc(infinity * 1px)}ax-audio-wave .ax-wave-message{position:absolute;inset-inline:calc(var(--spacing, .25rem) * 0);top:50%;--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);padding-inline-start:calc(var(--spacing, .25rem) * 2)}}@property --tw-translate-x{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-y{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-z{syntax: \"*\"; inherits: false; initial-value: 0;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x: 0;--tw-translate-y: 0;--tw-translate-z: 0}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
         }], ctorParameters: () => [], propDecorators: { wave: [{ type: i0.ViewChild, args: ['wave', { isSignal: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], onStatusChanged: [{ type: i0.Output, args: ["onStatusChanged"] }] } });
 
 class AXAudioWaveModule {

package/fesm2022/acorex-components-audio-wave.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"acorex-components-audio-wave.mjs","sources":["../../../../packages/components/audio-wave/src/lib/audio-wave.component.ts","../../../../packages/components/audio-wave/src/lib/audio-wave.component.html","../../../../packages/components/audio-wave/src/lib/audio-wave.module.ts","../../../../packages/components/audio-wave/src/acorex-components-audio-wave.ts"],"sourcesContent":["import { AXComponent } from '@acorex/cdk/common';\nimport { AXSkeletonComponent } from '@acorex/components/skeleton';\nimport { AXTranslatorPipe } from '@acorex/core/translation';\nimport { AsyncPipe, isPlatformBrowser } from '@angular/common';\nimport {\n  afterRenderEffect,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  DestroyRef,\n  ElementRef,\n  inject,\n  input,\n  NgZone,\n  output,\n  PLATFORM_ID,\n  signal,\n  viewChild,\n  ViewEncapsulation,\n} from '@angular/core';\nimport WaveSurfer from 'wavesurfer.js';\nimport type {\n  AXAudioWaveChangeEvent,\n  AXAudioWaveEventPayload,\n  AXAudioWaveState,\n  AXAudioWaveStatus,\n  AXWaveConfig,\n} from './interfaces/audio-wave.interface';\n\nconst DEFAULT_BAR_WIDTH = 2;\nconst DEFAULT_BAR_GAP = 2;\nconst DEFAULT_BAR_RADIUS = 2;\nconst DEFAULT_HEIGHT = 36;\nconst FALLBACK_RGB = '128, 128, 128';\n\n/**\n * Displays and interacts with audio waveform visualization.\n *\n * @category Components\n */\n@Component({\n  selector: 'ax-audio-wave',\n  templateUrl: './audio-wave.component.html',\n  styleUrls: ['./audio-wave.component.css'],\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [AsyncPipe, AXTranslatorPipe, AXSkeletonComponent],\n  providers: [{ provide: AXComponent, useExisting: AXAudioWaveComponent }],\n  host: {\n    '[attr.aria-busy]': 'audioState() === \"loading\" || null',\n    '[attr.aria-invalid]': 'audioState() === \"error\" || null',\n  },\n})\nexport class AXAudioWaveComponent {\n  /**\n   * @ignore\n   */\n  private readonly wave = viewChild<ElementRef<HTMLDivElement>>('wave');\n\n  /**\n   * Configuration settings for the audio wave.\n   */\n  readonly config = input<AXWaveConfig>();\n\n  /**\n   * Emits an event when the status of the audio wave changes.\n   *\n   * @event\n   */\n  readonly onStatusChanged = output<AXAudioWaveChangeEvent>();\n\n  /**\n   * @ignore\n   */\n  protected readonly audioState = signal<AXAudioWaveState>('loading');\n\n  /**\n   * @ignore\n   */\n  protected readonly errorMessage = signal('');\n\n  /**\n   * @ignore\n   */\n  protected readonly isWaveVisible = computed(() => {\n    const state = this.audioState();\n    return state === 'ready' || state === 'playing' || state === 'paused';\n  });\n\n  /**\n   * @ignore\n   */\n  private audio: WaveSurfer | undefined;\n\n  /**\n   * @ignore\n   */\n  private loadedUrl = '';\n\n  /**\n   * @ignore\n   */\n  private lastVisualKey = '';\n\n  /**\n   * @ignore\n   */\n  private isDestroyed = false;\n\n  /**\n   * @ignore\n   */\n  private readonly ngZone = inject(NgZone);\n\n  /**\n   * @ignore\n   */\n  private readonly platformId = inject(PLATFORM_ID);\n\n  /**\n   * @ignore\n   */\n  private readonly destroyRef = inject(DestroyRef);\n\n  /**\n   * @ignore\n   */\n  constructor() {\n    afterRenderEffect(() => {\n      const container = this.wave()?.nativeElement;\n      const config = this.config();\n\n      if (this.isDestroyed || !isPlatformBrowser(this.platformId) || !container) {\n        return;\n      }\n\n      if (!this.audio) {\n        this.createWaveSurfer(container, config);\n        return;\n      }\n\n      this.syncFromConfig(config);\n    });\n\n    this.destroyRef.onDestroy(() => {\n      this.isDestroyed = true;\n      this.audio?.destroy();\n      this.audio = undefined;\n    });\n  }\n\n  /**\n   * Loads the audio from the specified URL.\n   *\n   * @param url - The URL of the audio to load. Defaults to the URL from the config.\n   * @returns A promise that resolves when loading starts, or immediately when unavailable.\n   */\n  load(url = this.config()?.url): Promise<void> {\n    const nextUrl = url?.trim();\n    if (!this.audio || !nextUrl) {\n      return Promise.resolve();\n    }\n\n    this.loadedUrl = nextUrl;\n    this.audioState.set('loading');\n    this.errorMessage.set('');\n    return this.swallowAbort(this.audio.load(nextUrl));\n  }\n\n  /**\n   * Plays the audio.\n   *\n   * @returns A promise that resolves when playback starts.\n   */\n  play(): Promise<void> {\n    return this.swallowAbort(this.audio?.play());\n  }\n\n  /**\n   * Pauses the audio.\n   */\n  pause(): void {\n    this.audio?.pause();\n  }\n\n  /**\n   * Retrieves the duration of the audio in seconds.\n   *\n   * @returns The audio duration, or `0` when unavailable.\n   */\n  getDuration(): number {\n    return this.audio?.getDuration() ?? 0;\n  }\n\n  /**\n   * Retrieves the underlying HTML media element.\n   *\n   * @returns The media element used by WaveSurfer, or `undefined` when unavailable.\n   */\n  getMediaElement(): HTMLMediaElement | undefined {\n    return this.audio?.getMediaElement();\n  }\n\n  /**\n   * Retrieves the current playback position in seconds.\n   *\n   * @returns The current time, or `0` when unavailable.\n   */\n  getCurrentTime(): number {\n    return this.audio?.getCurrentTime() ?? this.getMediaElement()?.currentTime ?? 0;\n  }\n\n  /**\n   * Sets the playback rate of the audio.\n   *\n   * @param rate - The playback rate to set.\n   */\n  setRate(rate: number): void {\n    this.audio?.setPlaybackRate(rate);\n  }\n\n  /**\n   * Mutes or unmutes the audio.\n   *\n   * @param muted - Whether the audio should be muted.\n   */\n  setMuted(muted: boolean): void {\n    this.audio?.setMuted(muted);\n  }\n\n  /**\n   * Indicates whether the audio is currently muted.\n   *\n   * @returns True when muted; otherwise false.\n   */\n  isMuted(): boolean {\n    return this.audio?.getMuted() ?? false;\n  }\n\n  /**\n   * @ignore\n   */\n  private createWaveSurfer(container: HTMLDivElement, config?: AXWaveConfig): void {\n    const visualOptions = this.resolveVisualOptions(config);\n    this.lastVisualKey = JSON.stringify(visualOptions);\n    this.audio = WaveSurfer.create({\n      container,\n      ...visualOptions,\n    });\n    this.bindEvents();\n    this.applyUrlAndRate(config);\n  }\n\n  /**\n   * @ignore\n   */\n  private syncFromConfig(config?: AXWaveConfig): void {\n    if (!this.audio) {\n      return;\n    }\n\n    const visualOptions = this.resolveVisualOptions(config);\n    const visualKey = JSON.stringify(visualOptions);\n    if (visualKey !== this.lastVisualKey) {\n      this.lastVisualKey = visualKey;\n      this.audio.setOptions(visualOptions);\n    }\n\n    this.applyUrlAndRate(config);\n  }\n\n  /**\n   * @ignore\n   */\n  private applyUrlAndRate(config?: AXWaveConfig): void {\n    const url = config?.url?.trim() ?? '';\n    if (url && url !== this.loadedUrl) {\n      this.loadedUrl = url;\n      void this.swallowAbort(this.audio?.load(url));\n    } else if (!url) {\n      queueMicrotask(() => {\n        if (!this.isDestroyed && !this.loadedUrl && this.audioState() === 'loading') {\n          this.audioState.set('paused');\n        }\n      });\n    }\n\n    if (config?.audioRate != null) {\n      this.audio?.setPlaybackRate(config.audioRate);\n    }\n  }\n\n  /**\n   * @ignore\n   */\n  private resolveVisualOptions(config?: AXWaveConfig) {\n    const primary200 = this.readCssRgbVar('--ax-sys-color-primary-200');\n    const primary700 = this.readCssRgbVar('--ax-sys-color-primary-700');\n\n    return {\n      waveColor: config?.waveColor ?? `rgba(${primary200})`,\n      progressColor: config?.progressColor ?? `rgba(${primary700})`,\n      barWidth: config?.barWidth ?? DEFAULT_BAR_WIDTH,\n      barGap: config?.barGap ?? DEFAULT_BAR_GAP,\n      barRadius: config?.barRadius ?? DEFAULT_BAR_RADIUS,\n      height: config?.height ?? DEFAULT_HEIGHT,\n    };\n  }\n\n  /**\n   * @ignore\n   */\n  private readCssRgbVar(name: string): string {\n    if (!isPlatformBrowser(this.platformId)) {\n      return FALLBACK_RGB;\n    }\n\n    return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || FALLBACK_RGB;\n  }\n\n  /**\n   * @ignore\n   */\n  private bindEvents(): void {\n    if (!this.audio) {\n      return;\n    }\n\n    this.audio.on('load', (url) => {\n      this.emitStatus('load', { url }, false);\n    });\n\n    this.audio.on('loading', (percent) => {\n      this.runInZone(() => {\n        this.errorMessage.set('');\n        this.audioState.set('loading');\n        this.emitStatus('loading', { percent }, false, false);\n      });\n    });\n\n    this.audio.on('decode', (duration) => {\n      this.emitStatus('decode', { duration }, false);\n    });\n\n    this.audio.on('ready', (duration) => {\n      this.runInZone(() => {\n        if (this.audioState() !== 'playing') {\n          this.audioState.set('ready');\n        }\n        this.emitStatus('ready', { duration }, false, false);\n      });\n    });\n\n    this.audio.on('redrawcomplete', () => {\n      this.emitStatus('redrawcomplete', null, false);\n    });\n\n    this.audio.on('play', () => {\n      this.runInZone(() => {\n        this.audioState.set('playing');\n        this.emitStatus('play', null, false, false);\n      });\n    });\n\n    this.audio.on('pause', () => {\n      this.runInZone(() => {\n        if (this.audioState() !== 'error') {\n          this.audioState.set('paused');\n        }\n        this.emitStatus('pause', null, false, false);\n      });\n    });\n\n    this.audio.on('finish', () => {\n      this.runInZone(() => {\n        this.audioState.set('paused');\n        this.emitStatus('finish', null, false, false);\n      });\n    });\n\n    this.audio.on('timeupdate', (currentTime) => {\n      this.emitStatus('timeupdate', { currentTime }, false);\n    });\n\n    this.audio.on('seeking', (currentTime) => {\n      this.emitStatus('seeking', { currentTime }, true);\n    });\n\n    this.audio.on('interaction', (newTime) => {\n      this.emitStatus('interaction', { newTime }, true);\n    });\n\n    this.audio.on('click', (relativeX, relativeY) => {\n      this.emitStatus('click', { relativeX, relativeY }, true);\n    });\n\n    this.audio.on('drag', (relativeX) => {\n      this.emitStatus('drag', { relativeX }, true);\n    });\n\n    this.audio.on('scroll', (visibleStartTime, visibleEndTime) => {\n      this.emitStatus('scroll', { visibleStartTime, visibleEndTime }, true);\n    });\n\n    this.audio.on('zoom', (minPxPerSec) => {\n      this.emitStatus('zoom', { minPxPerSec }, false);\n    });\n\n    this.audio.on('destroy', () => {\n      this.emitStatus('destroy', null, false);\n    });\n\n    this.audio.on('error', (error) => {\n      if (this.isAbortError(error)) {\n        return;\n      }\n      this.runInZone(() => {\n        const message = error?.message ?? '';\n        this.errorMessage.set(message);\n        this.audioState.set('error');\n        this.emitStatus('error', { message }, false, false);\n      });\n    });\n  }\n\n  /**\n   * @ignore\n   */\n  private swallowAbort(promise: Promise<unknown> | undefined): Promise<void> {\n    return Promise.resolve(promise).then(\n      () => undefined,\n      (error: unknown) => {\n        if (this.isAbortError(error)) {\n          return;\n        }\n        throw error;\n      },\n    );\n  }\n\n  /**\n   * @ignore\n   */\n  private isAbortError(error: unknown): boolean {\n    return (\n      (typeof DOMException !== 'undefined' && error instanceof DOMException && error.name === 'AbortError') ||\n      (error instanceof Error && (error.name === 'AbortError' || /aborted/i.test(error.message)))\n    );\n  }\n\n  /**\n   * @ignore\n   */\n  private emitStatus(\n    status: AXAudioWaveStatus,\n    data: AXAudioWaveEventPayload | null,\n    isUserInteraction: boolean,\n    wrapInZone = true,\n  ): void {\n    if (this.isDestroyed) {\n      return;\n    }\n\n    const emit = () => {\n      this.onStatusChanged.emit({\n        component: this,\n        data,\n        status,\n        isUserInteraction,\n      });\n    };\n\n    if (wrapInZone) {\n      this.runInZone(emit);\n      return;\n    }\n\n    emit();\n  }\n\n  /**\n   * @ignore\n   */\n  private runInZone(fn: () => void): void {\n    if (this.isDestroyed) {\n      return;\n    }\n\n    this.ngZone.run(fn);\n  }\n}\n","<div class=\"ax-audio-wave-host\" [class.ax-audio-wave-host--loading]=\"audioState() === 'loading'\">\n  <div class=\"ax-audio-wave\" #wave [class.ax-audio-wave--hidden]=\"!isWaveVisible()\"></div>\n\n  @switch (audioState()) {\n    @case ('loading') {\n      <ax-skeleton class=\"ax-audio-wave-skeleton\"></ax-skeleton>\n    }\n    @case ('error') {\n      <div class=\"ax-wave-message\">\n        {{ '@acorex:error.message' | translate: { params: { message: errorMessage() } } | async }}\n      </div>\n    }\n  }\n</div>\n","import { NgModule } from '@angular/core';\nimport { AXAudioWaveComponent } from './audio-wave.component';\n\n@NgModule({\n  exports: [AXAudioWaveComponent],\n  imports: [AXAudioWaveComponent],\n})\nexport class AXAudioWaveModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"acorex-components-audio-wave.mjs","sources":["../../../../packages/components/audio-wave/src/lib/audio-wave.component.ts","../../../../packages/components/audio-wave/src/lib/audio-wave.component.html","../../../../packages/components/audio-wave/src/lib/audio-wave.module.ts","../../../../packages/components/audio-wave/src/acorex-components-audio-wave.ts"],"sourcesContent":["import { AXComponent } from '@acorex/cdk/common';\nimport { AXSkeletonComponent } from '@acorex/components/skeleton';\nimport { AXTranslatorPipe } from '@acorex/core/translation';\nimport { AsyncPipe, isPlatformBrowser } from '@angular/common';\nimport {\n  afterRenderEffect,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  DestroyRef,\n  ElementRef,\n  inject,\n  input,\n  NgZone,\n  output,\n  PLATFORM_ID,\n  signal,\n  viewChild,\n  ViewEncapsulation,\n} from '@angular/core';\nimport WaveSurfer from 'wavesurfer.js';\nimport type {\n  AXAudioWaveChangeEvent,\n  AXAudioWaveEventPayload,\n  AXAudioWaveState,\n  AXAudioWaveStatus,\n  AXWaveConfig,\n} from './interfaces/audio-wave.interface';\n\nconst DEFAULT_BAR_WIDTH = 2;\nconst DEFAULT_BAR_GAP = 2;\nconst DEFAULT_BAR_RADIUS = 2;\nconst DEFAULT_HEIGHT = 36;\nconst FALLBACK_RGB = '128, 128, 128';\n\n/**\n * Displays and interacts with audio waveform visualization.\n *\n * @category Components\n */\n@Component({\n  selector: 'ax-audio-wave',\n  templateUrl: './audio-wave.component.html',\n  styleUrls: ['./audio-wave.component.css'],\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [AsyncPipe, AXTranslatorPipe, AXSkeletonComponent],\n  providers: [{ provide: AXComponent, useExisting: AXAudioWaveComponent }],\n  host: {\n    '[attr.aria-busy]': 'audioState() === \"loading\" || null',\n    '[attr.aria-invalid]': 'audioState() === \"error\" || null',\n  },\n})\nexport class AXAudioWaveComponent {\n  /**\n   * @ignore\n   */\n  private readonly wave = viewChild<ElementRef<HTMLDivElement>>('wave');\n\n  /**\n   * Configuration settings for the audio wave.\n   */\n  readonly config = input<AXWaveConfig>();\n\n  /**\n   * Emits an event when the status of the audio wave changes.\n   *\n   * @event\n   */\n  readonly onStatusChanged = output<AXAudioWaveChangeEvent>();\n\n  /**\n   * @ignore\n   */\n  protected readonly audioState = signal<AXAudioWaveState>('loading');\n\n  /**\n   * @ignore\n   */\n  protected readonly errorMessage = signal('');\n\n  /**\n   * @ignore\n   */\n  protected readonly isWaveVisible = computed(() => {\n    const state = this.audioState();\n    return state === 'ready' || state === 'playing' || state === 'paused';\n  });\n\n  /**\n   * @ignore\n   */\n  private audio: WaveSurfer | undefined;\n\n  /**\n   * @ignore\n   */\n  private loadedUrl = '';\n\n  /**\n   * @ignore\n   */\n  private lastVisualKey = '';\n\n  /**\n   * @ignore\n   */\n  private isDestroyed = false;\n\n  /**\n   * @ignore\n   */\n  private readonly ngZone = inject(NgZone);\n\n  /**\n   * @ignore\n   */\n  private readonly platformId = inject(PLATFORM_ID);\n\n  /**\n   * @ignore\n   */\n  private readonly destroyRef = inject(DestroyRef);\n\n  /**\n   * @ignore\n   */\n  constructor() {\n    afterRenderEffect(() => {\n      const container = this.wave()?.nativeElement;\n      const config = this.config();\n\n      if (this.isDestroyed || !isPlatformBrowser(this.platformId) || !container) {\n        return;\n      }\n\n      if (!this.audio) {\n        this.createWaveSurfer(container, config);\n        return;\n      }\n\n      this.syncFromConfig(config);\n    });\n\n    this.destroyRef.onDestroy(() => {\n      this.isDestroyed = true;\n      this.audio?.destroy();\n      this.audio = undefined;\n    });\n  }\n\n  /**\n   * Loads the audio from the specified URL.\n   *\n   * @param url - The URL of the audio to load. Defaults to the URL from the config.\n   * @returns A promise that resolves when loading starts, or immediately when unavailable.\n   */\n  load(url = this.config()?.url): Promise<void> {\n    const nextUrl = url?.trim();\n    if (!this.audio || !nextUrl) {\n      return Promise.resolve();\n    }\n\n    this.loadedUrl = nextUrl;\n    this.audioState.set('loading');\n    this.errorMessage.set('');\n    return this.swallowAbort(this.audio.load(nextUrl));\n  }\n\n  /**\n   * Plays the audio.\n   *\n   * @returns A promise that resolves when playback starts.\n   */\n  play(): Promise<void> {\n    return this.swallowAbort(this.audio?.play());\n  }\n\n  /**\n   * Pauses the audio.\n   */\n  pause(): void {\n    this.audio?.pause();\n  }\n\n  /**\n   * Retrieves the duration of the audio in seconds.\n   *\n   * @returns The audio duration, or `0` when unavailable.\n   */\n  getDuration(): number {\n    return this.audio?.getDuration() ?? 0;\n  }\n\n  /**\n   * Retrieves the underlying HTML media element.\n   *\n   * @returns The media element used by WaveSurfer, or `undefined` when unavailable.\n   */\n  getMediaElement(): HTMLMediaElement | undefined {\n    return this.audio?.getMediaElement();\n  }\n\n  /**\n   * Retrieves the current playback position in seconds.\n   *\n   * @returns The current time, or `0` when unavailable.\n   */\n  getCurrentTime(): number {\n    return this.audio?.getCurrentTime() ?? this.getMediaElement()?.currentTime ?? 0;\n  }\n\n  /**\n   * Sets the playback rate of the audio.\n   *\n   * @param rate - The playback rate to set.\n   */\n  setRate(rate: number): void {\n    this.audio?.setPlaybackRate(rate);\n  }\n\n  /**\n   * Mutes or unmutes the audio.\n   *\n   * @param muted - Whether the audio should be muted.\n   */\n  setMuted(muted: boolean): void {\n    this.audio?.setMuted(muted);\n  }\n\n  /**\n   * Indicates whether the audio is currently muted.\n   *\n   * @returns True when muted; otherwise false.\n   */\n  isMuted(): boolean {\n    return this.audio?.getMuted() ?? false;\n  }\n\n  /**\n   * @ignore\n   */\n  private createWaveSurfer(container: HTMLDivElement, config?: AXWaveConfig): void {\n    const visualOptions = this.resolveVisualOptions(config);\n    this.lastVisualKey = JSON.stringify(visualOptions);\n    this.audio = WaveSurfer.create({\n      container,\n      ...visualOptions,\n    });\n    this.bindEvents();\n    this.applyUrlAndRate(config);\n  }\n\n  /**\n   * @ignore\n   */\n  private syncFromConfig(config?: AXWaveConfig): void {\n    if (!this.audio) {\n      return;\n    }\n\n    const visualOptions = this.resolveVisualOptions(config);\n    const visualKey = JSON.stringify(visualOptions);\n    if (visualKey !== this.lastVisualKey) {\n      this.lastVisualKey = visualKey;\n      this.audio.setOptions(visualOptions);\n    }\n\n    this.applyUrlAndRate(config);\n  }\n\n  /**\n   * @ignore\n   */\n  private applyUrlAndRate(config?: AXWaveConfig): void {\n    const url = config?.url?.trim() ?? '';\n    if (url && url !== this.loadedUrl) {\n      this.loadedUrl = url;\n      void this.swallowAbort(this.audio?.load(url));\n    } else if (!url) {\n      queueMicrotask(() => {\n        if (!this.isDestroyed && !this.loadedUrl && this.audioState() === 'loading') {\n          this.audioState.set('paused');\n        }\n      });\n    }\n\n    if (config?.audioRate != null) {\n      this.audio?.setPlaybackRate(config.audioRate);\n    }\n  }\n\n  /**\n   * @ignore\n   */\n  private resolveVisualOptions(config?: AXWaveConfig) {\n    const primary200 = this.readCssRgbVar('--ax-sys-color-primary-200');\n    const primary700 = this.readCssRgbVar('--ax-sys-color-primary-700');\n\n    return {\n      waveColor: config?.waveColor ?? `rgba(${primary200})`,\n      progressColor: config?.progressColor ?? `rgba(${primary700})`,\n      barWidth: config?.barWidth ?? DEFAULT_BAR_WIDTH,\n      barGap: config?.barGap ?? DEFAULT_BAR_GAP,\n      barRadius: config?.barRadius ?? DEFAULT_BAR_RADIUS,\n      height: config?.height ?? DEFAULT_HEIGHT,\n    };\n  }\n\n  /**\n   * @ignore\n   */\n  private readCssRgbVar(name: string): string {\n    if (!isPlatformBrowser(this.platformId)) {\n      return FALLBACK_RGB;\n    }\n\n    return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || FALLBACK_RGB;\n  }\n\n  /**\n   * @ignore\n   */\n  private bindEvents(): void {\n    if (!this.audio) {\n      return;\n    }\n\n    this.audio.on('load', (url) => {\n      this.emitStatus('load', { url }, false);\n    });\n\n    this.audio.on('loading', (percent) => {\n      this.runInZone(() => {\n        this.errorMessage.set('');\n        this.audioState.set('loading');\n        this.emitStatus('loading', { percent }, false, false);\n      });\n    });\n\n    this.audio.on('decode', (duration) => {\n      this.emitStatus('decode', { duration }, false);\n    });\n\n    this.audio.on('ready', (duration) => {\n      this.runInZone(() => {\n        if (this.audioState() !== 'playing') {\n          this.audioState.set('ready');\n        }\n        this.emitStatus('ready', { duration }, false, false);\n      });\n    });\n\n    this.audio.on('redrawcomplete', () => {\n      this.emitStatus('redrawcomplete', null, false);\n    });\n\n    this.audio.on('play', () => {\n      this.runInZone(() => {\n        this.audioState.set('playing');\n        this.emitStatus('play', null, false, false);\n      });\n    });\n\n    this.audio.on('pause', () => {\n      this.runInZone(() => {\n        if (this.audioState() !== 'error') {\n          this.audioState.set('paused');\n        }\n        this.emitStatus('pause', null, false, false);\n      });\n    });\n\n    this.audio.on('finish', () => {\n      this.runInZone(() => {\n        this.audioState.set('paused');\n        this.emitStatus('finish', null, false, false);\n      });\n    });\n\n    this.audio.on('timeupdate', (currentTime) => {\n      this.emitStatus('timeupdate', { currentTime }, false);\n    });\n\n    this.audio.on('seeking', (currentTime) => {\n      this.emitStatus('seeking', { currentTime }, true);\n    });\n\n    this.audio.on('interaction', (newTime) => {\n      this.emitStatus('interaction', { newTime }, true);\n    });\n\n    this.audio.on('click', (relativeX, relativeY) => {\n      this.emitStatus('click', { relativeX, relativeY }, true);\n    });\n\n    this.audio.on('drag', (relativeX) => {\n      this.emitStatus('drag', { relativeX }, true);\n    });\n\n    this.audio.on('scroll', (visibleStartTime, visibleEndTime) => {\n      this.emitStatus('scroll', { visibleStartTime, visibleEndTime }, true);\n    });\n\n    this.audio.on('zoom', (minPxPerSec) => {\n      this.emitStatus('zoom', { minPxPerSec }, false);\n    });\n\n    this.audio.on('destroy', () => {\n      this.emitStatus('destroy', null, false);\n    });\n\n    this.audio.on('error', (error) => {\n      if (this.isAbortError(error)) {\n        return;\n      }\n      this.runInZone(() => {\n        const message = error?.message ?? '';\n        this.errorMessage.set(message);\n        this.audioState.set('error');\n        this.emitStatus('error', { message }, false, false);\n      });\n    });\n  }\n\n  /**\n   * @ignore\n   */\n  private swallowAbort(promise: Promise<unknown> | undefined): Promise<void> {\n    return Promise.resolve(promise).then(\n      () => undefined,\n      (error: unknown) => {\n        if (this.isAbortError(error)) {\n          return;\n        }\n        throw error;\n      },\n    );\n  }\n\n  /**\n   * @ignore\n   */\n  private isAbortError(error: unknown): boolean {\n    return (\n      (typeof DOMException !== 'undefined' && error instanceof DOMException && error.name === 'AbortError') ||\n      (error instanceof Error && (error.name === 'AbortError' || /aborted/i.test(error.message)))\n    );\n  }\n\n  /**\n   * @ignore\n   */\n  private emitStatus(\n    status: AXAudioWaveStatus,\n    data: AXAudioWaveEventPayload | null,\n    isUserInteraction: boolean,\n    wrapInZone = true,\n  ): void {\n    if (this.isDestroyed) {\n      return;\n    }\n\n    const emit = () => {\n      this.onStatusChanged.emit({\n        component: this,\n        data,\n        status,\n        isUserInteraction,\n      });\n    };\n\n    if (wrapInZone) {\n      this.runInZone(emit);\n      return;\n    }\n\n    emit();\n  }\n\n  /**\n   * @ignore\n   */\n  private runInZone(fn: () => void): void {\n    if (this.isDestroyed) {\n      return;\n    }\n\n    this.ngZone.run(fn);\n  }\n}\n","<div class=\"ax-audio-wave-host\" [class.ax-audio-wave-host--loading]=\"audioState() === 'loading'\">\n  <div class=\"ax-audio-wave\" #wave [class.ax-audio-wave--hidden]=\"!isWaveVisible()\"></div>\n\n  @switch (audioState()) {\n    @case ('loading') {\n      <ax-skeleton class=\"ax-audio-wave-skeleton\"></ax-skeleton>\n    }\n    @case ('error') {\n      <div class=\"ax-wave-message\">\n        {{ '@acorex:error.message' | translate: { params: { message: errorMessage() } } | async }}\n      </div>\n    }\n  }\n</div>\n","import { NgModule } from '@angular/core';\nimport { AXAudioWaveComponent } from './audio-wave.component';\n\n@NgModule({\n  exports: [AXAudioWaveComponent],\n  imports: [AXAudioWaveComponent],\n})\nexport class AXAudioWaveModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/acorex-components-combo-box.mjs

@@ -503,6 +503,16 @@ class AXComboBoxComponent extends NXValueComponent {
         }
         this.expanded.update((open) => !open);
     }
+    /**
+     * Toggles the popup when the chevron button is clicked.
+     */
+    onChevronClick(event) {
+        event.stopPropagation();
+        if (this.disabled() || this.readonly()) {
+            return;
+        }
+        this.expanded.update((open) => !open);
+    }
     /**
      * Keyboard handling on the trigger:
      * - Searchable: Enter never submits the form; with no matches the value is cleared (`null`).
@@ -861,7 +871,7 @@ class AXComboBoxComponent extends NXValueComponent {
             { provide: AXClearableComponent, useExisting: AXComboBoxComponent },
             { provide: AXClosableComponent, useExisting: AXComboBoxComponent },
             { provide: AXValuableComponent, useExisting: AXComboBoxComponent },
-        ], viewQueries: [{ propertyName: "comboboxRef", first: true, predicate: Combobox, descendants: true, isSignal: true }, { propertyName: "listboxRef", first: true, predicate: Listbox, descendants: true, isSignal: true }, { propertyName: "popoverRef", first: true, predicate: AXPopoverComponent, descendants: true, isSignal: true }, { propertyName: "originRef", first: true, predicate: ["origin"], descendants: true, isSignal: true }, { propertyName: "popupRef", first: true, predicate: ["popup"], descendants: true, isSignal: true }, { propertyName: "sheetSearchRef", first: true, predicate: ["sheetSearch"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n  #origin\n  class=\"ax-editor-container ax-{{ look() }} ax-default\"\n  [class.ax-combo-box-trigger]=\"!isEditableTrigger()\"\n  [class.ax-combo-box-trigger-multiple]=\"multiple()\"\n  [class.ax-state-disabled]=\"disabled()\"\n  [class.ax-state-readonly]=\"readonly()\"\n>\n  <ng-content select=\"ax-prefix\"></ng-content>\n\n  <div class=\"ax-combo-box-value\" [class.ax-combo-box-chips]=\"multiple()\">\n    @if (multiple()) {\n      @for (item of selectedItems(); track item.id) {\n        <ax-chips class=\"ax-sm\" look=\"fill\" [text]=\"selectedTemplate() ? '' : (item.text | translate | async)\">\n          @if (selectedTemplate()) {\n            <ax-prefix>\n              <ng-container\n                [ngTemplateOutlet]=\"selectedTemplate()!\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"\n              />\n            </ax-prefix>\n          }\n          @if (!disabled() && !readonly()) {\n            <ax-suffix>\n              <button type=\"button\" tabindex=\"-1\" (click)=\"removeChip($event, item)\">\n                <span class=\"ax-icon ax-icon-close\"></span>\n              </button>\n            </ax-suffix>\n          }\n        </ax-chips>\n      }\n    } @else if (showSelectedTemplate()) {\n      <div class=\"ax-combo-box-selected-content\" aria-hidden=\"true\">\n        <ng-container\n          [ngTemplateOutlet]=\"selectedTemplate()!\"\n          [ngTemplateOutletContext]=\"{ $implicit: selectedItem() }\"\n        />\n      </div>\n    }\n\n    <input\n      ngCombobox\n      #combobox=\"ngCombobox\"\n      type=\"text\"\n      class=\"ax-input\"\n      [class.ax-combo-box-trigger-search]=\"multiple()\"\n      [class.ax-combo-box-select-input]=\"!isEditableTrigger()\"\n      [class.ax-combo-box-input-overlay]=\"!multiple() && showSelectedTemplate()\"\n      [placeholder]=\"multiple() ? triggerSearchPlaceholder() : translatedPlaceholder()\"\n      [disabled]=\"disabled()\"\n      [readonly]=\"readonly() || !isEditableTrigger()\"\n      [attr.inputmode]=\"isEditableTrigger() ? null : 'none'\"\n      [(value)]=\"searchText\"\n      [expanded]=\"expanded()\"\n      (expandedChange)=\"onExpandedChange($event)\"\n      (click)=\"onTriggerClick()\"\n      (keydown)=\"onTriggerKeydown($event)\"\n      (beforeinput)=\"onBeforeInput($event)\"\n      (focus)=\"emitOnFocus($event)\"\n      (blur)=\"emitOnBlur($event)\"\n    />\n  </div>\n\n  @if (hasSelection() && !disabled() && !readonly()) {\n    <ng-content select=\"ax-clear-button\"></ng-content>\n  }\n\n  <button\n    type=\"button\"\n    class=\"ax-general-button-icon\"\n    tabindex=\"-1\"\n    [disabled]=\"disabled() || readonly()\"\n    (click)=\"onTriggerClick()\"\n  >\n    <span class=\"ax-icon\" [class.ax-icon-chevron-down]=\"!expanded()\" [class.ax-icon-chevron-up]=\"expanded()\"></span>\n  </button>\n  <ng-content select=\"ax-suffix\"></ng-content>\n</div>\n\n<ax-popover\n  [target]=\"origin\"\n  [openOn]=\"'manual'\"\n  [closeOn]=\"isActionsheetStyle() ? 'manual' : 'clickOut'\"\n  [closeOnScroll]=\"!isActionsheetStyle()\"\n  [placement]=\"'bottom-start'\"\n  [width]=\"isActionsheetStyle() ? '100%' : origin.offsetWidth + 'px'\"\n  [adaptivityEnabled]=\"isActionsheetStyle()\"\n  [disabled]=\"disabled() || readonly()\"\n  (onOpened)=\"onPopoverOpened()\"\n  (onClosed)=\"onPopoverClosed()\"\n>\n  <div\n    #popup\n    class=\"ax-combo-box-popup\"\n    [class.ax-is-empty]=\"hasNoMatches()\"\n    [class.ax-is-actionsheet]=\"isActionsheetStyle()\"\n    (keydown.escape)=\"close()\"\n  >\n    @if (isActionsheetStyle()) {\n      <ax-header class=\"ax-solid\">\n        <ax-title>{{ actionsheetTitle() }}</ax-title>\n        @if (multiple()) {\n          <ax-button\n            class=\"ax-sm\"\n            color=\"primary\"\n            look=\"solid\"\n            text=\"@acorex:common.actions.apply\"\n            (onClick)=\"close()\"\n          ></ax-button>\n        } @else {\n          <ax-close-button></ax-close-button>\n        }\n      </ax-header>\n    }\n    @if (isSheetSearchEnabled()) {\n      <div class=\"ax-combo-box-sheet-search\">\n        <ax-search-box\n          #sheetSearch\n          class=\"ax-sm\"\n          look=\"fill\"\n          [autoSearch]=\"false\"\n          [delayTime]=\"0\"\n          [placeholder]=\"searchPlaceholder()\"\n          (onValueChanged)=\"onSheetSearchInput()\"\n          (onKeyUp)=\"onSheetSearchInput()\"\n          (onKeyDown)=\"onSheetSearchKeydown($event)\"\n        >\n          <ax-clear-button></ax-clear-button>\n        </ax-search-box>\n      </div>\n    }\n    <ng-content select=\"ax-header\"></ng-content>\n    @if (expanded()) {\n      @if (hasNoMatches()) {\n        @if (emptyTemplate()) {\n          <ng-container [ngTemplateOutlet]=\"emptyTemplate()!\" />\n        } @else {\n          <div class=\"ax-combo-box-empty\">{{ '@acorex:common.general.no-result-found' | translate | async }}</div>\n        }\n      }\n      @if (isActionsheetStyle()) {\n        <div\n          ngListbox\n          class=\"ax-combo-box-listbox\"\n          [class.ax-hidden]=\"hasNoMatches()\"\n          focusMode=\"activedescendant\"\n          selectionMode=\"explicit\"\n          [multi]=\"multiple()\"\n          [tabindex]=\"-1\"\n          [(value)]=\"selection\"\n          (click)=\"commit($event)\"\n        >\n          @for (item of filteredItems(); track trackItemKey($index, item); let odd = $odd) {\n            <div\n              ngOption\n              class=\"ax-combo-box-option-host\"\n              [class.ax-combo-box-option]=\"!itemTemplate()\"\n              [class.ax-combo-box-option-multiple]=\"multiple()\"\n              [class.ax-state-alternate]=\"alternate() && odd\"\n              [value]=\"item.id\"\n              [label]=\"item.text | translate | async\"\n            >\n              <ng-container [ngTemplateOutlet]=\"optionContent\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n            </div>\n          }\n        </div>\n      } @else {\n        <ng-template ngComboboxPopup [combobox]=\"combobox\">\n          <div\n            ngListbox\n            ngComboboxWidget\n            #listbox=\"ngListbox\"\n            class=\"ax-combo-box-listbox\"\n            [class.ax-hidden]=\"hasNoMatches()\"\n            focusMode=\"activedescendant\"\n            selectionMode=\"explicit\"\n            [multi]=\"multiple()\"\n            [tabindex]=\"-1\"\n            [activeDescendant]=\"listbox.activeDescendant()\"\n            [(value)]=\"selection\"\n            (click)=\"commit($event)\"\n            (keydown.enter)=\"onListEnter($event)\"\n            (keydown.space)=\"commit()\"\n          >\n            @for (item of filteredItems(); track trackItemKey($index, item); let odd = $odd) {\n              <div\n                ngOption\n                class=\"ax-combo-box-option-host\"\n                [class.ax-combo-box-option]=\"!itemTemplate()\"\n                [class.ax-combo-box-option-multiple]=\"multiple()\"\n                [class.ax-state-alternate]=\"alternate() && odd\"\n                [value]=\"item.id\"\n                [label]=\"item.text | translate | async\"\n              >\n                <ng-container [ngTemplateOutlet]=\"optionContent\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n              </div>\n            }\n          </div>\n        </ng-template>\n      }\n    }\n    <ng-content select=\"ax-footer\"></ng-content>\n  </div>\n</ax-popover>\n<ng-template #optionContent let-item>\n  @if (multiple()) {\n    <ax-check-box\n      class=\"ax-combo-box-checkbox\"\n      [tabIndex]=\"-1\"\n      [value]=\"isItemSelected(item)\"\n    ></ax-check-box>\n  }\n  @if (itemTemplate()) {\n    <ng-container\n      [ngTemplateOutlet]=\"itemTemplate()!\"\n      [ngTemplateOutletContext]=\"{ $implicit: item, highlightText: highlightQuery() }\"\n    />\n  } @else {\n    <span class=\"ax-combo-box-option-label\">\n      <ax-highlight-text [text]=\"item.text | translate | async\" [query]=\"highlightQuery()\" />\n    </span>\n    @if (!multiple() && isItemSelected(item)) {\n      <ax-icon class=\"ax-combo-box-option-check ax-icon ax-icon-check\" aria-hidden=\"true\"></ax-icon>\n    }\n  }\n</ng-template>\n<ng-content select=\"ax-validation-rule\"></ng-content>\n", styles: ["@layer properties;@layer components{ax-combo-box{display:block;width:100%}ax-combo-box .ax-editor-container{justify-content:flex-start;gap:calc(var(--spacing, .25rem) * 1)}ax-combo-box .ax-combo-box-trigger{cursor:pointer;-webkit-user-select:none;user-select:none}ax-combo-box .ax-combo-box-trigger-multiple{height:auto!important;min-height:var(--ax-comp-editor-height);padding-block:calc(var(--spacing, .25rem) * 1)}ax-combo-box .ax-combo-box-value{position:relative;display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;align-items:center;overflow:hidden}ax-combo-box .ax-combo-box-chips{display:flex;flex-wrap:wrap;align-content:center;align-items:center;gap:calc(var(--spacing, .25rem) * 1);overflow:visible}ax-combo-box .ax-combo-box-trigger-search{margin:calc(var(--spacing, .25rem) * 0)!important;height:calc(var(--spacing, .25rem) * 7.5);width:auto!important;min-width:calc(var(--spacing, .25rem) * 16);flex:1;flex-basis:calc(var(--spacing, .25rem) * 16)}ax-combo-box .ax-combo-box-selected-content{pointer-events:none;position:relative;z-index:0;display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;align-items:center;overflow:hidden}ax-combo-box .ax-combo-box-select-input{cursor:pointer;caret-color:transparent;-webkit-user-select:none;user-select:none}ax-combo-box .ax-combo-box-input-overlay{position:absolute;inset:calc(var(--spacing, .25rem) * 0);z-index:10;margin:calc(var(--spacing, .25rem) * 0)!important;height:100%;width:100%;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0)!important;color:transparent;caret-color:transparent}ax-combo-box ax-chips ax-prefix,ax-combo-box ax-chips ax-suffix{padding:calc(var(--spacing, .25rem) * 0)!important}ax-combo-box ax-chips ax-suffix button{display:flex;cursor:pointer;align-items:center;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0)}.ax-combo-box-popup{--ax-comp-combo-box-popup-max-height: 15rem;--ax-comp-combo-box-highlight-bg-color: var(--ax-sys-color-warning-lighter-surface);--ax-comp-combo-box-highlight-text-color: var(--ax-sys-color-on-warning-lighter-surface);--ax-comp-combo-box-highlight-border-color: var(--ax-sys-color-warning-500);box-sizing:border-box;display:flex;width:100%;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0);flex-direction:column;overflow:hidden;border-radius:var(--ax-sys-border-radius);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-surface));background-color:rgba(var(--ax-sys-color-lightest-surface));--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ax-combo-box-popup .ax-highlight{display:inline;margin:0;padding:0;background-color:rgb(var(--ax-comp-combo-box-highlight-bg-color));color:rgb(var(--ax-comp-combo-box-highlight-text-color));font-weight:inherit;box-shadow:none}.ax-combo-box-popup:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-darkest-surface))}.ax-combo-box-popup.ax-is-empty{min-height:calc(var(--spacing, .25rem) * 12)}.ax-combo-box-popup.ax-is-actionsheet{--ax-comp-combo-box-popup-max-height: none;height:100dvh;max-height:100dvh;min-height:100dvh;border-bottom-right-radius:0;border-bottom-left-radius:0;--tw-shadow: 0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ax-combo-box-popup.ax-is-actionsheet.ax-is-empty{min-height:100dvh}.ax-combo-box-popup.ax-is-actionsheet>ax-header.ax-solid{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}.ax-combo-box-popup.ax-is-actionsheet>ax-header.ax-solid ax-title{min-width:calc(var(--spacing, .25rem) * 0);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-leading: calc(var(--spacing, .25rem) * 6);line-height:calc(var(--spacing, .25rem) * 6);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.ax-combo-box-popup.ax-is-actionsheet>ax-header.ax-solid ax-button{flex-shrink:0}.ax-combo-box-popup.ax-is-actionsheet .ax-combo-box-listbox{min-height:calc(var(--spacing, .25rem) * 0);flex:1;max-height:none}.ax-combo-box-popup.ax-is-actionsheet .ax-combo-box-empty{display:flex;flex:1;align-items:center;justify-content:center}.ax-combo-box-popup .ax-combo-box-sheet-search{flex-shrink:0;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}.ax-combo-box-popup>ax-header:not(.ax-solid),.ax-combo-box-popup>ax-footer{flex-shrink:0;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}.ax-combo-box-popup>ax-header:not(.ax-solid){border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.ax-combo-box-popup>ax-footer{border-top-style:var(--tw-border-style);border-top-width:1px}.ax-combo-box-listbox{display:flex;max-height:var(--ax-comp-combo-box-popup-max-height);min-width:calc(var(--spacing, .25rem) * 0);flex-direction:column;overflow-x:hidden;overflow-y:auto;--tw-outline-style: none;outline-style:none}.ax-combo-box-listbox.ax-hidden{display:none}.ax-combo-box-empty{width:100%;padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 3);text-align:center;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-combo-box-empty{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 60%,transparent)}}.ax-combo-box-option-host{box-sizing:border-box;cursor:pointer;border-style:var(--tw-border-style);border-width:1px;border-color:transparent;--tw-outline-style: none;outline-style:none}.ax-combo-box-option-host.ax-state-alternate{background-color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-combo-box-option-host.ax-state-alternate{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 5%,transparent)}}.ax-combo-box-option-host:hover,.ax-combo-box-option-host[data-active=true]{background-color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-combo-box-option-host:hover,.ax-combo-box-option-host[data-active=true]{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 10%,transparent)}}.ax-combo-box-option-host.ax-state-alternate:hover,.ax-combo-box-option-host.ax-state-alternate[data-active=true]{background-color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-combo-box-option-host.ax-state-alternate:hover,.ax-combo-box-option-host.ax-state-alternate[data-active=true]{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 15%,transparent)}}.ax-combo-box-option-host[aria-selected=true],.ax-combo-box-option-host[aria-selected=true]:hover,.ax-combo-box-option-host[aria-selected=true][data-active=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true]:hover,.ax-combo-box-option-host.ax-state-alternate[aria-selected=true][data-active=true]{background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}:is(.ax-combo-box-option-host[aria-selected=true],.ax-combo-box-option-host[aria-selected=true]:hover,.ax-combo-box-option-host[aria-selected=true][data-active=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true]:hover,.ax-combo-box-option-host.ax-state-alternate[aria-selected=true][data-active=true]):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-primary-darkest-surface))}@supports (color: color-mix(in lab,red,red)){:is(.ax-combo-box-option-host[aria-selected=true],.ax-combo-box-option-host[aria-selected=true]:hover,.ax-combo-box-option-host[aria-selected=true][data-active=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true]:hover,.ax-combo-box-option-host.ax-state-alternate[aria-selected=true][data-active=true]):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-darkest-surface)) 25%,transparent)}}.ax-combo-box-option-host[aria-selected=true][data-active=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true][data-active=true]{background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}@supports (color: color-mix(in lab,red,red)){.ax-combo-box-option-host[aria-selected=true][data-active=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true][data-active=true]{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-lightest-surface)) 80%,transparent)}}:is(.ax-combo-box-option-host[aria-selected=true][data-active=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true][data-active=true]):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-primary-darkest-surface))}@supports (color: color-mix(in lab,red,red)){:is(.ax-combo-box-option-host[aria-selected=true][data-active=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true][data-active=true]):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-darkest-surface)) 40%,transparent)}}.ax-combo-box-option-host.ax-combo-box-option-multiple{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}.ax-combo-box-option-host.ax-combo-box-option-multiple:not(.ax-combo-box-option){padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}.ax-combo-box-option-host .ax-combo-box-checkbox{pointer-events:none;display:inline-flex;flex-shrink:0;align-items:center}.ax-combo-box-option{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-on-surface))}.ax-combo-box-option[aria-selected=true]{color:rgba(var(--ax-sys-color-primary-surface))}.ax-combo-box-option.ax-combo-box-option-multiple{justify-content:flex-start}.ax-combo-box-option .ax-combo-box-option-label{min-width:calc(var(--spacing, .25rem) * 0);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ax-combo-box-option .ax-combo-box-option-check{flex-shrink:0;color:rgba(var(--ax-sys-color-primary-surface))}}ax-combo-box .ax-editor-container.ax-fill ax-chips.ax-default.ax-fill-interactive{background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);border-color:rgba(var(--ax-sys-color-border-surface))}ax-combo-box .ax-editor-container.ax-fill ax-chips.ax-default.ax-fill-interactive:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter)}ax-combo-box .ax-editor-container.ax-fill ax-chips.ax-default.ax-fill-interactive:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){border-color:rgba(var(--ax-sys-color-border-light-surface))}ax-combo-box .ax-editor-container.ax-fill ax-chips.ax-default.ax-fill-interactive:not(.ax-state-disabled):hover{background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter)}ax-combo-box .ax-editor-container.ax-fill ax-chips.ax-default.ax-fill-interactive:not(.ax-state-disabled):hover:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:var(--color-light);color:var(--color-on-light);border-color:var(--color-border-light)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-leading: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "component", type: AXChipsComponent, selector: "ax-chips", inputs: ["tabIndex", "color", "look", "text"], outputs: ["textChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i1.AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["closeAll", "icon"] }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "directive", type: Combobox, selector: "[ngCombobox]", inputs: ["disabled", "readonly", "softDisabled", "alwaysExpanded", "tabindex", "expanded", "value", "inlineSuggestion"], outputs: ["expandedChange", "valueChange"], exportAs: ["ngCombobox"] }, { kind: "directive", type: ComboboxPopup, selector: "ng-template[ngComboboxPopup]", inputs: ["combobox", "popupType"], exportAs: ["ngComboboxPopup"] }, { kind: "directive", type: ComboboxWidget, selector: "[ngComboboxWidget]", inputs: ["activeDescendant"], exportAs: ["ngComboboxWidget"] }, { kind: "directive", type: Listbox, selector: "[ngListbox]", inputs: ["id", "orientation", "multi", "wrap", "softDisabled", "focusMode", "selectionMode", "typeaheadDelay", "disabled", "readonly", "tabindex", "value"], outputs: ["valueChange"], exportAs: ["ngListbox"] }, { kind: "directive", type: Option, selector: "[ngOption]", inputs: ["id", "value", "disabled", "label"], exportAs: ["ngOption"] }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "visualContextScope", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: AXHighlightTextComponent, selector: "ax-highlight-text", inputs: ["text", "query", "highlightDisabled", "highlightOptions"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "comboboxRef", first: true, predicate: Combobox, descendants: true, isSignal: true }, { propertyName: "listboxRef", first: true, predicate: Listbox, descendants: true, isSignal: true }, { propertyName: "popoverRef", first: true, predicate: AXPopoverComponent, descendants: true, isSignal: true }, { propertyName: "originRef", first: true, predicate: ["origin"], descendants: true, isSignal: true }, { propertyName: "popupRef", first: true, predicate: ["popup"], descendants: true, isSignal: true }, { propertyName: "sheetSearchRef", first: true, predicate: ["sheetSearch"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n  #origin\n  class=\"ax-editor-container ax-{{ look() }} ax-default\"\n  [class.ax-combo-box-trigger]=\"!isEditableTrigger()\"\n  [class.ax-combo-box-trigger-multiple]=\"multiple()\"\n  [class.ax-state-disabled]=\"disabled()\"\n  [class.ax-state-readonly]=\"readonly()\"\n>\n  <ng-content select=\"ax-prefix\"></ng-content>\n\n  <div class=\"ax-combo-box-value\" [class.ax-combo-box-chips]=\"multiple()\">\n    @if (multiple()) {\n      @for (item of selectedItems(); track item.id) {\n        <ax-chips class=\"ax-sm\" look=\"fill\" [text]=\"selectedTemplate() ? '' : (item.text | translate | async)\">\n          @if (selectedTemplate()) {\n            <ax-prefix>\n              <ng-container\n                [ngTemplateOutlet]=\"selectedTemplate()!\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"\n              />\n            </ax-prefix>\n          }\n          @if (!disabled() && !readonly()) {\n            <ax-suffix>\n              <button type=\"button\" tabindex=\"-1\" (click)=\"removeChip($event, item)\">\n                <span class=\"ax-icon ax-icon-close\"></span>\n              </button>\n            </ax-suffix>\n          }\n        </ax-chips>\n      }\n    } @else if (showSelectedTemplate()) {\n      <div class=\"ax-combo-box-selected-content\" aria-hidden=\"true\">\n        <ng-container\n          [ngTemplateOutlet]=\"selectedTemplate()!\"\n          [ngTemplateOutletContext]=\"{ $implicit: selectedItem() }\"\n        />\n      </div>\n    }\n\n    <input\n      ngCombobox\n      #combobox=\"ngCombobox\"\n      type=\"text\"\n      class=\"ax-input\"\n      [class.ax-combo-box-trigger-search]=\"multiple()\"\n      [class.ax-combo-box-select-input]=\"!isEditableTrigger()\"\n      [class.ax-combo-box-input-overlay]=\"!multiple() && showSelectedTemplate()\"\n      [placeholder]=\"multiple() ? triggerSearchPlaceholder() : translatedPlaceholder()\"\n      [disabled]=\"disabled()\"\n      [readonly]=\"readonly() || !isEditableTrigger()\"\n      [attr.inputmode]=\"isEditableTrigger() ? null : 'none'\"\n      [(value)]=\"searchText\"\n      [expanded]=\"expanded()\"\n      (expandedChange)=\"onExpandedChange($event)\"\n      (click)=\"onTriggerClick()\"\n      (keydown)=\"onTriggerKeydown($event)\"\n      (beforeinput)=\"onBeforeInput($event)\"\n      (focus)=\"emitOnFocus($event)\"\n      (blur)=\"emitOnBlur($event)\"\n    />\n  </div>\n\n  @if (hasSelection() && !disabled() && !readonly()) {\n    <ng-content select=\"ax-clear-button\"></ng-content>\n  }\n\n  <button\n    type=\"button\"\n    class=\"ax-general-button-icon\"\n    tabindex=\"-1\"\n    [disabled]=\"disabled() || readonly()\"\n    (mousedown)=\"$event.preventDefault()\"\n    (click)=\"onChevronClick($event)\"\n  >\n    <span class=\"ax-icon\" [class.ax-icon-chevron-down]=\"!expanded()\" [class.ax-icon-chevron-up]=\"expanded()\"></span>\n  </button>\n  <ng-content select=\"ax-suffix\"></ng-content>\n</div>\n\n<ax-popover\n  [target]=\"origin\"\n  [openOn]=\"'manual'\"\n  [closeOn]=\"isActionsheetStyle() ? 'manual' : 'clickOut'\"\n  [closeOnScroll]=\"!isActionsheetStyle()\"\n  [placement]=\"'bottom-start'\"\n  [width]=\"isActionsheetStyle() ? '100%' : origin.offsetWidth + 'px'\"\n  [adaptivityEnabled]=\"isActionsheetStyle()\"\n  [disabled]=\"disabled() || readonly()\"\n  (onOpened)=\"onPopoverOpened()\"\n  (onClosed)=\"onPopoverClosed()\"\n>\n  <div\n    #popup\n    class=\"ax-combo-box-popup\"\n    [class.ax-is-empty]=\"hasNoMatches()\"\n    [class.ax-is-actionsheet]=\"isActionsheetStyle()\"\n    (keydown.escape)=\"close()\"\n  >\n    @if (isActionsheetStyle()) {\n      <ax-header class=\"ax-solid\">\n        <ax-title>{{ actionsheetTitle() }}</ax-title>\n        @if (multiple()) {\n          <ax-button\n            class=\"ax-sm\"\n            color=\"primary\"\n            look=\"solid\"\n            text=\"@acorex:common.actions.apply\"\n            (onClick)=\"close()\"\n          ></ax-button>\n        } @else {\n          <ax-close-button></ax-close-button>\n        }\n      </ax-header>\n    }\n    @if (isSheetSearchEnabled()) {\n      <div class=\"ax-combo-box-sheet-search\">\n        <ax-search-box\n          #sheetSearch\n          class=\"ax-sm\"\n          look=\"fill\"\n          [autoSearch]=\"false\"\n          [delayTime]=\"0\"\n          [placeholder]=\"searchPlaceholder()\"\n          (onValueChanged)=\"onSheetSearchInput()\"\n          (onKeyUp)=\"onSheetSearchInput()\"\n          (onKeyDown)=\"onSheetSearchKeydown($event)\"\n        >\n          <ax-clear-button></ax-clear-button>\n        </ax-search-box>\n      </div>\n    }\n    <ng-content select=\"ax-header\"></ng-content>\n    @if (expanded()) {\n      @if (hasNoMatches()) {\n        @if (emptyTemplate()) {\n          <ng-container [ngTemplateOutlet]=\"emptyTemplate()!\" />\n        } @else {\n          <div class=\"ax-combo-box-empty\">{{ '@acorex:common.general.no-result-found' | translate | async }}</div>\n        }\n      }\n      @if (isActionsheetStyle()) {\n        <div\n          ngListbox\n          class=\"ax-combo-box-listbox\"\n          [class.ax-hidden]=\"hasNoMatches()\"\n          focusMode=\"activedescendant\"\n          selectionMode=\"explicit\"\n          [multi]=\"multiple()\"\n          [tabindex]=\"-1\"\n          [(value)]=\"selection\"\n          (click)=\"commit($event)\"\n        >\n          @for (item of filteredItems(); track trackItemKey($index, item); let odd = $odd) {\n            <div\n              ngOption\n              class=\"ax-combo-box-option-host\"\n              [class.ax-combo-box-option]=\"!itemTemplate()\"\n              [class.ax-combo-box-option-multiple]=\"multiple()\"\n              [class.ax-state-alternate]=\"alternate() && odd\"\n              [value]=\"item.id\"\n              [label]=\"item.text | translate | async\"\n            >\n              <ng-container [ngTemplateOutlet]=\"optionContent\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n            </div>\n          }\n        </div>\n      } @else {\n        <ng-template ngComboboxPopup [combobox]=\"combobox\">\n          <div\n            ngListbox\n            ngComboboxWidget\n            #listbox=\"ngListbox\"\n            class=\"ax-combo-box-listbox\"\n            [class.ax-hidden]=\"hasNoMatches()\"\n            focusMode=\"activedescendant\"\n            selectionMode=\"explicit\"\n            [multi]=\"multiple()\"\n            [tabindex]=\"-1\"\n            [activeDescendant]=\"listbox.activeDescendant()\"\n            [(value)]=\"selection\"\n            (click)=\"commit($event)\"\n            (keydown.enter)=\"onListEnter($event)\"\n            (keydown.space)=\"commit()\"\n          >\n            @for (item of filteredItems(); track trackItemKey($index, item); let odd = $odd) {\n              <div\n                ngOption\n                class=\"ax-combo-box-option-host\"\n                [class.ax-combo-box-option]=\"!itemTemplate()\"\n                [class.ax-combo-box-option-multiple]=\"multiple()\"\n                [class.ax-state-alternate]=\"alternate() && odd\"\n                [value]=\"item.id\"\n                [label]=\"item.text | translate | async\"\n              >\n                <ng-container [ngTemplateOutlet]=\"optionContent\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n              </div>\n            }\n          </div>\n        </ng-template>\n      }\n    }\n    <ng-content select=\"ax-footer\"></ng-content>\n  </div>\n</ax-popover>\n<ng-template #optionContent let-item>\n  @if (multiple()) {\n    <ax-check-box\n      class=\"ax-combo-box-checkbox\"\n      [tabIndex]=\"-1\"\n      [value]=\"isItemSelected(item)\"\n    ></ax-check-box>\n  }\n  @if (itemTemplate()) {\n    <ng-container\n      [ngTemplateOutlet]=\"itemTemplate()!\"\n      [ngTemplateOutletContext]=\"{ $implicit: item, highlightText: highlightQuery() }\"\n    />\n  } @else {\n    <span class=\"ax-combo-box-option-label\">\n      <ax-highlight-text [text]=\"item.text | translate | async\" [query]=\"highlightQuery()\" />\n    </span>\n    @if (!multiple() && isItemSelected(item)) {\n      <ax-icon class=\"ax-combo-box-option-check ax-icon ax-icon-check\" aria-hidden=\"true\"></ax-icon>\n    }\n  }\n</ng-template>\n<ng-content select=\"ax-validation-rule\"></ng-content>\n", styles: ["@layer properties;@layer components{ax-combo-box{display:block;width:100%}ax-combo-box .ax-editor-container{justify-content:flex-start;gap:calc(var(--spacing, .25rem) * 1)}ax-combo-box .ax-combo-box-trigger{cursor:pointer;-webkit-user-select:none;user-select:none}ax-combo-box .ax-combo-box-trigger-multiple{height:auto!important;min-height:var(--ax-comp-editor-height);padding-block:calc(var(--spacing, .25rem) * 1)}ax-combo-box .ax-combo-box-value{position:relative;display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;align-items:center;overflow:hidden}ax-combo-box .ax-combo-box-chips{display:flex;flex-wrap:wrap;align-content:center;align-items:center;gap:calc(var(--spacing, .25rem) * 1);overflow:visible}ax-combo-box .ax-combo-box-trigger-search{margin:calc(var(--spacing, .25rem) * 0)!important;height:calc(var(--spacing, .25rem) * 7.5);width:auto!important;min-width:calc(var(--spacing, .25rem) * 16);flex:1;flex-basis:calc(var(--spacing, .25rem) * 16)}ax-combo-box .ax-combo-box-selected-content{pointer-events:none;position:relative;z-index:0;display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;align-items:center;overflow:hidden}ax-combo-box .ax-combo-box-select-input{cursor:pointer;caret-color:transparent;-webkit-user-select:none;user-select:none}ax-combo-box .ax-combo-box-input-overlay{position:absolute;inset:calc(var(--spacing, .25rem) * 0);z-index:10;margin:calc(var(--spacing, .25rem) * 0)!important;height:100%;width:100%;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0)!important;color:transparent;caret-color:transparent}ax-combo-box ax-chips ax-prefix,ax-combo-box ax-chips ax-suffix{padding:calc(var(--spacing, .25rem) * 0)!important}ax-combo-box ax-chips ax-suffix button{display:flex;cursor:pointer;align-items:center;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0)}.ax-combo-box-popup{--ax-comp-combo-box-popup-max-height: 15rem;--ax-comp-combo-box-highlight-bg-color: var(--ax-sys-color-warning-lighter-surface);--ax-comp-combo-box-highlight-text-color: var(--ax-sys-color-on-warning-lighter-surface);--ax-comp-combo-box-highlight-border-color: var(--ax-sys-color-warning-500);box-sizing:border-box;display:flex;width:100%;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0);flex-direction:column;overflow:hidden;border-radius:var(--ax-sys-border-radius);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-surface));background-color:rgba(var(--ax-sys-color-lightest-surface));--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ax-combo-box-popup .ax-highlight{display:inline;margin:0;padding:0;background-color:rgb(var(--ax-comp-combo-box-highlight-bg-color));color:rgb(var(--ax-comp-combo-box-highlight-text-color));font-weight:inherit;box-shadow:none}.ax-combo-box-popup:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-darkest-surface))}.ax-combo-box-popup.ax-is-empty{min-height:calc(var(--spacing, .25rem) * 12)}.ax-combo-box-popup.ax-is-actionsheet{--ax-comp-combo-box-popup-max-height: none;height:100dvh;max-height:100dvh;min-height:100dvh;border-bottom-right-radius:0;border-bottom-left-radius:0;--tw-shadow: 0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ax-combo-box-popup.ax-is-actionsheet.ax-is-empty{min-height:100dvh}.ax-combo-box-popup.ax-is-actionsheet>ax-header.ax-solid{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}.ax-combo-box-popup.ax-is-actionsheet>ax-header.ax-solid ax-title{min-width:calc(var(--spacing, .25rem) * 0);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-leading: calc(var(--spacing, .25rem) * 6);line-height:calc(var(--spacing, .25rem) * 6);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.ax-combo-box-popup.ax-is-actionsheet>ax-header.ax-solid ax-button{flex-shrink:0}.ax-combo-box-popup.ax-is-actionsheet .ax-combo-box-listbox{min-height:calc(var(--spacing, .25rem) * 0);flex:1;max-height:none}.ax-combo-box-popup.ax-is-actionsheet .ax-combo-box-empty{display:flex;flex:1;align-items:center;justify-content:center}.ax-combo-box-popup .ax-combo-box-sheet-search{flex-shrink:0;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}.ax-combo-box-popup>ax-header:not(.ax-solid),.ax-combo-box-popup>ax-footer{flex-shrink:0;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}.ax-combo-box-popup>ax-header:not(.ax-solid){border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.ax-combo-box-popup>ax-footer{border-top-style:var(--tw-border-style);border-top-width:1px}.ax-combo-box-listbox{display:flex;max-height:var(--ax-comp-combo-box-popup-max-height);min-width:calc(var(--spacing, .25rem) * 0);flex-direction:column;overflow-x:hidden;overflow-y:auto;--tw-outline-style: none;outline-style:none}.ax-combo-box-listbox.ax-hidden{display:none}.ax-combo-box-empty{width:100%;padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 3);text-align:center;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-combo-box-empty{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 60%,transparent)}}.ax-combo-box-option-host{box-sizing:border-box;cursor:pointer;border-style:var(--tw-border-style);border-width:1px;border-color:transparent;--tw-outline-style: none;outline-style:none}.ax-combo-box-option-host.ax-state-alternate{background-color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-combo-box-option-host.ax-state-alternate{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 5%,transparent)}}.ax-combo-box-option-host:hover,.ax-combo-box-option-host[data-active=true]{background-color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-combo-box-option-host:hover,.ax-combo-box-option-host[data-active=true]{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 10%,transparent)}}.ax-combo-box-option-host.ax-state-alternate:hover,.ax-combo-box-option-host.ax-state-alternate[data-active=true]{background-color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-combo-box-option-host.ax-state-alternate:hover,.ax-combo-box-option-host.ax-state-alternate[data-active=true]{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 15%,transparent)}}.ax-combo-box-option-host[aria-selected=true],.ax-combo-box-option-host[aria-selected=true]:hover,.ax-combo-box-option-host[aria-selected=true][data-active=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true]:hover,.ax-combo-box-option-host.ax-state-alternate[aria-selected=true][data-active=true]{background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}:is(.ax-combo-box-option-host[aria-selected=true],.ax-combo-box-option-host[aria-selected=true]:hover,.ax-combo-box-option-host[aria-selected=true][data-active=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true]:hover,.ax-combo-box-option-host.ax-state-alternate[aria-selected=true][data-active=true]):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-primary-darkest-surface))}@supports (color: color-mix(in lab,red,red)){:is(.ax-combo-box-option-host[aria-selected=true],.ax-combo-box-option-host[aria-selected=true]:hover,.ax-combo-box-option-host[aria-selected=true][data-active=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true]:hover,.ax-combo-box-option-host.ax-state-alternate[aria-selected=true][data-active=true]):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-darkest-surface)) 25%,transparent)}}.ax-combo-box-option-host[aria-selected=true][data-active=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true][data-active=true]{background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}@supports (color: color-mix(in lab,red,red)){.ax-combo-box-option-host[aria-selected=true][data-active=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true][data-active=true]{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-lightest-surface)) 80%,transparent)}}:is(.ax-combo-box-option-host[aria-selected=true][data-active=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true][data-active=true]):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-primary-darkest-surface))}@supports (color: color-mix(in lab,red,red)){:is(.ax-combo-box-option-host[aria-selected=true][data-active=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true][data-active=true]):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-darkest-surface)) 40%,transparent)}}.ax-combo-box-option-host.ax-combo-box-option-multiple{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}.ax-combo-box-option-host.ax-combo-box-option-multiple:not(.ax-combo-box-option){padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}.ax-combo-box-option-host .ax-combo-box-checkbox{pointer-events:none;display:inline-flex;flex-shrink:0;align-items:center}.ax-combo-box-option{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-on-surface))}.ax-combo-box-option[aria-selected=true]{color:rgba(var(--ax-sys-color-primary-surface))}.ax-combo-box-option.ax-combo-box-option-multiple{justify-content:flex-start}.ax-combo-box-option .ax-combo-box-option-label{min-width:calc(var(--spacing, .25rem) * 0);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ax-combo-box-option .ax-combo-box-option-check{flex-shrink:0;color:rgba(var(--ax-sys-color-primary-surface))}}ax-combo-box .ax-editor-container.ax-fill ax-chips.ax-default.ax-fill-interactive{background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);border-color:rgba(var(--ax-sys-color-border-surface))}ax-combo-box .ax-editor-container.ax-fill ax-chips.ax-default.ax-fill-interactive:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter)}ax-combo-box .ax-editor-container.ax-fill ax-chips.ax-default.ax-fill-interactive:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){border-color:rgba(var(--ax-sys-color-border-light-surface))}ax-combo-box .ax-editor-container.ax-fill ax-chips.ax-default.ax-fill-interactive:not(.ax-state-disabled):hover{background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter)}ax-combo-box .ax-editor-container.ax-fill ax-chips.ax-default.ax-fill-interactive:not(.ax-state-disabled):hover:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:var(--color-light);color:var(--color-on-light);border-color:var(--color-border-light)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-leading: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "component", type: AXChipsComponent, selector: "ax-chips", inputs: ["tabIndex", "color", "look", "text"], outputs: ["textChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i1.AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["closeAll", "icon"] }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "directive", type: Combobox, selector: "[ngCombobox]", inputs: ["disabled", "readonly", "softDisabled", "alwaysExpanded", "tabindex", "expanded", "value", "inlineSuggestion"], outputs: ["expandedChange", "valueChange"], exportAs: ["ngCombobox"] }, { kind: "directive", type: ComboboxPopup, selector: "ng-template[ngComboboxPopup]", inputs: ["combobox", "popupType"], exportAs: ["ngComboboxPopup"] }, { kind: "directive", type: ComboboxWidget, selector: "[ngComboboxWidget]", inputs: ["activeDescendant"], exportAs: ["ngComboboxWidget"] }, { kind: "directive", type: Listbox, selector: "[ngListbox]", inputs: ["id", "orientation", "multi", "wrap", "softDisabled", "focusMode", "selectionMode", "typeaheadDelay", "disabled", "readonly", "tabindex", "value"], outputs: ["valueChange"], exportAs: ["ngListbox"] }, { kind: "directive", type: Option, selector: "[ngOption]", inputs: ["id", "value", "disabled", "label"], exportAs: ["ngOption"] }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "visualContextScope", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: AXHighlightTextComponent, selector: "ax-highlight-text", inputs: ["text", "query", "highlightDisabled", "highlightOptions"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXComboBoxComponent, decorators: [{
             type: Component,
@@ -886,7 +896,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         { provide: AXClearableComponent, useExisting: AXComboBoxComponent },
                         { provide: AXClosableComponent, useExisting: AXComboBoxComponent },
                         { provide: AXValuableComponent, useExisting: AXComboBoxComponent },
-                    ], template: "<div\n  #origin\n  class=\"ax-editor-container ax-{{ look() }} ax-default\"\n  [class.ax-combo-box-trigger]=\"!isEditableTrigger()\"\n  [class.ax-combo-box-trigger-multiple]=\"multiple()\"\n  [class.ax-state-disabled]=\"disabled()\"\n  [class.ax-state-readonly]=\"readonly()\"\n>\n  <ng-content select=\"ax-prefix\"></ng-content>\n\n  <div class=\"ax-combo-box-value\" [class.ax-combo-box-chips]=\"multiple()\">\n    @if (multiple()) {\n      @for (item of selectedItems(); track item.id) {\n        <ax-chips class=\"ax-sm\" look=\"fill\" [text]=\"selectedTemplate() ? '' : (item.text | translate | async)\">\n          @if (selectedTemplate()) {\n            <ax-prefix>\n              <ng-container\n                [ngTemplateOutlet]=\"selectedTemplate()!\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"\n              />\n            </ax-prefix>\n          }\n          @if (!disabled() && !readonly()) {\n            <ax-suffix>\n              <button type=\"button\" tabindex=\"-1\" (click)=\"removeChip($event, item)\">\n                <span class=\"ax-icon ax-icon-close\"></span>\n              </button>\n            </ax-suffix>\n          }\n        </ax-chips>\n      }\n    } @else if (showSelectedTemplate()) {\n      <div class=\"ax-combo-box-selected-content\" aria-hidden=\"true\">\n        <ng-container\n          [ngTemplateOutlet]=\"selectedTemplate()!\"\n          [ngTemplateOutletContext]=\"{ $implicit: selectedItem() }\"\n        />\n      </div>\n    }\n\n    <input\n      ngCombobox\n      #combobox=\"ngCombobox\"\n      type=\"text\"\n      class=\"ax-input\"\n      [class.ax-combo-box-trigger-search]=\"multiple()\"\n      [class.ax-combo-box-select-input]=\"!isEditableTrigger()\"\n      [class.ax-combo-box-input-overlay]=\"!multiple() && showSelectedTemplate()\"\n      [placeholder]=\"multiple() ? triggerSearchPlaceholder() : translatedPlaceholder()\"\n      [disabled]=\"disabled()\"\n      [readonly]=\"readonly() || !isEditableTrigger()\"\n      [attr.inputmode]=\"isEditableTrigger() ? null : 'none'\"\n      [(value)]=\"searchText\"\n      [expanded]=\"expanded()\"\n      (expandedChange)=\"onExpandedChange($event)\"\n      (click)=\"onTriggerClick()\"\n      (keydown)=\"onTriggerKeydown($event)\"\n      (beforeinput)=\"onBeforeInput($event)\"\n      (focus)=\"emitOnFocus($event)\"\n      (blur)=\"emitOnBlur($event)\"\n    />\n  </div>\n\n  @if (hasSelection() && !disabled() && !readonly()) {\n    <ng-content select=\"ax-clear-button\"></ng-content>\n  }\n\n  <button\n    type=\"button\"\n    class=\"ax-general-button-icon\"\n    tabindex=\"-1\"\n    [disabled]=\"disabled() || readonly()\"\n    (click)=\"onTriggerClick()\"\n  >\n    <span class=\"ax-icon\" [class.ax-icon-chevron-down]=\"!expanded()\" [class.ax-icon-chevron-up]=\"expanded()\"></span>\n  </button>\n  <ng-content select=\"ax-suffix\"></ng-content>\n</div>\n\n<ax-popover\n  [target]=\"origin\"\n  [openOn]=\"'manual'\"\n  [closeOn]=\"isActionsheetStyle() ? 'manual' : 'clickOut'\"\n  [closeOnScroll]=\"!isActionsheetStyle()\"\n  [placement]=\"'bottom-start'\"\n  [width]=\"isActionsheetStyle() ? '100%' : origin.offsetWidth + 'px'\"\n  [adaptivityEnabled]=\"isActionsheetStyle()\"\n  [disabled]=\"disabled() || readonly()\"\n  (onOpened)=\"onPopoverOpened()\"\n  (onClosed)=\"onPopoverClosed()\"\n>\n  <div\n    #popup\n    class=\"ax-combo-box-popup\"\n    [class.ax-is-empty]=\"hasNoMatches()\"\n    [class.ax-is-actionsheet]=\"isActionsheetStyle()\"\n    (keydown.escape)=\"close()\"\n  >\n    @if (isActionsheetStyle()) {\n      <ax-header class=\"ax-solid\">\n        <ax-title>{{ actionsheetTitle() }}</ax-title>\n        @if (multiple()) {\n          <ax-button\n            class=\"ax-sm\"\n            color=\"primary\"\n            look=\"solid\"\n            text=\"@acorex:common.actions.apply\"\n            (onClick)=\"close()\"\n          ></ax-button>\n        } @else {\n          <ax-close-button></ax-close-button>\n        }\n      </ax-header>\n    }\n    @if (isSheetSearchEnabled()) {\n      <div class=\"ax-combo-box-sheet-search\">\n        <ax-search-box\n          #sheetSearch\n          class=\"ax-sm\"\n          look=\"fill\"\n          [autoSearch]=\"false\"\n          [delayTime]=\"0\"\n          [placeholder]=\"searchPlaceholder()\"\n          (onValueChanged)=\"onSheetSearchInput()\"\n          (onKeyUp)=\"onSheetSearchInput()\"\n          (onKeyDown)=\"onSheetSearchKeydown($event)\"\n        >\n          <ax-clear-button></ax-clear-button>\n        </ax-search-box>\n      </div>\n    }\n    <ng-content select=\"ax-header\"></ng-content>\n    @if (expanded()) {\n      @if (hasNoMatches()) {\n        @if (emptyTemplate()) {\n          <ng-container [ngTemplateOutlet]=\"emptyTemplate()!\" />\n        } @else {\n          <div class=\"ax-combo-box-empty\">{{ '@acorex:common.general.no-result-found' | translate | async }}</div>\n        }\n      }\n      @if (isActionsheetStyle()) {\n        <div\n          ngListbox\n          class=\"ax-combo-box-listbox\"\n          [class.ax-hidden]=\"hasNoMatches()\"\n          focusMode=\"activedescendant\"\n          selectionMode=\"explicit\"\n          [multi]=\"multiple()\"\n          [tabindex]=\"-1\"\n          [(value)]=\"selection\"\n          (click)=\"commit($event)\"\n        >\n          @for (item of filteredItems(); track trackItemKey($index, item); let odd = $odd) {\n            <div\n              ngOption\n              class=\"ax-combo-box-option-host\"\n              [class.ax-combo-box-option]=\"!itemTemplate()\"\n              [class.ax-combo-box-option-multiple]=\"multiple()\"\n              [class.ax-state-alternate]=\"alternate() && odd\"\n              [value]=\"item.id\"\n              [label]=\"item.text | translate | async\"\n            >\n              <ng-container [ngTemplateOutlet]=\"optionContent\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n            </div>\n          }\n        </div>\n      } @else {\n        <ng-template ngComboboxPopup [combobox]=\"combobox\">\n          <div\n            ngListbox\n            ngComboboxWidget\n            #listbox=\"ngListbox\"\n            class=\"ax-combo-box-listbox\"\n            [class.ax-hidden]=\"hasNoMatches()\"\n            focusMode=\"activedescendant\"\n            selectionMode=\"explicit\"\n            [multi]=\"multiple()\"\n            [tabindex]=\"-1\"\n            [activeDescendant]=\"listbox.activeDescendant()\"\n            [(value)]=\"selection\"\n            (click)=\"commit($event)\"\n            (keydown.enter)=\"onListEnter($event)\"\n            (keydown.space)=\"commit()\"\n          >\n            @for (item of filteredItems(); track trackItemKey($index, item); let odd = $odd) {\n              <div\n                ngOption\n                class=\"ax-combo-box-option-host\"\n                [class.ax-combo-box-option]=\"!itemTemplate()\"\n                [class.ax-combo-box-option-multiple]=\"multiple()\"\n                [class.ax-state-alternate]=\"alternate() && odd\"\n                [value]=\"item.id\"\n                [label]=\"item.text | translate | async\"\n              >\n                <ng-container [ngTemplateOutlet]=\"optionContent\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n              </div>\n            }\n          </div>\n        </ng-template>\n      }\n    }\n    <ng-content select=\"ax-footer\"></ng-content>\n  </div>\n</ax-popover>\n<ng-template #optionContent let-item>\n  @if (multiple()) {\n    <ax-check-box\n      class=\"ax-combo-box-checkbox\"\n      [tabIndex]=\"-1\"\n      [value]=\"isItemSelected(item)\"\n    ></ax-check-box>\n  }\n  @if (itemTemplate()) {\n    <ng-container\n      [ngTemplateOutlet]=\"itemTemplate()!\"\n      [ngTemplateOutletContext]=\"{ $implicit: item, highlightText: highlightQuery() }\"\n    />\n  } @else {\n    <span class=\"ax-combo-box-option-label\">\n      <ax-highlight-text [text]=\"item.text | translate | async\" [query]=\"highlightQuery()\" />\n    </span>\n    @if (!multiple() && isItemSelected(item)) {\n      <ax-icon class=\"ax-combo-box-option-check ax-icon ax-icon-check\" aria-hidden=\"true\"></ax-icon>\n    }\n  }\n</ng-template>\n<ng-content select=\"ax-validation-rule\"></ng-content>\n", styles: ["@layer properties;@layer components{ax-combo-box{display:block;width:100%}ax-combo-box .ax-editor-container{justify-content:flex-start;gap:calc(var(--spacing, .25rem) * 1)}ax-combo-box .ax-combo-box-trigger{cursor:pointer;-webkit-user-select:none;user-select:none}ax-combo-box .ax-combo-box-trigger-multiple{height:auto!important;min-height:var(--ax-comp-editor-height);padding-block:calc(var(--spacing, .25rem) * 1)}ax-combo-box .ax-combo-box-value{position:relative;display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;align-items:center;overflow:hidden}ax-combo-box .ax-combo-box-chips{display:flex;flex-wrap:wrap;align-content:center;align-items:center;gap:calc(var(--spacing, .25rem) * 1);overflow:visible}ax-combo-box .ax-combo-box-trigger-search{margin:calc(var(--spacing, .25rem) * 0)!important;height:calc(var(--spacing, .25rem) * 7.5);width:auto!important;min-width:calc(var(--spacing, .25rem) * 16);flex:1;flex-basis:calc(var(--spacing, .25rem) * 16)}ax-combo-box .ax-combo-box-selected-content{pointer-events:none;position:relative;z-index:0;display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;align-items:center;overflow:hidden}ax-combo-box .ax-combo-box-select-input{cursor:pointer;caret-color:transparent;-webkit-user-select:none;user-select:none}ax-combo-box .ax-combo-box-input-overlay{position:absolute;inset:calc(var(--spacing, .25rem) * 0);z-index:10;margin:calc(var(--spacing, .25rem) * 0)!important;height:100%;width:100%;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0)!important;color:transparent;caret-color:transparent}ax-combo-box ax-chips ax-prefix,ax-combo-box ax-chips ax-suffix{padding:calc(var(--spacing, .25rem) * 0)!important}ax-combo-box ax-chips ax-suffix button{display:flex;cursor:pointer;align-items:center;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0)}.ax-combo-box-popup{--ax-comp-combo-box-popup-max-height: 15rem;--ax-comp-combo-box-highlight-bg-color: var(--ax-sys-color-warning-lighter-surface);--ax-comp-combo-box-highlight-text-color: var(--ax-sys-color-on-warning-lighter-surface);--ax-comp-combo-box-highlight-border-color: var(--ax-sys-color-warning-500);box-sizing:border-box;display:flex;width:100%;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0);flex-direction:column;overflow:hidden;border-radius:var(--ax-sys-border-radius);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-surface));background-color:rgba(var(--ax-sys-color-lightest-surface));--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ax-combo-box-popup .ax-highlight{display:inline;margin:0;padding:0;background-color:rgb(var(--ax-comp-combo-box-highlight-bg-color));color:rgb(var(--ax-comp-combo-box-highlight-text-color));font-weight:inherit;box-shadow:none}.ax-combo-box-popup:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-darkest-surface))}.ax-combo-box-popup.ax-is-empty{min-height:calc(var(--spacing, .25rem) * 12)}.ax-combo-box-popup.ax-is-actionsheet{--ax-comp-combo-box-popup-max-height: none;height:100dvh;max-height:100dvh;min-height:100dvh;border-bottom-right-radius:0;border-bottom-left-radius:0;--tw-shadow: 0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ax-combo-box-popup.ax-is-actionsheet.ax-is-empty{min-height:100dvh}.ax-combo-box-popup.ax-is-actionsheet>ax-header.ax-solid{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}.ax-combo-box-popup.ax-is-actionsheet>ax-header.ax-solid ax-title{min-width:calc(var(--spacing, .25rem) * 0);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-leading: calc(var(--spacing, .25rem) * 6);line-height:calc(var(--spacing, .25rem) * 6);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.ax-combo-box-popup.ax-is-actionsheet>ax-header.ax-solid ax-button{flex-shrink:0}.ax-combo-box-popup.ax-is-actionsheet .ax-combo-box-listbox{min-height:calc(var(--spacing, .25rem) * 0);flex:1;max-height:none}.ax-combo-box-popup.ax-is-actionsheet .ax-combo-box-empty{display:flex;flex:1;align-items:center;justify-content:center}.ax-combo-box-popup .ax-combo-box-sheet-search{flex-shrink:0;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}.ax-combo-box-popup>ax-header:not(.ax-solid),.ax-combo-box-popup>ax-footer{flex-shrink:0;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}.ax-combo-box-popup>ax-header:not(.ax-solid){border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.ax-combo-box-popup>ax-footer{border-top-style:var(--tw-border-style);border-top-width:1px}.ax-combo-box-listbox{display:flex;max-height:var(--ax-comp-combo-box-popup-max-height);min-width:calc(var(--spacing, .25rem) * 0);flex-direction:column;overflow-x:hidden;overflow-y:auto;--tw-outline-style: none;outline-style:none}.ax-combo-box-listbox.ax-hidden{display:none}.ax-combo-box-empty{width:100%;padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 3);text-align:center;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-combo-box-empty{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 60%,transparent)}}.ax-combo-box-option-host{box-sizing:border-box;cursor:pointer;border-style:var(--tw-border-style);border-width:1px;border-color:transparent;--tw-outline-style: none;outline-style:none}.ax-combo-box-option-host.ax-state-alternate{background-color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-combo-box-option-host.ax-state-alternate{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 5%,transparent)}}.ax-combo-box-option-host:hover,.ax-combo-box-option-host[data-active=true]{background-color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-combo-box-option-host:hover,.ax-combo-box-option-host[data-active=true]{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 10%,transparent)}}.ax-combo-box-option-host.ax-state-alternate:hover,.ax-combo-box-option-host.ax-state-alternate[data-active=true]{background-color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-combo-box-option-host.ax-state-alternate:hover,.ax-combo-box-option-host.ax-state-alternate[data-active=true]{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 15%,transparent)}}.ax-combo-box-option-host[aria-selected=true],.ax-combo-box-option-host[aria-selected=true]:hover,.ax-combo-box-option-host[aria-selected=true][data-active=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true]:hover,.ax-combo-box-option-host.ax-state-alternate[aria-selected=true][data-active=true]{background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}:is(.ax-combo-box-option-host[aria-selected=true],.ax-combo-box-option-host[aria-selected=true]:hover,.ax-combo-box-option-host[aria-selected=true][data-active=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true]:hover,.ax-combo-box-option-host.ax-state-alternate[aria-selected=true][data-active=true]):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-primary-darkest-surface))}@supports (color: color-mix(in lab,red,red)){:is(.ax-combo-box-option-host[aria-selected=true],.ax-combo-box-option-host[aria-selected=true]:hover,.ax-combo-box-option-host[aria-selected=true][data-active=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true]:hover,.ax-combo-box-option-host.ax-state-alternate[aria-selected=true][data-active=true]):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-darkest-surface)) 25%,transparent)}}.ax-combo-box-option-host[aria-selected=true][data-active=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true][data-active=true]{background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}@supports (color: color-mix(in lab,red,red)){.ax-combo-box-option-host[aria-selected=true][data-active=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true][data-active=true]{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-lightest-surface)) 80%,transparent)}}:is(.ax-combo-box-option-host[aria-selected=true][data-active=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true][data-active=true]):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-primary-darkest-surface))}@supports (color: color-mix(in lab,red,red)){:is(.ax-combo-box-option-host[aria-selected=true][data-active=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true][data-active=true]):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-darkest-surface)) 40%,transparent)}}.ax-combo-box-option-host.ax-combo-box-option-multiple{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}.ax-combo-box-option-host.ax-combo-box-option-multiple:not(.ax-combo-box-option){padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}.ax-combo-box-option-host .ax-combo-box-checkbox{pointer-events:none;display:inline-flex;flex-shrink:0;align-items:center}.ax-combo-box-option{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-on-surface))}.ax-combo-box-option[aria-selected=true]{color:rgba(var(--ax-sys-color-primary-surface))}.ax-combo-box-option.ax-combo-box-option-multiple{justify-content:flex-start}.ax-combo-box-option .ax-combo-box-option-label{min-width:calc(var(--spacing, .25rem) * 0);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ax-combo-box-option .ax-combo-box-option-check{flex-shrink:0;color:rgba(var(--ax-sys-color-primary-surface))}}ax-combo-box .ax-editor-container.ax-fill ax-chips.ax-default.ax-fill-interactive{background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);border-color:rgba(var(--ax-sys-color-border-surface))}ax-combo-box .ax-editor-container.ax-fill ax-chips.ax-default.ax-fill-interactive:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter)}ax-combo-box .ax-editor-container.ax-fill ax-chips.ax-default.ax-fill-interactive:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){border-color:rgba(var(--ax-sys-color-border-light-surface))}ax-combo-box .ax-editor-container.ax-fill ax-chips.ax-default.ax-fill-interactive:not(.ax-state-disabled):hover{background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter)}ax-combo-box .ax-editor-container.ax-fill ax-chips.ax-default.ax-fill-interactive:not(.ax-state-disabled):hover:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:var(--color-light);color:var(--color-on-light);border-color:var(--color-border-light)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-leading: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], template: "<div\n  #origin\n  class=\"ax-editor-container ax-{{ look() }} ax-default\"\n  [class.ax-combo-box-trigger]=\"!isEditableTrigger()\"\n  [class.ax-combo-box-trigger-multiple]=\"multiple()\"\n  [class.ax-state-disabled]=\"disabled()\"\n  [class.ax-state-readonly]=\"readonly()\"\n>\n  <ng-content select=\"ax-prefix\"></ng-content>\n\n  <div class=\"ax-combo-box-value\" [class.ax-combo-box-chips]=\"multiple()\">\n    @if (multiple()) {\n      @for (item of selectedItems(); track item.id) {\n        <ax-chips class=\"ax-sm\" look=\"fill\" [text]=\"selectedTemplate() ? '' : (item.text | translate | async)\">\n          @if (selectedTemplate()) {\n            <ax-prefix>\n              <ng-container\n                [ngTemplateOutlet]=\"selectedTemplate()!\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"\n              />\n            </ax-prefix>\n          }\n          @if (!disabled() && !readonly()) {\n            <ax-suffix>\n              <button type=\"button\" tabindex=\"-1\" (click)=\"removeChip($event, item)\">\n                <span class=\"ax-icon ax-icon-close\"></span>\n              </button>\n            </ax-suffix>\n          }\n        </ax-chips>\n      }\n    } @else if (showSelectedTemplate()) {\n      <div class=\"ax-combo-box-selected-content\" aria-hidden=\"true\">\n        <ng-container\n          [ngTemplateOutlet]=\"selectedTemplate()!\"\n          [ngTemplateOutletContext]=\"{ $implicit: selectedItem() }\"\n        />\n      </div>\n    }\n\n    <input\n      ngCombobox\n      #combobox=\"ngCombobox\"\n      type=\"text\"\n      class=\"ax-input\"\n      [class.ax-combo-box-trigger-search]=\"multiple()\"\n      [class.ax-combo-box-select-input]=\"!isEditableTrigger()\"\n      [class.ax-combo-box-input-overlay]=\"!multiple() && showSelectedTemplate()\"\n      [placeholder]=\"multiple() ? triggerSearchPlaceholder() : translatedPlaceholder()\"\n      [disabled]=\"disabled()\"\n      [readonly]=\"readonly() || !isEditableTrigger()\"\n      [attr.inputmode]=\"isEditableTrigger() ? null : 'none'\"\n      [(value)]=\"searchText\"\n      [expanded]=\"expanded()\"\n      (expandedChange)=\"onExpandedChange($event)\"\n      (click)=\"onTriggerClick()\"\n      (keydown)=\"onTriggerKeydown($event)\"\n      (beforeinput)=\"onBeforeInput($event)\"\n      (focus)=\"emitOnFocus($event)\"\n      (blur)=\"emitOnBlur($event)\"\n    />\n  </div>\n\n  @if (hasSelection() && !disabled() && !readonly()) {\n    <ng-content select=\"ax-clear-button\"></ng-content>\n  }\n\n  <button\n    type=\"button\"\n    class=\"ax-general-button-icon\"\n    tabindex=\"-1\"\n    [disabled]=\"disabled() || readonly()\"\n    (mousedown)=\"$event.preventDefault()\"\n    (click)=\"onChevronClick($event)\"\n  >\n    <span class=\"ax-icon\" [class.ax-icon-chevron-down]=\"!expanded()\" [class.ax-icon-chevron-up]=\"expanded()\"></span>\n  </button>\n  <ng-content select=\"ax-suffix\"></ng-content>\n</div>\n\n<ax-popover\n  [target]=\"origin\"\n  [openOn]=\"'manual'\"\n  [closeOn]=\"isActionsheetStyle() ? 'manual' : 'clickOut'\"\n  [closeOnScroll]=\"!isActionsheetStyle()\"\n  [placement]=\"'bottom-start'\"\n  [width]=\"isActionsheetStyle() ? '100%' : origin.offsetWidth + 'px'\"\n  [adaptivityEnabled]=\"isActionsheetStyle()\"\n  [disabled]=\"disabled() || readonly()\"\n  (onOpened)=\"onPopoverOpened()\"\n  (onClosed)=\"onPopoverClosed()\"\n>\n  <div\n    #popup\n    class=\"ax-combo-box-popup\"\n    [class.ax-is-empty]=\"hasNoMatches()\"\n    [class.ax-is-actionsheet]=\"isActionsheetStyle()\"\n    (keydown.escape)=\"close()\"\n  >\n    @if (isActionsheetStyle()) {\n      <ax-header class=\"ax-solid\">\n        <ax-title>{{ actionsheetTitle() }}</ax-title>\n        @if (multiple()) {\n          <ax-button\n            class=\"ax-sm\"\n            color=\"primary\"\n            look=\"solid\"\n            text=\"@acorex:common.actions.apply\"\n            (onClick)=\"close()\"\n          ></ax-button>\n        } @else {\n          <ax-close-button></ax-close-button>\n        }\n      </ax-header>\n    }\n    @if (isSheetSearchEnabled()) {\n      <div class=\"ax-combo-box-sheet-search\">\n        <ax-search-box\n          #sheetSearch\n          class=\"ax-sm\"\n          look=\"fill\"\n          [autoSearch]=\"false\"\n          [delayTime]=\"0\"\n          [placeholder]=\"searchPlaceholder()\"\n          (onValueChanged)=\"onSheetSearchInput()\"\n          (onKeyUp)=\"onSheetSearchInput()\"\n          (onKeyDown)=\"onSheetSearchKeydown($event)\"\n        >\n          <ax-clear-button></ax-clear-button>\n        </ax-search-box>\n      </div>\n    }\n    <ng-content select=\"ax-header\"></ng-content>\n    @if (expanded()) {\n      @if (hasNoMatches()) {\n        @if (emptyTemplate()) {\n          <ng-container [ngTemplateOutlet]=\"emptyTemplate()!\" />\n        } @else {\n          <div class=\"ax-combo-box-empty\">{{ '@acorex:common.general.no-result-found' | translate | async }}</div>\n        }\n      }\n      @if (isActionsheetStyle()) {\n        <div\n          ngListbox\n          class=\"ax-combo-box-listbox\"\n          [class.ax-hidden]=\"hasNoMatches()\"\n          focusMode=\"activedescendant\"\n          selectionMode=\"explicit\"\n          [multi]=\"multiple()\"\n          [tabindex]=\"-1\"\n          [(value)]=\"selection\"\n          (click)=\"commit($event)\"\n        >\n          @for (item of filteredItems(); track trackItemKey($index, item); let odd = $odd) {\n            <div\n              ngOption\n              class=\"ax-combo-box-option-host\"\n              [class.ax-combo-box-option]=\"!itemTemplate()\"\n              [class.ax-combo-box-option-multiple]=\"multiple()\"\n              [class.ax-state-alternate]=\"alternate() && odd\"\n              [value]=\"item.id\"\n              [label]=\"item.text | translate | async\"\n            >\n              <ng-container [ngTemplateOutlet]=\"optionContent\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n            </div>\n          }\n        </div>\n      } @else {\n        <ng-template ngComboboxPopup [combobox]=\"combobox\">\n          <div\n            ngListbox\n            ngComboboxWidget\n            #listbox=\"ngListbox\"\n            class=\"ax-combo-box-listbox\"\n            [class.ax-hidden]=\"hasNoMatches()\"\n            focusMode=\"activedescendant\"\n            selectionMode=\"explicit\"\n            [multi]=\"multiple()\"\n            [tabindex]=\"-1\"\n            [activeDescendant]=\"listbox.activeDescendant()\"\n            [(value)]=\"selection\"\n            (click)=\"commit($event)\"\n            (keydown.enter)=\"onListEnter($event)\"\n            (keydown.space)=\"commit()\"\n          >\n            @for (item of filteredItems(); track trackItemKey($index, item); let odd = $odd) {\n              <div\n                ngOption\n                class=\"ax-combo-box-option-host\"\n                [class.ax-combo-box-option]=\"!itemTemplate()\"\n                [class.ax-combo-box-option-multiple]=\"multiple()\"\n                [class.ax-state-alternate]=\"alternate() && odd\"\n                [value]=\"item.id\"\n                [label]=\"item.text | translate | async\"\n              >\n                <ng-container [ngTemplateOutlet]=\"optionContent\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n              </div>\n            }\n          </div>\n        </ng-template>\n      }\n    }\n    <ng-content select=\"ax-footer\"></ng-content>\n  </div>\n</ax-popover>\n<ng-template #optionContent let-item>\n  @if (multiple()) {\n    <ax-check-box\n      class=\"ax-combo-box-checkbox\"\n      [tabIndex]=\"-1\"\n      [value]=\"isItemSelected(item)\"\n    ></ax-check-box>\n  }\n  @if (itemTemplate()) {\n    <ng-container\n      [ngTemplateOutlet]=\"itemTemplate()!\"\n      [ngTemplateOutletContext]=\"{ $implicit: item, highlightText: highlightQuery() }\"\n    />\n  } @else {\n    <span class=\"ax-combo-box-option-label\">\n      <ax-highlight-text [text]=\"item.text | translate | async\" [query]=\"highlightQuery()\" />\n    </span>\n    @if (!multiple() && isItemSelected(item)) {\n      <ax-icon class=\"ax-combo-box-option-check ax-icon ax-icon-check\" aria-hidden=\"true\"></ax-icon>\n    }\n  }\n</ng-template>\n<ng-content select=\"ax-validation-rule\"></ng-content>\n", styles: ["@layer properties;@layer components{ax-combo-box{display:block;width:100%}ax-combo-box .ax-editor-container{justify-content:flex-start;gap:calc(var(--spacing, .25rem) * 1)}ax-combo-box .ax-combo-box-trigger{cursor:pointer;-webkit-user-select:none;user-select:none}ax-combo-box .ax-combo-box-trigger-multiple{height:auto!important;min-height:var(--ax-comp-editor-height);padding-block:calc(var(--spacing, .25rem) * 1)}ax-combo-box .ax-combo-box-value{position:relative;display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;align-items:center;overflow:hidden}ax-combo-box .ax-combo-box-chips{display:flex;flex-wrap:wrap;align-content:center;align-items:center;gap:calc(var(--spacing, .25rem) * 1);overflow:visible}ax-combo-box .ax-combo-box-trigger-search{margin:calc(var(--spacing, .25rem) * 0)!important;height:calc(var(--spacing, .25rem) * 7.5);width:auto!important;min-width:calc(var(--spacing, .25rem) * 16);flex:1;flex-basis:calc(var(--spacing, .25rem) * 16)}ax-combo-box .ax-combo-box-selected-content{pointer-events:none;position:relative;z-index:0;display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;align-items:center;overflow:hidden}ax-combo-box .ax-combo-box-select-input{cursor:pointer;caret-color:transparent;-webkit-user-select:none;user-select:none}ax-combo-box .ax-combo-box-input-overlay{position:absolute;inset:calc(var(--spacing, .25rem) * 0);z-index:10;margin:calc(var(--spacing, .25rem) * 0)!important;height:100%;width:100%;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0)!important;color:transparent;caret-color:transparent}ax-combo-box ax-chips ax-prefix,ax-combo-box ax-chips ax-suffix{padding:calc(var(--spacing, .25rem) * 0)!important}ax-combo-box ax-chips ax-suffix button{display:flex;cursor:pointer;align-items:center;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0)}.ax-combo-box-popup{--ax-comp-combo-box-popup-max-height: 15rem;--ax-comp-combo-box-highlight-bg-color: var(--ax-sys-color-warning-lighter-surface);--ax-comp-combo-box-highlight-text-color: var(--ax-sys-color-on-warning-lighter-surface);--ax-comp-combo-box-highlight-border-color: var(--ax-sys-color-warning-500);box-sizing:border-box;display:flex;width:100%;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0);flex-direction:column;overflow:hidden;border-radius:var(--ax-sys-border-radius);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-surface));background-color:rgba(var(--ax-sys-color-lightest-surface));--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ax-combo-box-popup .ax-highlight{display:inline;margin:0;padding:0;background-color:rgb(var(--ax-comp-combo-box-highlight-bg-color));color:rgb(var(--ax-comp-combo-box-highlight-text-color));font-weight:inherit;box-shadow:none}.ax-combo-box-popup:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-darkest-surface))}.ax-combo-box-popup.ax-is-empty{min-height:calc(var(--spacing, .25rem) * 12)}.ax-combo-box-popup.ax-is-actionsheet{--ax-comp-combo-box-popup-max-height: none;height:100dvh;max-height:100dvh;min-height:100dvh;border-bottom-right-radius:0;border-bottom-left-radius:0;--tw-shadow: 0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ax-combo-box-popup.ax-is-actionsheet.ax-is-empty{min-height:100dvh}.ax-combo-box-popup.ax-is-actionsheet>ax-header.ax-solid{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}.ax-combo-box-popup.ax-is-actionsheet>ax-header.ax-solid ax-title{min-width:calc(var(--spacing, .25rem) * 0);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-leading: calc(var(--spacing, .25rem) * 6);line-height:calc(var(--spacing, .25rem) * 6);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.ax-combo-box-popup.ax-is-actionsheet>ax-header.ax-solid ax-button{flex-shrink:0}.ax-combo-box-popup.ax-is-actionsheet .ax-combo-box-listbox{min-height:calc(var(--spacing, .25rem) * 0);flex:1;max-height:none}.ax-combo-box-popup.ax-is-actionsheet .ax-combo-box-empty{display:flex;flex:1;align-items:center;justify-content:center}.ax-combo-box-popup .ax-combo-box-sheet-search{flex-shrink:0;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}.ax-combo-box-popup>ax-header:not(.ax-solid),.ax-combo-box-popup>ax-footer{flex-shrink:0;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}.ax-combo-box-popup>ax-header:not(.ax-solid){border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.ax-combo-box-popup>ax-footer{border-top-style:var(--tw-border-style);border-top-width:1px}.ax-combo-box-listbox{display:flex;max-height:var(--ax-comp-combo-box-popup-max-height);min-width:calc(var(--spacing, .25rem) * 0);flex-direction:column;overflow-x:hidden;overflow-y:auto;--tw-outline-style: none;outline-style:none}.ax-combo-box-listbox.ax-hidden{display:none}.ax-combo-box-empty{width:100%;padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 3);text-align:center;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-combo-box-empty{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 60%,transparent)}}.ax-combo-box-option-host{box-sizing:border-box;cursor:pointer;border-style:var(--tw-border-style);border-width:1px;border-color:transparent;--tw-outline-style: none;outline-style:none}.ax-combo-box-option-host.ax-state-alternate{background-color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-combo-box-option-host.ax-state-alternate{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 5%,transparent)}}.ax-combo-box-option-host:hover,.ax-combo-box-option-host[data-active=true]{background-color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-combo-box-option-host:hover,.ax-combo-box-option-host[data-active=true]{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 10%,transparent)}}.ax-combo-box-option-host.ax-state-alternate:hover,.ax-combo-box-option-host.ax-state-alternate[data-active=true]{background-color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-combo-box-option-host.ax-state-alternate:hover,.ax-combo-box-option-host.ax-state-alternate[data-active=true]{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 15%,transparent)}}.ax-combo-box-option-host[aria-selected=true],.ax-combo-box-option-host[aria-selected=true]:hover,.ax-combo-box-option-host[aria-selected=true][data-active=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true]:hover,.ax-combo-box-option-host.ax-state-alternate[aria-selected=true][data-active=true]{background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}:is(.ax-combo-box-option-host[aria-selected=true],.ax-combo-box-option-host[aria-selected=true]:hover,.ax-combo-box-option-host[aria-selected=true][data-active=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true]:hover,.ax-combo-box-option-host.ax-state-alternate[aria-selected=true][data-active=true]):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-primary-darkest-surface))}@supports (color: color-mix(in lab,red,red)){:is(.ax-combo-box-option-host[aria-selected=true],.ax-combo-box-option-host[aria-selected=true]:hover,.ax-combo-box-option-host[aria-selected=true][data-active=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true]:hover,.ax-combo-box-option-host.ax-state-alternate[aria-selected=true][data-active=true]):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-darkest-surface)) 25%,transparent)}}.ax-combo-box-option-host[aria-selected=true][data-active=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true][data-active=true]{background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}@supports (color: color-mix(in lab,red,red)){.ax-combo-box-option-host[aria-selected=true][data-active=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true][data-active=true]{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-lightest-surface)) 80%,transparent)}}:is(.ax-combo-box-option-host[aria-selected=true][data-active=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true][data-active=true]):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-primary-darkest-surface))}@supports (color: color-mix(in lab,red,red)){:is(.ax-combo-box-option-host[aria-selected=true][data-active=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true][data-active=true]):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-darkest-surface)) 40%,transparent)}}.ax-combo-box-option-host.ax-combo-box-option-multiple{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}.ax-combo-box-option-host.ax-combo-box-option-multiple:not(.ax-combo-box-option){padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}.ax-combo-box-option-host .ax-combo-box-checkbox{pointer-events:none;display:inline-flex;flex-shrink:0;align-items:center}.ax-combo-box-option{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-on-surface))}.ax-combo-box-option[aria-selected=true]{color:rgba(var(--ax-sys-color-primary-surface))}.ax-combo-box-option.ax-combo-box-option-multiple{justify-content:flex-start}.ax-combo-box-option .ax-combo-box-option-label{min-width:calc(var(--spacing, .25rem) * 0);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ax-combo-box-option .ax-combo-box-option-check{flex-shrink:0;color:rgba(var(--ax-sys-color-primary-surface))}}ax-combo-box .ax-editor-container.ax-fill ax-chips.ax-default.ax-fill-interactive{background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);border-color:rgba(var(--ax-sys-color-border-surface))}ax-combo-box .ax-editor-container.ax-fill ax-chips.ax-default.ax-fill-interactive:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter)}ax-combo-box .ax-editor-container.ax-fill ax-chips.ax-default.ax-fill-interactive:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){border-color:rgba(var(--ax-sys-color-border-light-surface))}ax-combo-box .ax-editor-container.ax-fill ax-chips.ax-default.ax-fill-interactive:not(.ax-state-disabled):hover{background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter)}ax-combo-box .ax-editor-container.ax-fill ax-chips.ax-default.ax-fill-interactive:not(.ax-state-disabled):hover:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:var(--color-light);color:var(--color-on-light);border-color:var(--color-border-light)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-leading: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
         }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], adaptivityEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "adaptivityEnabled", required: false }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], alternate: [{ type: i0.Input, args: [{ isSignal: true, alias: "alternate", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], highlightSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightSearch", required: false }] }], emptyTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTemplate", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], selectedTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedTemplate", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }, { type: i0.Output, args: ["lookChange"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], onValueChanged: [{ type: i0.Output, args: ["onValueChanged"] }], onFocus: [{ type: i0.Output, args: ["onFocus"] }], onBlur: [{ type: i0.Output, args: ["onBlur"] }], onItemClick: [{ type: i0.Output, args: ["onItemClick"] }], onItemSelected: [{ type: i0.Output, args: ["onItemSelected"] }], onOpened: [{ type: i0.Output, args: ["onOpened"] }], onClosed: [{ type: i0.Output, args: ["onClosed"] }], comboboxRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => Combobox), { isSignal: true }] }], listboxRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => Listbox), { isSignal: true }] }], popoverRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXPopoverComponent), { isSignal: true }] }], originRef: [{ type: i0.ViewChild, args: ['origin', { isSignal: true }] }], popupRef: [{ type: i0.ViewChild, args: ['popup', { isSignal: true }] }], sheetSearchRef: [{ type: i0.ViewChild, args: ['sheetSearch', { isSignal: true }] }] } });
 
 class AXComboBoxModule {