composite-select 1.0.0

package/dist/types/options-section/OptionsSectionManager.d.ts

@@ -0,0 +1,117 @@
+import type { Item, InputChangeEvent } from "../types.js";
+export type OptionsSectionManagerOptions<T extends Item> = {
+    options?: T[];
+    loading?: boolean;
+    value?: string;
+    label?: string;
+    onItemPick?: (item: T) => void;
+    onInputChange?: (e: InputChangeEvent, previousValue: string | undefined, origin: string) => void;
+    onCancel?: () => void;
+    onOk?: () => void;
+    onHighlightChange?: (id: string | number | null) => void;
+    disabled?: boolean;
+    maxHeight?: string;
+    showFilter?: boolean;
+    showFooter?: boolean;
+    renderEmpty?: (defaultRender: () => string | HTMLElement) => string | HTMLElement;
+    renderItem?: (item: T, defaultRender: (item: T, searchValue: string | undefined) => string | HTMLElement, searchValue: string | undefined) => string | HTMLElement;
+    renderList?: (list: T[], defaultRender: (list: T[]) => (string | HTMLElement)[]) => (string | HTMLElement)[];
+    onClear?: () => void;
+    onFocus?: (e: FocusEvent) => void;
+    onComponentChange?: (s: OptionsSectionManagerOptions<T>, reason: string) => void;
+};
+export type OptionsSectionManagerEvents<T extends Item> = {
+    onItemPick: [item: T];
+    onInputChange: [e: InputChangeEvent, previousValue: string | undefined, origin: string];
+    onCancel: [];
+    onOk: [];
+    onHighlightChange: [id: string | number | null];
+    onClear: [];
+    onFocus: [e: FocusEvent];
+    onComponentChange: [s: OptionsSectionManagerOptions<T>, reason: string];
+};
+export declare class OptionsSectionManager<T extends Item = Item> {
+    propOptions: OptionsSectionManagerOptions<T>;
+    propParentElement: HTMLElement;
+    propFilterContainer: HTMLElement;
+    propOptionsContainer: HTMLElement;
+    propFooterContainer: HTMLElement;
+    propInputElement: HTMLInputElement | null;
+    propSpinnerElement: HTMLElement | null;
+    propLabelElement: HTMLLabelElement | null;
+    propOkButton: HTMLButtonElement;
+    propLeftSpace: HTMLElement;
+    propCancelButton: HTMLButtonElement;
+    propClearButton: HTMLButtonElement;
+    propHighlightedId: string | number | null;
+    private _skipNextFocusEvent;
+    protected _attachedElements: Map<any, (e: KeyboardEvent) => void>;
+    protected _subscriber: {
+        bind: <K extends keyof OptionsSectionManagerEvents<T>>(event: K, handler: (...args: OptionsSectionManagerEvents<T>[K]) => void) => () => void;
+        unbind: <K extends keyof OptionsSectionManagerEvents<T>>(event: K, handler: (...args: OptionsSectionManagerEvents<T>[K]) => void) => void;
+        unbindGroup: <K extends keyof OptionsSectionManagerEvents<T>>(event: K) => void;
+        trigger: <K extends keyof OptionsSectionManagerEvents<T>>(event: K, ...args: OptionsSectionManagerEvents<T>[K]) => void;
+        destroy: () => void;
+        getCount: () => number;
+    };
+    constructor(bindElement: HTMLElement, options?: OptionsSectionManagerOptions<T>);
+    getSubscriber(): {
+        bind: <K extends keyof OptionsSectionManagerEvents<T>>(event: K, handler: (...args: OptionsSectionManagerEvents<T>[K]) => void) => () => void;
+        unbind: <K extends keyof OptionsSectionManagerEvents<T>>(event: K, handler: (...args: OptionsSectionManagerEvents<T>[K]) => void) => void;
+        unbindGroup: <K extends keyof OptionsSectionManagerEvents<T>>(event: K) => void;
+        trigger: <K extends keyof OptionsSectionManagerEvents<T>>(event: K, ...args: OptionsSectionManagerEvents<T>[K]) => void;
+        destroy: () => void;
+        getCount: () => number;
+    };
+    protected _triggerOnComponentChange(reason: string): void;
+    protected _scrollToHighlighted(): void;
+    protected _defaultRenderEmpty(): string;
+    protected _defaultRenderItem(item: T, searchValue: string | undefined): HTMLDivElement;
+    protected _defaultRenderList(list: T[]): (string | HTMLElement)[];
+    protected _bindEvents(): void;
+    protected _handleKeyDown(e: KeyboardEvent): void;
+    protected _updateOptionsDisplay(): void;
+    protected _updateLoadingDisplay(): void;
+    protected _updateDisabledDisplay(): void;
+    protected _updateFooterDisplay(): void;
+    protected _updateFilterDisplay(): void;
+    /**
+     * Internal helper to notify both the callback provided in options and the internal subscriber
+     * when the input value changes.
+     */
+    protected _triggerOnInputChange(e: InputChangeEvent, previousValue: string | undefined, origin: string): void;
+    /**
+     * Internal helper to notify both the callback provided in options and the internal subscriber
+     * when an item is picked (e.g. via click or Enter key).
+     */
+    protected _triggerOnItemPick(item: T): void;
+    setMaxHeight(maxHeight?: string): void;
+    setDisabled(disabled: boolean): void;
+    setShowFooter(show: boolean): void;
+    setShowFilter(show: boolean): void;
+    setOptions(options: T[]): void;
+    setLoading(loading: boolean): void;
+    setValue(value: string, triggerOnChange?: boolean): void;
+    getShowFilter(): boolean | undefined;
+    getShowFooter(): boolean | undefined;
+    getDisabled(): boolean | undefined;
+    getLabel(): string | undefined;
+    getLoading(): boolean | undefined;
+    getValue(): string | undefined;
+    getOptions(): T[];
+    getMaxHeight(): string | undefined;
+    getHighlightedId(): string | number | null;
+    clearSearch(triggerOnClear?: boolean, triggerOnChange?: boolean): void;
+    setLabel(label: string): void;
+    highlightAndScrollToElementOnTheList(id?: string | number | null): void;
+    pickHighlighted(): void;
+    setRenderEmpty(renderEmpty?: (defaultRender: () => string | HTMLElement) => string | HTMLElement): void;
+    setRenderItem(renderItem?: (item: T, defaultRender: (item: T, searchValue: string | undefined) => string | HTMLElement, searchValue: string | undefined) => string | HTMLElement): void;
+    setRenderList(renderList?: (list: T[], defaultRender: (list: T[]) => (string | HTMLElement)[]) => (string | HTMLElement)[]): void;
+    setFocus(triggerOnFocus?: boolean): void;
+    setBlur(): void;
+    protected attachArrowsUpAndDown(): void;
+    protected detachArrowsUpAndDown(): void;
+    destroy(): void;
+    render(): void;
+}

