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

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,12 +22,17 @@ 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');
@@ -49,6 +55,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')) {
@@ -163,15 +170,16 @@ class ComboboxMarkup {
   [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 +203,7 @@ class ComboboxMarkup {
   }
   
   #placeholder {
+    text-align: left;
     overflow: hidden;
   }
 
@@ -215,7 +224,7 @@ class ComboboxMarkup {
     border-radius: inherit;
   }
 
-  [part="tag"] {
+  [part="box-tag"] {
     width: 100%;
     justify-self: start;
     font-size: inherit;
@@ -229,7 +238,7 @@ class ComboboxMarkup {
     gap: 5px;
   }
   
-  :host([multiple]) [part="tag"] {
+  :host([multiple]) [part="box-tag"] {
     background-color: Highlight;
     width: fit-content;
     max-width: 100%;
@@ -291,7 +300,8 @@ class ComboboxMarkup {
   }
   
   :host:has(#tags:empty) [part="clear-all-button"] {
-    /*display: none;*/
+    pointer-events: none;
+    color: darkgrey;
   }
 
 </style>

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

@@ -96,59 +96,63 @@ 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;
+        }
     }
     setAttribute(name, value) {
         if (HTMLComboboxElement.booleanAttributes.has(name)) {

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,12 +19,17 @@ 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');
@@ -46,6 +52,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')) {
@@ -160,15 +167,16 @@ export class ComboboxMarkup {
   [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 +200,7 @@ export class ComboboxMarkup {
   }
   
   #placeholder {
+    text-align: left;
     overflow: hidden;
   }
 
@@ -212,7 +221,7 @@ export class ComboboxMarkup {
     border-radius: inherit;
   }
 
-  [part="tag"] {
+  [part="box-tag"] {
     width: 100%;
     justify-self: start;
     font-size: inherit;
@@ -226,7 +235,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,7 +297,8 @@ export class ComboboxMarkup {
   }
   
   :host:has(#tags:empty) [part="clear-all-button"] {
-    /*display: none;*/
+    pointer-events: none;
+    color: darkgrey;
   }
 
 </style>

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

@@ -93,59 +93,63 @@ export 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', toBoolean(value));
     }
     get multiple() {
         return this.hasAttribute('multiple');
     }
     set multiple(value) {
-        super.toggleAttribute('multiple', value);
+        super.toggleAttribute('multiple', toBoolean(value));
     }
     get filterable() {
         return this.hasAttribute('filterable');
     }
     set filterable(value) {
-        super.toggleAttribute('filterable', value);
+        super.toggleAttribute('filterable', toBoolean(value));
     }
     get searchable() {
         return this.hasAttribute('searchable');
     }
     set searchable(value) {
-        super.toggleAttribute('searchable', value);
+        super.toggleAttribute('searchable', toBoolean(value));
     }
     get disabled() {
         return this.hasAttribute('disabled');
     }
     set disabled(value) {
         this.internals.ariaDisabled = String(value);
-        super.toggleAttribute('disabled', value);
+        super.toggleAttribute('disabled', toBoolean(value));
     }
     get required() {
         return this.hasAttribute('required');
     }
     set required(value) {
         this.internals.ariaRequired = String(value);
-        super.toggleAttribute('required', value);
+        super.toggleAttribute('required', 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;
+        }
     }
     setAttribute(name, value) {
         if (HTMLComboboxElement.booleanAttributes.has(name)) {

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

@@ -8,6 +8,7 @@ export declare class ComboboxMarkup {
     dropdown: HTMLDivElement | null;
     placeholder: HTMLDivElement | null;
     searchInput: HTMLInputElement | null;
+    connected: boolean;
     constructor(shadowRoot: ShadowRoot, internals: ElementInternals);
     connect(): void;
     sort(query: string): void;

package/package.json

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