treeselectjs 0.2.9 → 0.3.0

package/README.md

@@ -4,22 +4,25 @@ A multi-select js component with nested options.
 
 - Full key support (ArrowUp, ArrowDown, Space, ArrowLeft, ArrowRight, Enter)
 - Screen sensitive direction
+- Typescript support
 
 **Live Demo:** https://dipson88.github.io/treeselectjs/
 
 ![Example img](https://github.com/dipson88/treeselectjs/blob/main/treeselectjs.png?raw=true)
 
 ### Getting Started
-It is a js module.
-
 ```bash
 npm install --save treeselectjs
 ```
-You should import treeselectjs
+Import treeselectjs (ES)
 ```
 import Treeselect from 'treeselectjs'
 ```
-and css file with styles
+Import treeselectjs (CommonJS)
+```
+const Treeselect = require('treeselectjs').default
+```
+Import css file with styles
 ```
 @import 'treeselectjs/dist/treeselect-js.css'
 ```
@@ -74,6 +77,7 @@ const options = [
   }
 ]
 
+// Use slot if you need
 const slot = document.createElement('div')
 slot.innerHTML='<a class="treeselect-demo__slot" href="">Click!</a>'
 
@@ -99,7 +103,7 @@ slot.addEventListener('click', (e) => {
 Name  | Type (default) | Description
 ------------- | ------------- | -------------
 **parentHtmlContainer**  | HTMLElement (required!) | It should be a HTML element (div), it will be changed to the list container.
-**value**  | Array[String] ([]) | An array of `value` from `options` prop. This value will be selected on load of the treeselect. You can call `updateValue` to update prop or set value `treeselect.value` and call `mount`. The `value` changes if you check/uncheck checkboxes or remove tags from the input.
+**value**  | Array[String \| Number] ([]) | An array of `value` from `options` prop. This value will be selected on load of the treeselect. You can call `updateValue` to update prop or set value `treeselect.value` and call `mount`. The `value` changes if you check/uncheck checkboxes or remove tags from the input.
 **options**  | Array[Object] ([]) | It is an array of objects ```{ name: String, value: String, children: [] }```, where children are the same array of objects. Do not use duplicated values.
 **openLevel**  | Number (0) | All groups will be opened to this level.
 **appendToBody**  | Boolean (false) | List will be appended to the body instead of the input container.
@@ -114,16 +118,19 @@ Name  | Type (default) | Description
 **disabled** | Boolean (false) | List will be disabled.
 **emptyText** | String ('No results found...') | A empty list text.
 **staticList** | Boolean (false) | Add the list as a static DOM element. List doesn't overlap content. This prop will be ignored if you use `appendToBody`.
+**id** | String ('') | id attribute for the accessibility.
+**iconElements** | Object({ arrowUp, ... }) | Object contains all svg icons. You can use HTMLElement or a String to reset values from the default Object. Object: ```iconElements: { arrowUp, arrowDown, arrowRight, attention, clear, cross, check, partialCheck }```. After reset of icon you have to update styles if it is necessary, use `alwaysOpen` prop for more comfortable work with styles changes.
+**inputCallback** | (value) => void (undefined) | Callback method for `input` if you don't what use eventListener.
 
 ### Emits
 Name  | Return Type | Description
 ------------- | ------------- | -------------
-**input**  | Array[String] | Returns selected ids without groups, only leafs.
+**input**  | Array[String \| Number] | Returns selected ids without groups, only leafs. Add `eventListener` or use `inputCallback` prop to get value.
 
 ### Methods
 Name  | Params | Description
 ------------- | ------------- | -------------
-**updateValue**  | Array[String] | Update selected values.
+**updateValue**  | Array[String \| Number] | Update selected values.
 **mount**  | None | Helps to remount and update settings. Change settings that you need (treeselect.appendToBody = true), then call mount().
 **destroy**  | None | Deletes elements from the DOM. Call mount() to add treeselect to the DOM with previously saved internal data. If you need to recreate treeselect with default params - call ```new Treeselect(options)```.
 **focus**  | None | Focuses treeselect input without open/close state changes.
@@ -135,4 +142,4 @@ Name  | Params | Description
 3) Use **updateValue()** method to update only the value.
 4) If you need to delete List from the DOM when you don't need treeselect anymore - call **destroy()**.
 5) Do not use **duplicated** values for the options. You will see a error with duplicated values.
-6) **Value** inside the **options** prop should be a **String**.
+6) **Value** prop inside the **options** prop should be a **String** or **Number**.

package/dist/treeselect-js.cjs.js