package/dist/types/options-section/OptionsSectionManager.html.d.ts

@@ -0,0 +1 @@
+import "../../../js/CenterAndHeightResizer.js";

package/dist/types/options-section/OptionsSectionManagerWebComponent.attributes.html.d.ts

@@ -0,0 +1 @@
+import "../../../js/CenterAndHeightResizer.js";

package/dist/types/options-section/OptionsSectionManagerWebComponent.html.d.ts

@@ -0,0 +1 @@
+import "../../../js/CenterAndHeightResizer.js";

package/dist/types/options-section/OptionsSectionManagerWebComponent.nocssrequest.html.d.ts

@@ -0,0 +1 @@
+import "../../../js/CenterAndHeightResizer.js";

package/dist/types/options-section/options-section.d.ts

@@ -0,0 +1,67 @@
+import { OptionsSectionManager } from "./OptionsSectionManager.js";
+import type { Item } from "../types.js";
+/**
+ * Injects CSS into the Shadow DOM.
+ * Priority:
+ * 1. OptionsSection.cssText (Bundler string injection)
+ * 2. <meta name="select-component" content="/path1.css, /path2.css"> (Global HTML declaration in main document)
+ * 3. OptionsSection.defaultCssUrls (Global JS property)
+ *
+ * Example of Global HTML Declaration in the main document <head>:
+ * <head>
+ *   <meta name="select-component" content="OptionsSectionManager.css" />
+ * </head>
+ */
+export declare class OptionsSection<T extends Item = Item> extends HTMLElement {
+    /**
+     * Bundlers can inject raw CSS string here to avoid HTTP requests entirely.
+     * e.g., OptionsSection.cssText = import('./OptionsSectionManager.css?raw');
+     */
+    static cssText: string;
+    static defaultCssUrls: string[];
+    private _manager;
+    private _options;
+    private _stylesInjected;
+    private _mountPoint;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, _oldValue: string, newValue: string): void;
+    private _injectStyles;
+    setMaxHeight(maxHeight?: string): void;
+    setDisabled(disabled: boolean): void;
+    setShowFooter(show: boolean): void;
+    setShowFilter(show: boolean): void;
+    setOptions(options: T[]): void;
+    setLoading(loading: boolean): void;
+    setValue(value: string): void;
+    setLabel(label: string): void;
+    setRenderEmpty(renderer?: (defaultRender: () => string | HTMLElement) => string | HTMLElement): void;
+    setRenderItem(renderer?: (item: T, defaultRender: (item: T, searchValue: string | undefined) => string | HTMLElement, searchValue: string | undefined) => string | HTMLElement): void;
+    setRenderList(renderer?: (list: T[], defaultRender: (list: T[]) => (string | HTMLElement)[]) => (string | HTMLElement)[]): void;
+    setFocus(): void;
+    setBlur(): void;
+    highlightAndScrollToElementOnTheList(id?: string | number | null): void;
+    render(): void;
+    get options(): T[];
+    set options(val: T[]);
+    get loading(): boolean;
+    set loading(val: boolean);
+    get value(): string;
+    set value(val: string);
+    get label(): string;
+    set label(val: string);
+    get disabled(): boolean;
+    set disabled(val: boolean);
+    get maxHeight(): string;
+    set maxHeight(val: string);
+    get footer(): boolean;
+    set footer(val: boolean);
+    get filter(): boolean;
+    set filter(val: boolean);
+    get highlight(): string | number | null;
+    set highlight(val: string | number | null);
+    getManager(): OptionsSectionManager<T> | null;
+    private _parseJSON;
+}

