quang 19.3.15-3 → 19.3.15-5

package/components/autocomplete/autocomplete.component.d.ts

@@ -9,7 +9,7 @@ import * as i0 from "@angular/core";
  *
  * `searchTextDebounce` is by default set to 300ms.
  */
-export declare class QuangAutocompleteComponent extends QuangBaseComponent<string | number | string[] | number[]> {
+export declare class QuangAutocompleteComponent extends QuangBaseComponent<string | number | string[] | number[] | null> {
     /**
      * The list of options to display in the autocomplete dropdown.
      */
@@ -80,6 +80,13 @@ export declare class QuangAutocompleteComponent extends QuangBaseComponent<strin
      * @default 'vertical'
      */
     multiSelectDisplayMode: import("@angular/core").InputSignal<"vertical" | "horizontal">;
+    /**
+     * Position of chips relative to the input in multiple selection mode.
+     * - 'top': Chips are displayed above the input (default)
+     * - 'bottom': Chips are displayed below the input
+     * @default 'top'
+     */
+    chipsPosition: import("@angular/core").InputSignal<"top" | "bottom">;
     /**
      * Debounce time in milliseconds for search text changes.
      * @default 300
@@ -166,8 +173,8 @@ export declare class QuangAutocompleteComponent extends QuangBaseComponent<strin
     private readonly showOptionsChangeSubscription;
     constructor();
     setupFormControl(): void;
-    writeValue(val: string | number | string[] | number[]): void;
-    onChangedHandler(value: string | number | string[] | number[]): void;
+    writeValue(val: string | number | string[] | number[] | null): void;
+    onChangedHandler(value: string | number | string[] | number[] | null): void;
     onBlurHandler(): void;
     /**
      * Shows the option list dropdown.
@@ -187,7 +194,28 @@ export declare class QuangAutocompleteComponent extends QuangBaseComponent<strin
      * @param value The selected option's value
      * @param hideOptions Whether to hide the dropdown after selection
      */
-    onValueChange(value: string | number, hideOptions?: boolean): void;
+    onValueChange(value: string | number | null, hideOptions?: boolean): void;
+    /**
+     * Handles keydown events on the input element for accessibility.
+     * @param event The keyboard event
+     */
+    onInputKeydown(event: KeyboardEvent): void;
+    /**
+     * Handles Escape key press from option list.
+     * Closes dropdown and returns focus to input.
+     */
+    onEscapePressed(): void;
+    /**
+     * Handles Tab key press from option list.
+     * Closes dropdown and allows natural tab navigation.
+     */
+    onTabPressed(_event: {
+        shiftKey: boolean;
+    }): void;
+    /**
+     * Sets focus to the input element.
+     */
+    focusInput(): void;
     /**
      * Handles input blur event.
      * @param event The focus event
@@ -249,7 +277,7 @@ export declare class QuangAutocompleteComponent extends QuangBaseComponent<strin
     /**
      * Emits search text change after debounce.
      * When `updateValueOnType` is true, also updates the form value using the same
-     * matching logic as checkInputValue (auto-select matching options, or use free text).
+     * matching logic as processTextToFormValue (auto-select matching options, or use free text).
      */
     private emitDebouncedSearchText;
     /**
@@ -259,5 +287,5 @@ export declare class QuangAutocompleteComponent extends QuangBaseComponent<strin
      */
     private updateValueWithoutExitingSearchMode;
     static ɵfac: i0.ɵɵFactoryDeclaration<QuangAutocompleteComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<QuangAutocompleteComponent, "quang-autocomplete", never, { "selectOptions": { "alias": "selectOptions"; "required": true; "isSignal": true; }; "allowFreeText": { "alias": "allowFreeText"; "required": false; "isSignal": true; }; "autoSelectOnExactMatch": { "alias": "autoSelectOnExactMatch"; "required": false; "isSignal": true; }; "updateValueOnType": { "alias": "updateValueOnType"; "required": false; "isSignal": true; }; "syncFormWithText": { "alias": "syncFormWithText"; "required": false; "isSignal": true; }; "optionListMaxHeight": { "alias": "optionListMaxHeight"; "required": false; "isSignal": true; }; "translateValue": { "alias": "translateValue"; "required": false; "isSignal": true; }; "scrollBehaviorOnOpen": { "alias": "scrollBehaviorOnOpen"; "required": false; "isSignal": true; }; "emitOnly": { "alias": "emitOnly"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "chipMaxLength": { "alias": "chipMaxLength"; "required": false; "isSignal": true; }; "multiSelectDisplayMode": { "alias": "multiSelectDisplayMode"; "required": false; "isSignal": true; }; "searchTextDebounce": { "alias": "searchTextDebounce"; "required": false; "isSignal": true; }; "internalFilterOptions": { "alias": "internalFilterOptions"; "required": false; "isSignal": true; }; }, { "selectedOption": "selectedOption"; "searchTextChange": "searchTextChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<QuangAutocompleteComponent, "quang-autocomplete", never, { "selectOptions": { "alias": "selectOptions"; "required": true; "isSignal": true; }; "allowFreeText": { "alias": "allowFreeText"; "required": false; "isSignal": true; }; "autoSelectOnExactMatch": { "alias": "autoSelectOnExactMatch"; "required": false; "isSignal": true; }; "updateValueOnType": { "alias": "updateValueOnType"; "required": false; "isSignal": true; }; "syncFormWithText": { "alias": "syncFormWithText"; "required": false; "isSignal": true; }; "optionListMaxHeight": { "alias": "optionListMaxHeight"; "required": false; "isSignal": true; }; "translateValue": { "alias": "translateValue"; "required": false; "isSignal": true; }; "scrollBehaviorOnOpen": { "alias": "scrollBehaviorOnOpen"; "required": false; "isSignal": true; }; "emitOnly": { "alias": "emitOnly"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "chipMaxLength": { "alias": "chipMaxLength"; "required": false; "isSignal": true; }; "multiSelectDisplayMode": { "alias": "multiSelectDisplayMode"; "required": false; "isSignal": true; }; "chipsPosition": { "alias": "chipsPosition"; "required": false; "isSignal": true; }; "searchTextDebounce": { "alias": "searchTextDebounce"; "required": false; "isSignal": true; }; "internalFilterOptions": { "alias": "internalFilterOptions"; "required": false; "isSignal": true; }; }, { "selectedOption": "selectedOption"; "searchTextChange": "searchTextChange"; }, never, never, true, never>;
 }

package/components/select/select.component.d.ts

@@ -12,20 +12,41 @@ export declare class QuangSelectComponent extends QuangBaseComponent<string | nu
     selectOptions: import("@angular/core").InputSignal<SelectOption[]>;
     scrollBehaviorOnOpen: import("@angular/core").InputSignal<ScrollBehavior>;
     selectButton: import("@angular/core").Signal<ElementRef<HTMLButtonElement> | undefined>;
+    /** Whether the option list is currently visible */
     _showOptions: import("@angular/core").WritableSignal<boolean>;
-    _optionHideTimeout: import("@angular/core").WritableSignal<any>;
     _selectedItems: import("@angular/core").Signal<SelectOption[] | null>;
     translateValue: import("@angular/core").InputSignal<boolean>;
     nullOption: import("@angular/core").InputSignal<boolean>;
     autoSelectSingleOption: import("@angular/core").InputSignal<boolean>;
     readonly ParentType = OptionListParentType.SELECT;
     constructor();
-    changeOptionsVisibility(skipTimeout?: boolean): void;
+    changeOptionsVisibility(): void;
     showOptionVisibility(): void;
-    hideOptionVisibility(skipTimeout?: boolean): void;
+    hideOptionVisibility(): void;
     onBlurHandler(): void;
     onChangedHandler(value: string | number | string[] | number[] | null): void;
     onMouseLeaveCallback(): void;
+    /**
+     * Handles keydown events on the select button for accessibility.
+     * @param event The keyboard event
+     */
+    onButtonKeydown(event: KeyboardEvent): void;
+    /**
+     * Handles Escape key press from option list.
+     * Closes dropdown and returns focus to button.
+     */
+    onEscapePressed(): void;
+    /**
+     * Handles Tab key press from option list.
+     * Closes dropdown and allows natural tab navigation.
+     */
+    onTabPressed(_event: {
+        shiftKey: boolean;
+    }): void;
+    /**
+     * Sets focus to the select button element.
+     */
+    focusButton(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<QuangSelectComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<QuangSelectComponent, "quang-select", never, { "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "optionListMaxHeight": { "alias": "optionListMaxHeight"; "required": false; "isSignal": true; }; "selectOptions": { "alias": "selectOptions"; "required": true; "isSignal": true; }; "scrollBehaviorOnOpen": { "alias": "scrollBehaviorOnOpen"; "required": false; "isSignal": true; }; "translateValue": { "alias": "translateValue"; "required": false; "isSignal": true; }; "nullOption": { "alias": "nullOption"; "required": false; "isSignal": true; }; "autoSelectSingleOption": { "alias": "autoSelectSingleOption"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/components/shared/option-list/option-list.component.d.ts

@@ -14,7 +14,7 @@ export declare class QuangOptionListComponent {
     selectionMode: import("@angular/core").InputSignal<"single" | "multiple">;
     optionListMaxHeight: import("@angular/core").InputSignal<string>;
     selectOptions: import("@angular/core").InputSignal<SelectOption[]>;
-    selectButtonRef: import("@angular/core").InputSignal<HTMLInputElement | HTMLButtonElement | HTMLDivElement>;
+    selectButtonRef: import("@angular/core").InputSignal<HTMLButtonElement | HTMLInputElement | HTMLDivElement>;
     _value: import("@angular/core").InputSignal<any>;
     _isDisabled: import("@angular/core").InputSignal<boolean | undefined>;
     componentClass: import("@angular/core").InputSignal<string | string[]>;
@@ -28,6 +28,12 @@ export declare class QuangOptionListComponent {
     scrollBehaviorOnOpen: import("@angular/core").InputSignal<ScrollBehavior>;
     changedHandler: import("@angular/core").OutputEmitterRef<any>;
     blurHandler: import("@angular/core").OutputEmitterRef<any>;
+    /** Emitted when user presses Escape - parent should close dropdown and return focus to trigger */
+    escapePressed: import("@angular/core").OutputEmitterRef<void>;
+    /** Emitted when user presses Tab - parent should handle focus transition */
+    tabPressed: import("@angular/core").OutputEmitterRef<{
+        shiftKey: boolean;
+    }>;
     optionListContainer: import("@angular/core").Signal<ElementRef<HTMLDivElement> | undefined>;
     destroyRef: DestroyRef;
     parentType: import("@angular/core").InputSignal<OptionListParentType>;
@@ -38,6 +44,12 @@ export declare class QuangOptionListComponent {
     selectOptionsList: import("@angular/core").Signal<SelectOption[]>;
     onKeyDown: Subscription | null;
     selectedElementIndex: import("@angular/core").Signal<number>;
+    /** Signal to track currently focused item index for aria-activedescendant */
+    focusedItemIndex: import("@angular/core").WritableSignal<number>;
+    /**
+     * Returns the ID of the currently focused item for aria-activedescendant
+     */
+    getActiveDescendantId(): string | null;
     optionList$: import("@angular/core").EffectRef;
     handleSearch(key: string, listItems: HTMLLIElement[], currentIndex: number): number;
     changePosition(): void;
@@ -49,5 +61,5 @@ export declare class QuangOptionListComponent {
     getOptionListWidth(): void;
     getOptionListTop(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<QuangOptionListComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<QuangOptionListComponent, "quang-option-list", never, { "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "optionListMaxHeight": { "alias": "optionListMaxHeight"; "required": false; "isSignal": true; }; "selectOptions": { "alias": "selectOptions"; "required": false; "isSignal": true; }; "selectButtonRef": { "alias": "selectButtonRef"; "required": true; "isSignal": true; }; "_value": { "alias": "_value"; "required": false; "isSignal": true; }; "_isDisabled": { "alias": "_isDisabled"; "required": false; "isSignal": true; }; "componentClass": { "alias": "componentClass"; "required": false; "isSignal": true; }; "componentLabel": { "alias": "componentLabel"; "required": false; "isSignal": true; }; "componentTabIndex": { "alias": "componentTabIndex"; "required": false; "isSignal": true; }; "translateValue": { "alias": "translateValue"; "required": false; "isSignal": true; }; "nullOption": { "alias": "nullOption"; "required": false; "isSignal": true; }; "scrollBehaviorOnOpen": { "alias": "scrollBehaviorOnOpen"; "required": false; "isSignal": true; }; "parentType": { "alias": "parentType"; "required": true; "isSignal": true; }; "parentID": { "alias": "parentID"; "required": false; "isSignal": true; }; }, { "changedHandler": "changedHandler"; "blurHandler": "blurHandler"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<QuangOptionListComponent, "quang-option-list", never, { "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "optionListMaxHeight": { "alias": "optionListMaxHeight"; "required": false; "isSignal": true; }; "selectOptions": { "alias": "selectOptions"; "required": false; "isSignal": true; }; "selectButtonRef": { "alias": "selectButtonRef"; "required": true; "isSignal": true; }; "_value": { "alias": "_value"; "required": false; "isSignal": true; }; "_isDisabled": { "alias": "_isDisabled"; "required": false; "isSignal": true; }; "componentClass": { "alias": "componentClass"; "required": false; "isSignal": true; }; "componentLabel": { "alias": "componentLabel"; "required": false; "isSignal": true; }; "componentTabIndex": { "alias": "componentTabIndex"; "required": false; "isSignal": true; }; "translateValue": { "alias": "translateValue"; "required": false; "isSignal": true; }; "nullOption": { "alias": "nullOption"; "required": false; "isSignal": true; }; "scrollBehaviorOnOpen": { "alias": "scrollBehaviorOnOpen"; "required": false; "isSignal": true; }; "parentType": { "alias": "parentType"; "required": true; "isSignal": true; }; "parentID": { "alias": "parentID"; "required": false; "isSignal": true; }; }, { "changedHandler": "changedHandler"; "blurHandler": "blurHandler"; "escapePressed": "escapePressed"; "tabPressed": "tabPressed"; }, never, never, true, never>;
 }