diff --git a/README.md b/README.md index 83877dc..016d6a1 100644 --- a/README.md +++ b/README.md @@ -142,6 +142,8 @@ Name | Type (default) | Description **direction** | String (auto) | A force direction for the list. Supported values: `auto`, `top`, `bottom`. **expandSelected** | Boolean (false) | All groups which have checked values will be expanded on the init. **saveScrollPosition** | Boolean (true) | The list saves the last scroll position before close. If you open the list your scroll will be on the previous position. If you set the value to `false` - the scroll will have position 0 and the first item will be focused every time. +**defaultPadding** | Number (20) | Default padding-left for items in groups (each level add this value as padding-left) +**zeroLevelItemPadding** | Number (5) | Default padding-left for main item in group or single items #### Input settings props Name | Type (default) | Description diff --git a/app/examples/index.js b/app/examples/index.js index 593a0f1..e13d05f 100644 --- a/app/examples/index.js +++ b/app/examples/index.js @@ -4,6 +4,7 @@ import { runDisabledExample } from './disabled' import { runSingleSelectExample } from './singleSelect' import { runIndependentNodesExample } from './independentNodes' import { runIconsExample } from './icons' +import { runNoGroupsExample } from './noGroups' export const runApp = (Treeselect) => { runDefaultExample(Treeselect) @@ -12,4 +13,5 @@ export const runApp = (Treeselect) => { runSingleSelectExample(Treeselect) runIndependentNodesExample(Treeselect) runIconsExample(Treeselect) + runNoGroupsExample(Treeselect) } diff --git a/app/examples/noGroups.js b/app/examples/noGroups.js new file mode 100644 index 0000000..ceaaa8a --- /dev/null +++ b/app/examples/noGroups.js @@ -0,0 +1,52 @@ +const options = [ + { + name: 'England', + value: 1, + }, + { + name: 'London', + value: 2, + }, + { + name: 'Chelsea', + value: 3 + }, + { + name: 'West End', + value: 4 + }, + { + name: 'Brighton', + value: 5 + }, + { + name: 'France', + value: 6 + }, + { + name: 'Paris', + value: 7 + }, + { + name: 'Lyon', + value: 8 + }, +] + +const className = '.treeselect-demo-no-groups' + +export const runNoGroupsExample = (Treeselect) => { + const domElement = document.querySelector(className) + const treeselect = new Treeselect({ + parentHtmlContainer: domElement, + value: 4, + options: options, + isSingleSelect: true, + showTags: false, + zeroLevelItemPadding: 20 + }) + + treeselect.srcElement.addEventListener('input', (e) => { + console.log('singleSelect: Selected value ', e.detail) + }) +} diff --git a/app/index.html b/app/index.html index 974945b..e8e10d5 100644 --- a/app/index.html +++ b/app/index.html @@ -1,25 +1,27 @@ - - - - - - - - - Treeselect JS App - - - -
-

Treeselect JS Demo

- -
-

Treeselect with default props

-
-
- 
+
+
+  
+  
+  
+  
+  
+  
+  
+  Treeselect JS App
+  
+
+
+
+  

+    
Treeselect JS Demo

+    
+    

+      
Treeselect with default props

+      

+        

+        
 
   parentHtmlContainer: document.querySelector(className),
   value: [4, 7, 8],
@@ -70,16 +72,16 @@ 
Treeselect JS Demo

   ]
 
           

-        

-      

+
+
-
- -
-

Treeselect with slot

-
-
- 
+    

+    
+    

+      
Treeselect with slot

+      

+        

+        
 
   const slot = document.createElement('div')
   slot.innerHTML = '<a href="">Click!</a>'
@@ -118,16 +120,16 @@ 
Treeselect JS Demo

   ]
 
           

-        

-      

+
+
-
- -
-

Treeselect with disabled

-
-
- 
+    

+    
+    

+      
Treeselect with disabled

+      

+        

+        
 
   parentHtmlContainer: document.querySelector(className),
   value: [],
@@ -180,16 +182,16 @@ 
Treeselect JS Demo

   ]
 
           

-        

-      

+
+
-
- -
-

Treeselect with single select prop

-
-
- 
+    

+    
+    

+      
Treeselect with single select prop

+      

+        

+        
 
   parentHtmlContainer: document.querySelector(className),
   value: 4,
@@ -242,16 +244,67 @@ 
Treeselect JS Demo

   ]
 
           

-        

-      

+
+
-
- -
-

Treeselect with independent nodes prop

-
-
- 
+    

+    
+    

+      
Treeselect with no groups

+      

+        

+        
+      
+        parentHtmlContainer: document.querySelector(className),
+        value: 4,
+        isSingleSelect: true,
+        showTags: false,
+        options: [
+          {
+          name: 'England',
+          value: 1,
+          },
+          {
+          name: 'London',
+          value: 2,
+          },
+          {
+          name: 'Chelsea',
+          value: 3
+          },
+          {
+          name: 'West End',
+          value: 4
+          },
+          {
+          name: 'Brighton',
+          value: 5
+          },
+          {
+          name: 'France',
+          value: 6
+          },
+          {
+          name: 'Paris',
+          value: 7
+          },
+          {
+          name: 'Lyon',
+          value: 8
+          },
+        ]
+      
+                

+      

+    

+
+    

+    
+    

+      
Treeselect with independent nodes prop

+      

+        

+        
 
   parentHtmlContainer: document.querySelector(className),
   value: [1, 4, 7, 8],
@@ -303,16 +356,16 @@ 
Treeselect JS Demo

   ]
 
           

-        

-      

+
+
-
- -
-

Treeselect example with icons for appendToBody: false (workaround approach)

-
-
- 
+    

+    
+    

+      
Treeselect example with icons for appendToBody: false (workaround approach)

+      

+        

+        
 
   const icons = {
     check: 'ico-check',
@@ -424,8 +477,9 @@ 
Treeselect JS Demo

   }
 
           

-        

-      