package/dist/types/options-section/react.d.ts

@@ -0,0 +1,27 @@
+import React from "react";
+import "./options-section.js";
+import type { Item } from "../types.js";
+import type { InputChangeEvent } from "../types.js";
+export type OptionsSectionProps<T extends Item = Item> = {
+    className?: string;
+    style?: React.CSSProperties;
+    id?: string;
+    key?: React.Key;
+    ref?: React.Ref<HTMLElement>;
+    options?: T[] | string;
+    loading?: boolean;
+    value?: string;
+    label?: string;
+    disabled?: boolean;
+    "max-height"?: string;
+    "show-footer"?: boolean;
+    "show-filter"?: boolean;
+    onItemPick?: (item: T) => void;
+    onInputChange?: (e: InputChangeEvent, previousValue: string | undefined, origin: string) => void;
+    onCancel?: () => void;
+    onOk?: () => void;
+    onHighlightChange?: (id: string | number | null) => void;
+    children?: React.ReactNode;
+};
+export declare const OptionsSection: <T extends Item = Item>(props: OptionsSectionProps<T> & React.RefAttributes<HTMLElement>) => React.ReactElement;
+export default OptionsSection;

package/dist/types/options-section/urlManager.d.ts

@@ -0,0 +1,28 @@
+export type OptionItem = {
+    id: number;
+    label: string;
+    selected?: boolean;
+};
+export type DemoState = {
+    options: OptionItem[];
+    left: string;
+    center: string;
+    height: string;
+    loading: boolean;
+    disabled: boolean;
+    setShowFooter: boolean;
+    setShowFilter: boolean;
+    maxHeight: string;
+    value: string;
+    label: string;
+    highlight: string;
+    emptyList: boolean;
+};
+export declare const urlStateConfig: {
+    toUrl: (url: URL, id: string | number, state: Partial<DemoState>) => URL;
+    fromUrl: (urlParams: URLSearchParams, id: string | number) => Partial<DemoState>;
+    getAllIds: (urlParams: URLSearchParams, idRegex?: RegExp) => number[];
+    removeId: (urlParams: URLSearchParams, id: string | number) => void;
+};
+export declare const getNextId: () => number;
+export declare const setNextId: (id: number) => void;

