html-combobox-element 0.0.1

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

@@ -0,0 +1,365 @@
+"use strict";
+var _a;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HTMLComboboxElement = void 0;
+const Combobox_markup_js_1 = require("./Combobox.markup.js");
+const HTML_combobox_option_element_js_1 = require("./HTML.combobox.option.element.js");
+const Boolean_attribute_value_normalizer_js_1 = require("./Boolean.attribute.value.normalizer.js");
+class HTMLComboboxElement extends HTMLElement {
+    static OWN_IDL = new Set(['required', 'disabled', 'clearable', 'multiple', 'filterable', 'searchable', 'value', 'placeholder', 'query']);
+    static observerOptions = { childList: true, attributes: false, subtree: false };
+    static styleSheet = [new CSSStyleSheet];
+    static formAssociated = true;
+    shadowRoot;
+    #internals;
+    #observer;
+    #markup;
+    #values = new Set;
+    constructor() {
+        super();
+        this.#internals = this.attachInternals();
+        this.#internals.role = "combobox";
+        this.#internals.ariaHasPopup = "dialog";
+        this.shadowRoot = this.attachShadow({ mode: 'closed', delegatesFocus: true });
+        this.#markup = new Combobox_markup_js_1.ComboboxMarkup(this.shadowRoot, this.#internals);
+        this.shadowRoot.innerHTML = Combobox_markup_js_1.ComboboxMarkup.template;
+        this.shadowRoot.adoptedStyleSheets = _a.styleSheet;
+        this.#observer = new MutationObserver(this.#onOptionsChanges);
+    }
+    // Lifecycle callbacks
+    connectedCallback() {
+        this.#markup.connect();
+        this.#initialAttributesSynchronization();
+        this.#onOptionsChanges([{ addedNodes: Array.from(this.children) }]);
+        this.#observer.observe(this, _a.observerOptions);
+        this.#markup.clearAllButton.addEventListener('click', this.#onClear);
+        this.#markup.searchInput.addEventListener('input', this.#onInput);
+    }
+    disconnectedCallback() {
+        this.#observer.disconnect();
+        this.#markup.disconnect();
+        this.#markup.clearAllButton.removeEventListener('click', this.#onClear);
+        this.#markup.searchInput.removeEventListener('input', this.#onInput);
+    }
+    formResetCallback() {
+        this.#values = new Set;
+        this.selectedOptions.forEach(option => option.selected = false);
+        this.#markup.tagsContainer.replaceChildren();
+        this.#setValidityAndFormValue();
+        this.dispatchEvent(new Event('change'));
+    }
+    formDisabledCallback(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    // Instance properties
+    // <combo-box> specific properties
+    get valueAsArray() {
+        return Array.from(this.#values);
+    }
+    get query() {
+        return this.getAttribute('query');
+    }
+    set query(value) {
+        if (value === this.query)
+            return;
+        if (value == null)
+            value = '';
+        value = String(value);
+        super.setAttribute('query', value);
+        if (this.#markup.connected) {
+            this.#markup.searchInput.value = value;
+        }
+    }
+    get placeholder() {
+        return this.getAttribute('placeholder');
+    }
+    set placeholder(value) {
+        if (value == null)
+            value = '';
+        value = String(value);
+        super.setAttribute('placeholder', value);
+        if (this.#markup.connected) {
+            this.#markup.placeholder.innerText = value;
+            this.#markup.searchInput.placeholder = value;
+        }
+    }
+    get clearable() {
+        return this.hasAttribute('clearable');
+    }
+    set clearable(value) {
+        super.toggleAttribute('clearable', (0, Boolean_attribute_value_normalizer_js_1.toBoolean)(value));
+    }
+    get filterable() {
+        return this.hasAttribute('filterable');
+    }
+    set filterable(value) {
+        super.toggleAttribute('filterable', (0, Boolean_attribute_value_normalizer_js_1.toBoolean)(value));
+    }
+    get searchable() {
+        return this.hasAttribute('searchable');
+    }
+    set searchable(value) {
+        super.toggleAttribute('searchable', (0, Boolean_attribute_value_normalizer_js_1.toBoolean)(value));
+    }
+    // <select> specific properties (implements HTMLSelectElement)
+    get disabled() {
+        return this.hasAttribute('disabled');
+    }
+    set disabled(value) {
+        this.#internals.ariaDisabled = String(value);
+        super.toggleAttribute('disabled', (0, Boolean_attribute_value_normalizer_js_1.toBoolean)(value));
+    }
+    get form() {
+        return this.#internals.form;
+    }
+    get labels() {
+        return this.#internals.labels;
+    }
+    get length() {
+        return this.#markup.options.length;
+    }
+    get multiple() {
+        return this.hasAttribute('multiple');
+    }
+    set multiple(value) {
+        super.toggleAttribute('multiple', (0, Boolean_attribute_value_normalizer_js_1.toBoolean)(value));
+    }
+    // get options
+    // (there is no constructor of HTMLOptionsCollection, need to implement)
+    get required() {
+        return this.hasAttribute('required');
+    }
+    set required(value) {
+        this.#internals.ariaRequired = String(value);
+        super.toggleAttribute('required', (0, Boolean_attribute_value_normalizer_js_1.toBoolean)(value));
+    }
+    // selected index is part of HTMLOptionsCollection, see option above
+    get selectedOptions() {
+        return this.#markup.selectedOptions;
+    }
+    // get/set size
+    // for the original select, this is the same as rowsCount of textarea
+    // probably, there are no reasons to this one, but it should be implemented for interface compatibility
+    get type() {
+        return this.multiple ? "select-multiple" : "select-one";
+    }
+    get validationMessage() {
+        return this.#internals.validationMessage;
+    }
+    get validity() {
+        return this.#internals.validity;
+    }
+    get willValidate() {
+        return this.#internals.willValidate;
+    }
+    get value() {
+        return this.valueAsArray.join(',');
+    }
+    set value(value) {
+        if (this.value === value || typeof value !== 'string')
+            return;
+        const prevValue = new Set(this.#values);
+        this.#values = new Set;
+        const values = value.split(',').filter(Boolean);
+        Promise.resolve(values)
+            .then(values => {
+            if (values.length) {
+                if (!this.multiple) {
+                    if (this.#values.size === 0) {
+                        values.length = 1;
+                    }
+                    else {
+                        values.length = 0;
+                    }
+                }
+                for (const key of values) {
+                    const option = this.#markup.getOptionByValue(key);
+                    if (option)
+                        this.#selectOption(option);
+                }
+            }
+            for (const key of prevValue) {
+                if (this.#values.has(key))
+                    continue;
+                const option = this.#markup.getOptionByValue(key);
+                const tag = this.#markup.getTagByValue(key);
+                tag?.remove();
+                option?.toggleAttribute('selected', false);
+            }
+        });
+    }
+    // Instance methods
+    // <select> specific methods (implements HTMLSelectElement)
+    // add()
+    checkValidity() {
+        this.#internals.checkValidity();
+    }
+    item(index) {
+        return this.#markup.options.item(index);
+    }
+    // namedItem()
+    // !!! Conflicts with node.remove()
+    // remove(index: number)
+    reportValidity() {
+        this.#internals.reportValidity();
+    }
+    setCustomValidity(message) {
+        if (message === '') {
+            this.#internals.setValidity({});
+        }
+        else {
+            this.#internals.setValidity({ customError: true }, message);
+        }
+    }
+    showPicker() {
+        this.#markup.showDropdown();
+    }
+    // Overwritten methods
+    setAttribute(name, value) {
+        if (_a.OWN_IDL.has(name)) {
+            Reflect.set(this, name, value);
+        }
+        else {
+            super.setAttribute(name, value);
+        }
+    }
+    removeAttribute(name) {
+        if (_a.OWN_IDL.has(name)) {
+            Reflect.set(this, name, false);
+        }
+        else {
+            super.removeAttribute(name);
+        }
+    }
+    // Internal
+    #onInput = (event) => {
+        if (!this.searchable && this.filterable) {
+            if (event.target && event.target instanceof HTMLInputElement) {
+                this.#markup.sort(event.target.value);
+            }
+        }
+    };
+    #onOptionsChanges = (records) => {
+        records.forEach(record => {
+            record.addedNodes.forEach(node => {
+                if (node instanceof HTML_combobox_option_element_js_1.HTMLComboboxOptionElement) {
+                    node.addEventListener('click', this.#onSelectOption);
+                    if (node.selected) {
+                        if (this.multiple) {
+                            this.#selectOption(node);
+                        }
+                        else if (this.#values.size === 0) {
+                            this.#selectOption(node);
+                        }
+                    }
+                }
+                if (node instanceof HTML_combobox_option_element_js_1.HTMLComboboxOptionElement || node instanceof HTMLOptGroupElement) {
+                    this.#markup.optionsContainer.append(node);
+                }
+            });
+        });
+        this.#markup.invalidateOptionsCache();
+        this.#setValidityAndFormValue();
+    };
+    #selectOption(option) {
+        if (this.#values.has(option.value))
+            return;
+        const value = option.value;
+        this.#values.add(value);
+        option.toggleAttribute('selected', true);
+        const control = this.#markup.createAndAppendTag(option);
+        control?.addEventListener('click', this.#onClearTag);
+        if (!this.multiple) {
+            this.#markup.closeDropdown();
+        }
+    }
+    #onSelectOption = (event) => {
+        const target = event.target;
+        if (target && target instanceof HTMLElement) {
+            const option = target.closest('box-option');
+            if (option) {
+                if (this.#values.has(option.value))
+                    return;
+                if (!this.multiple) {
+                    event.stopPropagation();
+                    this.#values.forEach(value => {
+                        this.#markup.getTagByValue(value)?.remove();
+                        this.#markup.getOptionByValue(value)?.toggleAttribute('selected', false);
+                    });
+                    this.#values.clear();
+                    this.#markup.tagsContainer.replaceChildren();
+                }
+                this.#selectOption(option);
+                this.#setValidityAndFormValue();
+                this.dispatchEvent(new Event('change'));
+            }
+        }
+    };
+    #onClearTag = (event) => {
+        const target = event.target;
+        if (target && target instanceof HTMLElement) {
+            const tag = target.closest('box-tag');
+            if (tag) {
+                const value = tag.getAttribute('value');
+                const option = this.#markup.getOptionByValue(value);
+                option.removeAttribute('selected');
+                this.#values.delete(value);
+                tag.remove();
+                this.#setValidityAndFormValue();
+                this.dispatchEvent(new Event('change'));
+            }
+        }
+    };
+    #onClear = () => {
+        this.formResetCallback();
+    };
+    #setValidityAndFormValue() {
+        this.#internals.setFormValue(this.value);
+        if (this.required && this.value === '') {
+            this.#internals.setValidity({ valueMissing: true });
+        }
+        else {
+            this.#internals.setValidity({});
+        }
+    }
+    #initialAttributesSynchronization() {
+        for (const key of _a.OWN_IDL) {
+            this[key] = this.getAttribute(key);
+        }
+    }
+    static loadCssFromUrls(urls) {
+        Combobox_markup_js_1.ComboboxMarkup.importCSS(urls);
+    }
+    static loadCssFromDocumentStyleSheets() {
+        if (document.readyState === 'complete') {
+            _a.#loadDocumentStyleSheets();
+        }
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', _a.#loadDocumentStyleSheets);
+        }
+        if (document.readyState === 'interactive') {
+            queueMicrotask(_a.#loadDocumentStyleSheets);
+        }
+    }
+    static #loadDocumentStyleSheets() {
+        const [innerSheet] = _a.styleSheet;
+        for (const outerSheet of document.styleSheets) {
+            for (const rule of outerSheet.cssRules) {
+                innerSheet.insertRule(rule.cssText, innerSheet.cssRules.length);
+            }
+        }
+    }
+}
+exports.HTMLComboboxElement = HTMLComboboxElement;
+_a = HTMLComboboxElement;
+document.addEventListener('keypress', (event) => {
+    if (document.activeElement instanceof HTMLComboboxElement) {
+        const maybeHost = document.activeElement.shadowRoot.activeElement;
+        if (maybeHost instanceof HTML_combobox_option_element_js_1.HTMLComboboxOptionElement) {
+            maybeHost.click();
+        }
+    }
+});
+if (!window.customElements.get('combo-box')) {
+    window.customElements.define('combo-box', HTMLComboboxElement);
+}

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

