diff --git a/CHANGELOG.md b/CHANGELOG.md index d29275ba..7445871c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,24 @@ +## Version 1.0.0-beta.10 (2021-05-07) + +### Features and improvements + +* [[`17c3089b`](https://github.com/ckotzbauer/simple-tree-component/commit/17c3089b)] - **feat**: parent-nodes have a bold font + +### Bug fixes + +* [[`0dbb0faa`](https://github.com/ckotzbauer/simple-tree-component/commit/0dbb0faa)] - **fix**: only block scroll-event when it does not appear on a flyout child +* [[`3d34a020`](https://github.com/ckotzbauer/simple-tree-component/commit/3d34a020)] - **fix**: use passive mode for scroll-blocking + +### Dependency updates + +* [[`0e9a4523`](https://github.com/ckotzbauer/simple-tree-component/commit/0e9a4523)] - **deps**: update dependency sass to v1.32.12 (#609) +* [[`d6157a95`](https://github.com/ckotzbauer/simple-tree-component/commit/d6157a95)] - **deps**: update dependency @types/jest to v26.0.23 (#605) +* [[`b6d20b36`](https://github.com/ckotzbauer/simple-tree-component/commit/b6d20b36)] - **deps**: update dependency @types/node to v13.13.51 (#606) +* [[`bde26d73`](https://github.com/ckotzbauer/simple-tree-component/commit/bde26d73)] - **deps**: update dependency postcss to v8.2.13 (#607) +* [[`84c3bf68`](https://github.com/ckotzbauer/simple-tree-component/commit/84c3bf68)] - **deps**: update dependency rollup to v2.46.0 (#608) +* [[`b2d97eca`](https://github.com/ckotzbauer/simple-tree-component/commit/b2d97eca)] - **deps**: update dependency terser to v5.7.0 (#610) + + ## Version 1.0.0-beta.9 (2021-04-26) ### Bug fixes diff --git a/dist/simple-tree-component.js b/dist/simple-tree-component.js index d4c04ed8..316c9e9c 100644 --- a/dist/simple-tree-component.js +++ b/dist/simple-tree-component.js @@ -1,4 +1,4 @@ -/* simple-tree-component v1.0.0-beta.9, @license MIT */ +/* simple-tree-component v1.0.0-beta.10, @license MIT */ (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof define === 'function' && define.amd ? define(factory) : diff --git a/dist/simple-tree-component.min.js b/dist/simple-tree-component.min.js index 92a6bffc..62bba453 100644 --- a/dist/simple-tree-component.min.js +++ b/dist/simple-tree-component.min.js @@ -1,2 +1,2 @@ -/* simple-tree-component v1.0.0-beta.9,, @license MIT */ +/* simple-tree-component v1.0.0-beta.10,, @license MIT */ !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self)["simple-tree-component"]=t()}(this,(function(){"use strict";const e={nodes:[],searchBar:!0,searchBarFocus:!1,highlightSearchResults:!1,watermark:"Please select a value...",noNodesMessage:"No items found.",css:{dropdownHolder:""},templateSelectedText:e=>e.label,checkboxes:{active:!1,recursive:!1},clearButton:!1,scrollContainer:null};var t={SimpleTree:"simple-tree",SimpleTreeReadOnly:"simple-tree-readonly",SimpleTreeViewOnly:"simple-tree-view-only",SimpleTreeDropdownHolder:"simple-tree-dropdown-holder",SimpleTreeSingleSelectBox:"simple-tree-single-selectbox",SimpleTreeMultiSelectBox:"simple-tree-multi-selectbox",SimpleTreeInputContainer:"simple-tree-input-container",SimpleTreePillboxHolder:"simple-tree-pillbox-holder",SimpleTreePillboxCross:"simple-tree-pillbox-cross",SimpleTreeCross:"simple-tree-cross",SimpleTreeClearable:"simple-tree-clearable",SimpleTreeSelectedLabel:"simple-tree-selected-label",SimpleTreeSelectedLabelWatermark:"simple-tree-selected-label-watermark",SimpleTreeChevronUp:"simple-tree-chevron-up",SimpleTreeChevronDown:"simple-tree-chevron-down",SimpleTreeEmphasize:"simple-tree-emphasize-icon",SimpleTreeEmphasized:"simple-tree-emphasized",SimpleTreeNodeContainer:"simple-tree-node-container",SimpleTreeNodeContainerRoot:"simple-tree-node-container-root",SimpleTreeNodeText:"simple-tree-node-text",SimpleTreeNodeSelected:"simple-tree-node-selected",SimpleTreeNodeSelectable:"simple-tree-node-selectable",SimpleTreeNodeHovered:"simple-tree-node-hovered",SimpleTreeNodeArrow:"simple-tree-node-arrow",SimpleTreeNodeWrapper:"simple-tree-node-wrapper",SimpleTreeParentNode:"simple-tree-parent-node",SimpleTreeNodeChevronContainer:"simple-tree-node-chevron-container",SimpleTreeNodeChevronClickable:"simple-tree-node-chevron-clickable",SimpleTreeNodeChevronDown:"simple-tree-node-chevron-down",SimpleTreeNodeChevronRight:"simple-tree-node-chevron-right",SimpleTreeNodeCheckbox:"simple-tree-node-checkbox",SimpleTreeNodeCheckboxDisabled:"simple-tree-node-checkbox-disabled",SimpleTreeNodeCheckboxSelected:"simple-tree-node-checkbox-selected"},s={SelectionChanged:"selectionChanged",NodeSelected:"nodeSelected",EscapePressed:"escapePressed",HoverChanged:"hoverChanged",FilterChanged:"filterChanged"};class i{constructor(e,t){this.eventManager=e,this.dataService=t,this.hoveredNodeValue=null,this.boundKeyUp=this.handleKeyUp.bind(this)}initialize(){window.addEventListener("keyup",this.boundKeyUp)}destroy(){window.removeEventListener("keyup",this.boundKeyUp)}setHoveredNodeValue(e){this.hoveredNodeValue=e}handleKeyUp(e){if("Escape"===e.code)return void this.eventManager.publish(s.EscapePressed);const i=this.dataService.getFlattedClickableNodeValues(),l=null===this.hoveredNodeValue?-1:i.indexOf(this.hoveredNodeValue);let o=l;if("ArrowUp"===e.code)o=l>0?l-1:i.length-1;else if("ArrowDown"===e.code)o=-1!==l&&ln.clientHeight&&n.scrollTo({top:l.offsetTop-n.offsetHeight})}e.preventDefault(),e.stopPropagation()}}function l(e,t,...s){const i=document.createElement(t);return i.classList.add(...s.filter((e=>e))),e.appendChild(i),i}function o(e,...t){return l(e,"div",...t)}function n(){const e=t.SimpleTreeDropdownHolder;let s=document.body.querySelector(`.${e}`);return s||(s=o(document.body,e),s.style.display="none"),s}function r(e){return e.replace(/&/g,"&").replace(//g,">").replace(/"/g,""").replace(/'/g,"'")}class d{constructor(e,t,l,o,n){this.element=e,this.config=t,this.dataService=l,this.eventManager=o,this.readOnly=n,this.highlightedNode=null,this.hoveredNode=null,this.searchTextInput=null,this.keyEventHandler=new i(this.eventManager,this.dataService),this.eventManager.subscribe(s.HoverChanged,(e=>this.hoverNode(e)))}destroy(){this.deactivateKeyListener()}activateKeyListener(){this.keyEventHandler.initialize()}deactivateKeyListener(){this.keyEventHandler.destroy()}setNodeUiState(e,s,i){var l,o,n;return null===(l=this.element.querySelector(`.${t.SimpleTreeNodeWrapper}.${i}`))||void 0===l||l.classList.remove(i),null!==e&&s!==e.value?(null===(n=null===(o=document.getElementById(e.uid))||void 0===o?void 0:o.querySelector(`.${t.SimpleTreeNodeWrapper}`))||void 0===n||n.classList.add(i),e.value):null}highlightNode(e){this.highlightedNode=this.setNodeUiState(e,this.highlightedNode,t.SimpleTreeNodeSelected)}hoverNode(e){this.hoveredNode=this.setNodeUiState(e,this.hoveredNode,t.SimpleTreeNodeHovered),this.keyEventHandler.setHoveredNodeValue(this.hoveredNode)}renderContent(){this.element.innerHTML="",this.createBasicHtml(),this.dataService.filter(""),this.renderTree()}createBasicHtml(){if(this.config.searchBar){const e=document.createElement("div");e.classList.add(t.SimpleTreeInputContainer),this.searchTextInput=document.createElement("input"),this.searchTextInput.type="text",this.config.searchBarFocus&&setTimeout((()=>{var e;return null===(e=this.searchTextInput)||void 0===e?void 0:e.focus()}),0),this.searchTextInput.addEventListener("input",(e=>{this.dataService.filter(e.target.value),this.renderTree(),this.eventManager.publish(s.FilterChanged)})),e.appendChild(this.searchTextInput),this.element.appendChild(e)}const e=document.createElement("div");e.classList.add(t.SimpleTreeNodeContainer),this.element.appendChild(e)}getNodeContainer(){const e=this.element.querySelector(`div.${t.SimpleTreeNodeContainer}`);return e||console.error("node container not found!"),e}renderTree(){const e=this.getNodeContainer();e&&(e.innerHTML="",e.appendChild(this.renderUnorderedList(this.dataService.displayedNodes)))}renderUnorderedList(e){var s,i;const l=document.createElement("ul");l.classList.add(t.SimpleTreeNodeContainerRoot);let o=null;if((null===(s=this.searchTextInput)||void 0===s?void 0:s.value)&&this.config.highlightSearchResults&&(o=new RegExp(`(${null===(i=this.searchTextInput)||void 0===i?void 0:i.value})`,"ig")),e.forEach((e=>{var s;const i=(null===(s=e.children)||void 0===s?void 0:s.length)>0,n=document.createElement("li");n.id=e.uid;const r=document.createElement("div");r.classList.add(t.SimpleTreeNodeWrapper),r.addEventListener("mouseover",(()=>this.hoverNode(e))),r.addEventListener("mouseout",(()=>this.hoverNode(null))),i&&r.classList.add(t.SimpleTreeParentNode);const d=document.createElement("div");if(d.classList.add(t.SimpleTreeNodeText),this.addChevronDiv(r,e,i),this.config.checkboxes.active){const s=document.createElement("div");s.classList.add(t.SimpleTreeNodeCheckbox),this.readOnly||!this.config.checkboxes.recursive&&!e.selectable?s.classList.add(t.SimpleTreeNodeCheckboxDisabled):s.addEventListener("click",(()=>this.toggleCheckboxSelected(e))),e.selected&&s.classList.add(t.SimpleTreeNodeCheckboxSelected),r.appendChild(s)}else e.selected&&r.classList.add(t.SimpleTreeNodeSelected);d.innerHTML=this.formatNodeLabel(e.label,o),this.config.checkboxes.active||!e.selectable||this.readOnly||(r.addEventListener("click",(()=>this.toggleNodeSelected(e))),r.classList.add(t.SimpleTreeNodeSelectable)),r.appendChild(d),n.appendChild(r),l.appendChild(n),!e.collapsed&&i&&n.appendChild(this.renderUnorderedList(e.children))})),0===e.length){const e=document.createElement("li"),s=document.createElement("div");s.classList.add(t.SimpleTreeNodeWrapper);const i=document.createElement("div");i.classList.add(t.SimpleTreeNodeText),i.textContent=this.config.noNodesMessage,s.appendChild(i),e.appendChild(s),l.appendChild(e)}return l}toggleNodeSelected(e){const t=this.dataService.toggleNodeSelected(e.value);this.eventManager.publish(s.NodeSelected,t)}toggleCheckboxSelected(e){const t=this.dataService.toggleCheckboxSelected(e.value);this.eventManager.publish(s.NodeSelected,t)}addChevronDiv(e,s,i){const l=document.createElement("div");if(l.classList.add(t.SimpleTreeNodeChevronContainer),i){const e=document.createElement("div");s.collapsed?e.classList.add(t.SimpleTreeNodeChevronRight):e.classList.add(t.SimpleTreeNodeChevronDown),l.appendChild(e),l.addEventListener("click",(e=>{e.stopPropagation();const t=!s.collapsed;s.collapsed=t,this.collapseNode(s,t),this.renderTree()})),l.classList.add(t.SimpleTreeNodeChevronClickable)}e.appendChild(l)}collapseNode(e,t){e.children.forEach((e=>{e.hidden=t,e.children.forEach((e=>this.collapseNode(e,t)))}))}setReadOnly(e){this.readOnly=e,this.searchTextInput&&(this.searchTextInput.disabled=e)}formatNodeLabel(e,t){return t?r(e).replace(t,(e=>`${e}`)):r(e)}}class c{constructor(){this.eventLookup={}}publish(e,t){let s,i;if(!e)throw new Error("Event was invalid.");if(s=this.eventLookup[e],s)for(s=s.slice(),i=s.length;i--;)try{s[i](t,e)}catch(e){console.error(e)}}subscribe(e,t){const s=t;let i=[];if(!e)throw new Error("Event channel/type was invalid.");return i=this.eventLookup[e]||(this.eventLookup[e]=[]),i.push(s),{dispose(){const e=i.indexOf(s);-1!==e&&i.splice(e,1)}}}subscribeOnce(e,t){const s=this.subscribe(e,((e,i)=>(s.dispose(),t(e,i))));return s}}const h={label:"",value:"",selected:!1,selectable:!0,children:[],collapsed:!1,hidden:!1,uid:""};function a(e,t){let s=!1;for(const i of e){if(i.value===t){s=!0;break}if(i.children&&i.children.length>0){if(a(i.children,t)){s=!0;break}}}return s}class p{constructor(e=[],t=!1,s=!1){this.displayedNodes=e,this.checkboxesActive=t,this.checkboxesRecursive=s,this.allNodes=[],this.treeInstanceId=Math.floor(1e3+9e3*Math.random()),this.displayedNodes=this.normalizeNodes(e),this.allNodes=this.displayedNodes}normalizeNodes(e){return e.map((e=>{const t=this.copyNode(e);return t.uid=this.generateUid(e.value),t.children=this.normalizeNodes(t.children||[]),t}))}copyNode(e){return Object.assign(Object.assign({},h),e)}clear(){this.allNodes=[],this.displayedNodes=[]}getAllNodes(){return this.allNodes}getNode(e){const t=this.getNodeInternal(this.allNodes,e);return t?this.copyNode(t):null}getNodeInternal(e,t){for(const s of e){if(s.value===t)return s;if(s.children&&s.children.length>0){const e=this.getNodeInternal(s.children,t);if(e)return e}}return null}addNode(e,t=null){if(!(s=e)||!s.value||a(this.allNodes,e.value))throw new Error("node value is invalid or node with value already exists!");var s;if(t&&this.isTreeNode(t))t.children.push(e);else if("string"==typeof t){const s=this.getNodeInternal(this.allNodes,t);this.isTreeNode(s)&&s.children.push(e)}else this.allNodes.push(e)}moveNode(e,t){var s;if(!e)return;const i=this.isTreeNode(e)?e.value:e,l=this.allNodes.some((e=>e.value===i))?this.allNodes:(null===(s=this.getParentForNode(this.allNodes,i))||void 0===s?void 0:s.children)||this.allNodes,o=l.findIndex((e=>e.value===i));if("up"===t&&o>0){const e=l[o];l[o]=l[o-1],l[o-1]=e}else if("down"===t&&ot.value===e));if(t)this.allNodes.splice(this.allNodes.indexOf(t),1);else{const t=this.getParentForNode(this.allNodes,e);if(t){const s=t.children.find((t=>t.value===e));t.children.splice(t.children.indexOf(s),1)}}}updateNodeLabel(e,t){const s=this.getNodeInternal(this.allNodes,e);s&&(s.label=t)}getParentForNode(e,t){for(const s of e){if(s.children&&s.children.some((e=>e.value===t)))return s;let e=null;if(s.children&&(e=this.getParentForNode(s.children,t)),e)return e}return null}getFlattedClickableNodeValues(){return this.flatten(this.displayedNodes).filter((e=>e.selectable&&!e.hidden)).map((e=>e.value))}flatten(e){return e.reduce(((e,t)=>t.children.length>0?(e.push(t),e.concat(this.flatten(t.children))):e.concat(t)),[])}filter(e){this.displayedNodes=e?this.filterNodes(this.allNodes,e.toLowerCase()):this.normalizeNodes(this.allNodes)}filterNodes(e,t){const s=[];return e.forEach((e=>{const i=this.filterNodes(e.children,t);if(e.label.toLowerCase().includes(t)||i.length>0){const t=this.copyNode(e);t.children=i,s.push(t)}})),s}setSelected(...e){const t=e.map((e=>e.value));this.setSelectedNodes(this.allNodes,t),this.checkboxesActive&&this.checkboxesRecursive&&this.cleanRecursiveSelection(this.allNodes)}updateCheckboxState(e){var s;if(!this.checkboxesActive)return;const i=null===(s=document.getElementById(e.uid))||void 0===s?void 0:s.querySelector(`.${t.SimpleTreeNodeCheckbox}`);i?i&&(e.selected&&!i.classList.contains(t.SimpleTreeNodeCheckboxSelected)?i.classList.add(t.SimpleTreeNodeCheckboxSelected):!e.selected&&i.classList.contains(t.SimpleTreeNodeCheckboxSelected)&&i.classList.remove(t.SimpleTreeNodeCheckboxSelected)):console.error("checkbox div not found for node!",e)}setSelectedNodes(e,t){e.forEach((e=>{(this.checkboxesRecursive||e.selectable)&&(e.selected=t.includes(e.value),this.updateCheckboxState(e)),e.children&&e.children.length>0&&this.setSelectedNodes(e.children,t)}))}cleanRecursiveSelection(e){let t=!0;return e.forEach((e=>{e.children&&e.children.length>0&&(e.selected?this.checkRecursiveChilds(e.children):(e.selected=this.cleanRecursiveSelection(e.children),this.updateCheckboxState(e))),t=t&&e.selected})),t}checkRecursiveChilds(e){e.forEach((e=>{e.selected=!0,this.updateCheckboxState(e),e.children&&e.children.length>0&&this.checkRecursiveChilds(e.children)}))}getSelected(){return this.getSelectedInternal(this.allNodes).map(this.copyNode)}getSelectedInternal(e,t=[]){return e.forEach((e=>{e.selected&&t.push(e),e.children&&e.children.length>0&&(t=this.getSelectedInternal(e.children,t))})),t}toggleNodeSelected(e){const t=this.getNodeInternal(this.allNodes,e);return t?(t.selected=!t.selected,this.copyNode(t)):(console.error(`node '${e}' to toggle not found!`),null)}toggleCheckboxSelected(e){let t=this.getNodeInternal(this.allNodes,e);if(!t)return console.error(`checkbox node '${e}' to toggle not found!`),null;const s=!t.selected;return t=this.toggleCheckboxNode(t,s),this.checkboxesRecursive&&this.toggleCheckboxParent(t),this.copyNode(t)}toggleCheckboxNode(e,s,i=!0){var l,o;const n=null===(l=document.getElementById(e.uid))||void 0===l?void 0:l.querySelector(`.${t.SimpleTreeNodeCheckbox}`);return n?(e.selected=s,e.selected&&!n.classList.contains(t.SimpleTreeNodeCheckboxSelected)?n.classList.add(t.SimpleTreeNodeCheckboxSelected):!e.selected&&n.classList.contains(t.SimpleTreeNodeCheckboxSelected)&&n.classList.remove(t.SimpleTreeNodeCheckboxSelected),this.checkboxesRecursive&&i&&(null===(o=e.children)||void 0===o?void 0:o.length)>0&&e.children.forEach((e=>this.toggleCheckboxNode(e,s))),e):(console.error("checkbox div not found!"),e)}toggleCheckboxParent(e){var t;const s=this.getParentForNode(this.allNodes,e.value);if(s&&(null===(t=s.children)||void 0===t?void 0:t.length)>0){const e=s.children.every((e=>!0===e.selected));this.toggleCheckboxNode(s,e,!1),this.toggleCheckboxParent(s)}}generateUid(e){let t=0;for(let s=0;sthis.element.removeChild(e))),this.dataService.clear()}showEmphasizeIcon(e){throw new Error("Feature not supported in this mode!")}hideEmphasizeIcon(){throw new Error("Feature not supported in this mode!")}moveNode(e,t){throw new Error("Feature not supported in this mode!")}setSelected(e){this.selected=e}getSelected(){return this.selected}getNode(e){return this.dataService.getNode(e)}addNode(e,t=null){this.dataService.addNode(e,t)}deleteNode(e){this.dataService.deleteNode(e.value)}updateNodeLabel(e,t){this.dataService.updateNodeLabel(e.value,t)}setReadOnly(e){this.readOnly!==e&&(this.readOnly=e,this.tree.setReadOnly(e),this.rootContainer.classList.toggle(t.SimpleTreeReadOnly,e),this.tree.renderContent())}subscribe(e,t){return this.eventManager.subscribe(e,t)}subscribeOnce(e,t){return this.eventManager.subscribeOnce(e,t)}}function m(e,t,s,i=300){const{top:l,left:o}=t.getBoundingClientRect(),n=window.scrollX,r=function(e,t,s,i=0,l=300){let o=e.top+e.height+i,n=s>l?l:s;return o-window.scrollY+n+10>t&&(o=e.top-n-i),o<0&&(o=e.top+e.height+i,n=t-o-10),{top:o,left:e.left-i,width:e.width-i,height:n}}({top:l+window.scrollY,height:t.offsetHeight,left:o+n,width:t.offsetWidth},window.innerHeight,s,parseInt(getComputedStyle(e).borderLeftWidth.replace("px",""),10),i);e.style.top=`${r.top}px`,e.style.left=`${r.left}px`,e.style.width=`${r.width}px`,e.style.height=`${r.height}px`}class v extends u{constructor(e,t){super(e,t),this.dropdownOpen=!1,this.eventManager.subscribe(s.EscapePressed,(()=>this.closeDropdown())),this.boundClick=this.onClick.bind(this)}toggleDropdown(){this.dropdownOpen?this.closeDropdown():this.openDropdown()}onClick(e){const t=e.target;this.dropdownHolder.contains(t)||this.selectContainer.contains(t)||this.closeDropdown()}openDropdown(){this.readOnly||(this.tree.renderContent(),this.tree.activateKeyListener(),this.filterChangedSubscription=this.eventManager.subscribe(s.FilterChanged,(()=>this.calculateDropdownPosition())),this.options.css.dropdownHolder&&this.dropdownHolder.classList.add(this.options.css.dropdownHolder),this.dropdownHolder.style.top="-9999px",this.dropdownHolder.style.left="-9999px",this.dropdownHolder.style.display="inherit",this.calculateDropdownPosition(),this.arrowElement.classList.remove(t.SimpleTreeChevronDown),this.arrowElement.classList.add(t.SimpleTreeChevronUp),this.dropdownOpen=!0,window.addEventListener("mouseup",this.boundClick),this.options.scrollContainer&&(this.preventScrollListener=e=>{const t=this.dropdownHolder.querySelector(".simple-tree-node-container-root");(null==t?void 0:t.contains(e.target))||e.preventDefault()},this.options.scrollContainer.addEventListener("wheel",this.preventScrollListener,{passive:!1})))}closeDropdown(){this.dropdownOpen&&(this.filterChangedSubscription&&(this.filterChangedSubscription.dispose(),this.filterChangedSubscription=null),this.options.css.dropdownHolder&&this.dropdownHolder.classList.remove(this.options.css.dropdownHolder),this.dropdownHolder.style.display="none",this.dropdownHolder.style.top="",this.dropdownHolder.style.left="",this.dropdownHolder.style.width="",this.dropdownHolder.style.height="",this.arrowElement.classList.remove(t.SimpleTreeChevronUp),this.arrowElement.classList.add(t.SimpleTreeChevronDown),this.dropdownOpen=!1,window.removeEventListener("mouseup",this.boundClick),this.tree.deactivateKeyListener(),this.options.scrollContainer&&this.preventScrollListener&&(this.options.scrollContainer.removeEventListener("wheel",this.preventScrollListener),this.preventScrollListener=null))}calculateDropdownPosition(){let e=0;this.options.searchBar?(e+=this.dropdownHolder.children[0].clientHeight,e+=this.dropdownHolder.children[1].scrollHeight):e+=this.dropdownHolder.children[0].scrollHeight,m(this.dropdownHolder,this.selectContainer.parentElement,e)}}class S extends v{constructor(e,i){super(e,i),this.rootContainer=o(e,t.SimpleTree),this.selected=this.dataService.getSelected()[0]||null,this.dropdownHolder=n(),this.tree=new d(this.dropdownHolder,i,this.dataService,this.eventManager,this.readOnly),this.subscribe(s.NodeSelected,(e=>this.nodeSelected(e))),this.renderSelectField(this.rootContainer)}setSelected(e){e?this.dataService.setSelected(e):this.dataService.setSelected(),super.setSelected(this.dataService.getSelected()[0]||null),this.updateUiOnSelection(),this.tree.highlightNode(e)}setReadOnly(e){super.setReadOnly(e),e&&this.dropdownOpen&&this.closeDropdown()}showEmphasizeIcon(e){this.emphasisCssClass=e,this.selected&&this.emphasisCssClass&&!this.emphasizeElement&&(this.selectContainer.classList.add(t.SimpleTreeEmphasized),this.emphasizeElement=document.createElement("i"),this.emphasizeElement.classList.add(t.SimpleTreeEmphasize,e),this.selectContainer.appendChild(this.emphasizeElement))}hideEmphasizeIcon(){this.emphasisCssClass=null,this.emphasizeElement&&(this.selectContainer.classList.remove(t.SimpleTreeEmphasized),this.selectContainer.removeChild(this.emphasizeElement),this.emphasizeElement=null)}nodeSelected(e){this.dataService.setSelected(e),this.selected=this.dataService.getSelected()[0]||null,this.tree.highlightNode(e),this.updateUiOnSelection(),this.closeDropdown(),this.eventManager.publish(s.SelectionChanged,this.selected)}renderSelectField(e){this.selectContainer=o(e,t.SimpleTreeSingleSelectBox),this.selectContainer.onclick=()=>!this.readOnly&&this.toggleDropdown(),this.selectedLabel=document.createElement("span"),this.selectedLabel.classList.add(t.SimpleTreeSelectedLabel),this.selectContainer.appendChild(this.selectedLabel),this.updateUiOnSelection(),this.arrowElement=document.createElement("i"),this.arrowElement.classList.add(t.SimpleTreeChevronDown),this.selectContainer.appendChild(this.arrowElement)}updateUiOnSelection(){if(this.selectedLabel.innerText=this.selected?this.options.templateSelectedText(this.selected):this.options.watermark,this.selectedLabel.classList.toggle(t.SimpleTreeSelectedLabelWatermark,!this.selected),this.emphasisCssClass&&this.selected)this.showEmphasizeIcon(this.emphasisCssClass);else if(!this.selected){const e=this.emphasisCssClass;this.hideEmphasizeIcon(),this.emphasisCssClass=e}this.options.clearButton&&this.selected&&!this.clearElement?(this.clearElement=document.createElement("i"),this.clearElement.classList.add(t.SimpleTreeCross),this.clearElement.onclick=e=>{this.readOnly||(this.setSelected(null),this.eventManager.publish(s.SelectionChanged,null)),e.stopPropagation()},this.selectContainer.appendChild(this.clearElement),this.selectContainer.classList.add(t.SimpleTreeClearable)):!this.selected&&this.clearElement&&(this.clearElement.remove(),this.clearElement=null)}}class g extends v{constructor(e,i){super(e,i),this.rootContainer=o(e,t.SimpleTree),this.selected=this.dataService.getSelected(),this.dropdownHolder=n(),this.tree=new d(this.dropdownHolder,i,this.dataService,this.eventManager,this.readOnly),this.subscribe(s.NodeSelected,(e=>this.nodeSelected(e))),this.renderSelectField(this.rootContainer)}setSelected(e){this.dataService.setSelected(...e||[]),super.setSelected(this.dataService.getSelected()),this.renderPillboxes()}setReadOnly(e){super.setReadOnly(e),e&&this.dropdownOpen&&this.closeDropdown()}nodeSelected(e){const t=this.selected.findIndex((t=>t.value===e.value));-1!==t?(e.selected=!1,this.selected.splice(t,1)):(e.selected=!0,this.selected.push(e)),this.dataService.setSelected(...this.selected),this.selected=this.dataService.getSelected(),this.renderPillboxes(),this.closeDropdown(),this.eventManager.publish(s.SelectionChanged,this.selected)}renderSelectField(e){this.selectContainer=o(e,t.SimpleTreeMultiSelectBox),this.selectContainer.onclick=()=>!this.readOnly&&this.toggleDropdown(),this.pillboxContainer=function(e,...t){return l(e,"ul",...t)}(this.selectContainer,t.SimpleTreePillboxHolder),this.renderPillboxes(),this.arrowElement=document.createElement("i"),this.arrowElement.classList.add(t.SimpleTreeChevronDown),this.selectContainer.appendChild(this.arrowElement)}renderPillboxes(){this.pillboxContainer.innerHTML="",this.selected.forEach((e=>{const s=function(e,...t){return l(e,"li",...t)}(this.pillboxContainer,"");s.innerText=this.options.templateSelectedText(e);o(s,t.SimpleTreePillboxCross).addEventListener("click",(t=>{this.readOnly||this.nodeSelected(e),t.stopPropagation()}))})),this.options.clearButton&&this.selected.length>0&&!this.clearElement?(this.clearElement=document.createElement("i"),this.clearElement.classList.add(t.SimpleTreeCross),this.clearElement.onclick=e=>{this.readOnly||(this.setSelected([]),this.eventManager.publish(s.SelectionChanged,[])),e.stopPropagation()},this.selectContainer.appendChild(this.clearElement),this.selectContainer.classList.add(t.SimpleTreeClearable)):0===this.selected.length&&this.clearElement&&(this.clearElement.remove(),this.clearElement=null)}}class N extends u{constructor(e,i){super(e,i),this.rootContainer=o(e,t.SimpleTree,t.SimpleTreeViewOnly),i.checkboxes.active?this.selected=this.dataService.getSelected():this.selected=this.dataService.getSelected()[0]||null,this.tree=new d(this.rootContainer,i,this.dataService,this.eventManager,this.readOnly),this.subscribe(s.NodeSelected,(e=>this.nodeSelected(e))),this.tree.renderContent(),this.tree.activateKeyListener()}setSelected(e){this.options.checkboxes.active?(this.dataService.setSelected(...e||[]),super.setSelected(this.dataService.getSelected())):(this.dataService.setSelected(e||[]),super.setSelected(this.dataService.getSelected()[0]||[]))}moveNode(e,t){this.dataService.moveNode(e,t),this.tree.renderContent()}nodeSelected(e){var t;this.options.checkboxes.active?this.selected=this.dataService.getSelected():(null==e?void 0:e.value)===(null===(t=this.selected)||void 0===t?void 0:t.value)?(this.dataService.setSelected(),this.selected=null,this.tree.highlightNode(null)):(this.dataService.setSelected(e),this.selected=this.dataService.getSelected()[0]||null,this.tree.highlightNode(e)),this.eventManager.publish(s.SelectionChanged,this.selected)}}function C(t,s,i){const l=Object.assign(Object.assign({},e),i);return"singleSelectDropdown"===s?new S(t,l):"multiSelectDropdown"===s?new g(t,l):new N(t,l)}function b(e,t,s){const i=Array.prototype.slice.call(e).filter((e=>e instanceof HTMLElement)),l=[];for(let e=0;e