package/dist/types/selected-section/SelectedSectionManager.d.ts

@@ -0,0 +1,89 @@
+import type { Item, InputChangeEvent } from "../types.js";
+export type SelectedSectionManagerOptions<T extends Item> = {
+    selected?: T[];
+    showInput?: boolean;
+    value?: string;
+    renderItem?: (item: T, defaultRender: (item: T) => HTMLElement) => HTMLElement;
+    renderList?: (selected: T[], defaultRender: (selected: T[]) => HTMLElement[]) => HTMLElement[];
+    onDelete?: (id: string) => void;
+    onClear?: () => void;
+    onInputChange?: (e: InputChangeEvent, previousValue: string | undefined) => void;
+    onChange?: (selected: T[]) => void;
+    onFocus?: (e: FocusEvent) => void;
+    label?: string;
+    disabled?: boolean;
+    error?: boolean;
+    loading?: boolean;
+    showDelete?: boolean;
+    onComponentChange?: (s: SelectedSectionManagerOptions<T>, reason: string) => void;
+    renderEmpty?: (defaultRender: () => string | HTMLElement) => string | HTMLElement;
+};
+export type SelectedSectionManagerEvents<T extends Item> = {
+    onDelete: [id: string];
+    onClear: [];
+    onInputChange: [e: InputChangeEvent, previousValue: string | undefined];
+    onChange: [selected: T[]];
+    onComponentChange: [s: SelectedSectionManagerOptions<T>, reason: string];
+    onFocus: [e: FocusEvent];
+};
+export declare class SelectedSectionManager<T extends Item> {
+    propParentElement: HTMLElement;
+    propContainer: HTMLElement;
+    propFlexList: HTMLElement;
+    propButtonsContainer: HTMLElement;
+    propOptions: SelectedSectionManagerOptions<T>;
+    propInputElement: HTMLInputElement | null;
+    propClearButton: HTMLButtonElement;
+    propLoaderElement: HTMLElement | null;
+    propLabelElement: HTMLLabelElement | null;
+    private _skipNextFocusEvent;
+    protected _subscriber: {
+        bind: <K extends keyof SelectedSectionManagerEvents<T>>(event: K, handler: (...args: SelectedSectionManagerEvents<T>[K]) => void) => () => void;
+        unbind: <K extends keyof SelectedSectionManagerEvents<T>>(event: K, handler: (...args: SelectedSectionManagerEvents<T>[K]) => void) => void;
+        unbindGroup: <K extends keyof SelectedSectionManagerEvents<T>>(event: K) => void;
+        trigger: <K extends keyof SelectedSectionManagerEvents<T>>(event: K, ...args: SelectedSectionManagerEvents<T>[K]) => void;
+        destroy: () => void;
+        getCount: () => number;
+    };
+    constructor(parentElement: HTMLElement, options?: SelectedSectionManagerOptions<T>);
+    getSubscriber(): {
+        bind: <K extends keyof SelectedSectionManagerEvents<T>>(event: K, handler: (...args: SelectedSectionManagerEvents<T>[K]) => void) => () => void;
+        unbind: <K extends keyof SelectedSectionManagerEvents<T>>(event: K, handler: (...args: SelectedSectionManagerEvents<T>[K]) => void) => void;
+        unbindGroup: <K extends keyof SelectedSectionManagerEvents<T>>(event: K) => void;
+        trigger: <K extends keyof SelectedSectionManagerEvents<T>>(event: K, ...args: SelectedSectionManagerEvents<T>[K]) => void;
+        destroy: () => void;
+        getCount: () => number;
+    };
+    protected _bindEvents(): void;
+    protected _triggerOnComponentChange(reason: string): void;
+    protected _updateDeleteDisplay(): void;
+    protected _defaultRenderList(selected: T[]): HTMLElement[];
+    protected _defaultRenderItem(item: T): HTMLDivElement;
+    setSelected(list: T[], triggerOnChange?: boolean): void;
+    setShowInput(show: boolean): void;
+    setValue(value: string, triggerOnChange?: boolean): void;
+    setFocus(triggerOnFocus?: boolean): void;
+    clearSearch(triggerOnClear?: boolean, triggerOnChange?: boolean): void;
+    setLabel(label: string): void;
+    setError(isError: boolean): void;
+    setDisabled(disabled: boolean): void;
+    /**
+     * show/hide delete icon
+     * @param show
+     */
+    setShowDelete(show: boolean): void;
+    setLoading(loading: boolean): void;
+    render(): void;
+    setRenderItem(renderItem?: (item: T, defaultRender: (item: T) => HTMLElement) => HTMLElement): void;
+    setRenderList(renderList?: (selected: T[], defaultRender: (selected: T[]) => HTMLElement[]) => HTMLElement[]): void;
+    setRenderEmpty(renderEmpty?: (defaultRender: () => string | HTMLElement) => string | HTMLElement): void;
+    getSelected(): T[];
+    getShowInput(): boolean | undefined;
+    getValue(): string | undefined;
+    getLabel(): string | undefined;
+    getDisabled(): boolean | undefined;
+    getError(): boolean | undefined;
+    getLoading(): boolean | undefined;
+    getShowDelete(): boolean | undefined;
+    destroy(): void;
+}