@@ -0,0 +1,65 @@
+"use strict";
+var _a;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HTMLComboboxOptionElement = void 0;
+const Boolean_attribute_value_normalizer_js_1 = require("./Boolean.attribute.value.normalizer.js");
+class HTMLComboboxOptionElement extends HTMLElement {
+    static OWN_IDL = new Set(['value', 'label', 'selected']);
+    connectedCallback() {
+        this.#initialAttributesSynchronization();
+        this.part.add('option');
+        super.setAttribute('tabindex', "0");
+        super.setAttribute('role', "option");
+        if (!this.value) {
+            this.value = this.textContent;
+        }
+    }
+    get value() {
+        return this.getAttribute('value');
+    }
+    set value(value) {
+        if (value == null)
+            return;
+        super.setAttribute('value', String(value));
+    }
+    get label() {
+        return this.getAttribute('label');
+    }
+    set label(value) {
+        if (value == null)
+            return;
+        super.setAttribute('label', String(value));
+    }
+    get selected() {
+        return this.hasAttribute('selected');
+    }
+    set selected(value) {
+        super.toggleAttribute('selected', (0, Boolean_attribute_value_normalizer_js_1.toBoolean)(value));
+    }
+    #initialAttributesSynchronization() {
+        for (const key of _a.OWN_IDL) {
+            this[key] = this.getAttribute(key);
+        }
+    }
+    setAttribute(name, value) {
+        if (_a.OWN_IDL.has(name)) {
+            this[name] = value;
+        }
+        else {
+            super.setAttribute(name, value);
+        }
+    }
+    removeAttribute(name) {
+        if (_a.OWN_IDL.has(name)) {
+            this[name] = null;
+        }
+        else {
+            super.removeAttribute(name);
+        }
+    }
+}
+exports.HTMLComboboxOptionElement = HTMLComboboxOptionElement;
+_a = HTMLComboboxOptionElement;
+if (!window.customElements.get('box-option')) {
+    window.customElements.define('box-option', HTMLComboboxOptionElement);
+}

