@stackline/angular-multiselect-dropdown 21.1.15 → 21.2.1

package/package.json

@@ -1,10 +1,10 @@
 {
   "$schema": "../../../node_modules/ng-packagr/package.schema.json",
   "name": "@stackline/angular-multiselect-dropdown",
-  "version": "21.1.15",
+  "version": "21.2.1",
   "license": "MIT",
   "author": "Pradeep Terli (Original), Alexandro Paixao Marques (Maintainer)",
-  "description": "Angular multiselect dropdown for Angular 21 with maintained release lines, ADA-compliant keyboard/ARIA accessibility, dialog-safe body overlays, Stackline skins, search, grouping, templates, and forms support.",
+  "description": "Angular multiselect dropdown for Angular 21 with maintained release lines, accessibility-focused and keyboard/ARIA tested interactions, dialog-safe body overlays, Stackline skins, search, grouping, templates, headless helpers, and forms support.",
   "keywords": [
     "angular",
     "angular-library",
@@ -36,9 +36,21 @@
     "formcontrolname",
     "forms",
     "accessibility",
+    "accessibility-focused",
     "a11y",
     "aria",
+    "aria-tested",
     "keyboard-navigation",
+    "keyboard-tested",
+    "keyboard-aria-tested",
+    "combobox",
+    "combobox-contract",
+    "listbox",
+    "headless",
+    "renderless",
+    "template-slots",
+    "object-data",
+    "admin-ui",
     "ada-compliant",
     "ui-component",
     "material-inspired",

package/types/stackline-angular-multiselect-dropdown.d.ts

@@ -5,6 +5,18 @@ import { ControlValueAccessor, Validator, UntypedFormControl } from '@angular/fo
 import { Observable, Subject, Subscription } from 'rxjs';
 import * as i1 from '@angular/common';
 
+type DropdownKeyboardSpaceOptionAction = 'toggle' | 'toggle-and-next';
+interface DropdownKeyboardSettings {
+    space?: boolean;
+    spaceOptionAction?: DropdownKeyboardSpaceOptionAction;
+    tab?: boolean;
+    arrows?: boolean;
+    escape?: boolean;
+    backspaceRemovesLastWhenSearchEmpty?: boolean;
+    deleteRemovesFocusedBadge?: boolean;
+    /** @deprecated Use backspaceRemovesLastWhenSearchEmpty instead. */
+    backspace?: boolean;
+}
 interface DropdownSettings {
     singleSelection?: boolean;
     text?: string;
@@ -52,6 +64,7 @@ interface DropdownSettings {
     openDropdownAriaLabel?: string;
     closeDropdownAriaLabel?: string;
     loadingText?: string;
+    keyboard?: DropdownKeyboardSettings;
 }
 
 declare class DataService {
@@ -96,12 +109,13 @@ declare class TemplateRenderer implements OnInit, OnDestroy {
     viewContainer: ViewContainerRef;
     data: any;
     item: any;
+    context: any;
     view: EmbeddedViewRef<any>;
     constructor(viewContainer: ViewContainerRef);
     ngOnInit(): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TemplateRenderer, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TemplateRenderer, "c-templateRenderer", never, { "data": { "alias": "data"; "required": false; }; "item": { "alias": "item"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TemplateRenderer, "c-templateRenderer", never, { "data": { "alias": "data"; "required": false; }; "item": { "alias": "item"; "required": false; }; "context": { "alias": "context"; "required": false; }; }, {}, never, never, false, never>;
 }
 declare class CIcon {
     name: any;
@@ -411,6 +425,12 @@ declare class AngularMultiSelect implements OnInit, ControlValueAccessor, OnChan
     getSkinName(): string;
     getDropdownClasses(): string;
     private normalizeSettings;
+    private isKeyboardEnabled;
+    private getSpaceOptionAction;
+    private getPrimaryKey;
+    private getLabelKey;
+    private getItemKey;
+    private mergeSelectedIntoData;
     isDropdownOpenTowardsTop(): boolean;
     getDropdownPanelClasses(): string;
     isBodyOverlayEnabled(): boolean;
@@ -418,6 +438,10 @@ declare class AngularMultiSelect implements OnInit, ControlValueAccessor, OnChan
     private getAnchorElement;
     private getDropdownMaxHeight;
     private getDropdownPanelHeightForPositioning;
+    hasSelectableItems(): boolean;
+    private getSelectableItems;
+    private areAllSelectableItemsSelected;
+    private syncSelectAllState;
     private isEventInsideHostOrPanel;
     private syncDropdownPanelThemeVariables;
     private clearDropdownPanelThemeVariables;
@@ -440,6 +464,23 @@ declare class AngularMultiSelect implements OnInit, ControlValueAccessor, OnChan
     getCloseDropdownAriaLabel(): string;
     getItemLabel(item: any): string;
     getRemoveItemAriaLabel(item: any): string;
+    getTemplateContext(item: any, index: number, prefix?: string, group?: any): {
+        item: any;
+        label: string;
+        selected: boolean;
+        disabled: boolean;
+        index: number;
+        group: any;
+        optionId: string;
+        ariaSelected: boolean;
+        ariaChecked: boolean;
+        ariaDisabled: boolean;
+        isOpen: boolean;
+        settings: DropdownSettings;
+        select: () => void;
+        remove: () => void;
+        clear: () => void;
+    };
     getOptionId(item: any, index: number, prefix?: string): string;
     isOptionDisabled(item: any): boolean;
     setActiveDescendant(item: any, index: number, prefix?: string): void;
@@ -455,9 +496,15 @@ declare class AngularMultiSelect implements OnInit, ControlValueAccessor, OnChan
     onArrowButtonKeydown(evt: KeyboardEvent): void;
     onSearchKeydown(evt: KeyboardEvent): void;
     onSelectAllKeydown(evt: KeyboardEvent, action: 'filter' | 'infinite-filter'): void;
+    onRemoveButtonKeydown(item: any, index: number, evt: KeyboardEvent): void;
+    onClearAllKeydown(evt: KeyboardEvent): void;
+    private shouldBackspaceRemoveLast;
+    private removeLastSelectedItem;
+    private toggleOptionFromKeyboard;
     focusTrigger(): void;
     private getOptionElements;
     private focusOptionByIndex;
+    private focusOptionById;
     focusFirstOption(): void;
     focusLastOption(): void;
     focusNextOption(): void;
@@ -472,6 +519,7 @@ declare class AngularMultiSelect implements OnInit, ControlValueAccessor, OnChan
     ngAfterViewInit(): void;
     ngAfterViewChecked(): void;
     onItemClick(item: any, index: number, evt: Event): void;
+    private focusClickedOption;
     validate(c: UntypedFormControl): any;
     private onTouchedCallback;
     private onChangeCallback;
@@ -514,5 +562,84 @@ declare class AngularMultiSelectModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<AngularMultiSelectModule>;
 }
 
-export { AngularMultiSelect, AngularMultiSelectModule, Badge, CIcon, ClickOutsideDirective, Item, ListFilterPipe, ScrollDirective, Search, TemplateRenderer, setPosition, styleDirective };
-export type { DropdownSettings };
+type AngularMultiselectItemKey<T> = Extract<keyof T, string>;
+interface AngularMultiselectStateConfig<T> {
+    data: T[];
+    selectedItems?: T[];
+    settings?: DropdownSettings;
+    id?: string;
+    onChange?: (items: T[]) => void;
+}
+interface AngularMultiselectOptionState<T> {
+    item: T;
+    key: string;
+    label: string;
+    selected: boolean;
+    disabled: boolean;
+    id: string;
+    role: 'option';
+    ariaSelected: 'true' | 'false';
+    ariaChecked: 'true' | 'false';
+    ariaDisabled: 'true' | 'false';
+}
+interface AngularMultiselectListboxState {
+    id: string;
+    role: 'listbox';
+    ariaMultiselectable: 'true' | 'false';
+    ariaLabel: string;
+}
+interface AngularMultiselectTriggerState {
+    role: 'combobox';
+    ariaHaspopup: 'listbox';
+    ariaControls: string;
+    ariaExpanded: 'true' | 'false';
+    ariaActivedescendant: string | null;
+    ariaLabel: string;
+}
+declare class AngularMultiselectState<T extends Record<string, any>> {
+    data: T[];
+    selectedItems: T[];
+    settings: DropdownSettings;
+    filter: string;
+    isOpen: boolean;
+    activeKey: string | null;
+    private id;
+    private onChange?;
+    constructor(config: AngularMultiselectStateConfig<T>);
+    setData(data: T[]): void;
+    setSelectedItems(items: T[]): void;
+    setFilter(value: string): void;
+    open(): void;
+    close(): void;
+    toggleOpen(): void;
+    getKey(item: T): string;
+    getLabel(item: T): string;
+    isSelected(item: T): boolean;
+    isDisabled(item: T): boolean;
+    getVisibleOptions(): T[];
+    getOptionState(item: T, index: number): AngularMultiselectOptionState<T>;
+    getOptionStates(): AngularMultiselectOptionState<T>[];
+    getListboxState(): AngularMultiselectListboxState;
+    getTriggerState(): AngularMultiselectTriggerState;
+    toggleItem(item: T): void;
+    removeItem(item: T): void;
+    clearSelection(): void;
+    selectAll(): void;
+    deSelectAll(): void;
+    private emitChange;
+}
+declare function createAngularMultiselectState<T extends Record<string, any>>(config: AngularMultiselectStateConfig<T>): AngularMultiselectState<T>;
+declare function defineAngularMultiselectSettings<T extends Record<string, any>>(settings: DropdownSettings & {
+    primaryKey?: AngularMultiselectItemKey<T>;
+    labelKey?: AngularMultiselectItemKey<T>;
+    searchBy?: AngularMultiselectItemKey<T>[];
+    groupBy?: AngularMultiselectItemKey<T>;
+}): DropdownSettings & {
+    primaryKey?: AngularMultiselectItemKey<T>;
+    labelKey?: AngularMultiselectItemKey<T>;
+    searchBy?: AngularMultiselectItemKey<T>[];
+    groupBy?: AngularMultiselectItemKey<T>;
+};
+
+export { AngularMultiSelect, AngularMultiSelectModule, AngularMultiselectState, Badge, CIcon, ClickOutsideDirective, Item, ListFilterPipe, ScrollDirective, Search, TemplateRenderer, createAngularMultiselectState, defineAngularMultiselectSettings, setPosition, styleDirective };
+export type { AngularMultiselectItemKey, AngularMultiselectListboxState, AngularMultiselectOptionState, AngularMultiselectStateConfig, AngularMultiselectTriggerState, DropdownKeyboardSettings, DropdownKeyboardSpaceOptionAction, DropdownSettings };