package/dist/types/selected-section/SelectedSectionManager.html.d.ts

@@ -0,0 +1 @@
+import "../../../js/CenterResizer.js";

package/dist/types/selected-section/SelectedSectionManager.templates.html.d.ts

@@ -0,0 +1 @@
+import "../../../js/CenterResizer.js";

package/dist/types/selected-section/SelectedSectionManagerWebComponent.attributes.html.d.ts

@@ -0,0 +1 @@
+import "../../../js/CenterResizer.js";

package/dist/types/selected-section/SelectedSectionManagerWebComponent.html.d.ts

@@ -0,0 +1 @@
+import "../../../js/CenterResizer.js";

package/dist/types/selected-section/SelectedSectionManagerWebComponent.nocssrequest.html.d.ts

@@ -0,0 +1 @@
+import "../../../js/CenterResizer.js";

package/dist/types/selected-section/react.d.ts

@@ -0,0 +1,32 @@
+import React from "react";
+import "./selected-section.js";
+import type { Item } from "../types.js";
+export type SelectedSectionProps<T extends Item = Item> = {
+    className?: string;
+    style?: React.CSSProperties;
+    id?: string;
+    key?: React.Key;
+    ref?: React.Ref<HTMLElement>;
+    label?: string;
+    "show-input"?: boolean;
+    value?: string;
+    disabled?: boolean;
+    error?: boolean;
+    loading?: boolean;
+    selected?: T[] | string;
+    onFocus?: (detail: {
+        originalEvent: FocusEvent;
+    }) => void;
+    onClear?: () => void;
+    onInputChange?: (detail: {
+        originalEvent: Event;
+        value: string;
+        key: string;
+        previousValue?: string;
+    }) => void;
+    onDelete?: (id: string) => void;
+    onChange?: (selected: T[]) => void;
+    children?: React.ReactNode;
+};
+export declare const SelectedSection: <T extends Item = Item>(props: SelectedSectionProps<T> & React.RefAttributes<HTMLElement>) => React.ReactElement;
+export default SelectedSection;

