html-combobox-element 0.0.1 → 0.0.2-beta.10

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

@@ -9,40 +9,84 @@ export class ComboboxMarkup {
     placeholder = null;
     searchInput = null;
     tagTemplate = null;
-    options;
-    connected = false;
+    customTag = null;
+    #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);
+        this.#rso = new ResizeObserver(this.#onDimensionsChanges);
     }
     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"]');
-        this.dropdown = this.#shadowRoot.querySelector('#dropdown');
-        this.placeholder = this.#shadowRoot.querySelector('#placeholder');
+        const placeholder = this.#shadowRoot.host.getAttribute('placeholder') || `Выбрать`;
+        this.tagsContainer = this.#shadowRoot.querySelector('#cbtags');
+        this.#rso.observe(this.#shadowRoot.host, { box: 'border-box' });
+        this.optionsContainer = this.#shadowRoot.querySelector('#cboptions');
+        this.clearAllButton = this.#shadowRoot.querySelector('#cbclear');
+        this.clearAllButton?.addEventListener('focusout', this.onClearAllFocusOut);
+        this.dropdown = this.#shadowRoot.querySelector('#cbdropdown');
+        this.placeholder = this.#shadowRoot.querySelector('#cbplaceholder');
         this.placeholder.innerText = placeholder;
-        this.searchInput = this.#shadowRoot.querySelector('[part*="search-input"]');
+        this.searchInput = this.#shadowRoot.querySelector('#cbfilter');
         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');
+    onHostConnected() {
+        const host = this.#shadowRoot.host;
+        const clearable = host.hasAttribute('clearable') || host.hasAttribute('multiple');
+        this.tagTemplate.toggleAttribute('visible', clearable);
+        const userTagTemplate = this.#shadowRoot.host.firstElementChild;
+        if (userTagTemplate instanceof HTMLComboboxTagElement) {
+            this.customTag = userTagTemplate;
+        }
+    }
+    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)) {
@@ -53,78 +97,77 @@ export 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');
     }
