kr-elements 0.0.1-alpha.3 → 0.0.1-alpha.30

package/dist/cjs/combobox/Boolean.attribute.value.normalizer.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.toBoolean = void 0;
+exports.toBoolean = toBoolean;
+/** Transform invalid (nullish or stringed) values to correct boolean value */
 function toBoolean(value) {
     if (value == null || value === 'false' || value === false)
         value = false;
@@ -8,4 +9,3 @@ function toBoolean(value) {
         value = true;
     return Boolean(value);
 }
-exports.toBoolean = toBoolean;

package/dist/cjs/combobox/Combobox.markup.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ComboboxMarkup = void 0;
 const HTML_combobox_tag_element_js_1 = require("./HTML.combobox.tag.element.js");
 class ComboboxMarkup {
+    static scrollToTopOptions = { top: 0, behavior: 'smooth' };
     #shadowRoot;
     #internals;
     tagsContainer = null;
@@ -11,6 +12,8 @@ class ComboboxMarkup {
     dropdown = null;
     placeholder = null;
     searchInput = null;
+    tagTemplate = null;
+    options;
     connected = false;
     constructor(shadowRoot, internals) {
         this.#shadowRoot = shadowRoot;
@@ -24,30 +27,37 @@ class ComboboxMarkup {
     connect() {
         const placeholder = this.#shadowRoot.host.getAttribute('placeholder') || '';
         this.tagsContainer = this.#shadowRoot.querySelector('#tags');
-        this.optionsContainer = this.#shadowRoot.querySelector('[part="options"]');
-        this.clearAllButton = this.#shadowRoot.querySelector('[part="clear-all-button"]');
+        this.optionsContainer = this.#shadowRoot.querySelector('[part*="options"]');
+        this.clearAllButton = this.#shadowRoot.querySelector('[part*="clear-all-button"]');
         this.dropdown = this.#shadowRoot.querySelector('#dropdown');
         this.placeholder = this.#shadowRoot.querySelector('#placeholder');
         this.placeholder.innerText = placeholder;
-        this.searchInput = this.#shadowRoot.querySelector('[part="search-input"]');
-        this.searchInput.value = this.#shadowRoot.host.getAttribute('value');
+        this.searchInput = this.#shadowRoot.querySelector('[part*="search-input"]');
+        this.searchInput.value = this.#shadowRoot.host.getAttribute('query');
         this.searchInput.placeholder = placeholder;
+        const innerTemplate = this.#shadowRoot.querySelector('#tag-template');
+        const doc = document.importNode(innerTemplate.content, true);
+        this.tagTemplate = doc.querySelector('box-tag');
         this.connected = true;
     }
+    invalidateOptionsCache() {
+        this.options = this.optionsContainer.querySelectorAll('box-option');
+    }
+    #timer = undefined;
     sort(query) {
-        const regex = new RegExp(query, 'i');
-        this.optionsContainer.querySelectorAll('box-option')
-            .forEach(option => {
-            if (query === '') {
-                option.style.display = "initial";
-            }
-            else if (!regex.test(option.label)) {
-                option.style.display = "none";
-            }
-            else {
-                option.style.order = "initial";
-            }
-        });
+        clearTimeout(this.#timer);
+        this.#timer = setTimeout(() => {
+            const regex = new RegExp(query.trim(), 'i');
+            this.options.forEach(option => {
+                if (!regex.test(option.textContent)) {
+                    option.style.display = "none";
+                }
+                else {
+                    option.style.display = "flex";
+                }
+            });
+            this.dropdown.scrollTo(ComboboxMarkup.scrollToTopOptions);
+        }, 200);
     }
     disconnect() {
         this.#shadowRoot.host.removeEventListener('focus', this.showDropdown);
@@ -85,42 +95,75 @@ class ComboboxMarkup {
         try {
             this.setDropdownPosition(this.#shadowRoot.host.getBoundingClientRect());
             this.dropdown.style.display = 'flex';
+            // @ts-ignore
             this.dropdown.showPopover();
             this.#internals.ariaExpanded = "true";
+            if (this.tagsContainer?.children.length === 0) {
+                this.searchInput?.focus();
+            }
+            this.placeholder.innerText = '';
         }
         catch {
             this.#internals.ariaExpanded = "false";
         }
     };
-    hideDropdown = (event) => {
-        if (event.composedPath().includes(this.#shadowRoot.host))
-            return;
+    closeDropdown() {
         try {
+            // @ts-ignore
             this.dropdown.hidePopover();
             this.dropdown.style.display = 'none';
             this.#internals.ariaExpanded = "false";
+            this.placeholder.innerText = this.#shadowRoot.host.getAttribute('placeholder');
         }
-        catch {
+        catch (e) {
             this.#internals.ariaExpanded = "true";
         }
+    }
+    hideDropdown = (event) => {
+        if (event.composedPath().includes(this.#shadowRoot.host))
+            return;
+        this.closeDropdown();
     };
     createAndAppendTag(option) {
-        const template = this.tagTemplate;
-        const tag = template.cloneNode(true);
-        const label = tag.querySelector('[part="tag-label"]');
-        label.textContent = option.label;
-        const clearButton = tag.querySelector('[part="tag-clear-button"]');
-        clearButton.setAttribute('value', option.value);
-        tag.setAttribute('value', option.value);
-        option.querySelectorAll('[part]')
-            .forEach(node => {
-            const relatedPart = tag.querySelector(`[part=${node.getAttribute('part')}]`);
-            if (relatedPart) {
-                tag.replaceChild(node.cloneNode(true), relatedPart);
+        const value = option.value;
+        const userTagTemplate = this.#shadowRoot.host.firstElementChild;
+        let tag;
+        let button;
+        if (userTagTemplate && userTagTemplate instanceof HTML_combobox_tag_element_js_1.HTMLComboboxTagElement) {
+            tag = userTagTemplate.cloneNode(true);
+            tag.querySelectorAll('[part]')
+                .forEach(node => {
+                const tokens = Array.from(node.part.values());
+                for (const token of tokens) {
+                    const relatedPart = option.querySelector(`[part*="${token}"]`);
+                    if (relatedPart) {
+                        const newNode = relatedPart.cloneNode(true);
+                        newNode.part.add(...tokens);
+                        const exportedParts = option.getAttribute('exportparts');
+                        if (exportedParts) {
+                            tag.part.add(exportedParts);
+                        }
+                        tag.replaceChild(newNode, node);
+                        break;
+                    }
+                }
+            });
+            button = tag.querySelector('[part*="tag-clear-button"]');
+            if (!button && this.#shadowRoot.host.hasAttribute('multiple')) {
+                throw new Error(`A button with part "tag-clear-button"`);
             }
-        });
+        }
+        else {
+            const template = this.tagTemplate;
+            tag = template.cloneNode(true);
+            const label = tag.querySelector('[part="tag-label"]');
+            label.textContent = option.label;
+            button = tag.querySelector('[part="tag-clear-button"]');
+        }
+        button.setAttribute('value', value);
+        tag.setAttribute('value', value);
         this.tagsContainer.appendChild(tag);
-        return clearButton;
+        return button;
     }
     getTagByValue(value) {
         return this.tagsContainer.querySelector(`box-tag[value="${value}"]`);
@@ -128,15 +171,6 @@ class ComboboxMarkup {
     getOptionByValue(value) {
         return this.optionsContainer.querySelector(`box-option[value="${value}"]`);
     }
-    get tagTemplate() {
-        let template = this.#shadowRoot.host.firstElementChild;
-        if (!template || !(template instanceof HTML_combobox_tag_element_js_1.HTMLComboboxTagElement)) {
-            const innerTemplate = this.#shadowRoot.querySelector('#tag-template');
-            const doc = document.importNode(innerTemplate.content, true);
-            template = doc.querySelector('box-tag');
-        }
-        return template;
-    }
     get selectedOptions() {
         return this.optionsContainer
             .querySelectorAll('box-option[selected]');
@@ -165,24 +199,34 @@ class ComboboxMarkup {
     overflow-y: scroll;
     flex-direction: column;
     border-radius: inherit;
+    border-color: ButtonFace;
+    border-width: inherit;
   }
   
   [part="options"] {
     display: flex;
     flex-direction: column;
+    justify-content: start;
     gap: 2px;
     padding-block: .5rem;
     border-radius: inherit;
   }
   
-  [part="options"] box-option {
+  box-option {
     display: flex;
     border-radius: inherit;
     content-visibility: auto;
+    cursor: pointer;
+  }
+  
+  box-option:hover {
+    background-color: color-mix(in srgb, Highlight, transparent 70%);
   }
   
-  [part="options"] box-option[selected] {
+  box-option[selected] {
     background-color: Highlight;
+    cursor: not-allowed;
+    pointer-events: none;
   }
   
   [part="search-input"] { 
@@ -193,6 +237,7 @@ class ComboboxMarkup {
     border-radius: inherit;
     border-style: inherit;
     border-width: inherit;
+    border-color: inherit;
     padding: inherit;
   }
   
@@ -202,7 +247,11 @@ class ComboboxMarkup {
   }
   
   #placeholder {
+    text-align: left;
     overflow: hidden;
+    padding-inline-start: 2px;
+    font-size: smaller;
+    color: dimgrey;
   }
 
   #tags:not(:empty) + #placeholder {
@@ -222,10 +271,9 @@ class ComboboxMarkup {
     border-radius: inherit;
   }
 
-  [part="box-tag"] {
+  [part*="box-tag"] {
     width: 100%;
     justify-self: start;
-    font-size: inherit;
     box-sizing: border-box;
     display: flex;
     align-items: center;
@@ -234,15 +282,17 @@ class ComboboxMarkup {
     padding-inline-end: .2rem;
     background-color: transparent;
     gap: 5px;
+    font-size: medium;
+    text-transform: uppercase;
   }
   
-  :host([multiple]) [part="box-tag"] {
+  :host([multiple]) [part*="box-tag"] {
     background-color: Highlight;
     width: fit-content;
     max-width: 100%;
   }
 
-  [part="tag-label"] {
+  [part*="tag-label"] {
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
@@ -251,11 +301,11 @@ class ComboboxMarkup {
     flex-grow: 1;
   }
   
-  :host([multiple]) [part="tag-label"] {
+  :host([multiple]) [part*="tag-label"] {
     flex-grow: unset;
   }
   
-  [part="tag-clear-button"], [part="clear-all-button"] {
+  [part*="tag-clear-button"], [part*="clear-all-button"] {
     border-radius: 100%;
     border: none;
     aspect-ratio: 1;
@@ -265,39 +315,40 @@ class ComboboxMarkup {
     background-color: transparent;
   }
   
-  [part="tag-clear-button"] {
+  [part*="tag-clear-button"] {
     inline-size: 1em;
     block-size: 1em;
     font-size: 80%;
     display: none;
   }
 
-  :host([multiple]) [part="tag-clear-button"],
-  :host([clearable]) [part="tag-clear-button"] {
+  :host([multiple]) [part*="tag-clear-button"],
+  :host([clearable]) [part*="tag-clear-button"] {
     display: block;
   }
 
-  [part="clear-all-button"] {
+  [part*="clear-all-button"] {
     font-size: inherit;
     inline-size: 1.2em;
     block-size: 1.2em;
     display: none;
   }
   
-  :host([multiple]) [part="clear-all-button"] {
+  :host([multiple]) [part*="clear-all-button"] {
     display: block;
   }
 
-  [part="clear-all-button"]:hover, 
-  [part="tag-clear-button"]:hover {
+  [part*="clear-all-button"]:hover, 
+  [part*="tag-clear-button"]:hover {
     color: ActiveText;
+    cursor: pointer;
   }
 
-  [part="clear-all-button"]:hover {
+  [part*="clear-all-button"]:hover {
     background-color: ButtonFace;
   }
   
-  :host:has(#tags:empty) [part="clear-all-button"] {
+  :host:has(#tags:empty) [part*="clear-all-button"] {
     pointer-events: none;
     color: darkgrey;
   }
@@ -305,7 +356,7 @@ class ComboboxMarkup {
 </style>
 
 <div id="tags"></div>
-<div id="placeholder" ></div>
+<div id="placeholder">&nbsp;</div>
 <button part="clear-all-button">✕</button>
 <div id="dropdown" popover="manual">
   <input name="search-input" part="search-input" />

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

@@ -1,4 +1,5 @@
 "use strict";
+var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HTMLComboboxElement = void 0;
 const Combobox_markup_js_1 = require("./Combobox.markup.js");
@@ -22,14 +23,15 @@ class HTMLComboboxElement extends HTMLElement {
         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 = HTMLComboboxElement.styleSheet;
+        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, HTMLComboboxElement.observerOptions);
+        this.#observer.observe(this, _a.observerOptions);
         this.#markup.clearAllButton.addEventListener('click', this.#onClickClearAllButton);
         this.#markup.searchInput.addEventListener('input', this.#onInput);
     }
@@ -47,6 +49,8 @@ class HTMLComboboxElement extends HTMLElement {
     formDisabledCallback(isDisabled) {
         this.disabled = isDisabled;
     }
+    // Instance properties
+    // readonly
     get valueAsArray() {
         return Array.from(this.#values);
     }
@@ -59,6 +63,7 @@ class HTMLComboboxElement extends HTMLElement {
     get willValidate() {
         return this.internals.willValidate;
     }
+    // configurable
     get value() {
         return this.valueAsArray.join(',');
     }
@@ -154,23 +159,24 @@ class HTMLComboboxElement extends HTMLElement {
             this.#markup.searchInput.placeholder = value;
         }
     }
+    // Instance methods
     setAttribute(name, value) {
-        if (HTMLComboboxElement.booleanAttributes.has(name)) {
+        if (_a.booleanAttributes.has(name)) {
             Reflect.set(this, name, (0, Boolean_attribute_value_normalizer_js_1.toBoolean)(value));
             return;
         }
-        if (HTMLComboboxElement.stringAttributes.has(name)) {
+        if (_a.stringAttributes.has(name)) {
             Reflect.set(this, name, value);
             return;
         }
         super.setAttribute(name, value);
     }
     removeAttribute(name) {
-        if (HTMLComboboxElement.booleanAttributes.has(name)) {
+        if (_a.booleanAttributes.has(name)) {
             Reflect.set(this, name, false);
             return;
         }
-        if (HTMLComboboxElement.stringAttributes.has(name)) {
+        if (_a.stringAttributes.has(name)) {
             return;
         }
         super.removeAttribute(name);
@@ -189,6 +195,7 @@ class HTMLComboboxElement extends HTMLElement {
             this.internals.setValidity({ customError: true }, message);
         }
     }
+    // Internal
     #onInput = (event) => {
         if (this.filterable) {
             if (event.target && event.target instanceof HTMLInputElement) {
@@ -215,6 +222,7 @@ class HTMLComboboxElement extends HTMLElement {
                 }
             });
         });
+        this.#markup.invalidateOptionsCache();
         this.#setValidityAndFormValue();
     };
     #selectOption(option) {
@@ -225,6 +233,9 @@ class HTMLComboboxElement extends HTMLElement {
         option.toggleAttribute('selected', true);
         const control = this.#markup.createAndAppendTag(option);
         control.addEventListener('click', this.#onClickTagClearButton);
+        if (!this.multiple) {
+            this.#markup.closeDropdown();
+        }
     }
     #onSelectOption = (event) => {
         let option;
@@ -246,18 +257,31 @@ class HTMLComboboxElement extends HTMLElement {
                 this.#values.clear();
                 this.#markup.tagsContainer.replaceChildren();
             }
+            if (!this.multiple) {
+                event.stopPropagation();
+            }
             this.#selectOption(option);
             this.#setValidityAndFormValue();
             this.dispatchEvent(new Event('change'));
         }
     };
     #onClickTagClearButton = (event) => {
-        if (event.target && event.target instanceof HTMLButtonElement) {
-            const value = event.target.value;
+        let button;
+        if (event.target instanceof HTMLButtonElement) {
+            button = event.target;
+        }
+        else {
+            button = event.composedPath()
+                .find(el => {
+                return el instanceof HTMLElement && el.part.contains('tag-clear-button');
+            });
+        }
+        if (button) {
+            const value = button.value;
             const option = this.#markup.getOptionByValue(value);
             const tag = this.#markup.getTagByValue(value);
             option.removeAttribute('selected');
-            this.#values.delete(event.target.value);
+            this.#values.delete(value);
             tag.remove();
             this.#setValidityAndFormValue();
             this.dispatchEvent(new Event('change'));
@@ -276,11 +300,11 @@ class HTMLComboboxElement extends HTMLElement {
         }
     }
     #initialAttributesSynchronization() {
-        for (const key of HTMLComboboxElement.booleanAttributes) {
+        for (const key of _a.booleanAttributes) {
             const value = (0, Boolean_attribute_value_normalizer_js_1.toBoolean)(this.getAttribute(key));
             Reflect.set(this, key, value);
         }
-        for (const key of HTMLComboboxElement.stringAttributes) {
+        for (const key of _a.stringAttributes) {
             if (this.hasAttribute(key)) {
                 Reflect.set(this, key, this.getAttribute(key));
             }
@@ -290,17 +314,17 @@ class HTMLComboboxElement extends HTMLElement {
     }
     static loadCssFromDocumentStyleSheets() {
         if (document.readyState === 'complete') {
-            HTMLComboboxElement.#loadDocumentStyleSheets();
+            _a.#loadDocumentStyleSheets();
         }
         if (document.readyState === 'loading') {
-            document.addEventListener('DOMContentLoaded', HTMLComboboxElement.#loadDocumentStyleSheets);
+            document.addEventListener('DOMContentLoaded', _a.#loadDocumentStyleSheets);
         }
         if (document.readyState === 'interactive') {
-            queueMicrotask(HTMLComboboxElement.#loadDocumentStyleSheets);
+            queueMicrotask(_a.#loadDocumentStyleSheets);
         }
     }
     static #loadDocumentStyleSheets() {
-        const [innerSheet] = HTMLComboboxElement.styleSheet;
+        const [innerSheet] = _a.styleSheet;
         for (const outerSheet of document.styleSheets) {
             for (const rule of outerSheet.cssRules) {
                 innerSheet.insertRule(rule.cssText, innerSheet.cssRules.length);
@@ -309,6 +333,7 @@ class HTMLComboboxElement extends HTMLElement {
     }
 }
 exports.HTMLComboboxElement = HTMLComboboxElement;
+_a = HTMLComboboxElement;
 document.addEventListener('keypress', (event) => {
     if (document.activeElement instanceof HTMLComboboxElement) {
         if (document.activeElement.shadowRoot.activeElement instanceof HTML_combobox_option_element_js_1.HTMLComboboxOptionElement) {

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

@@ -1,4 +1,5 @@
 "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");
@@ -10,23 +11,47 @@ 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) {
+            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');
@@ -35,61 +60,40 @@ class HTMLComboboxOptionElement extends HTMLElement {
         super.toggleAttribute('selected', (0, Boolean_attribute_value_normalizer_js_1.toBoolean)(value));
     }
     #initialAttributesSynchronization() {
-        for (const key of HTMLComboboxOptionElement.booleanAttributes) {
+        for (const key of _a.booleanAttributes) {
             const value = (0, Boolean_attribute_value_normalizer_js_1.toBoolean)(this.getAttribute(key));
             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');
-                }
+        for (const key of _a.stringAttributes) {
+            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)) {
+        if (_a.booleanAttributes.has(name)) {
             Reflect.set(this, name, (0, Boolean_attribute_value_normalizer_js_1.toBoolean)(value));
             return;
         }
-        if (HTMLComboboxOptionElement.stringAttributes.has(name)) {
+        if (_a.stringAttributes.has(name)) {
             Reflect.set(this, name, value);
             return;
         }
         super.setAttribute(name, value);
     }
     removeAttribute(name) {
-        if (HTMLComboboxOptionElement.stringAttributes.has(name)) {
+        if (_a.stringAttributes.has(name)) {
             Reflect.set(this, name, false);
             return;
         }
-        if (HTMLComboboxOptionElement.stringAttributes.has(name)) {
+        if (_a.stringAttributes.has(name)) {
             return;
         }
         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

@@ -10,9 +10,6 @@ class HTMLComboboxTagElement extends HTMLElement {
                     throw new Error(`A <button> with part="tag-clear-button" is required for <combo-box> with multiple attribute`);
                 }
             }
-            if (!this.querySelector('[part="tag-label"]')) {
-                throw new Error(`Invalid <box-tag-template>, an element with part="tag-label" is required as a descendant`);
-            }
         }
     }
 }