package/dist/types/selected-section/selected-section.d.ts

@@ -0,0 +1,54 @@
+import { SelectedSectionManager } from "./SelectedSectionManager.js";
+import type { Item } from "../types.js";
+/**
+ * Injects CSS into the Shadow DOM.
+ * Priority:
+ * 1. SelectedSection.cssText (Bundler string injection)
+ * 2. <meta name="select-component" content="/path1.css, /path2.css"> (Global HTML declaration in main document)
+ * 3. SelectedSection.defaultCssUrls (Global JS property)
+ *
+ * Example of Global HTML Declaration in the main document <head>:
+ * <head>
+ *   <meta name="select-component" content="SelectedSectionManager.css">
+ * </head>
+ */
+export declare class SelectedSection<T extends Item = Item> extends HTMLElement {
+    private _manager;
+    private _options;
+    private _mountPoint;
+    private _stylesInjected;
+    static cssText: string;
+    static defaultCssUrls: string[];
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, _oldValue: string, newValue: string): void;
+    private _injectStyles;
+    setSelected(list: T[]): void;
+    setValue(value: string): void;
+    clearSearch(triggerOnChange?: boolean): void;
+    setError(state: boolean): void;
+    setDisabled(state: boolean): void;
+    setLoading(state: boolean): void;
+    setLabel(text: string): void;
+    setShowInput(state: boolean): void;
+    setRenderItem(renderer?: (item: T, defaultRender: (item: T) => HTMLElement) => HTMLElement): void;
+    setRenderList(renderer?: (selected: T[], defaultRender: (selected: T[]) => HTMLElement[]) => HTMLElement[]): void;
+    render(): void;
+    get selected(): T[];
+    set selected(val: T[]);
+    get value(): string;
+    set value(val: string);
+    get label(): string;
+    set label(val: string);
+    get error(): boolean;
+    set error(val: boolean);
+    get disabled(): boolean;
+    set disabled(val: boolean);
+    get loading(): boolean;
+    set loading(val: boolean);
+    setFocus(): void;
+    getManager(): SelectedSectionManager<T> | null;
+    private _parseJSON;
+}

package/dist/types/selected-section/urlManager.d.ts

@@ -0,0 +1,25 @@
+export type DemoItem = {
+    id: number;
+    color?: string;
+    img?: string;
+    label: string;
+};
+export type DemoState = {
+    selected: DemoItem[];
+    left: string;
+    center: string;
+    error: boolean;
+    disabled: boolean;
+    loading: boolean;
+    showInput: boolean;
+    label: string;
+    value: string;
+};
+export declare const urlStateConfig: {
+    toUrl: (url: URL, id: string | number, state: Partial<DemoState>) => URL;
+    fromUrl: (urlParams: URLSearchParams, id: string | number) => Partial<DemoState>;
+    getAllIds: (urlParams: URLSearchParams, idRegex?: RegExp) => number[];
+    removeId: (urlParams: URLSearchParams, id: string | number) => void;
+};
+export declare const getNextId: () => number;
+export declare const setNextId: (id: number) => void;

package/dist/types/types.d.ts

@@ -0,0 +1,9 @@
+export type Item = {
+    id: number;
+    label: string;
+    selected?: boolean;
+    [key: string]: any;
+};
+export type InputChangeEvent = Omit<KeyboardEvent, "target"> & {
+    target: HTMLInputElement;
+};

package/dist/types/unbind/clickOutside.d.ts

@@ -0,0 +1 @@
+export declare function clickOutside(targets: HTMLElement | HTMLElement[], callback: (e: Event) => void): () => void;