package/dist/cjs/combobox/HTML.combobox.tag.element.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HTMLComboboxTagElement = void 0;
+class HTMLComboboxTagElement extends HTMLElement {
+    constructor() {
+        super();
+    }
+    connectedCallback() {
+        this.part.add('tag');
+        if (this.parentElement) {
+            if (this.parentElement.hasAttribute('multiple')) {
+                if (!this.querySelector('[part*="clear-tag"]')) {
+                    throw new Error(`A <button> with part="clear-tag" is required for <combo-box> with multiple attribute`);
+                }
+            }
+        }
+    }
+}
+exports.HTMLComboboxTagElement = HTMLComboboxTagElement;
+if (!window.customElements.get('box-tag')) {
+    window.customElements.define('box-tag', HTMLComboboxTagElement);
+}

package/dist/cjs/combobox/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./HTML.combobox.element.js"), exports);

package/dist/cjs/index.js

@@ -0,0 +1,83 @@
+"use strict";
+/// <reference types="solid-js" />
+/// <reference types="preact" />
+/// <reference types="react" />
+/// <reference types="vue" />
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./combobox/index.js"), exports);
+// 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>;
+//     }
+//   }
+// }
+//
+// // Solid
+// 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;
+//     }
+//   }
+// }

package/dist/cjs/tsconfig.cjs.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/esm/combobox/Boolean.attribute.value.normalizer.js

@@ -0,0 +1,8 @@
+/** Transform invalid (nullish or stringed) values to correct boolean value */
+export function toBoolean(value) {
+    if (value == null || value === 'false' || value === false)
+        value = false;
+    if (value === true || value === 'true' || value === '')
+        value = true;
+    return Boolean(value);
+}