kr-elements 0.0.1-alpha.2 → 0.0.1-alpha.21

package/dist/esm/combobox/HTML.combobox.element.js

@@ -22,6 +22,7 @@ export class HTMLComboboxElement extends HTMLElement {
         this.shadowRoot.adoptedStyleSheets = HTMLComboboxElement.styleSheet;
         this.#observer = new MutationObserver(this.#onOptionsChanges);
     }
+    // Lifecycle callbacks
     connectedCallback() {
         this.#markup.connect();
         this.#initialAttributesSynchronization();
@@ -44,6 +45,8 @@ export class HTMLComboboxElement extends HTMLElement {
     formDisabledCallback(isDisabled) {
         this.disabled = isDisabled;
     }
+    // Instance properties
+    // readonly
     get valueAsArray() {
         return Array.from(this.#values);
     }
@@ -56,6 +59,7 @@ export class HTMLComboboxElement extends HTMLElement {
     get willValidate() {
         return this.internals.willValidate;
     }
+    // configurable
     get value() {
         return this.valueAsArray.join(',');
     }
@@ -93,60 +97,65 @@ export class HTMLComboboxElement extends HTMLElement {
         });
     }
     get query() {
-        return this.#markup.searchInput.value;
+        return this.getAttribute('query');
     }
     set query(value) {
         if (value === this.query)
             return;
-        this.#markup.searchInput.value = value;
         super.setAttribute('query', value);
+        if (this.#markup.connected) {
+            this.#markup.searchInput.value = value;
+        }
     }
     get clearable() {
         return this.hasAttribute('clearable');
     }
     set clearable(value) {
-        super.toggleAttribute('clearable', value);
+        super.toggleAttribute('clearable', toBoolean(value));
     }
     get multiple() {
         return this.hasAttribute('multiple');
     }
     set multiple(value) {
-        super.toggleAttribute('multiple', value);
+        super.toggleAttribute('multiple', toBoolean(value));
     }
     get filterable() {
         return this.hasAttribute('filterable');
     }
     set filterable(value) {
-        super.toggleAttribute('filterable', value);
+        super.toggleAttribute('filterable', toBoolean(value));
     }
     get searchable() {
         return this.hasAttribute('searchable');
     }
     set searchable(value) {
-        super.toggleAttribute('searchable', value);
+        super.toggleAttribute('searchable', toBoolean(value));
     }
     get disabled() {
         return this.hasAttribute('disabled');
     }
     set disabled(value) {
         this.internals.ariaDisabled = String(value);
-        super.toggleAttribute('disabled', value);
+        super.toggleAttribute('disabled', toBoolean(value));
     }
     get required() {
         return this.hasAttribute('required');
     }
     set required(value) {
         this.internals.ariaRequired = String(value);
-        super.toggleAttribute('required', value);
+        super.toggleAttribute('required', toBoolean(value));
     }
     get placeholder() {
-        return this.#markup.searchInput.placeholder;
+        return this.getAttribute('placeholder');
     }
     set placeholder(value) {
-        this.#markup.placeholder.innerText = value;
-        this.#markup.searchInput.placeholder = value;
         super.setAttribute('placeholder', value);
+        if (this.#markup.connected) {
+            this.#markup.placeholder.innerText = value;
+            this.#markup.searchInput.placeholder = value;
+        }
     }
+    // Instance methods
     setAttribute(name, value) {
         if (HTMLComboboxElement.booleanAttributes.has(name)) {
             Reflect.set(this, name, toBoolean(value));
@@ -182,6 +191,7 @@ export class HTMLComboboxElement extends HTMLElement {
             this.internals.setValidity({ customError: true }, message);
         }
     }
+    // Internal
     #onInput = (event) => {
         if (this.filterable) {
             if (event.target && event.target instanceof HTMLInputElement) {

package/dist/esm/combobox/HTML.combobox.option.element.js

@@ -7,23 +7,48 @@ export class HTMLComboboxOptionElement extends HTMLElement {
         super.setAttribute('part', 'box-option');
         super.setAttribute('tabindex', "0");
         super.setAttribute('role', "option");
-        if (this.children.length === 0) {
-            this.textContent = this.label;
+        const value = this.value;
+        const label = this.label;
+        const hasNoMarkup = this.children.length === 0;
+        const text = this.textContent.trim();
+        const hasText = text.length > 0;
+        if (!value && !label) {
+            console.log('!value && !label');
+            if (hasNoMarkup && hasText) {
+                this.value = text;
+                this.label = text;
+            }
+            else {
+                throw new Error('box-option must have value and label attributes');
+            }
+            return;
+        }
+        if (value && !label) {
+            if (hasNoMarkup && hasText) {
+                this.label = text;
+            }
+            else {
+                this.label = value;
+            }
+        }
+        if (!value && label) {
+            this.value = label;
+        }
+        if (hasNoMarkup && !hasText) {
+            this.textContent = label || value;
         }
     }
     get value() {
         return this.getAttribute('value');
     }
     set value(value) {
-        value = this.#getOrExtractValue(value, 'value');
-        super.setAttribute('value', value);
+        super.setAttribute('value', String(value));
     }
     get label() {
-        return this.getAttribute('value');
+        return this.getAttribute('label');
     }
     set label(value) {
-        value = this.#getOrExtractValue(value, 'label');
-        super.setAttribute('label', value);
+        super.setAttribute('label', String(value));
     }
     get selected() {
         return this.hasAttribute('selected');
@@ -37,32 +62,10 @@ export class HTMLComboboxOptionElement extends HTMLElement {
             Reflect.set(this, key, value);
         }
         for (const key of HTMLComboboxOptionElement.stringAttributes) {
-            Reflect.set(this, key, this.getAttribute(key));
-        }
-    }
-    get #optionHasOnlyTextNode() {
-        return this.children.length === 0 && this.textContent.length > 0;
-    }
-    #getOrExtractValue(value, name) {
-        if (typeof value === 'string')
-            return value;
-        if (value == null) {
-            const opposite = name === 'label' ? 'value' : 'label';
-            const oppositeValue = this.getAttribute(opposite);
-            if (oppositeValue) {
-                value = oppositeValue;
-            }
-            else {
-                if (this.#optionHasOnlyTextNode) {
-                    value = this.textContent;
-                }
-                else {
-                    throw new TypeError('No value, or label or textContent found');
-                }
+            if (this.hasAttribute(key)) {
+                Reflect.set(this, key, this.getAttribute(key));
             }
-            return value;
         }
-        throw new TypeError('Invalid value');
     }
     setAttribute(name, value) {
         if (HTMLComboboxOptionElement.booleanAttributes.has(name)) {

package/dist/esm/index.js

@@ -1 +1,3 @@
-export * from './HTML.combobox.element.js';
+/// <reference types="solid-js" />
+/// <reference types="preact" />
+export * from './combobox/index.js';

package/dist/esm/tsconfig.esm.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["../../src/index.ts","../../src/combobox/boolean.attribute.value.normalizer.ts","../../src/combobox/combobox.markup.ts","../../src/combobox/html.combobox.element.ts","../../src/combobox/html.combobox.option.element.ts","../../src/combobox/html.combobox.tag.element.ts","../../src/combobox/index.ts"],"version":"5.9.3"}

package/dist/types/combobox/Boolean.attribute.value.normalizer.d.ts

@@ -1 +1,3 @@
+/** Transform invalid (nullish or stringed) values to correct boolean value */
 export declare function toBoolean(value: any): boolean;
+//# sourceMappingURL=Boolean.attribute.value.normalizer.d.ts.map

package/dist/types/combobox/Boolean.attribute.value.normalizer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Boolean.attribute.value.normalizer.d.ts","sourceRoot":"","sources":["../../../src/combobox/Boolean.attribute.value.normalizer.ts"],"names":[],"mappings":"AAAA,8EAA8E;AAC9E,wBAAgB,SAAS,CAAC,KAAK,EAAE,GAAG,WAInC"}

package/dist/types/combobox/Combobox.markup.d.ts

@@ -8,6 +8,7 @@ export declare class ComboboxMarkup {
     dropdown: HTMLDivElement | null;
     placeholder: HTMLDivElement | null;
     searchInput: HTMLInputElement | null;
+    connected: boolean;
     constructor(shadowRoot: ShadowRoot, internals: ElementInternals);
     connect(): void;
     sort(query: string): void;
@@ -23,3 +24,4 @@ export declare class ComboboxMarkup {
     get selectedOptions(): NodeListOf<HTMLComboboxOptionElement>;
     static get template(): string;
 }
+//# sourceMappingURL=Combobox.markup.d.ts.map

package/dist/types/combobox/Combobox.markup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Combobox.markup.d.ts","sourceRoot":"","sources":["../../../src/combobox/Combobox.markup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAE9E,qBAAa,cAAc;;IAGzB,aAAa,EAAE,cAAc,GAAG,IAAI,CAAQ;IAC5C,gBAAgB,EAAE,cAAc,GAAG,IAAI,CAAQ;IAC/C,cAAc,EAAE,iBAAiB,GAAG,IAAI,CAAQ;IAChD,QAAQ,EAAE,cAAc,GAAG,IAAI,CAAQ;IACvC,WAAW,EAAE,cAAc,GAAG,IAAI,CAAQ;IAC1C,WAAW,EAAE,gBAAgB,GAAG,IAAI,CAAQ;IAE5C,SAAS,UAAS;gBAEN,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,gBAAgB;IAU/D,OAAO;IAcP,IAAI,CAAC,KAAK,EAAE,MAAM;IAiBlB,UAAU;IASV,YAAY,aAIX;IAED,mBAAmB,CAAC,IAAI,EAAE,OAAO;IAmBjC,YAAY,aAUX;IAED,YAAY,GAAI,OAAO,KAAK,UAU3B;IAED,kBAAkB,CAAC,MAAM,EAAE,yBAAyB;IAqBpD,aAAa,CAAC,KAAK,EAAE,MAAM;IAI3B,gBAAgB,CAAC,KAAK,EAAE,MAAM;IAI9B,IAAI,WAAW,2BAQd;IAGD,IAAI,eAAe,0CAGlB;IAED,MAAM,KAAK,QAAQ,WAqLlB;CACF"}

package/dist/types/combobox/HTML.combobox.element.d.ts

@@ -47,3 +47,4 @@ export declare class HTMLComboboxElement extends HTMLElement {
     static staticLoadCssByUrls(urls: string[]): void;
     static loadCssFromDocumentStyleSheets(): void;
 }
+//# sourceMappingURL=HTML.combobox.element.d.ts.map

package/dist/types/combobox/HTML.combobox.element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HTML.combobox.element.d.ts","sourceRoot":"","sources":["../../../src/combobox/HTML.combobox.element.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAG9E,qBAAa,mBAAoB,SAAQ,WAAW;;IAClD,MAAM,CAAC,gBAAgB,cAAgD;IACvE,MAAM,CAAC,iBAAiB,cAA4F;IACpH,MAAM,CAAC,eAAe;;;;MAA0D;IAChF,MAAM,CAAC,UAAU,kBAAuB;IACxC,MAAM,CAAC,cAAc,UAAQ;IAE7B,SAAS,EAAE,gBAAgB,CAAC;IAC5B,UAAU,EAAE,UAAU,CAAC;;IAkBvB,iBAAiB;IASjB,oBAAoB;IAKpB,iBAAiB;IAQjB,oBAAoB,CAAC,UAAU,EAAE,OAAO;IAMxC,IAAI,YAAY,aAEf;IACD,IAAI,eAAe,0CAElB;IACD,IAAI,QAAQ,kBAEX;IACD,IAAI,YAAY,YAEf;IAGD,IAAI,KAAK,IAGQ,MAAM,CADtB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAgCtB;IAED,IAAI,KAAK,IAGQ,MAAM,CADtB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAMtB;IAED,IAAI,SAAS,YAEZ;IACD,IAAI,SAAS,CAAC,KAAK,SAAA,EAElB;IAED,IAAI,QAAQ,YAEX;IACD,IAAI,QAAQ,CAAC,KAAK,SAAA,EAEjB;IAED,IAAI,UAAU,YAEb;IACD,IAAI,UAAU,CAAC,KAAK,SAAA,EAEnB;IAED,IAAI,UAAU,YAEb;IACD,IAAI,UAAU,CAAC,KAAK,SAAA,EAEnB;IAED,IAAI,QAAQ,YAEX;IACD,IAAI,QAAQ,CAAC,KAAK,SAAA,EAGjB;IAED,IAAI,QAAQ,YAEX;IACD,IAAI,QAAQ,CAAC,KAAK,SAAA,EAGjB;IAED,IAAI,WAAW,WAEd;IACD,IAAI,WAAW,CAAC,KAAK,QAAA,EAMpB;IAID,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG;IAYrC,eAAe,CAAC,IAAI,EAAE,MAAM;IAW5B,cAAc;IAId,aAAa;IAIb,iBAAiB,CAAC,OAAO,EAAE,MAAM;IAgHjC,MAAM,CAAC,mBAAmB,CAAC,IAAI,EAAE,MAAM,EAAE;IAIzC,MAAM,CAAC,8BAA8B;CAoBtC"}

package/dist/types/combobox/HTML.combobox.option.element.d.ts

@@ -12,3 +12,4 @@ export declare class HTMLComboboxOptionElement extends HTMLElement {
     setAttribute(name: string, value: string): void;
     removeAttribute(name: string): void;
 }
+//# sourceMappingURL=HTML.combobox.option.element.d.ts.map

package/dist/types/combobox/HTML.combobox.option.element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HTML.combobox.option.element.d.ts","sourceRoot":"","sources":["../../../src/combobox/HTML.combobox.option.element.ts"],"names":[],"mappings":"AAEA,qBAAa,yBAA0B,SAAQ,WAAW;;IACxD,MAAM,CAAC,iBAAiB,cAAyB;IACjD,MAAM,CAAC,gBAAgB,cAA+B;IAEtD,iBAAiB;IA2CjB,IAAI,KAAK,WAER;IACD,IAAI,KAAK,CAAC,KAAK,QAAA,EAEd;IAED,IAAI,KAAK,WAER;IACD,IAAI,KAAK,CAAC,KAAK,QAAA,EAEd;IAED,IAAI,QAAQ,YAEX;IACD,IAAI,QAAQ,CAAC,KAAK,SAAA,EAEjB;IAcD,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM;IAYxC,eAAe,CAAC,IAAI,EAAE,MAAM;CAU7B"}

package/dist/types/combobox/HTML.combobox.tag.element.d.ts

@@ -1,3 +1,4 @@
 export declare class HTMLComboboxTagElement extends HTMLElement {
     connectedCallback(): void;
 }
+//# sourceMappingURL=HTML.combobox.tag.element.d.ts.map

package/dist/types/combobox/HTML.combobox.tag.element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HTML.combobox.tag.element.d.ts","sourceRoot":"","sources":["../../../src/combobox/HTML.combobox.tag.element.ts"],"names":[],"mappings":"AAAA,qBAAa,sBAAuB,SAAQ,WAAW;IACrD,iBAAiB;CAalB"}

package/dist/types/combobox/index.d.ts

@@ -1 +1,2 @@
 export * from './HTML.combobox.element.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/combobox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/combobox/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC"}

package/dist/types/index.d.ts

@@ -1,2 +1,175 @@
-export * from './HTML.combobox.element.js';
+export * from './combobox/index.js';
+interface HTMLComboboxTagElement extends HTMLElement {
+}
+interface HTMLComboboxOptionElement extends HTMLOptionElement {
+    value: string;
+    label: string;
+}
+interface HTMLComboboxElement extends HTMLSelectElement {
+    /** List of selected options value attribute */
+    valueAsArray: string[];
+    multiple: boolean;
+    /** The value of internal input
+     *
+     * Internal input is visible when either "searchable" or "filterable" attribute is presented */
+    query: string;
+    /** The placeholder of internal input
+     *
+     * Internal input is visible when either "searchable" or "filterable" attribute is presented
+     *
+     * When <combo-box> is empty, this value is also shown as <combo-box> placeholder itself
+     * */
+    placeholder: string;
+    /** When is true, the clear-all-button is shown in the <combo-box> itself,
+     * and the clear-button is shown for each selected tag.
+     *
+     * If multiple attribute is set to "true", this is also enabled.
+     *
+     * If multiple attribute is set to "false", i.e. the <combo-box> is used as a <select>,
+     * then setting this attribute to "true" will make the clear-button of selected tag visible
+     * */
+    clearable: boolean;
+    /** When is true, the internal input is shown.
+     *
+     * When user type something, available options are not filtered by this query.
+     * You have to set an "input" listener to the <combo-box> and filter options by yourself
+     *
+     * Setting both "searchable" and "filterable" make no sense, the "searchable" will have priority
+     * */
+    searchable: boolean;
+    /** When is true, the internal input is shown.
+     *
+     * When user type something, available options are filtered by this query.
+     *
+     * Setting both "filterable" and "searchable" make no sense, the "searchable" will have priority
+     * */
+    filterable: boolean;
+    selectedOptions: HTMLCollectionOf<HTMLComboboxOptionElement>;
+    addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLComboboxElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+    addEventListener<K extends keyof ComboboxEventMap>(type: K, listener: (this: HTMLComboboxElement, ev: ComboboxEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+    addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+    removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLComboboxElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+    removeEventListener<K extends keyof ComboboxEventMap>(type: K, listener: (this: HTMLComboboxElement, ev: ComboboxEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+    removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}
+interface ComboboxEvent extends Event {
+    readonly target: HTMLComboboxElement;
+    readonly currentTarget: HTMLComboboxElement;
+}
+interface ComboboxInputEvent extends InputEvent {
+    readonly target: HTMLComboboxElement;
+    readonly currentTarget: HTMLComboboxElement;
+}
+interface ComboboxFocusEvent extends FocusEvent {
+    readonly target: HTMLComboboxElement;
+}
+interface ComboboxEventMap extends HTMLElementEventMap {
+    "change": ComboboxEvent;
+    "blur": ComboboxFocusEvent;
+    "focus": ComboboxFocusEvent;
+    "focusin": ComboboxFocusEvent;
+    "focusout": ComboboxFocusEvent;
+    "input": ComboboxInputEvent;
+    "invalid": ComboboxEvent;
+    "selectionchange": ComboboxEvent;
+    "selectstart": ComboboxEvent;
+}
+interface ComboboxJsxAttributes {
+    /** The value of the internal input.
+     *
+     * The internal input is visible when either the `searchable` or `filterable` attribute is present.
+     *
+     * Setting ""
+     * */
+    query?: string;
+    /** A comma-separated list of descendant `<box-option>` value attributes to be selected by default.
+     *
+     * When the `multiple` attribute is present, only the first option will be selected.
+     *
+     * Alternatively, you can set default selections by adding the `selected` attribute directly to individual `<box-option>` elements. */
+    value?: string;
+    /** This Boolean attribute indicates that multiple options can be selected.
+     *
+     * When present, users can select multiple options. When absent, only one option can be selected at a time (the `<combo-box>` behaves like a `<select>`). */
+    multiple?: boolean;
+    /** The placeholder for the internal input.
+     *
+     * The internal input is visible when either the `searchable` or `filterable` attribute is present.
+     *
+     * When the `<combo-box>` is empty, this value is also shown as the `<combo-box>` placeholder itself. */
+    placeholder?: string;
+    /** When present, the clear-all button is shown in the `<combo-box>` itself, and the clear button is shown for each selected tag.
+     *
+     * This attribute is automatically enabled when the `multiple` attribute is present.
+     *
+     * When the `multiple` attribute is absent (single-select mode), setting `clearable` makes the clear button visible on the selected tag. */
+    clearable?: boolean;
+    /** When present, the internal input is shown.
+     *
+     * As the user types, available options are **not** filtered by the query. You must attach an `input` listener to the `<combo-box>` and filter options manually.
+     *
+     * Setting both `searchable` and `filterable` is not recommended—`searchable` takes precedence. */
+    searchable?: boolean;
+    /** When present, the internal input is shown.
+     *
+     * As the user types, available options are filtered by the query automatically.
+     *
+     * Setting both `filterable` and `searchable` is not recommended—`searchable` takes precedence. */
+    filterable?: boolean;
+    /** A Boolean attribute indicating that at least one option must be selected. */
+    required?: boolean;
+    disabled?: boolean;
+}
+interface ComboboxOptionJsxAttributes {
+    value: string;
+    label?: string;
+    selected?: boolean;
+}
+declare global {
+    namespace React {
+        namespace JSX {
+            interface IntrinsicElements {
+                'combo-box': React.DetailedHTMLProps<Omit<React.HTMLAttributes<HTMLComboboxElement>, 'defaultValue'>, HTMLComboboxElement> & ComboboxJsxAttributes;
+                'box-option': React.DetailedHTMLProps<React.HTMLAttributes<HTMLComboboxOptionElement>, HTMLComboboxOptionElement> & ComboboxOptionJsxAttributes;
+                'box-tag': React.DetailedHTMLProps<React.HTMLAttributes<HTMLComboboxTagElement>, HTMLComboboxTagElement>;
+            }
+        }
+    }
+    namespace preact {
+        namespace JSX {
+            interface IntrinsicElements {
+                'combo-box': preact.HTMLAttributes<HTMLComboboxElement> & ComboboxJsxAttributes;
+                'box-option': preact.HTMLAttributes<HTMLComboboxOptionElement> & ComboboxOptionJsxAttributes;
+                'box-tag': preact.HTMLAttributes<HTMLComboboxTagElement>;
+            }
+        }
+    }
+}
+declare module 'preact' {
+    namespace JSX {
+        interface IntrinsicElements {
+            'combo-box': preact.HTMLAttributes<HTMLComboboxElement> & ComboboxJsxAttributes;
+            'box-option': preact.HTMLAttributes<HTMLComboboxOptionElement> & ComboboxOptionJsxAttributes;
+            'box-tag': preact.HTMLAttributes<HTMLComboboxTagElement>;
+        }
+    }
+}
+declare module 'solid-js' {
+    namespace JSX {
+        interface IntrinsicElements {
+            'combo-box': HTMLAttributes<HTMLComboboxElement> & ComboboxJsxAttributes;
+            'box-option': HTMLAttributes<HTMLComboboxOptionElement> & ComboboxOptionJsxAttributes;
+            'box-tag': HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'combo-box': ComboboxJsxAttributes;
+            'box-option': ComboboxOptionJsxAttributes;
+            'box-tag': HTMLElement;
+        }
+    }
+}
 //# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/combobox/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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"}

package/dist/types/tsconfig.types.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["../../src/index.ts","../../src/combobox/boolean.attribute.value.normalizer.ts","../../src/combobox/combobox.markup.ts","../../src/combobox/html.combobox.element.ts","../../src/combobox/html.combobox.option.element.ts","../../src/combobox/html.combobox.tag.element.ts","../../src/combobox/index.ts"],"version":"5.9.3"}

package/dist/types/types.d.ts

@@ -0,0 +1,198 @@
+interface HTMLComboboxTagElement extends HTMLElement {}
+
+interface HTMLComboboxOptionElement extends HTMLOptionElement {
+  value: string
+  label: string
+}
+
+interface HTMLComboboxElement extends HTMLSelectElement {
+  /** List of selected options value attribute */
+  valueAsArray: string[];
+
+  multiple: boolean;
+
+  /** The value of internal input
+   *
+   * Internal input is visible when either "searchable" or "filterable" attribute is presented */
+  query: string;
+
+  /** The placeholder of internal input
+   *
+   * Internal input is visible when either "searchable" or "filterable" attribute is presented
+   *
+   * When <combo-box> is empty, this value is also shown as <combo-box> placeholder itself
+   * */
+  placeholder: string;
+
+  /** When is true, the clear-all-button is shown in the <combo-box> itself,
+   * and the clear-button is shown for each selected tag.
+   *
+   * If multiple attribute is set to "true", this is also enabled.
+   *
+   * If multiple attribute is set to "false", i.e. the <combo-box> is used as a <select>,
+   * then setting this attribute to "true" will make the clear-button of selected tag visible
+   * */
+  clearable: boolean;
+
+  /** When is true, the internal input is shown.
+   *
+   * When user type something, available options are not filtered by this query.
+   * You have to set an "input" listener to the <combo-box> and filter options by yourself
+   *
+   * Setting both "searchable" and "filterable" make no sense, the "searchable" will have priority
+   * */
+  searchable: boolean;
+
+  /** When is true, the internal input is shown.
+   *
+   * When user type something, available options are filtered by this query.
+   *
+   * Setting both "filterable" and "searchable" make no sense, the "searchable" will have priority
+   * */
+  filterable: boolean;
+
+  selectedOptions: HTMLCollectionOf<HTMLComboboxOptionElement>;
+
+
+  // For standard events - let TypeScript infer correctly
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: HTMLComboboxElement, ev: HTMLElementEventMap[K]) => any,
+    options?: boolean | AddEventListenerOptions
+  ): void;
+
+  // For your custom events
+  addEventListener<K extends keyof ComboboxEventMap>(
+    type: K,
+    listener: (this: HTMLComboboxElement, ev: ComboboxEventMap[K]) => any,
+    options?: boolean | AddEventListenerOptions
+  ): void;
+
+  // Fallback
+  addEventListener(
+    type: string,
+    listener: EventListenerOrEventListenerObject,
+    options?: boolean | AddEventListenerOptions
+  ): void;
+
+  // Similar for removeEventListener
+  removeEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: HTMLComboboxElement, ev: HTMLElementEventMap[K]) => any,
+    options?: boolean | EventListenerOptions
+  ): void;
+
+  removeEventListener<K extends keyof ComboboxEventMap>(
+    type: K,
+    listener: (this: HTMLComboboxElement, ev: ComboboxEventMap[K]) => any,
+    options?: boolean | EventListenerOptions
+  ): void;
+
+  removeEventListener(
+    type: string,
+    listener: EventListenerOrEventListenerObject,
+    options?: boolean | EventListenerOptions
+  ): void;
+}
+
+interface ComboboxEvent extends Event {
+  readonly target: HTMLComboboxElement;
+  readonly currentTarget: HTMLComboboxElement;
+}
+
+interface ComboboxInputEvent extends InputEvent {
+  readonly target: HTMLComboboxElement;
+  readonly currentTarget: HTMLComboboxElement;
+}
+
+interface ComboboxFocusEvent extends FocusEvent {
+  readonly target: HTMLComboboxElement;
+}
+
+interface ComboboxEventMap extends HTMLElementEventMap {
+  "change": ComboboxEvent;
+  "blur": ComboboxFocusEvent;
+  "focus": ComboboxFocusEvent;
+  "focusin": ComboboxFocusEvent;
+  "focusout": ComboboxFocusEvent;
+  "input": ComboboxInputEvent;
+  "invalid": ComboboxEvent;
+  // "select": ComboboxEvent;
+  "selectionchange": ComboboxEvent;
+  "selectstart": ComboboxEvent;
+}
+
+interface HTMLElementTagNameMap {
+  'combo-box': HTMLComboboxElement;
+  'box-option': HTMLComboboxOptionElement;
+  'box-tag': HTMLComboboxTagElement;
+}
+
+interface ComboboxJsxAttributes {
+  /** The value of the internal input.
+   *
+   * The internal input is visible when either the `searchable` or `filterable` attribute is present.
+   *
+   * Setting ""
+   * */
+  query?: string;
+
+  /** A comma-separated list of descendant `<box-option>` value attributes to be selected by default.
+   *
+   * When the `multiple` attribute is present, only the first option will be selected.
+   *
+   * Alternatively, you can set default selections by adding the `selected` attribute directly to individual `<box-option>` elements. */
+  value?: string;
+
+  /** This Boolean attribute indicates that multiple options can be selected.
+   *
+   * When present, users can select multiple options. When absent, only one option can be selected at a time (the `<combo-box>` behaves like a `<select>`). */
+  multiple?: boolean;
+
+  /** The placeholder for the internal input.
+   *
+   * The internal input is visible when either the `searchable` or `filterable` attribute is present.
+   *
+   * When the `<combo-box>` is empty, this value is also shown as the `<combo-box>` placeholder itself. */
+  placeholder?: string;
+
+  /** When present, the clear-all button is shown in the `<combo-box>` itself, and the clear button is shown for each selected tag.
+   *
+   * This attribute is automatically enabled when the `multiple` attribute is present.
+   *
+   * When the `multiple` attribute is absent (single-select mode), setting `clearable` makes the clear button visible on the selected tag. */
+  clearable?: boolean;
+
+  /** When present, the internal input is shown.
+   *
+   * As the user types, available options are **not** filtered by the query. You must attach an `input` listener to the `<combo-box>` and filter options manually.
+   *
+   * Setting both `searchable` and `filterable` is not recommended—`searchable` takes precedence. */
+  searchable?: boolean;
+
+  /** When present, the internal input is shown.
+   *
+   * As the user types, available options are filtered by the query automatically.
+   *
+   * Setting both `filterable` and `searchable` is not recommended—`searchable` takes precedence. */
+  filterable?: boolean;
+
+  /** A Boolean attribute indicating that at least one option must be selected. */
+  required?: boolean;
+
+  disabled?: boolean;
+}
+
+declare namespace React {
+  namespace JSX {
+    interface IntrinsicElements {
+      // @ts-ignore
+      'combo-box': React.DetailedHTMLProps<Omit<React.HTMLAttributes<HTMLComboboxElement>, 'defaultValue'>,
+        HTMLComboboxElement
+      > & ComboboxJsxAttributes;
+
+      'box-option': HTMLComboboxOptionElement;
+      'box-tag': HTMLComboboxTagElement;
+    }
+  }
+}