-    onPageScroll = () => {
-        if (this.dropdown.matches(':popover-open')) {
-            this.setDropdownPosition(this.#shadowRoot.host.getBoundingClientRect());
+    getTagControl(tag) {
+        return tag.querySelector('[part*="clear-tag"]');
+    }
+    #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 = () => {
+    showDropdown() {
+        this.onFocusIn();
+    }
+    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';
+            // 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.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();
     };
     createAndAppendTag(option) {
         const value = option.value;
-        const userTagTemplate = this.#shadowRoot.host.firstElementChild;
+        const userTagTemplate = this.customTag;
         let tag;
         let button;
         if (userTagTemplate && userTagTemplate instanceof HTMLComboboxTagElement) {
-            tag = userTagTemplate.cloneNode(true);
+            tag = document.importNode(userTagTemplate, true);
             tag.querySelectorAll('slot')
                 .forEach(node => {
                 const relatedNode = option.querySelector(`[slot="${node.name}"]`);
@@ -142,25 +185,29 @@ export 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;
-            button = tag.querySelector('[part="clear-tag"]');
+            // console.log(template)
+            const label = tag.querySelector('.cb-tag-label');
+            label.textContent = option.label || option.textContent;
+            button = tag.querySelector('.cb-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) {
+        // console.log(this.tagsContainer)
         return this.tagsContainer.querySelector(`box-tag[value="${value}"]`);
     }
     getOptionByValue(value) {
         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 {', `
@@ -174,35 +221,65 @@ ${urls.map(url => `@import "${url}";`)}
   :host {
     font-size: inherit;
     font-family: inherit;
+    display: flow-root;
+    position: relative;
+    anchor-name: --position;
+  }
+  
+  #cbwrapper {
+    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]) #cbwrapper {
     grid-template-columns: minmax(0, max-content) 1fr auto;
   }
 
-  #dropdown {
+  #cbdropdown {
+    contain: layout style paint;
     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;
+    display: none;
+    top: anchor(bottom);
+    left: anchor(left);
+    position-anchor: --position;
+    position-try: normal flip-block;
   }
   
-  [part="options"] {
+  #cbdropdown:popover-open {
+    display: flex;
+  }
+  
+  #cbdropdown::-webkit-scrollbar {
+    display: none;
+  }
+  
+  #cboptions {
     display: flex;
     flex-direction: column;
     justify-content: start;
     gap: 2px;
-    padding-block: .5rem;
+    /*padding: inherit;*/
+    /*padding-block: .5rem;*/
     border-radius: inherit;
+    
+  }
+  
+  :host([filterable]) #cboptions, :host([searchable]) #cboptions {
+    padding-top: .5rem;
   }
   
   box-option {
@@ -210,8 +287,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 {
@@ -224,46 +303,56 @@ ${urls.map(url => `@import "${url}";`)}
     pointer-events: none;
   }
   
-  [part="search-input"] { 
+  #cbfilter { 
     display: none;
     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;
+  :host([searchable]) #cbfilter,
+  :host([filterable]) #cbfilter {
+    display: flow-root;
   }
   
-  #placeholder {
+  #cbplaceholder {
     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 {
+  #cbtags:not(:empty) + #cbplaceholder {
     display: none;
   }
 
-  #tags:not(:empty) {
+  #cbtags:not(:empty) {
     grid-column: 1 / span 2;
     width: 100%;
   }
+  
+ 
 
-  #tags {
+  #cbtags {
     display: flex;
     flex-wrap: wrap;
     overflow: hidden;
     gap: 2px;
-    border-radius: inherit;
+    /*border-radius: inherit;*/
   }
 
   box-tag {
@@ -272,13 +361,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 {
@@ -287,81 +377,99 @@ ${urls.map(url => `@import "${url}";`)}
     max-width: 100%;
   }
 
-  box-tag [part*="tag-label"] {
+  .cb-tag-label {
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
     user-select: none;
-    font-size: 95%;
+    /*font-size: 95%;*/
     flex-grow: 1;
   }
   
-  :host([multiple]) box-tag [part*="tag-label"] {
+  :host([multiple]) .cb-tag-label {
     flex-grow: unset;
   }
   
-  [part*="clear-tag"], [part*="clear-all"] {
+  .cb-clear-tag, #cbclear {
     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%;
+  .cb-clear-tag {
+    /*inline-size: 1lh;*/
+    block-size: 1lh;
+    font-size: .7lh;
+    text-transform: uppercase;
     display: none;
   }
+  
+  .cb-clear-tag:focus-visible, .cb-clear-tag:focus {
+    outline-style: solid;
+    outline-width: 1px;
+  }
 
-  :host([multiple]) [part*="clear-tag"],
-  :host([clearable]) [part*="clear-all"] {
-    display: block;
+  :host([multiple]) #cbclear {
+   display: block;
+  }
+  
+  :host([clearable]) #cbclear,
+  :host([multiple]) .cb-clear-tag {
+    display: grid;
+    place-content: center;
   }
 
-  [part*="clear-all"] {
+  #cbclear {
     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;
   }
-  
-  :host([multiple]) [part*="clear-all"] {
-    display: block;
-  }
 
-  [part*="clear-all"]:hover, 
-  [part*="clear-tag"]:hover {
+  #cbclear:hover, .cb-clear-tag:hover {
     color: ActiveText;
     cursor: pointer;
   }
 
-  [part*="clear-all"]:hover {
+  #cbclear:hover {
     background-color: ButtonFace;
   }
   
-  :host:has(#tags:empty) [part*="clear-all"] {
+  #cbtags:empty + #cbclear {
     pointer-events: none;
-    color: darkgrey;
+    outline: none;
   }
-
 </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 part="options"></div>
+<div id='cbwrapper' part='internal'>
+  <div id="cbtags" part='tags'></div>
+  <div id="cbplaceholder" part='placeholder' tabindex='0'>Выбрать</div>
+  <button id="cbclear" part="clear-all">✕</button>
 </div>
+
+<div id="cbdropdown" popover="manual" part='dropdown'>
+  <input id="cbfilter" placeholder='Поиск' name="filter" part="search-input" inputmode='search' autofocus />
+  <div part="options" id='cboptions'></div>
+</div>
+
 <template id='tag-template'>
   <box-tag>
-    <span part="tag-label"></span>
-    <button part="clear-tag">✕</button>
+    <span class="cb-tag-label" part="tag-label"></span>
+    <div class="cb-clear-tag" part="clear-tag" role='button' tabindex='0'>✕</div>
   </box-tag>
 </template>
 `;
+    static markup;
+    static {
+        const template = document.createElement('template');
+        template.innerHTML = ComboboxMarkup.template;
+        ComboboxMarkup.markup = template;
+    }
 }