@@ -0,0 +1 @@
+var e,t,s,i,n;e=module.exports,Object.defineProperty(e,"__esModule",{value:!0,configurable:!0}),t=module.exports,s="default",i=()=>M,Object.defineProperty(t,s,{get:i,set:n,enumerable:!0,configurable:!0});const l={arrowUp:'<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 25 25" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 15l-6-6-6 6"/></svg>',arrowDown:'<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 25 25" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>',arrowRight:'<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 25 25" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg>',attention:'<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 25 25" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>',clear:'<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 25 25" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>',cross:'<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 25 25" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>',check:'<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 25 25" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>',partialCheck:'<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 25 25" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line></svg>'},o=(e,t)=>{if(t.innerHTML="","string"==typeof e)t.innerHTML=e;else{const s=e.cloneNode(!0);t.appendChild(s)}},r=e=>{const t=e?{...e}:{};return Object.keys(l).forEach((e=>{t[e]||(t[e]=l[e])})),t};var c=class{#e;#t;#s;#i;constructor({value:e,showTags:t,tagsCountText:s,clearable:i,isAlwaysOpened:n,searchable:l,placeholder:o,disabled:r,id:c,iconElements:a}){this.value=e,this.showTags=t,this.tagsCountText=s,this.searchable=l,this.placeholder=o,this.clearable=i,this.isAlwaysOpened=n,this.disabled=r,this.id=c,this.iconElements=a,this.isOpened=!1,this.searchText="",this.#e=this.#n(),this.#t=this.#l(),this.#s=this.#o(),this.#i=null,this.srcElement=this.#r(this.#e,this.#t,this.#s),this.#c()}focus(){this.#t.focus()}blur(){this.isOpened&&this.#a()}updateValue(e){this.value=e,this.#d(),this.#h()}removeItem(e){this.value=this.value.filter((t=>t.id!==e)),this.#u(),this.#d(),this.#h()}clear(){this.value=[],this.searchText="",this.#p(""),this.#u(),this.#d(),this.#h()}openClose(){this.#a()}#c(){this.#d(),this.#h(),this.#m()}#d(){this.#e.innerHTML="",this.showTags?this.#e.append(...this.#v()):this.#e.appendChild(this.#E())}#m(){const e=[];this.#s.innerHTML="",this.clearable&&e.push(this.#w()),this.isAlwaysOpened||e.push(this.#L(this.isOpened)),e.length&&this.#s.append(...e)}#g(){if(!this.isAlwaysOpened&&this.#i){const e=this.isOpened?this.iconElements.arrowUp:this.iconElements.arrowDown;o(e,this.#i)}}#h(){this.value?.length?this.#t.removeAttribute("placeholder"):this.#t.setAttribute("placeholder",this.placeholder),this.searchable?this.srcElement.classList.remove("treeselect-input--unsearchable"):this.srcElement.classList.add("treeselect-input--unsearchable"),this.#t.value=this.searchText}#a(){this.isOpened=!this.isOpened,this.#g(),this.isOpened?this.#f():this.#C()}#r(e,t,s){const i=document.createElement("div");return i.classList.add("treeselect-input"),i.setAttribute("tabindex","-1"),i.addEventListener("mousedown",(e=>this.#b(e))),i.append(e,t,s),i}#b(e){e.preventDefault(),this.isOpened||this.#a(),this.focus()}#n(){const e=document.createElement("div");return e.classList.add("treeselect-input__tags"),e}#v(){return this.value.map((e=>{const t=document.createElement("div");t.classList.add("treeselect-input__tags-element"),t.setAttribute("tabindex","-1"),t.setAttribute("tag-id",e.id.toString()),t.setAttribute("title",e.name);const s=this.#y(e.name),i=this.#k();return t.addEventListener("mousedown",(t=>this.#x(t,e.id))),t.append(s,i),t}))}#x(e,t){e.preventDefault(),e.stopPropagation(),this.focus(),this.removeItem(t)}#y(e){const t=document.createElement("span");return t.classList.add("treeselect-input__tags-name"),t.innerHTML=e,t}#k(){const e=document.createElement("span");return e.classList.add("treeselect-input__tags-cross"),o(this.iconElements.cross,e),e}#E(){const e=document.createElement("span");return e.classList.add("treeselect-input__tags-count"),this.value.length?(e.innerHTML=1===this.value.length?this.value[0].name:`${this.value.length} ${this.tagsCountText}`,e):(e.innerHTML="",e)}#l(){const e=document.createElement("input");return e.classList.add("treeselect-input__edit"),e.setAttribute("id",this.id),this.disabled&&e.setAttribute("tabindex","-1"),e.addEventListener("keydown",(e=>this.#_(e))),e.addEventListener("input",(t=>this.#O(t,e))),e}#_(e){"Backspace"!==e.key||this.searchText.length||!this.value.length||this.showTags||this.clear(),"Backspace"===e.key&&!this.searchText.length&&this.value.length&&this.removeItem(this.value[this.value.length-1].id),"Space"!==e.code||this.searchText&&this.searchable||this.#a()}#O(e,t){e.stopPropagation();const s=this.searchText,i=t.value.trim();if(0!==s.length||0!==i.length){if(this.searchable){const t=e.target.value;this.#p(t),this.isOpened||this.#a()}else t.value="";this.searchText=t.value}else t.value=""}#o(){const e=document.createElement("div");return e.classList.add("treeselect-input__operators"),e}#w(){const e=document.createElement("span");return e.classList.add("treeselect-input__clear"),e.setAttribute("tabindex","-1"),o(this.iconElements.clear,e),e.addEventListener("mousedown",(e=>this.#T(e))),e}#T(e){e.preventDefault(),e.stopPropagation(),this.#t?.focus(),(this.searchText.length||this.value.length)&&this.clear()}#L(e){this.#i=document.createElement("span"),this.#i.classList.add("treeselect-input__arrow");const t=e?this.iconElements.arrowUp:this.iconElements.arrowDown;return o(t,this.#i),this.#i.addEventListener("mousedown",(e=>this.#A(e))),this.#i}#A(e){e.stopPropagation(),e.preventDefault(),this.focus(),this.#a()}#u(){this.srcElement.dispatchEvent(new CustomEvent("input",{detail:this.value}))}#p(e){this.srcElement.dispatchEvent(new CustomEvent("search",{detail:e}))}#f(){this.srcElement.dispatchEvent(new CustomEvent("open"))}#C(){this.srcElement.dispatchEvent(new CustomEvent("close"))}};const a=(e,t,s="",i=0)=>e.reduce(((e,n)=>{const l=!!n.children?.length,o=i>=t&&l,r=i>t;if(e.push({id:n.value,name:n.name,childOf:s,isGroup:l,checked:!1,isPartialChecked:!1,level:i,isClosed:o,hidden:r}),l){const s=a(n.children,t,n.value,i+1);e.push(...s)}return e}),[]),d=({id:e,checked:t},s)=>{s.forEach((i=>{i.childOf===e&&(i.checked=t??!0,i.isPartialChecked=!1,i.isGroup&&d(i,s))}))},h=(e,t)=>{const s=t.find((t=>t.id===e)),i=t.filter((e=>e.childOf===s?.id));if(!s)return;const n=i.every((e=>e.checked)),l=i.some((e=>e.isPartialChecked||e.checked))&&!n,o=!n&&!l;n&&(s.checked=!0,s.isPartialChecked=!1),l&&(s.checked=!1,s.isPartialChecked=!0),o&&(s.checked=!1,s.isPartialChecked=!1),s.childOf&&h(s.childOf,t)},u=({id:e,isGroup:t,childOf:s,checked:i},n)=>{t&&d({id:e,checked:i},n),s&&h(s,n)},p=(e,t)=>t.reduce(((s,i)=>(i.childOf===e&&(s.push(i),i.isGroup&&s.push(...p(i.id,t))),s)),[]),m=(e,t)=>t.reduce(((s,i)=>(i.id===e&&(s.push(i),i.childOf&&s.push(...m(i.childOf,t))),s)),[]),v=e=>{const{onlyGroupsIds:t,allItems:s}=e.reduce(((e,t)=>t.checked?(t.isGroup&&e.onlyGroupsIds.push(t.id),e.allItems.push(t),e):e),{onlyGroupsIds:[],allItems:[]});return s.filter((e=>!t.some((t=>t===e.childOf))))},E=(e,{id:t,isClosed:s})=>{e.filter((e=>e.childOf===t)).forEach((t=>{t.hidden=s??!1,t.isGroup&&!t.isClosed&&E(e,{id:t.id,isClosed:s})}))},w=(e,t)=>{const s=((e,t)=>e.reduce(((s,i)=>{if(i.name.toLowerCase().includes(t.toLowerCase())){if(s.push(i),i.isGroup){const t=p(i.id,e);s.push(...t)}if(i.childOf){const t=m(i.childOf,e);s.push(...t)}}return s}),[]))(e,t);e.forEach((t=>{s.some((e=>e.id===t.id))?(t.isGroup&&(t.isClosed=!1,E(e,t)),t.hidden=!1):t.hidden=!0}))},L=(e,t)=>{(e=>{e.forEach((e=>{e.checked=!1,e.isPartialChecked=!1}))})(t);t.filter((t=>e.some((e=>e===t.id)))).forEach((e=>{e.checked=!0,e.isPartialChecked=!1,u(e,t)}))},g=(e,t,s,i)=>{L(e,t),f(t,s,i)},f=(e,t,s)=>{e.forEach((i=>{const n=t.querySelector(`[input-id="${i.id}"]`),l=T(n);n.checked=i.checked,C(i,l),b(i,l),y(i,l,s),k(i,l),_(i,l,e),x(i,n,s)})),O(e,t)},C=(e,t)=>{e.checked?t.classList.add("treeselect-list__item--checked"):t.classList.remove("treeselect-list__item--checked")},b=(e,t)=>{e.isPartialChecked?t.classList.add("treeselect-list__item--partial-checked"):t.classList.remove("treeselect-list__item--partial-checked")},y=(e,t,s)=>{if(e.isGroup){const i=t.querySelector(".treeselect-list__item-icon"),n=e.isClosed?s.arrowRight:s.arrowDown;o(n,i),e.isClosed?t.classList.add("treeselect-list__item--closed"):t.classList.remove("treeselect-list__item--closed")}},k=(e,t)=>{e.hidden?t.classList.add("treeselect-list__item--hidden"):t.classList.remove("treeselect-list__item--hidden")},x=(e,t,s)=>{const i=t.parentNode.querySelector(".treeselect-list__item-checkbox-icon");e.checked?o(s.check,i):e.isPartialChecked?o(s.partialCheck,i):i.innerHTML=""},_=(e,t,s)=>{if(0===e.level){const i=s.some((t=>t.isGroup&&t.level===e.level)),n=!e.isGroup&&i?"20px":"5px";t.style.paddingLeft=e.isGroup?"0":n}else t.style.paddingLeft=e.isGroup?20*e.level+"px":20*e.level+20+"px";t.setAttribute("level",e.level.toString()),t.setAttribute("group",e.isGroup.toString())},O=(e,t)=>{const s=e.some((e=>!e.hidden)),i=t.querySelector(".treeselect-list__empty");s?i.classList.add("treeselect-list__empty--hidden"):i.classList.remove("treeselect-list__empty--hidden")},T=e=>e.parentNode.parentNode,A=(e,t)=>t.find((t=>t.id.toString()===e));var I=class{#I=null;#S=!0;constructor({options:e,value:t,openLevel:s,listSlotHtmlComponent:i,emptyText:n,iconElements:l}){this.options=e,this.value=t,this.openLevel=s??0,this.listSlotHtmlComponent=i??null,this.emptyText=n??"No results found...",this.iconElements=l,this.searchText="",this.flattedOptions=a(this.options,this.openLevel),this.flattedOptionsBeforeSearch=this.flattedOptions,this.selectedNodes={nodes:[],groupedNodes:[]},this.srcElement=this.#M(),this.updateValue(this.value),(e=>{const{duplications:t}=e.reduce(((e,t)=>(e.allItems.some((e=>e.toString()===t.id.toString()))&&e.duplications.push(t.id),e.allItems.push(t.id),e)),{duplications:[],allItems:[]});t.length&&console.error(`Validation: You have duplicated values: ${t.join(", ")}! You should use unique values.`)})(this.flattedOptions)}updateValue(e){g(e,this.flattedOptions,this.srcElement,this.iconElements),this.#H()}updateSearchValue(e){if(e===this.searchText)return;const t=""===this.searchText&&""!==e;this.searchText=e,t&&(this.flattedOptionsBeforeSearch=JSON.parse(JSON.stringify(this.flattedOptions))),""===this.searchText&&(this.flattedOptions=this.flattedOptionsBeforeSearch.map((e=>{const t=this.flattedOptions.find((t=>t.id===e.id));return t.isClosed=e.isClosed,t.hidden=e.hidden,t})),this.flattedOptionsBeforeSearch=[]),this.searchText&&w(this.flattedOptions,e),f(this.flattedOptions,this.srcElement,this.iconElements),this.focusFirstListElement()}callKeyAction(e){this.#S=!1;const t=this.srcElement.querySelector(".treeselect-list__item--focused");"Enter"===e&&t&&t.dispatchEvent(new Event("mousedown")),"ArrowLeft"!==e&&"ArrowRight"!==e||this.#B(t,e),"ArrowDown"!==e&&"ArrowUp"!==e||this.#P(t,e)}focusFirstListElement(){const e="treeselect-list__item--focused",t=this.srcElement.querySelector(`.${e}`),s=Array.from(this.srcElement.querySelectorAll(".treeselect-list__item-checkbox")).filter((e=>"none"!==window.getComputedStyle(T(e)).display));if(!s.length)return;t&&t.classList.remove(e);T(s[0]).classList.add(e)}#B(e,t){if(!e)return;const s=e.querySelector(".treeselect-list__item-checkbox").getAttribute("input-id"),i=A(s,this.flattedOptions),n=e.querySelector(".treeselect-list__item-icon");"ArrowLeft"!==t||i.isClosed||n.dispatchEvent(new Event("mousedown")),"ArrowRight"===t&&i.isClosed&&n.dispatchEvent(new Event("mousedown"))}#P(e,t){const s=Array.from(this.srcElement.querySelectorAll(".treeselect-list__item-checkbox")).filter((e=>"none"!==window.getComputedStyle(T(e)).display));if(s.length)if(e){const e=s.findIndex((e=>T(e).classList.contains("treeselect-list__item--focused")));T(s[e]).classList.remove("treeselect-list__item--focused");const i="ArrowDown"===t?e+1:e-1,n="ArrowDown"===t?0:s.length-1,l=s[i]??s[n],o=!s[i],r=T(l);r.classList.add("treeselect-list__item--focused");const c=this.srcElement.getBoundingClientRect(),a=r.getBoundingClientRect();if(o&&"ArrowDown"===t)return void this.srcElement.scroll(0,0);if(o&&"ArrowUp"===t)return void this.srcElement.scroll(0,this.srcElement.scrollHeight);if(c.y+c.height<a.y+a.height)return void this.srcElement.scroll(0,this.srcElement.scrollTop+a.height);if(c.y>a.y)return void this.srcElement.scroll(0,this.srcElement.scrollTop-a.height)}else{T(s[0]).classList.add("treeselect-list__item--focused")}}#M(){const e=this.#N(),t=this.#G(this.options);e.append(...t);const s=this.#D();s&&e.append(s);const i=this.#z();return e.append(i),e}#N(){const e=document.createElement("div");return e.classList.add("treeselect-list"),e.addEventListener("mouseout",(e=>this.#q(e))),e.addEventListener("mousemove",(()=>this.#R())),e}#q(e){e.stopPropagation(),this.#I&&this.#S&&this.#I.classList.add("treeselect-list__item--focused")}#R(){this.#S=!0}#G(e){return e.reduce(((e,t)=>{if(t.children?.length){const s=this.#F(t),i=this.#G(t.children);return s.append(...i),e.push(s),e}const s=this.#V(t,!1);return e.push(s),e}),[])}#D(){if(!this.listSlotHtmlComponent)return null;const e=document.createElement("div");return e.classList.add("treeselect-list__slot"),e.appendChild(this.listSlotHtmlComponent),e}#z(){const e=document.createElement("div");e.classList.add("treeselect-list__empty"),e.setAttribute("title",this.emptyText);const t=document.createElement("span");t.classList.add("treeselect-list__empty-icon"),o(this.iconElements.attention,t);const s=document.createElement("span");return s.classList.add("treeselect-list__empty-text"),s.innerHTML=this.emptyText,e.append(t,s),e}#F(e){const t=document.createElement("div");t.setAttribute("group-container-id",e.value.toString()),t.classList.add("treeselect-list__group-container");const s=this.#V(e,!0);return t.appendChild(s),t}#V(e,t){const s=this.#j(e);if(t){const e=this.#$();s.appendChild(e)}const i=this.#U(e),n=this.#W(e);return s.append(i,n),s}#j(e){const t=document.createElement("div");return t.setAttribute("tabindex","-1"),t.setAttribute("title",e.name),t.classList.add("treeselect-list__item"),t.addEventListener("mouseover",(()=>this.#K(t)),!0),t.addEventListener("mouseout",(()=>this.#Y(t)),!0),t.addEventListener("mousedown",(t=>this.#J(t,e))),t}#K(e){this.#S&&this.#X(!0,e)}#Y(e){this.#S&&(this.#X(!1,e),this.#I=e)}#J(e,t){e.stopPropagation();const s=e.target.querySelector(".treeselect-list__item-checkbox");s.checked=!s.checked,this.#Q(s,t)}#$(){const e=document.createElement("span");return e.setAttribute("tabindex","-1"),e.classList.add("treeselect-list__item-icon"),o(this.iconElements.arrowDown,e),e.addEventListener("mousedown",(e=>this.#Z(e))),e}#Z(e){e.stopPropagation(),this.#ee(e)}#U(e){const t=document.createElement("div");t.classList.add("treeselect-list__item-checkbox-container");const s=document.createElement("span");s.classList.add("treeselect-list__item-checkbox-icon"),s.innerHTML="";const i=document.createElement("input");return i.setAttribute("tabindex","-1"),i.setAttribute("type","checkbox"),i.setAttribute("input-id",e.value.toString()),i.classList.add("treeselect-list__item-checkbox"),t.append(s,i),t}#W(e){const t=document.createElement("label");return t.innerHTML=e.name,t.classList.add("treeselect-list__item-label"),t}#Q(e,t){const s=this.flattedOptions.find((e=>e.id===t.value));s&&(s.checked=e.checked,s.isPartialChecked=!1,u(s,this.flattedOptions),f(this.flattedOptions,this.srcElement,this.iconElements),this.#u())}#ee(e){const t=e.target?.parentNode?.querySelector("[input-id]"),s=t?.getAttribute("input-id")??null,i=A(s,this.flattedOptions);i&&(i.isClosed=!i.isClosed,E(this.flattedOptions,i),f(this.flattedOptions,this.srcElement,this.iconElements),this.#te())}#X(e,t){const s="treeselect-list__item--focused";if(e){const e=Array.from(this.srcElement.querySelectorAll(`.${s}`));e.length&&e.forEach((e=>e.classList.remove(s))),t.classList.add(s)}else t.classList.remove(s)}#H(){var e;this.selectedNodes={nodes:(e=this.flattedOptions,e.filter((e=>e.checked&&!e.isGroup))),groupedNodes:v(this.flattedOptions)}}#te(){this.srcElement.dispatchEvent(new CustomEvent("arrow-click"))}#u(){this.#H(),this.srcElement.dispatchEvent(new CustomEvent("input",{detail:this.selectedNodes}))}};const S=e=>e.map((e=>e.id));var M=class{#se=null;#ie=null;#ne=null;#le=null;#oe=null;#re=null;#ce=null;constructor({parentHtmlContainer:e,value:t,options:s,openLevel:i,appendToBody:n,alwaysOpen:l,showTags:o,tagsCountText:c,clearable:a,searchable:d,placeholder:h,grouped:u,listSlotHtmlComponent:p,disabled:m,emptyText:v,staticList:E,id:w,iconElements:L,inputCallback:g}){(({parentHtmlContainer:e,staticList:t,appendToBody:s})=>{e||console.error("Validation: parentHtmlContainer prop is required!"),t&&s&&console.error("Validation: You should set staticList to false if you use appendToBody!")})({parentHtmlContainer:e,staticList:E,appendToBody:n}),this.parentHtmlContainer=e,this.value=t??[],this.options=s??[],this.openLevel=i??0,this.appendToBody=n??!0,this.alwaysOpen=!(!l||m),this.showTags=o??!0,this.tagsCountText=c??"elements selected",this.clearable=a??!0,this.searchable=d??!0,this.placeholder=h??"Search...",this.grouped=u??!0,this.listSlotHtmlComponent=p??null,this.disabled=m??!1,this.emptyText=v??"No results found...",this.staticList=!(!E||this.appendToBody),this.id=w??"",this.iconElements=r(L),this.inputCallback=g,this.isListOpened=!1,this.srcElement=null,this.mount()}mount(){this.destroy();const{container:e,list:t,input:s}=this.#ae();this.srcElement=e,this.#se=t,this.#ie=s,this.#le=this.scrollWindowHandler.bind(this),this.#oe=this.scrollWindowHandler.bind(this),this.#re=this.focusWindowHandler.bind(this),this.#ce=this.blurWindowHandler.bind(this),this.alwaysOpen&&this.#ie?.openClose(),this.disabled&&this.srcElement.classList.add("treeselect--disabled")}updateValue(e){const t=this.#se;if(t){t.updateValue(e);const{groupedNodes:s,nodes:i}=t.selectedNodes,n=this.grouped?s:i;this.#ie?.updateValue(n)}}destroy(){this.srcElement&&(this.#de(),this.srcElement.innerHTML="",this.srcElement=null,this.#he(!0))}focus(){this.#ie&&this.#ie.focus()}toggleOpenClose(){this.#ie&&(this.#ie.openClose(),this.#ie.focus())}#ae(){const e=this.parentHtmlContainer;e.classList.add("treeselect");const t=new I({options:this.options,value:this.value,openLevel:this.openLevel,listSlotHtmlComponent:this.listSlotHtmlComponent,emptyText:this.emptyText,iconElements:this.iconElements}),{groupedNodes:s,nodes:i}=t.selectedNodes,n=new c({value:this.grouped?s:i,showTags:this.showTags,tagsCountText:this.tagsCountText,clearable:this.clearable,isAlwaysOpened:this.alwaysOpen,searchable:this.searchable,placeholder:this.placeholder,disabled:this.disabled,id:this.id,iconElements:this.iconElements});return this.appendToBody&&(this.#ne=new ResizeObserver((()=>this.updateListPosition()))),n.srcElement.addEventListener("input",(e=>this.#ue(e,t))),n.srcElement.addEventListener("open",(()=>this.#pe())),n.srcElement.addEventListener("keydown",(e=>this.#me(e,t))),n.srcElement.addEventListener("search",(e=>this.#ve(e,t))),n.srcElement.addEventListener("focus",(()=>this.#Ee()),!0),this.alwaysOpen||n.srcElement.addEventListener("close",(()=>this.#de())),t.srcElement.addEventListener("mouseup",(()=>n.focus()),!0),t.srcElement.addEventListener("input",(e=>this.#we(e,n))),t.srcElement.addEventListener("arrow-click",(()=>this.#Le(n))),e.append(n.srcElement),{container:e,list:t,input:n}}#ue(e,t){const s=S(e.detail);t.updateValue(s);const{nodes:i}=t.selectedNodes;this.value=S(i),this.#u()}#me(e,t){this.isListOpened&&t.callKeyAction(e.key)}#ve(e,t){t.updateSearchValue(e.detail),this.updateListPosition()}#Ee(){this.#ge(!0),this.#re&&this.#re&&this.#ce&&(document.addEventListener("mousedown",this.#re,!0),document.addEventListener("focus",this.#re,!0),window.addEventListener("blur",this.#ce))}#we(e,t){const{groupedNodes:s,nodes:i}=e.detail,n=this.grouped?s:i;t.updateValue(n),this.value=S(i),t.focus(),this.#u()}#Le(e){e.focus(),this.updateListPosition()}#pe(){this.isListOpened=!0,this.#le&&this.#oe&&(window.addEventListener("scroll",this.#le,!0),window.addEventListener("resize",this.#oe)),this.#se&&this.srcElement&&(this.appendToBody?(document.body.appendChild(this.#se.srcElement),this.#ne?.observe(this.srcElement)):this.srcElement.appendChild(this.#se.srcElement),this.updateListPosition(),this.#fe(!0),this.#se.focusFirstListElement())}#de(){if(this.isListOpened=!1,this.#le&&this.#oe&&(window.removeEventListener("scroll",this.#le,!0),window.removeEventListener("resize",this.#oe)),!this.#se||!this.srcElement)return;(this.appendToBody?document.body.contains(this.#se.srcElement):this.srcElement.contains(this.#se.srcElement))&&(this.appendToBody?(document.body.removeChild(this.#se.srcElement),this.#ne?.disconnect()):this.srcElement.removeChild(this.#se.srcElement),this.#fe(!1))}#Ce(e,t){if(!this.#se||!this.#ie)return;const s=t?"treeselect-list--top-to-body":"treeselect-list--top",i=t?"treeselect-list--bottom-to-body":"treeselect-list--bottom";e?(this.#se.srcElement.classList.add(s),this.#se.srcElement.classList.remove(i),this.#ie.srcElement.classList.add("treeselect-input--top"),this.#ie.srcElement.classList.remove("treeselect-input--bottom")):(this.#se.srcElement.classList.remove(s),this.#se.srcElement.classList.add(i),this.#ie.srcElement.classList.remove("treeselect-input--top"),this.#ie.srcElement.classList.add("treeselect-input--bottom"))}#ge(e){this.#ie&&this.#se&&(e?(this.#ie.srcElement.classList.add("treeselect-input--focused"),this.#se.srcElement.classList.add("treeselect-list--focused")):(this.#ie.srcElement.classList.remove("treeselect-input--focused"),this.#se.srcElement.classList.remove("treeselect-list--focused")))}#fe(e){e?this.#ie?.srcElement.classList.add("treeselect-input--opened"):this.#ie?.srcElement.classList.remove("treeselect-input--opened"),this.staticList?this.#se?.srcElement.classList.add("treeselect-list--static"):this.#se?.srcElement.classList.remove("treeselect-list--static")}#he(e){this.#le&&this.#oe&&this.#re&&this.#ce&&(this.alwaysOpen&&!e||(window.removeEventListener("scroll",this.#le,!0),window.removeEventListener("resize",this.#oe)),document.removeEventListener("click",this.#re,!0),document.removeEventListener("focus",this.#re,!0),window.removeEventListener("blur",this.#ce))}scrollWindowHandler(){this.updateListPosition()}focusWindowHandler(e){this.srcElement?.contains(e.target)||this.#se?.srcElement.contains(e.target)||(this.#ie?.blur(),this.#he(!1),this.#ge(!1))}blurWindowHandler(){this.#ie?.blur(),this.#he(!1),this.#ge(!1)}updateListPosition(){const e=this.srcElement,t=this.#se?.srcElement;if(!e||!t)return;t.style.transform="";const{y:s,height:i}=t.getBoundingClientRect(),{x:n,y:l,height:o,width:r}=e.getBoundingClientRect(),c=window.innerHeight-l-o,a=l>c&&l>=i&&c<i;this.appendToBody&&(t.style.transform=a?`translateY(${l-s-i}px)`:`translateY(${l+o-s}px)`,t.style.width=`${r}px`,t.style.left=`${n+window.scrollX}px`);const d=a?"top":"bottom";t.getAttribute("direction")!==d&&(t.setAttribute("direction",d),this.#Ce(a,this.appendToBody))}#u(){this.srcElement?.dispatchEvent(new CustomEvent("input",{detail:this.value})),this.inputCallback&&this.inputCallback(this.value)}};

package/dist/treeselect-js.css

@@ -1,8 +1 @@
-@import './input.css';@import './list.css';.treeselect{width:100%;position:relative;box-sizing:border-box}
-.treeselect--disabled{pointer-events:none}.treeselect-list{position:absolute;left:0;border-radius:4px;box-sizing:border-box;z-index:1000}
-.treeselect .treeselect-list{position:absolute}.treeselect .treeselect-list--static{position:static}
-.treeselect-input--focused{border-color:#101010}.treeselect-input--opened.treeselect-input--top{border-top-color:transparent;border-top-left-radius:0;border-top-right-radius:0}
-.treeselect-input--opened.treeselect-input--bottom{border-bottom-color:transparent;border-bottom-left-radius:0;border-bottom-right-radius:0}
-.treeselect-list--focused{border-color:#101010}.treeselect-list--top,.treeselect-list--top-to-body{border-bottom-color:#d7dde4;border-bottom-left-radius:0;border-bottom-right-radius:0}
-.treeselect-list--bottom,.treeselect-list--bottom-to-body{border-top-color:#d7dde4;border-top-left-radius:0;border-top-right-radius:0}
-.treeselect-list--top{left:0;bottom:100%}.treeselect-list--bottom{left:0;top:100%}
+.treeselect-input{width:100%;box-sizing:border-box;min-height:37px;cursor:text;background-color:#fff;border:1px solid #d7dde4;border-radius:4px;flex-wrap:wrap;align-items:center;padding:2px 40px 2px 4px;display:flex;position:relative}.treeselect-input--unsearchable{cursor:default}.treeselect-input--unsearchable .treeselect-input__edit{caret-color:#0000;cursor:default}.treeselect-input__tags{max-width:100%;box-sizing:border-box;flex-wrap:wrap;align-items:center;gap:4px;display:inline-flex}.treeselect-input__tags-element{cursor:pointer;max-width:100%;box-sizing:border-box;background-color:#d7dde4;border-radius:2px;align-items:center;padding:2px 5px;font-size:14px;display:inline-flex}.treeselect-input__tags-element:hover{background-color:#c5c7cb}.treeselect-input__tags-element:hover .treeselect-input__tags-cross svg{stroke:#eb4c42}.treeselect-input__tags-name{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.treeselect-input__tags-cross{margin-left:2px;display:flex}.treeselect-input__tags-cross svg{width:12px;height:12px}.treeselect-input__tags-count{white-space:nowrap;text-overflow:ellipsis;font-size:14px;overflow:hidden}.treeselect-input__edit{min-width:0;border:none;flex:1;font-size:14px}.treeselect-input__edit:focus{min-width:30px;outline:none}.treeselect-input__operators{max-width:40px;display:flex;position:absolute;right:2px}.treeselect-input__clear{cursor:pointer;display:flex}.treeselect-input__clear svg{stroke:#c5c7cb;width:17px;min-width:17px;height:20px}.treeselect-input__clear:hover svg{stroke:#838790}.treeselect-input__arrow{cursor:pointer;display:flex}.treeselect-input__arrow svg{stroke:#c5c7cb;width:20px;min-width:20px;height:20px}.treeselect-input__arrow:hover svg{stroke:#838790}.treeselect-list{width:100%;box-sizing:border-box;max-height:300px;background-color:#fff;border:1px solid #d7dde4;overflow-y:auto}.treeselect-list__group-container{box-sizing:border-box}.treeselect-list__item{box-sizing:border-box;cursor:pointer;height:30px;align-items:center;display:flex}.treeselect-list__item:focus{outline:none}.treeselect-list__item--focused{background-color:azure!important}.treeselect-list__item--hidden{display:none}.treeselect-list__item-icon{cursor:pointer;height:20px;width:20px;min-width:20px;align-items:center;display:flex}.treeselect-list__item-icon svg{pointer-events:none;width:100%;height:100%;stroke:#c5c7cb}.treeselect-list__item-icon *{pointer-events:none}.treeselect-list__item-icon:hover svg{stroke:#838790}.treeselect-list__item-checkbox-container{width:20px;height:20px;min-width:20px;pointer-events:none;box-sizing:border-box;background-color:#fff;border:1px solid #d7dde4;border-radius:3px;position:relative}.treeselect-list__item-checkbox-container svg{height:100%;width:100%;position:absolute}.treeselect-list__item-checkbox{width:0;height:0;pointer-events:none;z-index:-1;margin:0;position:absolute}.treeselect-list__item-checkbox-icon{height:100%;width:100%;position:absolute;top:0;left:0}.treeselect-list__item-label{width:100%;text-overflow:ellipsis;word-break:keep-all;white-space:nowrap;pointer-events:none;padding-left:5px;font-size:14px;overflow:hidden}.treeselect-list__empty{height:30px;align-items:center;padding-left:4px;display:flex}.treeselect-list__empty--hidden{display:none}.treeselect-list__empty-icon{align-items:center;display:flex}.treeselect-list__empty-text{text-overflow:ellipsis;word-break:keep-all;white-space:nowrap;padding-left:5px;font-size:14px;overflow:hidden}.treeselect-list__slot{box-sizing:border-box;width:100%;max-width:100%;background-color:#fff;position:sticky;bottom:0}.treeselect-list__item .treeselect-list__item-checkbox-container svg{stroke:#0000}.treeselect-list__item--checked .treeselect-list__item-checkbox-container svg,.treeselect-list__item--partial-checked .treeselect-list__item-checkbox-container svg{stroke:#fff}.treeselect-list__item--checked .treeselect-list__item-checkbox-container,.treeselect-list__item--partial-checked .treeselect-list__item-checkbox-container{background-color:#52c67e}.treeselect{width:100%;box-sizing:border-box;position:relative}.treeselect--disabled{pointer-events:none}.treeselect-list{box-sizing:border-box;z-index:1000;border-radius:4px;position:absolute;left:0}.treeselect .treeselect-list{position:absolute}.treeselect .treeselect-list--static{position:static}.treeselect-input--focused{border-color:#101010}.treeselect-input--opened.treeselect-input--top{border-top-color:#0000;border-top-left-radius:0;border-top-right-radius:0}.treeselect-input--opened.treeselect-input--bottom{border-bottom-color:#0000;border-bottom-left-radius:0;border-bottom-right-radius:0}.treeselect-list--focused{border-color:#101010}.treeselect-list--top,.treeselect-list--top-to-body{border-bottom-color:#d7dde4;border-bottom-left-radius:0;border-bottom-right-radius:0}.treeselect-list--bottom,.treeselect-list--bottom-to-body{border-top-color:#d7dde4;border-top-left-radius:0;border-top-right-radius:0}.treeselect-list--top{bottom:100%;left:0}.treeselect-list--bottom{top:100%;left:0}

package/dist/treeselect-js.d.ts

@@ -0,0 +1,100 @@
+type ValueOptionType = string | number;
+type OptionType = {
+    value: ValueOptionType;
+    name: string;
+    children: OptionType[];
+};
+interface ITreeslect {
+    parentHtmlContainer: HTMLElement;
+    value: ValueOptionType[];
+    options: OptionType[];
+    openLevel: number;
+    appendToBody: boolean;
+    alwaysOpen: boolean;
+    showTags: boolean;
+    tagsCountText: string;
+    clearable: boolean;
+    searchable: boolean;
+    placeholder: string;
+    grouped: boolean;
+    listSlotHtmlComponent: HTMLElement | null;
+    disabled: boolean;
+    emptyText: string;
+    staticList: boolean;
+    id: string;
+    iconElements: IconsType;
+    isListOpened: boolean;
+    srcElement: HTMLElement | null;
+    inputCallback: ((value: ValueOptionType[]) => void) | undefined;
+    mount: () => void;
+    updateValue: (newValue: ValueOptionType[]) => void;
+    destroy: () => void;
+    focus: () => void;
+    toggleOpenClose: () => void;
+}
+interface ITreeslectParams {
+    parentHtmlContainer: HTMLElement;
+    value?: ValueOptionType[];
+    options?: OptionType[];
+    openLevel?: number;
+    appendToBody?: boolean;
+    alwaysOpen?: boolean;
+    showTags?: boolean;
+    tagsCountText?: string;
+    clearable?: boolean;
+    searchable?: boolean;
+    placeholder?: string;
+    grouped?: boolean;
+    listSlotHtmlComponent?: HTMLElement | null;
+    disabled?: boolean;
+    emptyText?: string;
+    staticList?: boolean;
+    id?: string;
+    iconElements?: Partial<IconsType>;
+    inputCallback?: (value: ValueOptionType[]) => void;
+}
+type IconsType = {
+    arrowUp: string | HTMLElement;
+    arrowDown: string | HTMLElement;
+    arrowRight: string | HTMLElement;
+    attention: string | HTMLElement;
+    clear: string | HTMLElement;
+    cross: string | HTMLElement;
+    check: string | HTMLElement;
+    partialCheck: string | HTMLElement;
+};
+export default class Treeselect implements ITreeslect {
+    #private;
+    parentHtmlContainer: HTMLElement;
+    value: ValueOptionType[];
+    options: OptionType[];
+    openLevel: number;
+    appendToBody: boolean;
+    alwaysOpen: boolean;
+    showTags: boolean;
+    tagsCountText: string;
+    clearable: boolean;
+    searchable: boolean;
+    placeholder: string;
+    grouped: boolean;
+    listSlotHtmlComponent: HTMLElement | null;
+    disabled: boolean;
+    emptyText: string;
+    staticList: boolean;
+    id: string;
+    iconElements: IconsType;
+    inputCallback: ((value: ValueOptionType[]) => void) | undefined;
+    isListOpened: boolean;
+    srcElement: HTMLElement | null;
+    constructor({ parentHtmlContainer, value, options, openLevel, appendToBody, alwaysOpen, showTags, tagsCountText, clearable, searchable, placeholder, grouped, listSlotHtmlComponent, disabled, emptyText, staticList, id, iconElements, inputCallback }: ITreeslectParams);
+    mount(): void;
+    updateValue(newValue: ValueOptionType[]): void;
+    destroy(): void;
+    focus(): void;
+    toggleOpenClose(): void;
+    scrollWindowHandler(): void;
+    focusWindowHandler(e: Event): void;
+    blurWindowHandler(): void;
+    updateListPosition(): void;
+}
+export default Treeselect;

package/dist/treeselect-js.mjs.js

@@ -0,0 +1 @@
+const e={arrowUp:'<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 25 25" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 15l-6-6-6 6"/></svg>',arrowDown:'<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 25 25" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>',arrowRight:'<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 25 25" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg>',attention:'<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 25 25" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>',clear:'<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 25 25" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>',cross:'<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 25 25" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>',check:'<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 25 25" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>',partialCheck:'<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 25 25" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line></svg>'},t=(e,t)=>{if(t.innerHTML="","string"==typeof e)t.innerHTML=e;else{const s=e.cloneNode(!0);t.appendChild(s)}},s=t=>{const s=t?{...t}:{};return Object.keys(e).forEach((t=>{s[t]||(s[t]=e[t])})),s};var i=class{#e;#t;#s;#i;constructor({value:e,showTags:t,tagsCountText:s,clearable:i,isAlwaysOpened:n,searchable:l,placeholder:o,disabled:r,id:c,iconElements:a}){this.value=e,this.showTags=t,this.tagsCountText=s,this.searchable=l,this.placeholder=o,this.clearable=i,this.isAlwaysOpened=n,this.disabled=r,this.id=c,this.iconElements=a,this.isOpened=!1,this.searchText="",this.#e=this.#n(),this.#t=this.#l(),this.#s=this.#o(),this.#i=null,this.srcElement=this.#r(this.#e,this.#t,this.#s),this.#c()}focus(){this.#t.focus()}blur(){this.isOpened&&this.#a()}updateValue(e){this.value=e,this.#d(),this.#h()}removeItem(e){this.value=this.value.filter((t=>t.id!==e)),this.#u(),this.#d(),this.#h()}clear(){this.value=[],this.searchText="",this.#p(""),this.#u(),this.#d(),this.#h()}openClose(){this.#a()}#c(){this.#d(),this.#h(),this.#m()}#d(){this.#e.innerHTML="",this.showTags?this.#e.append(...this.#v()):this.#e.appendChild(this.#E())}#m(){const e=[];this.#s.innerHTML="",this.clearable&&e.push(this.#w()),this.isAlwaysOpened||e.push(this.#L(this.isOpened)),e.length&&this.#s.append(...e)}#g(){if(!this.isAlwaysOpened&&this.#i){const e=this.isOpened?this.iconElements.arrowUp:this.iconElements.arrowDown;t(e,this.#i)}}#h(){this.value?.length?this.#t.removeAttribute("placeholder"):this.#t.setAttribute("placeholder",this.placeholder),this.searchable?this.srcElement.classList.remove("treeselect-input--unsearchable"):this.srcElement.classList.add("treeselect-input--unsearchable"),this.#t.value=this.searchText}#a(){this.isOpened=!this.isOpened,this.#g(),this.isOpened?this.#f():this.#C()}#r(e,t,s){const i=document.createElement("div");return i.classList.add("treeselect-input"),i.setAttribute("tabindex","-1"),i.addEventListener("mousedown",(e=>this.#y(e))),i.append(e,t,s),i}#y(e){e.preventDefault(),this.isOpened||this.#a(),this.focus()}#n(){const e=document.createElement("div");return e.classList.add("treeselect-input__tags"),e}#v(){return this.value.map((e=>{const t=document.createElement("div");t.classList.add("treeselect-input__tags-element"),t.setAttribute("tabindex","-1"),t.setAttribute("tag-id",e.id.toString()),t.setAttribute("title",e.name);const s=this.#b(e.name),i=this.#k();return t.addEventListener("mousedown",(t=>this.#x(t,e.id))),t.append(s,i),t}))}#x(e,t){e.preventDefault(),e.stopPropagation(),this.focus(),this.removeItem(t)}#b(e){const t=document.createElement("span");return t.classList.add("treeselect-input__tags-name"),t.innerHTML=e,t}#k(){const e=document.createElement("span");return e.classList.add("treeselect-input__tags-cross"),t(this.iconElements.cross,e),e}#E(){const e=document.createElement("span");return e.classList.add("treeselect-input__tags-count"),this.value.length?(e.innerHTML=1===this.value.length?this.value[0].name:`${this.value.length} ${this.tagsCountText}`,e):(e.innerHTML="",e)}#l(){const e=document.createElement("input");return e.classList.add("treeselect-input__edit"),e.setAttribute("id",this.id),this.disabled&&e.setAttribute("tabindex","-1"),e.addEventListener("keydown",(e=>this.#_(e))),e.addEventListener("input",(t=>this.#O(t,e))),e}#_(e){"Backspace"!==e.key||this.searchText.length||!this.value.length||this.showTags||this.clear(),"Backspace"===e.key&&!this.searchText.length&&this.value.length&&this.removeItem(this.value[this.value.length-1].id),"Space"!==e.code||this.searchText&&this.searchable||this.#a()}#O(e,t){e.stopPropagation();const s=this.searchText,i=t.value.trim();if(0!==s.length||0!==i.length){if(this.searchable){const t=e.target.value;this.#p(t),this.isOpened||this.#a()}else t.value="";this.searchText=t.value}else t.value=""}#o(){const e=document.createElement("div");return e.classList.add("treeselect-input__operators"),e}#w(){const e=document.createElement("span");return e.classList.add("treeselect-input__clear"),e.setAttribute("tabindex","-1"),t(this.iconElements.clear,e),e.addEventListener("mousedown",(e=>this.#T(e))),e}#T(e){e.preventDefault(),e.stopPropagation(),this.#t?.focus(),(this.searchText.length||this.value.length)&&this.clear()}#L(e){this.#i=document.createElement("span"),this.#i.classList.add("treeselect-input__arrow");const s=e?this.iconElements.arrowUp:this.iconElements.arrowDown;return t(s,this.#i),this.#i.addEventListener("mousedown",(e=>this.#A(e))),this.#i}#A(e){e.stopPropagation(),e.preventDefault(),this.focus(),this.#a()}#u(){this.srcElement.dispatchEvent(new CustomEvent("input",{detail:this.value}))}#p(e){this.srcElement.dispatchEvent(new CustomEvent("search",{detail:e}))}#f(){this.srcElement.dispatchEvent(new CustomEvent("open"))}#C(){this.srcElement.dispatchEvent(new CustomEvent("close"))}};const n=(e,t,s="",i=0)=>e.reduce(((e,l)=>{const o=!!l.children?.length,r=i>=t&&o,c=i>t;if(e.push({id:l.value,name:l.name,childOf:s,isGroup:o,checked:!1,isPartialChecked:!1,level:i,isClosed:r,hidden:c}),o){const s=n(l.children,t,l.value,i+1);e.push(...s)}return e}),[]),l=({id:e,checked:t},s)=>{s.forEach((i=>{i.childOf===e&&(i.checked=t??!0,i.isPartialChecked=!1,i.isGroup&&l(i,s))}))},o=(e,t)=>{const s=t.find((t=>t.id===e)),i=t.filter((e=>e.childOf===s?.id));if(!s)return;const n=i.every((e=>e.checked)),l=i.some((e=>e.isPartialChecked||e.checked))&&!n,r=!n&&!l;n&&(s.checked=!0,s.isPartialChecked=!1),l&&(s.checked=!1,s.isPartialChecked=!0),r&&(s.checked=!1,s.isPartialChecked=!1),s.childOf&&o(s.childOf,t)},r=({id:e,isGroup:t,childOf:s,checked:i},n)=>{t&&l({id:e,checked:i},n),s&&o(s,n)},c=(e,t)=>t.reduce(((s,i)=>(i.childOf===e&&(s.push(i),i.isGroup&&s.push(...c(i.id,t))),s)),[]),a=(e,t)=>t.reduce(((s,i)=>(i.id===e&&(s.push(i),i.childOf&&s.push(...a(i.childOf,t))),s)),[]),d=e=>{const{onlyGroupsIds:t,allItems:s}=e.reduce(((e,t)=>t.checked?(t.isGroup&&e.onlyGroupsIds.push(t.id),e.allItems.push(t),e):e),{onlyGroupsIds:[],allItems:[]});return s.filter((e=>!t.some((t=>t===e.childOf))))},h=(e,{id:t,isClosed:s})=>{e.filter((e=>e.childOf===t)).forEach((t=>{t.hidden=s??!1,t.isGroup&&!t.isClosed&&h(e,{id:t.id,isClosed:s})}))},u=(e,t)=>{const s=((e,t)=>e.reduce(((s,i)=>{if(i.name.toLowerCase().includes(t.toLowerCase())){if(s.push(i),i.isGroup){const t=c(i.id,e);s.push(...t)}if(i.childOf){const t=a(i.childOf,e);s.push(...t)}}return s}),[]))(e,t);e.forEach((t=>{s.some((e=>e.id===t.id))?(t.isGroup&&(t.isClosed=!1,h(e,t)),t.hidden=!1):t.hidden=!0}))},p=(e,t)=>{(e=>{e.forEach((e=>{e.checked=!1,e.isPartialChecked=!1}))})(t);t.filter((t=>e.some((e=>e===t.id)))).forEach((e=>{e.checked=!0,e.isPartialChecked=!1,r(e,t)}))},m=(e,t,s,i)=>{p(e,t),v(t,s,i)},v=(e,t,s)=>{e.forEach((i=>{const n=t.querySelector(`[input-id="${i.id}"]`),l=b(n);n.checked=i.checked,E(i,l),w(i,l),L(i,l,s),g(i,l),C(i,l,e),f(i,n,s)})),y(e,t)},E=(e,t)=>{e.checked?t.classList.add("treeselect-list__item--checked"):t.classList.remove("treeselect-list__item--checked")},w=(e,t)=>{e.isPartialChecked?t.classList.add("treeselect-list__item--partial-checked"):t.classList.remove("treeselect-list__item--partial-checked")},L=(e,s,i)=>{if(e.isGroup){const n=s.querySelector(".treeselect-list__item-icon"),l=e.isClosed?i.arrowRight:i.arrowDown;t(l,n),e.isClosed?s.classList.add("treeselect-list__item--closed"):s.classList.remove("treeselect-list__item--closed")}},g=(e,t)=>{e.hidden?t.classList.add("treeselect-list__item--hidden"):t.classList.remove("treeselect-list__item--hidden")},f=(e,s,i)=>{const n=s.parentNode.querySelector(".treeselect-list__item-checkbox-icon");e.checked?t(i.check,n):e.isPartialChecked?t(i.partialCheck,n):n.innerHTML=""},C=(e,t,s)=>{if(0===e.level){const i=s.some((t=>t.isGroup&&t.level===e.level)),n=!e.isGroup&&i?"20px":"5px";t.style.paddingLeft=e.isGroup?"0":n}else t.style.paddingLeft=e.isGroup?20*e.level+"px":20*e.level+20+"px";t.setAttribute("level",e.level.toString()),t.setAttribute("group",e.isGroup.toString())},y=(e,t)=>{const s=e.some((e=>!e.hidden)),i=t.querySelector(".treeselect-list__empty");s?i.classList.add("treeselect-list__empty--hidden"):i.classList.remove("treeselect-list__empty--hidden")},b=e=>e.parentNode.parentNode,k=(e,t)=>t.find((t=>t.id.toString()===e));var x=class{#I=null;#S=!0;constructor({options:e,value:t,openLevel:s,listSlotHtmlComponent:i,emptyText:l,iconElements:o}){this.options=e,this.value=t,this.openLevel=s??0,this.listSlotHtmlComponent=i??null,this.emptyText=l??"No results found...",this.iconElements=o,this.searchText="",this.flattedOptions=n(this.options,this.openLevel),this.flattedOptionsBeforeSearch=this.flattedOptions,this.selectedNodes={nodes:[],groupedNodes:[]},this.srcElement=this.#M(),this.updateValue(this.value),(e=>{const{duplications:t}=e.reduce(((e,t)=>(e.allItems.some((e=>e.toString()===t.id.toString()))&&e.duplications.push(t.id),e.allItems.push(t.id),e)),{duplications:[],allItems:[]});t.length&&console.error(`Validation: You have duplicated values: ${t.join(", ")}! You should use unique values.`)})(this.flattedOptions)}updateValue(e){m(e,this.flattedOptions,this.srcElement,this.iconElements),this.#H()}updateSearchValue(e){if(e===this.searchText)return;const t=""===this.searchText&&""!==e;this.searchText=e,t&&(this.flattedOptionsBeforeSearch=JSON.parse(JSON.stringify(this.flattedOptions))),""===this.searchText&&(this.flattedOptions=this.flattedOptionsBeforeSearch.map((e=>{const t=this.flattedOptions.find((t=>t.id===e.id));return t.isClosed=e.isClosed,t.hidden=e.hidden,t})),this.flattedOptionsBeforeSearch=[]),this.searchText&&u(this.flattedOptions,e),v(this.flattedOptions,this.srcElement,this.iconElements),this.focusFirstListElement()}callKeyAction(e){this.#S=!1;const t=this.srcElement.querySelector(".treeselect-list__item--focused");"Enter"===e&&t&&t.dispatchEvent(new Event("mousedown")),"ArrowLeft"!==e&&"ArrowRight"!==e||this.#B(t,e),"ArrowDown"!==e&&"ArrowUp"!==e||this.#N(t,e)}focusFirstListElement(){const e="treeselect-list__item--focused",t=this.srcElement.querySelector(`.${e}`),s=Array.from(this.srcElement.querySelectorAll(".treeselect-list__item-checkbox")).filter((e=>"none"!==window.getComputedStyle(b(e)).display));if(!s.length)return;t&&t.classList.remove(e);b(s[0]).classList.add(e)}#B(e,t){if(!e)return;const s=e.querySelector(".treeselect-list__item-checkbox").getAttribute("input-id"),i=k(s,this.flattedOptions),n=e.querySelector(".treeselect-list__item-icon");"ArrowLeft"!==t||i.isClosed||n.dispatchEvent(new Event("mousedown")),"ArrowRight"===t&&i.isClosed&&n.dispatchEvent(new Event("mousedown"))}#N(e,t){const s=Array.from(this.srcElement.querySelectorAll(".treeselect-list__item-checkbox")).filter((e=>"none"!==window.getComputedStyle(b(e)).display));if(s.length)if(e){const e=s.findIndex((e=>b(e).classList.contains("treeselect-list__item--focused")));b(s[e]).classList.remove("treeselect-list__item--focused");const i="ArrowDown"===t?e+1:e-1,n="ArrowDown"===t?0:s.length-1,l=s[i]??s[n],o=!s[i],r=b(l);r.classList.add("treeselect-list__item--focused");const c=this.srcElement.getBoundingClientRect(),a=r.getBoundingClientRect();if(o&&"ArrowDown"===t)return void this.srcElement.scroll(0,0);if(o&&"ArrowUp"===t)return void this.srcElement.scroll(0,this.srcElement.scrollHeight);if(c.y+c.height<a.y+a.height)return void this.srcElement.scroll(0,this.srcElement.scrollTop+a.height);if(c.y>a.y)return void this.srcElement.scroll(0,this.srcElement.scrollTop-a.height)}else{b(s[0]).classList.add("treeselect-list__item--focused")}}#M(){const e=this.#P(),t=this.#G(this.options);e.append(...t);const s=this.#D();s&&e.append(s);const i=this.#z();return e.append(i),e}#P(){const e=document.createElement("div");return e.classList.add("treeselect-list"),e.addEventListener("mouseout",(e=>this.#q(e))),e.addEventListener("mousemove",(()=>this.#R())),e}#q(e){e.stopPropagation(),this.#I&&this.#S&&this.#I.classList.add("treeselect-list__item--focused")}#R(){this.#S=!0}#G(e){return e.reduce(((e,t)=>{if(t.children?.length){const s=this.#F(t),i=this.#G(t.children);return s.append(...i),e.push(s),e}const s=this.#V(t,!1);return e.push(s),e}),[])}#D(){if(!this.listSlotHtmlComponent)return null;const e=document.createElement("div");return e.classList.add("treeselect-list__slot"),e.appendChild(this.listSlotHtmlComponent),e}#z(){const e=document.createElement("div");e.classList.add("treeselect-list__empty"),e.setAttribute("title",this.emptyText);const s=document.createElement("span");s.classList.add("treeselect-list__empty-icon"),t(this.iconElements.attention,s);const i=document.createElement("span");return i.classList.add("treeselect-list__empty-text"),i.innerHTML=this.emptyText,e.append(s,i),e}#F(e){const t=document.createElement("div");t.setAttribute("group-container-id",e.value.toString()),t.classList.add("treeselect-list__group-container");const s=this.#V(e,!0);return t.appendChild(s),t}#V(e,t){const s=this.#j(e);if(t){const e=this.#$();s.appendChild(e)}const i=this.#U(e),n=this.#W(e);return s.append(i,n),s}#j(e){const t=document.createElement("div");return t.setAttribute("tabindex","-1"),t.setAttribute("title",e.name),t.classList.add("treeselect-list__item"),t.addEventListener("mouseover",(()=>this.#K(t)),!0),t.addEventListener("mouseout",(()=>this.#Y(t)),!0),t.addEventListener("mousedown",(t=>this.#J(t,e))),t}#K(e){this.#S&&this.#X(!0,e)}#Y(e){this.#S&&(this.#X(!1,e),this.#I=e)}#J(e,t){e.stopPropagation();const s=e.target.querySelector(".treeselect-list__item-checkbox");s.checked=!s.checked,this.#Q(s,t)}#$(){const e=document.createElement("span");return e.setAttribute("tabindex","-1"),e.classList.add("treeselect-list__item-icon"),t(this.iconElements.arrowDown,e),e.addEventListener("mousedown",(e=>this.#Z(e))),e}#Z(e){e.stopPropagation(),this.#ee(e)}#U(e){const t=document.createElement("div");t.classList.add("treeselect-list__item-checkbox-container");const s=document.createElement("span");s.classList.add("treeselect-list__item-checkbox-icon"),s.innerHTML="";const i=document.createElement("input");return i.setAttribute("tabindex","-1"),i.setAttribute("type","checkbox"),i.setAttribute("input-id",e.value.toString()),i.classList.add("treeselect-list__item-checkbox"),t.append(s,i),t}#W(e){const t=document.createElement("label");return t.innerHTML=e.name,t.classList.add("treeselect-list__item-label"),t}#Q(e,t){const s=this.flattedOptions.find((e=>e.id===t.value));s&&(s.checked=e.checked,s.isPartialChecked=!1,r(s,this.flattedOptions),v(this.flattedOptions,this.srcElement,this.iconElements),this.#u())}#ee(e){const t=e.target?.parentNode?.querySelector("[input-id]"),s=t?.getAttribute("input-id")??null,i=k(s,this.flattedOptions);i&&(i.isClosed=!i.isClosed,h(this.flattedOptions,i),v(this.flattedOptions,this.srcElement,this.iconElements),this.#te())}#X(e,t){const s="treeselect-list__item--focused";if(e){const e=Array.from(this.srcElement.querySelectorAll(`.${s}`));e.length&&e.forEach((e=>e.classList.remove(s))),t.classList.add(s)}else t.classList.remove(s)}#H(){var e;this.selectedNodes={nodes:(e=this.flattedOptions,e.filter((e=>e.checked&&!e.isGroup))),groupedNodes:d(this.flattedOptions)}}#te(){this.srcElement.dispatchEvent(new CustomEvent("arrow-click"))}#u(){this.#H(),this.srcElement.dispatchEvent(new CustomEvent("input",{detail:this.selectedNodes}))}};const _=e=>e.map((e=>e.id));var O=class{#se=null;#ie=null;#ne=null;#le=null;#oe=null;#re=null;#ce=null;constructor({parentHtmlContainer:e,value:t,options:i,openLevel:n,appendToBody:l,alwaysOpen:o,showTags:r,tagsCountText:c,clearable:a,searchable:d,placeholder:h,grouped:u,listSlotHtmlComponent:p,disabled:m,emptyText:v,staticList:E,id:w,iconElements:L,inputCallback:g}){(({parentHtmlContainer:e,staticList:t,appendToBody:s})=>{e||console.error("Validation: parentHtmlContainer prop is required!"),t&&s&&console.error("Validation: You should set staticList to false if you use appendToBody!")})({parentHtmlContainer:e,staticList:E,appendToBody:l}),this.parentHtmlContainer=e,this.value=t??[],this.options=i??[],this.openLevel=n??0,this.appendToBody=l??!0,this.alwaysOpen=!(!o||m),this.showTags=r??!0,this.tagsCountText=c??"elements selected",this.clearable=a??!0,this.searchable=d??!0,this.placeholder=h??"Search...",this.grouped=u??!0,this.listSlotHtmlComponent=p??null,this.disabled=m??!1,this.emptyText=v??"No results found...",this.staticList=!(!E||this.appendToBody),this.id=w??"",this.iconElements=s(L),this.inputCallback=g,this.isListOpened=!1,this.srcElement=null,this.mount()}mount(){this.destroy();const{container:e,list:t,input:s}=this.#ae();this.srcElement=e,this.#se=t,this.#ie=s,this.#le=this.scrollWindowHandler.bind(this),this.#oe=this.scrollWindowHandler.bind(this),this.#re=this.focusWindowHandler.bind(this),this.#ce=this.blurWindowHandler.bind(this),this.alwaysOpen&&this.#ie?.openClose(),this.disabled&&this.srcElement.classList.add("treeselect--disabled")}updateValue(e){const t=this.#se;if(t){t.updateValue(e);const{groupedNodes:s,nodes:i}=t.selectedNodes,n=this.grouped?s:i;this.#ie?.updateValue(n)}}destroy(){this.srcElement&&(this.#de(),this.srcElement.innerHTML="",this.srcElement=null,this.#he(!0))}focus(){this.#ie&&this.#ie.focus()}toggleOpenClose(){this.#ie&&(this.#ie.openClose(),this.#ie.focus())}#ae(){const e=this.parentHtmlContainer;e.classList.add("treeselect");const t=new x({options:this.options,value:this.value,openLevel:this.openLevel,listSlotHtmlComponent:this.listSlotHtmlComponent,emptyText:this.emptyText,iconElements:this.iconElements}),{groupedNodes:s,nodes:n}=t.selectedNodes,l=new i({value:this.grouped?s:n,showTags:this.showTags,tagsCountText:this.tagsCountText,clearable:this.clearable,isAlwaysOpened:this.alwaysOpen,searchable:this.searchable,placeholder:this.placeholder,disabled:this.disabled,id:this.id,iconElements:this.iconElements});return this.appendToBody&&(this.#ne=new ResizeObserver((()=>this.updateListPosition()))),l.srcElement.addEventListener("input",(e=>this.#ue(e,t))),l.srcElement.addEventListener("open",(()=>this.#pe())),l.srcElement.addEventListener("keydown",(e=>this.#me(e,t))),l.srcElement.addEventListener("search",(e=>this.#ve(e,t))),l.srcElement.addEventListener("focus",(()=>this.#Ee()),!0),this.alwaysOpen||l.srcElement.addEventListener("close",(()=>this.#de())),t.srcElement.addEventListener("mouseup",(()=>l.focus()),!0),t.srcElement.addEventListener("input",(e=>this.#we(e,l))),t.srcElement.addEventListener("arrow-click",(()=>this.#Le(l))),e.append(l.srcElement),{container:e,list:t,input:l}}#ue(e,t){const s=_(e.detail);t.updateValue(s);const{nodes:i}=t.selectedNodes;this.value=_(i),this.#u()}#me(e,t){this.isListOpened&&t.callKeyAction(e.key)}#ve(e,t){t.updateSearchValue(e.detail),this.updateListPosition()}#Ee(){this.#ge(!0),this.#re&&this.#re&&this.#ce&&(document.addEventListener("mousedown",this.#re,!0),document.addEventListener("focus",this.#re,!0),window.addEventListener("blur",this.#ce))}#we(e,t){const{groupedNodes:s,nodes:i}=e.detail,n=this.grouped?s:i;t.updateValue(n),this.value=_(i),t.focus(),this.#u()}#Le(e){e.focus(),this.updateListPosition()}#pe(){this.isListOpened=!0,this.#le&&this.#oe&&(window.addEventListener("scroll",this.#le,!0),window.addEventListener("resize",this.#oe)),this.#se&&this.srcElement&&(this.appendToBody?(document.body.appendChild(this.#se.srcElement),this.#ne?.observe(this.srcElement)):this.srcElement.appendChild(this.#se.srcElement),this.updateListPosition(),this.#fe(!0),this.#se.focusFirstListElement())}#de(){if(this.isListOpened=!1,this.#le&&this.#oe&&(window.removeEventListener("scroll",this.#le,!0),window.removeEventListener("resize",this.#oe)),!this.#se||!this.srcElement)return;(this.appendToBody?document.body.contains(this.#se.srcElement):this.srcElement.contains(this.#se.srcElement))&&(this.appendToBody?(document.body.removeChild(this.#se.srcElement),this.#ne?.disconnect()):this.srcElement.removeChild(this.#se.srcElement),this.#fe(!1))}#Ce(e,t){if(!this.#se||!this.#ie)return;const s=t?"treeselect-list--top-to-body":"treeselect-list--top",i=t?"treeselect-list--bottom-to-body":"treeselect-list--bottom";e?(this.#se.srcElement.classList.add(s),this.#se.srcElement.classList.remove(i),this.#ie.srcElement.classList.add("treeselect-input--top"),this.#ie.srcElement.classList.remove("treeselect-input--bottom")):(this.#se.srcElement.classList.remove(s),this.#se.srcElement.classList.add(i),this.#ie.srcElement.classList.remove("treeselect-input--top"),this.#ie.srcElement.classList.add("treeselect-input--bottom"))}#ge(e){this.#ie&&this.#se&&(e?(this.#ie.srcElement.classList.add("treeselect-input--focused"),this.#se.srcElement.classList.add("treeselect-list--focused")):(this.#ie.srcElement.classList.remove("treeselect-input--focused"),this.#se.srcElement.classList.remove("treeselect-list--focused")))}#fe(e){e?this.#ie?.srcElement.classList.add("treeselect-input--opened"):this.#ie?.srcElement.classList.remove("treeselect-input--opened"),this.staticList?this.#se?.srcElement.classList.add("treeselect-list--static"):this.#se?.srcElement.classList.remove("treeselect-list--static")}#he(e){this.#le&&this.#oe&&this.#re&&this.#ce&&(this.alwaysOpen&&!e||(window.removeEventListener("scroll",this.#le,!0),window.removeEventListener("resize",this.#oe)),document.removeEventListener("click",this.#re,!0),document.removeEventListener("focus",this.#re,!0),window.removeEventListener("blur",this.#ce))}scrollWindowHandler(){this.updateListPosition()}focusWindowHandler(e){this.srcElement?.contains(e.target)||this.#se?.srcElement.contains(e.target)||(this.#ie?.blur(),this.#he(!1),this.#ge(!1))}blurWindowHandler(){this.#ie?.blur(),this.#he(!1),this.#ge(!1)}updateListPosition(){const e=this.srcElement,t=this.#se?.srcElement;if(!e||!t)return;t.style.transform="";const{y:s,height:i}=t.getBoundingClientRect(),{x:n,y:l,height:o,width:r}=e.getBoundingClientRect(),c=window.innerHeight-l-o,a=l>c&&l>=i&&c<i;this.appendToBody&&(t.style.transform=a?`translateY(${l-s-i}px)`:`translateY(${l+o-s}px)`,t.style.width=`${r}px`,t.style.left=`${n+window.scrollX}px`);const d=a?"top":"bottom";t.getAttribute("direction")!==d&&(t.setAttribute("direction",d),this.#Ce(a,this.appendToBody))}#u(){this.srcElement?.dispatchEvent(new CustomEvent("input",{detail:this.value})),this.inputCallback&&this.inputCallback(this.value)}};export{O as default};

package/package.json

@@ -1,8 +1,52 @@
 {
   "name": "treeselectjs",
-  "version": "0.2.9",
+  "version": "0.3.0",
   "description": "Treeselect JS",
-  "main": "dist/treeselect-js.js",
+  "main": "dist/treeselect-js.cjs.js",
+  "module": "dist/treeselect-js.mjs.js",
+  "types": "dist/treeselect-js.d.ts",
+  "targets": {
+    "main": {
+      "context": "node",
+      "source": "src/treeselect-js.ts",
+      "outputFormat": "commonjs",
+      "isLibrary": true,
+      "optimize": true,
+      "sourceMap": false,
+      "engines": {
+        "browsers": "> 0.5%, last 2 versions, not dead"
+      }
+    },
+    "module": {
+      "context": "node",
+      "source": "src/treeselect-js.ts",
+      "outputFormat": "esmodule",
+      "isLibrary": true,
+      "optimize": true,
+      "sourceMap": false,
+      "engines": {
+        "browsers": "> 0.5%, last 2 versions, not dead"
+      }
+    },
+    "types": {
+      "isLibrary": true,
+      "context": "node",
+      "source": "src/treeselect-js.ts",
+      "optimize": true,
+      "sourceMap": false
+    },
+    "css": {
+      "source": "src/treeselect-js.css",
+      "distDir": "dist",
+      "isLibrary": true,
+      "optimize": true,
+      "sourceMap": false
+    }
+  },
+  "scripts": {
+    "build": "parcel build",
+    "watch": "parcel watch"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/dipson88/treeselectjs.git"
@@ -10,7 +54,11 @@
   "keywords": [
     "treeselect",
     "select",
-    "js"
+    "groupselect",
+    "js",
+    "ts",
+    "typescript",
+    "vanilla"
   ],
   "author": "Dzmitry Zhuraukou",
   "license": "MIT",
@@ -19,9 +67,13 @@
   },
   "homepage": "https://github.com/dipson88/treeselectjs#readme",
   "devDependencies": {
-    "gulp": "^4.0.2",
-    "gulp-uglify": "^3.0.2",
-    "gulp-uglifycss": "^1.1.0"
+    "@parcel/packager-ts": "^2.6.2",
+    "@parcel/transformer-typescript-types": "^2.6.2",
+    "parcel": "^2.6.2",
+    "prettier": "^2.7.1",
+    "typescript": "^4.7.4"
   },
-  "files": ["dist", "src"]
+  "files": [
+    "dist"
+  ]
 }

package/dist/input.css

@@ -1,14 +0,0 @@
-.treeselect-input{width:100%;box-sizing:border-box;border:1px solid #d7dde4;border-radius:4px;display:flex;align-items:center;flex-wrap:wrap;padding:2px 4px;padding-right:40px;position:relative;min-height:37px;background-color:#fff;cursor:text}
-.treeselect-input--unsearchable{cursor:default}.treeselect-input--unsearchable .treeselect-input__edit{z-index:-1;caret-color:transparent;cursor:default}
-.treeselect-input__tags{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px;max-width:100%;box-sizing:border-box}
-.treeselect-input__tags-element{display:inline-flex;align-items:center;background-color:#d7dde4;cursor:pointer;padding:2px 5px;border-radius:2px;font-size:14px;max-width:100%;box-sizing:border-box}
-.treeselect-input__tags-element:hover{background-color:#c5c7cb}.treeselect-input__tags-element:hover .treeselect-input__tags-cross svg{stroke:#eb4c42}
-.treeselect-input__tags-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
-.treeselect-input__tags-cross{display:flex;margin-left:2px}.treeselect-input__tags-cross svg{width:12px;height:12px}
-.treeselect-input__tags-count{font-size:14px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
-.treeselect-input__edit{flex:1;min-width:0;border:0;font-size:14px}.treeselect-input__edit:focus{outline:0;min-width:30px}
-.treeselect-input__operators{display:flex;max-width:40px;position:absolute;right:2px}
-.treeselect-input__clear{display:flex;cursor:pointer}.treeselect-input__clear svg{stroke:#c5c7cb;width:17px;min-width:17px;height:20px}
-.treeselect-input__clear:hover svg{stroke:#838790}.treeselect-input__arrow{display:flex;cursor:pointer}
-.treeselect-input__arrow svg{stroke:#c5c7cb;width:20px;min-width:20px;height:20px}
-.treeselect-input__arrow:hover svg{stroke:#838790}

package/dist/input.js

@@ -1 +0,0 @@
-import svg from"./svgIcons.js";class TreeselectInput{#htmlTagsSection=null;#htmlEditControl=null;#htmlOperators=null;#htmlArrow=null;#openEvent=new CustomEvent("open");#closeEvent=new CustomEvent("close");constructor({value:t,showTags:e,tagsCountText:s,clearable:a,isAlwaysOpened:i,searchable:n,placeholder:r,disabled:h}){this.value=t,this.showTags=e??!0,this.tagsCountText=s??"elements selected",this.searchable=n??!0,this.placeholder=r??"Search...",this.clearable=a??!0,this.isAlwaysOpened=i??!1,this.disabled=h??!1,this.isOpened=!1,this.searchText="",this.srcElement=this.#createTreeselectInput(),this.#updateDOM()}focus(){this.#htmlEditControl.focus()}blur(){this.isOpened&&this.#updateOpenClose()}updateValue(t){this.value=t,this.#updateTags(),this.#updateEditControl()}removeItem(e){this.value=this.value.filter(t=>t.id!==e),this.#emitInput(),this.#updateTags(),this.#updateEditControl()}clear(){this.value=[],this.searchText="",this.#emitSearch(""),this.#emitInput(),this.#updateTags(),this.#updateEditControl()}openClose(){this.#updateOpenClose()}#updateDOM(){this.#updateTags(),this.#updateEditControl(),this.#updateOperators()}#updateTags(){this.#htmlTagsSection.innerHTML="",this.showTags?this.#htmlTagsSection.append(...this.#createTags()):this.#htmlTagsSection.appendChild(this.#createCountElement())}#updateOperators(){const t=[];this.#htmlOperators.innerHTML="",this.clearable&&t.push(this.#createClearButton()),this.isAlwaysOpened||t.push(this.#createInputArrow(this.isOpened)),t.length&&this.#htmlOperators.append(...t)}#updateArrowDirection(){var t;this.isAlwaysOpened||(t=this.isOpened?svg.arrowUp:svg.arrowDown,this.#htmlArrow.innerHTML=t)}#updateEditControl(){this.value?.length?this.#htmlEditControl.removeAttribute("placeholder"):this.#htmlEditControl.setAttribute("placeholder",this.placeholder),this.searchable?this.srcElement.classList.remove("treeselect-input--unsearchable"):this.srcElement.classList.add("treeselect-input--unsearchable"),this.#htmlEditControl.value=this.searchText}#updateOpenClose(){this.isOpened=!this.isOpened,this.#updateArrowDirection(),this.isOpened?this.#emitOpen():this.#emitClose()}#createTreeselectInput(){const t=document.createElement("div");return t.classList.add("treeselect-input"),t.setAttribute("tabindex","-1"),this.#htmlTagsSection=this.#createTagsSection(),this.#htmlEditControl=this.#createControl(),this.#htmlOperators=this.#createOperators(),t.addEventListener("mousedown",t=>{t.preventDefault(),this.isOpened||this.#updateOpenClose(),this.focus()}),t.append(this.#htmlTagsSection,this.#htmlEditControl,this.#htmlOperators),t}#createTagsSection(){const t=document.createElement("div");return t.classList.add("treeselect-input__tags"),t}#createTags(){return this.value.map(e=>{const t=document.createElement("div");t.classList.add("treeselect-input__tags-element"),t.setAttribute("tabindex","-1"),t.setAttribute("tag-id",e.id),t.setAttribute("title",e.name);var s=this.#createTagName(e.name),a=this.#createTagCross();return t.addEventListener("mousedown",t=>{t.preventDefault(),t.stopPropagation(),this.focus(),this.removeItem(e.id)}),t.append(s,a),t})}#createTagName(t){const e=document.createElement("span");return e.classList.add("treeselect-input__tags-name"),e.innerHTML=t,e}#createTagCross(){const t=document.createElement("span");return t.classList.add("treeselect-input__tags-cross"),t.innerHTML=svg.cross,t}#createCountElement(){const t=document.createElement("span");return t.classList.add("treeselect-input__tags-count"),this.value.length?t.innerHTML=1===this.value.length?this.value[0].name:this.value.length+" "+this.tagsCountText:t.innerHTML="",t}#createControl(){const a=document.createElement("input");return a.classList.add("treeselect-input__edit"),this.disabled&&a.setAttribute("tabindex","-1"),a.addEventListener("keydown",t=>{"Backspace"!==t.key||this.searchText.length||!this.value.length||this.showTags||this.clear(),"Backspace"===t.key&&!this.searchText.length&&this.value.length&&this.removeItem(this.value[this.value.length-1].id),"Space"!==t.code||this.searchText&&this.searchable||this.#updateOpenClose()}),a.addEventListener("input",t=>{t.stopPropagation();var e=this.searchText,s=a.value.trim();0===e.length&&0===s.length?a.value="":(this.searchable?(this.#emitSearch(t.target.value),this.isOpened||this.#updateOpenClose()):a.value="",this.searchText=a.value)}),a}#createOperators(){const t=document.createElement("div");return t.classList.add("treeselect-input__operators"),t}#createClearButton(){const t=document.createElement("span");return t.classList.add("treeselect-input__clear"),t.setAttribute("tabindex","-1"),t.innerHTML=svg.clear,t.addEventListener("mousedown",t=>{t.preventDefault(),t.stopPropagation(),this.#htmlEditControl.focus(),(this.searchText.length||this.value.length)&&this.clear()}),t}#createInputArrow(t){return this.#htmlArrow=document.createElement("span"),this.#htmlArrow.classList.add("treeselect-input__arrow"),this.#htmlArrow.innerHTML=t?svg.arrowUp:svg.arrowDown,this.#htmlArrow.addEventListener("mousedown",t=>{t.stopPropagation(),t.preventDefault(),this.focus(),this.#updateOpenClose()}),this.#htmlArrow}#emitInput(){this.srcElement.dispatchEvent(new CustomEvent("input",{detail:this.value}))}#emitSearch(t){this.srcElement.dispatchEvent(new CustomEvent("search",{detail:t}))}#emitOpen(){this.srcElement.dispatchEvent(this.#openEvent)}#emitClose(){this.srcElement.dispatchEvent(this.#closeEvent)}}export default TreeselectInput;

package/dist/list.css

@@ -1,17 +0,0 @@
-.treeselect-list{width:100%;box-sizing:border-box;border:1px solid #d7dde4;overflow-y:auto;background-color:#fff;max-height:300px}
-.treeselect-list__group-container{box-sizing:border-box}.treeselect-list__item{display:flex;align-items:center;box-sizing:border-box;cursor:pointer;height:30px}
-.treeselect-list__item:focus{outline:0}.treeselect-list__item--focused{background-color:#f0ffff !important}
-.treeselect-list__item--hidden{display:none}.treeselect-list__item-icon{display:flex;align-items:center;cursor:pointer;height:20px;width:20px;min-width:20px}
-.treeselect-list__item-icon svg{pointer-events:none;width:100%;height:100%;stroke:#c5c7cb}
-.treeselect-list__item-icon:hover svg{stroke:#838790}.treeselect-list__item-checkbox-container{width:20px;height:20px;min-width:20px;border:1px solid #d7dde4;border-radius:3px;position:relative;background-color:#fff;pointer-events:none;box-sizing:border-box}
-.treeselect-list__item-checkbox-container svg{position:absolute;height:100%;width:100%}
-.treeselect-list__item-checkbox{margin:0;width:0;height:0;pointer-events:none;position:absolute;z-index:-1}
-.treeselect-list__item-checkbox-icon{position:absolute;height:100%;width:100%;left:0;top:0}
-.treeselect-list__item-label{width:100%;overflow:hidden;text-overflow:ellipsis;word-break:keep-all;white-space:nowrap;font-size:14px;padding-left:5px;pointer-events:none}
-.treeselect-list__empty{display:flex;align-items:center;height:30px;padding-left:4px}
-.treeselect-list__empty--hidden{display:none}.treeselect-list__empty-icon{display:flex;align-items:center}
-.treeselect-list__empty-text{font-size:14px;padding-left:5px;overflow:hidden;text-overflow:ellipsis;word-break:keep-all;white-space:nowrap}
-.treeselect-list__slot{position:sticky;box-sizing:border-box;width:100%;max-width:100%;bottom:0;background-color:#fff}
-.treeselect-list__item .treeselect-list__item-checkbox-container svg{stroke:transparent}
-.treeselect-list__item--checked .treeselect-list__item-checkbox-container svg,.treeselect-list__item--partial-checked .treeselect-list__item-checkbox-container svg{stroke:#fff}
-.treeselect-list__item--checked .treeselect-list__item-checkbox-container,.treeselect-list__item--partial-checked .treeselect-list__item-checkbox-container{background-color:#52c67e}

package/dist/list.js

@@ -1 +0,0 @@
-import svg from"./svgIcons.js";const getFlatOptions=(e,i,l=0,c=0)=>e.reduce((e,t)=>{var s=!!t.children?.length;return e.push({id:t.value,name:t.name,childOf:l,isGroup:s,checked:!1,level:c,isClosed:i<=c&&s,hidden:i<c}),s&&(s=getFlatOptions(t.children,i,t.value,c+1),e.push(...s)),e},[]),checkAllChildrenInputs=({id:t,checked:s},i)=>{i.forEach(e=>{e.childOf===t&&(e.checked=s,e.isPartialChecked=!1,e.isGroup&&checkAllChildrenInputs(e,i))})},checkAllParentInputs=(t,e)=>{const s=e.find(e=>e.id===t),i=e.filter(e=>e.childOf===s.id);var l=i.every(e=>e.checked),c=i.some(e=>e.isPartialChecked||e.checked)&&!l,r=!l&&!c;l&&(s.checked=!0,s.isPartialChecked=!1),c&&(s.checked=!1,s.isPartialChecked=!0),r&&(s.checked=!1,s.isPartialChecked=!1),s.childOf&&checkAllParentInputs(s.childOf,e)},checkInput=({id:e,isGroup:t,childOf:s,checked:i},l)=>{t&&checkAllChildrenInputs({id:e,checked:i},l),s&&checkAllParentInputs(s,l)},updateValue=(t,s,e)=>{s.forEach(e=>{e.checked=!1,e.isPartialChecked=!1});const i=s.filter(e=>t.includes(e.id));i.forEach(e=>{e.checked=!0,e.isPartialChecked=!1,checkInput(e,s)}),updateDOM(s,e)},hideShowChildren=(t,{id:s,isClosed:i})=>{const e=t.filter(e=>e.childOf===s);e.forEach(e=>{e.hidden=i,e.isGroup&&!e.isClosed&&hideShowChildren(t,{id:e.id,isClosed:i})})},updateDOM=(l,c)=>{l.forEach(e=>{const t=c.querySelector(`[input-id="${e.id}"]`),s=getListItemByCheckbox(t);if(t.checked=e.checked,e.checked?s.classList.add("treeselect-list__item--checked"):s.classList.remove("treeselect-list__item--checked"),e.isPartialChecked?s.classList.add("treeselect-list__item--partial-checked"):s.classList.remove("treeselect-list__item--partial-checked"),e.isGroup){const i=s.querySelector(".treeselect-list__item-icon");e.isClosed?(s.classList.add("treeselect-list__item--closed"),i.innerHTML=svg.arrowRight):(s.classList.remove("treeselect-list__item--closed"),i.innerHTML=svg.arrowDown)}e.hidden?s.classList.add("treeselect-list__item--hidden"):s.classList.remove("treeselect-list__item--hidden"),updateLeftPaddingItems(e,s,l),updateCheckboxClasses(e,t)});var e=l.some(e=>!e.hidden);const t=c.querySelector(".treeselect-list__empty");e?t.classList.add("treeselect-list__empty--hidden"):t.classList.remove("treeselect-list__empty--hidden")},updateLeftPaddingItems=(t,e,s)=>{0===t.level?(s=s.some(e=>e.isGroup&&e.level===t.level),s=!t.isGroup&&s?"20px":"5px",e.style.paddingLeft=t.isGroup?"0":s):e.style.paddingLeft=t.isGroup?20*t.level+"px":20*t.level+20+"px",e.setAttribute("level",t.level),e.setAttribute("group",t.isGroup)},updateCheckboxClasses=(e,t)=>{const s=t.parentNode,i=s.querySelector(".treeselect-list__item-checkbox-icon");e.checked?i.innerHTML=svg.check:e.isPartialChecked?i.innerHTML=svg.partialCheck:i.innerHTML=""},getAllFlattedChildren=(s,i)=>i.reduce((e,t)=>(t.childOf===s&&(e.push(t),t.isGroup&&e.push(...getAllFlattedChildren(t.id,i))),e),[]),getAllFlattenParents=(s,i)=>i.reduce((e,t)=>(t.id===s&&(e.push(t),t.childOf&&e.push(...getAllFlattenParents(t.childOf,i))),e),[]),getGroupedValues=e=>{const{onlyGroupsIds:t,allItems:s}=e.reduce((e,t)=>(t.checked&&(t.isGroup&&e.onlyGroupsIds.push(t.id),e.allItems.push(t)),e),{onlyGroupsIds:[],allItems:[]});return s.filter(e=>!t.includes(e.childOf))},getCheckedValues=e=>e.filter(e=>e.checked&&!e.isGroup),getListItemByCheckbox=e=>{return e.parentNode.parentNode},validateOptions=e=>{const t=e.reduce((e,t)=>(e.allItems.includes(t.id)&&e.duplications.push(t.id),e.allItems.push(t.id),e),{duplications:[],allItems:[]})["duplications"];t.length&&console.error(`Validation: You have duplicated values: ${t.join(", ")}! You should use unique values.`)};class TreeselectList{#lastFocusedItem=null;#isMouseActionsAvailable=!0;constructor({options:e,value:t,openLevel:s,listSlotHtmlComponent:i,emptyText:l}){this.options=e,this.value=t,this.searchText="",this.openLevel=s??0,this.listSlotHtmlComponent=i,this.emptyText=l??"No results found...",this.flattedOptions=getFlatOptions(this.options,this.openLevel),this.flattedOptionsBeforeSearch=this.flattedOptions,this.selectedNodes={nodes:[],groupedNodes:[]},this.srcElement=this.#createList(),this.updateValue(this.value),validateOptions(this.flattedOptions)}updateValue(e){updateValue(e,this.flattedOptions,this.srcElement),this.#updateSelectedNodes()}updateSearchValue(i){if(i!==this.searchText){var e=""===this.searchText&&""!==i;if(this.searchText=i,e&&(this.flattedOptionsBeforeSearch=JSON.parse(JSON.stringify(this.flattedOptions))),""===this.searchText)return this.flattedOptions=this.flattedOptionsBeforeSearch.map(t=>{const e=this.flattedOptions.find(e=>e.id===t.id);return e.isClosed=t.isClosed,e.hidden=t.hidden,e}),this.flattedOptionsBeforeSearch=[],updateDOM(this.flattedOptions,this.srcElement),void this.focusFirstListElement();const s=this.flattedOptions.reduce((e,t)=>{var s;return t.name.toLowerCase().includes(i.toLowerCase())&&(e.push(t),t.isGroup&&(s=getAllFlattedChildren(t.id,this.flattedOptions),e.push(...s)),t.childOf&&(s=getAllFlattenParents(t.childOf,this.flattedOptions),e.push(...s))),e},[]);this.flattedOptions.forEach(t=>{s.some(e=>e.id===t.id)?(t.isGroup&&(t.isClosed=!1,hideShowChildren(this.flattedOptions,t)),t.hidden=!1):t.hidden=!0}),updateDOM(this.flattedOptions,this.srcElement),this.focusFirstListElement()}}callKeyAction(e){this.#isMouseActionsAvailable=!1;const t=this.srcElement.querySelector(".treeselect-list__item--focused");if("Enter"===e&&t&&t.dispatchEvent(new Event("mousedown")),"ArrowLeft"===e||"ArrowRight"===e){if(!t)return;const c=t.querySelector(".treeselect-list__item-checkbox"),r=c.getAttribute("input-id");var s=this.flattedOptions.find(e=>e.id===r);const o=t.querySelector(".treeselect-list__item-icon");"ArrowLeft"!==e||s.isClosed||o.dispatchEvent(new Event("mousedown")),"ArrowRight"===e&&s.isClosed&&o.dispatchEvent(new Event("mousedown"))}if("ArrowDown"===e||"ArrowUp"===e){const n=Array.from(this.srcElement.querySelectorAll(".treeselect-list__item-checkbox")).filter(e=>"none"!==window.getComputedStyle(getListItemByCheckbox(e)).display);if(n.length)if(t){s=n.findIndex(e=>getListItemByCheckbox(e).classList.contains("treeselect-list__item--focused"));const d=getListItemByCheckbox(n[s]);d.classList.remove("treeselect-list__item--focused");var s="ArrowDown"===e?s+1:s-1,i="ArrowDown"===e?0:n.length-1,i=n[s]??n[i],s=!n[s];const a=getListItemByCheckbox(i);a.classList.add("treeselect-list__item--focused");var i=this.srcElement.getBoundingClientRect(),l=a.getBoundingClientRect();s&&"ArrowDown"===e?this.srcElement.scroll(0,0):s&&"ArrowUp"===e?this.srcElement.scroll(0,this.srcElement.scrollHeight):i.y+i.height<l.y+l.height?this.srcElement.scroll(0,this.srcElement.scrollTop+l.height):i.y>l.y&&this.srcElement.scroll(0,this.srcElement.scrollTop-l.height)}else{const h=getListItemByCheckbox(n[0]);h.classList.add("treeselect-list__item--focused")}}}focusFirstListElement(){var e="treeselect-list__item--focused";const t=this.srcElement.querySelector("."+e);var s=Array.from(this.srcElement.querySelectorAll(".treeselect-list__item-checkbox")).filter(e=>"none"!==window.getComputedStyle(getListItemByCheckbox(e)).display);if(s.length){t&&t.classList.remove(e);const i=getListItemByCheckbox(s[0]);i.classList.add(e)}}#createList(){const e=[],t=document.createElement("div");t.classList.add("treeselect-list");var s=this.#getListHTML(this.options);if(e.push(...s),this.listSlotHtmlComponent){const i=document.createElement("div");i.classList.add("treeselect-list__slot"),i.appendChild(this.listSlotHtmlComponent),e.push(i)}s=this.#createEmptyList();return e.push(s),t.addEventListener("mouseout",e=>{e.stopPropagation(),this.#lastFocusedItem&&this.#isMouseActionsAvailable&&this.#lastFocusedItem.classList.add("treeselect-list__item--focused")}),t.addEventListener("mousemove",()=>{this.#isMouseActionsAvailable=!0}),t.append(...e),t}#getListHTML(e){return e.reduce((e,t)=>{if(t.children?.length){const i=this.#createGroupContainer(t);var s=this.#getListHTML(t.children);return i.append(...s),e.push(i),e}s=this.#createGroupItem(t,!1);return e.push(s),e},[])}#createGroupContainer(e){const t=document.createElement("div");t.setAttribute("group-container-id",e.value),t.classList.add("treeselect-list__group-container");e=this.#createGroupItem(e,!0);return t.appendChild(e),t}#createGroupItem(s,e){const t=document.createElement("div");t.setAttribute("tabindex","-1"),t.setAttribute("title",s.name),t.classList.add("treeselect-list__item"),e&&(e=this.#createArrow(),t.appendChild(e)),t.addEventListener("mouseover",()=>{this.#isMouseActionsAvailable&&this.#groupMouseAction(!0,t)},!0),t.addEventListener("mouseout",()=>{this.#isMouseActionsAvailable&&(this.#groupMouseAction(!1,t),this.#lastFocusedItem=t)},!0),t.addEventListener("mousedown",e=>{e.stopPropagation();const t=e.target.querySelector(".treeselect-list__item-checkbox");t.checked=!t.checked,this.#checkboxClickEvent(t,s)});var e=this.#createCheckbox(s),i=this.#createCheckboxLabel(s);return t.append(e,i),t}#createArrow(){const e=document.createElement("span");return e.setAttribute("tabindex","-1"),e.classList.add("treeselect-list__item-icon"),e.innerHTML=svg.arrowDown,e.addEventListener("mousedown",e=>{e.stopPropagation(),this.#arrowClickEvent(e)}),e}#createCheckbox(e){const t=document.createElement("div"),s=(t.classList.add("treeselect-list__item-checkbox-container"),document.createElement("span")),i=(s.classList.add("treeselect-list__item-checkbox-icon"),s.innerHTML="",document.createElement("input"));return i.setAttribute("tabindex","-1"),i.setAttribute("type","checkbox"),i.setAttribute("input-id",e.value),i.classList.add("treeselect-list__item-checkbox"),t.append(s,i),t}#createCheckboxLabel(e){const t=document.createElement("label");return t.innerHTML=e.name,t.classList.add("treeselect-list__item-label"),t}#createEmptyList(){const e=document.createElement("div"),t=(e.classList.add("treeselect-list__empty"),e.setAttribute("title",this.emptyText),document.createElement("span")),s=(t.classList.add("treeselect-list__empty-icon"),t.innerHTML=svg.attention,document.createElement("span"));return s.classList.add("treeselect-list__empty-text"),s.innerHTML=this.emptyText,e.append(t,s),e}#checkboxClickEvent(e,t){const s=this.flattedOptions.find(e=>e.id===t.value);s.checked=e.checked,s.isPartialChecked=!1,checkInput(s,this.flattedOptions),updateDOM(this.flattedOptions,this.srcElement),this.#emitInput()}#arrowClickEvent(e){const t=e.target.parentNode.querySelector("[input-id]"),s=t.getAttribute("input-id"),i=this.flattedOptions.find(e=>e.id===s);i.isClosed=!i.isClosed,hideShowChildren(this.flattedOptions,i),updateDOM(this.flattedOptions,this.srcElement),this.#emitArrowClick()}#groupMouseAction(e,t){const s="treeselect-list__item--focused";if(e){const i=Array.from(this.srcElement.querySelectorAll("."+s));i.length&&i.forEach(e=>e.classList.remove(s)),t.classList.add(s)}else t.classList.remove(s)}#updateSelectedNodes(){this.selectedNodes={nodes:getCheckedValues(this.flattedOptions),groupedNodes:getGroupedValues(this.flattedOptions)}}#emitArrowClick(){this.srcElement.dispatchEvent(new CustomEvent("arrow-click"))}#emitInput(){this.#updateSelectedNodes(),this.srcElement.dispatchEvent(new CustomEvent("input",{detail:this.selectedNodes}))}}export default TreeselectList;

package/dist/svgIcons.js

@@ -1 +0,0 @@
-export default{arrowUp:'<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 25 25" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 15l-6-6-6 6"/></svg>',arrowDown:'<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 25 25" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>',arrowRight:'<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 25 25" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg>',attention:'<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 25 25" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>',clear:'<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 25 25" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>',cross:'<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 25 25" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>',check:'<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 25 25" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>',partialCheck:'<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 25 25" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line></svg>'};

package/dist/treeselect-js.js

@@ -1 +0,0 @@
-import TreeselectInput from"./input.js";import TreeselectList from"./list.js";const validateProps=({parentHtmlContainer:e,staticList:t,appendToBody:s})=>{e||console.error("Validation: parentHtmlContainer prop is required!"),t&&s&&console.error("Validation: You should set staticList to false if you use appendToBody!")},getOnlyIds=e=>e.map(e=>e.id);class Treeselect{#htmlContainer=null;#treeselectList=null;#treeselectInput=null;#containerResizer=null;#scrollEvent=null;#resizeEvent=null;#focusEvent=null;#blurEvent=null;constructor({parentHtmlContainer:e,value:t,options:s,openLevel:i,appendToBody:n,alwaysOpen:l,showTags:r,tagsCountText:o,clearable:c,searchable:a,placeholder:d,grouped:h,listSlotHtmlComponent:p,disabled:u,emptyText:m,staticList:L}){validateProps({parentHtmlContainer:e,staticList:L,appendToBody:n}),this.parentHtmlContainer=e,this.value=t??[],this.options=s??[],this.openLevel=i??0,this.appendToBody=n??!0,this.alwaysOpen=l&&!u,this.showTags=r??!0,this.tagsCountText=o??"elements selected",this.clearable=c??!0,this.searchable=a??!0,this.placeholder=d??"Search...",this.grouped=h??!0,this.listSlotHtmlComponent=p??null,this.disabled=u??!1,this.emptyText=m??"No results found...",this.staticList=L&&!this.appendToBody,this.isListOpened=!1,this.srcElement=null,this.mount()}mount(){this.destroy(),this.srcElement=this.#createTreeselect(),this.#scrollEvent=this.scrollWindowHandler.bind(this),this.#resizeEvent=this.scrollWindowHandler.bind(this),this.#focusEvent=this.focusWindowHandler.bind(this),this.#blurEvent=this.blurWindowHandler.bind(this),this.alwaysOpen&&this.#treeselectInput.openClose(),this.disabled&&this.srcElement.classList.add("treeselect--disabled")}updateValue(e){const t=this.#treeselectList;t.updateValue(e);var{groupedNodes:e,nodes:s}=t.selectedNodes,e=this.grouped?e:s;this.#treeselectInput.updateValue(e)}destroy(){this.srcElement&&(this.#closeList(),this.srcElement.innerHTML="",this.srcElement=null,this.#removeOutsideListeners(!0))}focus(){this.#treeselectInput&&this.#treeselectInput.focus()}toggleOpenClose(){this.#treeselectInput&&(this.#treeselectInput.openClose(),this.#treeselectInput.focus())}#createTreeselect(){const e=this.parentHtmlContainer,t=(e.classList.add("treeselect"),new TreeselectList({options:this.options,value:this.value,openLevel:this.openLevel,listSlotHtmlComponent:this.listSlotHtmlComponent,emptyText:this.emptyText}));var{groupedNodes:s,nodes:i}=t.selectedNodes;const n=new TreeselectInput({value:this.grouped?s:i,showTags:this.showTags,tagsCountText:this.tagsCountText,clearable:this.clearable,isAlwaysOpened:this.alwaysOpen,searchable:this.searchable,placeholder:this.placeholder,disabled:this.disabled});return this.appendToBody&&(this.#containerResizer=new ResizeObserver(()=>{this.updateListPosition()})),n.srcElement.addEventListener("input",e=>{e=getOnlyIds(e.detail),t.updateValue(e),e=t.selectedNodes.nodes;this.value=getOnlyIds(e),this.#emitInput()}),n.srcElement.addEventListener("open",()=>this.#openList()),n.srcElement.addEventListener("keydown",e=>{this.isListOpened&&t.callKeyAction(e.key)}),n.srcElement.addEventListener("search",e=>{t.updateSearchValue(e.detail),this.updateListPosition()}),n.srcElement.addEventListener("focus",()=>{this.#updateFocusClasses(!0),document.addEventListener("mousedown",this.#focusEvent,!0),document.addEventListener("focus",this.#focusEvent,!0),window.addEventListener("blur",this.#blurEvent)},!0),this.alwaysOpen||n.srcElement.addEventListener("close",()=>{this.#closeList()}),t.srcElement.addEventListener("mouseup",()=>{n.focus()},!0),t.srcElement.addEventListener("input",e=>{var{groupedNodes:e,nodes:t}=e.detail,e=this.grouped?e:t;n.updateValue(e),this.value=getOnlyIds(t),n.focus(),this.#emitInput()}),t.srcElement.addEventListener("arrow-click",()=>{n.focus(),this.updateListPosition()}),this.#htmlContainer=e,this.#treeselectList=t,this.#treeselectInput=n,e.append(n.srcElement),e}#openList(){this.isListOpened=!0,window.addEventListener("scroll",this.#scrollEvent,!0),window.addEventListener("resize",this.#resizeEvent),this.appendToBody?(document.body.appendChild(this.#treeselectList.srcElement),this.#containerResizer.observe(this.#htmlContainer)):this.#htmlContainer.appendChild(this.#treeselectList.srcElement),this.updateListPosition(),this.#updateOpenCloseClasses(!0),this.#treeselectList.focusFirstListElement()}#closeList(){this.isListOpened=!1,window.removeEventListener("scroll",this.#scrollEvent,!0),window.removeEventListener("resize",this.#resizeEvent),(this.appendToBody?document.body:this.#htmlContainer).contains(this.#treeselectList.srcElement)&&(this.appendToBody?(document.body.removeChild(this.#treeselectList.srcElement),this.#containerResizer?.disconnect()):this.#htmlContainer.removeChild(this.#treeselectList.srcElement),this.#updateOpenCloseClasses(!1))}#updateDirectionClasses(e,t){var s=t?"treeselect-list--top-to-body":"treeselect-list--top",t=t?"treeselect-list--bottom-to-body":"treeselect-list--bottom";e?(this.#treeselectList.srcElement.classList.add(s),this.#treeselectList.srcElement.classList.remove(t),this.#treeselectInput.srcElement.classList.add("treeselect-input--top"),this.#treeselectInput.srcElement.classList.remove("treeselect-input--bottom")):(this.#treeselectList.srcElement.classList.remove(s),this.#treeselectList.srcElement.classList.add(t),this.#treeselectInput.srcElement.classList.remove("treeselect-input--top"),this.#treeselectInput.srcElement.classList.add("treeselect-input--bottom"))}#updateFocusClasses(e){e?(this.#treeselectInput.srcElement.classList.add("treeselect-input--focused"),this.#treeselectList.srcElement.classList.add("treeselect-list--focused")):(this.#treeselectInput.srcElement.classList.remove("treeselect-input--focused"),this.#treeselectList.srcElement.classList.remove("treeselect-list--focused"))}#updateOpenCloseClasses(e){e?this.#treeselectInput.srcElement.classList.add("treeselect-input--opened"):this.#treeselectInput.srcElement.classList.remove("treeselect-input--opened"),this.staticList?this.#treeselectList.srcElement.classList.add("treeselect-list--static"):this.#treeselectList.srcElement.classList.remove("treeselect-list--static")}#removeOutsideListeners(e){this.alwaysOpen&&!e||(window.removeEventListener("scroll",this.#scrollEvent,!0),window.removeEventListener("resize",this.#resizeEvent)),document.removeEventListener("click",this.#focusEvent,!0),document.removeEventListener("focus",this.#focusEvent,!0),window.removeEventListener("blur",this.#blurEvent)}scrollWindowHandler(){this.updateListPosition()}focusWindowHandler(e){this.#htmlContainer.contains(e.target)||this.#treeselectList.srcElement.contains(e.target)||(this.#treeselectInput.blur(),this.#removeOutsideListeners(),this.#updateFocusClasses(!1))}blurWindowHandler(){this.#treeselectInput.blur(),this.#removeOutsideListeners(),this.#updateFocusClasses(!1)}updateListPosition(){const e=this.#treeselectList.srcElement,t=(e.style.transform=null,this.#htmlContainer);var{y:s,height:i}=e.getBoundingClientRect(),{x:n,y:l,height:r,width:o}=t.getBoundingClientRect(),c=window.innerHeight-l-r,c=c<l&&i<=l&&c<i,i=(this.appendToBody&&(e.style.transform=c?`translateY(${l-s-i}px)`:`translateY(${l+r-s}px)`,e.style.width=o+"px",e.style.left=n+window.scrollX+"px"),c?"top":"bottom");e.getAttribute("direction")!==i&&(e.setAttribute("direction",i),this.#updateDirectionClasses(c,this.appendToBody))}#emitInput(){this.srcElement.dispatchEvent(new CustomEvent("input",{detail:this.value}))}}export default Treeselect;