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

package/dist/cjs/index.js

@@ -1,4 +1,8 @@
 "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);
@@ -14,4 +18,66 @@ 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);
+__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

@@ -1,3 +1,4 @@
+/** Transform invalid (nullish or stringed) values to correct boolean value */
 export function toBoolean(value) {
     if (value == null || value === 'false' || value === false)
         value = false;

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

@@ -1,5 +1,6 @@
 import { HTMLComboboxTagElement } from './HTML.combobox.tag.element.js';
 export class ComboboxMarkup {
+    static scrollToTopOptions = { top: 0, behavior: 'smooth' };
     #shadowRoot;
     #internals;
     tagsContainer = null;
@@ -8,6 +9,8 @@ export class ComboboxMarkup {
     dropdown = null;
     placeholder = null;
     searchInput = null;
+    tagTemplate = null;
+    options;
     connected = false;
     constructor(shadowRoot, internals) {
         this.#shadowRoot = shadowRoot;
@@ -21,30 +24,37 @@ export 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);
@@ -82,42 +92,75 @@ export 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 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}"]`);
@@ -125,15 +168,6 @@ export class ComboboxMarkup {
     getOptionByValue(value) {
         return this.optionsContainer.querySelector(`box-option[value="${value}"]`);
     }
-    get tagTemplate() {
-        let template = this.#shadowRoot.host.firstElementChild;
-        if (!template || !(template instanceof 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]');
@@ -162,24 +196,34 @@ export 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"] { 
@@ -190,6 +234,7 @@ export class ComboboxMarkup {
     border-radius: inherit;
     border-style: inherit;
     border-width: inherit;
+    border-color: inherit;
     padding: inherit;
   }
   
@@ -199,7 +244,11 @@ export class ComboboxMarkup {
   }
   
   #placeholder {
+    text-align: left;
     overflow: hidden;
+    padding-inline-start: 2px;
+    font-size: smaller;
+    color: dimgrey;
   }
 
   #tags:not(:empty) + #placeholder {
@@ -219,10 +268,9 @@ export 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;
@@ -231,15 +279,17 @@ export 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;
@@ -248,11 +298,11 @@ export 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;
@@ -262,39 +312,40 @@ export 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;
   }
@@ -302,7 +353,7 @@ export 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/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(',');
     }
@@ -151,6 +155,7 @@ export class HTMLComboboxElement extends HTMLElement {
             this.#markup.searchInput.placeholder = value;
         }
     }
+    // Instance methods
     setAttribute(name, value) {
         if (HTMLComboboxElement.booleanAttributes.has(name)) {
             Reflect.set(this, name, toBoolean(value));
@@ -186,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) {
@@ -212,6 +218,7 @@ export class HTMLComboboxElement extends HTMLElement {
                 }
             });
         });
+        this.#markup.invalidateOptionsCache();
         this.#setValidityAndFormValue();
     };
     #selectOption(option) {
@@ -222,6 +229,9 @@ export 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;
@@ -243,18 +253,31 @@ export 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'));

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

@@ -7,23 +7,47 @@ 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) {
+            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 +61,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/combobox/HTML.combobox.tag.element.js

@@ -7,9 +7,6 @@ export 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`);
-            }
         }
     }
 }