igniteui-webcomponents 4.0.0 → 4.1.0

package/components/combo/combo-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combo-list.js","sourceRoot":"","sources":["../../../src/components/combo/combo-list.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD,MAAM,CAAC,OAAO,OAAO,qBAAsB,SAAQ,cAAc;IAAjE;;QAEkB,aAAQ,GAAG,IAAI,CAAC;IAOlC,CAAC;IALiB,iBAAiB;QAC/B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;QACnC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACvC,CAAC;;AAPsB,6BAAO,GAAG,gBAAgB,CAAC","sourcesContent":["import { LitVirtualizer } from '@lit-labs/virtualizer';\n\nexport default class IgcComboListComponent extends LitVirtualizer {\n  public static readonly tagName = 'igc-combo-list';\n  public override scroller = true;\n\n  public override connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('tabindex', '0');\n    this.setAttribute('role', 'listbox');\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-combo-list': IgcComboListComponent;\n  }\n}\n"]}

package/components/combo/combo.d.ts

@@ -0,0 +1,254 @@
+import { LitElement, TemplateResult } from 'lit';
+import IgcInputComponent from '../input/input.js';
+import { NavigationController } from './controllers/navigation.js';
+import { SelectionController } from './controllers/selection.js';
+import { IgcToggleController } from '../toggle/toggle.controller.js';
+import { DataController } from './controllers/data.js';
+import { IgcToggleComponent } from '../toggle/types.js';
+import { Keys, Values, ComboRecord, GroupingDirection, FilteringOptions, IgcComboEventMap, ComboItemTemplate } from './types.js';
+import { Constructor } from '../common/mixins/constructor.js';
+import type { ThemeController, Theme } from '../../theming/types.js';
+declare const IgcComboComponent_base: import("../common/mixins/constructor.js").AbstractConstructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcComboEventMap>> & Constructor<LitElement>;
+/**
+ * @element igc-combo
+ *
+ * @slot prefix - Renders content before the input.
+ * @slot suffix - Renders content after input.
+ * @slot header - Renders a container before the list of options.
+ * @slot footer - Renders a container after the list of options.
+ * @slot helper-text - Renders content below the input.
+ * @slot toggle-icon - Renders content inside the suffix container.
+ * @slot clear-icon - Renders content inside the suffix container.
+ *
+ * @fires igcFocus - Emitted when the select gains focus.
+ * @fires igcBlur - Emitted when the select loses focus.
+ * @fires igcChange - Emitted when the control's selection has changed.
+ * @fires igcOpening - Emitted just before the list of options is opened.
+ * @fires igcOpened - Emitted after the list of options is opened.
+ * @fires igcClosing - Emitter just before the list of options is closed.
+ * @fires igcClosed - Emitted after the list of options is closed.
+ *
+ * @csspart label - The encapsulated text label.
+ * @csspart input - The main input field.
+ * @csspart native-input - The native input of the main input field.
+ * @csspart prefix - The prefix wrapper.
+ * @csspart suffix - The suffix wrapper.
+ * @csspart toggle-icon - The toggle icon wrapper.
+ * @csspart clear-icon - The clear icon wrapper.
+ * @csspart case-icon - The case icon wrapper.
+ * @csspart helper-text - The helper text wrapper.
+ * @csspart search-input - The search input field.
+ * @csspart list-wrapper - The list of options wrapper.
+ * @csspart list - The list of options box.
+ * @csspart item - Represents each item in the list of options.
+ * @csspart group-header - Represents each header in the list of options.
+ * @csspart active - Appended to the item parts list when the item is active.
+ * @csspart selected - Appended to the item parts list when the item is selected.
+ * @csspart checkbox - Represents each checkbox of each list item.
+ * @csspart checkbox-indicator - Represents the checkbox indicator of each list item.
+ * @csspart checked - Appended to checkbox parts list when checkbox is checked.
+ * @csspart header - The container holding the header content.
+ * @csspart footer - The container holding the footer content.
+ * @csspart empty - The container holding the empty content.
+ */
+export default class IgcComboComponent<T extends object> extends IgcComboComponent_base implements Partial<IgcToggleComponent> {
+    static readonly tagName = "igc-combo";
+    static styles: import("lit").CSSResult;
+    protected navigationController: NavigationController<T>;
+    protected selectionController: SelectionController<T>;
+    protected dataController: DataController<T>;
+    protected toggleController: IgcToggleController;
+    protected themeController: ThemeController;
+    protected theme: Theme;
+    protected helperText: Array<HTMLElement>;
+    protected inputSuffix: Array<HTMLElement>;
+    protected inputPrefix: Array<HTMLElement>;
+    protected input: IgcInputComponent;
+    private target;
+    private list;
+    /** The data source used to generate the list of options. */
+    data: Array<T>;
+    /**
+     * The name attribute of the control.
+     * @attr name
+     */
+    name: string;
+    /**
+     * The disabled attribute of the control.
+     * @attr disabled
+     */
+    disabled: boolean;
+    /**
+     * The required attribute of the control.
+     * @attr required
+     */
+    required: boolean;
+    /**
+     * The invalid attribute of the control.
+     * @attr invalid
+     */
+    invalid: boolean;
+    /**
+     * The outlined attribute of the control.
+     * @attr outlined
+     */
+    outlined: boolean;
+    /**
+     * The autofocus attribute of the control.
+     * @attr autofocus
+     */
+    autofocus: boolean;
+    /**
+     * Focuses the list of options when the menu opens.
+     * @attr autofocus-list
+     */
+    autofocusList: boolean;
+    /**
+     * The label attribute of the control.
+     * @attr label
+     */
+    label: string;
+    /**
+     * The placeholder attribute of the control.
+     * @attr placeholder
+     */
+    placeholder: string;
+    /**
+     * The placeholder attribute of the search input.
+     * @attr placeholder-search
+     */
+    placeholderSearch: string;
+    /**
+     * The direction attribute of the control.
+     * @attr dir
+     */
+    dir: 'ltr' | 'rtl' | 'auto';
+    /**
+     * Sets the open state of the component.
+     * @attr open
+     */
+    open: boolean;
+    /** @hidden @internal */
+    flip: boolean;
+    /**
+     * The key in the data source used when selecting items.
+     * @attr value-key
+     */
+    valueKey?: Keys<T>;
+    /**
+     * The key in the data source used to display items in the list.
+     * @attr display-key
+     */
+    displayKey?: Keys<T>;
+    /**
+     * The key in the data source used to group items in the list.
+     * @attr group-key
+     */
+    groupKey?: Keys<T>;
+    /**
+     * Sorts the items in each group by ascending or descending order.
+     * @attr group-sorting
+     * @type {"asc" | "desc"}
+     */
+    groupSorting: GroupingDirection;
+    /**
+     * An object that configures the filtering of the combo.
+     * @attr filtering-options
+     * @type {FilteringOptions<T>}
+     * @param filterKey - The key in the data source used when filtering the list of options.
+     * @param caseSensitive - Determines whether the filtering operation should be case sensitive.
+     */
+    filteringOptions: FilteringOptions<T>;
+    /**
+     * Enables the case sensitive search icon in the filtering input.
+     * @attr case-sensitive-icon
+     */
+    caseSensitiveIcon: boolean;
+    /**
+     * Disables the filtering of the list of options.
+     * @attr disable-filtering
+     */
+    disableFiltering: boolean;
+    /**
+     * The template used for the content of each combo item.
+     * @type {ComboItemTemplate<T>}
+     */
+    itemTemplate: ComboItemTemplate<T>;
+    /**
+     * The template used for the content of each combo group header.
+     * @type {ComboItemTemplate<T>}
+     */
+    groupHeaderTemplate: ComboItemTemplate<T>;
+    protected dataState: Array<ComboRecord<T>>;
+    protected dataChanged(): void;
+    protected updateDisplayKey(): void;
+    protected updateFilterKey(): void;
+    protected pipeline(): Promise<void>;
+    protected toggleDirectiveChange(): void;
+    constructor();
+    protected themeAdopted(controller: ThemeController): void;
+    protected willUpdate(): void;
+    protected getUpdateComplete(): Promise<boolean>;
+    /**
+     * Returns the current selection as a list of commma separated values,
+     * represented by the display key, when provided.
+     */
+    get value(): string;
+    protected validate(): void;
+    /** Checks the validity of the control. */
+    reportValidity(): boolean;
+    /** A wrapper around the reportValidity method to comply with the native input API. */
+    checkValidity(): boolean;
+    /** Sets focus on the component. */
+    focus(options?: FocusOptions): void;
+    /** Removes focus from the component. */
+    blur(): void;
+    /**
+     * Selects the options in the list by either value or key value.
+     * If not argument is provided all items will be selected.
+     * @param { T[] | Values<T>[] } items - A list of values or values as set by the valueKey.
+     */
+    select(items?: T[] | Values<T>[]): void;
+    /**
+     * Deselects the options in the list by either value or key value.
+     * If not argument is provided all items will be deselected.
+     * @param { T[] | Values<T>[] } items - A list of values or values as set by the valueKey.
+     */
+    deselect(items?: T[] | Values<T>[]): void;
+    protected handleSearchInput(e: CustomEvent): void;
+    protected handleOpening(): boolean;
+    protected handleClosing(): boolean;
+    protected _show(emit?: boolean): Promise<void>;
+    /** Shows the list of options. */
+    show(): void;
+    protected _hide(emit?: boolean): Promise<void>;
+    /** Hides the list of options. */
+    hide(): void;
+    /** @hidden @internal */
+    _toggle(emit?: boolean): void;
+    /** Toggles the list of options. */
+    toggle(): void;
+    protected itemRenderer: (item: T, index: number) => TemplateResult;
+    protected listKeydownHandler(event: KeyboardEvent): void;
+    protected itemClickHandler(event: MouseEvent): void;
+    protected toggleSelect(index: number): void;
+    protected navigateTo(item: T): void;
+    protected handleClearIconClick(e: MouseEvent): void;
+    protected toggleCaseSensitivity(): void;
+    protected get hasPrefixes(): boolean;
+    protected get hasSuffixes(): boolean;
+    private renderToggleIcon;
+    private renderClearIcon;
+    private renderInput;
+    private renderSearchInput;
+    private renderEmptyTemplate;
+    private renderList;
+    private renderHelperText;
+    protected render(): TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'igc-combo': IgcComboComponent<object>;
+    }
+}
+export {};