quang 19.3.15-3 → 19.3.15-4

package/fesm2022/quang-components-autocomplete.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"quang-components-autocomplete.mjs","sources":["../../../projects/quang/components/autocomplete/autocomplete.component.ts","../../../projects/quang/components/autocomplete/autocomplete.component.html","../../../projects/quang/components/autocomplete/quang-components-autocomplete.ts"],"sourcesContent":["import { NgClass, NgStyle } from '@angular/common'\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  computed,\n  effect,\n  forwardRef,\n  input,\n  output,\n  signal,\n  viewChild,\n} from '@angular/core'\nimport { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop'\nimport { NG_VALUE_ACCESSOR } from '@angular/forms'\n\nimport { TranslocoPipe } from '@jsverse/transloco'\nimport { QuangTooltipDirective } from 'quang/overlay/tooltip'\nimport { Subscription } from 'rxjs'\n\nimport {\n  OptionListParentType,\n  QuangBaseComponent,\n  QuangOptionListComponent,\n  SelectOption,\n} from 'quang/components/shared'\n\n/**\n * Autocomplete component for providing suggestion options {@link SelectOption} as the user types.\n *\n * @usageNotes\n * This component displays a list of filtered options based on user input.\n * It allows users to select an option from the suggestions and emits the event `selectedOption` when an option is selected.\n *\n * `searchTextDebounce` is by default set to 300ms.\n */\n@Component({\n  selector: 'quang-autocomplete',\n  imports: [TranslocoPipe, NgClass, QuangOptionListComponent, NgStyle, QuangTooltipDirective],\n  templateUrl: './autocomplete.component.html',\n  styleUrl: './autocomplete.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => QuangAutocompleteComponent),\n      multi: true,\n    },\n    {\n      provide: QuangOptionListComponent,\n      multi: false,\n    },\n  ],\n})\nexport class QuangAutocompleteComponent extends QuangBaseComponent<string | number | string[] | number[]> {\n  // ============================================\n  // INPUTS - Configuration properties\n  // ============================================\n\n  /**\n   * The list of options to display in the autocomplete dropdown.\n   */\n  selectOptions = input.required<SelectOption[]>()\n\n  /**\n   * When true, allows any text input as a valid form value, not just option values.\n   * The form value will sync with whatever text the user types.\n   * When false (default), the form value must match one of the option values.\n   * @default false\n   */\n  allowFreeText = input<boolean>(false)\n\n  /**\n   * When true and allowFreeText is false, automatically selects an option if the user's\n   * input text matches an option's label exactly (case-insensitive, trimmed).\n   * This provides a better UX by auto-selecting when users type a complete option label.\n   * @default true\n   */\n  autoSelectOnExactMatch = input<boolean>(true)\n\n  /**\n   * When true, updates the form value as the user types (after debounce).\n   * When false (default), the form value is only updated when:\n   * - User selects an option from the dropdown\n   * - User stops typing and the input loses focus (blur)\n   * @default false\n   */\n  updateValueOnType = input<boolean>(false)\n\n  /**\n   * Whether the form value can be any text or must match one of the options.\n   * When true, the form value syncs with the input text.\n   * When false (default), the form value must be one of the option values.\n   * @default false\n   * @deprecated Use `allowFreeText` instead. This input will be removed in a future version.\n   */\n  syncFormWithText = input<boolean>(false)\n\n  /**\n   * Maximum height of the option list before scrolling.\n   * @default '200px'\n   */\n  optionListMaxHeight = input<string>('200px')\n\n  /**\n   * Whether to translate option labels.\n   * @default true\n   */\n  translateValue = input<boolean>(true)\n\n  /**\n   * Scroll behavior when the option list opens.\n   * @default 'smooth'\n   */\n  scrollBehaviorOnOpen = input<ScrollBehavior>('smooth')\n\n  /**\n   * When true, only emits the value without saving it to ngControl.\n   * @default false\n   */\n  emitOnly = input<boolean>(false)\n\n  /**\n   * Enable multiple selection mode with chips.\n   * @default false\n   */\n  multiple = input<boolean>(false)\n\n  /**\n   * Maximum length in characters for chip display text.\n   * When set, chips will be truncated and show a tooltip with full text.\n   * @default 0 (no limit)\n   */\n  chipMaxLength = input<number>(0)\n\n  /**\n   * Layout direction for chips in multiple selection mode.\n   * @default 'vertical'\n   */\n  multiSelectDisplayMode = input<'vertical' | 'horizontal'>('vertical')\n\n  /**\n   * Debounce time in milliseconds for search text changes.\n   * @default 300\n   */\n  searchTextDebounce = input<number>(300)\n\n  /**\n   * Whether to filter options internally based on input text.\n   * When false, filtering should be handled externally via searchTextChange event.\n   * @default true\n   */\n  internalFilterOptions = input<boolean>(true)\n\n  // ============================================\n  // OUTPUTS - Event emitters\n  // ============================================\n\n  /**\n   * Emitted when an option is selected.\n   * Emits the selected option's value, or null when cleared.\n   */\n  selectedOption = output<string | number | null>()\n\n  /**\n   * Emitted when the search text changes (after debounce).\n   * Useful for external filtering or API calls.\n   */\n  searchTextChange = output<string>()\n\n  // ============================================\n  // VIEW CHILDREN - Template references\n  // ============================================\n\n  /** Reference to the option list component */\n  protected readonly optionList = viewChild<QuangOptionListComponent>('optionList')\n\n  /** Reference to the input element */\n  private readonly selectInput = viewChild<ElementRef<HTMLInputElement>>('selectInput')\n\n  /** Reference to the chip container element */\n  private readonly chipContainer = viewChild<ElementRef<HTMLDivElement>>('chipContainer')\n\n  /** Reference to the main autocomplete container */\n  private readonly autocompleteContainer = viewChild<ElementRef<HTMLDivElement>>('autocompleteContainer')\n\n  // ============================================\n  // PUBLIC STATE - Used in template\n  // ============================================\n\n  /** Constant for option list parent type */\n  readonly ParentType = OptionListParentType.AUTOCOMPLETE\n\n  /** Height of the input element (used for positioning) */\n  readonly inputHeight = signal<number>(0)\n\n  /**\n   * The display text for the input field.\n   * - When searching: shows what the user typed\n   * - When allowFreeText/syncFormWithText is true and no matching option: shows the raw value\n   * - When not searching: shows the selected option's label (derived from _value)\n   */\n  readonly _inputValue = computed<string>(() => {\n    if (this._isSearching()) {\n      return this._userSearchText()\n    }\n    // Derive display text from _value by finding the matching option\n    const value = this._value()\n    if (value === null || value === undefined || value === '' || Array.isArray(value)) {\n      return ''\n    }\n    const option = this.selectOptions().find((x) => x.value === value)\n    // When free text is allowed and no matching option found, display the value itself\n    // (since the value IS the text the user typed)\n    if (!option && this._allowFreeTextInternal()) {\n      return String(value)\n    }\n    return option?.label ?? ''\n  })\n\n  /** Whether the option list is currently visible */\n  readonly _showOptions = signal<boolean | null>(null)\n\n  /** List of selected chip values (for multiple mode) */\n  readonly _chipList = signal<string[]>([])\n\n  /** List of selected option objects (for multiple mode) */\n  readonly _selectedOptions = signal<SelectOption[]>([])\n\n  /** Filtered options based on search text and chip selection */\n  readonly _filteredOptions = computed<SelectOption[]>(() => {\n    const searchText = this._isSearching() ? this._userSearchText() : ''\n    if (this.multiple()) {\n      return this.filterOptions(searchText).filter((x) => !this._chipList().some((chip) => chip === x.value))\n    }\n    return searchText?.length ? this.filterOptions(searchText) : this.selectOptions()\n  })\n\n  /**\n   * The value to use for highlighting in the option list.\n   * When searching: shows the matched option (if any) based on exact label match\n   * When not searching: shows the current form value\n   * This keeps highlighting in sync with what will be selected on blur.\n   */\n  readonly _highlightedValue = computed<string | number | string[] | number[] | null>(() => {\n    if (this._isSearching() && !this.multiple()) {\n      const searchText = this._userSearchText()\n      if (!searchText?.trim()) {\n        // If search text is empty, don't highlight anything\n        return null\n      }\n      // Find exact match for highlighting\n      const matchingOption = this.findMatchingOption(searchText)\n      if (matchingOption && this.autoSelectOnExactMatch()) {\n        return matchingOption.value\n      }\n      // If free text is allowed, don't highlight any option\n      // (the typed text itself will be the value)\n      return null\n    }\n    // When not searching, use the current value\n    return this._value()\n  })\n\n  // ============================================\n  // PROTECTED STATE - Internal but accessible to subclasses\n  // ============================================\n\n  /** Whether the user is actively typing/searching */\n  protected readonly _isSearching = signal<boolean>(false)\n\n  /** The text the user is currently typing while searching */\n  protected readonly _userSearchText = signal<string>('')\n\n  /**\n   * Internal computed that returns true if free text input is allowed.\n   * Combines both `allowFreeText` and deprecated `syncFormWithText` inputs.\n   */\n  protected readonly _allowFreeTextInternal = computed<boolean>(() => {\n    return this.allowFreeText() || this.syncFormWithText()\n  })\n\n  /**\n   * Finds an option whose label exactly matches the given text (case-insensitive, trimmed).\n   * @param text The text to match against option labels\n   * @returns The matching option, or undefined if no match\n   */\n  protected findMatchingOption(text: string | null | undefined): SelectOption | undefined {\n    if (!text) return undefined\n    const searchTextLower = text.trim().toLowerCase()\n    return this.selectOptions().find((x) => x.label.trim().toLowerCase() === searchTextLower)\n  }\n\n  // ============================================\n  // PRIVATE STATE - Internal implementation details\n  // ============================================\n\n  /** Timer for search text debounce */\n  private _searchDebounceTimer: ReturnType<typeof setTimeout> | null = null\n\n  /** Last emitted search text (for distinctUntilChanged behavior) */\n  private _lastEmittedSearchText: string | null = null\n\n  /** Whether the component has been destroyed */\n  private _isDestroyed = false\n\n  /** Subscription to form value changes */\n  private formValueChangeSubscription: Subscription | undefined = undefined\n\n  // ============================================\n  // EFFECTS - Reactive side effects\n  // ============================================\n\n  /** Effect to handle input element setup and keyboard events */\n  private readonly onChangeSelectInputEffect = effect(() => {\n    const selectInput = this.selectInput()\n    if (selectInput) {\n      this.inputHeight.set(selectInput.nativeElement.getBoundingClientRect().height)\n      selectInput.nativeElement.addEventListener('keydown', (e: KeyboardEvent) => {\n        this.handleInputKeydown(e, selectInput.nativeElement)\n      })\n    }\n  })\n\n  /** Subscription to options changes */\n  private readonly selectOptionsChangeSubscription = toObservable(this.selectOptions)\n    .pipe(takeUntilDestroyed())\n    .subscribe(() => {\n      this.handleOptionsChange()\n    })\n\n  /** Subscription to show options changes */\n  private readonly showOptionsChangeSubscription = toObservable(this._showOptions)\n    .pipe(takeUntilDestroyed())\n    .subscribe((data) => {\n      // Note: Form value processing is now handled directly in onBlurHandler\n      // for immediate processing. This subscription is kept for backwards compatibility\n      // but the _isSearching check prevents double-processing since onBlurHandler\n      // already sets _isSearching to false before this subscription fires.\n      if (!data && data !== null && this._isSearching()) {\n        // Only process if still in search mode (which means onBlurHandler didn't run)\n        this.processTextToFormValue(this._userSearchText(), {\n          exitSearchMode: true,\n          updateOnMatch: true,\n          clearSearchText: true,\n        })\n      }\n    })\n\n  // ============================================\n  // CONSTRUCTOR\n  // ============================================\n\n  constructor() {\n    super()\n    this.destroyRef.onDestroy(() => {\n      this._isDestroyed = true\n      if (this._searchDebounceTimer) {\n        clearTimeout(this._searchDebounceTimer)\n      }\n    })\n  }\n\n  // ============================================\n  // LIFECYCLE HOOKS / OVERRIDES\n  // ============================================\n\n  override setupFormControl(): void {\n    super.setupFormControl()\n    const formControl = this._ngControl()?.control\n\n    if (this.formValueChangeSubscription) {\n      this.formValueChangeSubscription.unsubscribe()\n      this.formValueChangeSubscription = undefined\n    }\n\n    if (formControl) {\n      this.formValueChangeSubscription = formControl.valueChanges\n        .pipe(takeUntilDestroyed(this.destroyRef))\n        .subscribe((value: string | number | string[] | number[] | null) => {\n          this.handleFormValueChange(value)\n        })\n    }\n  }\n\n  override writeValue(val: string | number | string[] | number[]): void {\n    // Simply update the value - _inputValue is computed and will automatically\n    // show the correct display text based on _value and _isSearching state.\n    super.writeValue(val)\n\n    // Handle array values for multiple mode\n    if (Array.isArray(val)) {\n      val.forEach((x) => {\n        this.handleSelectValue(x)\n      })\n    }\n  }\n\n  override onChangedHandler(value: string | number | string[] | number[]): void {\n    super.onChangedHandler(value)\n    // Exit search mode - _inputValue will now derive from _value\n    // Note: Don't clear _userSearchText here - it's needed for checkInputValue matching\n    this._isSearching.set(false)\n  }\n\n  override onBlurHandler(): void {\n    // Process form value and exit search mode immediately to avoid visual glitches\n    this.processTextToFormValue(this._userSearchText(), {\n      exitSearchMode: true,\n      updateOnMatch: true,\n      clearSearchText: true,\n    })\n\n    // Hide dropdown immediately - click events on options are protected by onBlurInput\n    // which checks if focus moved to the option list before calling this handler\n    this.hideOptionVisibility()\n    super.onBlurHandler()\n  }\n\n  // ============================================\n  // PUBLIC METHODS - Used in template\n  // ============================================\n\n  /**\n   * Shows the option list dropdown.\n   */\n  showOptionVisibility(): void {\n    this._showOptions.set(true)\n\n    // Initialize _userSearchText with current input value when showing options\n    // This ensures that if user focuses and blurs without typing, the value is preserved\n    // Also enter search mode to enable filtering\n    if (!this._isSearching()) {\n      const currentInputValue = this._inputValue()\n      this._userSearchText.set(currentInputValue || '')\n      this._isSearching.set(true)\n    }\n  }\n\n  /**\n   * Hides the option list dropdown.\n   */\n  hideOptionVisibility(): void {\n    this._showOptions.set(false)\n  }\n\n  /**\n   * Handles input text changes (typing).\n   * @param event The input event\n   */\n  onChangeInput(event: Event): void {\n    this.showOptionVisibility()\n    const value = (event.target as HTMLInputElement)?.value ?? ''\n    this._isSearching.set(true)\n    this._userSearchText.set(value)\n    this.emitDebouncedSearchText(value)\n  }\n\n  /**\n   * Handles option selection from the dropdown.\n   * @param value The selected option's value\n   * @param hideOptions Whether to hide the dropdown after selection\n   */\n  onValueChange(value: string | number, hideOptions = true): void {\n    if (this.multiple()) {\n      this.handleSelectValue(value)\n      this.onChangedHandler(this._chipList())\n      if (this._chipList().some((x) => x === value)) {\n        this._userSearchText.set('')\n        this._isSearching.set(false)\n      }\n    } else {\n      // Update _userSearchText to the selected option's label\n      // This enables checkInputValue to match correctly on blur\n      const selectedOption = this.selectOptions().find((x) => x.value === value)\n      if (selectedOption) {\n        this._userSearchText.set(selectedOption.label)\n      }\n      this.onChangedHandler(value)\n      if (hideOptions) {\n        this.hideOptionVisibility()\n      }\n      this.selectedOption.emit(value)\n    }\n  }\n\n  /**\n   * Handles input blur event.\n   * @param event The focus event\n   */\n  onBlurInput(event: FocusEvent): void {\n    const relatedTarget = event.relatedTarget as HTMLElement | null\n    const optionListId = this.optionList()?.optionListContainer()?.nativeElement?.id\n    if (relatedTarget?.id !== optionListId) {\n      this.onBlurHandler()\n    }\n  }\n\n  /**\n   * Handles blur event on the option list.\n   * @param event The blur event (truthy if should hide)\n   */\n  onBlurOptionList(event: FocusEvent | boolean): void {\n    if (event) {\n      this.hideOptionVisibility()\n    }\n  }\n\n  /**\n   * Gets the display description for a chip value.\n   * @param chipValue The chip's value\n   * @returns The chip's display label\n   */\n  getDescription(chipValue: string | number): string {\n    const option = this.selectOptions().find((x) => x.value === chipValue)\n    return option?.label?.toString() ?? ''\n  }\n\n  /**\n   * Removes a chip from the selection (multiple mode).\n   * @param chipValue The chip value to remove\n   */\n  deleteChip(chipValue: string | number): void {\n    const stringChipValue = chipValue?.toString()\n    const index = this._chipList().findIndex((x) => x.toString() === stringChipValue)\n    if (index >= 0) {\n      this._chipList.update((list) => list.filter((_, i) => i !== index))\n      this.onChangedHandler(this._chipList())\n    }\n  }\n\n  // ============================================\n  // PROTECTED METHODS - Internal logic, accessible to subclasses\n  // ============================================\n\n  /**\n   * Filters options based on input text.\n   * @param value The search text\n   * @returns Filtered options\n   */\n  protected filterOptions(value: string): SelectOption[] {\n    const options = this.selectOptions()\n    if (this.internalFilterOptions()) {\n      return options.filter((x) => x.label.toLowerCase().includes(value.toLowerCase()))\n    }\n    return options\n  }\n\n  // ============================================\n  // PRIVATE METHODS - Internal implementation\n  // ============================================\n\n  /**\n   * Core method that processes text input and updates form value accordingly.\n   *\n   * Matching logic:\n   * - If text matches an option label (case-insensitive, trimmed) and autoSelectOnExactMatch is true, select that option\n   * - If no match and allowFreeText is true, use the typed text as value\n   * - If no match and allowFreeText is false, clear the value\n   *\n   * @param text The text to process\n   * @param options Configuration options:\n   *   - exitSearchMode: If true, uses onChangedHandler which exits search mode. If false, stays in search mode.\n   *   - updateOnMatch: If true, updates form when match found. If false, only clears on no-match.\n   *   - clearSearchText: If true, clears _userSearchText after processing.\n   */\n  private processTextToFormValue(\n    text: string,\n    options: { exitSearchMode: boolean; updateOnMatch: boolean; clearSearchText: boolean }\n  ): void {\n    const searchText = text?.trim()\n\n    // Find matching option: exact match (case-insensitive, trimmed)\n    const matchingOption = this.findMatchingOption(text)\n\n    if (!this.multiple()) {\n      // If the found option is already selected, nothing to do except exit search mode\n      if (matchingOption?.value === this._value()) {\n        if (options.exitSearchMode) {\n          this._isSearching.set(false)\n        }\n        if (options.clearSearchText) {\n          this._userSearchText.set('')\n        }\n        return\n      }\n\n      // Determine what action to take based on match status and settings\n      const shouldAutoSelect = matchingOption && this.autoSelectOnExactMatch() && options.updateOnMatch\n      const shouldUseFreeText = this._allowFreeTextInternal() && searchText && options.updateOnMatch\n\n      // Clear logic differs between typing and blur:\n      // - On blur (exitSearchMode=true): clear when no valid selection and free text not allowed\n      // - During typing (exitSearchMode=false): only clear when updateOnMatch is true and text doesn't match\n      const shouldClearOnBlur =\n        options.exitSearchMode && !this._allowFreeTextInternal() && (!matchingOption || !this.autoSelectOnExactMatch())\n      const shouldClearWhileTyping =\n        !options.exitSearchMode && options.updateOnMatch && !matchingOption && !this._allowFreeTextInternal()\n\n      if (shouldAutoSelect) {\n        // Auto-select the matching option\n        if (options.exitSearchMode) {\n          this.onChangedHandler(matchingOption.value ?? '')\n        } else {\n          this.onValueChange(matchingOption.value ?? '', false)\n        }\n      } else if (shouldUseFreeText) {\n        // Free text allowed: use the typed text as value\n        if (options.exitSearchMode) {\n          this.onChangedHandler(searchText)\n        } else {\n          this.onValueChange(searchText, false)\n        }\n      } else if (shouldClearOnBlur) {\n        // On blur, no valid selection possible: clear the value\n        this.onChangedHandler('')\n      } else if (shouldClearWhileTyping) {\n        // While typing, text doesn't match any option: clear the value but stay in search mode\n        this.updateValueWithoutExitingSearchMode('')\n      }\n    }\n\n    if (options.clearSearchText) {\n      this._userSearchText.set('')\n    }\n  }\n\n  /**\n   * Handles keyboard events on the input element.\n   */\n  private handleInputKeydown(e: KeyboardEvent, inputElement: HTMLInputElement): void {\n    if (this.multiple() && this._chipList().length > 0 && !this._inputValue()?.length && e.key === 'Backspace') {\n      e.preventDefault()\n      const chipContainerEl = this.chipContainer()?.nativeElement\n      if (chipContainerEl) {\n        const chips = chipContainerEl.querySelectorAll('.chip button.btn-chip') as NodeListOf<HTMLButtonElement>\n        if (chips.length > 0) {\n          const lastChip = chips[chips.length - 1]\n          lastChip.focus()\n          lastChip.addEventListener('keydown', (event: KeyboardEvent) => {\n            if (event.key === 'Backspace') {\n              event.preventDefault()\n              this.deleteChip(this._chipList()[this._chipList().length - 1])\n              inputElement.focus()\n            } else {\n              event.preventDefault()\n            }\n          })\n        }\n      }\n    }\n  }\n\n  /**\n   * Handles changes to the select options input.\n   */\n  private handleOptionsChange(): void {\n    const value = this._value()\n    if (this.multiple() && Array.isArray(value) && value.length > 0) {\n      for (const valueElement of value) {\n        this.handleSelectValue(valueElement)\n      }\n    }\n    // For single mode: _inputValue is computed, so it automatically updates\n  }\n\n  /**\n   * Handles form value changes from external sources.\n   */\n  private handleFormValueChange(value: string | number | string[] | number[] | null): void {\n    if (this.multiple() && Array.isArray(value)) {\n      this._chipList.set([])\n      this._selectedOptions.set([])\n      value.forEach((x) => {\n        this.handleSelectValue(x)\n      })\n    }\n    // Note: Don't clear _userSearchText here - it's managed by checkInputValue\n    // which runs when options are hidden and needs _userSearchText for matching.\n  }\n\n  /**\n   * Handles selecting a value (adding to chip list in multiple mode).\n   */\n  private handleSelectValue(value: string | number): void {\n    const option = this.selectOptions().find((x) => x.value === value)\n    if (option && !this._chipList().some((x) => x === option.value)) {\n      this._chipList.update((list) => [...list, option.value as string])\n      this._selectedOptions.update((list) => [...list, option])\n    }\n  }\n\n  /**\n   * Emits search text change after debounce.\n   * When `updateValueOnType` is true, also updates the form value using the same\n   * matching logic as checkInputValue (auto-select matching options, or use free text).\n   */\n  private emitDebouncedSearchText(value: string): void {\n    if (this._searchDebounceTimer) {\n      clearTimeout(this._searchDebounceTimer)\n    }\n\n    this._searchDebounceTimer = setTimeout(() => {\n      if (this._isDestroyed) {\n        return\n      }\n\n      if (value !== this._lastEmittedSearchText) {\n        this._lastEmittedSearchText = value\n        this.searchTextChange.emit(value || '')\n\n        // Update form value based on what the user typed\n        // - When updateValueOnType is true: update on both match and no-match\n        // - When updateValueOnType is false: only clear the value when text doesn't match\n        this.processTextToFormValue(value, {\n          exitSearchMode: false,\n          updateOnMatch: this.updateValueOnType(),\n          clearSearchText: false,\n        })\n      }\n    }, this.searchTextDebounce())\n  }\n\n  /**\n   * Updates the form value and internal _value signal without exiting search mode.\n   * This is used when clearing the value during typing - we want to update the form\n   * but keep the user in search mode so they can continue typing.\n   */\n  private updateValueWithoutExitingSearchMode(value: string | number | string[] | number[]): void {\n    this._value.set(value as string | number | string[] | number[] | null)\n    if (this.onChange) {\n      this.onChange(value as string)\n    }\n  }\n}\n","<div\n  [ngStyle]=\"{ '--chip-max-length': chipMaxLength() ? chipMaxLength() + 'ch' : 'none' }\"\n  #autocompleteContainer\n  class=\"autocomplete-container\"\n>\n  @if (componentLabel()) {\n    <label\n      [htmlFor]=\"componentId()\"\n      class=\"form-label\"\n    >\n      {{ componentLabel() | transloco }}\n      <span [hidden]=\"!_isRequired()\">*</span>\n    </label>\n  }\n  <div\n    [ngClass]=\"multiSelectDisplayMode() === 'horizontal' ? 'horizontal form-control' : ''\"\n    #chipContainer\n    class=\"container-wrap\"\n  >\n    @if (multiple() && _chipList().length > 0) {\n      @for (chip of _chipList(); track chip) {\n        @if (getDescription(chip)) {\n          <div\n            [quangTooltip]=\"chipMaxLength() ? getDescription(chip) : ''\"\n            class=\"chip chip-hover\"\n          >\n            <p [ngClass]=\"{ 'm-0': isReadonly() || _isDisabled() }\">\n              {{ getDescription(chip) }}\n            </p>\n            @if (!isReadonly() && !_isDisabled()) {\n              <button\n                [tabIndex]=\"$index + 1\"\n                (click)=\"deleteChip(chip)\"\n                class=\"btn btn-chip\"\n                type=\"button\"\n              >\n                <svg\n                  class=\"ionicon\"\n                  fill=\"currentColor\"\n                  height=\"24\"\n                  viewBox=\"0 0 512 512\"\n                  width=\"24\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path\n                    d=\"M368 368L144 144M368 144L144 368\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    stroke-width=\"32\"\n                  />\n                </svg>\n              </button>\n            }\n          </div>\n        }\n      }\n    }\n\n    <input\n      [attr.required]=\"getIsRequiredControl()\"\n      [class.form-control]=\"multiSelectDisplayMode() !== 'horizontal'\"\n      [class.is-invalid]=\"_showErrors()\"\n      [class.is-valid]=\"_showSuccess()\"\n      [disabled]=\"_isDisabled() || isReadonly()\"\n      [id]=\"componentId()\"\n      [ngClass]=\"componentClass()\"\n      [placeholder]=\"componentPlaceholder() | transloco\"\n      [tabIndex]=\"componentTabIndex()\"\n      [value]=\"_inputValue()\"\n      (blur)=\"onBlurInput($event)\"\n      (input)=\"onChangeInput($event)\"\n      (mousedown)=\"showOptionVisibility()\"\n      #selectInput\n      autocomplete=\"off\"\n      type=\"text\"\n    />\n  </div>\n  @if (_showOptions()) {\n    <quang-option-list\n      [_isDisabled]=\"_isDisabled()\"\n      [_value]=\"_highlightedValue()\"\n      [componentClass]=\"componentClass()\"\n      [componentLabel]=\"componentLabel()\"\n      [componentTabIndex]=\"componentTabIndex()\"\n      [nullOption]=\"false\"\n      [optionListMaxHeight]=\"optionListMaxHeight()\"\n      [parentID]=\"componentId()\"\n      [parentType]=\"ParentType\"\n      [scrollBehaviorOnOpen]=\"scrollBehaviorOnOpen()\"\n      [selectButtonRef]=\"autocompleteContainer\"\n      [selectOptions]=\"_filteredOptions()\"\n      [translateValue]=\"translateValue()\"\n      (blurHandler)=\"onBlurOptionList($event)\"\n      (changedHandler)=\"onValueChange($event)\"\n      #optionList\n      selectionMode=\"single\"\n    />\n  }\n  <div class=\"valid-feedback\">\n    {{ successMessage() | transloco }}\n  </div>\n  <div class=\"invalid-feedback\">\n    {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n  </div>\n  @if (helpMessage()) {\n    <small\n      [hidden]=\"_showSuccess() || _showErrors()\"\n      aria-live=\"assertive\"\n      class=\"form-text text-muted\"\n    >\n      {{ helpMessage() | transloco }}\n    </small>\n  }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"quang-components-autocomplete.mjs","sources":["../../../projects/quang/components/autocomplete/autocomplete.component.ts","../../../projects/quang/components/autocomplete/autocomplete.component.html","../../../projects/quang/components/autocomplete/quang-components-autocomplete.ts"],"sourcesContent":["import { NgClass, NgStyle } from '@angular/common'\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  computed,\n  effect,\n  forwardRef,\n  input,\n  output,\n  signal,\n  viewChild,\n} from '@angular/core'\nimport { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop'\nimport { NG_VALUE_ACCESSOR } from '@angular/forms'\n\nimport { TranslocoPipe } from '@jsverse/transloco'\nimport { QuangTooltipDirective } from 'quang/overlay/tooltip'\nimport { Subscription } from 'rxjs'\n\nimport {\n  OptionListParentType,\n  QuangBaseComponent,\n  QuangOptionListComponent,\n  SelectOption,\n} from 'quang/components/shared'\n\n/**\n * Autocomplete component for providing suggestion options {@link SelectOption} as the user types.\n *\n * @usageNotes\n * This component displays a list of filtered options based on user input.\n * It allows users to select an option from the suggestions and emits the event `selectedOption` when an option is selected.\n *\n * `searchTextDebounce` is by default set to 300ms.\n */\n@Component({\n  selector: 'quang-autocomplete',\n  imports: [TranslocoPipe, NgClass, QuangOptionListComponent, NgStyle, QuangTooltipDirective],\n  templateUrl: './autocomplete.component.html',\n  styleUrl: './autocomplete.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => QuangAutocompleteComponent),\n      multi: true,\n    },\n    {\n      provide: QuangOptionListComponent,\n      multi: false,\n    },\n  ],\n})\nexport class QuangAutocompleteComponent extends QuangBaseComponent<string | number | string[] | number[] | null> {\n  // ============================================\n  // INPUTS - Configuration properties\n  // ============================================\n\n  /**\n   * The list of options to display in the autocomplete dropdown.\n   */\n  selectOptions = input.required<SelectOption[]>()\n\n  /**\n   * When true, allows any text input as a valid form value, not just option values.\n   * The form value will sync with whatever text the user types.\n   * When false (default), the form value must match one of the option values.\n   * @default false\n   */\n  allowFreeText = input<boolean>(false)\n\n  /**\n   * When true and allowFreeText is false, automatically selects an option if the user's\n   * input text matches an option's label exactly (case-insensitive, trimmed).\n   * This provides a better UX by auto-selecting when users type a complete option label.\n   * @default true\n   */\n  autoSelectOnExactMatch = input<boolean>(true)\n\n  /**\n   * When true, updates the form value as the user types (after debounce).\n   * When false (default), the form value is only updated when:\n   * - User selects an option from the dropdown\n   * - User stops typing and the input loses focus (blur)\n   * @default false\n   */\n  updateValueOnType = input<boolean>(false)\n\n  /**\n   * Whether the form value can be any text or must match one of the options.\n   * When true, the form value syncs with the input text.\n   * When false (default), the form value must be one of the option values.\n   * @default false\n   * @deprecated Use `allowFreeText` instead. This input will be removed in a future version.\n   */\n  syncFormWithText = input<boolean>(false)\n\n  /**\n   * Maximum height of the option list before scrolling.\n   * @default '200px'\n   */\n  optionListMaxHeight = input<string>('200px')\n\n  /**\n   * Whether to translate option labels.\n   * @default true\n   */\n  translateValue = input<boolean>(true)\n\n  /**\n   * Scroll behavior when the option list opens.\n   * @default 'smooth'\n   */\n  scrollBehaviorOnOpen = input<ScrollBehavior>('smooth')\n\n  /**\n   * When true, only emits the value without saving it to ngControl.\n   * @default false\n   */\n  emitOnly = input<boolean>(false)\n\n  /**\n   * Enable multiple selection mode with chips.\n   * @default false\n   */\n  multiple = input<boolean>(false)\n\n  /**\n   * Maximum length in characters for chip display text.\n   * When set, chips will be truncated and show a tooltip with full text.\n   * @default 0 (no limit)\n   */\n  chipMaxLength = input<number>(0)\n\n  /**\n   * Layout direction for chips in multiple selection mode.\n   * @default 'vertical'\n   */\n  multiSelectDisplayMode = input<'vertical' | 'horizontal'>('vertical')\n\n  /**\n   * Debounce time in milliseconds for search text changes.\n   * @default 300\n   */\n  searchTextDebounce = input<number>(300)\n\n  /**\n   * Whether to filter options internally based on input text.\n   * When false, filtering should be handled externally via searchTextChange event.\n   * @default true\n   */\n  internalFilterOptions = input<boolean>(true)\n\n  // ============================================\n  // OUTPUTS - Event emitters\n  // ============================================\n\n  /**\n   * Emitted when an option is selected.\n   * Emits the selected option's value, or null when cleared.\n   */\n  selectedOption = output<string | number | null>()\n\n  /**\n   * Emitted when the search text changes (after debounce).\n   * Useful for external filtering or API calls.\n   */\n  searchTextChange = output<string>()\n\n  // ============================================\n  // VIEW CHILDREN - Template references\n  // ============================================\n\n  /** Reference to the option list component */\n  protected readonly optionList = viewChild<QuangOptionListComponent>('optionList')\n\n  /** Reference to the input element */\n  private readonly selectInput = viewChild<ElementRef<HTMLInputElement>>('selectInput')\n\n  /** Reference to the chip container element */\n  private readonly chipContainer = viewChild<ElementRef<HTMLDivElement>>('chipContainer')\n\n  /** Reference to the main autocomplete container */\n  private readonly autocompleteContainer = viewChild<ElementRef<HTMLDivElement>>('autocompleteContainer')\n\n  // ============================================\n  // PUBLIC STATE - Used in template\n  // ============================================\n\n  /** Constant for option list parent type */\n  readonly ParentType = OptionListParentType.AUTOCOMPLETE\n\n  /** Height of the input element (used for positioning) */\n  readonly inputHeight = signal<number>(0)\n\n  /**\n   * The display text for the input field.\n   * - When searching: shows what the user typed\n   * - When allowFreeText/syncFormWithText is true and no matching option: shows the raw value\n   * - When not searching: shows the selected option's label (derived from _value)\n   */\n  readonly _inputValue = computed<string>(() => {\n    if (this._isSearching()) {\n      return this._userSearchText()\n    }\n    // Derive display text from _value by finding the matching option\n    const value = this._value()\n    if (value === null || value === undefined || value === '' || Array.isArray(value)) {\n      return ''\n    }\n    const option = this.selectOptions().find((x) => x.value === value)\n    // When free text is allowed and no matching option found, display the value itself\n    // (since the value IS the text the user typed)\n    if (!option && this._allowFreeTextInternal()) {\n      return String(value)\n    }\n    return option?.label ?? ''\n  })\n\n  /** Whether the option list is currently visible */\n  readonly _showOptions = signal<boolean | null>(null)\n\n  /** List of selected chip values (for multiple mode) */\n  readonly _chipList = signal<string[]>([])\n\n  /** List of selected option objects (for multiple mode) */\n  readonly _selectedOptions = signal<SelectOption[]>([])\n\n  /** Filtered options based on search text and chip selection */\n  readonly _filteredOptions = computed<SelectOption[]>(() => {\n    const searchText = this._isSearching() ? this._userSearchText() : ''\n    if (this.multiple()) {\n      return this.filterOptions(searchText).filter((x) => !this._chipList().some((chip) => chip === x.value))\n    }\n    return searchText?.length ? this.filterOptions(searchText) : this.selectOptions()\n  })\n\n  /**\n   * The value to use for highlighting in the option list.\n   * When searching: shows the matched option (if any) based on exact label match\n   * When not searching: shows the current form value\n   * This keeps highlighting in sync with what will be selected on blur.\n   */\n  readonly _highlightedValue = computed<string | number | string[] | number[] | null>(() => {\n    if (this._isSearching() && !this.multiple()) {\n      const searchText = this._userSearchText()\n      if (!searchText?.trim()) {\n        // If search text is empty, don't highlight anything\n        return null\n      }\n      // Find exact match for highlighting\n      const matchingOption = this.findMatchingOption(searchText)\n      if (matchingOption && this.autoSelectOnExactMatch()) {\n        return matchingOption.value\n      }\n      // If free text is allowed, don't highlight any option\n      // (the typed text itself will be the value)\n      return null\n    }\n    // When not searching, use the current value\n    return this._value()\n  })\n\n  // ============================================\n  // PROTECTED STATE - Internal but accessible to subclasses\n  // ============================================\n\n  /** Whether the user is actively typing/searching */\n  protected readonly _isSearching = signal<boolean>(false)\n\n  /** The text the user is currently typing while searching */\n  protected readonly _userSearchText = signal<string>('')\n\n  /**\n   * Internal computed that returns true if free text input is allowed.\n   * Combines both `allowFreeText` and deprecated `syncFormWithText` inputs.\n   */\n  protected readonly _allowFreeTextInternal = computed<boolean>(() => {\n    return this.allowFreeText() || this.syncFormWithText()\n  })\n\n  /**\n   * Finds an option whose label exactly matches the given text (case-insensitive, trimmed).\n   * @param text The text to match against option labels\n   * @returns The matching option, or undefined if no match\n   */\n  protected findMatchingOption(text: string | null | undefined): SelectOption | undefined {\n    if (!text) return undefined\n    const searchTextLower = text.trim().toLowerCase()\n    return this.selectOptions().find((x) => x.label.trim().toLowerCase() === searchTextLower)\n  }\n\n  // ============================================\n  // PRIVATE STATE - Internal implementation details\n  // ============================================\n\n  /** Timer for search text debounce */\n  private _searchDebounceTimer: ReturnType<typeof setTimeout> | null = null\n\n  /** Last emitted search text (for distinctUntilChanged behavior) */\n  private _lastEmittedSearchText: string | null = null\n\n  /** Whether the component has been destroyed */\n  private _isDestroyed = false\n\n  /** Subscription to form value changes */\n  private formValueChangeSubscription: Subscription | undefined = undefined\n\n  // ============================================\n  // EFFECTS - Reactive side effects\n  // ============================================\n\n  /** Effect to handle input element setup and keyboard events */\n  private readonly onChangeSelectInputEffect = effect(() => {\n    const selectInput = this.selectInput()\n    if (!selectInput) return\n    this.inputHeight.set(selectInput.nativeElement.getBoundingClientRect().height)\n    selectInput.nativeElement.addEventListener('keydown', (e: KeyboardEvent) => {\n      this.handleInputKeydown(e, selectInput.nativeElement)\n    })\n  })\n\n  /** Subscription to options changes */\n  private readonly selectOptionsChangeSubscription = toObservable(this.selectOptions)\n    .pipe(takeUntilDestroyed())\n    .subscribe(() => {\n      this.handleOptionsChange()\n    })\n\n  /** Subscription to show options changes */\n  private readonly showOptionsChangeSubscription = toObservable(this._showOptions)\n    .pipe(takeUntilDestroyed())\n    .subscribe((data) => {\n      // Note: Form value processing is now handled directly in onBlurHandler\n      // for immediate processing. This subscription is kept for backwards compatibility\n      // but the _isSearching check prevents double-processing since onBlurHandler\n      // already sets _isSearching to false before this subscription fires.\n      if (!(!data && data !== null && this._isSearching())) return\n      // Only process if still in search mode (which means onBlurHandler didn't run)\n      this.processTextToFormValue(this._userSearchText(), {\n        exitSearchMode: true,\n        updateOnMatch: true,\n        clearSearchText: true,\n      })\n    })\n\n  // ============================================\n  // CONSTRUCTOR\n  // ============================================\n\n  constructor() {\n    super()\n    this.destroyRef.onDestroy(() => {\n      this._isDestroyed = true\n      if (!this._searchDebounceTimer) return\n      clearTimeout(this._searchDebounceTimer)\n    })\n  }\n\n  // ============================================\n  // LIFECYCLE HOOKS / OVERRIDES\n  // ============================================\n\n  override setupFormControl(): void {\n    super.setupFormControl()\n    const formControl = this._ngControl()?.control\n\n    if (this.formValueChangeSubscription) {\n      this.formValueChangeSubscription.unsubscribe()\n      this.formValueChangeSubscription = undefined\n    }\n\n    if (!formControl) return\n\n    this.formValueChangeSubscription = formControl.valueChanges\n      .pipe(takeUntilDestroyed(this.destroyRef))\n      .subscribe((value: string | number | string[] | number[] | null) => {\n        this.handleFormValueChange(value)\n      })\n  }\n\n  override writeValue(val: string | number | string[] | number[] | null): void {\n    // Simply update the value - _inputValue is computed and will automatically\n    // show the correct display text based on _value and _isSearching state.\n    super.writeValue(val)\n\n    // Handle array values for multiple mode\n    if (Array.isArray(val)) {\n      val.forEach((x) => {\n        this.handleSelectValue(x)\n      })\n    }\n  }\n\n  override onChangedHandler(value: string | number | string[] | number[] | null): void {\n    super.onChangedHandler(value)\n    // Exit search mode - _inputValue will now derive from _value\n    // Note: Don't clear _userSearchText here - it's needed for processTextToFormValue matching\n    this._isSearching.set(false)\n  }\n\n  override onBlurHandler(): void {\n    // Process form value and exit search mode immediately to avoid visual glitches\n    this.processTextToFormValue(this._userSearchText(), {\n      exitSearchMode: true,\n      updateOnMatch: true,\n      clearSearchText: true,\n    })\n\n    // Hide dropdown immediately - click events on options are protected by onBlurInput\n    // which checks if focus moved to the option list before calling this handler\n    this.hideOptionVisibility()\n    super.onBlurHandler()\n  }\n\n  // ============================================\n  // PUBLIC METHODS - Used in template\n  // ============================================\n\n  /**\n   * Shows the option list dropdown.\n   */\n  showOptionVisibility(): void {\n    this._showOptions.set(true)\n\n    // Initialize _userSearchText with current input value when showing options\n    // This ensures that if user focuses and blurs without typing, the value is preserved\n    // Also enter search mode to enable filtering\n    if (this._isSearching()) return\n    const currentInputValue = this._inputValue()\n    this._userSearchText.set(currentInputValue || '')\n    this._isSearching.set(true)\n  }\n\n  /**\n   * Hides the option list dropdown.\n   */\n  hideOptionVisibility(): void {\n    this._showOptions.set(false)\n  }\n\n  /**\n   * Handles input text changes (typing).\n   * @param event The input event\n   */\n  onChangeInput(event: Event): void {\n    this.showOptionVisibility()\n    const value = (event.target as HTMLInputElement)?.value ?? ''\n    this._isSearching.set(true)\n    this._userSearchText.set(value)\n    this.emitDebouncedSearchText(value)\n  }\n\n  /**\n   * Handles option selection from the dropdown.\n   * @param value The selected option's value\n   * @param hideOptions Whether to hide the dropdown after selection\n   */\n  onValueChange(value: string | number | null, hideOptions = true): void {\n    // When allowFreeText is true and a null/undefined value is received (e.g., from selecting\n    // a non-existent option in the dropdown), use the typed text as the value instead of clearing\n    if ((value === null || value === undefined) && this._allowFreeTextInternal()) {\n      const typedText = this._userSearchText()?.trim()\n      if (typedText) {\n        this.onChangedHandler(typedText)\n        if (hideOptions) {\n          this.hideOptionVisibility()\n          this.focusInput()\n        }\n        this.selectedOption.emit(typedText)\n        return\n      }\n    }\n\n    if (this.multiple()) {\n      this.handleSelectValue(value as string | number)\n      this.onChangedHandler(this._chipList())\n      if (this._chipList().some((x) => x === value)) {\n        this._userSearchText.set('')\n        this._isSearching.set(false)\n      }\n      return\n    }\n\n    // Update _userSearchText to the selected option's label\n    // This enables processTextToFormValue to match correctly on blur\n    const selectedOption = this.selectOptions().find((x) => x.value === value)\n    if (selectedOption) {\n      this._userSearchText.set(selectedOption.label)\n    }\n    this.onChangedHandler(value)\n    if (hideOptions) {\n      this.hideOptionVisibility()\n      // Return focus to input after selection\n      this.focusInput()\n    }\n    this.selectedOption.emit(value)\n  }\n\n  /**\n   * Handles keydown events on the input element for accessibility.\n   * @param event The keyboard event\n   */\n  onInputKeydown(event: KeyboardEvent): void {\n    switch (event.key) {\n      case 'ArrowDown':\n        // Open dropdown if closed, or let option-list handle navigation\n        if (!this._showOptions()) {\n          event.preventDefault()\n          this.showOptionVisibility()\n        }\n        break\n      case 'ArrowUp':\n        // Open dropdown if closed\n        if (!this._showOptions()) {\n          event.preventDefault()\n          this.showOptionVisibility()\n        }\n        break\n      case 'Escape':\n        // Close dropdown and keep focus on input\n        if (this._showOptions()) {\n          event.preventDefault()\n          this.onEscapePressed()\n        }\n        break\n      case 'Enter':\n        // When allowFreeText is true and dropdown is open, handle Enter specially\n        if (this._showOptions() && this._allowFreeTextInternal()) {\n          // Check if there are any filtered options\n          const filteredOptions = this._filteredOptions()\n          if (filteredOptions.length === 0) {\n            // No options to select - use the typed text as the value\n            event.preventDefault()\n            this.processTextToFormValue(this._userSearchText(), {\n              exitSearchMode: true,\n              updateOnMatch: true,\n              clearSearchText: false,\n            })\n            this.hideOptionVisibility()\n          }\n          // If there are filtered options, let option-list handle the selection\n        }\n        break\n    }\n  }\n\n  /**\n   * Handles Escape key press from option list.\n   * Closes dropdown and returns focus to input.\n   */\n  onEscapePressed(): void {\n    this.hideOptionVisibility()\n    this.focusInput()\n  }\n\n  /**\n   * Handles Tab key press from option list.\n   * Closes dropdown and allows natural tab navigation.\n   */\n  onTabPressed(_event: { shiftKey: boolean }): void {\n    // Close the dropdown, tab will naturally move focus\n    this.hideOptionVisibility()\n    // Process any pending input value\n    this.processTextToFormValue(this._userSearchText(), {\n      exitSearchMode: true,\n      updateOnMatch: true,\n      clearSearchText: true,\n    })\n  }\n\n  /**\n   * Sets focus to the input element.\n   */\n  focusInput(): void {\n    const inputEl = this.selectInput()?.nativeElement\n    if (!inputEl) return\n    inputEl.focus()\n  }\n\n  /**\n   * Handles input blur event.\n   * @param event The focus event\n   */\n  onBlurInput(event: FocusEvent): void {\n    const relatedTarget = event.relatedTarget as HTMLElement | null\n    const optionListId = this.optionList()?.optionListContainer()?.nativeElement?.id\n    if (relatedTarget?.id === optionListId) return\n    this.onBlurHandler()\n  }\n\n  /**\n   * Handles blur event on the option list.\n   * @param event The blur event (truthy if should hide)\n   */\n  onBlurOptionList(event: FocusEvent | boolean): void {\n    if (!event) return\n    this.hideOptionVisibility()\n  }\n\n  /**\n   * Gets the display description for a chip value.\n   * @param chipValue The chip's value\n   * @returns The chip's display label\n   */\n  getDescription(chipValue: string | number): string {\n    const option = this.selectOptions().find((x) => x.value === chipValue)\n    return option?.label?.toString() ?? ''\n  }\n\n  /**\n   * Removes a chip from the selection (multiple mode).\n   * @param chipValue The chip value to remove\n   */\n  deleteChip(chipValue: string | number): void {\n    const stringChipValue = chipValue?.toString()\n    const index = this._chipList().findIndex((x) => x.toString() === stringChipValue)\n    if (index < 0) return\n    this._chipList.update((list) => list.filter((_, i) => i !== index))\n    this.onChangedHandler(this._chipList())\n  }\n\n  // ============================================\n  // PROTECTED METHODS - Internal logic, accessible to subclasses\n  // ============================================\n\n  /**\n   * Filters options based on input text.\n   * @param value The search text\n   * @returns Filtered options\n   */\n  protected filterOptions(value: string): SelectOption[] {\n    const options = this.selectOptions()\n    const trimmedValue = value?.trim()\n    return this.internalFilterOptions() && trimmedValue\n      ? options.filter((x) => x.label.toLowerCase().includes(trimmedValue.toLowerCase()))\n      : options\n  }\n\n  // ============================================\n  // PRIVATE METHODS - Internal implementation\n  // ============================================\n\n  /**\n   * Core method that processes text input and updates form value accordingly.\n   *\n   * Matching logic:\n   * - If text matches an option label (case-insensitive, trimmed) and autoSelectOnExactMatch is true, select that option\n   * - If no match and allowFreeText is true, use the typed text as value\n   * - If no match and allowFreeText is false, clear the value\n   *\n   * @param text The text to process\n   * @param options Configuration options:\n   *   - exitSearchMode: If true, uses onChangedHandler which exits search mode. If false, stays in search mode.\n   *   - updateOnMatch: If true, updates form when match found. If false, only clears on no-match.\n   *   - clearSearchText: If true, clears _userSearchText after processing.\n   */\n  private processTextToFormValue(\n    text: string,\n    options: { exitSearchMode: boolean; updateOnMatch: boolean; clearSearchText: boolean }\n  ): void {\n    const searchText = text?.trim()\n\n    // Find matching option: exact match (case-insensitive, trimmed)\n    const matchingOption = this.findMatchingOption(text)\n\n    if (!this.multiple()) {\n      // If the found option is already selected, nothing to do except exit search mode\n      if (matchingOption?.value === this._value()) {\n        if (options.exitSearchMode) {\n          this._isSearching.set(false)\n        }\n        if (options.clearSearchText) {\n          this._userSearchText.set('')\n        }\n        return\n      }\n\n      // Determine what action to take based on match status and settings\n      const shouldAutoSelect = matchingOption && this.autoSelectOnExactMatch() && options.updateOnMatch\n      const shouldUseFreeText = this._allowFreeTextInternal() && searchText && options.updateOnMatch\n\n      // Clear logic differs between typing and blur:\n      // - On blur (exitSearchMode=true): clear when input is empty (regardless of allowFreeText setting)\n      // - On blur: also clear when no valid selection and free text not allowed\n      // - During typing (exitSearchMode=false): only clear when updateOnMatch is true and text doesn't match\n      const shouldClearOnBlurEmpty = options.exitSearchMode && !searchText\n      const shouldClearOnBlurNoMatch =\n        options.exitSearchMode && !this._allowFreeTextInternal() && (!matchingOption || !this.autoSelectOnExactMatch())\n      const shouldClearWhileTyping =\n        !options.exitSearchMode && options.updateOnMatch && !matchingOption && !this._allowFreeTextInternal()\n\n      if (shouldAutoSelect) {\n        // Auto-select the matching option\n        if (options.exitSearchMode) {\n          this.onChangedHandler(matchingOption.value ?? '')\n        } else {\n          this.onValueChange(matchingOption.value ?? '', false)\n        }\n      } else if (shouldUseFreeText) {\n        // Free text allowed: use the typed text as value\n        if (options.exitSearchMode) {\n          this.onChangedHandler(searchText)\n        } else {\n          this.onValueChange(searchText, false)\n        }\n      } else if (shouldClearOnBlurEmpty || shouldClearOnBlurNoMatch) {\n        // On blur with empty input or no valid selection: clear the value to null\n        this.onChangedHandler(null)\n      } else if (shouldClearWhileTyping) {\n        // While typing, text doesn't match any option: clear the value but stay in search mode\n        this.updateValueWithoutExitingSearchMode('')\n      }\n    }\n\n    if (options.clearSearchText) {\n      this._userSearchText.set('')\n    }\n  }\n\n  /**\n   * Handles keyboard events on the input element.\n   */\n  private handleInputKeydown(e: KeyboardEvent, inputElement: HTMLInputElement): void {\n    if (!(this.multiple() && this._chipList().length > 0 && !this._inputValue()?.length && e.key === 'Backspace')) {\n      return\n    }\n    e.preventDefault()\n    const chipContainerEl = this.chipContainer()?.nativeElement\n    if (chipContainerEl) {\n      const chips = chipContainerEl.querySelectorAll('.chip button.btn-chip') as NodeListOf<HTMLButtonElement>\n      if (chips.length > 0) {\n        const lastChip = chips[chips.length - 1]\n        lastChip.focus()\n        lastChip.addEventListener('keydown', (event: KeyboardEvent) => {\n          if (event.key === 'Backspace') {\n            event.preventDefault()\n            this.deleteChip(this._chipList()[this._chipList().length - 1])\n            inputElement.focus()\n            return\n          }\n          event.preventDefault()\n        })\n      }\n    }\n  }\n\n  /**\n   * Handles changes to the select options input.\n   */\n  private handleOptionsChange(): void {\n    const value = this._value()\n    if (this.multiple() && Array.isArray(value) && value.length > 0) {\n      for (const valueElement of value) {\n        this.handleSelectValue(valueElement)\n      }\n    }\n    // For single mode: _inputValue is computed, so it automatically updates\n  }\n\n  /**\n   * Handles form value changes from external sources.\n   */\n  private handleFormValueChange(value: string | number | string[] | number[] | null): void {\n    if (!(this.multiple() && Array.isArray(value))) {\n      return\n    }\n    this._chipList.set([])\n    this._selectedOptions.set([])\n    value.forEach((x) => {\n      this.handleSelectValue(x)\n    })\n    // Note: Don't clear _userSearchText here - it's managed by processTextToFormValue\n    // which runs when options are hidden and needs _userSearchText for matching.\n  }\n\n  /**\n   * Handles selecting a value (adding to chip list in multiple mode).\n   */\n  private handleSelectValue(value: string | number): void {\n    const option = this.selectOptions().find((x) => x.value === value)\n    if (option && !this._chipList().some((x) => x === option.value)) {\n      this._chipList.update((list) => [...list, option.value as string])\n      this._selectedOptions.update((list) => [...list, option])\n    }\n  }\n\n  /**\n   * Emits search text change after debounce.\n   * When `updateValueOnType` is true, also updates the form value using the same\n   * matching logic as processTextToFormValue (auto-select matching options, or use free text).\n   */\n  private emitDebouncedSearchText(value: string): void {\n    if (this._searchDebounceTimer) {\n      clearTimeout(this._searchDebounceTimer)\n    }\n\n    this._searchDebounceTimer = setTimeout(() => {\n      if (this._isDestroyed) {\n        return\n      }\n\n      if (value === this._lastEmittedSearchText) {\n        return\n      }\n      this._lastEmittedSearchText = value\n      this.searchTextChange.emit(value || '')\n\n      // Update form value based on what the user typed\n      // - When updateValueOnType is true: update on both match and no-match\n      // - When updateValueOnType is false: only clear the value when text doesn't match\n      this.processTextToFormValue(value, {\n        exitSearchMode: false,\n        updateOnMatch: this.updateValueOnType(),\n        clearSearchText: false,\n      })\n    }, this.searchTextDebounce())\n  }\n\n  /**\n   * Updates the form value and internal _value signal without exiting search mode.\n   * This is used when clearing the value during typing - we want to update the form\n   * but keep the user in search mode so they can continue typing.\n   */\n  private updateValueWithoutExitingSearchMode(value: string | number | string[] | number[] | null): void {\n    this._value.set(value)\n    if (this.onChange) {\n      this.onChange(value as string)\n    }\n  }\n}\n","<div\n  [ngStyle]=\"{ '--chip-max-length': chipMaxLength() ? chipMaxLength() + 'ch' : 'none' }\"\n  #autocompleteContainer\n  class=\"autocomplete-container\"\n>\n  @if (componentLabel()) {\n    <label\n      [htmlFor]=\"componentId()\"\n      class=\"form-label\"\n    >\n      {{ componentLabel() | transloco }}\n      <span [hidden]=\"!_isRequired()\">*</span>\n    </label>\n  }\n  <div\n    [ngClass]=\"multiSelectDisplayMode() === 'horizontal' ? 'horizontal form-control' : ''\"\n    #chipContainer\n    class=\"container-wrap\"\n  >\n    @if (multiple() && _chipList().length > 0) {\n      @for (chip of _chipList(); track chip) {\n        @if (getDescription(chip)) {\n          <div\n            [quangTooltip]=\"chipMaxLength() ? getDescription(chip) : ''\"\n            class=\"chip chip-hover\"\n          >\n            <p [ngClass]=\"{ 'm-0': isReadonly() || _isDisabled() }\">\n              {{ getDescription(chip) }}\n            </p>\n            @if (!isReadonly() && !_isDisabled()) {\n              <button\n                [tabIndex]=\"$index + 1\"\n                (click)=\"deleteChip(chip)\"\n                class=\"btn btn-chip\"\n                type=\"button\"\n              >\n                <svg\n                  class=\"ionicon\"\n                  fill=\"currentColor\"\n                  height=\"24\"\n                  viewBox=\"0 0 512 512\"\n                  width=\"24\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path\n                    d=\"M368 368L144 144M368 144L144 368\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    stroke-width=\"32\"\n                  />\n                </svg>\n              </button>\n            }\n          </div>\n        }\n      }\n    }\n\n    <input\n      [attr.aria-activedescendant]=\"_showOptions() ? optionList()?.getActiveDescendantId() : null\"\n      [attr.aria-controls]=\"_showOptions() ? 'optionList' : null\"\n      [attr.aria-expanded]=\"_showOptions()\"\n      [attr.required]=\"getIsRequiredControl()\"\n      [class.form-control]=\"multiSelectDisplayMode() !== 'horizontal'\"\n      [class.is-invalid]=\"_showErrors()\"\n      [class.is-valid]=\"_showSuccess()\"\n      [disabled]=\"_isDisabled() || isReadonly()\"\n      [id]=\"componentId()\"\n      [ngClass]=\"componentClass()\"\n      [placeholder]=\"componentPlaceholder() | transloco\"\n      [tabIndex]=\"componentTabIndex()\"\n      [value]=\"_inputValue()\"\n      (blur)=\"onBlurInput($event)\"\n      (input)=\"onChangeInput($event)\"\n      (keydown)=\"onInputKeydown($event)\"\n      (mousedown)=\"showOptionVisibility()\"\n      #selectInput\n      aria-autocomplete=\"list\"\n      aria-haspopup=\"listbox\"\n      autocomplete=\"off\"\n      role=\"combobox\"\n      type=\"text\"\n    />\n  </div>\n  @if (_showOptions()) {\n    <quang-option-list\n      [_isDisabled]=\"_isDisabled()\"\n      [_value]=\"_highlightedValue()\"\n      [componentClass]=\"componentClass()\"\n      [componentLabel]=\"componentLabel()\"\n      [componentTabIndex]=\"componentTabIndex()\"\n      [nullOption]=\"false\"\n      [optionListMaxHeight]=\"optionListMaxHeight()\"\n      [parentID]=\"componentId()\"\n      [parentType]=\"ParentType\"\n      [scrollBehaviorOnOpen]=\"scrollBehaviorOnOpen()\"\n      [selectButtonRef]=\"autocompleteContainer\"\n      [selectOptions]=\"_filteredOptions()\"\n      [translateValue]=\"translateValue()\"\n      (blurHandler)=\"onBlurOptionList($event)\"\n      (changedHandler)=\"onValueChange($event)\"\n      (escapePressed)=\"onEscapePressed()\"\n      (tabPressed)=\"onTabPressed($event)\"\n      #optionList\n      selectionMode=\"single\"\n    />\n  }\n  <div class=\"valid-feedback\">\n    {{ successMessage() | transloco }}\n  </div>\n  <div class=\"invalid-feedback\">\n    {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n  </div>\n  @if (helpMessage()) {\n    <small\n      [hidden]=\"_showSuccess() || _showErrors()\"\n      aria-live=\"assertive\"\n      class=\"form-text text-muted\"\n    >\n      {{ helpMessage() | transloco }}\n    </small>\n  }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/quang-components-select.mjs

@@ -90,6 +90,8 @@ class QuangSelectComponent extends QuangBaseComponent {
         super.onChangedHandler(value);
         if (this.selectionMode() === 'single') {
             this.hideOptionVisibility();
+            // Return focus to button after selection
+            this.focusButton();
         }
     }
     onMouseLeaveCallback() {
@@ -97,6 +99,61 @@ class QuangSelectComponent extends QuangBaseComponent {
             this.hideOptionVisibility();
         }
     }
+    /**
+     * Handles keydown events on the select button for accessibility.
+     * @param event The keyboard event
+     */
+    onButtonKeydown(event) {
+        switch (event.key) {
+            case 'ArrowDown':
+            case 'ArrowUp':
+                // Open dropdown if closed
+                if (!this._showOptions()) {
+                    event.preventDefault();
+                    this.showOptionVisibility();
+                }
+                break;
+            case ' ':
+            case 'Enter':
+                // Toggle dropdown with Space or Enter
+                if (!this._showOptions()) {
+                    event.preventDefault();
+                    this.showOptionVisibility();
+                }
+                break;
+            case 'Escape':
+                // Close dropdown and keep focus on button
+                if (this._showOptions()) {
+                    event.preventDefault();
+                    this.onEscapePressed();
+                }
+                break;
+        }
+    }
+    /**
+     * Handles Escape key press from option list.
+     * Closes dropdown and returns focus to button.
+     */
+    onEscapePressed() {
+        this.hideOptionVisibility(true);
+        this.focusButton();
+    }
+    /**
+     * Handles Tab key press from option list.
+     * Closes dropdown and allows natural tab navigation.
+     */
+    onTabPressed(_event) {
+        this.hideOptionVisibility(true);
+    }
+    /**
+     * Sets focus to the select button element.
+     */
+    focusButton() {
+        const buttonEl = this.selectButton()?.nativeElement;
+        if (buttonEl) {
+            buttonEl.focus();
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: QuangSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: QuangSelectComponent, isStandalone: true, selector: "quang-select", inputs: { selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, optionListMaxHeight: { classPropertyName: "optionListMaxHeight", publicName: "optionListMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, selectOptions: { classPropertyName: "selectOptions", publicName: "selectOptions", isSignal: true, isRequired: true, transformFunction: null }, scrollBehaviorOnOpen: { classPropertyName: "scrollBehaviorOnOpen", publicName: "scrollBehaviorOnOpen", isSignal: true, isRequired: false, transformFunction: null }, translateValue: { classPropertyName: "translateValue", publicName: "translateValue", isSignal: true, isRequired: false, transformFunction: null }, nullOption: { classPropertyName: "nullOption", publicName: "nullOption", isSignal: true, isRequired: false, transformFunction: null }, autoSelectSingleOption: { classPropertyName: "autoSelectSingleOption", publicName: "autoSelectSingleOption", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
@@ -108,7 +165,7 @@ class QuangSelectComponent extends QuangBaseComponent {
                 provide: QuangOptionListComponent,
                 multi: false,
             },
-        ], viewQueries: [{ propertyName: "selectButton", first: true, predicate: ["selectButton"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n  (mouseleave)=\"onMouseLeaveCallback()\"\n  class=\"mb-3\"\n>\n  @if (componentLabel()) {\n    <label\n      [htmlFor]=\"componentId()\"\n      class=\"form-label w-100\"\n    >\n      {{ componentLabel() | transloco }}\n      <span [hidden]=\"!_isRequired()\">*</span>\n    </label>\n  }\n  <div\n    [class.is-invalid]=\"_ngControl()?.invalid && (_ngControl()?.dirty || _ngControl()?.touched) && errorMap().length\"\n    [class.is-valid]=\"_ngControl()?.valid && (_ngControl()?.dirty || _ngControl()?.touched) && successMessage()\"\n    class=\"option-list-container\"\n  >\n    <button\n      [attr.required]=\"getIsRequiredControl()\"\n      [class.is-invalid]=\"_ngControl()?.invalid && (_ngControl()?.dirty || _ngControl()?.touched) && errorMap().length\"\n      [class.is-valid]=\"_ngControl()?.valid && (_ngControl()?.dirty || _ngControl()?.touched) && successMessage()\"\n      [disabled]=\"_isDisabled()\"\n      [id]=\"componentId()\"\n      [ngClass]=\"componentClass()\"\n      [tabIndex]=\"componentTabIndex()\"\n      (click)=\"changeOptionsVisibility()\"\n      #selectButton\n      class=\"form-select\"\n      type=\"button\"\n    >\n      <div class=\"content\">\n        @if (_selectedItems()?.length) {\n          @for (val of _selectedItems(); track val; let last = $last) {\n            {{ translateValue() ? (val.label | transloco) : val.label }}{{ !last ? ', ' : '' }}\n          }\n        } @else {\n          <ng-container>{{ componentPlaceholder() | transloco }}</ng-container>\n        }\n      </div>\n    </button>\n\n    @if (_showOptions()) {\n      <quang-option-list\n        [_isDisabled]=\"_isDisabled()\"\n        [_value]=\"_value()\"\n        [componentClass]=\"componentClass()\"\n        [componentLabel]=\"componentLabel()\"\n        [componentTabIndex]=\"componentTabIndex()\"\n        [nullOption]=\"nullOption()\"\n        [optionListMaxHeight]=\"optionListMaxHeight()\"\n        [parentType]=\"ParentType\"\n        [scrollBehaviorOnOpen]=\"scrollBehaviorOnOpen()\"\n        [selectButtonRef]=\"selectButton\"\n        [selectionMode]=\"selectionMode()\"\n        [selectOptions]=\"selectOptions()\"\n        [translateValue]=\"translateValue()\"\n        (blurHandler)=\"onBlurHandler()\"\n        (changedHandler)=\"onChangedHandler($event)\"\n        #optionList\n      ></quang-option-list>\n    }\n  </div>\n  <div class=\"valid-feedback\">\n    {{ successMessage() | transloco }}\n  </div>\n  <div class=\"invalid-feedback\">\n    {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n  </div>\n  @if (helpMessage()) {\n    <small\n      [hidden]=\"_showSuccess() || _showErrors()\"\n      aria-live=\"assertive\"\n      class=\"form-text text-muted\"\n    >\n      {{ helpMessage() | transloco }}\n    </small>\n  }\n</div>\n", styles: [":host{display:block}:host .option-list-container{position:relative}.form-select{height:2.375rem}.form-select:disabled{background-image:unset}.content{text-align:left;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}\n"], dependencies: [{ kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: QuangOptionListComponent, selector: "quang-option-list", inputs: ["selectionMode", "optionListMaxHeight", "selectOptions", "selectButtonRef", "_value", "_isDisabled", "componentClass", "componentLabel", "componentTabIndex", "translateValue", "nullOption", "scrollBehaviorOnOpen", "parentType", "parentID"], outputs: ["changedHandler", "blurHandler"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "selectButton", first: true, predicate: ["selectButton"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n  (mouseleave)=\"onMouseLeaveCallback()\"\n  class=\"mb-3\"\n>\n  @if (componentLabel()) {\n    <label\n      [htmlFor]=\"componentId()\"\n      class=\"form-label w-100\"\n    >\n      {{ componentLabel() | transloco }}\n      <span [hidden]=\"!_isRequired()\">*</span>\n    </label>\n  }\n  <div\n    [class.is-invalid]=\"_ngControl()?.invalid && (_ngControl()?.dirty || _ngControl()?.touched) && errorMap().length\"\n    [class.is-valid]=\"_ngControl()?.valid && (_ngControl()?.dirty || _ngControl()?.touched) && successMessage()\"\n    class=\"option-list-container\"\n  >\n    <button\n      [attr.aria-controls]=\"_showOptions() ? 'optionList' : null\"\n      [attr.aria-expanded]=\"_showOptions()\"\n      [attr.required]=\"getIsRequiredControl()\"\n      [class.is-invalid]=\"_ngControl()?.invalid && (_ngControl()?.dirty || _ngControl()?.touched) && errorMap().length\"\n      [class.is-valid]=\"_ngControl()?.valid && (_ngControl()?.dirty || _ngControl()?.touched) && successMessage()\"\n      [disabled]=\"_isDisabled()\"\n      [id]=\"componentId()\"\n      [ngClass]=\"componentClass()\"\n      [tabIndex]=\"componentTabIndex()\"\n      (click)=\"changeOptionsVisibility()\"\n      (keydown)=\"onButtonKeydown($event)\"\n      #selectButton\n      aria-haspopup=\"listbox\"\n      class=\"form-select\"\n      type=\"button\"\n    >\n      <div class=\"content\">\n        @if (_selectedItems()?.length) {\n          @for (val of _selectedItems(); track val; let last = $last) {\n            {{ translateValue() ? (val.label | transloco) : val.label }}{{ !last ? ', ' : '' }}\n          }\n        } @else {\n          <ng-container>{{ componentPlaceholder() | transloco }}</ng-container>\n        }\n      </div>\n    </button>\n\n    @if (_showOptions()) {\n      <quang-option-list\n        [_isDisabled]=\"_isDisabled()\"\n        [_value]=\"_value()\"\n        [componentClass]=\"componentClass()\"\n        [componentLabel]=\"componentLabel()\"\n        [componentTabIndex]=\"componentTabIndex()\"\n        [nullOption]=\"nullOption()\"\n        [optionListMaxHeight]=\"optionListMaxHeight()\"\n        [parentType]=\"ParentType\"\n        [scrollBehaviorOnOpen]=\"scrollBehaviorOnOpen()\"\n        [selectButtonRef]=\"selectButton\"\n        [selectionMode]=\"selectionMode()\"\n        [selectOptions]=\"selectOptions()\"\n        [translateValue]=\"translateValue()\"\n        (blurHandler)=\"onBlurHandler()\"\n        (changedHandler)=\"onChangedHandler($event)\"\n        (escapePressed)=\"onEscapePressed()\"\n        (tabPressed)=\"onTabPressed($event)\"\n        #optionList\n      ></quang-option-list>\n    }\n  </div>\n  <div class=\"valid-feedback\">\n    {{ successMessage() | transloco }}\n  </div>\n  <div class=\"invalid-feedback\">\n    {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n  </div>\n  @if (helpMessage()) {\n    <small\n      [hidden]=\"_showSuccess() || _showErrors()\"\n      aria-live=\"assertive\"\n      class=\"form-text text-muted\"\n    >\n      {{ helpMessage() | transloco }}\n    </small>\n  }\n</div>\n", styles: [":host{display:block}:host .option-list-container{position:relative}.form-select{height:2.375rem}.form-select:disabled{background-image:unset}.content{text-align:left;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}\n"], dependencies: [{ kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: QuangOptionListComponent, selector: "quang-option-list", inputs: ["selectionMode", "optionListMaxHeight", "selectOptions", "selectButtonRef", "_value", "_isDisabled", "componentClass", "componentLabel", "componentTabIndex", "translateValue", "nullOption", "scrollBehaviorOnOpen", "parentType", "parentID"], outputs: ["changedHandler", "blurHandler", "escapePressed", "tabPressed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: QuangSelectComponent, decorators: [{
             type: Component,
@@ -122,7 +179,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                             provide: QuangOptionListComponent,
                             multi: false,
                         },
-                    ], imports: [TranslocoPipe, NgClass, QuangOptionListComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  (mouseleave)=\"onMouseLeaveCallback()\"\n  class=\"mb-3\"\n>\n  @if (componentLabel()) {\n    <label\n      [htmlFor]=\"componentId()\"\n      class=\"form-label w-100\"\n    >\n      {{ componentLabel() | transloco }}\n      <span [hidden]=\"!_isRequired()\">*</span>\n    </label>\n  }\n  <div\n    [class.is-invalid]=\"_ngControl()?.invalid && (_ngControl()?.dirty || _ngControl()?.touched) && errorMap().length\"\n    [class.is-valid]=\"_ngControl()?.valid && (_ngControl()?.dirty || _ngControl()?.touched) && successMessage()\"\n    class=\"option-list-container\"\n  >\n    <button\n      [attr.required]=\"getIsRequiredControl()\"\n      [class.is-invalid]=\"_ngControl()?.invalid && (_ngControl()?.dirty || _ngControl()?.touched) && errorMap().length\"\n      [class.is-valid]=\"_ngControl()?.valid && (_ngControl()?.dirty || _ngControl()?.touched) && successMessage()\"\n      [disabled]=\"_isDisabled()\"\n      [id]=\"componentId()\"\n      [ngClass]=\"componentClass()\"\n      [tabIndex]=\"componentTabIndex()\"\n      (click)=\"changeOptionsVisibility()\"\n      #selectButton\n      class=\"form-select\"\n      type=\"button\"\n    >\n      <div class=\"content\">\n        @if (_selectedItems()?.length) {\n          @for (val of _selectedItems(); track val; let last = $last) {\n            {{ translateValue() ? (val.label | transloco) : val.label }}{{ !last ? ', ' : '' }}\n          }\n        } @else {\n          <ng-container>{{ componentPlaceholder() | transloco }}</ng-container>\n        }\n      </div>\n    </button>\n\n    @if (_showOptions()) {\n      <quang-option-list\n        [_isDisabled]=\"_isDisabled()\"\n        [_value]=\"_value()\"\n        [componentClass]=\"componentClass()\"\n        [componentLabel]=\"componentLabel()\"\n        [componentTabIndex]=\"componentTabIndex()\"\n        [nullOption]=\"nullOption()\"\n        [optionListMaxHeight]=\"optionListMaxHeight()\"\n        [parentType]=\"ParentType\"\n        [scrollBehaviorOnOpen]=\"scrollBehaviorOnOpen()\"\n        [selectButtonRef]=\"selectButton\"\n        [selectionMode]=\"selectionMode()\"\n        [selectOptions]=\"selectOptions()\"\n        [translateValue]=\"translateValue()\"\n        (blurHandler)=\"onBlurHandler()\"\n        (changedHandler)=\"onChangedHandler($event)\"\n        #optionList\n      ></quang-option-list>\n    }\n  </div>\n  <div class=\"valid-feedback\">\n    {{ successMessage() | transloco }}\n  </div>\n  <div class=\"invalid-feedback\">\n    {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n  </div>\n  @if (helpMessage()) {\n    <small\n      [hidden]=\"_showSuccess() || _showErrors()\"\n      aria-live=\"assertive\"\n      class=\"form-text text-muted\"\n    >\n      {{ helpMessage() | transloco }}\n    </small>\n  }\n</div>\n", styles: [":host{display:block}:host .option-list-container{position:relative}.form-select{height:2.375rem}.form-select:disabled{background-image:unset}.content{text-align:left;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}\n"] }]
+                    ], imports: [TranslocoPipe, NgClass, QuangOptionListComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  (mouseleave)=\"onMouseLeaveCallback()\"\n  class=\"mb-3\"\n>\n  @if (componentLabel()) {\n    <label\n      [htmlFor]=\"componentId()\"\n      class=\"form-label w-100\"\n    >\n      {{ componentLabel() | transloco }}\n      <span [hidden]=\"!_isRequired()\">*</span>\n    </label>\n  }\n  <div\n    [class.is-invalid]=\"_ngControl()?.invalid && (_ngControl()?.dirty || _ngControl()?.touched) && errorMap().length\"\n    [class.is-valid]=\"_ngControl()?.valid && (_ngControl()?.dirty || _ngControl()?.touched) && successMessage()\"\n    class=\"option-list-container\"\n  >\n    <button\n      [attr.aria-controls]=\"_showOptions() ? 'optionList' : null\"\n      [attr.aria-expanded]=\"_showOptions()\"\n      [attr.required]=\"getIsRequiredControl()\"\n      [class.is-invalid]=\"_ngControl()?.invalid && (_ngControl()?.dirty || _ngControl()?.touched) && errorMap().length\"\n      [class.is-valid]=\"_ngControl()?.valid && (_ngControl()?.dirty || _ngControl()?.touched) && successMessage()\"\n      [disabled]=\"_isDisabled()\"\n      [id]=\"componentId()\"\n      [ngClass]=\"componentClass()\"\n      [tabIndex]=\"componentTabIndex()\"\n      (click)=\"changeOptionsVisibility()\"\n      (keydown)=\"onButtonKeydown($event)\"\n      #selectButton\n      aria-haspopup=\"listbox\"\n      class=\"form-select\"\n      type=\"button\"\n    >\n      <div class=\"content\">\n        @if (_selectedItems()?.length) {\n          @for (val of _selectedItems(); track val; let last = $last) {\n            {{ translateValue() ? (val.label | transloco) : val.label }}{{ !last ? ', ' : '' }}\n          }\n        } @else {\n          <ng-container>{{ componentPlaceholder() | transloco }}</ng-container>\n        }\n      </div>\n    </button>\n\n    @if (_showOptions()) {\n      <quang-option-list\n        [_isDisabled]=\"_isDisabled()\"\n        [_value]=\"_value()\"\n        [componentClass]=\"componentClass()\"\n        [componentLabel]=\"componentLabel()\"\n        [componentTabIndex]=\"componentTabIndex()\"\n        [nullOption]=\"nullOption()\"\n        [optionListMaxHeight]=\"optionListMaxHeight()\"\n        [parentType]=\"ParentType\"\n        [scrollBehaviorOnOpen]=\"scrollBehaviorOnOpen()\"\n        [selectButtonRef]=\"selectButton\"\n        [selectionMode]=\"selectionMode()\"\n        [selectOptions]=\"selectOptions()\"\n        [translateValue]=\"translateValue()\"\n        (blurHandler)=\"onBlurHandler()\"\n        (changedHandler)=\"onChangedHandler($event)\"\n        (escapePressed)=\"onEscapePressed()\"\n        (tabPressed)=\"onTabPressed($event)\"\n        #optionList\n      ></quang-option-list>\n    }\n  </div>\n  <div class=\"valid-feedback\">\n    {{ successMessage() | transloco }}\n  </div>\n  <div class=\"invalid-feedback\">\n    {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n  </div>\n  @if (helpMessage()) {\n    <small\n      [hidden]=\"_showSuccess() || _showErrors()\"\n      aria-live=\"assertive\"\n      class=\"form-text text-muted\"\n    >\n      {{ helpMessage() | transloco }}\n    </small>\n  }\n</div>\n", styles: [":host{display:block}:host .option-list-container{position:relative}.form-select{height:2.375rem}.form-select:disabled{background-image:unset}.content{text-align:left;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}\n"] }]
         }], ctorParameters: () => [] });
 
 /**

package/fesm2022/quang-components-select.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"quang-components-select.mjs","sources":["../../../projects/quang/components/select/select.component.ts","../../../projects/quang/components/select/select.component.html","../../../projects/quang/components/select/quang-components-select.ts"],"sourcesContent":["import { NgClass } from '@angular/common'\nimport {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  computed,\n  forwardRef,\n  input,\n  signal,\n  viewChild,\n} from '@angular/core'\nimport { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop'\nimport { NG_VALUE_ACCESSOR } from '@angular/forms'\n\nimport { TranslocoPipe } from '@jsverse/transloco'\nimport { combineLatest, filter } from 'rxjs'\n\nimport {\n  OptionListParentType,\n  QuangBaseComponent,\n  QuangOptionListComponent,\n  SelectOption,\n} from 'quang/components/shared'\n\n@Component({\n  selector: 'quang-select',\n  templateUrl: './select.component.html',\n  styleUrl: './select.component.scss',\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => QuangSelectComponent),\n      multi: true,\n    },\n    {\n      provide: QuangOptionListComponent,\n      multi: false,\n    },\n  ],\n  imports: [TranslocoPipe, NgClass, QuangOptionListComponent],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/**\n * Select component for choosing one or multiple options from a dropdown.\n *\n * @usageNotes\n * This component supports both single and multiple selection modes. It can be configured\n * to display a list of options and allows users to select one or more of them by setting the `selectionMode` property to either `single` or `multiple`.\n */\nexport class QuangSelectComponent\n  extends QuangBaseComponent<string | number | string[] | number[] | null>\n  implements AfterViewInit\n{\n  selectionMode = input<'single' | 'multiple'>('single')\n\n  /**\n   * Set the max height of the selection list before scrolling.\n   * Default: 18rem\n   * @default 18rem\n   */\n  optionListMaxHeight = input<string>('18rem')\n\n  selectOptions = input.required<SelectOption[]>()\n\n  scrollBehaviorOnOpen = input<ScrollBehavior>('smooth')\n\n  selectButton = viewChild<ElementRef<HTMLButtonElement>>('selectButton')\n\n  _showOptions = signal<boolean>(false)\n\n  _optionHideTimeout = signal<any | undefined>(undefined)\n\n  _selectedItems = computed(() => {\n    if (this._value() !== null) {\n      const targetValue = this._value()\n      return this.selectOptions().filter((x) => {\n        if (Array.isArray(targetValue)) {\n          return targetValue.some((k) => k === x.value)\n        }\n        return targetValue === x.value\n      })\n    }\n    return null\n  })\n\n  translateValue = input<boolean>(true)\n\n  nullOption = input<boolean>(true)\n\n  autoSelectSingleOption = input<boolean>(false)\n\n  readonly ParentType = OptionListParentType.SELECT\n\n  constructor() {\n    super()\n    combineLatest([toObservable(this.autoSelectSingleOption), toObservable(this.selectOptions)])\n      .pipe(\n        takeUntilDestroyed(this.destroyRef),\n        filter(([autoselect, options]) => autoselect === true && options.length === 1)\n      )\n      .subscribe(([_, options]) => {\n        if (this._value() === null || this._value() === undefined || this._value() === '') {\n          this.onChangedHandler(options[0].value)\n        }\n      })\n  }\n\n  changeOptionsVisibility(skipTimeout = false): void {\n    if (this.isReadonly()) return\n    if (this._showOptions()) {\n      this._showOptions.set(skipTimeout)\n    } else {\n      this.showOptionVisibility()\n    }\n  }\n\n  showOptionVisibility(): void {\n    if (this._optionHideTimeout()) {\n      clearTimeout(this._optionHideTimeout())\n      this._optionHideTimeout.set(null)\n    }\n    this._showOptions.set(true)\n  }\n\n  hideOptionVisibility(skipTimeout = false): void {\n    if (this._optionHideTimeout()) {\n      clearTimeout(this._optionHideTimeout())\n    }\n    this._optionHideTimeout.set(\n      setTimeout(\n        () => {\n          this._showOptions.set(false)\n        },\n        skipTimeout ? 0 : 50\n      )\n    )\n  }\n\n  override onBlurHandler() {\n    if (this.selectionMode() === 'single') {\n      setTimeout(() => {\n        this.hideOptionVisibility()\n        super.onBlurHandler()\n      }, 100)\n    }\n  }\n\n  override onChangedHandler(value: string | number | string[] | number[] | null): void {\n    super.onChangedHandler(value)\n    if (this.selectionMode() === 'single') {\n      this.hideOptionVisibility()\n    }\n  }\n\n  onMouseLeaveCallback() {\n    if (this.selectionMode() === 'multiple') {\n      this.hideOptionVisibility()\n    }\n  }\n}\n","<div\n  (mouseleave)=\"onMouseLeaveCallback()\"\n  class=\"mb-3\"\n>\n  @if (componentLabel()) {\n    <label\n      [htmlFor]=\"componentId()\"\n      class=\"form-label w-100\"\n    >\n      {{ componentLabel() | transloco }}\n      <span [hidden]=\"!_isRequired()\">*</span>\n    </label>\n  }\n  <div\n    [class.is-invalid]=\"_ngControl()?.invalid && (_ngControl()?.dirty || _ngControl()?.touched) && errorMap().length\"\n    [class.is-valid]=\"_ngControl()?.valid && (_ngControl()?.dirty || _ngControl()?.touched) && successMessage()\"\n    class=\"option-list-container\"\n  >\n    <button\n      [attr.required]=\"getIsRequiredControl()\"\n      [class.is-invalid]=\"_ngControl()?.invalid && (_ngControl()?.dirty || _ngControl()?.touched) && errorMap().length\"\n      [class.is-valid]=\"_ngControl()?.valid && (_ngControl()?.dirty || _ngControl()?.touched) && successMessage()\"\n      [disabled]=\"_isDisabled()\"\n      [id]=\"componentId()\"\n      [ngClass]=\"componentClass()\"\n      [tabIndex]=\"componentTabIndex()\"\n      (click)=\"changeOptionsVisibility()\"\n      #selectButton\n      class=\"form-select\"\n      type=\"button\"\n    >\n      <div class=\"content\">\n        @if (_selectedItems()?.length) {\n          @for (val of _selectedItems(); track val; let last = $last) {\n            {{ translateValue() ? (val.label | transloco) : val.label }}{{ !last ? ', ' : '' }}\n          }\n        } @else {\n          <ng-container>{{ componentPlaceholder() | transloco }}</ng-container>\n        }\n      </div>\n    </button>\n\n    @if (_showOptions()) {\n      <quang-option-list\n        [_isDisabled]=\"_isDisabled()\"\n        [_value]=\"_value()\"\n        [componentClass]=\"componentClass()\"\n        [componentLabel]=\"componentLabel()\"\n        [componentTabIndex]=\"componentTabIndex()\"\n        [nullOption]=\"nullOption()\"\n        [optionListMaxHeight]=\"optionListMaxHeight()\"\n        [parentType]=\"ParentType\"\n        [scrollBehaviorOnOpen]=\"scrollBehaviorOnOpen()\"\n        [selectButtonRef]=\"selectButton\"\n        [selectionMode]=\"selectionMode()\"\n        [selectOptions]=\"selectOptions()\"\n        [translateValue]=\"translateValue()\"\n        (blurHandler)=\"onBlurHandler()\"\n        (changedHandler)=\"onChangedHandler($event)\"\n        #optionList\n      ></quang-option-list>\n    }\n  </div>\n  <div class=\"valid-feedback\">\n    {{ successMessage() | transloco }}\n  </div>\n  <div class=\"invalid-feedback\">\n    {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n  </div>\n  @if (helpMessage()) {\n    <small\n      [hidden]=\"_showSuccess() || _showErrors()\"\n      aria-live=\"assertive\"\n      class=\"form-text text-muted\"\n    >\n      {{ helpMessage() | transloco }}\n    </small>\n  }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"quang-components-select.mjs","sources":["../../../projects/quang/components/select/select.component.ts","../../../projects/quang/components/select/select.component.html","../../../projects/quang/components/select/quang-components-select.ts"],"sourcesContent":["import { NgClass } from '@angular/common'\nimport {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  computed,\n  forwardRef,\n  input,\n  signal,\n  viewChild,\n} from '@angular/core'\nimport { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop'\nimport { NG_VALUE_ACCESSOR } from '@angular/forms'\n\nimport { TranslocoPipe } from '@jsverse/transloco'\nimport { combineLatest, filter } from 'rxjs'\n\nimport {\n  OptionListParentType,\n  QuangBaseComponent,\n  QuangOptionListComponent,\n  SelectOption,\n} from 'quang/components/shared'\n\n@Component({\n  selector: 'quang-select',\n  templateUrl: './select.component.html',\n  styleUrl: './select.component.scss',\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => QuangSelectComponent),\n      multi: true,\n    },\n    {\n      provide: QuangOptionListComponent,\n      multi: false,\n    },\n  ],\n  imports: [TranslocoPipe, NgClass, QuangOptionListComponent],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/**\n * Select component for choosing one or multiple options from a dropdown.\n *\n * @usageNotes\n * This component supports both single and multiple selection modes. It can be configured\n * to display a list of options and allows users to select one or more of them by setting the `selectionMode` property to either `single` or `multiple`.\n */\nexport class QuangSelectComponent\n  extends QuangBaseComponent<string | number | string[] | number[] | null>\n  implements AfterViewInit\n{\n  selectionMode = input<'single' | 'multiple'>('single')\n\n  /**\n   * Set the max height of the selection list before scrolling.\n   * Default: 18rem\n   * @default 18rem\n   */\n  optionListMaxHeight = input<string>('18rem')\n\n  selectOptions = input.required<SelectOption[]>()\n\n  scrollBehaviorOnOpen = input<ScrollBehavior>('smooth')\n\n  selectButton = viewChild<ElementRef<HTMLButtonElement>>('selectButton')\n\n  _showOptions = signal<boolean>(false)\n\n  _optionHideTimeout = signal<any | undefined>(undefined)\n\n  _selectedItems = computed(() => {\n    if (this._value() !== null) {\n      const targetValue = this._value()\n      return this.selectOptions().filter((x) => {\n        if (Array.isArray(targetValue)) {\n          return targetValue.some((k) => k === x.value)\n        }\n        return targetValue === x.value\n      })\n    }\n    return null\n  })\n\n  translateValue = input<boolean>(true)\n\n  nullOption = input<boolean>(true)\n\n  autoSelectSingleOption = input<boolean>(false)\n\n  readonly ParentType = OptionListParentType.SELECT\n\n  constructor() {\n    super()\n    combineLatest([toObservable(this.autoSelectSingleOption), toObservable(this.selectOptions)])\n      .pipe(\n        takeUntilDestroyed(this.destroyRef),\n        filter(([autoselect, options]) => autoselect === true && options.length === 1)\n      )\n      .subscribe(([_, options]) => {\n        if (this._value() === null || this._value() === undefined || this._value() === '') {\n          this.onChangedHandler(options[0].value)\n        }\n      })\n  }\n\n  changeOptionsVisibility(skipTimeout = false): void {\n    if (this.isReadonly()) return\n    if (this._showOptions()) {\n      this._showOptions.set(skipTimeout)\n    } else {\n      this.showOptionVisibility()\n    }\n  }\n\n  showOptionVisibility(): void {\n    if (this._optionHideTimeout()) {\n      clearTimeout(this._optionHideTimeout())\n      this._optionHideTimeout.set(null)\n    }\n    this._showOptions.set(true)\n  }\n\n  hideOptionVisibility(skipTimeout = false): void {\n    if (this._optionHideTimeout()) {\n      clearTimeout(this._optionHideTimeout())\n    }\n    this._optionHideTimeout.set(\n      setTimeout(\n        () => {\n          this._showOptions.set(false)\n        },\n        skipTimeout ? 0 : 50\n      )\n    )\n  }\n\n  override onBlurHandler() {\n    if (this.selectionMode() === 'single') {\n      setTimeout(() => {\n        this.hideOptionVisibility()\n        super.onBlurHandler()\n      }, 100)\n    }\n  }\n\n  override onChangedHandler(value: string | number | string[] | number[] | null): void {\n    super.onChangedHandler(value)\n    if (this.selectionMode() === 'single') {\n      this.hideOptionVisibility()\n      // Return focus to button after selection\n      this.focusButton()\n    }\n  }\n\n  onMouseLeaveCallback() {\n    if (this.selectionMode() === 'multiple') {\n      this.hideOptionVisibility()\n    }\n  }\n\n  /**\n   * Handles keydown events on the select button for accessibility.\n   * @param event The keyboard event\n   */\n  onButtonKeydown(event: KeyboardEvent): void {\n    switch (event.key) {\n      case 'ArrowDown':\n      case 'ArrowUp':\n        // Open dropdown if closed\n        if (!this._showOptions()) {\n          event.preventDefault()\n          this.showOptionVisibility()\n        }\n        break\n      case ' ':\n      case 'Enter':\n        // Toggle dropdown with Space or Enter\n        if (!this._showOptions()) {\n          event.preventDefault()\n          this.showOptionVisibility()\n        }\n        break\n      case 'Escape':\n        // Close dropdown and keep focus on button\n        if (this._showOptions()) {\n          event.preventDefault()\n          this.onEscapePressed()\n        }\n        break\n    }\n  }\n\n  /**\n   * Handles Escape key press from option list.\n   * Closes dropdown and returns focus to button.\n   */\n  onEscapePressed(): void {\n    this.hideOptionVisibility(true)\n    this.focusButton()\n  }\n\n  /**\n   * Handles Tab key press from option list.\n   * Closes dropdown and allows natural tab navigation.\n   */\n  onTabPressed(_event: { shiftKey: boolean }): void {\n    this.hideOptionVisibility(true)\n  }\n\n  /**\n   * Sets focus to the select button element.\n   */\n  focusButton(): void {\n    const buttonEl = this.selectButton()?.nativeElement\n    if (buttonEl) {\n      buttonEl.focus()\n    }\n  }\n}\n","<div\n  (mouseleave)=\"onMouseLeaveCallback()\"\n  class=\"mb-3\"\n>\n  @if (componentLabel()) {\n    <label\n      [htmlFor]=\"componentId()\"\n      class=\"form-label w-100\"\n    >\n      {{ componentLabel() | transloco }}\n      <span [hidden]=\"!_isRequired()\">*</span>\n    </label>\n  }\n  <div\n    [class.is-invalid]=\"_ngControl()?.invalid && (_ngControl()?.dirty || _ngControl()?.touched) && errorMap().length\"\n    [class.is-valid]=\"_ngControl()?.valid && (_ngControl()?.dirty || _ngControl()?.touched) && successMessage()\"\n    class=\"option-list-container\"\n  >\n    <button\n      [attr.aria-controls]=\"_showOptions() ? 'optionList' : null\"\n      [attr.aria-expanded]=\"_showOptions()\"\n      [attr.required]=\"getIsRequiredControl()\"\n      [class.is-invalid]=\"_ngControl()?.invalid && (_ngControl()?.dirty || _ngControl()?.touched) && errorMap().length\"\n      [class.is-valid]=\"_ngControl()?.valid && (_ngControl()?.dirty || _ngControl()?.touched) && successMessage()\"\n      [disabled]=\"_isDisabled()\"\n      [id]=\"componentId()\"\n      [ngClass]=\"componentClass()\"\n      [tabIndex]=\"componentTabIndex()\"\n      (click)=\"changeOptionsVisibility()\"\n      (keydown)=\"onButtonKeydown($event)\"\n      #selectButton\n      aria-haspopup=\"listbox\"\n      class=\"form-select\"\n      type=\"button\"\n    >\n      <div class=\"content\">\n        @if (_selectedItems()?.length) {\n          @for (val of _selectedItems(); track val; let last = $last) {\n            {{ translateValue() ? (val.label | transloco) : val.label }}{{ !last ? ', ' : '' }}\n          }\n        } @else {\n          <ng-container>{{ componentPlaceholder() | transloco }}</ng-container>\n        }\n      </div>\n    </button>\n\n    @if (_showOptions()) {\n      <quang-option-list\n        [_isDisabled]=\"_isDisabled()\"\n        [_value]=\"_value()\"\n        [componentClass]=\"componentClass()\"\n        [componentLabel]=\"componentLabel()\"\n        [componentTabIndex]=\"componentTabIndex()\"\n        [nullOption]=\"nullOption()\"\n        [optionListMaxHeight]=\"optionListMaxHeight()\"\n        [parentType]=\"ParentType\"\n        [scrollBehaviorOnOpen]=\"scrollBehaviorOnOpen()\"\n        [selectButtonRef]=\"selectButton\"\n        [selectionMode]=\"selectionMode()\"\n        [selectOptions]=\"selectOptions()\"\n        [translateValue]=\"translateValue()\"\n        (blurHandler)=\"onBlurHandler()\"\n        (changedHandler)=\"onChangedHandler($event)\"\n        (escapePressed)=\"onEscapePressed()\"\n        (tabPressed)=\"onTabPressed($event)\"\n        #optionList\n      ></quang-option-list>\n    }\n  </div>\n  <div class=\"valid-feedback\">\n    {{ successMessage() | transloco }}\n  </div>\n  <div class=\"invalid-feedback\">\n    {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n  </div>\n  @if (helpMessage()) {\n    <small\n      [hidden]=\"_showSuccess() || _showErrors()\"\n      aria-live=\"assertive\"\n      class=\"form-text text-muted\"\n    >\n      {{ helpMessage() | transloco }}\n    </small>\n  }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/quang-components-shared.mjs

@@ -161,6 +161,10 @@ class QuangOptionListComponent {
         this.scrollBehaviorOnOpen = input('smooth');
         this.changedHandler = output();
         this.blurHandler = output();
+        /** Emitted when user presses Escape - parent should close dropdown and return focus to trigger */
+        this.escapePressed = output();
+        /** Emitted when user presses Tab - parent should handle focus transition */
+        this.tabPressed = output();
         this.optionListContainer = viewChild('optionListContainer');
         this.destroyRef = inject(DestroyRef);
         this.parentType = input.required();
@@ -191,6 +195,8 @@ class QuangOptionListComponent {
         });
         this.onKeyDown = null;
         this.selectedElementIndex = computed(() => this.selectOptionsList()?.findIndex((x) => x?.value === this._value()) ?? 0);
+        /** Signal to track currently focused item index for aria-activedescendant */
+        this.focusedItemIndex = signal(-1);
         this.optionList$ = effect(() => {
             const optionListContainer = this.optionListContainer();
             if (optionListContainer && this.parentType() === OptionListParentType.SELECT) {
@@ -210,6 +216,8 @@ class QuangOptionListComponent {
             const listItems = (ul?.children ?? []);
             let currentIndex = this.selectedElementIndex();
             listItems?.[currentIndex]?.classList.add('selected');
+            // Initialize focusedItemIndex with current selection
+            this.focusedItemIndex.set(currentIndex);
             if (this.onKeyDown) {
                 this.onKeyDown.unsubscribe();
             }
@@ -244,6 +252,8 @@ class QuangOptionListComponent {
                         if (optionListBottom > (itemListBottom ?? 0) + (itemListHeight ?? 0))
                             event.preventDefault();
                         listItems[currentIndex]?.classList.add('selected');
+                        // Update focusedItemIndex for aria-activedescendant
+                        this.focusedItemIndex.set(currentIndex);
                         if ((optionListContainer?.nativeElement?.scrollTop ?? 0) >=
                             (optionListContainer?.nativeElement?.scrollHeight ?? 0) -
                                 (optionListContainer?.nativeElement?.offsetHeight ?? 0)) {
@@ -268,15 +278,29 @@ class QuangOptionListComponent {
                         if (optionListTop < (itemListTop ?? 0) - (itemListHeight ?? 0))
                             event.preventDefault();
                         listItems[currentIndex]?.classList.add('selected');
+                        // Update focusedItemIndex for aria-activedescendant
+                        this.focusedItemIndex.set(currentIndex);
                         if (!optionListContainer?.nativeElement?.scrollTop) {
                             event.preventDefault();
                         }
                         break;
                     }
                     case 'Enter': {
+                        event.preventDefault();
                         this.onSelectItem(this.selectOptionsList()[currentIndex]);
                         break;
                     }
+                    case 'Escape': {
+                        event.preventDefault();
+                        this.escapePressed.emit();
+                        break;
+                    }
+                    case 'Tab': {
+                        // Allow Tab to close dropdown and move focus naturally
+                        // Emit event so parent can handle focus transition
+                        this.tabPressed.emit({ shiftKey: event.shiftKey });
+                        break;
+                    }
                     default: {
                         if ((event?.key?.length === 1 || event?.key === 'Backspace') &&
                             this.parentType() === OptionListParentType.AUTOCOMPLETE &&
@@ -297,6 +321,16 @@ class QuangOptionListComponent {
             });
         });
     }
+    /**
+     * Returns the ID of the currently focused item for aria-activedescendant
+     */
+    getActiveDescendantId() {
+        const index = this.focusedItemIndex();
+        if (index >= 0 && index < this.selectOptionsList().length) {
+            return `item-${index}`;
+        }
+        return null;
+    }
     handleSearch(key, listItems, currentIndex) {
         if (this.searchResetTimer) {
             clearTimeout(this.searchResetTimer);
@@ -406,11 +440,11 @@ class QuangOptionListComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: QuangOptionListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: QuangOptionListComponent, isStandalone: true, selector: "quang-option-list", inputs: { selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, optionListMaxHeight: { classPropertyName: "optionListMaxHeight", publicName: "optionListMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, selectOptions: { classPropertyName: "selectOptions", publicName: "selectOptions", isSignal: true, isRequired: false, transformFunction: null }, selectButtonRef: { classPropertyName: "selectButtonRef", publicName: "selectButtonRef", isSignal: true, isRequired: true, transformFunction: null }, _value: { classPropertyName: "_value", publicName: "_value", isSignal: true, isRequired: false, transformFunction: null }, _isDisabled: { classPropertyName: "_isDisabled", publicName: "_isDisabled", isSignal: true, isRequired: false, transformFunction: null }, componentClass: { classPropertyName: "componentClass", publicName: "componentClass", isSignal: true, isRequired: false, transformFunction: null }, componentLabel: { classPropertyName: "componentLabel", publicName: "componentLabel", isSignal: true, isRequired: false, transformFunction: null }, componentTabIndex: { classPropertyName: "componentTabIndex", publicName: "componentTabIndex", isSignal: true, isRequired: false, transformFunction: null }, translateValue: { classPropertyName: "translateValue", publicName: "translateValue", isSignal: true, isRequired: false, transformFunction: null }, nullOption: { classPropertyName: "nullOption", publicName: "nullOption", isSignal: true, isRequired: false, transformFunction: null }, scrollBehaviorOnOpen: { classPropertyName: "scrollBehaviorOnOpen", publicName: "scrollBehaviorOnOpen", isSignal: true, isRequired: false, transformFunction: null }, parentType: { classPropertyName: "parentType", publicName: "parentType", isSignal: true, isRequired: true, transformFunction: null }, parentID: { classPropertyName: "parentID", publicName: "parentID", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changedHandler: "changedHandler", blurHandler: "blurHandler" }, host: { listeners: { "window:scroll": "changePosition()" } }, viewQueries: [{ propertyName: "optionListContainer", first: true, predicate: ["optionListContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  [ngStyle]=\"{\n    'max-height': optionListMaxHeight(),\n    '--option-list-width': elementWidth(),\n    '--option-list-top': elementTop(),\n    '--option-list-bottom': elementBottom(),\n  }\"\n  (blur)=\"onBlurHandler($event)\"\n  #optionListContainer\n  class=\"option-list\"\n  id=\"optionList\"\n  tabindex=\"1\"\n>\n  <ul>\n    @for (\n      item of selectOptionsList();\n      track (item.value ?? '') + (item.label ?? '');\n      let i = $index;\n      let last = $last\n    ) {\n      <li\n        [class.m-0]=\"last\"\n        [class.selected]=\"selectionMode() === 'single' ? getSelected(item) : null\"\n        [id]=\"'item-' + i\"\n        (mousedown)=\"$event.stopImmediatePropagation(); onSelectItem(item)\"\n        class=\"item\"\n      >\n        <input\n          [checked]=\"getSelected(item)\"\n          [class.d-none]=\"selectionMode() === 'single' || !item?.value\"\n          [disabled]=\"true\"\n          [id]=\"i + '-' + item.value + '-checkbox'\"\n          [name]=\"i + '-' + item.value + '-checkbox'\"\n          [ngClass]=\"componentClass()\"\n          [tabIndex]=\"componentTabIndex()\"\n          [value]=\"getSelected(item)\"\n          (blur)=\"onBlurHandler($event)\"\n          #inputCheckbox\n          class=\"form-check-input opacity-100\"\n          type=\"checkbox\"\n        />\n        <label\n          [class.ms-3]=\"selectionMode() === 'multiple' && item?.value\"\n          [for]=\"i + '-' + item.value + '-checkbox'\"\n          class=\"form-check-label checkbox-label w-100 opacity-100\"\n        >\n          {{ translateValue() ? (item.label | transloco) : item.label }}\n        </label>\n      </li>\n    }\n  </ul>\n</div>\n", styles: [":host{display:block;z-index:999}.option-list{--option-list-width: 100%;--option-list-top: 10px;--option-list-bottom: unset;border:1px solid var(--bs-border-color);border-top:0;border-radius:var(--bs-border-radius);overflow:auto;position:fixed;width:var(--option-list-width);top:var(--option-list-top);bottom:var(--option-list-bottom);z-index:999}.option-list ul{margin:0;padding:0}.option-list .selected{background-color:var(--bs-body-bg);filter:brightness(95%)}.option-list.option-list-top{border-top:1px solid var(--bs-border-color);border-bottom:0}.option-list:focus-visible{outline:none}.item{display:flex;background-color:var(--bs-body-bg);z-index:1;padding:0 .5rem;min-height:2.5rem}.item label{padding:.5rem 0}.item:hover{cursor:pointer;background-color:var(--bs-body-bg);filter:brightness(95%)}.item *:hover{cursor:pointer}.item .form-check-input{align-self:center}.item .form-check-input:focus{border-color:var(--bs-border-color);box-shadow:unset}.item .form-check-input:checked{background-color:var(--bs-primary);border-color:var(--bs-border-color)}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: QuangOptionListComponent, isStandalone: true, selector: "quang-option-list", inputs: { selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, optionListMaxHeight: { classPropertyName: "optionListMaxHeight", publicName: "optionListMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, selectOptions: { classPropertyName: "selectOptions", publicName: "selectOptions", isSignal: true, isRequired: false, transformFunction: null }, selectButtonRef: { classPropertyName: "selectButtonRef", publicName: "selectButtonRef", isSignal: true, isRequired: true, transformFunction: null }, _value: { classPropertyName: "_value", publicName: "_value", isSignal: true, isRequired: false, transformFunction: null }, _isDisabled: { classPropertyName: "_isDisabled", publicName: "_isDisabled", isSignal: true, isRequired: false, transformFunction: null }, componentClass: { classPropertyName: "componentClass", publicName: "componentClass", isSignal: true, isRequired: false, transformFunction: null }, componentLabel: { classPropertyName: "componentLabel", publicName: "componentLabel", isSignal: true, isRequired: false, transformFunction: null }, componentTabIndex: { classPropertyName: "componentTabIndex", publicName: "componentTabIndex", isSignal: true, isRequired: false, transformFunction: null }, translateValue: { classPropertyName: "translateValue", publicName: "translateValue", isSignal: true, isRequired: false, transformFunction: null }, nullOption: { classPropertyName: "nullOption", publicName: "nullOption", isSignal: true, isRequired: false, transformFunction: null }, scrollBehaviorOnOpen: { classPropertyName: "scrollBehaviorOnOpen", publicName: "scrollBehaviorOnOpen", isSignal: true, isRequired: false, transformFunction: null }, parentType: { classPropertyName: "parentType", publicName: "parentType", isSignal: true, isRequired: true, transformFunction: null }, parentID: { classPropertyName: "parentID", publicName: "parentID", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changedHandler: "changedHandler", blurHandler: "blurHandler", escapePressed: "escapePressed", tabPressed: "tabPressed" }, host: { listeners: { "window:scroll": "changePosition()" } }, viewQueries: [{ propertyName: "optionListContainer", first: true, predicate: ["optionListContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  [attr.aria-activedescendant]=\"getActiveDescendantId()\"\n  [attr.aria-label]=\"componentLabel()\"\n  [ngStyle]=\"{\n    'max-height': optionListMaxHeight(),\n    '--option-list-width': elementWidth(),\n    '--option-list-top': elementTop(),\n    '--option-list-bottom': elementBottom(),\n  }\"\n  (blur)=\"onBlurHandler($event)\"\n  #optionListContainer\n  aria-orientation=\"vertical\"\n  class=\"option-list\"\n  id=\"optionList\"\n  role=\"listbox\"\n  tabindex=\"0\"\n>\n  <ul role=\"presentation\">\n    @for (\n      item of selectOptionsList();\n      track (item.value ?? '') + (item.label ?? '');\n      let i = $index;\n      let last = $last\n    ) {\n      <li\n        [attr.aria-selected]=\"getSelected(item)\"\n        [class.m-0]=\"last\"\n        [class.selected]=\"selectionMode() === 'single' ? getSelected(item) : null\"\n        [id]=\"'item-' + i\"\n        (mousedown)=\"$event.stopImmediatePropagation(); onSelectItem(item)\"\n        class=\"item\"\n        role=\"option\"\n      >\n        <input\n          [checked]=\"getSelected(item)\"\n          [class.d-none]=\"selectionMode() === 'single' || !item?.value\"\n          [disabled]=\"true\"\n          [id]=\"i + '-' + item.value + '-checkbox'\"\n          [name]=\"i + '-' + item.value + '-checkbox'\"\n          [ngClass]=\"componentClass()\"\n          [value]=\"getSelected(item)\"\n          (blur)=\"onBlurHandler($event)\"\n          #inputCheckbox\n          aria-hidden=\"true\"\n          class=\"form-check-input opacity-100\"\n          tabindex=\"-1\"\n          type=\"checkbox\"\n        />\n        <label\n          [class.ms-3]=\"selectionMode() === 'multiple' && item?.value\"\n          [for]=\"i + '-' + item.value + '-checkbox'\"\n          class=\"form-check-label checkbox-label w-100 opacity-100\"\n        >\n          {{ translateValue() ? (item.label | transloco) : item.label }}\n        </label>\n      </li>\n    }\n  </ul>\n</div>\n", styles: [":host{display:block;z-index:999}.option-list{--option-list-width: 100%;--option-list-top: 10px;--option-list-bottom: unset;border:1px solid var(--bs-border-color);border-top:0;border-radius:var(--bs-border-radius);overflow:auto;position:fixed;width:var(--option-list-width);top:var(--option-list-top);bottom:var(--option-list-bottom);z-index:999}.option-list ul{margin:0;padding:0}.option-list .selected{background-color:var(--bs-body-bg);filter:brightness(95%)}.option-list.option-list-top{border-top:1px solid var(--bs-border-color);border-bottom:0}.option-list:focus-visible{outline:none}.item{display:flex;background-color:var(--bs-body-bg);z-index:1;padding:0 .5rem;min-height:2.5rem}.item label{padding:.5rem 0}.item:hover{cursor:pointer;background-color:var(--bs-body-bg);filter:brightness(95%)}.item *:hover{cursor:pointer}.item .form-check-input{align-self:center}.item .form-check-input:focus{border-color:var(--bs-border-color);box-shadow:unset}.item .form-check-input:checked{background-color:var(--bs-primary);border-color:var(--bs-border-color)}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: QuangOptionListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'quang-option-list', imports: [NgStyle, NgClass, TranslocoPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  [ngStyle]=\"{\n    'max-height': optionListMaxHeight(),\n    '--option-list-width': elementWidth(),\n    '--option-list-top': elementTop(),\n    '--option-list-bottom': elementBottom(),\n  }\"\n  (blur)=\"onBlurHandler($event)\"\n  #optionListContainer\n  class=\"option-list\"\n  id=\"optionList\"\n  tabindex=\"1\"\n>\n  <ul>\n    @for (\n      item of selectOptionsList();\n      track (item.value ?? '') + (item.label ?? '');\n      let i = $index;\n      let last = $last\n    ) {\n      <li\n        [class.m-0]=\"last\"\n        [class.selected]=\"selectionMode() === 'single' ? getSelected(item) : null\"\n        [id]=\"'item-' + i\"\n        (mousedown)=\"$event.stopImmediatePropagation(); onSelectItem(item)\"\n        class=\"item\"\n      >\n        <input\n          [checked]=\"getSelected(item)\"\n          [class.d-none]=\"selectionMode() === 'single' || !item?.value\"\n          [disabled]=\"true\"\n          [id]=\"i + '-' + item.value + '-checkbox'\"\n          [name]=\"i + '-' + item.value + '-checkbox'\"\n          [ngClass]=\"componentClass()\"\n          [tabIndex]=\"componentTabIndex()\"\n          [value]=\"getSelected(item)\"\n          (blur)=\"onBlurHandler($event)\"\n          #inputCheckbox\n          class=\"form-check-input opacity-100\"\n          type=\"checkbox\"\n        />\n        <label\n          [class.ms-3]=\"selectionMode() === 'multiple' && item?.value\"\n          [for]=\"i + '-' + item.value + '-checkbox'\"\n          class=\"form-check-label checkbox-label w-100 opacity-100\"\n        >\n          {{ translateValue() ? (item.label | transloco) : item.label }}\n        </label>\n      </li>\n    }\n  </ul>\n</div>\n", styles: [":host{display:block;z-index:999}.option-list{--option-list-width: 100%;--option-list-top: 10px;--option-list-bottom: unset;border:1px solid var(--bs-border-color);border-top:0;border-radius:var(--bs-border-radius);overflow:auto;position:fixed;width:var(--option-list-width);top:var(--option-list-top);bottom:var(--option-list-bottom);z-index:999}.option-list ul{margin:0;padding:0}.option-list .selected{background-color:var(--bs-body-bg);filter:brightness(95%)}.option-list.option-list-top{border-top:1px solid var(--bs-border-color);border-bottom:0}.option-list:focus-visible{outline:none}.item{display:flex;background-color:var(--bs-body-bg);z-index:1;padding:0 .5rem;min-height:2.5rem}.item label{padding:.5rem 0}.item:hover{cursor:pointer;background-color:var(--bs-body-bg);filter:brightness(95%)}.item *:hover{cursor:pointer}.item .form-check-input{align-self:center}.item .form-check-input:focus{border-color:var(--bs-border-color);box-shadow:unset}.item .form-check-input:checked{background-color:var(--bs-primary);border-color:var(--bs-border-color)}\n"] }]
+            args: [{ selector: 'quang-option-list', imports: [NgStyle, NgClass, TranslocoPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  [attr.aria-activedescendant]=\"getActiveDescendantId()\"\n  [attr.aria-label]=\"componentLabel()\"\n  [ngStyle]=\"{\n    'max-height': optionListMaxHeight(),\n    '--option-list-width': elementWidth(),\n    '--option-list-top': elementTop(),\n    '--option-list-bottom': elementBottom(),\n  }\"\n  (blur)=\"onBlurHandler($event)\"\n  #optionListContainer\n  aria-orientation=\"vertical\"\n  class=\"option-list\"\n  id=\"optionList\"\n  role=\"listbox\"\n  tabindex=\"0\"\n>\n  <ul role=\"presentation\">\n    @for (\n      item of selectOptionsList();\n      track (item.value ?? '') + (item.label ?? '');\n      let i = $index;\n      let last = $last\n    ) {\n      <li\n        [attr.aria-selected]=\"getSelected(item)\"\n        [class.m-0]=\"last\"\n        [class.selected]=\"selectionMode() === 'single' ? getSelected(item) : null\"\n        [id]=\"'item-' + i\"\n        (mousedown)=\"$event.stopImmediatePropagation(); onSelectItem(item)\"\n        class=\"item\"\n        role=\"option\"\n      >\n        <input\n          [checked]=\"getSelected(item)\"\n          [class.d-none]=\"selectionMode() === 'single' || !item?.value\"\n          [disabled]=\"true\"\n          [id]=\"i + '-' + item.value + '-checkbox'\"\n          [name]=\"i + '-' + item.value + '-checkbox'\"\n          [ngClass]=\"componentClass()\"\n          [value]=\"getSelected(item)\"\n          (blur)=\"onBlurHandler($event)\"\n          #inputCheckbox\n          aria-hidden=\"true\"\n          class=\"form-check-input opacity-100\"\n          tabindex=\"-1\"\n          type=\"checkbox\"\n        />\n        <label\n          [class.ms-3]=\"selectionMode() === 'multiple' && item?.value\"\n          [for]=\"i + '-' + item.value + '-checkbox'\"\n          class=\"form-check-label checkbox-label w-100 opacity-100\"\n        >\n          {{ translateValue() ? (item.label | transloco) : item.label }}\n        </label>\n      </li>\n    }\n  </ul>\n</div>\n", styles: [":host{display:block;z-index:999}.option-list{--option-list-width: 100%;--option-list-top: 10px;--option-list-bottom: unset;border:1px solid var(--bs-border-color);border-top:0;border-radius:var(--bs-border-radius);overflow:auto;position:fixed;width:var(--option-list-width);top:var(--option-list-top);bottom:var(--option-list-bottom);z-index:999}.option-list ul{margin:0;padding:0}.option-list .selected{background-color:var(--bs-body-bg);filter:brightness(95%)}.option-list.option-list-top{border-top:1px solid var(--bs-border-color);border-bottom:0}.option-list:focus-visible{outline:none}.item{display:flex;background-color:var(--bs-body-bg);z-index:1;padding:0 .5rem;min-height:2.5rem}.item label{padding:.5rem 0}.item:hover{cursor:pointer;background-color:var(--bs-body-bg);filter:brightness(95%)}.item *:hover{cursor:pointer}.item .form-check-input{align-self:center}.item .form-check-input:focus{border-color:var(--bs-border-color);box-shadow:unset}.item .form-check-input:checked{background-color:var(--bs-primary);border-color:var(--bs-border-color)}\n"] }]
         }], propDecorators: { changePosition: [{
                 type: HostListener,
                 args: ['window:scroll']