@raintonic/formaui 0.2.1 → 0.3.0

package/fesm2022/raintonic-formaui-components-alert.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"raintonic-formaui-components-alert.mjs","sources":["../../../lib/components/alert/alert.types.ts","../../../lib/components/alert/alert.component.ts","../../../lib/components/alert/alert.component.html","../../../lib/components/alert/raintonic-formaui-components-alert.ts"],"sourcesContent":["export type FuiAlertVariant = 'primary' | 'success' | 'info' | 'warning' | 'error' | 'generic';\r\n\r\nexport const FUI_ALERT_VARIANTS: readonly FuiAlertVariant[] = [\r\n  'primary',\r\n  'success',\r\n  'info',\r\n  'warning',\r\n  'error',\r\n  'generic',\r\n] as const;\r\n\r\n/**\r\n * Configuration for notification display\r\n */\r\nexport interface FuiNotificationConfig {\r\n  /**\r\n   * Notification variant (determines color scheme and icon)\r\n   */\r\n  variant: FuiAlertVariant;\r\n\r\n  /**\r\n   * Title of the notification\r\n   */\r\n  title: string;\r\n\r\n  /**\r\n   * Description/message of the notification\r\n   */\r\n  description?: string;\r\n\r\n  /**\r\n   * Duration in milliseconds before auto-dismiss (default: 5000)\r\n   * Set to 0 to disable auto-dismiss\r\n   */\r\n  duration?: number;\r\n\r\n  /**\r\n   * Whether to show the close button (default: true)\r\n   */\r\n  closeable?: boolean;\r\n\r\n  /**\r\n   * Custom icon name (overrides default variant icon)\r\n   */\r\n  icon?: string;\r\n}\r\n\r\n/**\r\n * Position for notification display\r\n */\r\nexport type FuiNotificationPosition =\r\n  | 'top-left'\r\n  | 'top-center'\r\n  | 'top-right'\r\n  | 'bottom-left'\r\n  | 'bottom-center'\r\n  | 'bottom-right';\r\n\r\nexport const FUI_NOTIFICATION_POSITIONS: readonly FuiNotificationPosition[] = [\r\n  'top-left',\r\n  'top-center',\r\n  'top-right',\r\n  'bottom-left',\r\n  'bottom-center',\r\n  'bottom-right',\r\n] as const;\r\n","import { ChangeDetectionStrategy, Component, computed, input, output, Signal } from '@angular/core';\r\nimport { FuiIconComponent } from '@raintonic/formaui/components/icon';\r\nimport { FuiAlertVariant, FUI_ALERT_VARIANTS } from './alert.types';\r\nimport { FuiProgressbarComponent } from '@raintonic/formaui/components/progressbar';\r\n\r\n/**\r\n * # FuiAlertComponent\r\n *\r\n * A flexible alert component for displaying informational messages, warnings, errors, and success notifications.\r\n * Can be used inline in pages or as part of the notification system.\r\n *\r\n * ## Features\r\n * - Multiple variants: primary, success, info, warning, error, generic\r\n * - Title and description support\r\n * - Optional close button\r\n * - Custom or default icons per variant\r\n * - Accessible with ARIA attributes\r\n *\r\n * ## Usage\r\n *\r\n * ### Basic Alert\r\n * ```html\r\n * <fui-alert\r\n *   variant=\"success\"\r\n *   title=\"Success!\"\r\n *   description=\"Your changes have been saved.\"\r\n * ></fui-alert>\r\n * ```\r\n *\r\n * ### Closeable Alert\r\n * ```html\r\n * <fui-alert\r\n *   variant=\"warning\"\r\n *   title=\"Warning\"\r\n *   description=\"Please review before continuing.\"\r\n *   [closeable]=\"true\"\r\n *   (closed)=\"onAlertClosed()\"\r\n * ></fui-alert>\r\n * ```\r\n *\r\n * ### Custom Icon\r\n * ```html\r\n * <fui-alert\r\n *   variant=\"info\"\r\n *   title=\"Custom Icon\"\r\n *   icon=\"custom-icon-name\"\r\n * ></fui-alert>\r\n * ```\r\n */\r\n@Component({\r\n  selector: 'fui-alert',\r\n  standalone: true,\r\n  imports: [FuiIconComponent, FuiProgressbarComponent],\r\n  templateUrl: './alert.component.html',\r\n  styleUrls: ['./alert.component.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  host: {\r\n    '[class]': 'computedClasses()',\r\n    '[attr.role]': 'computedRole()',\r\n    '[attr.aria-live]': 'computedAriaLive()',\r\n    '[attr.aria-atomic]': '\"true\"',\r\n  },\r\n})\r\nexport class FuiAlertComponent {\r\n  /**\r\n   * Alert variant (determines color scheme and default icon)\r\n   */\r\n  readonly variant = input<FuiAlertVariant, FuiAlertVariant | string>('info', {\r\n    transform: (v) => ((FUI_ALERT_VARIANTS as readonly string[]).includes(v) ? (v as FuiAlertVariant) : 'info'),\r\n  });\r\n\r\n  /**\r\n   * Alert title (required)\r\n   */\r\n  readonly title = input.required<string>();\r\n\r\n  /**\r\n   * Progress (optional)\r\n   * 0 = turned off\r\n   * -1 = indeterminate\r\n   */\r\n  readonly progress = input(0);\r\n\r\n  /**\r\n   * Alert description (optional)\r\n   */\r\n  readonly description = input<string | null>(null);\r\n\r\n  /**\r\n   * Whether to show the close button\r\n   */\r\n  readonly closeable = input(false);\r\n\r\n  /**\r\n   * Custom icon name (overrides default variant icon)\r\n   */\r\n  readonly icon = input<string | null>(null);\r\n\r\n  /**\r\n   * Emits when the close button is clicked\r\n   */\r\n  readonly closed = output();\r\n\r\n  /**\r\n   * Computed CSS classes for the alert\r\n   */\r\n  readonly computedClasses: Signal<string> = computed(() => {\r\n    const classes: string[] = ['fui-alert', `fui-alert--${this.variant()}`];\r\n\r\n    return classes.join(' ');\r\n  });\r\n\r\n  /**\r\n   * Computed ARIA role: \"alert\" for error/warning, \"status\" for info/success/primary/generic\r\n   */\r\n  readonly computedRole: Signal<string> = computed(() => {\r\n    const v = this.variant();\r\n    return v === 'error' || v === 'warning' ? 'alert' : 'status';\r\n  });\r\n\r\n  /**\r\n   * Computed aria-live: \"assertive\" for errors, \"polite\" for everything else\r\n   */\r\n  readonly computedAriaLive: Signal<string> = computed(() => {\r\n    return this.variant() === 'error' ? 'assertive' : 'polite';\r\n  });\r\n\r\n  /**\r\n   * Computed icon name based on variant or custom icon\r\n   */\r\n  readonly computedIcon: Signal<string> = computed(() => {\r\n    const icon = this.icon();\r\n    if (icon) {\r\n      return icon;\r\n    }\r\n\r\n    // Default icons for each variant\r\n    const variantIcons: Record<FuiAlertVariant, string> = {\r\n      primary: 'info',\r\n      success: 'check-circle',\r\n      info: 'info',\r\n      warning: 'warning-diamond',\r\n      error: 'smiley-sad',\r\n      generic: 'seal-warning',\r\n    };\r\n\r\n    return variantIcons[this.variant()];\r\n  });\r\n\r\n  /**\r\n   * Handle close button click\r\n   */\r\n  onClose(): void {\r\n    this.closed.emit();\r\n  }\r\n}\r\n","@if (progress() !== 0) {\r\n  <fui-progressbar\r\n    [mode]=\"progress() === -1 ? 'indeterminate' : 'determinate'\"\r\n    [value]=\"progress() > 0 ? progress() : undefined\"\r\n    [color]=\"\r\n      variant() === 'success'\r\n        ? 'success'\r\n        : variant() === 'warning'\r\n          ? 'warn'\r\n          : variant() === 'error'\r\n            ? 'warn'\r\n            : 'primary'\r\n    \"\r\n  ></fui-progressbar>\r\n}\r\n\r\n<div class=\"fui-alert__container\">\r\n  <fui-icon class=\"fui-alert__icon\" weight=\"fill\" [name]=\"computedIcon()\" size=\"md\" />\r\n\r\n  <div class=\"fui-alert__content\">\r\n    <div class=\"fui-alert__title fui-text-sm fui-font-medium\">{{ title() }}</div>\r\n    @if (description()) {\r\n      <div class=\"fui-alert__description fui-text-xs\">{{ description() }}</div>\r\n    }\r\n  </div>\r\n\r\n  @if (closeable()) {\r\n    <button type=\"button\" class=\"fui-alert__close\" (click)=\"onClose()\" aria-label=\"Close alert\">\r\n      <fui-icon name=\"x\" size=\"sm\" />\r\n    </button>\r\n  }\r\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAEO,MAAM,kBAAkB,GAA+B;IAC5D,SAAS;IACT,SAAS;IACT,MAAM;IACN,SAAS;IACT,OAAO;IACP,SAAS;;AAkDJ,MAAM,0BAA0B,GAAuC;IAC5E,UAAU;IACV,YAAY;IACZ,WAAW;IACX,aAAa;IACb,eAAe;IACf,cAAc;;;AC3DhB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CG;MAeU,iBAAiB,CAAA;AAC5B;;AAEG;AACM,IAAA,OAAO,GAAG,KAAK,CAA4C,MAAM,EAAA,EAAA,IAAA,SAAA,GAAA,EAAA,SAAA,EAAA,SAAA,EAAA,8BAAA,EAAA,CAAA,EACxE,SAAS,EAAE,CAAC,CAAC,MAAO,kBAAwC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAI,CAAqB,GAAG,MAAM,CAAC,GAC3G;AAEF;;AAEG;AACM,IAAA,KAAK,GAAG,KAAK,CAAC,QAAQ,2EAAU;AAEzC;;;;AAIG;AACM,IAAA,QAAQ,GAAG,KAAK,CAAC,CAAC,+EAAC;AAE5B;;AAEG;AACM,IAAA,WAAW,GAAG,KAAK,CAAgB,IAAI,kFAAC;AAEjD;;AAEG;AACM,IAAA,SAAS,GAAG,KAAK,CAAC,KAAK,gFAAC;AAEjC;;AAEG;AACM,IAAA,IAAI,GAAG,KAAK,CAAgB,IAAI,2EAAC;AAE1C;;AAEG;IACM,MAAM,GAAG,MAAM,EAAE;AAE1B;;AAEG;AACM,IAAA,eAAe,GAAmB,QAAQ,CAAC,MAAK;AACvD,QAAA,MAAM,OAAO,GAAa,CAAC,WAAW,EAAE,CAAA,WAAA,EAAc,IAAI,CAAC,OAAO,EAAE,CAAA,CAAE,CAAC;AAEvE,QAAA,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;AAC1B,IAAA,CAAC,sFAAC;AAEF;;AAEG;AACM,IAAA,YAAY,GAAmB,QAAQ,CAAC,MAAK;AACpD,QAAA,MAAM,CAAC,GAAG,IAAI,CAAC,OAAO,EAAE;AACxB,QAAA,OAAO,CAAC,KAAK,OAAO,IAAI,CAAC,KAAK,SAAS,GAAG,OAAO,GAAG,QAAQ;AAC9D,IAAA,CAAC,mFAAC;AAEF;;AAEG;AACM,IAAA,gBAAgB,GAAmB,QAAQ,CAAC,MAAK;AACxD,QAAA,OAAO,IAAI,CAAC,OAAO,EAAE,KAAK,OAAO,GAAG,WAAW,GAAG,QAAQ;AAC5D,IAAA,CAAC,uFAAC;AAEF;;AAEG;AACM,IAAA,YAAY,GAAmB,QAAQ,CAAC,MAAK;AACpD,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE;QACxB,IAAI,IAAI,EAAE;AACR,YAAA,OAAO,IAAI;QACb;;AAGA,QAAA,MAAM,YAAY,GAAoC;AACpD,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,OAAO,EAAE,cAAc;AACvB,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,iBAAiB;AAC1B,YAAA,KAAK,EAAE,YAAY;AACnB,YAAA,OAAO,EAAE,cAAc;SACxB;AAED,QAAA,OAAO,YAAY,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;AACrC,IAAA,CAAC,mFAAC;AAEF;;AAEG;IACH,OAAO,GAAA;AACL,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;IACpB;uGA3FW,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAjB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,gBAAA,EAAA,oBAAA,EAAA,kBAAA,EAAA,UAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC/D9B,0iCAgCA,EAAA,MAAA,EAAA,CAAA,moIAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDoBY,gBAAgB,gIAAE,uBAAuB,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,OAAA,EAAA,aAAA,EAAA,OAAA,EAAA,YAAA,EAAA,iBAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAWxC,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAd7B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,WAAW,EAAA,UAAA,EACT,IAAI,EAAA,OAAA,EACP,CAAC,gBAAgB,EAAE,uBAAuB,CAAC,EAAA,eAAA,EAGnC,uBAAuB,CAAC,MAAM,EAAA,IAAA,EACzC;AACJ,wBAAA,SAAS,EAAE,mBAAmB;AAC9B,wBAAA,aAAa,EAAE,gBAAgB;AAC/B,wBAAA,kBAAkB,EAAE,oBAAoB;AACxC,wBAAA,oBAAoB,EAAE,QAAQ;AAC/B,qBAAA,EAAA,QAAA,EAAA,0iCAAA,EAAA,MAAA,EAAA,CAAA,moIAAA,CAAA,EAAA;;;AE7DH;;AAEG;;;;"}
+{"version":3,"file":"raintonic-formaui-components-alert.mjs","sources":["../../../lib/components/alert/alert.types.ts","../../../lib/components/alert/alert.intl.ts","../../../lib/components/alert/alert.component.ts","../../../lib/components/alert/alert.component.html","../../../lib/components/alert/raintonic-formaui-components-alert.ts"],"sourcesContent":["export type FuiAlertVariant = 'primary' | 'success' | 'info' | 'warning' | 'error' | 'generic';\r\n\r\nexport const FUI_ALERT_VARIANTS: readonly FuiAlertVariant[] = [\r\n  'primary',\r\n  'success',\r\n  'info',\r\n  'warning',\r\n  'error',\r\n  'generic',\r\n] as const;\r\n\r\n/**\r\n * Configuration for notification display\r\n */\r\nexport interface FuiNotificationConfig {\r\n  /**\r\n   * Notification variant (determines color scheme and icon)\r\n   */\r\n  variant: FuiAlertVariant;\r\n\r\n  /**\r\n   * Title of the notification\r\n   */\r\n  title: string;\r\n\r\n  /**\r\n   * Description/message of the notification\r\n   */\r\n  description?: string;\r\n\r\n  /**\r\n   * Duration in milliseconds before auto-dismiss (default: 5000)\r\n   * Set to 0 to disable auto-dismiss\r\n   */\r\n  duration?: number;\r\n\r\n  /**\r\n   * Whether to show the close button (default: true)\r\n   */\r\n  closeable?: boolean;\r\n\r\n  /**\r\n   * Custom icon name (overrides default variant icon)\r\n   */\r\n  icon?: string;\r\n}\r\n\r\n/**\r\n * Position for notification display\r\n */\r\nexport type FuiNotificationPosition =\r\n  | 'top-left'\r\n  | 'top-center'\r\n  | 'top-right'\r\n  | 'bottom-left'\r\n  | 'bottom-center'\r\n  | 'bottom-right';\r\n\r\nexport const FUI_NOTIFICATION_POSITIONS: readonly FuiNotificationPosition[] = [\r\n  'top-left',\r\n  'top-center',\r\n  'top-right',\r\n  'bottom-left',\r\n  'bottom-center',\r\n  'bottom-right',\r\n] as const;\r\n","import { Injectable } from '@angular/core';\r\nimport { FuiIntlBase } from '@raintonic/formaui/core';\r\n\r\n@Injectable({ providedIn: 'root' })\r\nexport class FuiAlertIntl extends FuiIntlBase {\r\n  closeAriaLabel = 'Close alert';\r\n}\r\n","import { ChangeDetectionStrategy, ChangeDetectorRef, Component, computed, inject, input, output, Signal } from '@angular/core';\r\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\r\nimport { FuiIconComponent } from '@raintonic/formaui/components/icon';\r\nimport { FuiAlertVariant, FUI_ALERT_VARIANTS } from './alert.types';\r\nimport { FuiProgressbarComponent } from '@raintonic/formaui/components/progressbar';\r\nimport { FuiAlertIntl } from './alert.intl';\r\n\r\n/**\r\n * # FuiAlertComponent\r\n *\r\n * A flexible alert component for displaying informational messages, warnings, errors, and success notifications.\r\n * Can be used inline in pages or as part of the notification system.\r\n *\r\n * ## Features\r\n * - Multiple variants: primary, success, info, warning, error, generic\r\n * - Title and description support\r\n * - Optional close button\r\n * - Custom or default icons per variant\r\n * - Accessible with ARIA attributes\r\n *\r\n * ## Usage\r\n *\r\n * ### Basic Alert\r\n * ```html\r\n * <fui-alert\r\n *   variant=\"success\"\r\n *   title=\"Success!\"\r\n *   description=\"Your changes have been saved.\"\r\n * ></fui-alert>\r\n * ```\r\n *\r\n * ### Closeable Alert\r\n * ```html\r\n * <fui-alert\r\n *   variant=\"warning\"\r\n *   title=\"Warning\"\r\n *   description=\"Please review before continuing.\"\r\n *   [closeable]=\"true\"\r\n *   (closed)=\"onAlertClosed()\"\r\n * ></fui-alert>\r\n * ```\r\n *\r\n * ### Custom Icon\r\n * ```html\r\n * <fui-alert\r\n *   variant=\"info\"\r\n *   title=\"Custom Icon\"\r\n *   icon=\"custom-icon-name\"\r\n * ></fui-alert>\r\n * ```\r\n */\r\n@Component({\r\n  selector: 'fui-alert',\r\n  standalone: true,\r\n  imports: [FuiIconComponent, FuiProgressbarComponent],\r\n  templateUrl: './alert.component.html',\r\n  styleUrls: ['./alert.component.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  host: {\r\n    '[class]': 'computedClasses()',\r\n    '[attr.role]': 'computedRole()',\r\n    '[attr.aria-live]': 'computedAriaLive()',\r\n    '[attr.aria-atomic]': '\"true\"',\r\n  },\r\n})\r\nexport class FuiAlertComponent {\r\n  readonly intl = inject(FuiAlertIntl);\r\n  private readonly _cdr = inject(ChangeDetectorRef);\r\n\r\n  constructor() {\r\n    this.intl.changes\r\n      .pipe(takeUntilDestroyed())\r\n      .subscribe(() => { this._cdr.markForCheck(); });\r\n  }\r\n\r\n  /**\r\n   * Alert variant (determines color scheme and default icon)\r\n   */\r\n  readonly variant = input<FuiAlertVariant, FuiAlertVariant | string>('info', {\r\n    transform: (v) => ((FUI_ALERT_VARIANTS as readonly string[]).includes(v) ? (v as FuiAlertVariant) : 'info'),\r\n  });\r\n\r\n  /**\r\n   * Alert title (required)\r\n   */\r\n  readonly title = input.required<string>();\r\n\r\n  /**\r\n   * Progress (optional)\r\n   * 0 = turned off\r\n   * -1 = indeterminate\r\n   */\r\n  readonly progress = input(0);\r\n\r\n  /**\r\n   * Alert description (optional)\r\n   */\r\n  readonly description = input<string | null>(null);\r\n\r\n  /**\r\n   * Whether to show the close button\r\n   */\r\n  readonly closeable = input(false);\r\n\r\n  /**\r\n   * Custom icon name (overrides default variant icon)\r\n   */\r\n  readonly icon = input<string | null>(null);\r\n\r\n  /**\r\n   * Emits when the close button is clicked\r\n   */\r\n  readonly closed = output();\r\n\r\n  /**\r\n   * Computed CSS classes for the alert\r\n   */\r\n  readonly computedClasses: Signal<string> = computed(() => {\r\n    const classes: string[] = ['fui-alert', `fui-alert--${this.variant()}`];\r\n\r\n    return classes.join(' ');\r\n  });\r\n\r\n  /**\r\n   * Computed ARIA role: \"alert\" for error/warning, \"status\" for info/success/primary/generic\r\n   */\r\n  readonly computedRole: Signal<string> = computed(() => {\r\n    const v = this.variant();\r\n    return v === 'error' || v === 'warning' ? 'alert' : 'status';\r\n  });\r\n\r\n  /**\r\n   * Computed aria-live: \"assertive\" for errors, \"polite\" for everything else\r\n   */\r\n  readonly computedAriaLive: Signal<string> = computed(() => {\r\n    return this.variant() === 'error' ? 'assertive' : 'polite';\r\n  });\r\n\r\n  /**\r\n   * Computed icon name based on variant or custom icon\r\n   */\r\n  readonly computedIcon: Signal<string> = computed(() => {\r\n    const icon = this.icon();\r\n    if (icon) {\r\n      return icon;\r\n    }\r\n\r\n    // Default icons for each variant\r\n    const variantIcons: Record<FuiAlertVariant, string> = {\r\n      primary: 'info',\r\n      success: 'check-circle',\r\n      info: 'info',\r\n      warning: 'warning-diamond',\r\n      error: 'smiley-sad',\r\n      generic: 'seal-warning',\r\n    };\r\n\r\n    return variantIcons[this.variant()];\r\n  });\r\n\r\n  /**\r\n   * Handle close button click\r\n   */\r\n  onClose(): void {\r\n    this.closed.emit();\r\n  }\r\n}\r\n","@if (progress() !== 0) {\r\n  <fui-progressbar\r\n    [mode]=\"progress() === -1 ? 'indeterminate' : 'determinate'\"\r\n    [value]=\"progress() > 0 ? progress() : undefined\"\r\n    [color]=\"\r\n      variant() === 'success'\r\n        ? 'success'\r\n        : variant() === 'warning'\r\n          ? 'warn'\r\n          : variant() === 'error'\r\n            ? 'warn'\r\n            : 'primary'\r\n    \"\r\n  ></fui-progressbar>\r\n}\r\n\r\n<div class=\"fui-alert__container\">\r\n  <fui-icon class=\"fui-alert__icon\" weight=\"fill\" [name]=\"computedIcon()\" size=\"md\" />\r\n\r\n  <div class=\"fui-alert__content\">\r\n    <div class=\"fui-alert__title fui-text-sm fui-font-medium\">{{ title() }}</div>\r\n    @if (description()) {\r\n      <div class=\"fui-alert__description fui-text-xs\">{{ description() }}</div>\r\n    }\r\n  </div>\r\n\r\n  @if (closeable()) {\r\n    <button type=\"button\" class=\"fui-alert__close\" (click)=\"onClose()\" [attr.aria-label]=\"intl.closeAriaLabel\">\r\n      <fui-icon name=\"x\" size=\"sm\" />\r\n    </button>\r\n  }\r\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/raintonic-formaui-components-autocomplete.mjs

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, input, output, signal, inject, computed, contentChildren, ElementRef, NgZone, effect, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { Injectable, InjectionToken, inject, ChangeDetectorRef, input, computed, output, signal, contentChildren, ElementRef, NgZone, effect, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { NgForm, FormGroupDirective, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { DOCUMENT } from '@angular/common';
 import { Subject, Subscription, fromEvent } from 'rxjs';
@@ -7,10 +8,28 @@ import { filter } from 'rxjs/operators';
 import { injectNgControl, updateErrorState, syncRequiredState, syncNgControlDisabled } from '@raintonic/formaui/cdk/form-field';
 import { FuiIconComponent } from '@raintonic/formaui/components/icon';
 import { FuiButtonDirective } from '@raintonic/formaui/components/button';
-import { DefaultErrorStateMatcher, FUI_FORM_FIELD_CONTROL } from '@raintonic/formaui/core';
+import { FuiIntlBase, DefaultErrorStateMatcher, FUI_FORM_FIELD_CONTROL } from '@raintonic/formaui/core';
 import { FuiOptionComponent } from '@raintonic/formaui/components/select';
 import { FuiOverlayService } from '@raintonic/formaui/cdk/overlay';
 
+class FuiAutocompleteIntl extends FuiIntlBase {
+    addButtonLabel = 'Add New';
+    refreshButtonLabel = 'Refresh';
+    noOptionsText = 'No options found';
+    searchPlaceholder = 'Search...';
+    clearSelectionAriaLabel = 'Clear selection';
+    noResultsAvailableText = 'No results available.';
+    resultsAvailableText(count) {
+        return `${count} results available.`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiAutocompleteIntl, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiAutocompleteIntl, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiAutocompleteIntl, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 /**
  * Injection token used to provide the parent autocomplete to options
  */
@@ -85,17 +104,25 @@ class FuiAutocompleteComponent {
     // Static properties
     static nextId = 0;
     controlType = 'fui-autocomplete';
+    // Injected dependencies required by input resolvers (must be declared before computed fields below)
+    intl = inject(FuiAutocompleteIntl);
+    _cdr = inject(ChangeDetectorRef);
     // Inputs using signal-based API
     placeholderInput = input('', { ...(ngDevMode ? { debugName: "placeholderInput" } : /* istanbul ignore next */ {}), alias: 'placeholder' });
     disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled' });
     readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
     showAddButton = input(false, ...(ngDevMode ? [{ debugName: "showAddButton" }] : /* istanbul ignore next */ []));
     showRefreshButton = input(false, ...(ngDevMode ? [{ debugName: "showRefreshButton" }] : /* istanbul ignore next */ []));
-    addButtonLabel = input('Add New', ...(ngDevMode ? [{ debugName: "addButtonLabel" }] : /* istanbul ignore next */ []));
-    refreshButtonLabel = input('Refresh', ...(ngDevMode ? [{ debugName: "refreshButtonLabel" }] : /* istanbul ignore next */ []));
-    noOptionsText = input('No options found', ...(ngDevMode ? [{ debugName: "noOptionsText" }] : /* istanbul ignore next */ []));
-    searchPlaceholder = input('Search...', ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
+    addButtonLabel = input(undefined, ...(ngDevMode ? [{ debugName: "addButtonLabel" }] : /* istanbul ignore next */ []));
+    refreshButtonLabel = input(undefined, ...(ngDevMode ? [{ debugName: "refreshButtonLabel" }] : /* istanbul ignore next */ []));
+    noOptionsText = input(undefined, ...(ngDevMode ? [{ debugName: "noOptionsText" }] : /* istanbul ignore next */ []));
+    searchPlaceholder = input(undefined, ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
     errorStateMatcher = input(null, ...(ngDevMode ? [{ debugName: "errorStateMatcher" }] : /* istanbul ignore next */ []));
+    // Resolved i18n labels: per-instance input wins, Intl service is fallback
+    resolvedAddButtonLabel = computed(() => this.addButtonLabel() ?? this.intl.addButtonLabel, ...(ngDevMode ? [{ debugName: "resolvedAddButtonLabel" }] : /* istanbul ignore next */ []));
+    resolvedRefreshButtonLabel = computed(() => this.refreshButtonLabel() ?? this.intl.refreshButtonLabel, ...(ngDevMode ? [{ debugName: "resolvedRefreshButtonLabel" }] : /* istanbul ignore next */ []));
+    resolvedNoOptionsText = computed(() => this.noOptionsText() ?? this.intl.noOptionsText, ...(ngDevMode ? [{ debugName: "resolvedNoOptionsText" }] : /* istanbul ignore next */ []));
+    resolvedSearchPlaceholder = computed(() => this.searchPlaceholder() ?? this.intl.searchPlaceholder, ...(ngDevMode ? [{ debugName: "resolvedSearchPlaceholder" }] : /* istanbul ignore next */ []));
     /**
      * Whether to compare option values using object identity or deep equality
      */
@@ -205,6 +232,8 @@ class FuiAutocompleteComponent {
                 this._ngControlRef.ngControl.valueAccessor = this;
             }
         });
+        // Subscribe to Intl changes to trigger re-render when labels mutate at runtime
+        this.intl.changes.pipe(takeUntilDestroyed()).subscribe(() => { this._cdr.markForCheck(); });
         // Effect to emit state changes
         effect(() => {
             // Track all reactive inputs and internal signals
@@ -680,7 +709,7 @@ class FuiAutocompleteComponent {
                 provide: FUI_AUTOCOMPLETE,
                 useExisting: FuiAutocompleteComponent,
             },
-        ], queries: [{ propertyName: "options", predicate: FuiOptionComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<!-- Autocomplete Trigger -->\r\n<div\r\n  #trigger\r\n  [id]=\"id\"\r\n  class=\"fui-autocomplete__trigger\"\r\n  [attr.tabindex]=\"disabled() ? -1 : 0\"\r\n  [attr.role]=\"'combobox'\"\r\n  [attr.aria-haspopup]=\"'listbox'\"\r\n  [attr.aria-expanded]=\"panelOpen()\"\r\n  [attr.aria-disabled]=\"disabled()\"\r\n  [attr.aria-invalid]=\"errorState()\"\r\n  [attr.aria-describedby]=\"_ariaDescribedby\"\r\n  [attr.aria-required]=\"required()\"\r\n  aria-autocomplete=\"list\"\r\n  [attr.aria-activedescendant]=\"panelOpen() ? _getActiveDescendant() : null\"\r\n  [attr.aria-controls]=\"panelOpen() ? id + '-panel' : null\"\r\n  (keydown)=\"_handleKeydown($event)\"\r\n>\r\n  <span class=\"fui-autocomplete__value\">\r\n    @if (empty()) {\r\n      <span class=\"fui-autocomplete__placeholder\">{{ placeholder() }}</span>\r\n    } @else {\r\n      <span class=\"fui-autocomplete__value-text\">{{ _getDisplayValue() }}</span>\r\n    }\r\n  </span>\r\n\r\n  @if (!_readOnly()) {\r\n    <!-- Clear button \u2014 visible only when a value is selected and not disabled -->\r\n    @if (!empty() && !disabled()) {\r\n      <span class=\"fui-autocomplete__clear\" role=\"button\" aria-label=\"Clear selection\" (click)=\"clear($event)\">\r\n        <svg viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\">\r\n          <path\r\n            d=\"M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z\"\r\n          />\r\n        </svg>\r\n      </span>\r\n    }\r\n\r\n    <!-- Dropdown arrow icon -->\r\n    <svg\r\n      class=\"fui-autocomplete__arrow\"\r\n      [class.fui-autocomplete__arrow--open]=\"panelOpen()\"\r\n      viewBox=\"0 0 16 16\"\r\n      fill=\"currentColor\"\r\n      aria-hidden=\"true\"\r\n    >\r\n      <path d=\"M8 11L3 6l.7-.7L8 9.6l4.3-4.3L13 6z\" />\r\n    </svg>\r\n  }\r\n</div>\r\n\r\n<!-- Hidden container for projected options (used for data binding) -->\r\n<div class=\"fui-autocomplete__options-source\">\r\n  <ng-content></ng-content>\r\n</div>\r\n\r\n<!-- Dropdown Panel -->\r\n@if (panelOpen()) {\r\n  <div #panel [id]=\"id + '-panel'\" class=\"fui-autocomplete__panel\" [attr.aria-label]=\"placeholder()\">\r\n    <!-- Search Input -->\r\n    <div class=\"fui-autocomplete__search\">\r\n      <fui-icon name=\"magnifying-glass\" size=\"sm\" class=\"fui-autocomplete__search-icon\"> </fui-icon>\r\n      <input\r\n        #searchInput\r\n        type=\"text\"\r\n        class=\"fui-autocomplete__search-input\"\r\n        [placeholder]=\"searchPlaceholder()\"\r\n        [value]=\"searchTerm()\"\r\n        autocomplete=\"off\"\r\n        role=\"searchbox\"\r\n        [attr.aria-label]=\"searchPlaceholder()\"\r\n        [attr.aria-controls]=\"id + '-panel-listbox'\"\r\n        [attr.aria-activedescendant]=\"_getActiveDescendant()\"\r\n        (input)=\"onSearchInput($event)\"\r\n        (keydown)=\"_handlePanelKeydown($event)\"\r\n      />\r\n    </div>\r\n    <!-- Live region for announcing result count to screen readers -->\r\n    <div class=\"fui-visually-hidden\" aria-live=\"assertive\" aria-atomic=\"true\">\r\n      @if (_liveAnnouncement()) {\r\n        {{ _liveAnnouncement() }}\r\n      } @else if (hasFilteredOptions()) {\r\n        {{ filteredOptions().length }} results available.\r\n      } @else {\r\n        No results available.\r\n      }\r\n    </div>\r\n\r\n    <!-- Action Buttons -->\r\n    @if (showAddButton() || showRefreshButton()) {\r\n      <div class=\"fui-autocomplete__actions\">\r\n        @if (showAddButton()) {\r\n          <button\r\n            type=\"button\"\r\n            fuiButton\r\n            variant=\"ghost\"\r\n            size=\"sm\"\r\n            class=\"fui-autocomplete__action-button\"\r\n            (click)=\"onAddNew()\"\r\n          >\r\n            <fui-icon name=\"plus\" size=\"sm\"></fui-icon>\r\n            {{ addButtonLabel() }}\r\n          </button>\r\n        }\r\n        @if (showRefreshButton()) {\r\n          <button\r\n            type=\"button\"\r\n            fuiButton\r\n            variant=\"ghost\"\r\n            size=\"sm\"\r\n            class=\"fui-autocomplete__action-button\"\r\n            (click)=\"onRefresh()\"\r\n          >\r\n            <fui-icon name=\"refresh-cw\" size=\"sm\"></fui-icon>\r\n            {{ refreshButtonLabel() }}\r\n          </button>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    <!-- Options List -->\r\n    <div\r\n      class=\"fui-autocomplete__options\"\r\n      [id]=\"id + '-panel-listbox'\"\r\n      role=\"listbox\"\r\n      [attr.aria-label]=\"placeholder()\"\r\n    >\r\n      @if (hasFilteredOptions()) {\r\n        @for (option of filteredOptions(); track option.id; let i = $index) {\r\n          <div\r\n            class=\"fui-autocomplete__option\"\r\n            [class.fui-autocomplete__option--active]=\"activeOptionIndex() === i\"\r\n            [class.fui-autocomplete__option--selected]=\"option._selected()\"\r\n            role=\"option\"\r\n            [attr.id]=\"option.id\"\r\n            [attr.aria-selected]=\"option._selected()\"\r\n            (click)=\"_onOptionSelected(option)\"\r\n            (mouseenter)=\"setActiveOption(i, option)\"\r\n            (mouseleave)=\"option.setInactive()\"\r\n          >\r\n            <span class=\"fui-autocomplete__option-text\">{{ option.getLabel() }}</span>\r\n            @if (option._selected()) {\r\n              <fui-icon name=\"check\" size=\"sm\" class=\"fui-autocomplete__option-check\"></fui-icon>\r\n            }\r\n          </div>\r\n        }\r\n      } @else {\r\n        <div class=\"fui-autocomplete__no-options\">\r\n          {{ noOptionsText() }}\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}.fui-autocomplete{--fui-autocomplete-font-size: var(--fui-font-size-02);--fui-autocomplete-panel-max-height: 24rem;--fui-autocomplete-panel-border-radius: var(--fui-border-radius-sm);--fui-autocomplete-panel-shadow: var(--fui-shadow-03);--fui-autocomplete-panel-bg: var(--fui-surface-00);--fui-autocomplete-option-padding: .5rem .75rem;--fui-autocomplete-search-padding: .75rem;position:relative;display:inline-block;width:100%}.fui-autocomplete__options-source{display:none}.fui-autocomplete__trigger{display:flex;align-items:center;width:100%;border:none;color:var(--fui-text-primary);font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);line-height:1.29;letter-spacing:.16px;cursor:pointer;outline:none;transition:border-color var(--fui-duration-fast-01) var(--fui-ease-standard),background-color var(--fui-duration-fast-01) var(--fui-ease-standard);gap:.25rem}.fui-autocomplete__trigger:hover:not([aria-disabled=true]){background-color:var(--fui-field-background-hover)}.fui-autocomplete__trigger[aria-disabled=true]{background-color:var(--fui-field-background-disabled);color:var(--fui-text-primary-disabled);cursor:not-allowed}.fui-autocomplete__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}.fui-autocomplete__placeholder{color:var(--fui-text-secondary)}.fui-autocomplete__value-text{color:var(--fui-text-primary)}.fui-autocomplete__clear{display:flex;align-items:center;justify-content:center;width:1rem;height:1rem;cursor:pointer;color:var(--fui-icon-secondary);flex-shrink:0;border-radius:50%;transition:color var(--fui-duration-fast-01) var(--fui-ease-standard),background-color var(--fui-duration-fast-01) var(--fui-ease-standard)}.fui-autocomplete__clear svg{width:.75rem;height:.75rem}.fui-autocomplete__clear:hover{color:var(--fui-text-primary);background-color:var(--fui-background-hover)}.fui-autocomplete__arrow{width:1rem;height:1rem;flex-shrink:0;color:var(--fui-icon-primary);pointer-events:none;transition:transform var(--fui-duration-fast-01) var(--fui-ease-standard)}.fui-autocomplete__arrow--open{transform:rotate(180deg)}.fui-autocomplete__panel{position:absolute;width:100%;background-color:var(--fui-autocomplete-panel-bg);border:1px solid var(--fui-border-color);border-radius:var(--fui-autocomplete-panel-border-radius);box-shadow:var(--fui-autocomplete-panel-shadow);max-height:var(--fui-autocomplete-panel-max-height);overflow:hidden;display:flex;flex-direction:column}.fui-autocomplete__search{position:relative;padding:.75rem;border-bottom:1px solid var(--fui-border-color);background-color:var(--fui-field-background)}.fui-autocomplete__search-icon{position:absolute;left:1.5rem;top:50%;transform:translateY(-50%);color:var(--fui-icon-secondary);pointer-events:none}.fui-autocomplete__search-input{width:100%;padding:.5rem .75rem .5rem 2.5rem;border:1px solid var(--fui-border-color);border-radius:var(--fui-border-radius-sm);background-color:var(--fui-background-primary);color:var(--fui-text-primary);font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);line-height:1.29;letter-spacing:.16px;transition:border-color var(--fui-duration-fast-01) var(--fui-ease-standard),outline var(--fui-duration-fast-01) var(--fui-ease-standard)}.fui-autocomplete__search-input:focus{outline:2px solid var(--fui-primary);outline-offset:-2px;border-color:var(--fui-primary)}.fui-autocomplete__search-input::placeholder{color:var(--fui-text-secondary)}.fui-autocomplete__actions{display:flex;gap:.5rem;padding:.5rem .75rem;border-bottom:1px solid var(--fui-border-color);background-color:var(--fui-field-background)}.fui-autocomplete__action-button{display:flex;align-items:center;gap:.25rem;font-size:var(--fui-font-size-01)}.fui-autocomplete__action-button fui-icon{flex-shrink:0}.fui-autocomplete__options{max-height:16rem;overflow-y:auto;padding:.25rem 0;background-color:var(--fui-surface-01);scrollbar-width:thin;scrollbar-color:var(--fui-border-color) transparent}.fui-autocomplete__options::-webkit-scrollbar{width:6px}.fui-autocomplete__options::-webkit-scrollbar-track{background:transparent}.fui-autocomplete__options::-webkit-scrollbar-thumb{background-color:var(--fui-border-color);border-radius:3px}.fui-autocomplete__options::-webkit-scrollbar-thumb:hover{background-color:var(--fui-text-secondary)}.fui-autocomplete__option{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;cursor:pointer;color:var(--fui-text-primary);font-size:var(--fui-font-size-02);line-height:1.29;letter-spacing:.16px;transition:background-color var(--fui-duration-fast-01) var(--fui-ease-standard)}.fui-autocomplete__option:hover:not(.fui-autocomplete__option--disabled){background-color:var(--fui-background-hover)}.fui-autocomplete__option--active{background-color:var(--fui-surface-05)}.fui-autocomplete__option--selected{background-color:var(--fui-surface-05);font-weight:600}.fui-autocomplete__option--disabled{color:var(--fui-text-primary-disabled);cursor:not-allowed}.fui-autocomplete__option-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fui-autocomplete__option-check{color:var(--fui-icon-primary);flex-shrink:0;margin-left:.5rem}.fui-autocomplete__no-options{padding:1rem .75rem;text-align:center;color:var(--fui-text-secondary);font-size:var(--fui-font-size-02);font-style:italic}.fui-autocomplete--disabled .fui-autocomplete__trigger{background-color:var(--fui-field-background-disabled);color:var(--fui-text-primary-disabled);cursor:not-allowed}.fui-autocomplete--disabled .fui-autocomplete__arrow{color:var(--fui-text-primary-disabled)}.fui-autocomplete--readonly .fui-autocomplete__trigger{background-color:transparent;min-height:unset;cursor:default;color:var(--fui-text-primary)}.fui-autocomplete--readonly .fui-autocomplete__trigger[aria-disabled=true]{background-color:transparent;color:var(--fui-text-primary);cursor:default}.fui-autocomplete--readonly .fui-autocomplete__value-text{color:var(--fui-text-primary)}.fui-autocomplete--error .fui-autocomplete__trigger{border-bottom-color:var(--fui-error)}.fui-autocomplete--error .fui-autocomplete__trigger:focus{outline-color:var(--fui-error)}.fui-autocomplete-overlay-panel .fui-autocomplete__panel{border:1px solid var(--fui-border-color);border-radius:var(--fui-border-radius-sm);box-shadow:var(--fui-shadow-03)}.fui-autocomplete-backdrop{background:transparent}@media(prefers-contrast:high){.fui-autocomplete__trigger,.fui-autocomplete__panel{border-width:2px}.fui-autocomplete__trigger:focus,.fui-autocomplete__search-input:focus{outline-width:3px}.fui-autocomplete__option--active,.fui-autocomplete__option--selected{outline:2px solid var(--fui-primary);outline-offset:-2px}}@media(prefers-reduced-motion:reduce){.fui-autocomplete__trigger,.fui-autocomplete__arrow,.fui-autocomplete__option,.fui-autocomplete__search-input{transition:none}}\n"], dependencies: [{ kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: FuiButtonDirective, selector: "button[fuiButton], a[fuiButton]", inputs: ["variant", "size", "disabled", "fullWidth", "loading", "iconOnly", "aria-label", "type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], queries: [{ propertyName: "options", predicate: FuiOptionComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<!-- Autocomplete Trigger -->\r\n<div\r\n  #trigger\r\n  [id]=\"id\"\r\n  class=\"fui-autocomplete__trigger\"\r\n  [attr.tabindex]=\"disabled() ? -1 : 0\"\r\n  [attr.role]=\"'combobox'\"\r\n  [attr.aria-haspopup]=\"'listbox'\"\r\n  [attr.aria-expanded]=\"panelOpen()\"\r\n  [attr.aria-disabled]=\"disabled()\"\r\n  [attr.aria-invalid]=\"errorState()\"\r\n  [attr.aria-describedby]=\"_ariaDescribedby\"\r\n  [attr.aria-required]=\"required()\"\r\n  aria-autocomplete=\"list\"\r\n  [attr.aria-activedescendant]=\"panelOpen() ? _getActiveDescendant() : null\"\r\n  [attr.aria-controls]=\"panelOpen() ? id + '-panel' : null\"\r\n  (keydown)=\"_handleKeydown($event)\"\r\n>\r\n  <span class=\"fui-autocomplete__value\">\r\n    @if (empty()) {\r\n      <span class=\"fui-autocomplete__placeholder\">{{ placeholder() }}</span>\r\n    } @else {\r\n      <span class=\"fui-autocomplete__value-text\">{{ _getDisplayValue() }}</span>\r\n    }\r\n  </span>\r\n\r\n  @if (!_readOnly()) {\r\n    <!-- Clear button \u2014 visible only when a value is selected and not disabled -->\r\n    @if (!empty() && !disabled()) {\r\n      <span class=\"fui-autocomplete__clear\" role=\"button\" [attr.aria-label]=\"intl.clearSelectionAriaLabel\" (click)=\"clear($event)\">\r\n        <svg viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\">\r\n          <path\r\n            d=\"M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z\"\r\n          />\r\n        </svg>\r\n      </span>\r\n    }\r\n\r\n    <!-- Dropdown arrow icon -->\r\n    <svg\r\n      class=\"fui-autocomplete__arrow\"\r\n      [class.fui-autocomplete__arrow--open]=\"panelOpen()\"\r\n      viewBox=\"0 0 16 16\"\r\n      fill=\"currentColor\"\r\n      aria-hidden=\"true\"\r\n    >\r\n      <path d=\"M8 11L3 6l.7-.7L8 9.6l4.3-4.3L13 6z\" />\r\n    </svg>\r\n  }\r\n</div>\r\n\r\n<!-- Hidden container for projected options (used for data binding) -->\r\n<div class=\"fui-autocomplete__options-source\">\r\n  <ng-content></ng-content>\r\n</div>\r\n\r\n<!-- Dropdown Panel -->\r\n@if (panelOpen()) {\r\n  <div #panel [id]=\"id + '-panel'\" class=\"fui-autocomplete__panel\" [attr.aria-label]=\"placeholder()\">\r\n    <!-- Search Input -->\r\n    <div class=\"fui-autocomplete__search\">\r\n      <fui-icon name=\"magnifying-glass\" size=\"sm\" class=\"fui-autocomplete__search-icon\"> </fui-icon>\r\n      <input\r\n        #searchInput\r\n        type=\"text\"\r\n        class=\"fui-autocomplete__search-input\"\r\n        [placeholder]=\"resolvedSearchPlaceholder()\"\r\n        [value]=\"searchTerm()\"\r\n        autocomplete=\"off\"\r\n        role=\"searchbox\"\r\n        [attr.aria-label]=\"resolvedSearchPlaceholder()\"\r\n        [attr.aria-controls]=\"id + '-panel-listbox'\"\r\n        [attr.aria-activedescendant]=\"_getActiveDescendant()\"\r\n        (input)=\"onSearchInput($event)\"\r\n        (keydown)=\"_handlePanelKeydown($event)\"\r\n      />\r\n    </div>\r\n    <!-- Live region for announcing result count to screen readers -->\r\n    <div class=\"fui-sr-only\" aria-live=\"assertive\" aria-atomic=\"true\">\r\n      @if (_liveAnnouncement()) {\r\n        {{ _liveAnnouncement() }}\r\n      } @else if (hasFilteredOptions()) {\r\n        {{ intl.resultsAvailableText(filteredOptions().length) }}\r\n      } @else {\r\n        {{ intl.noResultsAvailableText }}\r\n      }\r\n    </div>\r\n\r\n    <!-- Action Buttons -->\r\n    @if (showAddButton() || showRefreshButton()) {\r\n      <div class=\"fui-autocomplete__actions\">\r\n        @if (showAddButton()) {\r\n          <button\r\n            type=\"button\"\r\n            fuiButton\r\n            variant=\"tertiary\"\r\n            size=\"sm\"\r\n            class=\"fui-autocomplete__action-button\"\r\n            (click)=\"onAddNew()\"\r\n          >\r\n            <fui-icon name=\"plus\" size=\"sm\"></fui-icon>\r\n            {{ resolvedAddButtonLabel() }}\r\n          </button>\r\n        }\r\n        @if (showRefreshButton()) {\r\n          <button\r\n            type=\"button\"\r\n            fuiButton\r\n            variant=\"tertiary\"\r\n            size=\"sm\"\r\n            class=\"fui-autocomplete__action-button\"\r\n            (click)=\"onRefresh()\"\r\n          >\r\n            <fui-icon name=\"refresh-cw\" size=\"sm\"></fui-icon>\r\n            {{ resolvedRefreshButtonLabel() }}\r\n          </button>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    <!-- Options List -->\r\n    <div\r\n      class=\"fui-autocomplete__options\"\r\n      [id]=\"id + '-panel-listbox'\"\r\n      role=\"listbox\"\r\n      [attr.aria-label]=\"placeholder()\"\r\n    >\r\n      @if (hasFilteredOptions()) {\r\n        @for (option of filteredOptions(); track option.id; let i = $index) {\r\n          <div\r\n            class=\"fui-autocomplete__option\"\r\n            [class.fui-autocomplete__option--active]=\"activeOptionIndex() === i\"\r\n            [class.fui-autocomplete__option--selected]=\"option._selected()\"\r\n            role=\"option\"\r\n            [attr.id]=\"option.id\"\r\n            [attr.aria-selected]=\"option._selected()\"\r\n            (click)=\"_onOptionSelected(option)\"\r\n            (mouseenter)=\"setActiveOption(i, option)\"\r\n            (mouseleave)=\"option.setInactive()\"\r\n          >\r\n            <span class=\"fui-autocomplete__option-text\">{{ option.getLabel() }}</span>\r\n            @if (option._selected()) {\r\n              <fui-icon name=\"check\" size=\"sm\" class=\"fui-autocomplete__option-check\"></fui-icon>\r\n            }\r\n          </div>\r\n        }\r\n      } @else {\r\n        <div class=\"fui-autocomplete__no-options\">\r\n          {{ resolvedNoOptionsText() }}\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-autocomplete{--fui-autocomplete-font-size: var(--fui-font-size-02);--fui-autocomplete-panel-max-height: 24rem;--fui-autocomplete-panel-border-radius: var(--fui-border-radius-sm);--fui-autocomplete-panel-shadow: var(--fui-shadow-04);--fui-autocomplete-panel-bg: var(--fui-surface-00);--fui-autocomplete-option-padding: .5rem .75rem;--fui-autocomplete-search-padding: .75rem;position:relative;display:inline-block;width:100%}.fui-autocomplete__options-source{display:none}.fui-autocomplete__trigger{display:flex;align-items:center;width:100%;border:none;color:var(--fui-text-primary);font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);line-height:1.29;letter-spacing:.16px;cursor:pointer;outline:none;transition:border-color var(--fui-duration-fast-01) var(--fui-ease-standard),background-color var(--fui-duration-fast-01) var(--fui-ease-standard);gap:.25rem}.fui-autocomplete__trigger:hover:not([aria-disabled=true]){background-color:var(--fui-field-background-hover)}.fui-autocomplete__trigger[aria-disabled=true]{background-color:var(--fui-field-background-disabled);color:var(--fui-text-primary-disabled);cursor:not-allowed}.fui-autocomplete__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}.fui-autocomplete__placeholder{color:var(--fui-text-secondary)}.fui-autocomplete__value-text{color:var(--fui-text-primary)}.fui-autocomplete__clear{display:flex;align-items:center;justify-content:center;width:1rem;height:1rem;cursor:pointer;color:var(--fui-icon-secondary);flex-shrink:0;border-radius:50%;transition:color var(--fui-duration-fast-01) var(--fui-ease-standard),background-color var(--fui-duration-fast-01) var(--fui-ease-standard)}.fui-autocomplete__clear svg{width:.75rem;height:.75rem}.fui-autocomplete__clear:hover{color:var(--fui-text-primary);background-color:var(--fui-background-hover)}.fui-autocomplete__arrow{width:1rem;height:1rem;flex-shrink:0;color:var(--fui-icon-primary);pointer-events:none;transition:transform var(--fui-duration-fast-01) var(--fui-ease-standard)}.fui-autocomplete__arrow--open{transform:rotate(180deg)}.fui-autocomplete__panel{position:absolute;width:100%;background-color:var(--fui-autocomplete-panel-bg);border:1px solid var(--fui-border-color);border-radius:var(--fui-autocomplete-panel-border-radius);box-shadow:var(--fui-autocomplete-panel-shadow);max-height:var(--fui-autocomplete-panel-max-height);overflow:hidden;display:flex;flex-direction:column}.fui-autocomplete__search{position:relative;padding:.75rem;border-bottom:1px solid var(--fui-border-color);background-color:var(--fui-field-background)}.fui-autocomplete__search-icon{position:absolute;left:1.5rem;top:50%;transform:translateY(-50%);color:var(--fui-icon-secondary);pointer-events:none}.fui-autocomplete__search-input{width:100%;padding:.5rem .75rem .5rem 2.5rem;border:1px solid var(--fui-border-color);border-radius:var(--fui-border-radius-sm);background-color:var(--fui-background-primary);color:var(--fui-text-primary);font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);line-height:1.29;letter-spacing:.16px;transition:border-color var(--fui-duration-fast-01) var(--fui-ease-standard),outline var(--fui-duration-fast-01) var(--fui-ease-standard)}.fui-autocomplete__search-input:focus{outline:2px solid var(--fui-primary);outline-offset:-2px;border-color:var(--fui-primary)}.fui-autocomplete__search-input::placeholder{color:var(--fui-text-secondary)}.fui-autocomplete__actions{display:flex;gap:.5rem;padding:.5rem .75rem;border-bottom:1px solid var(--fui-border-color);background-color:var(--fui-field-background)}.fui-autocomplete__action-button{display:flex;align-items:center;gap:.25rem;font-size:var(--fui-font-size-01)}.fui-autocomplete__action-button fui-icon{flex-shrink:0}.fui-autocomplete__options{max-height:16rem;overflow-y:auto;padding:.25rem 0;background-color:var(--fui-surface-01);scrollbar-width:thin;scrollbar-color:var(--fui-border-color) transparent}.fui-autocomplete__options::-webkit-scrollbar{width:6px}.fui-autocomplete__options::-webkit-scrollbar-track{background:transparent}.fui-autocomplete__options::-webkit-scrollbar-thumb{background-color:var(--fui-border-color);border-radius:3px}.fui-autocomplete__options::-webkit-scrollbar-thumb:hover{background-color:var(--fui-text-secondary)}.fui-autocomplete__option{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;cursor:pointer;color:var(--fui-text-primary);font-size:var(--fui-font-size-02);line-height:1.29;letter-spacing:.16px;transition:background-color var(--fui-duration-fast-01) var(--fui-ease-standard)}.fui-autocomplete__option:hover:not(.fui-autocomplete__option--disabled){background-color:var(--fui-background-hover)}.fui-autocomplete__option--active{background-color:var(--fui-surface-05)}.fui-autocomplete__option--selected{background-color:var(--fui-surface-05);font-weight:600}.fui-autocomplete__option--disabled{color:var(--fui-text-primary-disabled);cursor:not-allowed}.fui-autocomplete__option-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fui-autocomplete__option-check{color:var(--fui-icon-primary);flex-shrink:0;margin-left:.5rem}.fui-autocomplete__no-options{padding:1rem .75rem;text-align:center;color:var(--fui-text-secondary);font-size:var(--fui-font-size-02);font-style:italic}.fui-autocomplete--disabled .fui-autocomplete__trigger{background-color:var(--fui-field-background-disabled);color:var(--fui-text-primary-disabled);cursor:not-allowed}.fui-autocomplete--disabled .fui-autocomplete__arrow{color:var(--fui-text-primary-disabled)}.fui-autocomplete--readonly .fui-autocomplete__trigger{background-color:transparent;min-height:unset;cursor:default;color:var(--fui-text-primary)}.fui-autocomplete--readonly .fui-autocomplete__trigger[aria-disabled=true]{background-color:transparent;color:var(--fui-text-primary);cursor:default}.fui-autocomplete--readonly .fui-autocomplete__value-text{color:var(--fui-text-primary)}.fui-autocomplete--error .fui-autocomplete__trigger{border-bottom-color:var(--fui-error)}.fui-autocomplete--error .fui-autocomplete__trigger:focus{outline-color:var(--fui-error)}.fui-autocomplete-overlay-panel .fui-autocomplete__panel{border:1px solid var(--fui-border-color);border-radius:var(--fui-border-radius-sm);box-shadow:var(--fui-shadow-04);transform-origin:top center;animation:fui-popover-enter var(--fui-duration-moderate-01) var(--fui-ease-entrance) both;will-change:transform,opacity}.fui-autocomplete-backdrop{background:transparent}@media(prefers-contrast:high){.fui-autocomplete__trigger,.fui-autocomplete__panel{border-width:2px}.fui-autocomplete__trigger:focus,.fui-autocomplete__search-input:focus{outline-width:3px}.fui-autocomplete__option--active,.fui-autocomplete__option--selected{outline:2px solid var(--fui-primary);outline-offset:-2px}}@media(prefers-reduced-motion:reduce){.fui-autocomplete__trigger,.fui-autocomplete__arrow,.fui-autocomplete__option,.fui-autocomplete__search-input{transition:none}.fui-autocomplete-overlay-panel .fui-autocomplete__panel{animation:none}}\n"], dependencies: [{ kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: FuiButtonDirective, selector: "button[fuiButton], a[fuiButton]", inputs: ["variant", "size", "disabled", "fullWidth", "loading", "iconOnly", "aria-label", "type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiAutocompleteComponent, decorators: [{
             type: Component,
@@ -706,7 +735,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                             provide: FUI_AUTOCOMPLETE,
                             useExisting: FuiAutocompleteComponent,
                         },
-                    ], template: "<!-- Autocomplete Trigger -->\r\n<div\r\n  #trigger\r\n  [id]=\"id\"\r\n  class=\"fui-autocomplete__trigger\"\r\n  [attr.tabindex]=\"disabled() ? -1 : 0\"\r\n  [attr.role]=\"'combobox'\"\r\n  [attr.aria-haspopup]=\"'listbox'\"\r\n  [attr.aria-expanded]=\"panelOpen()\"\r\n  [attr.aria-disabled]=\"disabled()\"\r\n  [attr.aria-invalid]=\"errorState()\"\r\n  [attr.aria-describedby]=\"_ariaDescribedby\"\r\n  [attr.aria-required]=\"required()\"\r\n  aria-autocomplete=\"list\"\r\n  [attr.aria-activedescendant]=\"panelOpen() ? _getActiveDescendant() : null\"\r\n  [attr.aria-controls]=\"panelOpen() ? id + '-panel' : null\"\r\n  (keydown)=\"_handleKeydown($event)\"\r\n>\r\n  <span class=\"fui-autocomplete__value\">\r\n    @if (empty()) {\r\n      <span class=\"fui-autocomplete__placeholder\">{{ placeholder() }}</span>\r\n    } @else {\r\n      <span class=\"fui-autocomplete__value-text\">{{ _getDisplayValue() }}</span>\r\n    }\r\n  </span>\r\n\r\n  @if (!_readOnly()) {\r\n    <!-- Clear button \u2014 visible only when a value is selected and not disabled -->\r\n    @if (!empty() && !disabled()) {\r\n      <span class=\"fui-autocomplete__clear\" role=\"button\" aria-label=\"Clear selection\" (click)=\"clear($event)\">\r\n        <svg viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\">\r\n          <path\r\n            d=\"M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z\"\r\n          />\r\n        </svg>\r\n      </span>\r\n    }\r\n\r\n    <!-- Dropdown arrow icon -->\r\n    <svg\r\n      class=\"fui-autocomplete__arrow\"\r\n      [class.fui-autocomplete__arrow--open]=\"panelOpen()\"\r\n      viewBox=\"0 0 16 16\"\r\n      fill=\"currentColor\"\r\n      aria-hidden=\"true\"\r\n    >\r\n      <path d=\"M8 11L3 6l.7-.7L8 9.6l4.3-4.3L13 6z\" />\r\n    </svg>\r\n  }\r\n</div>\r\n\r\n<!-- Hidden container for projected options (used for data binding) -->\r\n<div class=\"fui-autocomplete__options-source\">\r\n  <ng-content></ng-content>\r\n</div>\r\n\r\n<!-- Dropdown Panel -->\r\n@if (panelOpen()) {\r\n  <div #panel [id]=\"id + '-panel'\" class=\"fui-autocomplete__panel\" [attr.aria-label]=\"placeholder()\">\r\n    <!-- Search Input -->\r\n    <div class=\"fui-autocomplete__search\">\r\n      <fui-icon name=\"magnifying-glass\" size=\"sm\" class=\"fui-autocomplete__search-icon\"> </fui-icon>\r\n      <input\r\n        #searchInput\r\n        type=\"text\"\r\n        class=\"fui-autocomplete__search-input\"\r\n        [placeholder]=\"searchPlaceholder()\"\r\n        [value]=\"searchTerm()\"\r\n        autocomplete=\"off\"\r\n        role=\"searchbox\"\r\n        [attr.aria-label]=\"searchPlaceholder()\"\r\n        [attr.aria-controls]=\"id + '-panel-listbox'\"\r\n        [attr.aria-activedescendant]=\"_getActiveDescendant()\"\r\n        (input)=\"onSearchInput($event)\"\r\n        (keydown)=\"_handlePanelKeydown($event)\"\r\n      />\r\n    </div>\r\n    <!-- Live region for announcing result count to screen readers -->\r\n    <div class=\"fui-visually-hidden\" aria-live=\"assertive\" aria-atomic=\"true\">\r\n      @if (_liveAnnouncement()) {\r\n        {{ _liveAnnouncement() }}\r\n      } @else if (hasFilteredOptions()) {\r\n        {{ filteredOptions().length }} results available.\r\n      } @else {\r\n        No results available.\r\n      }\r\n    </div>\r\n\r\n    <!-- Action Buttons -->\r\n    @if (showAddButton() || showRefreshButton()) {\r\n      <div class=\"fui-autocomplete__actions\">\r\n        @if (showAddButton()) {\r\n          <button\r\n            type=\"button\"\r\n            fuiButton\r\n            variant=\"ghost\"\r\n            size=\"sm\"\r\n            class=\"fui-autocomplete__action-button\"\r\n            (click)=\"onAddNew()\"\r\n          >\r\n            <fui-icon name=\"plus\" size=\"sm\"></fui-icon>\r\n            {{ addButtonLabel() }}\r\n          </button>\r\n        }\r\n        @if (showRefreshButton()) {\r\n          <button\r\n            type=\"button\"\r\n            fuiButton\r\n            variant=\"ghost\"\r\n            size=\"sm\"\r\n            class=\"fui-autocomplete__action-button\"\r\n            (click)=\"onRefresh()\"\r\n          >\r\n            <fui-icon name=\"refresh-cw\" size=\"sm\"></fui-icon>\r\n            {{ refreshButtonLabel() }}\r\n          </button>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    <!-- Options List -->\r\n    <div\r\n      class=\"fui-autocomplete__options\"\r\n      [id]=\"id + '-panel-listbox'\"\r\n      role=\"listbox\"\r\n      [attr.aria-label]=\"placeholder()\"\r\n    >\r\n      @if (hasFilteredOptions()) {\r\n        @for (option of filteredOptions(); track option.id; let i = $index) {\r\n          <div\r\n            class=\"fui-autocomplete__option\"\r\n            [class.fui-autocomplete__option--active]=\"activeOptionIndex() === i\"\r\n            [class.fui-autocomplete__option--selected]=\"option._selected()\"\r\n            role=\"option\"\r\n            [attr.id]=\"option.id\"\r\n            [attr.aria-selected]=\"option._selected()\"\r\n            (click)=\"_onOptionSelected(option)\"\r\n            (mouseenter)=\"setActiveOption(i, option)\"\r\n            (mouseleave)=\"option.setInactive()\"\r\n          >\r\n            <span class=\"fui-autocomplete__option-text\">{{ option.getLabel() }}</span>\r\n            @if (option._selected()) {\r\n              <fui-icon name=\"check\" size=\"sm\" class=\"fui-autocomplete__option-check\"></fui-icon>\r\n            }\r\n          </div>\r\n        }\r\n      } @else {\r\n        <div class=\"fui-autocomplete__no-options\">\r\n          {{ noOptionsText() }}\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}.fui-autocomplete{--fui-autocomplete-font-size: var(--fui-font-size-02);--fui-autocomplete-panel-max-height: 24rem;--fui-autocomplete-panel-border-radius: var(--fui-border-radius-sm);--fui-autocomplete-panel-shadow: var(--fui-shadow-03);--fui-autocomplete-panel-bg: var(--fui-surface-00);--fui-autocomplete-option-padding: .5rem .75rem;--fui-autocomplete-search-padding: .75rem;position:relative;display:inline-block;width:100%}.fui-autocomplete__options-source{display:none}.fui-autocomplete__trigger{display:flex;align-items:center;width:100%;border:none;color:var(--fui-text-primary);font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);line-height:1.29;letter-spacing:.16px;cursor:pointer;outline:none;transition:border-color var(--fui-duration-fast-01) var(--fui-ease-standard),background-color var(--fui-duration-fast-01) var(--fui-ease-standard);gap:.25rem}.fui-autocomplete__trigger:hover:not([aria-disabled=true]){background-color:var(--fui-field-background-hover)}.fui-autocomplete__trigger[aria-disabled=true]{background-color:var(--fui-field-background-disabled);color:var(--fui-text-primary-disabled);cursor:not-allowed}.fui-autocomplete__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}.fui-autocomplete__placeholder{color:var(--fui-text-secondary)}.fui-autocomplete__value-text{color:var(--fui-text-primary)}.fui-autocomplete__clear{display:flex;align-items:center;justify-content:center;width:1rem;height:1rem;cursor:pointer;color:var(--fui-icon-secondary);flex-shrink:0;border-radius:50%;transition:color var(--fui-duration-fast-01) var(--fui-ease-standard),background-color var(--fui-duration-fast-01) var(--fui-ease-standard)}.fui-autocomplete__clear svg{width:.75rem;height:.75rem}.fui-autocomplete__clear:hover{color:var(--fui-text-primary);background-color:var(--fui-background-hover)}.fui-autocomplete__arrow{width:1rem;height:1rem;flex-shrink:0;color:var(--fui-icon-primary);pointer-events:none;transition:transform var(--fui-duration-fast-01) var(--fui-ease-standard)}.fui-autocomplete__arrow--open{transform:rotate(180deg)}.fui-autocomplete__panel{position:absolute;width:100%;background-color:var(--fui-autocomplete-panel-bg);border:1px solid var(--fui-border-color);border-radius:var(--fui-autocomplete-panel-border-radius);box-shadow:var(--fui-autocomplete-panel-shadow);max-height:var(--fui-autocomplete-panel-max-height);overflow:hidden;display:flex;flex-direction:column}.fui-autocomplete__search{position:relative;padding:.75rem;border-bottom:1px solid var(--fui-border-color);background-color:var(--fui-field-background)}.fui-autocomplete__search-icon{position:absolute;left:1.5rem;top:50%;transform:translateY(-50%);color:var(--fui-icon-secondary);pointer-events:none}.fui-autocomplete__search-input{width:100%;padding:.5rem .75rem .5rem 2.5rem;border:1px solid var(--fui-border-color);border-radius:var(--fui-border-radius-sm);background-color:var(--fui-background-primary);color:var(--fui-text-primary);font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);line-height:1.29;letter-spacing:.16px;transition:border-color var(--fui-duration-fast-01) var(--fui-ease-standard),outline var(--fui-duration-fast-01) var(--fui-ease-standard)}.fui-autocomplete__search-input:focus{outline:2px solid var(--fui-primary);outline-offset:-2px;border-color:var(--fui-primary)}.fui-autocomplete__search-input::placeholder{color:var(--fui-text-secondary)}.fui-autocomplete__actions{display:flex;gap:.5rem;padding:.5rem .75rem;border-bottom:1px solid var(--fui-border-color);background-color:var(--fui-field-background)}.fui-autocomplete__action-button{display:flex;align-items:center;gap:.25rem;font-size:var(--fui-font-size-01)}.fui-autocomplete__action-button fui-icon{flex-shrink:0}.fui-autocomplete__options{max-height:16rem;overflow-y:auto;padding:.25rem 0;background-color:var(--fui-surface-01);scrollbar-width:thin;scrollbar-color:var(--fui-border-color) transparent}.fui-autocomplete__options::-webkit-scrollbar{width:6px}.fui-autocomplete__options::-webkit-scrollbar-track{background:transparent}.fui-autocomplete__options::-webkit-scrollbar-thumb{background-color:var(--fui-border-color);border-radius:3px}.fui-autocomplete__options::-webkit-scrollbar-thumb:hover{background-color:var(--fui-text-secondary)}.fui-autocomplete__option{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;cursor:pointer;color:var(--fui-text-primary);font-size:var(--fui-font-size-02);line-height:1.29;letter-spacing:.16px;transition:background-color var(--fui-duration-fast-01) var(--fui-ease-standard)}.fui-autocomplete__option:hover:not(.fui-autocomplete__option--disabled){background-color:var(--fui-background-hover)}.fui-autocomplete__option--active{background-color:var(--fui-surface-05)}.fui-autocomplete__option--selected{background-color:var(--fui-surface-05);font-weight:600}.fui-autocomplete__option--disabled{color:var(--fui-text-primary-disabled);cursor:not-allowed}.fui-autocomplete__option-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fui-autocomplete__option-check{color:var(--fui-icon-primary);flex-shrink:0;margin-left:.5rem}.fui-autocomplete__no-options{padding:1rem .75rem;text-align:center;color:var(--fui-text-secondary);font-size:var(--fui-font-size-02);font-style:italic}.fui-autocomplete--disabled .fui-autocomplete__trigger{background-color:var(--fui-field-background-disabled);color:var(--fui-text-primary-disabled);cursor:not-allowed}.fui-autocomplete--disabled .fui-autocomplete__arrow{color:var(--fui-text-primary-disabled)}.fui-autocomplete--readonly .fui-autocomplete__trigger{background-color:transparent;min-height:unset;cursor:default;color:var(--fui-text-primary)}.fui-autocomplete--readonly .fui-autocomplete__trigger[aria-disabled=true]{background-color:transparent;color:var(--fui-text-primary);cursor:default}.fui-autocomplete--readonly .fui-autocomplete__value-text{color:var(--fui-text-primary)}.fui-autocomplete--error .fui-autocomplete__trigger{border-bottom-color:var(--fui-error)}.fui-autocomplete--error .fui-autocomplete__trigger:focus{outline-color:var(--fui-error)}.fui-autocomplete-overlay-panel .fui-autocomplete__panel{border:1px solid var(--fui-border-color);border-radius:var(--fui-border-radius-sm);box-shadow:var(--fui-shadow-03)}.fui-autocomplete-backdrop{background:transparent}@media(prefers-contrast:high){.fui-autocomplete__trigger,.fui-autocomplete__panel{border-width:2px}.fui-autocomplete__trigger:focus,.fui-autocomplete__search-input:focus{outline-width:3px}.fui-autocomplete__option--active,.fui-autocomplete__option--selected{outline:2px solid var(--fui-primary);outline-offset:-2px}}@media(prefers-reduced-motion:reduce){.fui-autocomplete__trigger,.fui-autocomplete__arrow,.fui-autocomplete__option,.fui-autocomplete__search-input{transition:none}}\n"] }]
+                    ], template: "<!-- Autocomplete Trigger -->\r\n<div\r\n  #trigger\r\n  [id]=\"id\"\r\n  class=\"fui-autocomplete__trigger\"\r\n  [attr.tabindex]=\"disabled() ? -1 : 0\"\r\n  [attr.role]=\"'combobox'\"\r\n  [attr.aria-haspopup]=\"'listbox'\"\r\n  [attr.aria-expanded]=\"panelOpen()\"\r\n  [attr.aria-disabled]=\"disabled()\"\r\n  [attr.aria-invalid]=\"errorState()\"\r\n  [attr.aria-describedby]=\"_ariaDescribedby\"\r\n  [attr.aria-required]=\"required()\"\r\n  aria-autocomplete=\"list\"\r\n  [attr.aria-activedescendant]=\"panelOpen() ? _getActiveDescendant() : null\"\r\n  [attr.aria-controls]=\"panelOpen() ? id + '-panel' : null\"\r\n  (keydown)=\"_handleKeydown($event)\"\r\n>\r\n  <span class=\"fui-autocomplete__value\">\r\n    @if (empty()) {\r\n      <span class=\"fui-autocomplete__placeholder\">{{ placeholder() }}</span>\r\n    } @else {\r\n      <span class=\"fui-autocomplete__value-text\">{{ _getDisplayValue() }}</span>\r\n    }\r\n  </span>\r\n\r\n  @if (!_readOnly()) {\r\n    <!-- Clear button \u2014 visible only when a value is selected and not disabled -->\r\n    @if (!empty() && !disabled()) {\r\n      <span class=\"fui-autocomplete__clear\" role=\"button\" [attr.aria-label]=\"intl.clearSelectionAriaLabel\" (click)=\"clear($event)\">\r\n        <svg viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\">\r\n          <path\r\n            d=\"M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z\"\r\n          />\r\n        </svg>\r\n      </span>\r\n    }\r\n\r\n    <!-- Dropdown arrow icon -->\r\n    <svg\r\n      class=\"fui-autocomplete__arrow\"\r\n      [class.fui-autocomplete__arrow--open]=\"panelOpen()\"\r\n      viewBox=\"0 0 16 16\"\r\n      fill=\"currentColor\"\r\n      aria-hidden=\"true\"\r\n    >\r\n      <path d=\"M8 11L3 6l.7-.7L8 9.6l4.3-4.3L13 6z\" />\r\n    </svg>\r\n  }\r\n</div>\r\n\r\n<!-- Hidden container for projected options (used for data binding) -->\r\n<div class=\"fui-autocomplete__options-source\">\r\n  <ng-content></ng-content>\r\n</div>\r\n\r\n<!-- Dropdown Panel -->\r\n@if (panelOpen()) {\r\n  <div #panel [id]=\"id + '-panel'\" class=\"fui-autocomplete__panel\" [attr.aria-label]=\"placeholder()\">\r\n    <!-- Search Input -->\r\n    <div class=\"fui-autocomplete__search\">\r\n      <fui-icon name=\"magnifying-glass\" size=\"sm\" class=\"fui-autocomplete__search-icon\"> </fui-icon>\r\n      <input\r\n        #searchInput\r\n        type=\"text\"\r\n        class=\"fui-autocomplete__search-input\"\r\n        [placeholder]=\"resolvedSearchPlaceholder()\"\r\n        [value]=\"searchTerm()\"\r\n        autocomplete=\"off\"\r\n        role=\"searchbox\"\r\n        [attr.aria-label]=\"resolvedSearchPlaceholder()\"\r\n        [attr.aria-controls]=\"id + '-panel-listbox'\"\r\n        [attr.aria-activedescendant]=\"_getActiveDescendant()\"\r\n        (input)=\"onSearchInput($event)\"\r\n        (keydown)=\"_handlePanelKeydown($event)\"\r\n      />\r\n    </div>\r\n    <!-- Live region for announcing result count to screen readers -->\r\n    <div class=\"fui-sr-only\" aria-live=\"assertive\" aria-atomic=\"true\">\r\n      @if (_liveAnnouncement()) {\r\n        {{ _liveAnnouncement() }}\r\n      } @else if (hasFilteredOptions()) {\r\n        {{ intl.resultsAvailableText(filteredOptions().length) }}\r\n      } @else {\r\n        {{ intl.noResultsAvailableText }}\r\n      }\r\n    </div>\r\n\r\n    <!-- Action Buttons -->\r\n    @if (showAddButton() || showRefreshButton()) {\r\n      <div class=\"fui-autocomplete__actions\">\r\n        @if (showAddButton()) {\r\n          <button\r\n            type=\"button\"\r\n            fuiButton\r\n            variant=\"tertiary\"\r\n            size=\"sm\"\r\n            class=\"fui-autocomplete__action-button\"\r\n            (click)=\"onAddNew()\"\r\n          >\r\n            <fui-icon name=\"plus\" size=\"sm\"></fui-icon>\r\n            {{ resolvedAddButtonLabel() }}\r\n          </button>\r\n        }\r\n        @if (showRefreshButton()) {\r\n          <button\r\n            type=\"button\"\r\n            fuiButton\r\n            variant=\"tertiary\"\r\n            size=\"sm\"\r\n            class=\"fui-autocomplete__action-button\"\r\n            (click)=\"onRefresh()\"\r\n          >\r\n            <fui-icon name=\"refresh-cw\" size=\"sm\"></fui-icon>\r\n            {{ resolvedRefreshButtonLabel() }}\r\n          </button>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    <!-- Options List -->\r\n    <div\r\n      class=\"fui-autocomplete__options\"\r\n      [id]=\"id + '-panel-listbox'\"\r\n      role=\"listbox\"\r\n      [attr.aria-label]=\"placeholder()\"\r\n    >\r\n      @if (hasFilteredOptions()) {\r\n        @for (option of filteredOptions(); track option.id; let i = $index) {\r\n          <div\r\n            class=\"fui-autocomplete__option\"\r\n            [class.fui-autocomplete__option--active]=\"activeOptionIndex() === i\"\r\n            [class.fui-autocomplete__option--selected]=\"option._selected()\"\r\n            role=\"option\"\r\n            [attr.id]=\"option.id\"\r\n            [attr.aria-selected]=\"option._selected()\"\r\n            (click)=\"_onOptionSelected(option)\"\r\n            (mouseenter)=\"setActiveOption(i, option)\"\r\n            (mouseleave)=\"option.setInactive()\"\r\n          >\r\n            <span class=\"fui-autocomplete__option-text\">{{ option.getLabel() }}</span>\r\n            @if (option._selected()) {\r\n              <fui-icon name=\"check\" size=\"sm\" class=\"fui-autocomplete__option-check\"></fui-icon>\r\n            }\r\n          </div>\r\n        }\r\n      } @else {\r\n        <div class=\"fui-autocomplete__no-options\">\r\n          {{ resolvedNoOptionsText() }}\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-autocomplete{--fui-autocomplete-font-size: var(--fui-font-size-02);--fui-autocomplete-panel-max-height: 24rem;--fui-autocomplete-panel-border-radius: var(--fui-border-radius-sm);--fui-autocomplete-panel-shadow: var(--fui-shadow-04);--fui-autocomplete-panel-bg: var(--fui-surface-00);--fui-autocomplete-option-padding: .5rem .75rem;--fui-autocomplete-search-padding: .75rem;position:relative;display:inline-block;width:100%}.fui-autocomplete__options-source{display:none}.fui-autocomplete__trigger{display:flex;align-items:center;width:100%;border:none;color:var(--fui-text-primary);font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);line-height:1.29;letter-spacing:.16px;cursor:pointer;outline:none;transition:border-color var(--fui-duration-fast-01) var(--fui-ease-standard),background-color var(--fui-duration-fast-01) var(--fui-ease-standard);gap:.25rem}.fui-autocomplete__trigger:hover:not([aria-disabled=true]){background-color:var(--fui-field-background-hover)}.fui-autocomplete__trigger[aria-disabled=true]{background-color:var(--fui-field-background-disabled);color:var(--fui-text-primary-disabled);cursor:not-allowed}.fui-autocomplete__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}.fui-autocomplete__placeholder{color:var(--fui-text-secondary)}.fui-autocomplete__value-text{color:var(--fui-text-primary)}.fui-autocomplete__clear{display:flex;align-items:center;justify-content:center;width:1rem;height:1rem;cursor:pointer;color:var(--fui-icon-secondary);flex-shrink:0;border-radius:50%;transition:color var(--fui-duration-fast-01) var(--fui-ease-standard),background-color var(--fui-duration-fast-01) var(--fui-ease-standard)}.fui-autocomplete__clear svg{width:.75rem;height:.75rem}.fui-autocomplete__clear:hover{color:var(--fui-text-primary);background-color:var(--fui-background-hover)}.fui-autocomplete__arrow{width:1rem;height:1rem;flex-shrink:0;color:var(--fui-icon-primary);pointer-events:none;transition:transform var(--fui-duration-fast-01) var(--fui-ease-standard)}.fui-autocomplete__arrow--open{transform:rotate(180deg)}.fui-autocomplete__panel{position:absolute;width:100%;background-color:var(--fui-autocomplete-panel-bg);border:1px solid var(--fui-border-color);border-radius:var(--fui-autocomplete-panel-border-radius);box-shadow:var(--fui-autocomplete-panel-shadow);max-height:var(--fui-autocomplete-panel-max-height);overflow:hidden;display:flex;flex-direction:column}.fui-autocomplete__search{position:relative;padding:.75rem;border-bottom:1px solid var(--fui-border-color);background-color:var(--fui-field-background)}.fui-autocomplete__search-icon{position:absolute;left:1.5rem;top:50%;transform:translateY(-50%);color:var(--fui-icon-secondary);pointer-events:none}.fui-autocomplete__search-input{width:100%;padding:.5rem .75rem .5rem 2.5rem;border:1px solid var(--fui-border-color);border-radius:var(--fui-border-radius-sm);background-color:var(--fui-background-primary);color:var(--fui-text-primary);font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);line-height:1.29;letter-spacing:.16px;transition:border-color var(--fui-duration-fast-01) var(--fui-ease-standard),outline var(--fui-duration-fast-01) var(--fui-ease-standard)}.fui-autocomplete__search-input:focus{outline:2px solid var(--fui-primary);outline-offset:-2px;border-color:var(--fui-primary)}.fui-autocomplete__search-input::placeholder{color:var(--fui-text-secondary)}.fui-autocomplete__actions{display:flex;gap:.5rem;padding:.5rem .75rem;border-bottom:1px solid var(--fui-border-color);background-color:var(--fui-field-background)}.fui-autocomplete__action-button{display:flex;align-items:center;gap:.25rem;font-size:var(--fui-font-size-01)}.fui-autocomplete__action-button fui-icon{flex-shrink:0}.fui-autocomplete__options{max-height:16rem;overflow-y:auto;padding:.25rem 0;background-color:var(--fui-surface-01);scrollbar-width:thin;scrollbar-color:var(--fui-border-color) transparent}.fui-autocomplete__options::-webkit-scrollbar{width:6px}.fui-autocomplete__options::-webkit-scrollbar-track{background:transparent}.fui-autocomplete__options::-webkit-scrollbar-thumb{background-color:var(--fui-border-color);border-radius:3px}.fui-autocomplete__options::-webkit-scrollbar-thumb:hover{background-color:var(--fui-text-secondary)}.fui-autocomplete__option{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;cursor:pointer;color:var(--fui-text-primary);font-size:var(--fui-font-size-02);line-height:1.29;letter-spacing:.16px;transition:background-color var(--fui-duration-fast-01) var(--fui-ease-standard)}.fui-autocomplete__option:hover:not(.fui-autocomplete__option--disabled){background-color:var(--fui-background-hover)}.fui-autocomplete__option--active{background-color:var(--fui-surface-05)}.fui-autocomplete__option--selected{background-color:var(--fui-surface-05);font-weight:600}.fui-autocomplete__option--disabled{color:var(--fui-text-primary-disabled);cursor:not-allowed}.fui-autocomplete__option-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fui-autocomplete__option-check{color:var(--fui-icon-primary);flex-shrink:0;margin-left:.5rem}.fui-autocomplete__no-options{padding:1rem .75rem;text-align:center;color:var(--fui-text-secondary);font-size:var(--fui-font-size-02);font-style:italic}.fui-autocomplete--disabled .fui-autocomplete__trigger{background-color:var(--fui-field-background-disabled);color:var(--fui-text-primary-disabled);cursor:not-allowed}.fui-autocomplete--disabled .fui-autocomplete__arrow{color:var(--fui-text-primary-disabled)}.fui-autocomplete--readonly .fui-autocomplete__trigger{background-color:transparent;min-height:unset;cursor:default;color:var(--fui-text-primary)}.fui-autocomplete--readonly .fui-autocomplete__trigger[aria-disabled=true]{background-color:transparent;color:var(--fui-text-primary);cursor:default}.fui-autocomplete--readonly .fui-autocomplete__value-text{color:var(--fui-text-primary)}.fui-autocomplete--error .fui-autocomplete__trigger{border-bottom-color:var(--fui-error)}.fui-autocomplete--error .fui-autocomplete__trigger:focus{outline-color:var(--fui-error)}.fui-autocomplete-overlay-panel .fui-autocomplete__panel{border:1px solid var(--fui-border-color);border-radius:var(--fui-border-radius-sm);box-shadow:var(--fui-shadow-04);transform-origin:top center;animation:fui-popover-enter var(--fui-duration-moderate-01) var(--fui-ease-entrance) both;will-change:transform,opacity}.fui-autocomplete-backdrop{background:transparent}@media(prefers-contrast:high){.fui-autocomplete__trigger,.fui-autocomplete__panel{border-width:2px}.fui-autocomplete__trigger:focus,.fui-autocomplete__search-input:focus{outline-width:3px}.fui-autocomplete__option--active,.fui-autocomplete__option--selected{outline:2px solid var(--fui-primary);outline-offset:-2px}}@media(prefers-reduced-motion:reduce){.fui-autocomplete__trigger,.fui-autocomplete__arrow,.fui-autocomplete__option,.fui-autocomplete__search-input{transition:none}.fui-autocomplete-overlay-panel .fui-autocomplete__panel{animation:none}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { placeholderInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], showAddButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAddButton", required: false }] }], showRefreshButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRefreshButton", required: false }] }], addButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "addButtonLabel", required: false }] }], refreshButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "refreshButtonLabel", required: false }] }], noOptionsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noOptionsText", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], errorStateMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorStateMatcher", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }], addNew: [{ type: i0.Output, args: ["addNew"] }], refresh: [{ type: i0.Output, args: ["refresh"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], trigger: [{
                 type: ViewChild,
                 args: ['trigger', { static: false }]
@@ -722,5 +751,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { FUI_AUTOCOMPLETE, FuiAutocompleteComponent };
+export { FUI_AUTOCOMPLETE, FuiAutocompleteComponent, FuiAutocompleteIntl };
 //# sourceMappingURL=raintonic-formaui-components-autocomplete.mjs.map