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

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

@@ -11,6 +11,7 @@ class ComboboxMarkup {
     dropdown = null;
     placeholder = null;
     searchInput = null;
+    connected = false;
     constructor(shadowRoot, internals) {
         this.#shadowRoot = shadowRoot;
         this.#internals = internals;
@@ -21,24 +22,32 @@ class ComboboxMarkup {
         document.addEventListener('scroll', this.onPageScroll);
     }
     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.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('query');
+        this.searchInput.placeholder = placeholder;
+        this.connected = true;
     }
     sort(query) {
         const regex = new RegExp(query, 'i');
         this.optionsContainer.querySelectorAll('box-option')
             .forEach(option => {
             if (query === '') {
+                // option.style.order = "unset";
                 option.style.display = "initial";
             }
             else if (!regex.test(option.label)) {
+                // option.style.order = "-1";
                 option.style.display = "none";
             }
             else {
+                // option.style.order = "unset";
                 option.style.order = "initial";
             }
         });
@@ -49,6 +58,7 @@ class ComboboxMarkup {
         this.#shadowRoot.host.removeEventListener('click', this.showDropdown);
         document.removeEventListener('click', this.hideDropdown);
         document.removeEventListener('scroll', this.onPageScroll);
+        this.connected = false;
     }
     onPageScroll = () => {
         if (this.dropdown.matches(':popover-open')) {
@@ -78,6 +88,7 @@ class ComboboxMarkup {
         try {
             this.setDropdownPosition(this.#shadowRoot.host.getBoundingClientRect());
             this.dropdown.style.display = 'flex';
+            // @ts-ignore
             this.dropdown.showPopover();
             this.#internals.ariaExpanded = "true";
         }
@@ -89,6 +100,7 @@ class ComboboxMarkup {
         if (event.composedPath().includes(this.#shadowRoot.host))
             return;
         try {
+            // @ts-ignore
             this.dropdown.hidePopover();
             this.dropdown.style.display = 'none';
             this.#internals.ariaExpanded = "false";
@@ -158,20 +170,23 @@ 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 {
+    display: flex;
     border-radius: inherit;
     content-visibility: auto;
-    border: 1px solid cornflowerblue;
   }
   
   [part="options"] box-option[selected] {
@@ -195,6 +210,7 @@ class ComboboxMarkup {
   }
   
   #placeholder {
+    text-align: left;
     overflow: hidden;
   }
 
@@ -215,7 +231,7 @@ class ComboboxMarkup {
     border-radius: inherit;
   }
 
-  [part="tag"] {
+  [part="box-tag"] {
     width: 100%;
     justify-self: start;
     font-size: inherit;
@@ -229,7 +245,7 @@ class ComboboxMarkup {
     gap: 5px;
   }
   
-  :host([multiple]) [part="tag"] {
+  :host([multiple]) [part="box-tag"] {
     background-color: Highlight;
     width: fit-content;
     max-width: 100%;
@@ -291,13 +307,14 @@ class ComboboxMarkup {
   }
   
   :host:has(#tags:empty) [part="clear-all-button"] {
-    /*display: none;*/
+    pointer-events: none;
+    color: darkgrey;
   }
 
 </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(',');
     }
@@ -96,77 +101,82 @@ 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', (0, Boolean_attribute_value_normalizer_js_1.toBoolean)(value));
     }
     get multiple() {
         return this.hasAttribute('multiple');
     }
     set multiple(value) {
-        super.toggleAttribute('multiple', value);
+        super.toggleAttribute('multiple', (0, Boolean_attribute_value_normalizer_js_1.toBoolean)(value));
     }
     get filterable() {
         return this.hasAttribute('filterable');
     }
     set filterable(value) {
-        super.toggleAttribute('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', value);
+        super.toggleAttribute('searchable', (0, Boolean_attribute_value_normalizer_js_1.toBoolean)(value));
     }
     get disabled() {
         return this.hasAttribute('disabled');
     }
     set disabled(value) {
         this.internals.ariaDisabled = String(value);
-        super.toggleAttribute('disabled', value);
+        super.toggleAttribute('disabled', (0, Boolean_attribute_value_normalizer_js_1.toBoolean)(value));
     }
     get required() {
         return this.hasAttribute('required');
     }
     set required(value) {
         this.internals.ariaRequired = String(value);
-        super.toggleAttribute('required', value);
+        super.toggleAttribute('required', (0, Boolean_attribute_value_normalizer_js_1.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)) {
+        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);
@@ -185,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) {
@@ -272,11 +283,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));
             }
@@ -286,17 +297,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);
@@ -305,6 +316,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,48 @@ 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');
@@ -35,61 +61,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/index.js

@@ -1,4 +1,6 @@
 "use strict";
+/// <reference types="solid-js" />
+/// <reference types="preact" />
 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 +16,4 @@ 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);

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

@@ -8,6 +8,7 @@ export class ComboboxMarkup {
     dropdown = null;
     placeholder = null;
     searchInput = null;
+    connected = false;
     constructor(shadowRoot, internals) {
         this.#shadowRoot = shadowRoot;
         this.#internals = internals;
@@ -18,24 +19,32 @@ export class ComboboxMarkup {
         document.addEventListener('scroll', this.onPageScroll);
     }
     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.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('query');
+        this.searchInput.placeholder = placeholder;
+        this.connected = true;
     }
     sort(query) {
         const regex = new RegExp(query, 'i');
         this.optionsContainer.querySelectorAll('box-option')
             .forEach(option => {
             if (query === '') {
+                // option.style.order = "unset";
                 option.style.display = "initial";
             }
             else if (!regex.test(option.label)) {
+                // option.style.order = "-1";
                 option.style.display = "none";
             }
             else {
+                // option.style.order = "unset";
                 option.style.order = "initial";
             }
         });
@@ -46,6 +55,7 @@ export class ComboboxMarkup {
         this.#shadowRoot.host.removeEventListener('click', this.showDropdown);
         document.removeEventListener('click', this.hideDropdown);
         document.removeEventListener('scroll', this.onPageScroll);
+        this.connected = false;
     }
     onPageScroll = () => {
         if (this.dropdown.matches(':popover-open')) {
@@ -75,6 +85,7 @@ export class ComboboxMarkup {
         try {
             this.setDropdownPosition(this.#shadowRoot.host.getBoundingClientRect());
             this.dropdown.style.display = 'flex';
+            // @ts-ignore
             this.dropdown.showPopover();
             this.#internals.ariaExpanded = "true";
         }
@@ -86,6 +97,7 @@ export class ComboboxMarkup {
         if (event.composedPath().includes(this.#shadowRoot.host))
             return;
         try {
+            // @ts-ignore
             this.dropdown.hidePopover();
             this.dropdown.style.display = 'none';
             this.#internals.ariaExpanded = "false";
@@ -155,20 +167,23 @@ 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 {
+    display: flex;
     border-radius: inherit;
     content-visibility: auto;
-    border: 1px solid cornflowerblue;
   }
   
   [part="options"] box-option[selected] {
@@ -192,6 +207,7 @@ export class ComboboxMarkup {
   }
   
   #placeholder {
+    text-align: left;
     overflow: hidden;
   }
 
@@ -212,7 +228,7 @@ export class ComboboxMarkup {
     border-radius: inherit;
   }
 
-  [part="tag"] {
+  [part="box-tag"] {
     width: 100%;
     justify-self: start;
     font-size: inherit;
@@ -226,7 +242,7 @@ export class ComboboxMarkup {
     gap: 5px;
   }
   
-  :host([multiple]) [part="tag"] {
+  :host([multiple]) [part="box-tag"] {
     background-color: Highlight;
     width: fit-content;
     max-width: 100%;
@@ -288,13 +304,14 @@ export class ComboboxMarkup {
   }
   
   :host:has(#tags:empty) [part="clear-all-button"] {
-    /*display: none;*/
+    pointer-events: none;
+    color: darkgrey;
   }
 
 </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" />