@agorapulse/ui-components 22.1.7 → 22.1.8

package/types/agorapulse-ui-components-input-search.d.ts

@@ -6,6 +6,10 @@ declare class InputSearchComponent implements ControlValueAccessor {
     id: _angular_core.InputSignal<string>;
     placeholder: _angular_core.InputSignal<string>;
     clearable: _angular_core.InputSignal<boolean>;
+    /** Id of the list this field drives, when it drives one. */
+    ariaControls: _angular_core.InputSignal<string | null>;
+    /** Id of the option this field marks in that list, so focus can stay in the field. */
+    ariaActiveDescendant: _angular_core.InputSignal<string | null>;
     focus: _angular_core.OutputEmitterRef<FocusEvent>;
     blur: _angular_core.OutputEmitterRef<FocusEvent>;
     keyup: _angular_core.OutputEmitterRef<KeyboardEvent>;
@@ -29,7 +33,7 @@ declare class InputSearchComponent implements ControlValueAccessor {
     onBlurHandle($event: FocusEvent): void;
     onKeyup($event: KeyboardEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<InputSearchComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<InputSearchComponent, "ap-input-search", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; }, { "focus": "focus"; "blur": "blur"; "keyup": "keyup"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<InputSearchComponent, "ap-input-search", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "ariaControls": { "alias": "ariaControls"; "required": false; "isSignal": true; }; "ariaActiveDescendant": { "alias": "ariaActiveDescendant"; "required": false; "isSignal": true; }; }, { "focus": "focus"; "blur": "blur"; "keyup": "keyup"; }, never, never, true, never>;
 }
 
 export { InputSearchComponent };

package/types/agorapulse-ui-components-select.d.ts

@@ -125,6 +125,8 @@ declare class DropdownItemMultipleOneLineComponent {
     disabledTooltip?: string;
     badgeText?: string;
     dividerEnabled: boolean;
+    /** Passed through to the box: decoration, when the row around it is the real control. */
+    presentational: boolean;
     onlyEnabled: boolean;
     onlyText: string;
     isFeatureLocked: _angular_core.InputSignal<boolean>;
@@ -138,7 +140,8 @@ declare class DropdownItemMultipleOneLineComponent {
     onClick($event: MouseEvent): void;
     onSelectOnly(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DropdownItemMultipleOneLineComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DropdownItemMultipleOneLineComponent, "ap-dropdown-item-multiple-one-line", never, { "text": { "alias": "text"; "required": true; }; "selected": { "alias": "selected"; "required": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; "htmlId": { "alias": "htmlId"; "required": true; }; "disabled": { "alias": "disabled"; "required": false; }; "avatarUrl": { "alias": "avatarUrl"; "required": false; }; "symbolId": { "alias": "symbolId"; "required": false; }; "disabledTooltip": { "alias": "disabledTooltip"; "required": false; }; "badgeText": { "alias": "badgeText"; "required": false; }; "dividerEnabled": { "alias": "dividerEnabled"; "required": false; }; "onlyEnabled": { "alias": "onlyEnabled"; "required": false; }; "onlyText": { "alias": "onlyText"; "required": false; }; "isFeatureLocked": { "alias": "isFeatureLocked"; "required": false; "isSignal": true; }; "roundedAvatar": { "alias": "roundedAvatar"; "required": false; "isSignal": true; }; "network": { "alias": "network"; "required": false; "isSignal": true; }; "symbolColor": { "alias": "symbolColor"; "required": false; "isSignal": true; }; "symbolTooltipText": { "alias": "symbolTooltipText"; "required": false; "isSignal": true; }; }, { "selectOnly": "selectOnly"; "lockedFeatureClicked": "lockedFeatureClicked"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DropdownItemMultipleOneLineComponent, "ap-dropdown-item-multiple-one-line", never, { "text": { "alias": "text"; "required": true; }; "selected": { "alias": "selected"; "required": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; "htmlId": { "alias": "htmlId"; "required": true; }; "disabled": { "alias": "disabled"; "required": false; }; "avatarUrl": { "alias": "avatarUrl"; "required": false; }; "symbolId": { "alias": "symbolId"; "required": false; }; "disabledTooltip": { "alias": "disabledTooltip"; "required": false; }; "badgeText": { "alias": "badgeText"; "required": false; }; "dividerEnabled": { "alias": "dividerEnabled"; "required": false; }; "presentational": { "alias": "presentational"; "required": false; }; "onlyEnabled": { "alias": "onlyEnabled"; "required": false; }; "onlyText": { "alias": "onlyText"; "required": false; }; "isFeatureLocked": { "alias": "isFeatureLocked"; "required": false; "isSignal": true; }; "roundedAvatar": { "alias": "roundedAvatar"; "required": false; "isSignal": true; }; "network": { "alias": "network"; "required": false; "isSignal": true; }; "symbolColor": { "alias": "symbolColor"; "required": false; "isSignal": true; }; "symbolTooltipText": { "alias": "symbolTooltipText"; "required": false; "isSignal": true; }; }, { "selectOnly": "selectOnly"; "lockedFeatureClicked": "lockedFeatureClicked"; }, never, never, true, never>;
+    static ngAcceptInputType_presentational: unknown;
 }
 
 declare class DropdownItemMultipleTwoLinesComponent {

package/types/agorapulse-ui-components-selection-dropdown.d.ts

@@ -49,11 +49,33 @@ type RenderEntry = {
     label: string;
     items: SelectionDropdownItem[];
 };
+/** A run of consecutive ungrouped items, or a group. Each becomes one listbox of its own. */
+type RenderRun = {
+    kind: 'items';
+    items: SelectionDropdownItem[];
+} | Extract<RenderEntry, {
+    kind: 'group';
+}>;
 type SelectionDropdownMode = 'multiple' | 'single';
 /** A dropdown of options on any trigger. `multiple` = checkbox rows with search; `single` = rows, closes on pick. */
 declare class SelectionDropdownComponent implements DropdownOverlay, OnDestroy {
+    private static nextId;
     private readonly symbolRegistry;
     private readonly panel;
+    private readonly options;
+    /** Mirrors the key manager's active index, so the roving tabindex can be bound. */
+    protected readonly activeIndex: _angular_core.WritableSignal<number>;
+    private readonly injector;
+    /** Names the dialog. Falls back to the visible title, then to a generic label rather than none. */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /** Names the listbox holding what is already selected. */
+    readonly selectedSectionText: _angular_core.InputSignal<string>;
+    /** Names a listbox of ungrouped options when the dropdown has no title. */
+    readonly optionsSectionText: _angular_core.InputSignal<string>;
+    protected readonly panelLabel: _angular_core.Signal<string>;
+    protected readonly listboxId: string;
+    private keyManager;
+    private primed;
     trigger: _angular_core.Signal<TemplateRef<unknown> | undefined>;
     /** ID for the header button */
     headerButtonId: _angular_core.InputSignal<string | undefined>;
@@ -79,6 +101,8 @@ declare class SelectionDropdownComponent implements DropdownOverlay, OnDestroy {
     searchPlaceholderText: _angular_core.InputSignal<string>;
     /** Text to display when no search results are found */
     noSearchResultsText: _angular_core.InputSignal<string>;
+    /** Announced once a search settles. `{count}` is replaced by how many options matched. */
+    searchResultsText: _angular_core.InputSignal<string>;
     /** Whether to show a backdrop that closes the dropdown when clicked */
     showBackdrop: _angular_core.InputSignal<boolean>;
     /** Whether the dropdown is disabled and cannot be opened */
@@ -109,6 +133,8 @@ declare class SelectionDropdownComponent implements DropdownOverlay, OnDestroy {
     protected readonly inputSearchComponent: _angular_core.Signal<InputSearchComponent | undefined>;
     readonly isOpen: _angular_core.Signal<boolean>;
     focusInput: _angular_core.EffectRef;
+    /** Single-select opens on its first option; multi does not, since marking one the user never chose announces a selection. */
+    primeOptions: _angular_core.EffectRef;
     protected readonly isSingleSelect: _angular_core.Signal<boolean>;
     /** Always true in `multiple` mode, leaving that layout untouched; only `single` collapses the header. */
     protected readonly searchVisible: _angular_core.Signal<boolean>;
@@ -116,6 +142,8 @@ declare class SelectionDropdownComponent implements DropdownOverlay, OnDestroy {
     protected readonly headerVisible: _angular_core.Signal<boolean>;
     private readonly internalItems;
     protected readonly filteredItems: _angular_core.WritableSignal<SelectionDropdownItem[]>;
+    /** What the live region holds. Empty outside a search: the list is on screen, unchanged. */
+    protected readonly resultsAnnouncement: _angular_core.WritableSignal<string>;
     protected readonly initiallySelectedItems: _angular_core.WritableSignal<SelectionDropdownItem[]>;
     protected readonly selectedItems: _angular_core.Signal<SelectionDropdownItem[]>;
     protected readonly unselectedItems: _angular_core.Signal<SelectionDropdownItem[]>;
@@ -125,6 +153,11 @@ declare class SelectionDropdownComponent implements DropdownOverlay, OnDestroy {
      * an already-seen group join that existing group entry.
      */
     protected readonly displayEntries: _angular_core.Signal<RenderEntry[]>;
+    /**
+     * A listbox owns only options, so a group's checkbox cannot sit inside one: each group gets its own
+     * listbox, and the ungrouped items between two groups are collected into one rather than one each.
+     */
+    protected readonly displayRuns: _angular_core.Signal<RenderRun[]>;
     protected readonly groupSelectionStates: _angular_core.Signal<Record<string, "selected" | "partial" | "unselected">>;
     constructor();
     ngOnDestroy(): void;
@@ -142,12 +175,37 @@ declare class SelectionDropdownComponent implements DropdownOverlay, OnDestroy {
     private selectOnly;
     /** Handles footer button clicks */
     onFooterButtonClick(): void;
-    /** Handles footer button keyboard events */
-    onFooterButtonKeydown(event: KeyboardEvent): void;
+    /**
+     * A search field keeps focus, so the list is marked rather than focused and the field says which
+     * option through `aria-activedescendant`. Without a field, focus is the only affordance there is,
+     * and the type-ahead is free — it is only a rival to a field that does the same job.
+     */
+    private activeManager;
+    /** `@for` gives a per-loop index, and the options span several listboxes, so identity decides. */
+    protected runKey(run: RenderRun): string;
+    /** With a search field the list is no tab stop at all: the field owns it and reaches it by arrow. */
+    protected optionTabIndex(carriesIt: boolean): 0 | -1;
+    /**
+     * Roving tabindex across every listbox at once: the options are a single tab stop. Before any
+     * arrow key the first option carries it, or nothing in the list could be tabbed to.
+     */
+    protected tabbableOption(item: SelectionDropdownItem): boolean;
+    /** The option the search field names as active, or nothing until an arrow key marks one. */
+    protected readonly activeDescendantId: _angular_core.Signal<string | null>;
+    /** An option needs an id of its own: the consumer's htmlId is not unique across a page. */
+    protected optionId(item: SelectionDropdownItem): string;
+    /**
+     * The manager owns the arrows and Home/End. An option is a button, so it activates itself.
+     *
+     * Keys from the search field arrive here by bubbling, so only navigation crosses over: anything
+     * else is the text being typed, and the manager would answer it instead of the field.
+     */
+    onOptionsKeyDown(event: KeyboardEvent): void;
+    /** Leaving the field ends its hold on the list: a marker nothing can commit only misleads. */
+    protected onSearchBlur(): void;
+    private fromSearchField;
     /** Handles header button clicks */
     onHeaderButtonClick(): void;
-    /** Handles header button keyboard events */
-    onHeaderButtonKeydown(event: KeyboardEvent): void;
     /** Handles search input changes from the rendered field. Filtering is driven by the
      *  `searchTerm` effect, so this only updates the term and notifies listeners. */
     onSearchTermChange(term: string): void;
@@ -155,10 +213,15 @@ declare class SelectionDropdownComponent implements DropdownOverlay, OnDestroy {
     onGroupToggle(groupLabel: string, checked: boolean): void;
     /** Stable track key for a render entry (item or group). */
     protected entryKey(entry: RenderEntry): string;
+    /**
+     * A filtered list changes under a screen reader with nothing said, and the field keeps the focus,
+     * so there is no new focus to read either. Announced after the debounce, once the count is final.
+     */
+    private announceResults;
     /** Updates the filtered items based on search term */
     private updateFilteredItems;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SelectionDropdownComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SelectionDropdownComponent, "ap-selection-dropdown", never, { "headerButtonId": { "alias": "headerButtonId"; "required": false; "isSignal": true; }; "footerButtonId": { "alias": "footerButtonId"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "searchEnabled": { "alias": "searchEnabled"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "footerButtonText": { "alias": "footerButtonText"; "required": false; "isSignal": true; }; "footerButtonSymbolId": { "alias": "footerButtonSymbolId"; "required": false; "isSignal": true; }; "headerButtonText": { "alias": "headerButtonText"; "required": false; "isSignal": true; }; "headerButtonSymbolId": { "alias": "headerButtonSymbolId"; "required": false; "isSignal": true; }; "searchPlaceholderText": { "alias": "searchPlaceholderText"; "required": false; "isSignal": true; }; "noSearchResultsText": { "alias": "noSearchResultsText"; "required": false; "isSignal": true; }; "showBackdrop": { "alias": "showBackdrop"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "searchTerm": { "alias": "searchTerm"; "required": false; "isSignal": true; }; }, { "opened": "opened"; "closed": "closed"; "selectionChange": "selectionChange"; "footerButtonClick": "footerButtonClick"; "headerButtonClick": "headerButtonClick"; "searchInputChange": "searchInputChange"; "searchTerm": "searchTermChange"; }, ["trigger"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SelectionDropdownComponent, "ap-selection-dropdown", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "selectedSectionText": { "alias": "selectedSectionText"; "required": false; "isSignal": true; }; "optionsSectionText": { "alias": "optionsSectionText"; "required": false; "isSignal": true; }; "headerButtonId": { "alias": "headerButtonId"; "required": false; "isSignal": true; }; "footerButtonId": { "alias": "footerButtonId"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "searchEnabled": { "alias": "searchEnabled"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "footerButtonText": { "alias": "footerButtonText"; "required": false; "isSignal": true; }; "footerButtonSymbolId": { "alias": "footerButtonSymbolId"; "required": false; "isSignal": true; }; "headerButtonText": { "alias": "headerButtonText"; "required": false; "isSignal": true; }; "headerButtonSymbolId": { "alias": "headerButtonSymbolId"; "required": false; "isSignal": true; }; "searchPlaceholderText": { "alias": "searchPlaceholderText"; "required": false; "isSignal": true; }; "noSearchResultsText": { "alias": "noSearchResultsText"; "required": false; "isSignal": true; }; "searchResultsText": { "alias": "searchResultsText"; "required": false; "isSignal": true; }; "showBackdrop": { "alias": "showBackdrop"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "searchTerm": { "alias": "searchTerm"; "required": false; "isSignal": true; }; }, { "opened": "opened"; "closed": "closed"; "selectionChange": "selectionChange"; "footerButtonClick": "footerButtonClick"; "headerButtonClick": "headerButtonClick"; "searchInputChange": "searchInputChange"; "searchTerm": "searchTermChange"; }, ["trigger"], never, true, never>;
 }
 
 /**

package/types/agorapulse-ui-components.d.ts

@@ -41,7 +41,7 @@ import * as i19 from '@agorapulse/ui-components/add-comment';
 export { AddCommentComponent } from '@agorapulse/ui-components/add-comment';
 export { PopoverDirective } from '@agorapulse/ui-components/popover';
 export { FloatingAnchorMode, FloatingPlacement, FloatingSide } from '@agorapulse/ui-components/floating';
-export { DropdownOverlay, DropdownTriggerDirective, createDropdownOverlay } from '@agorapulse/ui-components/dropdown-base';
+export { DropdownOptionDirective, DropdownOverlay, DropdownTriggerDirective, createDropdownOverlay } from '@agorapulse/ui-components/dropdown-base';
 export { DropdownContentDirective, DropdownPanelComponent } from '@agorapulse/ui-components/dropdown-panel';
 export { ActionDropdownComponent, ActionDropdownItem, ActionDropdownTriggerDirective } from '@agorapulse/ui-components/action-dropdown';
 export { AutocompleteComponent } from '@agorapulse/ui-components/autocomplete';