html-combobox-element 0.0.2-beta.6 → 0.0.2-beta.7

package/README.md

@@ -0,0 +1 @@
+# html-combobox-element

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

@@ -12,40 +12,77 @@ class ComboboxMarkup {
     placeholder = null;
     searchInput = null;
     tagTemplate = null;
-    options;
-    connected = false;
+    #rso;
+    #hostWidth = 0;
+    #hostHeight = 0;
+    #hostTop = 0;
     constructor(shadowRoot, internals) {
         this.#shadowRoot = shadowRoot;
         this.#internals = internals;
-        this.#shadowRoot.host.addEventListener('focus', this.showDropdown);
-        this.#shadowRoot.host.addEventListener('blur', this.hideDropdown);
-        this.#shadowRoot.host.addEventListener('click', this.showDropdown);
-        document.addEventListener('click', this.hideDropdown);
-        document.addEventListener('scroll', this.onPageScroll);
+        window.addEventListener('click', this.onClickOutside);
+        this.#shadowRoot.host.addEventListener('focusin', this.onFocusIn);
+        this.#shadowRoot.host.addEventListener('focusout', this.onFocusOut);
+        // document.addEventListener('scroll', this.#onDimensionsChanges);
+        // document.addEventListener('resize', this.#onDimensionsChanges);
+        this.#rso = new ResizeObserver(this.#onDimensionsChanges);
+        // document.addEventListener('scrollend', this.onConnected);
     }
     connect() {
-        const placeholder = this.#shadowRoot.host.getAttribute('placeholder') || '';
+        const placeholder = this.#shadowRoot.host.getAttribute('placeholder') || `Выбрать`;
         this.tagsContainer = this.#shadowRoot.querySelector('#tags');
+        this.#rso.observe(this.#shadowRoot.host, { box: 'border-box' });
         this.optionsContainer = this.#shadowRoot.querySelector('[part*="options"]');
         this.clearAllButton = this.#shadowRoot.querySelector('[part*="clear-all"]');
+        this.clearAllButton?.addEventListener('focusout', this.onClearAllFocusOut);
         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.searchInput.style.setProperty('--search-input-placeholder-color', this.placeholder.style.color);
         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');
+    disconnect() {
+        this.#shadowRoot.host.removeEventListener('focusin', this.onFocusIn);
+        this.#shadowRoot.host.removeEventListener('focusout', this.onFocusOut);
+        this.clearAllButton?.removeEventListener('focusout', this.onClearAllFocusOut);
+        window.removeEventListener('click', this.onClickOutside);
+        this.#rso.unobserve(this.#shadowRoot.host);
+    }
+    setPlaceholder(value) {
+        if (this.placeholder) {
+            this.placeholder.innerText = value.trim() || `Выбрать`;
+        }
     }
+    setInputValue(value) {
+        if (this.searchInput) {
+            this.searchInput.value = value;
+        }
+    }
+    onClearAllFocusOut = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (event.relatedTarget == null) {
+            const host = this.#shadowRoot.host;
+            if (!host.hasAttribute('searchable') && !host.hasAttribute('filterable')) {
+                this.closeDropdown();
+            }
+        }
+    };
+    onClickOutside = (ev) => {
+        if (this.#internals.ariaExpanded !== 'true')
+            return;
+        if (ev.target === this.#shadowRoot.host)
+            return;
+        this.closeDropdown();
+    };
     #timer = undefined;
     sort(query) {
         clearTimeout(this.#timer);
         this.#timer = setTimeout(() => {
+            // console.log(this.options)
             const regex = new RegExp(query.trim(), 'i');
             this.options.forEach((option) => {
                 if (!regex.test(option.textContent)) {
@@ -56,68 +93,67 @@ class ComboboxMarkup {
                 }
             });
             this.dropdown.scrollTo({ top: 0, behavior: 'smooth' });
-        }, 200);
+        }, 400);
     }
-    disconnect() {
-        this.#shadowRoot.host.removeEventListener('focus', this.showDropdown);
-        this.#shadowRoot.host.removeEventListener('blur', this.hideDropdown);
-        this.#shadowRoot.host.removeEventListener('click', this.showDropdown);
-        document.removeEventListener('click', this.hideDropdown);
-        document.removeEventListener('scroll', this.onPageScroll);
-        this.connected = false;
+    get options() {
+        return this.optionsContainer.querySelectorAll('box-option');
+    }
+    getTagControl(tag) {
+        return tag.querySelector('[part*="clear-tag"]');
     }
-    onPageScroll = () => {
-        if (this.dropdown.matches(':popover-open')) {
-            this.setDropdownPosition(this.#shadowRoot.host.getBoundingClientRect());
+    #onDimensionsChanges = (entries) => {
+        const entry = entries[0];
+        if (entry) {
+            this.#hostWidth = entry.borderBoxSize[0].inlineSize;
+            this.#hostHeight = entry.borderBoxSize[0].blockSize;
         }
+        this.setDropdownPosition();
     };
-    setDropdownPosition(rect) {
+    setDropdownPosition() {
         const dropdown = this.dropdown;
         const vh = window.innerHeight;
-        const sh = rect.height;
-        const sy = rect.top;
-        if (sy < (vh - vh / 3)) {
-            dropdown.style.top = sh + sy + 'px';
-            dropdown.style.bottom = 'unset';
-            dropdown.style.transform = `unset`;
-        }
-        else {
-            dropdown.style.top = sh + sy + 'px';
-            dropdown.style.bottom = 'unset';
-            dropdown.style.transform = `translateY(calc(-1 * calc(100% + ${sh}px)))`;
-        }
-        dropdown.style.left = rect.left + 'px';
-        dropdown.style.width = rect.width + 'px';
-        dropdown.style.maxHeight = '50vh';
+        const sh = this.#hostHeight;
+        const sy = this.#hostTop;
+        // Calculate available space below and above
+        const spaceBelow = vh - (sy + sh);
+        const spaceAbove = sy;
+        // Determine if dropdown should go below or above
+        const shouldGoBelow = spaceBelow >= spaceAbove;
+        // Set dropdown to max 50vh or available space, whichever is smaller
+        const maxHeight = Math.min(50 * vh / 100, shouldGoBelow ? spaceBelow - 10 : spaceAbove - 10);
+        dropdown.style.width = this.#hostWidth + 'px';
+        dropdown.style.maxHeight = `${Math.max(100, maxHeight)}px`;
+    }
+    showDropdown() {
+        this.onFocusIn();
     }
-    showDropdown = () => {
+    onFocusIn = () => {
+        if (this.#internals.ariaExpanded === "true")
+            return;
+        this.#hostTop = this.#shadowRoot.host.getBoundingClientRect().top;
         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 {
+        catch (e) {
             this.#internals.ariaExpanded = "false";
         }
     };
     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 (e) {
             this.#internals.ariaExpanded = "true";
         }
     }
-    hideDropdown = (event) => {
-        if (event.composedPath().includes(this.#shadowRoot.host))
+    onFocusOut = () => {
+        if (this.#internals.ariaExpanded !== "true")
             return;
         this.closeDropdown();
     };
@@ -145,14 +181,17 @@ class ComboboxMarkup {
         }
         else {
             const template = this.tagTemplate;
+            // console.log(this)
             tag = template.cloneNode(true);
             const label = tag.querySelector('[part="tag-label"]');
-            label.textContent = option.textContent;
+            label.textContent = option.label || option.textContent;
             button = tag.querySelector('[part="clear-tag"]');
         }
         button?.setAttribute('value', value);
+        // button.addEventListener('blur', e => e.stopPropagation());
         tag.setAttribute('value', value);
         this.tagsContainer.appendChild(tag);
+        this.clearAllButton?.removeAttribute('disabled');
         return button;
     }
     getTagByValue(value) {
@@ -162,8 +201,7 @@ class ComboboxMarkup {
         return this.optionsContainer.querySelector(`box-option[value="${value}"]`);
     }
     get selectedOptions() {
-        return this.optionsContainer
-            .querySelectorAll('box-option[selected]');
+        return this.optionsContainer.querySelectorAll('box-option[selected]');
     }
     static importCSS(urls) {
         ComboboxMarkup.template = ComboboxMarkup.template.replace(':host {', `
@@ -177,26 +215,47 @@ ${urls.map(url => `@import "${url}";`)}
   :host {
     font-size: inherit;
     font-family: inherit;
+    display: flow-root;
+    position: relative;
+    anchor-name: --position;
+  }
+  
+  
+  
+  #internal {
+    min-block-size: 1lh;
     display: grid;
     grid-template-columns: minmax(0, max-content) 1fr;
     align-items: center;
     gap: 1px;
-    position: relative;
+    border-radius: inherit;
   }
   
-  :host([multiple]) {
+  :host([multiple]) #internal {
     grid-template-columns: minmax(0, max-content) 1fr auto;
   }
 
   #dropdown {
     inset: unset;
     margin: 0;
+    /*position: absolute;*/
     box-sizing: border-box;
     overflow-y: scroll;
     flex-direction: column;
     border-radius: inherit;
     border-color: ButtonFace;
     border-width: inherit;
+    background-color: Canvas;
+    outline: none;
+    
+    top: anchor(bottom);
+    left: anchor(left);
+    position-anchor: --position;
+    position-try: normal flip-block;
+  }
+  
+  #dropdown::-webkit-scrollbar {
+    display: none;
   }
   
   [part="options"] {
@@ -204,8 +263,14 @@ ${urls.map(url => `@import "${url}";`)}
     flex-direction: column;
     justify-content: start;
     gap: 2px;
-    padding-block: .5rem;
+    /*padding: inherit;*/
+    /*padding-block: .5rem;*/
     border-radius: inherit;
+    
+  }
+  
+  :host([filterable]) [part="options"], :host([searchable]) [part="options"] {
+    padding-top: .5rem;
   }
   
   box-option {
@@ -213,8 +278,10 @@ ${urls.map(url => `@import "${url}";`)}
     border-radius: inherit;
     content-visibility: auto;
     cursor: pointer;
-    padding-inline: 2px;
-    padding-block: 1px;
+    padding: inherit;
+    padding-inline: .5lh;
+    /*padding-inline: 2px;*/
+    /*padding-block: 1px;*/
   }
   
   box-option:hover {
@@ -232,24 +299,32 @@ ${urls.map(url => `@import "${url}";`)}
     position: sticky;
     top: 0;
     z-index: 2;
-    border-radius: inherit;
-    border-style: inherit;
-    border-width: inherit;
-    border-color: inherit;
-    padding: inherit;
+    /*border-radius: inherit;*/
+    /*border-style: inherit;*/
+    /*border-width: inherit;*/
+    /*border-color: inherit;*/
+    /*padding: inherit;*/
+    /*padding-inline: .4lh;*/
+    font-size: inherit;
+    outline: inherit;
+    &::placeholder {
+      color: var(--search-input-placeholder-color);
+    }  
   }
   
   :host([searchable]) [part="search-input"],
   :host([filterable]) [part="search-input"] {
-    display: flex;
+    display: flow-root;
   }
   
   #placeholder {
     text-align: left;
     overflow: hidden;
     padding-inline-start: 2px;
-    font-size: smaller;
+    /*font-size: smaller;*/
     color: dimgrey;
+    outline: none;
+    user-select: none;
   }
 
   #tags:not(:empty) + #placeholder {
@@ -260,13 +335,15 @@ ${urls.map(url => `@import "${url}";`)}
     grid-column: 1 / span 2;
     width: 100%;
   }
+  
+ 
 
   #tags {
     display: flex;
     flex-wrap: wrap;
     overflow: hidden;
     gap: 2px;
-    border-radius: inherit;
+    /*border-radius: inherit;*/
   }
 
   box-tag {
@@ -275,13 +352,14 @@ ${urls.map(url => `@import "${url}";`)}
     box-sizing: border-box;
     display: flex;
     align-items: center;
-    border-radius: inherit;
-    padding-inline-start: 0.2lh;
-    padding-inline-end: .2rem;
+    /*border-radius: inherit;*/
+    padding-inline-start: 0.4lh;
+    padding-inline-end: 0.2lh;
     background-color: transparent;
     gap: 5px;
-    font-size: medium;
+    /*font-size: medium;*/
     text-transform: uppercase;
+    border-radius: 1lh;
   }
   
   :host([multiple]) box-tag {
@@ -295,7 +373,7 @@ ${urls.map(url => `@import "${url}";`)}
     text-overflow: ellipsis;
     overflow: hidden;
     user-select: none;
-    font-size: 95%;
+    /*font-size: 95%;*/
     flex-grow: 1;
   }
   
@@ -307,18 +385,24 @@ ${urls.map(url => `@import "${url}";`)}
     border-radius: 100%;
     border: none;
     aspect-ratio: 1;
-    line-height: 0;
+    /*line-height: 0;*/
     padding: 0!important;
     user-select: none;
     background-color: transparent;
   }
   
   [part*="clear-tag"] {
-    inline-size: 1em;
-    block-size: 1em;
-    font-size: 80%;
+    /*inline-size: 1lh;*/
+    block-size: 1lh;
+    font-size: .7lh;
+    text-transform: uppercase;
     display: none;
   }
+  
+  [part*="clear-tag"]:focus-visible, [part*="clear-tag"]:focus {
+    outline-style: solid;
+    outline-width: 1px;
+  }
 
   :host([multiple]) [part*="clear-all"] {
    display: block;
@@ -326,15 +410,23 @@ ${urls.map(url => `@import "${url}";`)}
   
   :host([clearable]) [part*="clear-tag"],
   :host([multiple]) [part*="clear-tag"] {
-    display: block;
+    display: grid;
+    place-content: center;
   }
 
   [part*="clear-all"] {
     font-size: inherit;
-    inline-size: 1.2em;
-    block-size: 1.2em;
+    text-transform: uppercase;
+    /*inline-size: 1lh;*/
+    block-size: 1lh;
+    /*inline-size: 1.2em;*/
+    /*block-size: 1.2em;*/
     display: none;
   }
+  
+  #tags:empty + [part*="clear-all"] {
+    outline: none;
+  }
 
   [part*="clear-all"]:hover, 
   [part*="clear-tag"]:hover {
@@ -348,20 +440,32 @@ ${urls.map(url => `@import "${url}";`)}
   
   :host:has(#tags:empty) [part*="clear-all"] {
     pointer-events: none;
-    color: darkgrey;
+    outline: none;
+  }
+  
+  [part*="not-found"] {
+    visibility: visible;
   }
+  
+  /*:host:has(#dropdown:popover-open) #dropdown {*/
+  /*  border-top-left-radius: 0;*/
+  /*}*/
+ 
 </style>
-<div id="tags"></div>
-<div id="placeholder">&nbsp;</div>
-<button part="clear-all">✕</button>
-<div id="dropdown" popover="manual">
-  <input name="search-input" part="search-input" />
+<div id='internal' part='internal'>
+  <div id="tags" part='tags'></div>
+  <div id="placeholder" part='placeholder' tabindex='0'>Выбрать</div>
+  <button part="clear-all">✕</button>
+</div>
+
+<div id="dropdown" popover="manual" part='dropdown' >
+  <input placeholder='Поиск' name="search-input" part="search-input" inputmode='search' autofocus />
   <div part="options"></div>
 </div>
 <template id='tag-template'>
   <box-tag>
     <span part="tag-label"></span>
-    <button part="clear-tag">✕</button>
+    <div part="clear-tag" role='button' tabindex='0'>✕</div>
   </box-tag>
 </template>
 `;