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

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

@@ -3,7 +3,6 @@ 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;
@@ -48,7 +47,7 @@ class ComboboxMarkup {
         clearTimeout(this.#timer);
         this.#timer = setTimeout(() => {
             const regex = new RegExp(query.trim(), 'i');
-            this.options.forEach(option => {
+            this.options.forEach((option) => {
                 if (!regex.test(option.textContent)) {
                     option.style.display = "none";
                 }
@@ -56,7 +55,7 @@ class ComboboxMarkup {
                     option.style.display = "flex";
                 }
             });
-            this.dropdown.scrollTo(ComboboxMarkup.scrollToTopOptions);
+            this.dropdown.scrollTo({ top: 0, behavior: 'smooth' });
         }, 200);
     }
     disconnect() {
@@ -217,6 +216,8 @@ class ComboboxMarkup {
     border-radius: inherit;
     content-visibility: auto;
     cursor: pointer;
+    padding-inline: 2px;
+    padding-block: 1px;
   }
   
   box-option:hover {

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

@@ -6,8 +6,7 @@ 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 stringAttributes = new Set(['value', 'placeholder', 'query']);
-    static booleanAttributes = new Set(['required', 'disabled', 'clearable', 'multiple', 'filterable', 'searchable']);
+    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;
@@ -106,11 +105,27 @@ class HTMLComboboxElement extends HTMLElement {
     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');
     }
@@ -149,37 +164,22 @@ class HTMLComboboxElement extends HTMLElement {
         this.internals.ariaRequired = String(value);
         super.toggleAttribute('required', (0, Boolean_attribute_value_normalizer_js_1.toBoolean)(value));
     }
-    get placeholder() {
-        return this.getAttribute('placeholder');
-    }
-    set 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 (_a.booleanAttributes.has(name)) {
-            Reflect.set(this, name, (0, Boolean_attribute_value_normalizer_js_1.toBoolean)(value));
-            return;
-        }
-        if (_a.stringAttributes.has(name)) {
+        if (_a.OWN_IDL.has(name)) {
             Reflect.set(this, name, value);
-            return;
         }
-        super.setAttribute(name, value);
+        else {
+            super.setAttribute(name, value);
+        }
     }
     removeAttribute(name) {
-        if (_a.booleanAttributes.has(name)) {
+        if (_a.OWN_IDL.has(name)) {
             Reflect.set(this, name, false);
-            return;
         }
-        if (_a.stringAttributes.has(name)) {
-            return;
+        else {
+            super.removeAttribute(name);
         }
-        super.removeAttribute(name);
     }
     reportValidity() {
         this.internals.reportValidity();
@@ -197,7 +197,7 @@ class HTMLComboboxElement extends HTMLElement {
     }
     // Internal
     #onInput = (event) => {
-        if (this.filterable) {
+        if (!this.searchable && this.filterable) {
             if (event.target && event.target instanceof HTMLInputElement) {
                 this.#markup.sort(event.target.value);
             }
@@ -300,14 +300,8 @@ class HTMLComboboxElement extends HTMLElement {
         }
     }
     #initialAttributesSynchronization() {
-        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 _a.stringAttributes) {
-            if (this.hasAttribute(key)) {
-                Reflect.set(this, key, this.getAttribute(key));
-            }
+        for (const key of _a.OWN_IDL) {
+            Reflect.set(this, key, this.getAttribute(key));
         }
     }
     static staticLoadCssByUrls(urls) {
@@ -336,8 +330,9 @@ 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) {
-            document.activeElement.shadowRoot.activeElement.click();
+        const maybeHost = document.activeElement.shadowRoot.activeElement;
+        if (maybeHost instanceof HTML_combobox_option_element_js_1.HTMLComboboxOptionElement) {
+            maybeHost.click();
         }
     }
 });

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

@@ -1,6 +1,5 @@
 import { HTMLComboboxTagElement } from './HTML.combobox.tag.element.js';
 export class ComboboxMarkup {
-    static scrollToTopOptions = { top: 0, behavior: 'smooth' };
     #shadowRoot;
     #internals;
     tagsContainer = null;
@@ -45,7 +44,7 @@ export class ComboboxMarkup {
         clearTimeout(this.#timer);
         this.#timer = setTimeout(() => {
             const regex = new RegExp(query.trim(), 'i');
-            this.options.forEach(option => {
+            this.options.forEach((option) => {
                 if (!regex.test(option.textContent)) {
                     option.style.display = "none";
                 }
@@ -53,7 +52,7 @@ export class ComboboxMarkup {
                     option.style.display = "flex";
                 }
             });
-            this.dropdown.scrollTo(ComboboxMarkup.scrollToTopOptions);
+            this.dropdown.scrollTo({ top: 0, behavior: 'smooth' });
         }, 200);
     }
     disconnect() {
@@ -214,6 +213,8 @@ export class ComboboxMarkup {
     border-radius: inherit;
     content-visibility: auto;
     cursor: pointer;
+    padding-inline: 2px;
+    padding-block: 1px;
   }
   
   box-option:hover {

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

@@ -2,8 +2,7 @@ import { ComboboxMarkup } from './Combobox.markup.js';
 import { HTMLComboboxOptionElement } from './HTML.combobox.option.element.js';
 import { toBoolean } from './Boolean.attribute.value.normalizer.js';
 export class HTMLComboboxElement extends HTMLElement {
-    static stringAttributes = new Set(['value', 'placeholder', 'query']);
-    static booleanAttributes = new Set(['required', 'disabled', 'clearable', 'multiple', 'filterable', 'searchable']);
+    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;
@@ -102,11 +101,27 @@ export class HTMLComboboxElement extends HTMLElement {
     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');
     }
@@ -145,37 +160,22 @@ export class HTMLComboboxElement extends HTMLElement {
         this.internals.ariaRequired = String(value);
         super.toggleAttribute('required', toBoolean(value));
     }
-    get placeholder() {
-        return this.getAttribute('placeholder');
-    }
-    set placeholder(value) {
-        super.setAttribute('placeholder', value);
-        if (this.#markup.connected) {
-            this.#markup.placeholder.innerText = value;
-            this.#markup.searchInput.placeholder = value;
-        }
-    }
     // Instance methods
     setAttribute(name, value) {
-        if (HTMLComboboxElement.booleanAttributes.has(name)) {
-            Reflect.set(this, name, toBoolean(value));
-            return;
-        }
-        if (HTMLComboboxElement.stringAttributes.has(name)) {
+        if (HTMLComboboxElement.OWN_IDL.has(name)) {
             Reflect.set(this, name, value);
-            return;
         }
-        super.setAttribute(name, value);
+        else {
+            super.setAttribute(name, value);
+        }
     }
     removeAttribute(name) {
-        if (HTMLComboboxElement.booleanAttributes.has(name)) {
+        if (HTMLComboboxElement.OWN_IDL.has(name)) {
             Reflect.set(this, name, false);
-            return;
         }
-        if (HTMLComboboxElement.stringAttributes.has(name)) {
-            return;
+        else {
+            super.removeAttribute(name);
         }
-        super.removeAttribute(name);
     }
     reportValidity() {
         this.internals.reportValidity();
@@ -193,7 +193,7 @@ export class HTMLComboboxElement extends HTMLElement {
     }
     // Internal
     #onInput = (event) => {
-        if (this.filterable) {
+        if (!this.searchable && this.filterable) {
             if (event.target && event.target instanceof HTMLInputElement) {
                 this.#markup.sort(event.target.value);
             }
@@ -296,14 +296,8 @@ export class HTMLComboboxElement extends HTMLElement {
         }
     }
     #initialAttributesSynchronization() {
-        for (const key of HTMLComboboxElement.booleanAttributes) {
-            const value = toBoolean(this.getAttribute(key));
-            Reflect.set(this, key, value);
-        }
-        for (const key of HTMLComboboxElement.stringAttributes) {
-            if (this.hasAttribute(key)) {
-                Reflect.set(this, key, this.getAttribute(key));
-            }
+        for (const key of HTMLComboboxElement.OWN_IDL) {
+            Reflect.set(this, key, this.getAttribute(key));
         }
     }
     static staticLoadCssByUrls(urls) {
@@ -330,8 +324,9 @@ export class HTMLComboboxElement extends HTMLElement {
 }
 document.addEventListener('keypress', (event) => {
     if (document.activeElement instanceof HTMLComboboxElement) {
-        if (document.activeElement.shadowRoot.activeElement instanceof HTMLComboboxOptionElement) {
-            document.activeElement.shadowRoot.activeElement.click();
+        const maybeHost = document.activeElement.shadowRoot.activeElement;
+        if (maybeHost instanceof HTMLComboboxOptionElement) {
+            maybeHost.click();
         }
     }
 });

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

@@ -2,7 +2,6 @@ import { HTMLComboboxTagElement } from './HTML.combobox.tag.element.js';
 import { HTMLComboboxOptionElement } from './HTML.combobox.option.element.js';
 export declare class ComboboxMarkup {
     #private;
-    static scrollToTopOptions: ScrollToOptions;
     tagsContainer: HTMLDivElement | null;
     optionsContainer: HTMLDivElement | null;
     clearAllButton: HTMLButtonElement | null;

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

@@ -1 +1 @@
-{"version":3,"file":"Combobox.markup.d.ts","sourceRoot":"","sources":["../../../src/combobox/Combobox.markup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAE9E,qBAAa,cAAc;;IACzB,MAAM,CAAC,kBAAkB,EAAE,eAAe,CAAkC;IAG5E,aAAa,EAAE,cAAc,GAAG,IAAI,CAAQ;IAC5C,gBAAgB,EAAE,cAAc,GAAG,IAAI,CAAQ;IAC/C,cAAc,EAAE,iBAAiB,GAAG,IAAI,CAAQ;IAChD,QAAQ,EAAE,cAAc,GAAG,IAAI,CAAQ;IACvC,WAAW,EAAE,cAAc,GAAG,IAAI,CAAQ;IAC1C,WAAW,EAAE,gBAAgB,GAAG,IAAI,CAAQ;IAC5C,WAAW,EAAE,sBAAsB,GAAG,IAAI,CAAQ;IAClD,OAAO,EAAE,UAAU,CAAC,yBAAyB,CAAC,GAAG,IAAI,CAAC;IACtD,SAAS,UAAS;gBAEN,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,gBAAgB;IAU/D,OAAO;IAiBP,sBAAsB;IAMtB,IAAI,CAAC,KAAK,EAAE,MAAM;IAelB,UAAU;IASV,YAAY,aAIX;IAED,mBAAmB,CAAC,IAAI,EAAE,OAAO;IAmBjC,YAAY,aAcX;IAED,aAAa;IAYb,YAAY,GAAI,OAAO,KAAK,UAG3B;IAED,kBAAkB,CAAC,MAAM,EAAE,yBAAyB;IA2CpD,aAAa,CAAC,KAAK,EAAE,MAAM;IAI3B,gBAAgB,CAAC,KAAK,EAAE,MAAM;IAI9B,IAAI,eAAe,0CAGlB;IAED,MAAM,KAAK,QAAQ,WAkMlB;CACF"}
+{"version":3,"file":"Combobox.markup.d.ts","sourceRoot":"","sources":["../../../src/combobox/Combobox.markup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAE9E,qBAAa,cAAc;;IAGzB,aAAa,EAAE,cAAc,GAAG,IAAI,CAAQ;IAC5C,gBAAgB,EAAE,cAAc,GAAG,IAAI,CAAQ;IAC/C,cAAc,EAAE,iBAAiB,GAAG,IAAI,CAAQ;IAChD,QAAQ,EAAE,cAAc,GAAG,IAAI,CAAQ;IACvC,WAAW,EAAE,cAAc,GAAG,IAAI,CAAQ;IAC1C,WAAW,EAAE,gBAAgB,GAAG,IAAI,CAAQ;IAC5C,WAAW,EAAE,sBAAsB,GAAG,IAAI,CAAQ;IAClD,OAAO,EAAE,UAAU,CAAC,yBAAyB,CAAC,GAAG,IAAI,CAAC;IACtD,SAAS,UAAS;gBAEN,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,gBAAgB;IAU/D,OAAO;IAiBP,sBAAsB;IAMtB,IAAI,CAAC,KAAK,EAAE,MAAM;IAelB,UAAU;IASV,YAAY,aAIX;IAED,mBAAmB,CAAC,IAAI,EAAE,OAAO;IAmBjC,YAAY,aAcX;IAED,aAAa;IAYb,YAAY,GAAI,OAAO,KAAK,UAG3B;IAED,kBAAkB,CAAC,MAAM,EAAE,yBAAyB;IA2CpD,aAAa,CAAC,KAAK,EAAE,MAAM;IAI3B,gBAAgB,CAAC,KAAK,EAAE,MAAM;IAI9B,IAAI,eAAe,0CAGlB;IAED,MAAM,KAAK,QAAQ,WAoMlB;CACF"}

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

@@ -1,8 +1,7 @@
 import { HTMLComboboxOptionElement } from './HTML.combobox.option.element.js';
 export declare class HTMLComboboxElement extends HTMLElement {
     #private;
-    static stringAttributes: Set<string>;
-    static booleanAttributes: Set<string>;
+    static OWN_IDL: Set<string>;
     static observerOptions: {
         childList: boolean;
         attributes: boolean;
@@ -25,6 +24,8 @@ export declare class HTMLComboboxElement extends HTMLElement {
     set value(value: string);
     get query(): string;
     set query(value: string);
+    get placeholder(): string;
+    set placeholder(value: string);
     get clearable(): boolean;
     set clearable(value: boolean);
     get multiple(): boolean;
@@ -37,8 +38,6 @@ export declare class HTMLComboboxElement extends HTMLElement {
     set disabled(value: boolean);
     get required(): boolean;
     set required(value: boolean);
-    get placeholder(): string;
-    set placeholder(value: string);
     setAttribute(name: string, value: any): void;
     removeAttribute(name: string): void;
     reportValidity(): void;

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kr-elements",
-  "version": "0.0.1-alpha.30",
+  "version": "0.0.1-alpha.32",
   "description": "Custom elements",
   "type": "module",
   "scripts": {