-
- - + + + + + + \ No newline at end of file diff --git a/demo/static/treeselectjs.d.ts b/demo/static/treeselectjs.d.ts index 6b49e63..4a35afe 100644 --- a/demo/static/treeselectjs.d.ts +++ b/demo/static/treeselectjs.d.ts @@ -1,167 +1,173 @@ -export declare type DirectionType = 'auto' | 'top' | 'bottom'; - -export declare 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; -}; - -declare interface ITreeselect { - parentHtmlContainer: HTMLElement; - value: ValueType; - options: OptionType[]; - openLevel: number; - appendToBody: boolean; - alwaysOpen: boolean; - showTags: boolean; - tagsCountText: string; - clearable: boolean; - searchable: boolean; - placeholder: string; - grouped: boolean; - isGroupedValue: boolean; - listSlotHtmlComponent: HTMLElement | null; - disabled: boolean; - emptyText: string; - staticList: boolean; - id: string; - ariaLabel: string; - isSingleSelect: boolean; - showCount: boolean; - disabledBranchNode: boolean; - direction: DirectionType; - expandSelected: boolean; - saveScrollPosition: boolean; - isIndependentNodes: boolean; - rtl: boolean; - iconElements: IconsType; - ungroupedValue: ValueOptionType[]; - groupedValue: ValueOptionType[]; - isListOpened: boolean; - selectedName: string; - srcElement: HTMLElement | null; - inputCallback: ((value: ValueType) => void) | undefined; - openCallback: ((value: ValueType) => void) | undefined; - closeCallback: ((value: ValueType) => void) | undefined; - nameChangeCallback: ((name: string) => void) | undefined; - searchCallback: ((value: string) => void) | undefined; - openCloseGroupCallback: ((groupId: ValueOptionType, isClosed: boolean) => void) | undefined; - mount: () => void; - updateValue: (newValue: ValueInputType) => void; - destroy: () => void; - focus: () => void; - toggleOpenClose: () => void; -} - -export declare interface ITreeselectParams { - parentHtmlContainer: HTMLElement; - value?: ValueInputType; - options?: OptionType[]; - openLevel?: number; - appendToBody?: boolean; - alwaysOpen?: boolean; - showTags?: boolean; - tagsCountText?: string; - clearable?: boolean; - searchable?: boolean; - placeholder?: string; - grouped?: boolean; - isGroupedValue?: boolean; - listSlotHtmlComponent?: HTMLElement | null; - disabled?: boolean; - emptyText?: string; - staticList?: boolean; - id?: string; - ariaLabel?: string; - isSingleSelect?: boolean; - showCount?: boolean; - disabledBranchNode?: boolean; - direction?: DirectionType; - expandSelected?: boolean; - saveScrollPosition?: boolean; - isIndependentNodes?: boolean; - rtl?: boolean; - iconElements?: Partial; - inputCallback?: (value: ValueType) => void; - openCallback?: (value: ValueType) => void; - closeCallback?: (value: ValueType) => void; - nameChangeCallback?: (name: string) => void; - searchCallback?: (value: string) => void; - openCloseGroupCallback?: (groupId: ValueOptionType, isClosed: boolean) => void; -} - -export declare type OptionType = { - value: ValueOptionType; - name: string; - disabled?: boolean; - htmlAttr?: object; - children: OptionType[]; -}; - -declare class Treeselect implements ITreeselect { - #private; - parentHtmlContainer: HTMLElement; - value: ValueType; - options: OptionType[]; - openLevel: number; - appendToBody: boolean; - alwaysOpen: boolean; - showTags: boolean; - tagsCountText: string; - clearable: boolean; - searchable: boolean; - placeholder: string; - grouped: boolean; - isGroupedValue: boolean; - listSlotHtmlComponent: HTMLElement | null; - disabled: boolean; - emptyText: string; - staticList: boolean; - id: string; - ariaLabel: string; - isSingleSelect: boolean; - showCount: boolean; - disabledBranchNode: boolean; - direction: DirectionType; - expandSelected: boolean; - saveScrollPosition: boolean; - isIndependentNodes: boolean; - rtl: boolean; - iconElements: IconsType; - inputCallback: ((value: ValueType) => void) | undefined; - openCallback: ((value: ValueType) => void) | undefined; - closeCallback: ((value: ValueType) => void) | undefined; - nameChangeCallback: ((name: string) => void) | undefined; - searchCallback: ((value: string) => void) | undefined; - openCloseGroupCallback: ((groupId: ValueOptionType, isClosed: boolean) => void) | undefined; - ungroupedValue: ValueOptionType[]; - groupedValue: ValueOptionType[]; - allValue: ValueOptionType[]; - isListOpened: boolean; - selectedName: string; - srcElement: HTMLElement | null; - constructor({ parentHtmlContainer, value, options, openLevel, appendToBody, alwaysOpen, showTags, tagsCountText, clearable, searchable, placeholder, grouped, isGroupedValue, listSlotHtmlComponent, disabled, emptyText, staticList, id, ariaLabel, isSingleSelect, showCount, disabledBranchNode, direction, expandSelected, saveScrollPosition, isIndependentNodes, rtl, iconElements, inputCallback, openCallback, closeCallback, nameChangeCallback, searchCallback, openCloseGroupCallback }: ITreeselectParams); - mount(): void; - updateValue(newValue: ValueInputType): void; - destroy(): void; - focus(): void; - toggleOpenClose(): void; - scrollWindowHandler(): void; - focusWindowHandler(e: Event): void; - blurWindowHandler(): void; - updateListPosition(): void; -} -export default Treeselect; - -export declare type ValueInputType = ValueOptionType[] | ValueOptionType | null | undefined; - -declare type ValueOptionType = string | number; - -export declare type ValueType = ValueOptionType[] | ValueOptionType | null; - -export { } +export declare type DirectionType = 'auto' | 'top' | 'bottom'; + +export declare 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; +}; + +declare interface ITreeselect { + parentHtmlContainer: HTMLElement; + value: ValueType; + options: OptionType[]; + openLevel: number; + appendToBody: boolean; + alwaysOpen: boolean; + showTags: boolean; + tagsCountText: string; + clearable: boolean; + searchable: boolean; + placeholder: string; + grouped: boolean; + isGroupedValue: boolean; + listSlotHtmlComponent: HTMLElement | null; + disabled: boolean; + emptyText: string; + staticList: boolean; + id: string; + ariaLabel: string; + isSingleSelect: boolean; + showCount: boolean; + disabledBranchNode: boolean; + direction: DirectionType; + expandSelected: boolean; + saveScrollPosition: boolean; + isIndependentNodes: boolean; + rtl: boolean; + defaultPadding: number; + zeroLevelItemPadding: number; + iconElements: IconsType; + ungroupedValue: ValueOptionType[]; + groupedValue: ValueOptionType[]; + isListOpened: boolean; + selectedName: string; + srcElement: HTMLElement | null; + inputCallback: ((value: ValueType) => void) | undefined; + openCallback: ((value: ValueType) => void) | undefined; + closeCallback: ((value: ValueType) => void) | undefined; + nameChangeCallback: ((name: string) => void) | undefined; + searchCallback: ((value: string) => void) | undefined; + openCloseGroupCallback: ((groupId: ValueOptionType, isClosed: boolean) => void) | undefined; + mount: () => void; + updateValue: (newValue: ValueInputType) => void; + destroy: () => void; + focus: () => void; + toggleOpenClose: () => void; +} + +export declare interface ITreeselectParams { + parentHtmlContainer: HTMLElement; + value?: ValueInputType; + options?: OptionType[]; + openLevel?: number; + appendToBody?: boolean; + alwaysOpen?: boolean; + showTags?: boolean; + tagsCountText?: string; + clearable?: boolean; + searchable?: boolean; + placeholder?: string; + grouped?: boolean; + isGroupedValue?: boolean; + listSlotHtmlComponent?: HTMLElement | null; + disabled?: boolean; + emptyText?: string; + staticList?: boolean; + id?: string; + ariaLabel?: string; + isSingleSelect?: boolean; + showCount?: boolean; + disabledBranchNode?: boolean; + direction?: DirectionType; + expandSelected?: boolean; + saveScrollPosition?: boolean; + isIndependentNodes?: boolean; + rtl?: boolean; + defaultPadding?: number; + zeroLevelItemPadding?: number; + iconElements?: Partial; + inputCallback?: (value: ValueType) => void; + openCallback?: (value: ValueType) => void; + closeCallback?: (value: ValueType) => void; + nameChangeCallback?: (name: string) => void; + searchCallback?: (value: string) => void; + openCloseGroupCallback?: (groupId: ValueOptionType, isClosed: boolean) => void; +} + +export declare type OptionType = { + value: ValueOptionType; + name: string; + disabled?: boolean; + htmlAttr?: object; + children: OptionType[]; +}; + +declare class Treeselect implements ITreeselect { + #private; + parentHtmlContainer: HTMLElement; + value: ValueType; + options: OptionType[]; + openLevel: number; + appendToBody: boolean; + alwaysOpen: boolean; + showTags: boolean; + tagsCountText: string; + clearable: boolean; + searchable: boolean; + placeholder: string; + grouped: boolean; + isGroupedValue: boolean; + listSlotHtmlComponent: HTMLElement | null; + disabled: boolean; + emptyText: string; + staticList: boolean; + id: string; + ariaLabel: string; + isSingleSelect: boolean; + showCount: boolean; + disabledBranchNode: boolean; + direction: DirectionType; + expandSelected: boolean; + saveScrollPosition: boolean; + isIndependentNodes: boolean; + rtl: boolean; + defaultPadding: number; + zeroLevelItemPadding: number; + iconElements: IconsType; + inputCallback: ((value: ValueType) => void) | undefined; + openCallback: ((value: ValueType) => void) | undefined; + closeCallback: ((value: ValueType) => void) | undefined; + nameChangeCallback: ((name: string) => void) | undefined; + searchCallback: ((value: string) => void) | undefined; + openCloseGroupCallback: ((groupId: ValueOptionType, isClosed: boolean) => void) | undefined; + ungroupedValue: ValueOptionType[]; + groupedValue: ValueOptionType[]; + allValue: ValueOptionType[]; + isListOpened: boolean; + selectedName: string; + srcElement: HTMLElement | null; + constructor({ parentHtmlContainer, value, options, openLevel, appendToBody, alwaysOpen, showTags, tagsCountText, clearable, searchable, placeholder, grouped, isGroupedValue, listSlotHtmlComponent, disabled, emptyText, staticList, id, ariaLabel, isSingleSelect, showCount, disabledBranchNode, direction, expandSelected, saveScrollPosition, isIndependentNodes, rtl, defaultPadding, zeroLevelItemPadding, iconElements, inputCallback, openCallback, closeCallback, nameChangeCallback, searchCallback, openCloseGroupCallback }: ITreeselectParams); + mount(): void; + updateValue(newValue: ValueInputType): void; + destroy(): void; + focus(): void; + toggleOpenClose(): void; + scrollWindowHandler(): void; + focusWindowHandler(e: Event): void; + blurWindowHandler(): void; + updateListPosition(): void; +} +export default Treeselect; + +export declare type ValueInputType = ValueOptionType[] | ValueOptionType | null | undefined; + +declare type ValueOptionType = string | number; + +export declare type ValueType = ValueOptionType[] | ValueOptionType | null; + +export { } diff --git a/demo/static/treeselectjs.mjs b/demo/static/treeselectjs.mjs index b53d1ef..1cc9eef 100644 --- a/demo/static/treeselectjs.mjs +++ b/demo/static/treeselectjs.mjs @@ -1,16 +1,16 @@ -var ri = Object.defineProperty; -var ci = (l, e, t) => e in l ? ri(l, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : l[e] = t; -var c = (l, e, t) => (ci(l, typeof e != "symbol" ? e + "" : e, t), t), kt = (l, e, t) => { +var di = Object.defineProperty; +var hi = (l, e, t) => e in l ? di(l, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : l[e] = t; +var c = (l, e, t) => (hi(l, typeof e != "symbol" ? e + "" : e, t), t), vt = (l, e, t) => { if (!e.has(l)) throw TypeError("Cannot " + t); }; -var n = (l, e, t) => (kt(l, e, "read from private field"), t ? t.call(l) : e.get(l)), r = (l, e, t) => { +var n = (l, e, t) => (vt(l, e, "read from private field"), t ? t.call(l) : e.get(l)), o = (l, e, t) => { if (e.has(l)) throw TypeError("Cannot add the same private member more than once"); e instanceof WeakSet ? e.add(l) : e.set(l, t); -}, m = (l, e, t, s) => (kt(l, e, "write to private field"), s ? s.call(l, t) : e.set(l, t), t); -var o = (l, e, t) => (kt(l, e, "access private method"), t); -const Pt = { +}, f = (l, e, t, s) => (vt(l, e, "write to private field"), s ? s.call(l, t) : e.set(l, t), t); +var r = (l, e, t) => (vt(l, e, "access private method"), t); +const Ot = { arrowUp: '', arrowDown: '', arrowRight: '', @@ -28,59 +28,59 @@ const Pt = { } }, Bt = (l) => { const e = l ? { ...l } : {}; - return Object.keys(Pt).forEach((t) => { - e[t] || (e[t] = Pt[t]); + return Object.keys(Ot).forEach((t) => { + e[t] || (e[t] = Ot[t]); }), e; -}, hi = (l) => l.reduce((e, { name: t }, s) => (e += t, s < l.length - 1 && (e += ", "), e), ""); -var N, E, D, v, ue, Ht, H, W, pe, Gt, me, Mt, G, U, O, V, fe, Ft, be, qt, Ce, jt, ge, Rt, ke, $t, we, Wt, Ee, Ut, ve, zt, Le, Yt, ye, Kt, xe, Xt, Se, Jt, _e, Zt, Ae, Qt, Te, es, Ne, ts, z, wt; -class di { +}, ui = (l) => l.reduce((e, { name: t }, s) => (e += t, s < l.length - 1 && (e += ", "), e), ""); +var N, w, H, E, ue, Ht, G, W, pe, Gt, me, Mt, M, U, P, D, fe, Ft, be, zt, Ce, qt, ge, jt, ve, Rt, ke, $t, we, Wt, Ee, Ut, Le, Yt, ye, Kt, xe, Xt, Se, Jt, _e, Zt, Ae, Qt, Te, es, Ne, ts, Y, kt; +class pi { constructor({ value: e, showTags: t, tagsCountText: s, clearable: i, isAlwaysOpened: a, - searchable: h, - placeholder: d, - disabled: C, - isSingleSelect: f, - id: b, + searchable: d, + placeholder: h, + disabled: b, + isSingleSelect: m, + id: C, ariaLabel: g, - iconElements: k, - inputCallback: w, + iconElements: v, + inputCallback: k, searchCallback: y, openCallback: x, - closeCallback: $, - keydownCallback: ae, + closeCallback: V, + keydownCallback: z, focusCallback: Ct, blurCallback: gt, - nameChangeCallback: oe + nameChangeCallback: re }) { // Private methods - r(this, ue); - r(this, H); - r(this, pe); - r(this, me); - r(this, G); - r(this, O); - r(this, fe); - r(this, be); - r(this, Ce); - r(this, ge); - r(this, ke); - r(this, we); - r(this, Ee); - r(this, ve); - r(this, Le); - r(this, ye); - r(this, xe); - r(this, Se); - r(this, _e); - r(this, Ae); - r(this, Te); - r(this, Ne); + o(this, ue); + o(this, G); + o(this, pe); + o(this, me); + o(this, M); + o(this, P); + o(this, fe); + o(this, be); + o(this, Ce); + o(this, ge); + o(this, ve); + o(this, ke); + o(this, we); + o(this, Ee); + o(this, Le); + o(this, ye); + o(this, xe); + o(this, Se); + o(this, _e); + o(this, Ae); + o(this, Te); + o(this, Ne); // Emits - r(this, z); + o(this, Y); // Props c(this, "value"); c(this, "showTags"); @@ -99,10 +99,10 @@ class di { c(this, "searchText"); c(this, "srcElement"); // PrivateInnerState - r(this, N, void 0); - r(this, E, void 0); - r(this, D, void 0); - r(this, v, void 0); + o(this, N, void 0); + o(this, w, void 0); + o(this, H, void 0); + o(this, E, void 0); // Callbacks c(this, "inputCallback"); c(this, "searchCallback"); @@ -112,80 +112,80 @@ class di { c(this, "focusCallback"); c(this, "blurCallback"); c(this, "nameChangeCallback"); - this.value = e, this.showTags = t, this.tagsCountText = s, this.searchable = h, this.placeholder = d, this.clearable = i, this.isAlwaysOpened = a, this.disabled = C, this.isSingleSelect = f, this.id = b, this.ariaLabel = g, this.iconElements = k, this.isOpened = !1, this.searchText = "", m(this, N, o(this, Ce, jt).call(this)), m(this, E, o(this, Le, Yt).call(this)), m(this, D, o(this, Se, Jt).call(this)), m(this, v, null), this.inputCallback = w, this.searchCallback = y, this.openCallback = x, this.closeCallback = $, this.keydownCallback = ae, this.focusCallback = Ct, this.blurCallback = gt, this.nameChangeCallback = oe, this.srcElement = o(this, fe, Ft).call(this, n(this, N), n(this, E), n(this, D)), o(this, ue, Ht).call(this); + this.value = e, this.showTags = t, this.tagsCountText = s, this.searchable = d, this.placeholder = h, this.clearable = i, this.isAlwaysOpened = a, this.disabled = b, this.isSingleSelect = m, this.id = C, this.ariaLabel = g, this.iconElements = v, this.isOpened = !1, this.searchText = "", f(this, N, r(this, Ce, qt).call(this)), f(this, w, r(this, Le, Yt).call(this)), f(this, H, r(this, Se, Jt).call(this)), f(this, E, null), this.inputCallback = k, this.searchCallback = y, this.openCallback = x, this.closeCallback = V, this.keydownCallback = z, this.focusCallback = Ct, this.blurCallback = gt, this.nameChangeCallback = re, this.srcElement = r(this, fe, Ft).call(this, n(this, N), n(this, w), n(this, H)), r(this, ue, Ht).call(this); } // Public methods focus() { - setTimeout(() => n(this, E).focus(), 0); + setTimeout(() => n(this, w).focus(), 0); } blur() { - this.isOpened && o(this, O, V).call(this), this.clearSearch(), n(this, E).blur(); + this.isOpened && r(this, P, D).call(this), this.clearSearch(), n(this, w).blur(); } updateValue(e) { - this.value = e, o(this, H, W).call(this), o(this, G, U).call(this); + this.value = e, r(this, G, W).call(this), r(this, M, U).call(this); } removeItem(e) { - this.value = this.value.filter((t) => t.id !== e), o(this, z, wt).call(this), o(this, H, W).call(this), o(this, G, U).call(this); + this.value = this.value.filter((t) => t.id !== e), r(this, Y, kt).call(this), r(this, G, W).call(this), r(this, M, U).call(this); } clear() { - this.value = [], o(this, z, wt).call(this), o(this, H, W).call(this), this.clearSearch(); + this.value = [], r(this, Y, kt).call(this), r(this, G, W).call(this), this.clearSearch(); } openClose() { - o(this, O, V).call(this); + r(this, P, D).call(this); } clearSearch() { - this.searchText = "", this.searchCallback(""), o(this, G, U).call(this); + this.searchText = "", this.searchCallback(""), r(this, M, U).call(this); } } -N = new WeakMap(), E = new WeakMap(), D = new WeakMap(), v = new WeakMap(), ue = new WeakSet(), Ht = function() { - o(this, H, W).call(this), o(this, G, U).call(this), o(this, pe, Gt).call(this); -}, H = new WeakSet(), W = function() { +N = new WeakMap(), w = new WeakMap(), H = new WeakMap(), E = new WeakMap(), ue = new WeakSet(), Ht = function() { + r(this, G, W).call(this), r(this, M, U).call(this), r(this, pe, Gt).call(this); +}, G = new WeakSet(), W = function() { if (n(this, N).innerHTML = "", this.showTags) { - n(this, N).append(...o(this, ge, Rt).call(this)); - const e = hi(this.value); + n(this, N).append(...r(this, ge, jt).call(this)); + const e = ui(this.value); this.nameChangeCallback(e); } else { - const e = o(this, ve, zt).call(this); + const e = r(this, Ee, Ut).call(this); n(this, N).appendChild(e), this.nameChangeCallback(e.innerText); } - n(this, N).appendChild(n(this, E)); + n(this, N).appendChild(n(this, w)); }, pe = new WeakSet(), Gt = function() { const e = []; - n(this, D).innerHTML = "", this.clearable && e.push(o(this, _e, Zt).call(this)), this.isAlwaysOpened || e.push(o(this, Te, es).call(this, this.isOpened)), e.length && n(this, D).append(...e); + n(this, H).innerHTML = "", this.clearable && e.push(r(this, _e, Zt).call(this)), this.isAlwaysOpened || e.push(r(this, Te, es).call(this, this.isOpened)), e.length && n(this, H).append(...e); }, me = new WeakSet(), Mt = function() { - if (!this.isAlwaysOpened && n(this, v)) { + if (!this.isAlwaysOpened && n(this, E)) { const e = this.isOpened ? this.iconElements.arrowUp : this.iconElements.arrowDown; - I(e, n(this, v)); + I(e, n(this, E)); } -}, G = new WeakSet(), U = function() { +}, M = new WeakSet(), U = function() { var e; - (e = this.value) != null && e.length ? (n(this, E).removeAttribute("placeholder"), this.srcElement.classList.remove("treeselect-input--value-not-selected")) : (n(this, E).setAttribute("placeholder", this.placeholder), this.srcElement.classList.add("treeselect-input--value-not-selected")), this.searchable ? this.srcElement.classList.remove("treeselect-input--unsearchable") : this.srcElement.classList.add("treeselect-input--unsearchable"), this.isSingleSelect ? this.srcElement.classList.add("treeselect-input--is-single-select") : this.srcElement.classList.remove("treeselect-input--is-single-select"), n(this, E).value = this.searchText; -}, O = new WeakSet(), V = function() { - this.isOpened = !this.isOpened, o(this, me, Mt).call(this), this.isOpened ? this.openCallback() : this.closeCallback(); + (e = this.value) != null && e.length ? (n(this, w).removeAttribute("placeholder"), this.srcElement.classList.remove("treeselect-input--value-not-selected")) : (n(this, w).setAttribute("placeholder", this.placeholder), this.srcElement.classList.add("treeselect-input--value-not-selected")), this.searchable ? this.srcElement.classList.remove("treeselect-input--unsearchable") : this.srcElement.classList.add("treeselect-input--unsearchable"), this.isSingleSelect ? this.srcElement.classList.add("treeselect-input--is-single-select") : this.srcElement.classList.remove("treeselect-input--is-single-select"), n(this, w).value = this.searchText; +}, P = new WeakSet(), D = function() { + this.isOpened = !this.isOpened, r(this, me, Mt).call(this), this.isOpened ? this.openCallback() : this.closeCallback(); }, fe = new WeakSet(), Ft = function(e, t, s) { const i = document.createElement("div"); - return i.classList.add("treeselect-input"), i.setAttribute("tabindex", "-1"), i.addEventListener("mousedown", (a) => o(this, be, qt).call(this, a)), i.addEventListener("focus", () => this.focusCallback(), !0), i.addEventListener("blur", () => this.blurCallback(), !0), e.appendChild(t), i.append(e, s), i; -}, be = new WeakSet(), qt = function(e) { - e.stopPropagation(), this.isOpened || o(this, O, V).call(this), this.focus(); -}, Ce = new WeakSet(), jt = function() { + return i.classList.add("treeselect-input"), i.setAttribute("tabindex", "-1"), i.addEventListener("mousedown", (a) => r(this, be, zt).call(this, a)), i.addEventListener("focus", () => this.focusCallback(), !0), i.addEventListener("blur", () => this.blurCallback(), !0), e.appendChild(t), i.append(e, s), i; +}, be = new WeakSet(), zt = function(e) { + e.stopPropagation(), this.isOpened || r(this, P, D).call(this), this.focus(); +}, Ce = new WeakSet(), qt = function() { const e = document.createElement("div"); return e.classList.add("treeselect-input__tags"), e; -}, ge = new WeakSet(), Rt = function() { +}, ge = new WeakSet(), jt = function() { 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 = o(this, we, Wt).call(this, e.name), i = o(this, Ee, Ut).call(this); - return t.addEventListener("mousedown", (a) => o(this, ke, $t).call(this, a, e.id)), t.append(s, i), t; + const s = r(this, ke, $t).call(this, e.name), i = r(this, we, Wt).call(this); + return t.addEventListener("mousedown", (a) => r(this, ve, Rt).call(this, a, e.id)), t.append(s, i), t; }); -}, ke = new WeakSet(), $t = function(e, t) { +}, ve = new WeakSet(), Rt = function(e, t) { e.preventDefault(), e.stopPropagation(), this.removeItem(t), this.focus(); -}, we = new WeakSet(), Wt = function(e) { +}, ke = new WeakSet(), $t = function(e) { const t = document.createElement("span"); return t.classList.add("treeselect-input__tags-name"), t.textContent = e, t; -}, Ee = new WeakSet(), Ut = function() { +}, we = new WeakSet(), Wt = function() { const e = document.createElement("span"); return e.classList.add("treeselect-input__tags-cross"), I(this.iconElements.cross, e), e; -}, ve = new WeakSet(), zt = function() { +}, Ee = new WeakSet(), Ut = function() { const e = document.createElement("span"); if (e.classList.add("treeselect-input__tags-count"), !this.value.length) return e.textContent = "", e.setAttribute("title", ""), e; @@ -193,11 +193,11 @@ N = new WeakMap(), E = new WeakMap(), D = new WeakMap(), v = new WeakMap(), ue = return e.textContent = t, e.setAttribute("title", t), e; }, Le = new WeakSet(), Yt = function() { const e = document.createElement("input"); - return e.classList.add("treeselect-input__edit"), this.id && e.setAttribute("id", this.id), (!this.searchable || this.disabled) && e.setAttribute("readonly", "readonly"), this.disabled && e.setAttribute("tabindex", "-1"), this.ariaLabel.length && e.setAttribute("aria-label", this.ariaLabel), e.addEventListener("keydown", (t) => o(this, ye, Kt).call(this, t)), e.addEventListener("input", (t) => o(this, xe, Xt).call(this, t, e)), e; + return e.classList.add("treeselect-input__edit"), this.id && e.setAttribute("id", this.id), (!this.searchable || this.disabled) && e.setAttribute("readonly", "readonly"), this.disabled && e.setAttribute("tabindex", "-1"), this.ariaLabel.length && e.setAttribute("aria-label", this.ariaLabel), e.addEventListener("keydown", (t) => r(this, ye, Kt).call(this, t)), e.addEventListener("input", (t) => r(this, xe, Xt).call(this, t, e)), e; }, ye = new WeakSet(), Kt = function(e) { e.stopPropagation(); const t = e.key; - t === "Backspace" && !this.searchText.length && this.value.length && !this.showTags && this.clear(), t === "Backspace" && !this.searchText.length && this.value.length && this.removeItem(this.value[this.value.length - 1].id), e.code === "Space" && (!this.searchText || !this.searchable) && o(this, O, V).call(this), (t === "Enter" || t === "ArrowDown" || t === "ArrowUp") && e.preventDefault(), this.keydownCallback(e), t !== "Tab" && this.focus(); + t === "Backspace" && !this.searchText.length && this.value.length && !this.showTags && this.clear(), t === "Backspace" && !this.searchText.length && this.value.length && this.removeItem(this.value[this.value.length - 1].id), e.code === "Space" && (!this.searchText || !this.searchable) && r(this, P, D).call(this), (t === "Enter" || t === "ArrowDown" || t === "ArrowUp") && e.preventDefault(), this.keydownCallback(e), t !== "Tab" && this.focus(); }, xe = new WeakSet(), Xt = function(e, t) { e.stopPropagation(); const s = this.searchText, i = t.value.trim(); @@ -207,7 +207,7 @@ N = new WeakMap(), E = new WeakMap(), D = new WeakMap(), v = new WeakMap(), ue = } if (this.searchable) { const a = e.target.value; - this.searchCallback(a), this.isOpened || o(this, O, V).call(this); + this.searchCallback(a), this.isOpened || r(this, P, D).call(this); } else t.value = ""; this.searchText = t.value; @@ -216,32 +216,32 @@ N = new WeakMap(), E = new WeakMap(), D = new WeakMap(), v = new WeakMap(), ue = return e.classList.add("treeselect-input__operators"), e; }, _e = new WeakSet(), Zt = function() { const e = document.createElement("span"); - return e.classList.add("treeselect-input__clear"), e.setAttribute("tabindex", "-1"), I(this.iconElements.clear, e), e.addEventListener("mousedown", (t) => o(this, Ae, Qt).call(this, t)), e; + return e.classList.add("treeselect-input__clear"), e.setAttribute("tabindex", "-1"), I(this.iconElements.clear, e), e.addEventListener("mousedown", (t) => r(this, Ae, Qt).call(this, t)), e; }, Ae = new WeakSet(), Qt = function(e) { e.preventDefault(), e.stopPropagation(), (this.searchText.length || this.value.length) && this.clear(), this.focus(); }, Te = new WeakSet(), es = function(e) { - m(this, v, document.createElement("span")), n(this, v).classList.add("treeselect-input__arrow"); + f(this, E, document.createElement("span")), n(this, E).classList.add("treeselect-input__arrow"); const t = e ? this.iconElements.arrowUp : this.iconElements.arrowDown; - return I(t, n(this, v)), n(this, v).addEventListener("mousedown", (s) => o(this, Ne, ts).call(this, s)), n(this, v); + return I(t, n(this, E)), n(this, E).addEventListener("mousedown", (s) => r(this, Ne, ts).call(this, s)), n(this, E); }, Ne = new WeakSet(), ts = function(e) { - e.stopPropagation(), e.preventDefault(), this.focus(), o(this, O, V).call(this); -}, z = new WeakSet(), wt = function() { + e.stopPropagation(), e.preventDefault(), this.focus(), r(this, P, D).call(this); +}, Y = new WeakSet(), kt = function() { this.inputCallback(this.value); }; const ss = (l, e, t, s) => { - fi(e); - const i = e.filter((a) => !a.disabled && l.some((h) => h === a.id)); + Ci(e); + const i = e.filter((a) => !a.disabled && l.some((d) => d === a.id)); if (t && i.length) { i[0].checked = !0; return; } i.forEach((a) => { a.checked = !0; - const h = It(a, e, s); - a.checked = h; + const d = It(a, e, s); + a.checked = d; }); }, It = ({ id: l, checked: e }, t, s) => { - const i = t.find((h) => h.id === l); + const i = t.find((d) => d.id === l); if (!i) return !1; if (s) @@ -251,33 +251,33 @@ const ss = (l, e, t, s) => { }, is = (l, e, t) => { if (!e.isGroup) return e.checked = e.disabled ? !1 : !!l, e.isPartialChecked = !1, e.checked; - const s = t.filter((d) => d.childOf === e.id); - return !l || e.disabled || e.isPartialChecked ? (e.checked = !1, e.isPartialChecked = !1, Et(e, s, t), e.checked) : ns(s, t) ? as(s) ? (e.checked = !1, e.isPartialChecked = !1, e.disabled = !0, e.checked) : (e.checked = !1, e.isPartialChecked = !0, s.forEach((d) => { - is(l, d, t); - }), e.checked) : (e.checked = !0, e.isPartialChecked = !1, Et(e, s, t), e.checked); + const s = t.filter((h) => h.childOf === e.id); + return !l || e.disabled || e.isPartialChecked ? (e.checked = !1, e.isPartialChecked = !1, wt(e, s, t), e.checked) : ns(s, t) ? as(s) ? (e.checked = !1, e.isPartialChecked = !1, e.disabled = !0, e.checked) : (e.checked = !1, e.isPartialChecked = !0, s.forEach((h) => { + is(l, h, t); + }), e.checked) : (e.checked = !0, e.isPartialChecked = !1, wt(e, s, t), e.checked); }, ls = (l, e) => { const t = e.find((s) => s.id === l.childOf); - t && (ui(t, e), ls(t, e)); -}, ui = (l, e) => { + t && (mi(t, e), ls(t, e)); +}, mi = (l, e) => { const t = ft(l, e); if (as(t)) { l.checked = !1, l.isPartialChecked = !1, l.disabled = !0; return; } - if (pi(t)) { + if (fi(t)) { l.checked = !0, l.isPartialChecked = !1; return; } - if (mi(t)) { + if (bi(t)) { l.checked = !1, l.isPartialChecked = !0; return; } l.checked = !1, l.isPartialChecked = !1; -}, Et = ({ checked: l, disabled: e }, t, s) => { +}, wt = ({ checked: l, disabled: e }, t, s) => { t.forEach((i) => { i.disabled = !!e || !!i.disabled, i.checked = !!l && !i.disabled, i.isPartialChecked = !1; const a = ft(i, s); - Et({ checked: l, disabled: e }, a, s); + wt({ checked: l, disabled: e }, a, s); }); }, ns = (l, e) => l.some((i) => i.disabled) ? !0 : l.some((i) => { if (i.isGroup) { @@ -285,61 +285,61 @@ const ss = (l, e, t, s) => { return ns(a, e); } return !1; -}), as = (l) => l.every((e) => !!e.disabled), pi = (l) => l.every((e) => !!e.checked), mi = (l) => l.some((e) => !!e.checked || !!e.isPartialChecked), fi = (l) => { +}), as = (l) => l.every((e) => !!e.disabled), fi = (l) => l.every((e) => !!e.checked), bi = (l) => l.some((e) => !!e.checked || !!e.isPartialChecked), Ci = (l) => { l.forEach((e) => { e.checked = !1, e.isPartialChecked = !1; }); -}, bi = (l, e, t) => { - const s = { level: 0, groupId: "" }, i = os(l, e, s.groupId, s.level); - return gi(i, t); -}, os = (l, e, t, s) => l.reduce((i, a) => { - var f; - const h = !!((f = a.children) != null && f.length), d = s >= e && h, C = s > e; +}, gi = (l, e, t) => { + const s = { level: 0, groupId: "" }, i = rs(l, e, s.groupId, s.level); + return ki(i, t); +}, rs = (l, e, t, s) => l.reduce((i, a) => { + var m; + const d = !!((m = a.children) != null && m.length), h = s >= e && d, b = s > e; if (i.push({ id: a.value, name: a.name, childOf: t, - isGroup: h, + isGroup: d, checked: !1, isPartialChecked: !1, level: s, - isClosed: d, - hidden: C, + isClosed: h, + hidden: b, disabled: a.disabled ?? !1 - }), h) { - const b = os(a.children, e, a.value, s + 1); - i.push(...b); + }), d) { + const C = rs(a.children, e, a.value, s + 1); + i.push(...C); } return i; -}, []), ft = ({ id: l }, e) => e.filter((t) => t.childOf === l), Ci = (l) => { +}, []), ft = ({ id: l }, e) => e.filter((t) => t.childOf === l), vi = (l) => { const { ungroupedNodes: e, allGroupedNodes: t, allNodes: s } = l.reduce( - (a, h) => (h.checked && (a.allNodes.push(h), h.isGroup ? a.allGroupedNodes.push(h) : a.ungroupedNodes.push(h)), a), + (a, d) => (d.checked && (a.allNodes.push(d), d.isGroup ? a.allGroupedNodes.push(d) : a.ungroupedNodes.push(d)), a), { ungroupedNodes: [], allGroupedNodes: [], allNodes: [] } - ), i = s.filter((a) => !t.some(({ id: h }) => h === a.childOf)); + ), i = s.filter((a) => !t.some(({ id: d }) => d === a.childOf)); return { ungroupedNodes: e, groupedNodes: i, allNodes: s }; -}, gi = (l, e) => (l.filter((s) => !!s.disabled).forEach( +}, ki = (l, e) => (l.filter((s) => !!s.disabled).forEach( ({ id: s }) => It({ id: s, checked: !1 }, l, e) ), l), bt = (l, { id: e, isClosed: t }) => { ft({ id: e }, l).forEach((i) => { i.hidden = t ?? !1, i.isGroup && !i.isClosed && bt(l, { id: i.id, isClosed: t }); }); -}, ki = (l) => { +}, wi = (l) => { l.filter((e) => e.isGroup && !e.disabled && (e.checked || e.isPartialChecked)).forEach((e) => { e.isClosed = !1, bt(l, e); }); -}, wi = (l, e) => { - const t = Ei(l, e); +}, Ei = (l, e) => { + const t = Li(l, e); l.forEach((s) => { t.some(({ id: a }) => a === s.id) ? (s.isGroup && (s.isClosed = !1, bt(l, s)), s.hidden = !1) : s.hidden = !0; }); -}, Ei = (l, e) => l.reduce((t, s) => { +}, Li = (l, e) => l.reduce((t, s) => { if (s.name.toLowerCase().includes(e.toLowerCase())) { if (t.push(s), s.isGroup) { - const a = rs(s.id, l); + const a = os(s.id, l); t.push(...a); } if (s.childOf) { @@ -348,7 +348,7 @@ const ss = (l, e, t, s) => { } } return t; -}, []), rs = (l, e) => e.reduce((t, s) => (s.childOf === l && (t.push(s), s.isGroup && t.push(...rs(s.id, e))), t), []), cs = (l, e) => e.reduce((t, s) => (s.id === l && (t.push(s), s.childOf && t.push(...cs(s.childOf, e))), t), []), vi = (l) => { +}, []), os = (l, e) => e.reduce((t, s) => (s.childOf === l && (t.push(s), s.isGroup && t.push(...os(s.id, e))), t), []), cs = (l, e) => e.reduce((t, s) => (s.id === l && (t.push(s), s.childOf && t.push(...cs(s.childOf, e))), t), []), yi = (l) => { const { duplications: e } = l.reduce( (t, s) => (t.allItems.some((i) => i.toString() === s.id.toString()) && t.duplications.push(s.id), t.allItems.push(s.id), t), { @@ -357,95 +357,104 @@ const ss = (l, e, t, s) => { } ); e.length && console.error(`Validation: You have duplicated values: ${e.join(", ")}! You should use unique values.`); -}, Li = (l, e, t, s, i, a, h, d, C, f) => { - ss(l, e, i, C), d && h && ki(e), ce(e, t, s, a, f); -}, ce = (l, e, t, s, i) => { - l.forEach((a) => { - const h = e.querySelector(`[input-id="${a.id}"]`), d = T(h); - h.checked = a.checked, yi(a, d, s), xi(a, d), Si(a, d), _i(a, d, t), Ai(a, d), Ni(a, d, l, i), Ti(a, h, t); +}, xi = (l, e, t, s, i, a, d, h, b, m, C, g) => { + ss(l, e, i, b), h && d && wi(e), ce( + e, + t, + s, + a, + m, + C, + g + ); +}, ce = (l, e, t, s, i, a, d) => { + l.forEach((h) => { + const b = e.querySelector(`[input-id="${h.id}"]`), m = T(b); + b.checked = h.checked, Si(h, m, s), _i(h, m), Ai(h, m), Ti(h, m, t), Ni(h, m), Ii(h, m, l, i, a, d), Pi(h, b, t); }), Oi(l, e); -}, yi = (l, e, t) => { +}, Si = (l, e, t) => { l.checked ? e.classList.add("treeselect-list__item--checked") : e.classList.remove("treeselect-list__item--checked"), Array.isArray(t) && t[0] === l.id && !l.disabled ? e.classList.add("treeselect-list__item--single-selected") : e.classList.remove("treeselect-list__item--single-selected"); -}, xi = (l, e) => { +}, _i = (l, e) => { l.isPartialChecked ? e.classList.add("treeselect-list__item--partial-checked") : e.classList.remove("treeselect-list__item--partial-checked"); -}, Si = (l, e) => { +}, Ai = (l, e) => { l.disabled ? e.classList.add("treeselect-list__item--disabled") : e.classList.remove("treeselect-list__item--disabled"); -}, _i = (l, e, t) => { +}, Ti = (l, e, t) => { if (l.isGroup) { const s = e.querySelector(".treeselect-list__item-icon"), i = l.isClosed ? t.arrowRight : t.arrowDown; I(i, s), l.isClosed ? e.classList.add("treeselect-list__item--closed") : e.classList.remove("treeselect-list__item--closed"); } -}, Ai = (l, e) => { +}, Ni = (l, e) => { l.hidden ? e.classList.add("treeselect-list__item--hidden") : e.classList.remove("treeselect-list__item--hidden"); -}, Ti = (l, e, t) => { +}, Pi = (l, e, t) => { const i = e.parentNode.querySelector(".treeselect-list__item-checkbox-icon"); l.checked ? I(t.check, i) : l.isPartialChecked ? I(t.partialCheck, i) : i.innerHTML = ""; -}, Ni = (l, e, t, s) => { - const i = l.level === 0, a = 20, h = 5; - if (i) { - const d = t.some((b) => b.isGroup && b.level === l.level), C = !l.isGroup && d ? `${a}px` : `${h}px`, f = l.isGroup ? "0" : C; - s ? e.style.paddingRight = f : e.style.paddingLeft = f; +}, Ii = (l, e, t, s, i, a) => { + if (l.level === 0) { + const h = t.some((C) => C.isGroup && C.level === l.level), b = !l.isGroup && h ? `${i}px` : `${a}px`, m = l.isGroup ? "0" : b; + s ? e.style.paddingRight = m : e.style.paddingLeft = m; } else { - const d = l.isGroup ? `${l.level * a}px` : `${l.level * a + a}px`; - s ? e.style.paddingRight = d : e.style.paddingLeft = d; + const h = l.isGroup ? `${l.level * i}px` : `${l.level * i + i}px`; + s ? e.style.paddingRight = h : e.style.paddingLeft = h; } e.setAttribute("level", l.level.toString()), e.setAttribute("group", l.isGroup.toString()); }, Oi = (l, e) => { const t = l.some((i) => !i.hidden), s = e.querySelector(".treeselect-list__empty"); t ? s.classList.add("treeselect-list__empty--hidden") : s.classList.remove("treeselect-list__empty--hidden"); -}, T = (l) => l.parentNode.parentNode, Vt = (l, e) => e.find((t) => t.id.toString() === l), Ii = (l) => T(l).querySelector(".treeselect-list__item-icon"), Pi = (l, e) => { +}, T = (l) => l.parentNode.parentNode, Vt = (l, e) => e.find((t) => t.id.toString() === l), Bi = (l) => T(l).querySelector(".treeselect-list__item-icon"), Vi = (l, e) => { e && Object.keys(e).forEach((t) => { const s = e[t]; typeof s == "string" && l.setAttribute(t, s); }); }; -var M, P, S, Y, Oe, hs, Ie, ds, Pe, us, Be, ps, Ve, ms, De, fs, K, vt, He, bs, Ge, Cs, Me, gs, X, Lt, Fe, ks, qe, ws, je, Es, Re, vs, $e, Ls, We, ys, Ue, xs, ze, Ss, Ye, _s, Ke, As, Xe, Ts, J, yt, Z, xt, Je, Ns; -class Bi { +var F, O, S, K, Pe, ds, Ie, hs, Oe, us, Be, ps, Ve, ms, De, fs, X, Et, He, bs, Ge, Cs, Me, gs, J, Lt, Fe, vs, ze, ks, qe, ws, je, Es, Re, Ls, $e, ys, We, xs, Ue, Ss, Ye, _s, Ke, As, Xe, Ts, Z, yt, Q, xt, Je, Ns; +class Di { constructor({ options: e, value: t, openLevel: s, listSlotHtmlComponent: i, emptyText: a, - isSingleSelect: h, - iconElements: d, - showCount: C, - disabledBranchNode: f, - expandSelected: b, + isSingleSelect: d, + iconElements: h, + showCount: b, + disabledBranchNode: m, + expandSelected: C, isIndependentNodes: g, - rtl: k, - inputCallback: w, - arrowClickCallback: y, - mouseupCallback: x + rtl: v, + defaultPadding: k, + zeroLevelItemPadding: y, + inputCallback: x, + arrowClickCallback: V, + mouseupCallback: z }) { // Private methods - r(this, Oe); - r(this, Ie); - r(this, Pe); - r(this, Be); - r(this, Ve); - r(this, De); - r(this, K); - r(this, He); - r(this, Ge); - r(this, Me); - r(this, X); - r(this, Fe); - r(this, qe); - r(this, je); - r(this, Re); - r(this, $e); - r(this, We); - r(this, Ue); - r(this, ze); - r(this, Ye); + o(this, Pe); + o(this, Ie); + o(this, Oe); + o(this, Be); + o(this, Ve); + o(this, De); + o(this, X); + o(this, He); + o(this, Ge); + o(this, Me); + o(this, J); + o(this, Fe); + o(this, ze); + o(this, qe); + o(this, je); + o(this, Re); + o(this, $e); + o(this, We); + o(this, Ue); + o(this, Ye); // Actions - r(this, Ke); - r(this, Xe); - r(this, J); - r(this, Z); + o(this, Ke); + o(this, Xe); + o(this, Z); + o(this, Q); // Emits - r(this, Je); + o(this, Je); // Props c(this, "options"); c(this, "value"); @@ -458,6 +467,8 @@ class Bi { c(this, "expandSelected"); c(this, "isIndependentNodes"); c(this, "rtl"); + c(this, "defaultPadding"); + c(this, "zeroLevelItemPadding"); c(this, "iconElements"); // InnerState c(this, "searchText"); @@ -470,15 +481,15 @@ class Bi { c(this, "arrowClickCallback"); c(this, "mouseupCallback"); // PrivateInnerState - r(this, M, null); - r(this, P, !0); - r(this, S, []); - r(this, Y, !0); - this.options = e, this.value = t, this.openLevel = s ?? 0, this.listSlotHtmlComponent = i ?? null, this.emptyText = a ?? "No results found...", this.isSingleSelect = h ?? !1, this.showCount = C ?? !1, this.disabledBranchNode = f ?? !1, this.expandSelected = b ?? !1, this.isIndependentNodes = g ?? !1, this.rtl = k ?? !1, this.iconElements = d, this.searchText = "", this.flattedOptions = bi(this.options, this.openLevel, this.isIndependentNodes), this.flattedOptionsBeforeSearch = this.flattedOptions, this.selectedNodes = { nodes: [], groupedNodes: [], allNodes: [] }, this.srcElement = o(this, Pe, us).call(this), this.inputCallback = w, this.arrowClickCallback = y, this.mouseupCallback = x, vi(this.flattedOptions); + o(this, F, null); + o(this, O, !0); + o(this, S, []); + o(this, K, !0); + this.options = e, this.value = t, this.openLevel = s ?? 0, this.listSlotHtmlComponent = i ?? null, this.emptyText = a ?? "No results found...", this.isSingleSelect = d ?? !1, this.showCount = b ?? !1, this.disabledBranchNode = m ?? !1, this.expandSelected = C ?? !1, this.isIndependentNodes = g ?? !1, this.rtl = v ?? !1, this.defaultPadding = k ?? 20, this.zeroLevelItemPadding = y ?? 5, this.iconElements = h, this.searchText = "", this.flattedOptions = gi(this.options, this.openLevel, this.isIndependentNodes), this.flattedOptionsBeforeSearch = this.flattedOptions, this.selectedNodes = { nodes: [], groupedNodes: [], allNodes: [] }, this.srcElement = r(this, Oe, us).call(this), this.inputCallback = x, this.arrowClickCallback = V, this.mouseupCallback = z, yi(this.flattedOptions); } // Public methods updateValue(e) { - this.value = e, m(this, S, this.isSingleSelect ? this.value : []), Li( + this.value = e, f(this, S, this.isSingleSelect ? this.value : []), xi( e, this.flattedOptions, this.srcElement, @@ -486,10 +497,12 @@ class Bi { this.isSingleSelect, n(this, S), this.expandSelected, - n(this, Y), + n(this, K), this.isIndependentNodes, - this.rtl - ), m(this, Y, !1), o(this, Z, xt).call(this); + this.rtl, + this.defaultPadding, + this.zeroLevelItemPadding + ), f(this, K, !1), r(this, Q, xt).call(this); } updateSearchValue(e) { if (e === this.searchText) @@ -498,15 +511,23 @@ class Bi { this.searchText = e, t && (this.flattedOptionsBeforeSearch = JSON.parse(JSON.stringify(this.flattedOptions))), this.searchText === "" && (this.flattedOptions = this.flattedOptionsBeforeSearch.map((s) => { const i = this.flattedOptions.find((a) => a.id === s.id); return i.isClosed = s.isClosed, i.hidden = s.hidden, i; - }), this.flattedOptionsBeforeSearch = []), this.searchText && wi(this.flattedOptions, e), ce(this.flattedOptions, this.srcElement, this.iconElements, n(this, S), this.rtl), this.focusFirstListElement(); + }), this.flattedOptionsBeforeSearch = []), this.searchText && Ei(this.flattedOptions, e), ce( + this.flattedOptions, + this.srcElement, + this.iconElements, + n(this, S), + this.rtl, + this.defaultPadding, + this.zeroLevelItemPadding + ), this.focusFirstListElement(); } callKeyAction(e) { - m(this, P, !1); + f(this, O, !1); const t = this.srcElement.querySelector(".treeselect-list__item--focused"); if (t == null ? void 0 : t.classList.contains("treeselect-list__item--hidden")) return; const i = e.key; - i === "Enter" && t && t.dispatchEvent(new Event("mousedown")), (i === "ArrowLeft" || i === "ArrowRight") && o(this, Oe, hs).call(this, t, e), (i === "ArrowDown" || i === "ArrowUp") && o(this, Ie, ds).call(this, t, i); + i === "Enter" && t && t.dispatchEvent(new Event("mousedown")), (i === "ArrowLeft" || i === "ArrowRight") && r(this, Pe, ds).call(this, t, e), (i === "ArrowDown" || i === "ArrowUp") && r(this, Ie, hs).call(this, t, i); } focusFirstListElement() { const e = "treeselect-list__item--focused", t = this.srcElement.querySelector(`.${e}`), s = Array.from(this.srcElement.querySelectorAll(".treeselect-list__item-checkbox")).filter( @@ -517,15 +538,15 @@ class Bi { t && t.classList.remove(e), T(s[0]).classList.add(e); } isLastFocusedElementExist() { - return !!n(this, M); + return !!n(this, F); } } -M = new WeakMap(), P = new WeakMap(), S = new WeakMap(), Y = new WeakMap(), Oe = new WeakSet(), hs = function(e, t) { +F = new WeakMap(), O = new WeakMap(), S = new WeakMap(), K = new WeakMap(), Pe = new WeakSet(), ds = function(e, t) { if (!e) return; - const s = t.key, a = e.querySelector(".treeselect-list__item-checkbox").getAttribute("input-id"), h = Vt(a, this.flattedOptions), d = e.querySelector(".treeselect-list__item-icon"); - s === "ArrowLeft" && !h.isClosed && h.isGroup && (d.dispatchEvent(new Event("mousedown")), t.preventDefault()), s === "ArrowRight" && h.isClosed && h.isGroup && (d.dispatchEvent(new Event("mousedown")), t.preventDefault()); -}, Ie = new WeakSet(), ds = function(e, t) { + const s = t.key, a = e.querySelector(".treeselect-list__item-checkbox").getAttribute("input-id"), d = Vt(a, this.flattedOptions), h = e.querySelector(".treeselect-list__item-icon"); + s === "ArrowLeft" && !d.isClosed && d.isGroup && (h.dispatchEvent(new Event("mousedown")), t.preventDefault()), s === "ArrowRight" && d.isClosed && d.isGroup && (h.dispatchEvent(new Event("mousedown")), t.preventDefault()); +}, Ie = new WeakSet(), hs = function(e, t) { var i; const s = Array.from(this.srcElement.querySelectorAll(".treeselect-list__item-checkbox")).filter( (a) => window.getComputedStyle(T(a)).display !== "none" @@ -538,49 +559,49 @@ M = new WeakMap(), P = new WeakMap(), S = new WeakMap(), Y = new WeakMap(), Oe = (x) => T(x).classList.contains("treeselect-list__item--focused") ); T(s[a]).classList.remove("treeselect-list__item--focused"); - const d = t === "ArrowDown" ? a + 1 : a - 1, C = t === "ArrowDown" ? 0 : s.length - 1, f = s[d] ?? s[C], b = !s[d], g = T(f); + const h = t === "ArrowDown" ? a + 1 : a - 1, b = t === "ArrowDown" ? 0 : s.length - 1, m = s[h] ?? s[b], C = !s[h], g = T(m); g.classList.add("treeselect-list__item--focused"); - const k = this.srcElement.getBoundingClientRect(), w = g.getBoundingClientRect(); - if (b && t === "ArrowDown") { + const v = this.srcElement.getBoundingClientRect(), k = g.getBoundingClientRect(); + if (C && t === "ArrowDown") { this.srcElement.scroll(0, 0); return; } - if (b && t === "ArrowUp") { + if (C && t === "ArrowUp") { this.srcElement.scroll(0, this.srcElement.scrollHeight); return; } const y = ((i = this.listSlotHtmlComponent) == null ? void 0 : i.clientHeight) ?? 0; - if (k.y + k.height < w.y + w.height + y) { - this.srcElement.scroll(0, this.srcElement.scrollTop + w.height); + if (v.y + v.height < k.y + k.height + y) { + this.srcElement.scroll(0, this.srcElement.scrollTop + k.height); return; } - if (k.y > w.y) { - this.srcElement.scroll(0, this.srcElement.scrollTop - w.height); + if (v.y > k.y) { + this.srcElement.scroll(0, this.srcElement.scrollTop - k.height); return; } } -}, Pe = new WeakSet(), us = function() { - const e = o(this, Be, ps).call(this), t = o(this, K, vt).call(this, this.options); +}, Oe = new WeakSet(), us = function() { + const e = r(this, Be, ps).call(this), t = r(this, X, Et).call(this, this.options); e.append(...t); - const s = o(this, Ge, Cs).call(this); + const s = r(this, Ge, Cs).call(this); e.append(s); - const i = o(this, He, bs).call(this); + const i = r(this, He, bs).call(this); return i && e.append(i), e; }, Be = new WeakSet(), ps = function() { const e = document.createElement("div"); - return e.classList.add("treeselect-list"), this.isSingleSelect && e.classList.add("treeselect-list--single-select"), this.disabledBranchNode && e.classList.add("treeselect-list--disabled-branch-node"), e.addEventListener("mouseout", (t) => o(this, Ve, ms).call(this, t)), e.addEventListener("mousemove", () => o(this, De, fs).call(this)), e.addEventListener("mouseup", () => this.mouseupCallback(), !0), e; + return e.classList.add("treeselect-list"), this.isSingleSelect && e.classList.add("treeselect-list--single-select"), this.disabledBranchNode && e.classList.add("treeselect-list--disabled-branch-node"), e.addEventListener("mouseout", (t) => r(this, Ve, ms).call(this, t)), e.addEventListener("mousemove", () => r(this, De, fs).call(this)), e.addEventListener("mouseup", () => this.mouseupCallback(), !0), e; }, Ve = new WeakSet(), ms = function(e) { - e.stopPropagation(), n(this, M) && n(this, P) && n(this, M).classList.add("treeselect-list__item--focused"); + e.stopPropagation(), n(this, F) && n(this, O) && n(this, F).classList.add("treeselect-list__item--focused"); }, De = new WeakSet(), fs = function() { - m(this, P, !0); -}, K = new WeakSet(), vt = function(e) { + f(this, O, !0); +}, X = new WeakSet(), Et = function(e) { return e.reduce((t, s) => { var a; if ((a = s.children) != null && a.length) { - const h = o(this, Me, gs).call(this, s), d = o(this, K, vt).call(this, s.children); - return h.append(...d), t.push(h), t; + const d = r(this, Me, gs).call(this, s), h = r(this, X, Et).call(this, s.children); + return d.append(...h), t.push(d), t; } - const i = o(this, X, Lt).call(this, s, !1); + const i = r(this, J, Lt).call(this, s, !1); return t.push(i), t; }, []); }, He = new WeakSet(), bs = function() { @@ -598,45 +619,45 @@ M = new WeakMap(), P = new WeakMap(), S = new WeakMap(), Y = new WeakMap(), Oe = }, Me = new WeakSet(), gs = function(e) { const t = document.createElement("div"); t.setAttribute("group-container-id", e.value.toString()), t.classList.add("treeselect-list__group-container"); - const s = o(this, X, Lt).call(this, e, !0); + const s = r(this, J, Lt).call(this, e, !0); return t.appendChild(s), t; -}, X = new WeakSet(), Lt = function(e, t) { - const s = o(this, Fe, ks).call(this, e); +}, J = new WeakSet(), Lt = function(e, t) { + const s = r(this, Fe, vs).call(this, e); if (t) { - const h = o(this, $e, Ls).call(this); - s.appendChild(h), s.classList.add("treeselect-list__item--group"); + const d = r(this, Re, Ls).call(this); + s.appendChild(d), s.classList.add("treeselect-list__item--group"); } - const i = o(this, Ue, xs).call(this, e), a = o(this, ze, Ss).call(this, e, t); + const i = r(this, We, xs).call(this, e), a = r(this, Ue, Ss).call(this, e, t); return s.append(i, a), s; -}, Fe = new WeakSet(), ks = function(e) { +}, Fe = new WeakSet(), vs = function(e) { const t = document.createElement("div"); - return Pi(t, e.htmlAttr), t.setAttribute("tabindex", "-1"), t.setAttribute("title", e.name), t.classList.add("treeselect-list__item"), t.addEventListener("mouseover", () => o(this, qe, ws).call(this, t), !0), t.addEventListener("mouseout", () => o(this, je, Es).call(this, t), !0), t.addEventListener("mousedown", (s) => o(this, Re, vs).call(this, s, e)), t; + return Vi(t, e.htmlAttr), t.setAttribute("tabindex", "-1"), t.setAttribute("title", e.name), t.classList.add("treeselect-list__item"), t.addEventListener("mouseover", () => r(this, ze, ks).call(this, t), !0), t.addEventListener("mouseout", () => r(this, qe, ws).call(this, t), !0), t.addEventListener("mousedown", (s) => r(this, je, Es).call(this, s, e)), t; +}, ze = new WeakSet(), ks = function(e) { + n(this, O) && r(this, Z, yt).call(this, !0, e); }, qe = new WeakSet(), ws = function(e) { - n(this, P) && o(this, J, yt).call(this, !0, e); -}, je = new WeakSet(), Es = function(e) { - n(this, P) && (o(this, J, yt).call(this, !1, e), m(this, M, e)); -}, Re = new WeakSet(), vs = function(e, t) { + n(this, O) && (r(this, Z, yt).call(this, !1, e), f(this, F, e)); +}, je = new WeakSet(), Es = function(e, t) { var a; - if (e.preventDefault(), e.stopPropagation(), (a = this.flattedOptions.find((h) => h.id === t.value)) == null ? void 0 : a.disabled) + if (e.preventDefault(), e.stopPropagation(), (a = this.flattedOptions.find((d) => d.id === t.value)) == null ? void 0 : a.disabled) return; const i = e.target.querySelector(".treeselect-list__item-checkbox"); - i.checked = !i.checked, o(this, Ke, As).call(this, i, t); -}, $e = new WeakSet(), Ls = function() { + i.checked = !i.checked, r(this, Ke, As).call(this, i, t); +}, Re = new WeakSet(), Ls = function() { const e = document.createElement("span"); - return e.setAttribute("tabindex", "-1"), e.classList.add("treeselect-list__item-icon"), I(this.iconElements.arrowDown, e), e.addEventListener("mousedown", (t) => o(this, We, ys).call(this, t)), e; -}, We = new WeakSet(), ys = function(e) { - e.preventDefault(), e.stopPropagation(), o(this, Xe, Ts).call(this, e); -}, Ue = new WeakSet(), xs = function(e) { + return e.setAttribute("tabindex", "-1"), e.classList.add("treeselect-list__item-icon"), I(this.iconElements.arrowDown, e), e.addEventListener("mousedown", (t) => r(this, $e, ys).call(this, t)), e; +}, $e = new WeakSet(), ys = function(e) { + e.preventDefault(), e.stopPropagation(), r(this, Xe, Ts).call(this, e); +}, We = new WeakSet(), xs = function(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; -}, ze = new WeakSet(), Ss = function(e, t) { +}, Ue = new WeakSet(), Ss = function(e, t) { const s = document.createElement("label"); if (s.textContent = e.name, s.classList.add("treeselect-list__item-label"), t && this.showCount) { - const i = o(this, Ye, _s).call(this, e); + const i = r(this, Ye, _s).call(this, e); s.appendChild(i); } return s; @@ -647,7 +668,7 @@ M = new WeakMap(), P = new WeakMap(), S = new WeakMap(), Y = new WeakMap(), Oe = const s = this.flattedOptions.find((i) => i.id === t.value); if (s) { if (s != null && s.isGroup && this.disabledBranchNode) { - const i = Ii(e); + const i = Bi(e); i == null || i.dispatchEvent(new Event("mousedown")); return; } @@ -655,30 +676,46 @@ M = new WeakMap(), P = new WeakMap(), S = new WeakMap(), Y = new WeakMap(), Oe = const [i] = n(this, S); if (s.id === i) return; - m(this, S, [s.id]), ss([s.id], this.flattedOptions, this.isSingleSelect, this.isIndependentNodes); + f(this, S, [s.id]), ss([s.id], this.flattedOptions, this.isSingleSelect, this.isIndependentNodes); } else { s.checked = e.checked; const i = It(s, this.flattedOptions, this.isIndependentNodes); e.checked = i; } - ce(this.flattedOptions, this.srcElement, this.iconElements, n(this, S), this.rtl), o(this, Je, Ns).call(this); + ce( + this.flattedOptions, + this.srcElement, + this.iconElements, + n(this, S), + this.rtl, + this.defaultPadding, + this.zeroLevelItemPadding + ), r(this, Je, Ns).call(this); } }, Xe = new WeakSet(), Ts = function(e) { - var a, h; - const t = (h = (a = e.target) == null ? void 0 : a.parentNode) == null ? void 0 : h.querySelector("[input-id]"), s = (t == null ? void 0 : t.getAttribute("input-id")) ?? null, i = Vt(s, this.flattedOptions); - i && (i.isClosed = !i.isClosed, bt(this.flattedOptions, i), ce(this.flattedOptions, this.srcElement, this.iconElements, n(this, S), this.rtl), this.arrowClickCallback(i.id, i.isClosed)); -}, J = new WeakSet(), yt = function(e, t) { + var a, d; + const t = (d = (a = e.target) == null ? void 0 : a.parentNode) == null ? void 0 : d.querySelector("[input-id]"), s = (t == null ? void 0 : t.getAttribute("input-id")) ?? null, i = Vt(s, this.flattedOptions); + i && (i.isClosed = !i.isClosed, bt(this.flattedOptions, i), ce( + this.flattedOptions, + this.srcElement, + this.iconElements, + n(this, S), + this.rtl, + this.defaultPadding, + this.zeroLevelItemPadding + ), this.arrowClickCallback(i.id, i.isClosed)); +}, Z = new WeakSet(), yt = function(e, t) { const s = "treeselect-list__item--focused"; if (e) { const i = Array.from(this.srcElement.querySelectorAll(`.${s}`)); i.length && i.forEach((a) => a.classList.remove(s)), t.classList.add(s); } else t.classList.remove(s); -}, Z = new WeakSet(), xt = function() { - const { ungroupedNodes: e, groupedNodes: t, allNodes: s } = Ci(this.flattedOptions); +}, Q = new WeakSet(), xt = function() { + const { ungroupedNodes: e, groupedNodes: t, allNodes: s } = vi(this.flattedOptions); this.selectedNodes = { nodes: e, groupedNodes: t, allNodes: s }; }, Je = new WeakSet(), Ns = function() { - o(this, Z, xt).call(this), this.inputCallback(this.selectedNodes), this.value = this.selectedNodes.nodes.map((e) => e.id); + r(this, Q, xt).call(this), this.inputCallback(this.selectedNodes), this.value = this.selectedNodes.nodes.map((e) => e.id); }; const Dt = ({ parentHtmlContainer: l, @@ -689,36 +726,36 @@ const Dt = ({ direction: a }) => { l || console.error("Validation: parentHtmlContainer prop is required!"), e && t && console.error("Validation: You should set staticList to false if you use appendToBody!"), s && Array.isArray(i) && console.error("Validation: if you use isSingleSelect prop, you should pass a single value!"), !s && !Array.isArray(i) && console.error("Validation: you should pass an array as a value!"), a && a !== "auto" && a !== "bottom" && a !== "top" && console.error("Validation: you should pass (auto | top | bottom | undefined) as a value for the direction prop!"); -}, re = (l) => l.map((e) => e.id), Vi = (l) => l ? Array.isArray(l) ? l : [l] : [], Di = (l, e) => { +}, oe = (l) => l.map((e) => e.id), Hi = (l) => l ? Array.isArray(l) ? l : [l] : [], Gi = (l, e) => { if (e) { const [t] = l; return t ?? null; } return l; }; -var u, p, F, Q, q, _, A, L, B, ee, St, te, _t, Ze, Os, Qe, Is, et, Ps, tt, Bs, st, Vs, it, Ds, se, At, lt, Hs, nt, Gs, at, Ms, ot, Fs, ie, Tt, rt, qs, j, he, le, Nt, R, de, ct, js, ne, Ot, ht, Rs, dt, $s, ut, Ws, pt, Us, mt, zs; -class Gi { +var u, p, q, ee, j, _, A, L, B, te, St, se, _t, Ze, Ps, Qe, Is, et, Os, tt, Bs, st, Vs, it, Ds, ie, At, lt, Hs, nt, Gs, at, Ms, rt, Fs, le, Tt, ot, zs, R, de, ne, Nt, $, he, ct, qs, ae, Pt, dt, js, ht, Rs, ut, $s, pt, Ws, mt, Us; +class Fi { constructor({ parentHtmlContainer: e, value: t, options: s, openLevel: i, appendToBody: a, - alwaysOpen: h, - showTags: d, - tagsCountText: C, - clearable: f, - searchable: b, + alwaysOpen: d, + showTags: h, + tagsCountText: b, + clearable: m, + searchable: C, placeholder: g, - grouped: k, - isGroupedValue: w, + grouped: v, + isGroupedValue: k, listSlotHtmlComponent: y, disabled: x, - emptyText: $, - staticList: ae, + emptyText: V, + staticList: z, id: Ct, ariaLabel: gt, - isSingleSelect: oe, + isSingleSelect: re, showCount: Ys, disabledBranchNode: Ks, direction: Xs, @@ -726,40 +763,42 @@ class Gi { saveScrollPosition: Zs, isIndependentNodes: Qs, rtl: ei, - iconElements: ti, - inputCallback: si, - openCallback: ii, - closeCallback: li, - nameChangeCallback: ni, - searchCallback: ai, - openCloseGroupCallback: oi + defaultPadding: ti, + zeroLevelItemPadding: si, + iconElements: ii, + inputCallback: li, + openCallback: ni, + closeCallback: ai, + nameChangeCallback: ri, + searchCallback: oi, + openCloseGroupCallback: ci }) { - r(this, ee); - r(this, te); - r(this, Ze); - r(this, Qe); - r(this, et); - r(this, tt); - r(this, st); - r(this, it); - r(this, se); - r(this, lt); - r(this, nt); - r(this, at); - r(this, ot); - r(this, ie); - r(this, rt); - r(this, j); - r(this, le); - r(this, R); - r(this, ct); + o(this, te); + o(this, se); + o(this, Ze); + o(this, Qe); + o(this, et); + o(this, tt); + o(this, st); + o(this, it); + o(this, ie); + o(this, lt); + o(this, nt); + o(this, at); + o(this, rt); + o(this, le); + o(this, ot); + o(this, R); + o(this, ne); + o(this, $); + o(this, ct); // Emits - r(this, ne); - r(this, ht); - r(this, dt); - r(this, ut); - r(this, pt); - r(this, mt); + o(this, ae); + o(this, dt); + o(this, ht); + o(this, ut); + o(this, pt); + o(this, mt); // Props c(this, "parentHtmlContainer"); c(this, "value"); @@ -788,6 +827,8 @@ class Gi { c(this, "saveScrollPosition"); c(this, "isIndependentNodes"); c(this, "rtl"); + c(this, "defaultPadding"); + c(this, "zeroLevelItemPadding"); c(this, "iconElements"); c(this, "inputCallback"); c(this, "openCallback"); @@ -803,26 +844,26 @@ class Gi { c(this, "selectedName"); c(this, "srcElement"); // Components - r(this, u, null); - r(this, p, null); + o(this, u, null); + o(this, p, null); // Resize props - r(this, F, null); + o(this, q, null); // List position scroll - r(this, Q, 0); + o(this, ee, 0); // Timer for search text - r(this, q, 0); + o(this, j, 0); // Outside listeners - r(this, _, null); - r(this, A, null); - r(this, L, null); - r(this, B, null); + o(this, _, null); + o(this, A, null); + o(this, L, null); + o(this, B, null); Dt({ parentHtmlContainer: e, value: t, - staticList: ae, + staticList: z, appendToBody: a, - isSingleSelect: oe - }), this.parentHtmlContainer = e, this.value = [], this.options = s ?? [], this.openLevel = i ?? 0, this.appendToBody = a ?? !1, this.alwaysOpen = !!(h && !x), this.showTags = d ?? !0, this.tagsCountText = C ?? "elements selected", this.clearable = f ?? !0, this.searchable = b ?? !0, this.placeholder = g ?? "Search...", this.grouped = k ?? !0, this.isGroupedValue = w ?? !1, this.listSlotHtmlComponent = y ?? null, this.disabled = x ?? !1, this.emptyText = $ ?? "No results found...", this.staticList = !!(ae && !this.appendToBody), this.id = Ct ?? "", this.ariaLabel = gt ?? "", this.isSingleSelect = oe ?? !1, this.showCount = Ys ?? !1, this.disabledBranchNode = Ks ?? !1, this.direction = Xs ?? "auto", this.expandSelected = Js ?? !1, this.saveScrollPosition = Zs ?? !0, this.isIndependentNodes = Qs ?? !1, this.rtl = ei ?? !1, this.iconElements = Bt(ti), this.inputCallback = si, this.openCallback = ii, this.closeCallback = li, this.nameChangeCallback = ni, this.searchCallback = ai, this.openCloseGroupCallback = oi, this.ungroupedValue = [], this.groupedValue = [], this.allValue = [], this.isListOpened = !1, this.selectedName = "", this.srcElement = null, o(this, ee, St).call(this, t); + isSingleSelect: re + }), this.parentHtmlContainer = e, this.value = [], this.options = s ?? [], this.openLevel = i ?? 0, this.appendToBody = a ?? !1, this.alwaysOpen = !!(d && !x), this.showTags = h ?? !0, this.tagsCountText = b ?? "elements selected", this.clearable = m ?? !0, this.searchable = C ?? !0, this.placeholder = g ?? "Search...", this.grouped = v ?? !0, this.isGroupedValue = k ?? !1, this.listSlotHtmlComponent = y ?? null, this.disabled = x ?? !1, this.emptyText = V ?? "No results found...", this.staticList = !!(z && !this.appendToBody), this.id = Ct ?? "", this.ariaLabel = gt ?? "", this.isSingleSelect = re ?? !1, this.showCount = Ys ?? !1, this.disabledBranchNode = Ks ?? !1, this.direction = Xs ?? "auto", this.expandSelected = Js ?? !1, this.saveScrollPosition = Zs ?? !0, this.isIndependentNodes = Qs ?? !1, this.rtl = ei ?? !1, this.defaultPadding = ti ?? 20, this.zeroLevelItemPadding = si ?? 5, this.iconElements = Bt(ii), this.inputCallback = li, this.openCallback = ni, this.closeCallback = ai, this.nameChangeCallback = ri, this.searchCallback = oi, this.openCloseGroupCallback = ci, this.ungroupedValue = [], this.groupedValue = [], this.allValue = [], this.isListOpened = !1, this.selectedName = "", this.srcElement = null, r(this, te, St).call(this, t); } mount() { Dt({ @@ -831,14 +872,14 @@ class Gi { staticList: this.staticList, appendToBody: this.appendToBody, isSingleSelect: this.isSingleSelect - }), this.iconElements = Bt(this.iconElements), o(this, ee, St).call(this, this.value); + }), this.iconElements = Bt(this.iconElements), r(this, te, St).call(this, this.value); } updateValue(e) { - const t = Vi(e), s = n(this, u); - s && (s.updateValue(t), o(this, se, At).call(this, s == null ? void 0 : s.selectedNodes)); + const t = Hi(e), s = n(this, u); + s && (s.updateValue(t), r(this, ie, At).call(this, s == null ? void 0 : s.selectedNodes)); } destroy() { - this.srcElement && (o(this, ie, Tt).call(this), this.srcElement.innerHTML = "", this.srcElement = null, o(this, R, de).call(this, !0)); + this.srcElement && (r(this, le, Tt).call(this), this.srcElement.innerHTML = "", this.srcElement = null, r(this, $, he).call(this, !0)); } focus() { n(this, p) && n(this, p).focus(); @@ -852,11 +893,11 @@ class Gi { } focusWindowHandler(e) { var s, i, a; - ((s = this.srcElement) == null ? void 0 : s.contains(e.target)) || ((i = n(this, u)) == null ? void 0 : i.srcElement.contains(e.target)) || ((a = n(this, p)) == null || a.blur(), o(this, R, de).call(this, !1), o(this, j, he).call(this, !1)); + ((s = this.srcElement) == null ? void 0 : s.contains(e.target)) || ((i = n(this, u)) == null ? void 0 : i.srcElement.contains(e.target)) || ((a = n(this, p)) == null || a.blur(), r(this, $, he).call(this, !1), r(this, R, de).call(this, !1)); } blurWindowHandler() { var e; - (e = n(this, p)) == null || e.blur(), o(this, R, de).call(this, !1), o(this, j, he).call(this, !1); + (e = n(this, p)) == null || e.blur(), r(this, $, he).call(this, !1), r(this, R, de).call(this, !1); } // Update direction of the list. Support appendToBody and standard mode with absolute updateListPosition() { @@ -867,36 +908,36 @@ class Gi { const { height: s } = t.getBoundingClientRect(), { x: i, y: a, - height: h, - width: d - } = e.getBoundingClientRect(), C = window.innerHeight, f = a, b = C - a - h; - let g = f > b && f >= s && b < s; + height: d, + width: h + } = e.getBoundingClientRect(), b = window.innerHeight, m = a, C = b - a - d; + let g = m > C && m >= s && C < s; if (this.direction !== "auto" && (g = this.direction === "top"), this.appendToBody) { (t.style.top !== "0px" || t.style.left !== "0px") && (t.style.top = "0px", t.style.left = "0px"); - const x = i + window.scrollX, $ = g ? a + window.scrollY - s : a + window.scrollY + h; - t.style.transform = `translate(${x}px,${$}px)`, t.style.width = `${d}px`; + const x = i + window.scrollX, V = g ? a + window.scrollY - s : a + window.scrollY + d; + t.style.transform = `translate(${x}px,${V}px)`, t.style.width = `${h}px`; } - const k = g ? "top" : "bottom"; - t.getAttribute("direction") !== k && (t.setAttribute("direction", k), o(this, rt, qs).call(this, g, this.appendToBody)); + const v = g ? "top" : "bottom"; + t.getAttribute("direction") !== v && (t.setAttribute("direction", v), r(this, ot, zs).call(this, g, this.appendToBody)); } } -u = new WeakMap(), p = new WeakMap(), F = new WeakMap(), Q = new WeakMap(), q = new WeakMap(), _ = new WeakMap(), A = new WeakMap(), L = new WeakMap(), B = new WeakMap(), ee = new WeakSet(), St = function(e) { +u = new WeakMap(), p = new WeakMap(), q = new WeakMap(), ee = new WeakMap(), j = new WeakMap(), _ = new WeakMap(), A = new WeakMap(), L = new WeakMap(), B = new WeakMap(), te = new WeakSet(), St = function(e) { var a; this.destroy(); - const { container: t, list: s, input: i } = o(this, Ze, Os).call(this); - this.srcElement = t, m(this, u, s), m(this, p, i), m(this, _, this.scrollWindowHandler.bind(this)), m(this, A, this.scrollWindowHandler.bind(this)), m(this, L, this.focusWindowHandler.bind(this)), m(this, B, this.blurWindowHandler.bind(this)), this.alwaysOpen && ((a = n(this, p)) == null || a.openClose()), this.disabled ? this.srcElement.classList.add("treeselect--disabled") : this.srcElement.classList.remove("treeselect--disabled"), this.updateValue(e ?? this.value); -}, te = new WeakSet(), _t = function({ + const { container: t, list: s, input: i } = r(this, Ze, Ps).call(this); + this.srcElement = t, f(this, u, s), f(this, p, i), f(this, _, this.scrollWindowHandler.bind(this)), f(this, A, this.scrollWindowHandler.bind(this)), f(this, L, this.focusWindowHandler.bind(this)), f(this, B, this.blurWindowHandler.bind(this)), this.alwaysOpen && ((a = n(this, p)) == null || a.openClose()), this.disabled ? this.srcElement.classList.add("treeselect--disabled") : this.srcElement.classList.remove("treeselect--disabled"), this.updateValue(e ?? this.value); +}, se = new WeakSet(), _t = function({ groupedNodes: e, nodes: t, allNodes: s }) { - this.ungroupedValue = t ? re(t) : [], this.groupedValue = e ? re(e) : [], this.allValue = s ? re(s) : []; + this.ungroupedValue = t ? oe(t) : [], this.groupedValue = e ? oe(e) : [], this.allValue = s ? oe(s) : []; let i = []; - this.isIndependentNodes || this.isSingleSelect ? i = this.allValue : this.isGroupedValue ? i = this.groupedValue : i = this.ungroupedValue, this.value = Di(i, this.isSingleSelect); -}, Ze = new WeakSet(), Os = function() { + this.isIndependentNodes || this.isSingleSelect ? i = this.allValue : this.isGroupedValue ? i = this.groupedValue : i = this.ungroupedValue, this.value = Gi(i, this.isSingleSelect); +}, Ze = new WeakSet(), Ps = function() { const e = this.parentHtmlContainer; e.classList.add("treeselect"), this.rtl && e.setAttribute("dir", "rtl"); - const t = new Bi({ + const t = new Di({ value: [], // updateValue method calls in initMount method to set actual value options: this.options, @@ -909,14 +950,16 @@ u = new WeakMap(), p = new WeakMap(), F = new WeakMap(), Q = new WeakMap(), q = expandSelected: this.expandSelected, isIndependentNodes: this.isIndependentNodes, rtl: this.rtl, + defaultPadding: this.defaultPadding, + zeroLevelItemPadding: this.zeroLevelItemPadding, iconElements: this.iconElements, - inputCallback: (i) => o(this, lt, Hs).call(this, i), - arrowClickCallback: (i, a) => o(this, nt, Gs).call(this, i, a), + inputCallback: (i) => r(this, lt, Hs).call(this, i), + arrowClickCallback: (i, a) => r(this, nt, Gs).call(this, i, a), mouseupCallback: () => { var i; return (i = n(this, p)) == null ? void 0 : i.focus(); } - }), s = new di({ + }), s = new pi({ value: [], // updateValue method calls in initMount method to set actual value showTags: this.showTags, @@ -930,94 +973,94 @@ u = new WeakMap(), p = new WeakMap(), F = new WeakMap(), Q = new WeakMap(), q = id: this.id, ariaLabel: this.ariaLabel, iconElements: this.iconElements, - inputCallback: (i) => o(this, Qe, Is).call(this, i), - searchCallback: (i) => o(this, tt, Bs).call(this, i), - openCallback: () => o(this, ot, Fs).call(this), - closeCallback: () => o(this, ie, Tt).call(this), - keydownCallback: (i) => o(this, et, Ps).call(this, i), - focusCallback: () => o(this, st, Vs).call(this), - blurCallback: () => o(this, it, Ds).call(this), - nameChangeCallback: (i) => o(this, at, Ms).call(this, i) + inputCallback: (i) => r(this, Qe, Is).call(this, i), + searchCallback: (i) => r(this, tt, Bs).call(this, i), + openCallback: () => r(this, rt, Fs).call(this), + closeCallback: () => r(this, le, Tt).call(this), + keydownCallback: (i) => r(this, et, Os).call(this, i), + focusCallback: () => r(this, st, Vs).call(this), + blurCallback: () => r(this, it, Ds).call(this), + nameChangeCallback: (i) => r(this, at, Ms).call(this, i) }); - return this.appendToBody && m(this, F, new ResizeObserver(() => this.updateListPosition())), e.append(s.srcElement), { container: e, list: t, input: s }; + return this.appendToBody && f(this, q, new ResizeObserver(() => this.updateListPosition())), e.append(s.srcElement), { container: e, list: t, input: s }; }, Qe = new WeakSet(), Is = function(e) { var i, a; - const t = re(e); + const t = oe(e); (i = n(this, u)) == null || i.updateValue(t); const s = ((a = n(this, u)) == null ? void 0 : a.selectedNodes) ?? {}; - o(this, te, _t).call(this, s), o(this, ne, Ot).call(this); -}, et = new WeakSet(), Ps = function(e) { + r(this, se, _t).call(this, s), r(this, ae, Pt).call(this); +}, et = new WeakSet(), Os = function(e) { var t; this.isListOpened && ((t = n(this, u)) == null || t.callKeyAction(e)); }, tt = new WeakSet(), Bs = function(e) { - n(this, q) && clearTimeout(n(this, q)), m(this, q, window.setTimeout(() => { + n(this, j) && clearTimeout(n(this, j)), f(this, j, window.setTimeout(() => { var t; (t = n(this, u)) == null || t.updateSearchValue(e), this.updateListPosition(); - }, 350)), o(this, pt, Us).call(this, e); + }, 350)), r(this, pt, Ws).call(this, e); }, st = new WeakSet(), Vs = function() { - o(this, j, he).call(this, !0), n(this, L) && n(this, L) && n(this, B) && (document.addEventListener("mousedown", n(this, L), !0), document.addEventListener("focus", n(this, L), !0), window.addEventListener("blur", n(this, B))); + r(this, R, de).call(this, !0), n(this, L) && n(this, L) && n(this, B) && (document.addEventListener("mousedown", n(this, L), !0), document.addEventListener("focus", n(this, L), !0), window.addEventListener("blur", n(this, B))); }, it = new WeakSet(), Ds = function() { setTimeout(() => { var s, i; const e = (s = n(this, p)) == null ? void 0 : s.srcElement.contains(document.activeElement), t = (i = n(this, u)) == null ? void 0 : i.srcElement.contains(document.activeElement); !e && !t && this.blurWindowHandler(); }, 1); -}, se = new WeakSet(), At = function(e) { +}, ie = new WeakSet(), At = function(e) { var s; if (!e) return; let t = []; - this.isIndependentNodes || this.isSingleSelect ? t = e.allNodes : this.grouped ? t = e.groupedNodes : t = e.nodes, (s = n(this, p)) == null || s.updateValue(t), o(this, te, _t).call(this, e); + this.isIndependentNodes || this.isSingleSelect ? t = e.allNodes : this.grouped ? t = e.groupedNodes : t = e.nodes, (s = n(this, p)) == null || s.updateValue(t), r(this, se, _t).call(this, e); }, lt = new WeakSet(), Hs = function(e) { var t, s, i; - o(this, se, At).call(this, e), this.isSingleSelect && !this.alwaysOpen && ((t = n(this, p)) == null || t.openClose(), (s = n(this, p)) == null || s.clearSearch()), (i = n(this, p)) == null || i.focus(), o(this, ne, Ot).call(this); + r(this, ie, At).call(this, e), this.isSingleSelect && !this.alwaysOpen && ((t = n(this, p)) == null || t.openClose(), (s = n(this, p)) == null || s.clearSearch()), (i = n(this, p)) == null || i.focus(), r(this, ae, Pt).call(this); }, nt = new WeakSet(), Gs = function(e, t) { var s; - (s = n(this, p)) == null || s.focus(), this.updateListPosition(), o(this, mt, zs).call(this, e, t); + (s = n(this, p)) == null || s.focus(), this.updateListPosition(), r(this, mt, Us).call(this, e, t); }, at = new WeakSet(), Ms = function(e) { - this.selectedName !== e && (this.selectedName = e, o(this, ht, Rs).call(this)); -}, ot = new WeakSet(), Fs = function() { + this.selectedName !== e && (this.selectedName = e, r(this, dt, js).call(this)); +}, rt = new WeakSet(), Fs = function() { var e; - this.isListOpened = !0, n(this, _) && n(this, A) && (window.addEventListener("scroll", n(this, _), !0), window.addEventListener("resize", n(this, A))), !(!n(this, u) || !this.srcElement) && (this.appendToBody ? (document.body.appendChild(n(this, u).srcElement), (e = n(this, F)) == null || e.observe(this.srcElement)) : this.srcElement.appendChild(n(this, u).srcElement), this.updateListPosition(), o(this, le, Nt).call(this, !0), o(this, ct, js).call(this), o(this, dt, $s).call(this)); -}, ie = new WeakSet(), Tt = function() { + this.isListOpened = !0, n(this, _) && n(this, A) && (window.addEventListener("scroll", n(this, _), !0), window.addEventListener("resize", n(this, A))), !(!n(this, u) || !this.srcElement) && (this.appendToBody ? (document.body.appendChild(n(this, u).srcElement), (e = n(this, q)) == null || e.observe(this.srcElement)) : this.srcElement.appendChild(n(this, u).srcElement), this.updateListPosition(), r(this, ne, Nt).call(this, !0), r(this, ct, qs).call(this), r(this, ht, Rs).call(this)); +}, le = new WeakSet(), Tt = function() { var t; - this.alwaysOpen || (this.isListOpened = !1, n(this, _) && n(this, A) && (window.removeEventListener("scroll", n(this, _), !0), window.removeEventListener("resize", n(this, A))), !n(this, u) || !this.srcElement) || !(this.appendToBody ? document.body.contains(n(this, u).srcElement) : this.srcElement.contains(n(this, u).srcElement)) || (m(this, Q, n(this, u).srcElement.scrollTop), this.appendToBody ? (document.body.removeChild(n(this, u).srcElement), (t = n(this, F)) == null || t.disconnect()) : this.srcElement.removeChild(n(this, u).srcElement), o(this, le, Nt).call(this, !1), o(this, ut, Ws).call(this)); -}, rt = new WeakSet(), qs = function(e, t) { + this.alwaysOpen || (this.isListOpened = !1, n(this, _) && n(this, A) && (window.removeEventListener("scroll", n(this, _), !0), window.removeEventListener("resize", n(this, A))), !n(this, u) || !this.srcElement) || !(this.appendToBody ? document.body.contains(n(this, u).srcElement) : this.srcElement.contains(n(this, u).srcElement)) || (f(this, ee, n(this, u).srcElement.scrollTop), this.appendToBody ? (document.body.removeChild(n(this, u).srcElement), (t = n(this, q)) == null || t.disconnect()) : this.srcElement.removeChild(n(this, u).srcElement), r(this, ne, Nt).call(this, !1), r(this, ut, $s).call(this)); +}, ot = new WeakSet(), zs = function(e, t) { if (!n(this, u) || !n(this, p)) return; const s = t ? "treeselect-list--top-to-body" : "treeselect-list--top", i = t ? "treeselect-list--bottom-to-body" : "treeselect-list--bottom"; e ? (n(this, u).srcElement.classList.add(s), n(this, u).srcElement.classList.remove(i), n(this, p).srcElement.classList.add("treeselect-input--top"), n(this, p).srcElement.classList.remove("treeselect-input--bottom")) : (n(this, u).srcElement.classList.remove(s), n(this, u).srcElement.classList.add(i), n(this, p).srcElement.classList.remove("treeselect-input--top"), n(this, p).srcElement.classList.add("treeselect-input--bottom")); -}, j = new WeakSet(), he = function(e) { +}, R = new WeakSet(), de = function(e) { !n(this, p) || !n(this, u) || (e ? (n(this, p).srcElement.classList.add("treeselect-input--focused"), n(this, u).srcElement.classList.add("treeselect-list--focused")) : (n(this, p).srcElement.classList.remove("treeselect-input--focused"), n(this, u).srcElement.classList.remove("treeselect-list--focused"))); -}, le = new WeakSet(), Nt = function(e) { +}, ne = new WeakSet(), Nt = function(e) { var t, s, i, a; e ? (t = n(this, p)) == null || t.srcElement.classList.add("treeselect-input--opened") : (s = n(this, p)) == null || s.srcElement.classList.remove("treeselect-input--opened"), this.staticList ? (i = n(this, u)) == null || i.srcElement.classList.add("treeselect-list--static") : (a = n(this, u)) == null || a.srcElement.classList.remove("treeselect-list--static"); -}, R = new WeakSet(), de = function(e) { +}, $ = new WeakSet(), he = function(e) { !n(this, _) || !n(this, A) || !n(this, L) || !n(this, B) || ((!this.alwaysOpen || e) && (window.removeEventListener("scroll", n(this, _), !0), window.removeEventListener("resize", n(this, A))), document.removeEventListener("mousedown", n(this, L), !0), document.removeEventListener("focus", n(this, L), !0), window.removeEventListener("blur", n(this, B))); -}, ct = new WeakSet(), js = function() { +}, ct = new WeakSet(), qs = function() { var t, s, i; const e = (t = n(this, u)) == null ? void 0 : t.isLastFocusedElementExist(); - this.saveScrollPosition && e ? (s = n(this, u)) == null || s.srcElement.scroll(0, n(this, Q)) : (i = n(this, u)) == null || i.focusFirstListElement(); -}, ne = new WeakSet(), Ot = function() { + this.saveScrollPosition && e ? (s = n(this, u)) == null || s.srcElement.scroll(0, n(this, ee)) : (i = n(this, u)) == null || i.focusFirstListElement(); +}, ae = new WeakSet(), Pt = function() { var e; (e = this.srcElement) == null || e.dispatchEvent(new CustomEvent("input", { detail: this.value })), this.inputCallback && this.inputCallback(this.value); -}, ht = new WeakSet(), Rs = function() { +}, dt = new WeakSet(), js = function() { var e; (e = this.srcElement) == null || e.dispatchEvent(new CustomEvent("name-change", { detail: this.selectedName })), this.nameChangeCallback && this.nameChangeCallback(this.selectedName); -}, dt = new WeakSet(), $s = function() { +}, ht = new WeakSet(), Rs = function() { var e; this.alwaysOpen || ((e = this.srcElement) == null || e.dispatchEvent(new CustomEvent("open", { detail: this.value })), this.openCallback && this.openCallback(this.value)); -}, ut = new WeakSet(), Ws = function() { +}, ut = new WeakSet(), $s = function() { var e; this.alwaysOpen || ((e = this.srcElement) == null || e.dispatchEvent(new CustomEvent("close", { detail: this.value })), this.closeCallback && this.closeCallback(this.value)); -}, pt = new WeakSet(), Us = function(e) { +}, pt = new WeakSet(), Ws = function(e) { var s; const t = (e == null ? void 0 : e.trim()) ?? ""; (s = this.srcElement) == null || s.dispatchEvent(new CustomEvent("search", { detail: t })), this.searchCallback && this.searchCallback(t); -}, mt = new WeakSet(), zs = function(e, t) { +}, mt = new WeakSet(), Us = function(e, t) { var s; (s = this.srcElement) == null || s.dispatchEvent(new CustomEvent("open-close-group", { detail: { groupId: e, isClosed: t } })), this.openCloseGroupCallback && this.openCloseGroupCallback(e, t); }; export { - Gi as default + Fi as default }; diff --git a/demo/static/treeselectjs.umd.js b/demo/static/treeselectjs.umd.js index 984ea8e..b90d98d 100644 --- a/demo/static/treeselectjs.umd.js +++ b/demo/static/treeselectjs.umd.js @@ -1 +1 @@ -var Hi=Object.defineProperty;var Gi=(b,p,f)=>p in b?Hi(b,p,{enumerable:!0,configurable:!0,writable:!0,value:f}):b[p]=f;var c=(b,p,f)=>(Gi(b,typeof p!="symbol"?p+"":p,f),f),yt=(b,p,f)=>{if(!p.has(b))throw TypeError("Cannot "+f)};var n=(b,p,f)=>(yt(b,p,"read from private field"),f?f.call(b):p.get(b)),r=(b,p,f)=>{if(p.has(b))throw TypeError("Cannot add the same private member more than once");p instanceof WeakSet?p.add(b):p.set(b,f)},C=(b,p,f,U)=>(yt(b,p,"write to private field"),U?U.call(b,f):p.set(b,f),f);var o=(b,p,f)=>(yt(b,p,"access private method"),f);(function(b,p){typeof exports=="object"&&typeof module<"u"?module.exports=p():typeof define=="function"&&define.amd?define(p):(b=typeof globalThis<"u"?globalThis:b||self,b.Treeselect=p())})(this,function(){var P,y,H,x,pe,Ut,G,oe,me,zt,fe,Yt,M,re,B,j,be,Kt,Ce,Xt,ge,Jt,ke,Zt,we,Qt,Ee,es,ve,ts,Le,ss,ye,is,xe,ls,Se,ns,_e,as,Ae,os,Te,rs,Ne,cs,Oe,hs,z,xt,F,V,_,Y,Ie,ds,Pe,us,Be,ps,Ve,ms,De,fs,He,bs,K,St,Ge,Cs,Me,gs,Fe,ks,X,_t,je,ws,qe,Es,Re,vs,$e,Ls,We,ys,Ue,xs,ze,Ss,Ye,_s,Ke,As,Xe,Ts,Je,Ns,J,At,Z,Tt,Ze,Os,u,m,q,Q,R,A,T,S,D,ee,Nt,te,Ot,Qe,Is,et,Ps,tt,Bs,st,Vs,it,Ds,lt,Hs,se,It,nt,Gs,at,Ms,ot,Fs,rt,js,ie,Pt,ct,qs,$,gt,le,Bt,W,kt,ht,Rs,ne,Vt,dt,$s,ut,Ws,pt,Us,mt,zs,ft,Ys;"use strict";const b="",p={arrowUp:'',arrowDown:'',arrowRight:'',attention:'',clear:'',cross:'',check:'',partialCheck:''},f=(l,e)=>{if(e.innerHTML="",typeof l=="string")e.innerHTML=l;else{const t=l.cloneNode(!0);e.appendChild(t)}},U=l=>{const e=l?{...l}:{};return Object.keys(p).forEach(t=>{e[t]||(e[t]=p[t])}),e},Ks=l=>l.reduce((e,{name:t},s)=>(e+=t,sn(this,y).focus(),0)}blur(){this.isOpened&&o(this,B,j).call(this),this.clearSearch(),n(this,y).blur()}updateValue(e){this.value=e,o(this,G,oe).call(this),o(this,M,re).call(this)}removeItem(e){this.value=this.value.filter(t=>t.id!==e),o(this,z,xt).call(this),o(this,G,oe).call(this),o(this,M,re).call(this)}clear(){this.value=[],o(this,z,xt).call(this),o(this,G,oe).call(this),this.clearSearch()}openClose(){o(this,B,j).call(this)}clearSearch(){this.searchText="",this.searchCallback(""),o(this,M,re).call(this)}}P=new WeakMap,y=new WeakMap,H=new WeakMap,x=new WeakMap,pe=new WeakSet,Ut=function(){o(this,G,oe).call(this),o(this,M,re).call(this),o(this,me,zt).call(this)},G=new WeakSet,oe=function(){if(n(this,P).innerHTML="",this.showTags){n(this,P).append(...o(this,ke,Zt).call(this));const e=Ks(this.value);this.nameChangeCallback(e)}else{const e=o(this,Le,ss).call(this);n(this,P).appendChild(e),this.nameChangeCallback(e.innerText)}n(this,P).appendChild(n(this,y))},me=new WeakSet,zt=function(){const e=[];n(this,H).innerHTML="",this.clearable&&e.push(o(this,Ae,os).call(this)),this.isAlwaysOpened||e.push(o(this,Ne,cs).call(this,this.isOpened)),e.length&&n(this,H).append(...e)},fe=new WeakSet,Yt=function(){if(!this.isAlwaysOpened&&n(this,x)){const e=this.isOpened?this.iconElements.arrowUp:this.iconElements.arrowDown;f(e,n(this,x))}},M=new WeakSet,re=function(){var e;(e=this.value)!=null&&e.length?(n(this,y).removeAttribute("placeholder"),this.srcElement.classList.remove("treeselect-input--value-not-selected")):(n(this,y).setAttribute("placeholder",this.placeholder),this.srcElement.classList.add("treeselect-input--value-not-selected")),this.searchable?this.srcElement.classList.remove("treeselect-input--unsearchable"):this.srcElement.classList.add("treeselect-input--unsearchable"),this.isSingleSelect?this.srcElement.classList.add("treeselect-input--is-single-select"):this.srcElement.classList.remove("treeselect-input--is-single-select"),n(this,y).value=this.searchText},B=new WeakSet,j=function(){this.isOpened=!this.isOpened,o(this,fe,Yt).call(this),this.isOpened?this.openCallback():this.closeCallback()},be=new WeakSet,Kt=function(e,t,s){const i=document.createElement("div");return i.classList.add("treeselect-input"),i.setAttribute("tabindex","-1"),i.addEventListener("mousedown",a=>o(this,Ce,Xt).call(this,a)),i.addEventListener("focus",()=>this.focusCallback(),!0),i.addEventListener("blur",()=>this.blurCallback(),!0),e.appendChild(t),i.append(e,s),i},Ce=new WeakSet,Xt=function(e){e.stopPropagation(),this.isOpened||o(this,B,j).call(this),this.focus()},ge=new WeakSet,Jt=function(){const e=document.createElement("div");return e.classList.add("treeselect-input__tags"),e},ke=new WeakSet,Zt=function(){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=o(this,Ee,es).call(this,e.name),i=o(this,ve,ts).call(this);return t.addEventListener("mousedown",a=>o(this,we,Qt).call(this,a,e.id)),t.append(s,i),t})},we=new WeakSet,Qt=function(e,t){e.preventDefault(),e.stopPropagation(),this.removeItem(t),this.focus()},Ee=new WeakSet,es=function(e){const t=document.createElement("span");return t.classList.add("treeselect-input__tags-name"),t.textContent=e,t},ve=new WeakSet,ts=function(){const e=document.createElement("span");return e.classList.add("treeselect-input__tags-cross"),f(this.iconElements.cross,e),e},Le=new WeakSet,ss=function(){const e=document.createElement("span");if(e.classList.add("treeselect-input__tags-count"),!this.value.length)return e.textContent="",e.setAttribute("title",""),e;const t=this.value.length===1?this.value[0].name:`${this.value.length} ${this.tagsCountText}`;return e.textContent=t,e.setAttribute("title",t),e},ye=new WeakSet,is=function(){const e=document.createElement("input");return e.classList.add("treeselect-input__edit"),this.id&&e.setAttribute("id",this.id),(!this.searchable||this.disabled)&&e.setAttribute("readonly","readonly"),this.disabled&&e.setAttribute("tabindex","-1"),this.ariaLabel.length&&e.setAttribute("aria-label",this.ariaLabel),e.addEventListener("keydown",t=>o(this,xe,ls).call(this,t)),e.addEventListener("input",t=>o(this,Se,ns).call(this,t,e)),e},xe=new WeakSet,ls=function(e){e.stopPropagation();const t=e.key;t==="Backspace"&&!this.searchText.length&&this.value.length&&!this.showTags&&this.clear(),t==="Backspace"&&!this.searchText.length&&this.value.length&&this.removeItem(this.value[this.value.length-1].id),e.code==="Space"&&(!this.searchText||!this.searchable)&&o(this,B,j).call(this),(t==="Enter"||t==="ArrowDown"||t==="ArrowUp")&&e.preventDefault(),this.keydownCallback(e),t!=="Tab"&&this.focus()},Se=new WeakSet,ns=function(e,t){e.stopPropagation();const s=this.searchText,i=t.value.trim();if(s.length===0&&i.length===0){t.value="";return}if(this.searchable){const a=e.target.value;this.searchCallback(a),this.isOpened||o(this,B,j).call(this)}else t.value="";this.searchText=t.value},_e=new WeakSet,as=function(){const e=document.createElement("div");return e.classList.add("treeselect-input__operators"),e},Ae=new WeakSet,os=function(){const e=document.createElement("span");return e.classList.add("treeselect-input__clear"),e.setAttribute("tabindex","-1"),f(this.iconElements.clear,e),e.addEventListener("mousedown",t=>o(this,Te,rs).call(this,t)),e},Te=new WeakSet,rs=function(e){e.preventDefault(),e.stopPropagation(),(this.searchText.length||this.value.length)&&this.clear(),this.focus()},Ne=new WeakSet,cs=function(e){C(this,x,document.createElement("span")),n(this,x).classList.add("treeselect-input__arrow");const t=e?this.iconElements.arrowUp:this.iconElements.arrowDown;return f(t,n(this,x)),n(this,x).addEventListener("mousedown",s=>o(this,Oe,hs).call(this,s)),n(this,x)},Oe=new WeakSet,hs=function(e){e.stopPropagation(),e.preventDefault(),this.focus(),o(this,B,j).call(this)},z=new WeakSet,xt=function(){this.inputCallback(this.value)};const Dt=(l,e,t,s)=>{ei(e);const i=e.filter(a=>!a.disabled&&l.some(h=>h===a.id));if(t&&i.length){i[0].checked=!0;return}i.forEach(a=>{a.checked=!0;const h=wt(a,e,s);a.checked=h})},wt=({id:l,checked:e},t,s)=>{const i=t.find(h=>h.id===l);if(!i)return!1;if(s)return i.checked=i.disabled?!1:!!e,i.checked;const a=Ht(!!e,i,t);return Gt(i,t),a},Ht=(l,e,t)=>{if(!e.isGroup)return e.checked=e.disabled?!1:!!l,e.isPartialChecked=!1,e.checked;const s=t.filter(d=>d.childOf===e.id);return!l||e.disabled||e.isPartialChecked?(e.checked=!1,e.isPartialChecked=!1,Et(e,s,t),e.checked):Mt(s,t)?Ft(s)?(e.checked=!1,e.isPartialChecked=!1,e.disabled=!0,e.checked):(e.checked=!1,e.isPartialChecked=!0,s.forEach(d=>{Ht(l,d,t)}),e.checked):(e.checked=!0,e.isPartialChecked=!1,Et(e,s,t),e.checked)},Gt=(l,e)=>{const t=e.find(s=>s.id===l.childOf);t&&(Js(t,e),Gt(t,e))},Js=(l,e)=>{const t=ce(l,e);if(Ft(t)){l.checked=!1,l.isPartialChecked=!1,l.disabled=!0;return}if(Zs(t)){l.checked=!0,l.isPartialChecked=!1;return}if(Qs(t)){l.checked=!1,l.isPartialChecked=!0;return}l.checked=!1,l.isPartialChecked=!1},Et=({checked:l,disabled:e},t,s)=>{t.forEach(i=>{i.disabled=!!e||!!i.disabled,i.checked=!!l&&!i.disabled,i.isPartialChecked=!1;const a=ce(i,s);Et({checked:l,disabled:e},a,s)})},Mt=(l,e)=>l.some(i=>i.disabled)?!0:l.some(i=>{if(i.isGroup){const a=ce(i,e);return Mt(a,e)}return!1}),Ft=l=>l.every(e=>!!e.disabled),Zs=l=>l.every(e=>!!e.checked),Qs=l=>l.some(e=>!!e.checked||!!e.isPartialChecked),ei=l=>{l.forEach(e=>{e.checked=!1,e.isPartialChecked=!1})},ti=(l,e,t)=>{const s={level:0,groupId:""},i=jt(l,e,s.groupId,s.level);return ii(i,t)},jt=(l,e,t,s)=>l.reduce((i,a)=>{var g;const h=!!((g=a.children)!=null&&g.length),d=s>=e&&h,w=s>e;if(i.push({id:a.value,name:a.name,childOf:t,isGroup:h,checked:!1,isPartialChecked:!1,level:s,isClosed:d,hidden:w,disabled:a.disabled??!1}),h){const k=jt(a.children,e,a.value,s+1);i.push(...k)}return i},[]),ce=({id:l},e)=>e.filter(t=>t.childOf===l),si=l=>{const{ungroupedNodes:e,allGroupedNodes:t,allNodes:s}=l.reduce((a,h)=>(h.checked&&(a.allNodes.push(h),h.isGroup?a.allGroupedNodes.push(h):a.ungroupedNodes.push(h)),a),{ungroupedNodes:[],allGroupedNodes:[],allNodes:[]}),i=s.filter(a=>!t.some(({id:h})=>h===a.childOf));return{ungroupedNodes:e,groupedNodes:i,allNodes:s}},ii=(l,e)=>(l.filter(s=>!!s.disabled).forEach(({id:s})=>wt({id:s,checked:!1},l,e)),l),he=(l,{id:e,isClosed:t})=>{ce({id:e},l).forEach(i=>{i.hidden=t??!1,i.isGroup&&!i.isClosed&&he(l,{id:i.id,isClosed:t})})},li=l=>{l.filter(e=>e.isGroup&&!e.disabled&&(e.checked||e.isPartialChecked)).forEach(e=>{e.isClosed=!1,he(l,e)})},ni=(l,e)=>{const t=ai(l,e);l.forEach(s=>{t.some(({id:a})=>a===s.id)?(s.isGroup&&(s.isClosed=!1,he(l,s)),s.hidden=!1):s.hidden=!0})},ai=(l,e)=>l.reduce((t,s)=>{if(s.name.toLowerCase().includes(e.toLowerCase())){if(t.push(s),s.isGroup){const a=qt(s.id,l);t.push(...a)}if(s.childOf){const a=Rt(s.childOf,l);t.push(...a)}}return t},[]),qt=(l,e)=>e.reduce((t,s)=>(s.childOf===l&&(t.push(s),s.isGroup&&t.push(...qt(s.id,e))),t),[]),Rt=(l,e)=>e.reduce((t,s)=>(s.id===l&&(t.push(s),s.childOf&&t.push(...Rt(s.childOf,e))),t),[]),oi=l=>{const{duplications:e}=l.reduce((t,s)=>(t.allItems.some(i=>i.toString()===s.id.toString())&&t.duplications.push(s.id),t.allItems.push(s.id),t),{duplications:[],allItems:[]});e.length&&console.error(`Validation: You have duplicated values: ${e.join(", ")}! You should use unique values.`)},ri=(l,e,t,s,i,a,h,d,w,g)=>{Dt(l,e,i,w),d&&h&&li(e),de(e,t,s,a,g)},de=(l,e,t,s,i)=>{l.forEach(a=>{const h=e.querySelector(`[input-id="${a.id}"]`),d=I(h);h.checked=a.checked,ci(a,d,s),hi(a,d),di(a,d),ui(a,d,t),pi(a,d),fi(a,d,l,i),mi(a,h,t)}),bi(l,e)},ci=(l,e,t)=>{l.checked?e.classList.add("treeselect-list__item--checked"):e.classList.remove("treeselect-list__item--checked"),Array.isArray(t)&&t[0]===l.id&&!l.disabled?e.classList.add("treeselect-list__item--single-selected"):e.classList.remove("treeselect-list__item--single-selected")},hi=(l,e)=>{l.isPartialChecked?e.classList.add("treeselect-list__item--partial-checked"):e.classList.remove("treeselect-list__item--partial-checked")},di=(l,e)=>{l.disabled?e.classList.add("treeselect-list__item--disabled"):e.classList.remove("treeselect-list__item--disabled")},ui=(l,e,t)=>{if(l.isGroup){const s=e.querySelector(".treeselect-list__item-icon"),i=l.isClosed?t.arrowRight:t.arrowDown;f(i,s),l.isClosed?e.classList.add("treeselect-list__item--closed"):e.classList.remove("treeselect-list__item--closed")}},pi=(l,e)=>{l.hidden?e.classList.add("treeselect-list__item--hidden"):e.classList.remove("treeselect-list__item--hidden")},mi=(l,e,t)=>{const i=e.parentNode.querySelector(".treeselect-list__item-checkbox-icon");l.checked?f(t.check,i):l.isPartialChecked?f(t.partialCheck,i):i.innerHTML=""},fi=(l,e,t,s)=>{const i=l.level===0,a=20,h=5;if(i){const d=t.some(k=>k.isGroup&&k.level===l.level),w=!l.isGroup&&d?`${a}px`:`${h}px`,g=l.isGroup?"0":w;s?e.style.paddingRight=g:e.style.paddingLeft=g}else{const d=l.isGroup?`${l.level*a}px`:`${l.level*a+a}px`;s?e.style.paddingRight=d:e.style.paddingLeft=d}e.setAttribute("level",l.level.toString()),e.setAttribute("group",l.isGroup.toString())},bi=(l,e)=>{const t=l.some(i=>!i.hidden),s=e.querySelector(".treeselect-list__empty");t?s.classList.add("treeselect-list__empty--hidden"):s.classList.remove("treeselect-list__empty--hidden")},I=l=>l.parentNode.parentNode,$t=(l,e)=>e.find(t=>t.id.toString()===l),Ci=l=>I(l).querySelector(".treeselect-list__item-icon"),gi=(l,e)=>{e&&Object.keys(e).forEach(t=>{const s=e[t];typeof s=="string"&&l.setAttribute(t,s)})};class ki{constructor({options:e,value:t,openLevel:s,listSlotHtmlComponent:i,emptyText:a,isSingleSelect:h,iconElements:d,showCount:w,disabledBranchNode:g,expandSelected:k,isIndependentNodes:E,rtl:v,inputCallback:L,arrowClickCallback:N,mouseupCallback:O}){r(this,Ie);r(this,Pe);r(this,Be);r(this,Ve);r(this,De);r(this,He);r(this,K);r(this,Ge);r(this,Me);r(this,Fe);r(this,X);r(this,je);r(this,qe);r(this,Re);r(this,$e);r(this,We);r(this,Ue);r(this,ze);r(this,Ye);r(this,Ke);r(this,Xe);r(this,Je);r(this,J);r(this,Z);r(this,Ze);c(this,"options");c(this,"value");c(this,"openLevel");c(this,"listSlotHtmlComponent");c(this,"emptyText");c(this,"isSingleSelect");c(this,"showCount");c(this,"disabledBranchNode");c(this,"expandSelected");c(this,"isIndependentNodes");c(this,"rtl");c(this,"iconElements");c(this,"searchText");c(this,"flattedOptions");c(this,"flattedOptionsBeforeSearch");c(this,"selectedNodes");c(this,"srcElement");c(this,"inputCallback");c(this,"arrowClickCallback");c(this,"mouseupCallback");r(this,F,null);r(this,V,!0);r(this,_,[]);r(this,Y,!0);this.options=e,this.value=t,this.openLevel=s??0,this.listSlotHtmlComponent=i??null,this.emptyText=a??"No results found...",this.isSingleSelect=h??!1,this.showCount=w??!1,this.disabledBranchNode=g??!1,this.expandSelected=k??!1,this.isIndependentNodes=E??!1,this.rtl=v??!1,this.iconElements=d,this.searchText="",this.flattedOptions=ti(this.options,this.openLevel,this.isIndependentNodes),this.flattedOptionsBeforeSearch=this.flattedOptions,this.selectedNodes={nodes:[],groupedNodes:[],allNodes:[]},this.srcElement=o(this,Be,ps).call(this),this.inputCallback=L,this.arrowClickCallback=N,this.mouseupCallback=O,oi(this.flattedOptions)}updateValue(e){this.value=e,C(this,_,this.isSingleSelect?this.value:[]),ri(e,this.flattedOptions,this.srcElement,this.iconElements,this.isSingleSelect,n(this,_),this.expandSelected,n(this,Y),this.isIndependentNodes,this.rtl),C(this,Y,!1),o(this,Z,Tt).call(this)}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(s=>{const i=this.flattedOptions.find(a=>a.id===s.id);return i.isClosed=s.isClosed,i.hidden=s.hidden,i}),this.flattedOptionsBeforeSearch=[]),this.searchText&&ni(this.flattedOptions,e),de(this.flattedOptions,this.srcElement,this.iconElements,n(this,_),this.rtl),this.focusFirstListElement()}callKeyAction(e){C(this,V,!1);const t=this.srcElement.querySelector(".treeselect-list__item--focused");if(t==null?void 0:t.classList.contains("treeselect-list__item--hidden"))return;const i=e.key;i==="Enter"&&t&&t.dispatchEvent(new Event("mousedown")),(i==="ArrowLeft"||i==="ArrowRight")&&o(this,Ie,ds).call(this,t,e),(i==="ArrowDown"||i==="ArrowUp")&&o(this,Pe,us).call(this,t,i)}focusFirstListElement(){const e="treeselect-list__item--focused",t=this.srcElement.querySelector(`.${e}`),s=Array.from(this.srcElement.querySelectorAll(".treeselect-list__item-checkbox")).filter(a=>window.getComputedStyle(I(a)).display!=="none");if(!s.length)return;t&&t.classList.remove(e),I(s[0]).classList.add(e)}isLastFocusedElementExist(){return!!n(this,F)}}F=new WeakMap,V=new WeakMap,_=new WeakMap,Y=new WeakMap,Ie=new WeakSet,ds=function(e,t){if(!e)return;const s=t.key,a=e.querySelector(".treeselect-list__item-checkbox").getAttribute("input-id"),h=$t(a,this.flattedOptions),d=e.querySelector(".treeselect-list__item-icon");s==="ArrowLeft"&&!h.isClosed&&h.isGroup&&(d.dispatchEvent(new Event("mousedown")),t.preventDefault()),s==="ArrowRight"&&h.isClosed&&h.isGroup&&(d.dispatchEvent(new Event("mousedown")),t.preventDefault())},Pe=new WeakSet,us=function(e,t){var i;const s=Array.from(this.srcElement.querySelectorAll(".treeselect-list__item-checkbox")).filter(a=>window.getComputedStyle(I(a)).display!=="none");if(s.length)if(!e)I(s[0]).classList.add("treeselect-list__item--focused");else{const a=s.findIndex(O=>I(O).classList.contains("treeselect-list__item--focused"));I(s[a]).classList.remove("treeselect-list__item--focused");const d=t==="ArrowDown"?a+1:a-1,w=t==="ArrowDown"?0:s.length-1,g=s[d]??s[w],k=!s[d],E=I(g);E.classList.add("treeselect-list__item--focused");const v=this.srcElement.getBoundingClientRect(),L=E.getBoundingClientRect();if(k&&t==="ArrowDown"){this.srcElement.scroll(0,0);return}if(k&&t==="ArrowUp"){this.srcElement.scroll(0,this.srcElement.scrollHeight);return}const N=((i=this.listSlotHtmlComponent)==null?void 0:i.clientHeight)??0;if(v.y+v.heightL.y){this.srcElement.scroll(0,this.srcElement.scrollTop-L.height);return}}},Be=new WeakSet,ps=function(){const e=o(this,Ve,ms).call(this),t=o(this,K,St).call(this,this.options);e.append(...t);const s=o(this,Me,gs).call(this);e.append(s);const i=o(this,Ge,Cs).call(this);return i&&e.append(i),e},Ve=new WeakSet,ms=function(){const e=document.createElement("div");return e.classList.add("treeselect-list"),this.isSingleSelect&&e.classList.add("treeselect-list--single-select"),this.disabledBranchNode&&e.classList.add("treeselect-list--disabled-branch-node"),e.addEventListener("mouseout",t=>o(this,De,fs).call(this,t)),e.addEventListener("mousemove",()=>o(this,He,bs).call(this)),e.addEventListener("mouseup",()=>this.mouseupCallback(),!0),e},De=new WeakSet,fs=function(e){e.stopPropagation(),n(this,F)&&n(this,V)&&n(this,F).classList.add("treeselect-list__item--focused")},He=new WeakSet,bs=function(){C(this,V,!0)},K=new WeakSet,St=function(e){return e.reduce((t,s)=>{var a;if((a=s.children)!=null&&a.length){const h=o(this,Fe,ks).call(this,s),d=o(this,K,St).call(this,s.children);return h.append(...d),t.push(h),t}const i=o(this,X,_t).call(this,s,!1);return t.push(i),t},[])},Ge=new WeakSet,Cs=function(){if(!this.listSlotHtmlComponent)return null;const e=document.createElement("div");return e.classList.add("treeselect-list__slot"),e.appendChild(this.listSlotHtmlComponent),e},Me=new WeakSet,gs=function(){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"),f(this.iconElements.attention,t);const s=document.createElement("span");return s.classList.add("treeselect-list__empty-text"),s.textContent=this.emptyText,e.append(t,s),e},Fe=new WeakSet,ks=function(e){const t=document.createElement("div");t.setAttribute("group-container-id",e.value.toString()),t.classList.add("treeselect-list__group-container");const s=o(this,X,_t).call(this,e,!0);return t.appendChild(s),t},X=new WeakSet,_t=function(e,t){const s=o(this,je,ws).call(this,e);if(t){const h=o(this,We,ys).call(this);s.appendChild(h),s.classList.add("treeselect-list__item--group")}const i=o(this,ze,Ss).call(this,e),a=o(this,Ye,_s).call(this,e,t);return s.append(i,a),s},je=new WeakSet,ws=function(e){const t=document.createElement("div");return gi(t,e.htmlAttr),t.setAttribute("tabindex","-1"),t.setAttribute("title",e.name),t.classList.add("treeselect-list__item"),t.addEventListener("mouseover",()=>o(this,qe,Es).call(this,t),!0),t.addEventListener("mouseout",()=>o(this,Re,vs).call(this,t),!0),t.addEventListener("mousedown",s=>o(this,$e,Ls).call(this,s,e)),t},qe=new WeakSet,Es=function(e){n(this,V)&&o(this,J,At).call(this,!0,e)},Re=new WeakSet,vs=function(e){n(this,V)&&(o(this,J,At).call(this,!1,e),C(this,F,e))},$e=new WeakSet,Ls=function(e,t){var a;if(e.preventDefault(),e.stopPropagation(),(a=this.flattedOptions.find(h=>h.id===t.value))==null?void 0:a.disabled)return;const i=e.target.querySelector(".treeselect-list__item-checkbox");i.checked=!i.checked,o(this,Xe,Ts).call(this,i,t)},We=new WeakSet,ys=function(){const e=document.createElement("span");return e.setAttribute("tabindex","-1"),e.classList.add("treeselect-list__item-icon"),f(this.iconElements.arrowDown,e),e.addEventListener("mousedown",t=>o(this,Ue,xs).call(this,t)),e},Ue=new WeakSet,xs=function(e){e.preventDefault(),e.stopPropagation(),o(this,Je,Ns).call(this,e)},ze=new WeakSet,Ss=function(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},Ye=new WeakSet,_s=function(e,t){const s=document.createElement("label");if(s.textContent=e.name,s.classList.add("treeselect-list__item-label"),t&&this.showCount){const i=o(this,Ke,As).call(this,e);s.appendChild(i)}return s},Ke=new WeakSet,As=function(e){const t=document.createElement("span"),s=this.flattedOptions.filter(i=>i.childOf===e.value);return t.textContent=`(${s.length})`,t.classList.add("treeselect-list__item-label-counter"),t},Xe=new WeakSet,Ts=function(e,t){const s=this.flattedOptions.find(i=>i.id===t.value);if(s){if(s!=null&&s.isGroup&&this.disabledBranchNode){const i=Ci(e);i==null||i.dispatchEvent(new Event("mousedown"));return}if(this.isSingleSelect){const[i]=n(this,_);if(s.id===i)return;C(this,_,[s.id]),Dt([s.id],this.flattedOptions,this.isSingleSelect,this.isIndependentNodes)}else{s.checked=e.checked;const i=wt(s,this.flattedOptions,this.isIndependentNodes);e.checked=i}de(this.flattedOptions,this.srcElement,this.iconElements,n(this,_),this.rtl),o(this,Ze,Os).call(this)}},Je=new WeakSet,Ns=function(e){var a,h;const t=(h=(a=e.target)==null?void 0:a.parentNode)==null?void 0:h.querySelector("[input-id]"),s=(t==null?void 0:t.getAttribute("input-id"))??null,i=$t(s,this.flattedOptions);i&&(i.isClosed=!i.isClosed,he(this.flattedOptions,i),de(this.flattedOptions,this.srcElement,this.iconElements,n(this,_),this.rtl),this.arrowClickCallback(i.id,i.isClosed))},J=new WeakSet,At=function(e,t){const s="treeselect-list__item--focused";if(e){const i=Array.from(this.srcElement.querySelectorAll(`.${s}`));i.length&&i.forEach(a=>a.classList.remove(s)),t.classList.add(s)}else t.classList.remove(s)},Z=new WeakSet,Tt=function(){const{ungroupedNodes:e,groupedNodes:t,allNodes:s}=si(this.flattedOptions);this.selectedNodes={nodes:e,groupedNodes:t,allNodes:s}},Ze=new WeakSet,Os=function(){o(this,Z,Tt).call(this),this.inputCallback(this.selectedNodes),this.value=this.selectedNodes.nodes.map(e=>e.id)};const Wt=({parentHtmlContainer:l,staticList:e,appendToBody:t,isSingleSelect:s,value:i,direction:a})=>{l||console.error("Validation: parentHtmlContainer prop is required!"),e&&t&&console.error("Validation: You should set staticList to false if you use appendToBody!"),s&&Array.isArray(i)&&console.error("Validation: if you use isSingleSelect prop, you should pass a single value!"),!s&&!Array.isArray(i)&&console.error("Validation: you should pass an array as a value!"),a&&a!=="auto"&&a!=="bottom"&&a!=="top"&&console.error("Validation: you should pass (auto | top | bottom | undefined) as a value for the direction prop!")},ue=l=>l.map(e=>e.id),wi=l=>l?Array.isArray(l)?l:[l]:[],Ei=(l,e)=>{if(e){const[t]=l;return t??null}return l};class vi{constructor({parentHtmlContainer:e,value:t,options:s,openLevel:i,appendToBody:a,alwaysOpen:h,showTags:d,tagsCountText:w,clearable:g,searchable:k,placeholder:E,grouped:v,isGroupedValue:L,listSlotHtmlComponent:N,disabled:O,emptyText:ae,staticList:bt,id:vt,ariaLabel:Lt,isSingleSelect:Ct,showCount:Li,disabledBranchNode:yi,direction:xi,expandSelected:Si,saveScrollPosition:_i,isIndependentNodes:Ai,rtl:Ti,iconElements:Ni,inputCallback:Oi,openCallback:Ii,closeCallback:Pi,nameChangeCallback:Bi,searchCallback:Vi,openCloseGroupCallback:Di}){r(this,ee);r(this,te);r(this,Qe);r(this,et);r(this,tt);r(this,st);r(this,it);r(this,lt);r(this,se);r(this,nt);r(this,at);r(this,ot);r(this,rt);r(this,ie);r(this,ct);r(this,$);r(this,le);r(this,W);r(this,ht);r(this,ne);r(this,dt);r(this,ut);r(this,pt);r(this,mt);r(this,ft);c(this,"parentHtmlContainer");c(this,"value");c(this,"options");c(this,"openLevel");c(this,"appendToBody");c(this,"alwaysOpen");c(this,"showTags");c(this,"tagsCountText");c(this,"clearable");c(this,"searchable");c(this,"placeholder");c(this,"grouped");c(this,"isGroupedValue");c(this,"listSlotHtmlComponent");c(this,"disabled");c(this,"emptyText");c(this,"staticList");c(this,"id");c(this,"ariaLabel");c(this,"isSingleSelect");c(this,"showCount");c(this,"disabledBranchNode");c(this,"direction");c(this,"expandSelected");c(this,"saveScrollPosition");c(this,"isIndependentNodes");c(this,"rtl");c(this,"iconElements");c(this,"inputCallback");c(this,"openCallback");c(this,"closeCallback");c(this,"nameChangeCallback");c(this,"searchCallback");c(this,"openCloseGroupCallback");c(this,"ungroupedValue");c(this,"groupedValue");c(this,"allValue");c(this,"isListOpened");c(this,"selectedName");c(this,"srcElement");r(this,u,null);r(this,m,null);r(this,q,null);r(this,Q,0);r(this,R,0);r(this,A,null);r(this,T,null);r(this,S,null);r(this,D,null);Wt({parentHtmlContainer:e,value:t,staticList:bt,appendToBody:a,isSingleSelect:Ct}),this.parentHtmlContainer=e,this.value=[],this.options=s??[],this.openLevel=i??0,this.appendToBody=a??!1,this.alwaysOpen=!!(h&&!O),this.showTags=d??!0,this.tagsCountText=w??"elements selected",this.clearable=g??!0,this.searchable=k??!0,this.placeholder=E??"Search...",this.grouped=v??!0,this.isGroupedValue=L??!1,this.listSlotHtmlComponent=N??null,this.disabled=O??!1,this.emptyText=ae??"No results found...",this.staticList=!!(bt&&!this.appendToBody),this.id=vt??"",this.ariaLabel=Lt??"",this.isSingleSelect=Ct??!1,this.showCount=Li??!1,this.disabledBranchNode=yi??!1,this.direction=xi??"auto",this.expandSelected=Si??!1,this.saveScrollPosition=_i??!0,this.isIndependentNodes=Ai??!1,this.rtl=Ti??!1,this.iconElements=U(Ni),this.inputCallback=Oi,this.openCallback=Ii,this.closeCallback=Pi,this.nameChangeCallback=Bi,this.searchCallback=Vi,this.openCloseGroupCallback=Di,this.ungroupedValue=[],this.groupedValue=[],this.allValue=[],this.isListOpened=!1,this.selectedName="",this.srcElement=null,o(this,ee,Nt).call(this,t)}mount(){Wt({parentHtmlContainer:this.parentHtmlContainer,value:this.value,staticList:this.staticList,appendToBody:this.appendToBody,isSingleSelect:this.isSingleSelect}),this.iconElements=U(this.iconElements),o(this,ee,Nt).call(this,this.value)}updateValue(e){const t=wi(e),s=n(this,u);s&&(s.updateValue(t),o(this,se,It).call(this,s==null?void 0:s.selectedNodes))}destroy(){this.srcElement&&(o(this,ie,Pt).call(this),this.srcElement.innerHTML="",this.srcElement=null,o(this,W,kt).call(this,!0))}focus(){n(this,m)&&n(this,m).focus()}toggleOpenClose(){n(this,m)&&(n(this,m).openClose(),n(this,m).focus())}scrollWindowHandler(){this.updateListPosition()}focusWindowHandler(e){var s,i,a;((s=this.srcElement)==null?void 0:s.contains(e.target))||((i=n(this,u))==null?void 0:i.srcElement.contains(e.target))||((a=n(this,m))==null||a.blur(),o(this,W,kt).call(this,!1),o(this,$,gt).call(this,!1))}blurWindowHandler(){var e;(e=n(this,m))==null||e.blur(),o(this,W,kt).call(this,!1),o(this,$,gt).call(this,!1)}updateListPosition(){var N;const e=this.srcElement,t=(N=n(this,u))==null?void 0:N.srcElement;if(!e||!t)return;const{height:s}=t.getBoundingClientRect(),{x:i,y:a,height:h,width:d}=e.getBoundingClientRect(),w=window.innerHeight,g=a,k=w-a-h;let E=g>k&&g>=s&&ko(this,nt,Gs).call(this,i),arrowClickCallback:(i,a)=>o(this,at,Ms).call(this,i,a),mouseupCallback:()=>{var i;return(i=n(this,m))==null?void 0:i.focus()}}),s=new Xs({value:[],showTags:this.showTags,tagsCountText:this.tagsCountText,clearable:this.clearable,isAlwaysOpened:this.alwaysOpen,searchable:this.searchable,placeholder:this.placeholder,disabled:this.disabled,isSingleSelect:this.isSingleSelect,id:this.id,ariaLabel:this.ariaLabel,iconElements:this.iconElements,inputCallback:i=>o(this,et,Ps).call(this,i),searchCallback:i=>o(this,st,Vs).call(this,i),openCallback:()=>o(this,rt,js).call(this),closeCallback:()=>o(this,ie,Pt).call(this),keydownCallback:i=>o(this,tt,Bs).call(this,i),focusCallback:()=>o(this,it,Ds).call(this),blurCallback:()=>o(this,lt,Hs).call(this),nameChangeCallback:i=>o(this,ot,Fs).call(this,i)});return this.appendToBody&&C(this,q,new ResizeObserver(()=>this.updateListPosition())),e.append(s.srcElement),{container:e,list:t,input:s}},et=new WeakSet,Ps=function(e){var i,a;const t=ue(e);(i=n(this,u))==null||i.updateValue(t);const s=((a=n(this,u))==null?void 0:a.selectedNodes)??{};o(this,te,Ot).call(this,s),o(this,ne,Vt).call(this)},tt=new WeakSet,Bs=function(e){var t;this.isListOpened&&((t=n(this,u))==null||t.callKeyAction(e))},st=new WeakSet,Vs=function(e){n(this,R)&&clearTimeout(n(this,R)),C(this,R,window.setTimeout(()=>{var t;(t=n(this,u))==null||t.updateSearchValue(e),this.updateListPosition()},350)),o(this,mt,zs).call(this,e)},it=new WeakSet,Ds=function(){o(this,$,gt).call(this,!0),n(this,S)&&n(this,S)&&n(this,D)&&(document.addEventListener("mousedown",n(this,S),!0),document.addEventListener("focus",n(this,S),!0),window.addEventListener("blur",n(this,D)))},lt=new WeakSet,Hs=function(){setTimeout(()=>{var s,i;const e=(s=n(this,m))==null?void 0:s.srcElement.contains(document.activeElement),t=(i=n(this,u))==null?void 0:i.srcElement.contains(document.activeElement);!e&&!t&&this.blurWindowHandler()},1)},se=new WeakSet,It=function(e){var s;if(!e)return;let t=[];this.isIndependentNodes||this.isSingleSelect?t=e.allNodes:this.grouped?t=e.groupedNodes:t=e.nodes,(s=n(this,m))==null||s.updateValue(t),o(this,te,Ot).call(this,e)},nt=new WeakSet,Gs=function(e){var t,s,i;o(this,se,It).call(this,e),this.isSingleSelect&&!this.alwaysOpen&&((t=n(this,m))==null||t.openClose(),(s=n(this,m))==null||s.clearSearch()),(i=n(this,m))==null||i.focus(),o(this,ne,Vt).call(this)},at=new WeakSet,Ms=function(e,t){var s;(s=n(this,m))==null||s.focus(),this.updateListPosition(),o(this,ft,Ys).call(this,e,t)},ot=new WeakSet,Fs=function(e){this.selectedName!==e&&(this.selectedName=e,o(this,dt,$s).call(this))},rt=new WeakSet,js=function(){var e;this.isListOpened=!0,n(this,A)&&n(this,T)&&(window.addEventListener("scroll",n(this,A),!0),window.addEventListener("resize",n(this,T))),!(!n(this,u)||!this.srcElement)&&(this.appendToBody?(document.body.appendChild(n(this,u).srcElement),(e=n(this,q))==null||e.observe(this.srcElement)):this.srcElement.appendChild(n(this,u).srcElement),this.updateListPosition(),o(this,le,Bt).call(this,!0),o(this,ht,Rs).call(this),o(this,ut,Ws).call(this))},ie=new WeakSet,Pt=function(){var t;this.alwaysOpen||(this.isListOpened=!1,n(this,A)&&n(this,T)&&(window.removeEventListener("scroll",n(this,A),!0),window.removeEventListener("resize",n(this,T))),!n(this,u)||!this.srcElement)||!(this.appendToBody?document.body.contains(n(this,u).srcElement):this.srcElement.contains(n(this,u).srcElement))||(C(this,Q,n(this,u).srcElement.scrollTop),this.appendToBody?(document.body.removeChild(n(this,u).srcElement),(t=n(this,q))==null||t.disconnect()):this.srcElement.removeChild(n(this,u).srcElement),o(this,le,Bt).call(this,!1),o(this,pt,Us).call(this))},ct=new WeakSet,qs=function(e,t){if(!n(this,u)||!n(this,m))return;const s=t?"treeselect-list--top-to-body":"treeselect-list--top",i=t?"treeselect-list--bottom-to-body":"treeselect-list--bottom";e?(n(this,u).srcElement.classList.add(s),n(this,u).srcElement.classList.remove(i),n(this,m).srcElement.classList.add("treeselect-input--top"),n(this,m).srcElement.classList.remove("treeselect-input--bottom")):(n(this,u).srcElement.classList.remove(s),n(this,u).srcElement.classList.add(i),n(this,m).srcElement.classList.remove("treeselect-input--top"),n(this,m).srcElement.classList.add("treeselect-input--bottom"))},$=new WeakSet,gt=function(e){!n(this,m)||!n(this,u)||(e?(n(this,m).srcElement.classList.add("treeselect-input--focused"),n(this,u).srcElement.classList.add("treeselect-list--focused")):(n(this,m).srcElement.classList.remove("treeselect-input--focused"),n(this,u).srcElement.classList.remove("treeselect-list--focused")))},le=new WeakSet,Bt=function(e){var t,s,i,a;e?(t=n(this,m))==null||t.srcElement.classList.add("treeselect-input--opened"):(s=n(this,m))==null||s.srcElement.classList.remove("treeselect-input--opened"),this.staticList?(i=n(this,u))==null||i.srcElement.classList.add("treeselect-list--static"):(a=n(this,u))==null||a.srcElement.classList.remove("treeselect-list--static")},W=new WeakSet,kt=function(e){!n(this,A)||!n(this,T)||!n(this,S)||!n(this,D)||((!this.alwaysOpen||e)&&(window.removeEventListener("scroll",n(this,A),!0),window.removeEventListener("resize",n(this,T))),document.removeEventListener("mousedown",n(this,S),!0),document.removeEventListener("focus",n(this,S),!0),window.removeEventListener("blur",n(this,D)))},ht=new WeakSet,Rs=function(){var t,s,i;const e=(t=n(this,u))==null?void 0:t.isLastFocusedElementExist();this.saveScrollPosition&&e?(s=n(this,u))==null||s.srcElement.scroll(0,n(this,Q)):(i=n(this,u))==null||i.focusFirstListElement()},ne=new WeakSet,Vt=function(){var e;(e=this.srcElement)==null||e.dispatchEvent(new CustomEvent("input",{detail:this.value})),this.inputCallback&&this.inputCallback(this.value)},dt=new WeakSet,$s=function(){var e;(e=this.srcElement)==null||e.dispatchEvent(new CustomEvent("name-change",{detail:this.selectedName})),this.nameChangeCallback&&this.nameChangeCallback(this.selectedName)},ut=new WeakSet,Ws=function(){var e;this.alwaysOpen||((e=this.srcElement)==null||e.dispatchEvent(new CustomEvent("open",{detail:this.value})),this.openCallback&&this.openCallback(this.value))},pt=new WeakSet,Us=function(){var e;this.alwaysOpen||((e=this.srcElement)==null||e.dispatchEvent(new CustomEvent("close",{detail:this.value})),this.closeCallback&&this.closeCallback(this.value))},mt=new WeakSet,zs=function(e){var s;const t=(e==null?void 0:e.trim())??"";(s=this.srcElement)==null||s.dispatchEvent(new CustomEvent("search",{detail:t})),this.searchCallback&&this.searchCallback(t)},ft=new WeakSet,Ys=function(e,t){var s;(s=this.srcElement)==null||s.dispatchEvent(new CustomEvent("open-close-group",{detail:{groupId:e,isClosed:t}})),this.openCloseGroupCallback&&this.openCloseGroupCallback(e,t)},vi}); +var Mi=Object.defineProperty;var Fi=(b,p,f)=>p in b?Mi(b,p,{enumerable:!0,configurable:!0,writable:!0,value:f}):b[p]=f;var c=(b,p,f)=>(Fi(b,typeof p!="symbol"?p+"":p,f),f),yt=(b,p,f)=>{if(!p.has(b))throw TypeError("Cannot "+f)};var n=(b,p,f)=>(yt(b,p,"read from private field"),f?f.call(b):p.get(b)),r=(b,p,f)=>{if(p.has(b))throw TypeError("Cannot add the same private member more than once");p instanceof WeakSet?p.add(b):p.set(b,f)},g=(b,p,f,Y)=>(yt(b,p,"write to private field"),Y?Y.call(b,f):p.set(b,f),f);var o=(b,p,f)=>(yt(b,p,"access private method"),f);(function(b,p){typeof exports=="object"&&typeof module<"u"?module.exports=p():typeof define=="function"&&define.amd?define(p):(b=typeof globalThis<"u"?globalThis:b||self,b.Treeselect=p())})(this,function(){var O,y,H,x,me,Wt,G,re,fe,Ut,be,Yt,M,ce,B,j,Ce,Kt,ge,Xt,ve,Jt,ke,Zt,we,Qt,Ee,es,Le,ts,ye,ss,xe,is,Se,ls,_e,ns,Ae,as,Te,os,Ne,rs,Pe,cs,Ie,ds,K,xt,F,V,_,X,Oe,hs,Be,us,Ve,ps,De,ms,He,fs,Ge,bs,J,St,Me,Cs,Fe,gs,ze,vs,Z,_t,je,ks,qe,ws,Re,Es,$e,Ls,We,ys,Ue,xs,Ye,Ss,Ke,_s,Xe,As,Je,Ts,Ze,Ns,Q,At,ee,Tt,Qe,Ps,u,m,q,te,R,A,T,S,D,se,Nt,ie,Pt,et,Is,tt,Os,st,Bs,it,Vs,lt,Ds,nt,Hs,le,It,at,Gs,ot,Ms,rt,Fs,ct,zs,ne,Ot,dt,js,$,gt,ae,Bt,W,vt,ht,qs,oe,Vt,ut,Rs,pt,$s,mt,Ws,ft,Us,bt,Ys;"use strict";const b="",p={arrowUp:'',arrowDown:'',arrowRight:'',attention:'',clear:'',cross:'',check:'',partialCheck:''},f=(l,e)=>{if(e.innerHTML="",typeof l=="string")e.innerHTML=l;else{const t=l.cloneNode(!0);e.appendChild(t)}},Y=l=>{const e=l?{...l}:{};return Object.keys(p).forEach(t=>{e[t]||(e[t]=p[t])}),e},Ks=l=>l.reduce((e,{name:t},s)=>(e+=t,sn(this,y).focus(),0)}blur(){this.isOpened&&o(this,B,j).call(this),this.clearSearch(),n(this,y).blur()}updateValue(e){this.value=e,o(this,G,re).call(this),o(this,M,ce).call(this)}removeItem(e){this.value=this.value.filter(t=>t.id!==e),o(this,K,xt).call(this),o(this,G,re).call(this),o(this,M,ce).call(this)}clear(){this.value=[],o(this,K,xt).call(this),o(this,G,re).call(this),this.clearSearch()}openClose(){o(this,B,j).call(this)}clearSearch(){this.searchText="",this.searchCallback(""),o(this,M,ce).call(this)}}O=new WeakMap,y=new WeakMap,H=new WeakMap,x=new WeakMap,me=new WeakSet,Wt=function(){o(this,G,re).call(this),o(this,M,ce).call(this),o(this,fe,Ut).call(this)},G=new WeakSet,re=function(){if(n(this,O).innerHTML="",this.showTags){n(this,O).append(...o(this,ke,Zt).call(this));const e=Ks(this.value);this.nameChangeCallback(e)}else{const e=o(this,ye,ss).call(this);n(this,O).appendChild(e),this.nameChangeCallback(e.innerText)}n(this,O).appendChild(n(this,y))},fe=new WeakSet,Ut=function(){const e=[];n(this,H).innerHTML="",this.clearable&&e.push(o(this,Te,os).call(this)),this.isAlwaysOpened||e.push(o(this,Pe,cs).call(this,this.isOpened)),e.length&&n(this,H).append(...e)},be=new WeakSet,Yt=function(){if(!this.isAlwaysOpened&&n(this,x)){const e=this.isOpened?this.iconElements.arrowUp:this.iconElements.arrowDown;f(e,n(this,x))}},M=new WeakSet,ce=function(){var e;(e=this.value)!=null&&e.length?(n(this,y).removeAttribute("placeholder"),this.srcElement.classList.remove("treeselect-input--value-not-selected")):(n(this,y).setAttribute("placeholder",this.placeholder),this.srcElement.classList.add("treeselect-input--value-not-selected")),this.searchable?this.srcElement.classList.remove("treeselect-input--unsearchable"):this.srcElement.classList.add("treeselect-input--unsearchable"),this.isSingleSelect?this.srcElement.classList.add("treeselect-input--is-single-select"):this.srcElement.classList.remove("treeselect-input--is-single-select"),n(this,y).value=this.searchText},B=new WeakSet,j=function(){this.isOpened=!this.isOpened,o(this,be,Yt).call(this),this.isOpened?this.openCallback():this.closeCallback()},Ce=new WeakSet,Kt=function(e,t,s){const i=document.createElement("div");return i.classList.add("treeselect-input"),i.setAttribute("tabindex","-1"),i.addEventListener("mousedown",a=>o(this,ge,Xt).call(this,a)),i.addEventListener("focus",()=>this.focusCallback(),!0),i.addEventListener("blur",()=>this.blurCallback(),!0),e.appendChild(t),i.append(e,s),i},ge=new WeakSet,Xt=function(e){e.stopPropagation(),this.isOpened||o(this,B,j).call(this),this.focus()},ve=new WeakSet,Jt=function(){const e=document.createElement("div");return e.classList.add("treeselect-input__tags"),e},ke=new WeakSet,Zt=function(){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=o(this,Ee,es).call(this,e.name),i=o(this,Le,ts).call(this);return t.addEventListener("mousedown",a=>o(this,we,Qt).call(this,a,e.id)),t.append(s,i),t})},we=new WeakSet,Qt=function(e,t){e.preventDefault(),e.stopPropagation(),this.removeItem(t),this.focus()},Ee=new WeakSet,es=function(e){const t=document.createElement("span");return t.classList.add("treeselect-input__tags-name"),t.textContent=e,t},Le=new WeakSet,ts=function(){const e=document.createElement("span");return e.classList.add("treeselect-input__tags-cross"),f(this.iconElements.cross,e),e},ye=new WeakSet,ss=function(){const e=document.createElement("span");if(e.classList.add("treeselect-input__tags-count"),!this.value.length)return e.textContent="",e.setAttribute("title",""),e;const t=this.value.length===1?this.value[0].name:`${this.value.length} ${this.tagsCountText}`;return e.textContent=t,e.setAttribute("title",t),e},xe=new WeakSet,is=function(){const e=document.createElement("input");return e.classList.add("treeselect-input__edit"),this.id&&e.setAttribute("id",this.id),(!this.searchable||this.disabled)&&e.setAttribute("readonly","readonly"),this.disabled&&e.setAttribute("tabindex","-1"),this.ariaLabel.length&&e.setAttribute("aria-label",this.ariaLabel),e.addEventListener("keydown",t=>o(this,Se,ls).call(this,t)),e.addEventListener("input",t=>o(this,_e,ns).call(this,t,e)),e},Se=new WeakSet,ls=function(e){e.stopPropagation();const t=e.key;t==="Backspace"&&!this.searchText.length&&this.value.length&&!this.showTags&&this.clear(),t==="Backspace"&&!this.searchText.length&&this.value.length&&this.removeItem(this.value[this.value.length-1].id),e.code==="Space"&&(!this.searchText||!this.searchable)&&o(this,B,j).call(this),(t==="Enter"||t==="ArrowDown"||t==="ArrowUp")&&e.preventDefault(),this.keydownCallback(e),t!=="Tab"&&this.focus()},_e=new WeakSet,ns=function(e,t){e.stopPropagation();const s=this.searchText,i=t.value.trim();if(s.length===0&&i.length===0){t.value="";return}if(this.searchable){const a=e.target.value;this.searchCallback(a),this.isOpened||o(this,B,j).call(this)}else t.value="";this.searchText=t.value},Ae=new WeakSet,as=function(){const e=document.createElement("div");return e.classList.add("treeselect-input__operators"),e},Te=new WeakSet,os=function(){const e=document.createElement("span");return e.classList.add("treeselect-input__clear"),e.setAttribute("tabindex","-1"),f(this.iconElements.clear,e),e.addEventListener("mousedown",t=>o(this,Ne,rs).call(this,t)),e},Ne=new WeakSet,rs=function(e){e.preventDefault(),e.stopPropagation(),(this.searchText.length||this.value.length)&&this.clear(),this.focus()},Pe=new WeakSet,cs=function(e){g(this,x,document.createElement("span")),n(this,x).classList.add("treeselect-input__arrow");const t=e?this.iconElements.arrowUp:this.iconElements.arrowDown;return f(t,n(this,x)),n(this,x).addEventListener("mousedown",s=>o(this,Ie,ds).call(this,s)),n(this,x)},Ie=new WeakSet,ds=function(e){e.stopPropagation(),e.preventDefault(),this.focus(),o(this,B,j).call(this)},K=new WeakSet,xt=function(){this.inputCallback(this.value)};const Dt=(l,e,t,s)=>{ei(e);const i=e.filter(a=>!a.disabled&&l.some(d=>d===a.id));if(t&&i.length){i[0].checked=!0;return}i.forEach(a=>{a.checked=!0;const d=kt(a,e,s);a.checked=d})},kt=({id:l,checked:e},t,s)=>{const i=t.find(d=>d.id===l);if(!i)return!1;if(s)return i.checked=i.disabled?!1:!!e,i.checked;const a=Ht(!!e,i,t);return Gt(i,t),a},Ht=(l,e,t)=>{if(!e.isGroup)return e.checked=e.disabled?!1:!!l,e.isPartialChecked=!1,e.checked;const s=t.filter(h=>h.childOf===e.id);return!l||e.disabled||e.isPartialChecked?(e.checked=!1,e.isPartialChecked=!1,wt(e,s,t),e.checked):Mt(s,t)?Ft(s)?(e.checked=!1,e.isPartialChecked=!1,e.disabled=!0,e.checked):(e.checked=!1,e.isPartialChecked=!0,s.forEach(h=>{Ht(l,h,t)}),e.checked):(e.checked=!0,e.isPartialChecked=!1,wt(e,s,t),e.checked)},Gt=(l,e)=>{const t=e.find(s=>s.id===l.childOf);t&&(Js(t,e),Gt(t,e))},Js=(l,e)=>{const t=de(l,e);if(Ft(t)){l.checked=!1,l.isPartialChecked=!1,l.disabled=!0;return}if(Zs(t)){l.checked=!0,l.isPartialChecked=!1;return}if(Qs(t)){l.checked=!1,l.isPartialChecked=!0;return}l.checked=!1,l.isPartialChecked=!1},wt=({checked:l,disabled:e},t,s)=>{t.forEach(i=>{i.disabled=!!e||!!i.disabled,i.checked=!!l&&!i.disabled,i.isPartialChecked=!1;const a=de(i,s);wt({checked:l,disabled:e},a,s)})},Mt=(l,e)=>l.some(i=>i.disabled)?!0:l.some(i=>{if(i.isGroup){const a=de(i,e);return Mt(a,e)}return!1}),Ft=l=>l.every(e=>!!e.disabled),Zs=l=>l.every(e=>!!e.checked),Qs=l=>l.some(e=>!!e.checked||!!e.isPartialChecked),ei=l=>{l.forEach(e=>{e.checked=!1,e.isPartialChecked=!1})},ti=(l,e,t)=>{const s={level:0,groupId:""},i=zt(l,e,s.groupId,s.level);return ii(i,t)},zt=(l,e,t,s)=>l.reduce((i,a)=>{var C;const d=!!((C=a.children)!=null&&C.length),h=s>=e&&d,v=s>e;if(i.push({id:a.value,name:a.name,childOf:t,isGroup:d,checked:!1,isPartialChecked:!1,level:s,isClosed:h,hidden:v,disabled:a.disabled??!1}),d){const k=zt(a.children,e,a.value,s+1);i.push(...k)}return i},[]),de=({id:l},e)=>e.filter(t=>t.childOf===l),si=l=>{const{ungroupedNodes:e,allGroupedNodes:t,allNodes:s}=l.reduce((a,d)=>(d.checked&&(a.allNodes.push(d),d.isGroup?a.allGroupedNodes.push(d):a.ungroupedNodes.push(d)),a),{ungroupedNodes:[],allGroupedNodes:[],allNodes:[]}),i=s.filter(a=>!t.some(({id:d})=>d===a.childOf));return{ungroupedNodes:e,groupedNodes:i,allNodes:s}},ii=(l,e)=>(l.filter(s=>!!s.disabled).forEach(({id:s})=>kt({id:s,checked:!1},l,e)),l),he=(l,{id:e,isClosed:t})=>{de({id:e},l).forEach(i=>{i.hidden=t??!1,i.isGroup&&!i.isClosed&&he(l,{id:i.id,isClosed:t})})},li=l=>{l.filter(e=>e.isGroup&&!e.disabled&&(e.checked||e.isPartialChecked)).forEach(e=>{e.isClosed=!1,he(l,e)})},ni=(l,e)=>{const t=ai(l,e);l.forEach(s=>{t.some(({id:a})=>a===s.id)?(s.isGroup&&(s.isClosed=!1,he(l,s)),s.hidden=!1):s.hidden=!0})},ai=(l,e)=>l.reduce((t,s)=>{if(s.name.toLowerCase().includes(e.toLowerCase())){if(t.push(s),s.isGroup){const a=jt(s.id,l);t.push(...a)}if(s.childOf){const a=qt(s.childOf,l);t.push(...a)}}return t},[]),jt=(l,e)=>e.reduce((t,s)=>(s.childOf===l&&(t.push(s),s.isGroup&&t.push(...jt(s.id,e))),t),[]),qt=(l,e)=>e.reduce((t,s)=>(s.id===l&&(t.push(s),s.childOf&&t.push(...qt(s.childOf,e))),t),[]),oi=l=>{const{duplications:e}=l.reduce((t,s)=>(t.allItems.some(i=>i.toString()===s.id.toString())&&t.duplications.push(s.id),t.allItems.push(s.id),t),{duplications:[],allItems:[]});e.length&&console.error(`Validation: You have duplicated values: ${e.join(", ")}! You should use unique values.`)},ri=(l,e,t,s,i,a,d,h,v,C,k,w)=>{Dt(l,e,i,v),h&&d&&li(e),ue(e,t,s,a,C,k,w)},ue=(l,e,t,s,i,a,d)=>{l.forEach(h=>{const v=e.querySelector(`[input-id="${h.id}"]`),C=I(v);v.checked=h.checked,ci(h,C,s),di(h,C),hi(h,C),ui(h,C,t),pi(h,C),fi(h,C,l,i,a,d),mi(h,v,t)}),bi(l,e)},ci=(l,e,t)=>{l.checked?e.classList.add("treeselect-list__item--checked"):e.classList.remove("treeselect-list__item--checked"),Array.isArray(t)&&t[0]===l.id&&!l.disabled?e.classList.add("treeselect-list__item--single-selected"):e.classList.remove("treeselect-list__item--single-selected")},di=(l,e)=>{l.isPartialChecked?e.classList.add("treeselect-list__item--partial-checked"):e.classList.remove("treeselect-list__item--partial-checked")},hi=(l,e)=>{l.disabled?e.classList.add("treeselect-list__item--disabled"):e.classList.remove("treeselect-list__item--disabled")},ui=(l,e,t)=>{if(l.isGroup){const s=e.querySelector(".treeselect-list__item-icon"),i=l.isClosed?t.arrowRight:t.arrowDown;f(i,s),l.isClosed?e.classList.add("treeselect-list__item--closed"):e.classList.remove("treeselect-list__item--closed")}},pi=(l,e)=>{l.hidden?e.classList.add("treeselect-list__item--hidden"):e.classList.remove("treeselect-list__item--hidden")},mi=(l,e,t)=>{const i=e.parentNode.querySelector(".treeselect-list__item-checkbox-icon");l.checked?f(t.check,i):l.isPartialChecked?f(t.partialCheck,i):i.innerHTML=""},fi=(l,e,t,s,i,a)=>{if(l.level===0){const h=t.some(k=>k.isGroup&&k.level===l.level),v=!l.isGroup&&h?`${i}px`:`${a}px`,C=l.isGroup?"0":v;s?e.style.paddingRight=C:e.style.paddingLeft=C}else{const h=l.isGroup?`${l.level*i}px`:`${l.level*i+i}px`;s?e.style.paddingRight=h:e.style.paddingLeft=h}e.setAttribute("level",l.level.toString()),e.setAttribute("group",l.isGroup.toString())},bi=(l,e)=>{const t=l.some(i=>!i.hidden),s=e.querySelector(".treeselect-list__empty");t?s.classList.add("treeselect-list__empty--hidden"):s.classList.remove("treeselect-list__empty--hidden")},I=l=>l.parentNode.parentNode,Rt=(l,e)=>e.find(t=>t.id.toString()===l),Ci=l=>I(l).querySelector(".treeselect-list__item-icon"),gi=(l,e)=>{e&&Object.keys(e).forEach(t=>{const s=e[t];typeof s=="string"&&l.setAttribute(t,s)})};class vi{constructor({options:e,value:t,openLevel:s,listSlotHtmlComponent:i,emptyText:a,isSingleSelect:d,iconElements:h,showCount:v,disabledBranchNode:C,expandSelected:k,isIndependentNodes:w,rtl:E,defaultPadding:L,zeroLevelItemPadding:N,inputCallback:P,arrowClickCallback:z,mouseupCallback:U}){r(this,Oe);r(this,Be);r(this,Ve);r(this,De);r(this,He);r(this,Ge);r(this,J);r(this,Me);r(this,Fe);r(this,ze);r(this,Z);r(this,je);r(this,qe);r(this,Re);r(this,$e);r(this,We);r(this,Ue);r(this,Ye);r(this,Ke);r(this,Xe);r(this,Je);r(this,Ze);r(this,Q);r(this,ee);r(this,Qe);c(this,"options");c(this,"value");c(this,"openLevel");c(this,"listSlotHtmlComponent");c(this,"emptyText");c(this,"isSingleSelect");c(this,"showCount");c(this,"disabledBranchNode");c(this,"expandSelected");c(this,"isIndependentNodes");c(this,"rtl");c(this,"defaultPadding");c(this,"zeroLevelItemPadding");c(this,"iconElements");c(this,"searchText");c(this,"flattedOptions");c(this,"flattedOptionsBeforeSearch");c(this,"selectedNodes");c(this,"srcElement");c(this,"inputCallback");c(this,"arrowClickCallback");c(this,"mouseupCallback");r(this,F,null);r(this,V,!0);r(this,_,[]);r(this,X,!0);this.options=e,this.value=t,this.openLevel=s??0,this.listSlotHtmlComponent=i??null,this.emptyText=a??"No results found...",this.isSingleSelect=d??!1,this.showCount=v??!1,this.disabledBranchNode=C??!1,this.expandSelected=k??!1,this.isIndependentNodes=w??!1,this.rtl=E??!1,this.defaultPadding=L??20,this.zeroLevelItemPadding=N??5,this.iconElements=h,this.searchText="",this.flattedOptions=ti(this.options,this.openLevel,this.isIndependentNodes),this.flattedOptionsBeforeSearch=this.flattedOptions,this.selectedNodes={nodes:[],groupedNodes:[],allNodes:[]},this.srcElement=o(this,Ve,ps).call(this),this.inputCallback=P,this.arrowClickCallback=z,this.mouseupCallback=U,oi(this.flattedOptions)}updateValue(e){this.value=e,g(this,_,this.isSingleSelect?this.value:[]),ri(e,this.flattedOptions,this.srcElement,this.iconElements,this.isSingleSelect,n(this,_),this.expandSelected,n(this,X),this.isIndependentNodes,this.rtl,this.defaultPadding,this.zeroLevelItemPadding),g(this,X,!1),o(this,ee,Tt).call(this)}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(s=>{const i=this.flattedOptions.find(a=>a.id===s.id);return i.isClosed=s.isClosed,i.hidden=s.hidden,i}),this.flattedOptionsBeforeSearch=[]),this.searchText&&ni(this.flattedOptions,e),ue(this.flattedOptions,this.srcElement,this.iconElements,n(this,_),this.rtl,this.defaultPadding,this.zeroLevelItemPadding),this.focusFirstListElement()}callKeyAction(e){g(this,V,!1);const t=this.srcElement.querySelector(".treeselect-list__item--focused");if(t==null?void 0:t.classList.contains("treeselect-list__item--hidden"))return;const i=e.key;i==="Enter"&&t&&t.dispatchEvent(new Event("mousedown")),(i==="ArrowLeft"||i==="ArrowRight")&&o(this,Oe,hs).call(this,t,e),(i==="ArrowDown"||i==="ArrowUp")&&o(this,Be,us).call(this,t,i)}focusFirstListElement(){const e="treeselect-list__item--focused",t=this.srcElement.querySelector(`.${e}`),s=Array.from(this.srcElement.querySelectorAll(".treeselect-list__item-checkbox")).filter(a=>window.getComputedStyle(I(a)).display!=="none");if(!s.length)return;t&&t.classList.remove(e),I(s[0]).classList.add(e)}isLastFocusedElementExist(){return!!n(this,F)}}F=new WeakMap,V=new WeakMap,_=new WeakMap,X=new WeakMap,Oe=new WeakSet,hs=function(e,t){if(!e)return;const s=t.key,a=e.querySelector(".treeselect-list__item-checkbox").getAttribute("input-id"),d=Rt(a,this.flattedOptions),h=e.querySelector(".treeselect-list__item-icon");s==="ArrowLeft"&&!d.isClosed&&d.isGroup&&(h.dispatchEvent(new Event("mousedown")),t.preventDefault()),s==="ArrowRight"&&d.isClosed&&d.isGroup&&(h.dispatchEvent(new Event("mousedown")),t.preventDefault())},Be=new WeakSet,us=function(e,t){var i;const s=Array.from(this.srcElement.querySelectorAll(".treeselect-list__item-checkbox")).filter(a=>window.getComputedStyle(I(a)).display!=="none");if(s.length)if(!e)I(s[0]).classList.add("treeselect-list__item--focused");else{const a=s.findIndex(P=>I(P).classList.contains("treeselect-list__item--focused"));I(s[a]).classList.remove("treeselect-list__item--focused");const h=t==="ArrowDown"?a+1:a-1,v=t==="ArrowDown"?0:s.length-1,C=s[h]??s[v],k=!s[h],w=I(C);w.classList.add("treeselect-list__item--focused");const E=this.srcElement.getBoundingClientRect(),L=w.getBoundingClientRect();if(k&&t==="ArrowDown"){this.srcElement.scroll(0,0);return}if(k&&t==="ArrowUp"){this.srcElement.scroll(0,this.srcElement.scrollHeight);return}const N=((i=this.listSlotHtmlComponent)==null?void 0:i.clientHeight)??0;if(E.y+E.heightL.y){this.srcElement.scroll(0,this.srcElement.scrollTop-L.height);return}}},Ve=new WeakSet,ps=function(){const e=o(this,De,ms).call(this),t=o(this,J,St).call(this,this.options);e.append(...t);const s=o(this,Fe,gs).call(this);e.append(s);const i=o(this,Me,Cs).call(this);return i&&e.append(i),e},De=new WeakSet,ms=function(){const e=document.createElement("div");return e.classList.add("treeselect-list"),this.isSingleSelect&&e.classList.add("treeselect-list--single-select"),this.disabledBranchNode&&e.classList.add("treeselect-list--disabled-branch-node"),e.addEventListener("mouseout",t=>o(this,He,fs).call(this,t)),e.addEventListener("mousemove",()=>o(this,Ge,bs).call(this)),e.addEventListener("mouseup",()=>this.mouseupCallback(),!0),e},He=new WeakSet,fs=function(e){e.stopPropagation(),n(this,F)&&n(this,V)&&n(this,F).classList.add("treeselect-list__item--focused")},Ge=new WeakSet,bs=function(){g(this,V,!0)},J=new WeakSet,St=function(e){return e.reduce((t,s)=>{var a;if((a=s.children)!=null&&a.length){const d=o(this,ze,vs).call(this,s),h=o(this,J,St).call(this,s.children);return d.append(...h),t.push(d),t}const i=o(this,Z,_t).call(this,s,!1);return t.push(i),t},[])},Me=new WeakSet,Cs=function(){if(!this.listSlotHtmlComponent)return null;const e=document.createElement("div");return e.classList.add("treeselect-list__slot"),e.appendChild(this.listSlotHtmlComponent),e},Fe=new WeakSet,gs=function(){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"),f(this.iconElements.attention,t);const s=document.createElement("span");return s.classList.add("treeselect-list__empty-text"),s.textContent=this.emptyText,e.append(t,s),e},ze=new WeakSet,vs=function(e){const t=document.createElement("div");t.setAttribute("group-container-id",e.value.toString()),t.classList.add("treeselect-list__group-container");const s=o(this,Z,_t).call(this,e,!0);return t.appendChild(s),t},Z=new WeakSet,_t=function(e,t){const s=o(this,je,ks).call(this,e);if(t){const d=o(this,We,ys).call(this);s.appendChild(d),s.classList.add("treeselect-list__item--group")}const i=o(this,Ye,Ss).call(this,e),a=o(this,Ke,_s).call(this,e,t);return s.append(i,a),s},je=new WeakSet,ks=function(e){const t=document.createElement("div");return gi(t,e.htmlAttr),t.setAttribute("tabindex","-1"),t.setAttribute("title",e.name),t.classList.add("treeselect-list__item"),t.addEventListener("mouseover",()=>o(this,qe,ws).call(this,t),!0),t.addEventListener("mouseout",()=>o(this,Re,Es).call(this,t),!0),t.addEventListener("mousedown",s=>o(this,$e,Ls).call(this,s,e)),t},qe=new WeakSet,ws=function(e){n(this,V)&&o(this,Q,At).call(this,!0,e)},Re=new WeakSet,Es=function(e){n(this,V)&&(o(this,Q,At).call(this,!1,e),g(this,F,e))},$e=new WeakSet,Ls=function(e,t){var a;if(e.preventDefault(),e.stopPropagation(),(a=this.flattedOptions.find(d=>d.id===t.value))==null?void 0:a.disabled)return;const i=e.target.querySelector(".treeselect-list__item-checkbox");i.checked=!i.checked,o(this,Je,Ts).call(this,i,t)},We=new WeakSet,ys=function(){const e=document.createElement("span");return e.setAttribute("tabindex","-1"),e.classList.add("treeselect-list__item-icon"),f(this.iconElements.arrowDown,e),e.addEventListener("mousedown",t=>o(this,Ue,xs).call(this,t)),e},Ue=new WeakSet,xs=function(e){e.preventDefault(),e.stopPropagation(),o(this,Ze,Ns).call(this,e)},Ye=new WeakSet,Ss=function(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},Ke=new WeakSet,_s=function(e,t){const s=document.createElement("label");if(s.textContent=e.name,s.classList.add("treeselect-list__item-label"),t&&this.showCount){const i=o(this,Xe,As).call(this,e);s.appendChild(i)}return s},Xe=new WeakSet,As=function(e){const t=document.createElement("span"),s=this.flattedOptions.filter(i=>i.childOf===e.value);return t.textContent=`(${s.length})`,t.classList.add("treeselect-list__item-label-counter"),t},Je=new WeakSet,Ts=function(e,t){const s=this.flattedOptions.find(i=>i.id===t.value);if(s){if(s!=null&&s.isGroup&&this.disabledBranchNode){const i=Ci(e);i==null||i.dispatchEvent(new Event("mousedown"));return}if(this.isSingleSelect){const[i]=n(this,_);if(s.id===i)return;g(this,_,[s.id]),Dt([s.id],this.flattedOptions,this.isSingleSelect,this.isIndependentNodes)}else{s.checked=e.checked;const i=kt(s,this.flattedOptions,this.isIndependentNodes);e.checked=i}ue(this.flattedOptions,this.srcElement,this.iconElements,n(this,_),this.rtl,this.defaultPadding,this.zeroLevelItemPadding),o(this,Qe,Ps).call(this)}},Ze=new WeakSet,Ns=function(e){var a,d;const t=(d=(a=e.target)==null?void 0:a.parentNode)==null?void 0:d.querySelector("[input-id]"),s=(t==null?void 0:t.getAttribute("input-id"))??null,i=Rt(s,this.flattedOptions);i&&(i.isClosed=!i.isClosed,he(this.flattedOptions,i),ue(this.flattedOptions,this.srcElement,this.iconElements,n(this,_),this.rtl,this.defaultPadding,this.zeroLevelItemPadding),this.arrowClickCallback(i.id,i.isClosed))},Q=new WeakSet,At=function(e,t){const s="treeselect-list__item--focused";if(e){const i=Array.from(this.srcElement.querySelectorAll(`.${s}`));i.length&&i.forEach(a=>a.classList.remove(s)),t.classList.add(s)}else t.classList.remove(s)},ee=new WeakSet,Tt=function(){const{ungroupedNodes:e,groupedNodes:t,allNodes:s}=si(this.flattedOptions);this.selectedNodes={nodes:e,groupedNodes:t,allNodes:s}},Qe=new WeakSet,Ps=function(){o(this,ee,Tt).call(this),this.inputCallback(this.selectedNodes),this.value=this.selectedNodes.nodes.map(e=>e.id)};const $t=({parentHtmlContainer:l,staticList:e,appendToBody:t,isSingleSelect:s,value:i,direction:a})=>{l||console.error("Validation: parentHtmlContainer prop is required!"),e&&t&&console.error("Validation: You should set staticList to false if you use appendToBody!"),s&&Array.isArray(i)&&console.error("Validation: if you use isSingleSelect prop, you should pass a single value!"),!s&&!Array.isArray(i)&&console.error("Validation: you should pass an array as a value!"),a&&a!=="auto"&&a!=="bottom"&&a!=="top"&&console.error("Validation: you should pass (auto | top | bottom | undefined) as a value for the direction prop!")},pe=l=>l.map(e=>e.id),ki=l=>l?Array.isArray(l)?l:[l]:[],wi=(l,e)=>{if(e){const[t]=l;return t??null}return l};class Ei{constructor({parentHtmlContainer:e,value:t,options:s,openLevel:i,appendToBody:a,alwaysOpen:d,showTags:h,tagsCountText:v,clearable:C,searchable:k,placeholder:w,grouped:E,isGroupedValue:L,listSlotHtmlComponent:N,disabled:P,emptyText:z,staticList:U,id:Et,ariaLabel:Lt,isSingleSelect:Ct,showCount:Li,disabledBranchNode:yi,direction:xi,expandSelected:Si,saveScrollPosition:_i,isIndependentNodes:Ai,rtl:Ti,defaultPadding:Ni,zeroLevelItemPadding:Pi,iconElements:Ii,inputCallback:Oi,openCallback:Bi,closeCallback:Vi,nameChangeCallback:Di,searchCallback:Hi,openCloseGroupCallback:Gi}){r(this,se);r(this,ie);r(this,et);r(this,tt);r(this,st);r(this,it);r(this,lt);r(this,nt);r(this,le);r(this,at);r(this,ot);r(this,rt);r(this,ct);r(this,ne);r(this,dt);r(this,$);r(this,ae);r(this,W);r(this,ht);r(this,oe);r(this,ut);r(this,pt);r(this,mt);r(this,ft);r(this,bt);c(this,"parentHtmlContainer");c(this,"value");c(this,"options");c(this,"openLevel");c(this,"appendToBody");c(this,"alwaysOpen");c(this,"showTags");c(this,"tagsCountText");c(this,"clearable");c(this,"searchable");c(this,"placeholder");c(this,"grouped");c(this,"isGroupedValue");c(this,"listSlotHtmlComponent");c(this,"disabled");c(this,"emptyText");c(this,"staticList");c(this,"id");c(this,"ariaLabel");c(this,"isSingleSelect");c(this,"showCount");c(this,"disabledBranchNode");c(this,"direction");c(this,"expandSelected");c(this,"saveScrollPosition");c(this,"isIndependentNodes");c(this,"rtl");c(this,"defaultPadding");c(this,"zeroLevelItemPadding");c(this,"iconElements");c(this,"inputCallback");c(this,"openCallback");c(this,"closeCallback");c(this,"nameChangeCallback");c(this,"searchCallback");c(this,"openCloseGroupCallback");c(this,"ungroupedValue");c(this,"groupedValue");c(this,"allValue");c(this,"isListOpened");c(this,"selectedName");c(this,"srcElement");r(this,u,null);r(this,m,null);r(this,q,null);r(this,te,0);r(this,R,0);r(this,A,null);r(this,T,null);r(this,S,null);r(this,D,null);$t({parentHtmlContainer:e,value:t,staticList:U,appendToBody:a,isSingleSelect:Ct}),this.parentHtmlContainer=e,this.value=[],this.options=s??[],this.openLevel=i??0,this.appendToBody=a??!1,this.alwaysOpen=!!(d&&!P),this.showTags=h??!0,this.tagsCountText=v??"elements selected",this.clearable=C??!0,this.searchable=k??!0,this.placeholder=w??"Search...",this.grouped=E??!0,this.isGroupedValue=L??!1,this.listSlotHtmlComponent=N??null,this.disabled=P??!1,this.emptyText=z??"No results found...",this.staticList=!!(U&&!this.appendToBody),this.id=Et??"",this.ariaLabel=Lt??"",this.isSingleSelect=Ct??!1,this.showCount=Li??!1,this.disabledBranchNode=yi??!1,this.direction=xi??"auto",this.expandSelected=Si??!1,this.saveScrollPosition=_i??!0,this.isIndependentNodes=Ai??!1,this.rtl=Ti??!1,this.defaultPadding=Ni??20,this.zeroLevelItemPadding=Pi??5,this.iconElements=Y(Ii),this.inputCallback=Oi,this.openCallback=Bi,this.closeCallback=Vi,this.nameChangeCallback=Di,this.searchCallback=Hi,this.openCloseGroupCallback=Gi,this.ungroupedValue=[],this.groupedValue=[],this.allValue=[],this.isListOpened=!1,this.selectedName="",this.srcElement=null,o(this,se,Nt).call(this,t)}mount(){$t({parentHtmlContainer:this.parentHtmlContainer,value:this.value,staticList:this.staticList,appendToBody:this.appendToBody,isSingleSelect:this.isSingleSelect}),this.iconElements=Y(this.iconElements),o(this,se,Nt).call(this,this.value)}updateValue(e){const t=ki(e),s=n(this,u);s&&(s.updateValue(t),o(this,le,It).call(this,s==null?void 0:s.selectedNodes))}destroy(){this.srcElement&&(o(this,ne,Ot).call(this),this.srcElement.innerHTML="",this.srcElement=null,o(this,W,vt).call(this,!0))}focus(){n(this,m)&&n(this,m).focus()}toggleOpenClose(){n(this,m)&&(n(this,m).openClose(),n(this,m).focus())}scrollWindowHandler(){this.updateListPosition()}focusWindowHandler(e){var s,i,a;((s=this.srcElement)==null?void 0:s.contains(e.target))||((i=n(this,u))==null?void 0:i.srcElement.contains(e.target))||((a=n(this,m))==null||a.blur(),o(this,W,vt).call(this,!1),o(this,$,gt).call(this,!1))}blurWindowHandler(){var e;(e=n(this,m))==null||e.blur(),o(this,W,vt).call(this,!1),o(this,$,gt).call(this,!1)}updateListPosition(){var N;const e=this.srcElement,t=(N=n(this,u))==null?void 0:N.srcElement;if(!e||!t)return;const{height:s}=t.getBoundingClientRect(),{x:i,y:a,height:d,width:h}=e.getBoundingClientRect(),v=window.innerHeight,C=a,k=v-a-d;let w=C>k&&C>=s&&ko(this,at,Gs).call(this,i),arrowClickCallback:(i,a)=>o(this,ot,Ms).call(this,i,a),mouseupCallback:()=>{var i;return(i=n(this,m))==null?void 0:i.focus()}}),s=new Xs({value:[],showTags:this.showTags,tagsCountText:this.tagsCountText,clearable:this.clearable,isAlwaysOpened:this.alwaysOpen,searchable:this.searchable,placeholder:this.placeholder,disabled:this.disabled,isSingleSelect:this.isSingleSelect,id:this.id,ariaLabel:this.ariaLabel,iconElements:this.iconElements,inputCallback:i=>o(this,tt,Os).call(this,i),searchCallback:i=>o(this,it,Vs).call(this,i),openCallback:()=>o(this,ct,zs).call(this),closeCallback:()=>o(this,ne,Ot).call(this),keydownCallback:i=>o(this,st,Bs).call(this,i),focusCallback:()=>o(this,lt,Ds).call(this),blurCallback:()=>o(this,nt,Hs).call(this),nameChangeCallback:i=>o(this,rt,Fs).call(this,i)});return this.appendToBody&&g(this,q,new ResizeObserver(()=>this.updateListPosition())),e.append(s.srcElement),{container:e,list:t,input:s}},tt=new WeakSet,Os=function(e){var i,a;const t=pe(e);(i=n(this,u))==null||i.updateValue(t);const s=((a=n(this,u))==null?void 0:a.selectedNodes)??{};o(this,ie,Pt).call(this,s),o(this,oe,Vt).call(this)},st=new WeakSet,Bs=function(e){var t;this.isListOpened&&((t=n(this,u))==null||t.callKeyAction(e))},it=new WeakSet,Vs=function(e){n(this,R)&&clearTimeout(n(this,R)),g(this,R,window.setTimeout(()=>{var t;(t=n(this,u))==null||t.updateSearchValue(e),this.updateListPosition()},350)),o(this,ft,Us).call(this,e)},lt=new WeakSet,Ds=function(){o(this,$,gt).call(this,!0),n(this,S)&&n(this,S)&&n(this,D)&&(document.addEventListener("mousedown",n(this,S),!0),document.addEventListener("focus",n(this,S),!0),window.addEventListener("blur",n(this,D)))},nt=new WeakSet,Hs=function(){setTimeout(()=>{var s,i;const e=(s=n(this,m))==null?void 0:s.srcElement.contains(document.activeElement),t=(i=n(this,u))==null?void 0:i.srcElement.contains(document.activeElement);!e&&!t&&this.blurWindowHandler()},1)},le=new WeakSet,It=function(e){var s;if(!e)return;let t=[];this.isIndependentNodes||this.isSingleSelect?t=e.allNodes:this.grouped?t=e.groupedNodes:t=e.nodes,(s=n(this,m))==null||s.updateValue(t),o(this,ie,Pt).call(this,e)},at=new WeakSet,Gs=function(e){var t,s,i;o(this,le,It).call(this,e),this.isSingleSelect&&!this.alwaysOpen&&((t=n(this,m))==null||t.openClose(),(s=n(this,m))==null||s.clearSearch()),(i=n(this,m))==null||i.focus(),o(this,oe,Vt).call(this)},ot=new WeakSet,Ms=function(e,t){var s;(s=n(this,m))==null||s.focus(),this.updateListPosition(),o(this,bt,Ys).call(this,e,t)},rt=new WeakSet,Fs=function(e){this.selectedName!==e&&(this.selectedName=e,o(this,ut,Rs).call(this))},ct=new WeakSet,zs=function(){var e;this.isListOpened=!0,n(this,A)&&n(this,T)&&(window.addEventListener("scroll",n(this,A),!0),window.addEventListener("resize",n(this,T))),!(!n(this,u)||!this.srcElement)&&(this.appendToBody?(document.body.appendChild(n(this,u).srcElement),(e=n(this,q))==null||e.observe(this.srcElement)):this.srcElement.appendChild(n(this,u).srcElement),this.updateListPosition(),o(this,ae,Bt).call(this,!0),o(this,ht,qs).call(this),o(this,pt,$s).call(this))},ne=new WeakSet,Ot=function(){var t;this.alwaysOpen||(this.isListOpened=!1,n(this,A)&&n(this,T)&&(window.removeEventListener("scroll",n(this,A),!0),window.removeEventListener("resize",n(this,T))),!n(this,u)||!this.srcElement)||!(this.appendToBody?document.body.contains(n(this,u).srcElement):this.srcElement.contains(n(this,u).srcElement))||(g(this,te,n(this,u).srcElement.scrollTop),this.appendToBody?(document.body.removeChild(n(this,u).srcElement),(t=n(this,q))==null||t.disconnect()):this.srcElement.removeChild(n(this,u).srcElement),o(this,ae,Bt).call(this,!1),o(this,mt,Ws).call(this))},dt=new WeakSet,js=function(e,t){if(!n(this,u)||!n(this,m))return;const s=t?"treeselect-list--top-to-body":"treeselect-list--top",i=t?"treeselect-list--bottom-to-body":"treeselect-list--bottom";e?(n(this,u).srcElement.classList.add(s),n(this,u).srcElement.classList.remove(i),n(this,m).srcElement.classList.add("treeselect-input--top"),n(this,m).srcElement.classList.remove("treeselect-input--bottom")):(n(this,u).srcElement.classList.remove(s),n(this,u).srcElement.classList.add(i),n(this,m).srcElement.classList.remove("treeselect-input--top"),n(this,m).srcElement.classList.add("treeselect-input--bottom"))},$=new WeakSet,gt=function(e){!n(this,m)||!n(this,u)||(e?(n(this,m).srcElement.classList.add("treeselect-input--focused"),n(this,u).srcElement.classList.add("treeselect-list--focused")):(n(this,m).srcElement.classList.remove("treeselect-input--focused"),n(this,u).srcElement.classList.remove("treeselect-list--focused")))},ae=new WeakSet,Bt=function(e){var t,s,i,a;e?(t=n(this,m))==null||t.srcElement.classList.add("treeselect-input--opened"):(s=n(this,m))==null||s.srcElement.classList.remove("treeselect-input--opened"),this.staticList?(i=n(this,u))==null||i.srcElement.classList.add("treeselect-list--static"):(a=n(this,u))==null||a.srcElement.classList.remove("treeselect-list--static")},W=new WeakSet,vt=function(e){!n(this,A)||!n(this,T)||!n(this,S)||!n(this,D)||((!this.alwaysOpen||e)&&(window.removeEventListener("scroll",n(this,A),!0),window.removeEventListener("resize",n(this,T))),document.removeEventListener("mousedown",n(this,S),!0),document.removeEventListener("focus",n(this,S),!0),window.removeEventListener("blur",n(this,D)))},ht=new WeakSet,qs=function(){var t,s,i;const e=(t=n(this,u))==null?void 0:t.isLastFocusedElementExist();this.saveScrollPosition&&e?(s=n(this,u))==null||s.srcElement.scroll(0,n(this,te)):(i=n(this,u))==null||i.focusFirstListElement()},oe=new WeakSet,Vt=function(){var e;(e=this.srcElement)==null||e.dispatchEvent(new CustomEvent("input",{detail:this.value})),this.inputCallback&&this.inputCallback(this.value)},ut=new WeakSet,Rs=function(){var e;(e=this.srcElement)==null||e.dispatchEvent(new CustomEvent("name-change",{detail:this.selectedName})),this.nameChangeCallback&&this.nameChangeCallback(this.selectedName)},pt=new WeakSet,$s=function(){var e;this.alwaysOpen||((e=this.srcElement)==null||e.dispatchEvent(new CustomEvent("open",{detail:this.value})),this.openCallback&&this.openCallback(this.value))},mt=new WeakSet,Ws=function(){var e;this.alwaysOpen||((e=this.srcElement)==null||e.dispatchEvent(new CustomEvent("close",{detail:this.value})),this.closeCallback&&this.closeCallback(this.value))},ft=new WeakSet,Us=function(e){var s;const t=(e==null?void 0:e.trim())??"";(s=this.srcElement)==null||s.dispatchEvent(new CustomEvent("search",{detail:t})),this.searchCallback&&this.searchCallback(t)},bt=new WeakSet,Ys=function(e,t){var s;(s=this.srcElement)==null||s.dispatchEvent(new CustomEvent("open-close-group",{detail:{groupId:e,isClosed:t}})),this.openCloseGroupCallback&&this.openCloseGroupCallback(e,t)},Ei}); diff --git a/src/list/index.ts b/src/list/index.ts index cfb01ae..8193f64 100644 --- a/src/list/index.ts +++ b/src/list/index.ts @@ -41,7 +41,9 @@ const updateListValue = ( expandSelected: boolean, isFirstValueUpdate: boolean, isIndependentNodes: boolean, - rtl: boolean + rtl: boolean, + defaultPadding: number, + zeroLevelItemPadding: number ) => { updateOptionsByValue(newValue, flattedOptions, isSingleSelect, isIndependentNodes) @@ -49,7 +51,15 @@ const updateListValue = ( expandSelectedItems(flattedOptions) } - updateDOM(flattedOptions, srcElement, iconElements, previousSingleSelectedValue, rtl) + updateDOM( + flattedOptions, + srcElement, + iconElements, + previousSingleSelectedValue, + rtl, + defaultPadding, + zeroLevelItemPadding + ) } const updateDOM = ( @@ -57,7 +67,9 @@ const updateDOM = ( srcElement: HTMLElement | Element, iconElements: IconsType, previousSingleSelectedValue: ValueOptionType[], - rtl: boolean + rtl: boolean, + defaultPadding: number, + zeroLevelItemPadding: number ) => { flattedOptions.forEach((option) => { const input = srcElement.querySelector(`[input-id="${option.id}"]`) as HTMLInputElement @@ -71,7 +83,7 @@ const updateDOM = ( updateClosedClass(option, listItem, iconElements) updateHiddenClass(option, listItem) - updateLeftPaddingItems(option, listItem, flattedOptions, rtl) + updateLeftPaddingItems(option, listItem, flattedOptions, rtl, defaultPadding, zeroLevelItemPadding) updateCheckboxClass(option, input, iconElements) }) @@ -151,16 +163,16 @@ const updateLeftPaddingItems = ( option: FlattedOptionType, listItem: HTMLElement, flattedOptions: FlattedOptionType[], - rtl: boolean + rtl: boolean, + defaultPadding: number, + zeroLevelItemPadding: number ) => { const isZeroLevel = option.level === 0 - const defaultPadding = 20 - const zeroLevelItemPadding = 5 if (isZeroLevel) { const isGroupsExistOnLevel = flattedOptions.some((item) => item.isGroup && item.level === option.level) - const itemPadding = !option.isGroup && isGroupsExistOnLevel ? `${defaultPadding}px` : `${zeroLevelItemPadding}px` - const padding = option.isGroup ? '0' : itemPadding + const itemPadding = !option.isGroup && isGroupsExistOnLevel ? defaultPadding : zeroLevelItemPadding + const padding = (option.isGroup ? zeroLevelItemPadding : itemPadding) + 'px' if (rtl) { listItem.style.paddingRight = padding @@ -169,8 +181,8 @@ const updateLeftPaddingItems = ( } } else { const padding = option.isGroup - ? `${option.level * defaultPadding}px` - : `${option.level * defaultPadding + defaultPadding}px` + ? `${zeroLevelItemPadding + option.level * defaultPadding}px` + : `${zeroLevelItemPadding + option.level * defaultPadding + defaultPadding}px` if (rtl) { listItem.style.paddingRight = padding @@ -240,6 +252,8 @@ export class TreeselectList implements ITreeselectList { expandSelected: boolean isIndependentNodes: boolean rtl: boolean + defaultPadding: number + zeroLevelItemPadding: number iconElements: IconsType // InnerState @@ -273,6 +287,8 @@ export class TreeselectList implements ITreeselectList { expandSelected, isIndependentNodes, rtl, + defaultPadding, + zeroLevelItemPadding, inputCallback, arrowClickCallback, mouseupCallback @@ -288,6 +304,8 @@ export class TreeselectList implements ITreeselectList { this.expandSelected = expandSelected ?? false this.isIndependentNodes = isIndependentNodes ?? false this.rtl = rtl ?? false + this.defaultPadding = defaultPadding ?? 20 + this.zeroLevelItemPadding = zeroLevelItemPadding ?? 5 this.iconElements = iconElements this.searchText = '' @@ -317,7 +335,9 @@ export class TreeselectList implements ITreeselectList { this.expandSelected, this.#isFirstValueUpdate, this.isIndependentNodes, - this.rtl + this.rtl, + this.defaultPadding, + this.zeroLevelItemPadding ) this.#isFirstValueUpdate = false this.#updateSelectedNodes() @@ -352,7 +372,15 @@ export class TreeselectList implements ITreeselectList { updateVisibleBySearchFlattedOptions(this.flattedOptions, searchText) } - updateDOM(this.flattedOptions, this.srcElement, this.iconElements, this.#previousSingleSelectedValue, this.rtl) + updateDOM( + this.flattedOptions, + this.srcElement, + this.iconElements, + this.#previousSingleSelectedValue, + this.rtl, + this.defaultPadding, + this.zeroLevelItemPadding + ) this.focusFirstListElement() } @@ -738,7 +766,15 @@ export class TreeselectList implements ITreeselectList { target.checked = resultChecked } - updateDOM(this.flattedOptions, this.srcElement, this.iconElements, this.#previousSingleSelectedValue, this.rtl) + updateDOM( + this.flattedOptions, + this.srcElement, + this.iconElements, + this.#previousSingleSelectedValue, + this.rtl, + this.defaultPadding, + this.zeroLevelItemPadding + ) this.#emitInput() } @@ -750,7 +786,15 @@ export class TreeselectList implements ITreeselectList { if (flattedOption) { flattedOption.isClosed = !flattedOption.isClosed hideShowChildrenOptions(this.flattedOptions, flattedOption) - updateDOM(this.flattedOptions, this.srcElement, this.iconElements, this.#previousSingleSelectedValue, this.rtl) + updateDOM( + this.flattedOptions, + this.srcElement, + this.iconElements, + this.#previousSingleSelectedValue, + this.rtl, + this.defaultPadding, + this.zeroLevelItemPadding + ) this.arrowClickCallback(flattedOption.id, flattedOption.isClosed) } diff --git a/src/list/listTypes.ts b/src/list/listTypes.ts index d893304..875e145 100644 --- a/src/list/listTypes.ts +++ b/src/list/listTypes.ts @@ -12,6 +12,8 @@ export interface ITreeselectListParams { expandSelected: boolean isIndependentNodes: boolean rtl: boolean + defaultPadding: number + zeroLevelItemPadding: number iconElements: IconsType inputCallback: (value: SelectedNodesType) => void arrowClickCallback: (groupId: ValueOptionType, isClosed: boolean) => void diff --git a/src/treeselectTypes.ts b/src/treeselectTypes.ts index ee6d44e..d58537e 100644 --- a/src/treeselectTypes.ts +++ b/src/treeselectTypes.ts @@ -42,6 +42,8 @@ export interface ITreeselect { saveScrollPosition: boolean isIndependentNodes: boolean rtl: boolean + defaultPadding: number + zeroLevelItemPadding: number iconElements: IconsType ungroupedValue: ValueOptionType[] groupedValue: ValueOptionType[] @@ -89,6 +91,8 @@ export interface ITreeselectParams { saveScrollPosition?: boolean isIndependentNodes?: boolean rtl?: boolean + defaultPadding?: number + zeroLevelItemPadding?: number iconElements?: Partial inputCallback?: (value: ValueType) => void openCallback?: (value: ValueType) => void diff --git a/src/treeselectjs.ts b/src/treeselectjs.ts index 337d17a..c4c00e3 100644 --- a/src/treeselectjs.ts +++ b/src/treeselectjs.ts @@ -104,6 +104,8 @@ export default class Treeselect implements ITreeselect { saveScrollPosition: boolean isIndependentNodes: boolean rtl: boolean + defaultPadding: number + zeroLevelItemPadding: number iconElements: IconsType inputCallback: ((value: ValueType) => void) | undefined openCallback: ((value: ValueType) => void) | undefined @@ -167,6 +169,8 @@ export default class Treeselect implements ITreeselect { saveScrollPosition, isIndependentNodes, rtl, + defaultPadding, + zeroLevelItemPadding, iconElements, inputCallback, openCallback, @@ -210,6 +214,8 @@ export default class Treeselect implements ITreeselect { this.saveScrollPosition = saveScrollPosition ?? true this.isIndependentNodes = isIndependentNodes ?? false this.rtl = rtl ?? false + this.defaultPadding = defaultPadding ?? 20 + this.zeroLevelItemPadding = zeroLevelItemPadding ?? 5 this.iconElements = getDefaultIcons(iconElements) this.inputCallback = inputCallback this.openCallback = openCallback @@ -348,6 +354,8 @@ export default class Treeselect implements ITreeselect { expandSelected: this.expandSelected, isIndependentNodes: this.isIndependentNodes, rtl: this.rtl, + defaultPadding: this.defaultPadding, + zeroLevelItemPadding: this.zeroLevelItemPadding, iconElements: this.iconElements, inputCallback: (value) => this.#listInputListener(value), arrowClickCallback: (groupId, isClosed) => this.#listArrowClickListener(groupId, isClosed),