@openremote/or-asset-tree 1.8.0-snapshot.20250725074716 → 1.8.0-snapshot.20250725120000

package/lib/index.js

@@ -1,100 +1,1705 @@
-var OrAssetTree_1,FilterElementType,__decorate=this&&this.__decorate||function(e,t,s,i){var r,a=arguments.length,d=a<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,s):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)d=Reflect.decorate(e,t,s,i);else for(var n=e.length-1;n>=0;n--)(r=e[n])&&(d=(a<3?r(d):a>3?r(t,s,d):r(t,s))||d);return a>3&&d&&Object.defineProperty(t,s,d),d},__awaiter=this&&this.__awaiter||function(e,t,s,i){function r(e){return e instanceof s?e:new s(function(t){t(e)})}return new(s||(s=Promise))(function(s,a){function d(e){try{o(i.next(e))}catch(e){a(e)}}function n(e){try{o(i.throw(e))}catch(e){a(e)}}function o(e){e.done?s(e.value):r(e.value).then(d,n)}o((i=i.apply(e,t||[])).next())})};import{html,LitElement}from"lit";import{customElement,property,query,state}from"lit/decorators.js";import"@openremote/or-mwc-components/or-mwc-input";import{InputType}from"@openremote/or-mwc-components/or-mwc-input";import"@openremote/or-icon";import{AssetModelUtil}from"@openremote/model";import"@openremote/or-translate";import{style}from"./style";import manager,{subscribe,Util}from"@openremote/core";import Qs from"qs";import{getAssetDescriptorIconTemplate}from"@openremote/or-icon";import"@openremote/or-mwc-components/or-mwc-menu";import{getContentWithMenuTemplate}from"@openremote/or-mwc-components/or-mwc-menu";import"@openremote/or-mwc-components/or-mwc-list";import{i18next}from"@openremote/or-translate";import"@openremote/or-mwc-components/or-mwc-dialog";import{OrMwcDialog,showDialog,showErrorDialog,showOkCancelDialog}from"@openremote/or-mwc-components/or-mwc-dialog";import"./or-add-asset-dialog";import{showSnackbar}from"@openremote/or-mwc-components/or-mwc-snackbar";import{when}from"lit/directives/when.js";export class OrAssetTreeRequestSelectionEvent extends CustomEvent{constructor(e){super(OrAssetTreeRequestSelectionEvent.NAME,{bubbles:!0,composed:!0,detail:{allow:!0,detail:e}})}}OrAssetTreeRequestSelectionEvent.NAME="or-asset-tree-request-selection";export class OrAssetTreeSelectionEvent extends CustomEvent{constructor(e){super(OrAssetTreeSelectionEvent.NAME,{bubbles:!0,composed:!0,detail:e})}}OrAssetTreeSelectionEvent.NAME="or-asset-tree-selection";export class OrAssetTreeChangeParentEvent extends CustomEvent{constructor(e,t){super(OrAssetTreeChangeParentEvent.NAME,{bubbles:!0,composed:!0,detail:{parentId:e,assetIds:t}})}}OrAssetTreeChangeParentEvent.NAME="or-asset-tree-change-parent";export class OrAssetTreeToggleExpandEvent extends CustomEvent{constructor(e){super(OrAssetTreeToggleExpandEvent.NAME,{bubbles:!0,composed:!0,detail:e})}}OrAssetTreeToggleExpandEvent.NAME="or-asset-tree-expand",function(e){e[e.SEARCH_FILTER=0]="SEARCH_FILTER",e[e.ASSET_TYPE=1]="ASSET_TYPE",e[e.ATTRIBUTE_NAME=2]="ATTRIBUTE_NAME",e[e.ATTRIBUTE_VALUE=3]="ATTRIBUTE_VALUE"}(FilterElementType||(FilterElementType={}));export class OrAssetTreeRequestAddEvent extends CustomEvent{constructor(e){super(OrAssetTreeRequestAddEvent.NAME,{bubbles:!0,composed:!0,detail:{allow:!0,detail:e}})}}OrAssetTreeRequestAddEvent.NAME="or-asset-tree-request-add";export class OrAssetTreeAddEvent extends CustomEvent{constructor(e){super(OrAssetTreeAddEvent.NAME,{bubbles:!0,composed:!0,detail:e})}}OrAssetTreeAddEvent.NAME="or-asset-tree-add";export class OrAssetTreeRequestDeleteEvent extends CustomEvent{constructor(e){super(OrAssetTreeRequestDeleteEvent.NAME,{bubbles:!0,composed:!0,detail:{allow:!0,detail:e}})}}OrAssetTreeRequestDeleteEvent.NAME="or-asset-tree-request-delete";export class OrAssetTreeAssetEvent extends CustomEvent{constructor(e){super(OrAssetTreeAssetEvent.NAME,{bubbles:!0,composed:!0,detail:e})}}OrAssetTreeAssetEvent.NAME="or-asset-tree-asset-event";export class OrAssetTreeFilter{constructor(){this.asset=void 0,this.assetType=[],this.attribute=[],this.attributeValue=[]}}export const getAssetTypes=()=>__awaiter(void 0,void 0,void 0,function*(){let e=yield manager.rest.api.AssetResource.queryAssets({select:{attributes:[]},recursive:!0});if(e&&e.data)return e.data.map(e=>e.type)});let OrAssetTree=OrAssetTree_1=class OrAssetTree extends subscribe(manager)(LitElement){constructor(){super(...arguments),this.readonly=!1,this.disabled=!1,this.disableSubscribe=!1,this.showDeselectBtn=!0,this.showSortBtn=!0,this.showFilter=!0,this.sortBy="name",this.expandAllNodes=!1,this.expandedIds=[],this.checkboxes=!1,this._loading=!1,this._connected=!1,this._selectedNodes=[],this._expandedNodes=[],this._filter=new OrAssetTreeFilter,this._searchInputTimer=void 0,this._filterSettingOpen=!1,this._assetTypes=[],this._uniqueAssetTypes=[],this._dragDropParentId=null,this._expandTimer=void 0,this._latestSelected=void 0,this.assetsChildren={}}static get styles(){return[style]}get selectedNodes(){return this._selectedNodes?[...this._selectedNodes]:[]}set selectedNodes(e){this.selectedIds=e.map(e=>e.asset.id)}connectedCallback(){super.connectedCallback()}disconnectedCallback(){super.disconnectedCallback(),this.requestUpdate()}refresh(){this._nodes=void 0}isAncestorSelected(e){if(!this.selectedIds||!e.parent)return!1;for(;e.parent;)if(e=e.parent,this.selectedIds.includes(e.asset.id))return!0;return!1}mapDescriptors(e,t){let s=e.map(e=>({styleMap:{"--or-icon-fill":e.colour?"#"+e.colour:"unset"},icon:e.icon,text:Util.getAssetTypeLabel(e),value:e.name,data:e})).sort(Util.sortByString(e=>e.text));return t&&s.splice(0,0,t),s}getSelectHeader(){return html`<or-mwc-input style="width:100%;" ?disabled="${this._loading}" type="${InputType.TEXT}" .label="${i18next.t("filter.assetTypeLabel")}" iconTrailing="menu-down" iconColor="rgba(0, 0, 0, 0.87)" icon="selection-ellipse" value="${i18next.t("filter.assetTypeNone")}"></or-mwc-input>`}getSelectedHeader(e){return html`<or-mwc-input style="width:100%;" ?disabled="${this._loading}" type="${InputType.TEXT}" .label="${i18next.t("filter.assetTypeLabel")}" .iconColor="${e.colour}" iconTrailing="menu-down" icon="${e.icon}" value="${Util.getAssetTypeLabel(e)}"></or-mwc-input>`}assetTypeSelect(){if(!this._assetTypeFilter)return this.getSelectHeader();{let e=this._assetTypes.find(e=>e.name===this._assetTypeFilter);return e?this.getSelectedHeader(e):this.getSelectHeader()}}atLeastOneNodeToBeShown(){var e;let t=!1;return null==(e=this._nodes)||e.forEach(e=>{e.hidden||(t=!0)}),t}render(){let e=this._canAdd();return html`
-            <div id="header">
-                <div id="title-container">
-                    <or-translate id="title" value="asset_plural"></or-translate>
-                </div>
-
-                <div id="header-btns">
-                    <or-mwc-input ?hidden="${!this.selectedIds||0===this.selectedIds.length||!this.showDeselectBtn}" type="${InputType.BUTTON}" icon="close" title="${i18next.t("deselect")}" @or-mwc-input-changed="${()=>this._onDeselectClicked()}"></or-mwc-input>
-                    <or-mwc-input ?hidden="${this._isReadonly()||!this.selectedIds||1!==this.selectedIds.length||!e}" type="${InputType.BUTTON}" icon="content-copy" title="${i18next.t("duplicate")}" @or-mwc-input-changed="${()=>this._onCopyClicked()}"></or-mwc-input>
-                    <or-mwc-input ?hidden="${this._isReadonly()||!this.selectedIds||0===this.selectedIds.length||this._gatewayDescendantIsSelected()}" type="${InputType.BUTTON}" icon="delete" title="${i18next.t("delete")}" @or-mwc-input-changed="${()=>this._onDeleteClicked()}"></or-mwc-input>
-                    <or-mwc-input ?hidden="${this._isReadonly()||!e}" type="${InputType.BUTTON}" icon="plus" title="${i18next.t("addAsset")}" @or-mwc-input-changed="${()=>this._onAddClicked()}"></or-mwc-input>
-                    
-                    ${getContentWithMenuTemplate(html`<or-mwc-input type="${InputType.BUTTON}" ?hidden="${!this.showSortBtn}" icon="sort-variant" title="${i18next.t("sort")}" ></or-mwc-input>`,["name","type","createdOn"].map(e=>({value:e,text:i18next.t(e)})),this.sortBy,e=>this._onSortClicked(e))}
-                </div>
-            </div>
-            
-            ${when(this.showFilter,()=>html`
-                <div id="asset-tree-filter">
-                    <or-mwc-input id="filterInput"
-                                  ?disabled="${this._loading}"
-                                  style="width: 100%;"
-                                  type="${InputType.TEXT}"
-                                  placeholder="${i18next.t("filter.filter")}..."
-                                  compact="true"
-                                  outlined="true"
-                                  @input="${e=>{this._onFilterInputEvent(e)}}"
-                                  @or-mwc-input-changed="${e=>{this._onFilterInput(e.detail.value||void 0,!0)}}">
-                    </or-mwc-input>
-                    <or-icon id="filterSettingsIcon" icon="${this._filterSettingOpen?"window-close":"tune"}" title="${i18next.t(this._filterSettingOpen?"filter.close":"filter.open")}" @click="${()=>{if(this._filterSettingOpen)this._filterSettingOpen=!1;else{if(this._filterSettingOpen=!0,0===this._assetTypes.length){let e=this._getAllowedChildTypes(this._selectedNodes[0]);this._assetTypes=e.filter(e=>"asset"===e.descriptorType)}this._filter.attribute.length>0&&(this._attributeNameFilter.value=this._filter.attribute[0]),this._filter.attributeValue.length>0&&this._filter.attribute.length>0&&(this._attributeValueFilter.disabled=!1,this._attributeValueFilter.value=this._filter.attributeValue[0]),this._filter.assetType.length>0?this._assetTypeFilter=this._filter.assetType[0]:this._assetTypeFilter=""}}}"></or-icon>
-                </div>
-                <div id="asset-tree-filter-setting" class="${this._filterSettingOpen?"visible":""}">
-                    <div class="advanced-filter">
-                        ${this._assetTypes.length>0?getContentWithMenuTemplate(this.assetTypeSelect(),this.mapDescriptors(this._assetTypes,{text:i18next.t("filter.assetTypeMenuNone"),value:"",icon:"selection-ellipse"}),void 0,e=>{this._assetTypeFilter=e},void 0,!1,!0,!0):html``}
-                        <or-mwc-input id="attributeNameFilter" .label="${i18next.t("filter.attributeLabel")}"
-
-                                      .type="${InputType.TEXT}"
-                                      style="margin-top: 10px;"
-                                      ?disabled="${this._loading}"
-                                      @input="${e=>{this._shouldEnableAttrTypeEvent(e)}}"
-                                      @or-mwc-input-changed="${e=>{this._shouldEnableAttrType(e.detail.value||void 0)}}"></or-mwc-input>
-                        <or-mwc-input id="attributeValueFilter" .label="${i18next.t("filter.attributeValueLabel")}"
-
-                                      .type="${InputType.TEXT}"
-                                      style="margin-top: 10px;"
-                                      disabled></or-mwc-input>
-                        <div style="margin-top: 10px;">
-                            <or-mwc-input style="float:left;" type="${InputType.BUTTON}" label="filter.clear" @or-mwc-input-changed="${()=>{this._filterInput.value=void 0,this._attributeValueFilter.value=void 0,this._attributeNameFilter.value=void 0,this._attributeValueFilter.disabled=!0,this._assetTypeFilter="",this._filter=new OrAssetTreeFilter,this._doFiltering()}}"></or-mwc-input>
-                            <or-mwc-input style="float: right;" type="${InputType.BUTTON}" label="filter.action" raised @or-mwc-input-changed="${()=>{this._filterFromSettings()}}"></or-mwc-input>
-                        </div>
-                    </div>
-                </div>
-            `)}
-            
-            ${!this._nodes?html`
-                    <span id="loading"><or-translate value="loading"></or-translate></span>`:0===this._nodes.length||!this.atLeastOneNodeToBeShown()?html`<span id="noAssetsFound"><or-translate value="noAssetsFound"></or-translate></span>`:html`
-                    <div id="list-container">
-                        <ol id="list">
-                            ${this._nodes.map(e=>this._treeNodeTemplate(e,0)).filter(e=>!!e)}
-                            <li class="asset-list-element">    
-                                <div class="end-element" node-asset-id="${""}" @dragleave=${e=>{this._onDragLeave(e)}} @dragenter="${e=>this._onDragEnter(e)}" @dragend="${e=>this._onDragEnd(e)}" @dragover="${e=>this._onDragOver(e)}"></div>
-                            </li>
-                        </ol>
-                    </div>
-                `}
-
-            <div id="footer">
-            
-            </div>
-        `}_isReadonly(){return this.readonly||!manager.hasRole("write:assets")}shouldUpdate(e){let t=super.shouldUpdate(e);return((e.has("assets")||e.has("rootAssets")||e.has("rootAssetIds"))&&(this._nodes=void 0),this._nodes)?(e.has("selectedIds")&&!Util.objectsEqual(e.get("selectedIds"),this.selectedIds)&&this._updateSelectedNodes(),e.has("sortBy")&&this._updateSort(this._nodes,this._getSortFunction()),e.has("disabledSubscribe")&&this.disableSubscribe&&this._removeEventSubscriptions(),t):(this._loadAssets(),!0)}_updateSelectedNodes(){let e=[],t=[];OrAssetTree_1._forEachNodeRecursive(this._nodes,s=>{if(this.selectedIds&&this.selectedIds.indexOf(s.asset.id)>=0){e.push(s.asset.id),t.push(s),s.selected=!0;let i=s.parent;for(;i;)i.expanded=!0,i=i.parent}else s.selected=!1;if(this.checkboxes){let t=s.parent;for(;t;){let s=[];OrAssetTree_1._forEachNodeRecursive(t.children,e=>{s.push(e)}),t.someChildrenSelected=!1,t.allChildrenSelected=!1,s.every(t=>e.includes(t.asset.id))?t.allChildrenSelected=!0:s.some(t=>e.includes(t.asset.id))&&(t.someChildrenSelected=!0),t=t.parent}}}),this.selectedIds=e;let s=this._selectedNodes;this._selectedNodes=t,this.dispatchEvent(new OrAssetTreeSelectionEvent({oldNodes:s,newNodes:t}))}_updateSort(e,t){e&&(e.sort(t),e.forEach(e=>this._updateSort(e.children,t)))}_toggleExpander(e,t,s=!1){t&&t.expandable&&(t.expanded=!t.expanded,t.expanded?this._expandedNodes.push(t):this._expandedNodes=this._expandedNodes.filter(e=>e!==t),e.parentElement.parentElement.parentElement.toggleAttribute("data-expanded"),s||this.dispatchEvent(new OrAssetTreeToggleExpandEvent({node:t})),this.requestUpdate())}_buildPaths(e){let t=[];return e.asset&&e.asset.id?(t.push(e.asset.id),e.children.length>0&&e.expanded&&e.children.forEach(e=>{t=t.concat(this._buildPaths(e))}),t):[]}_findNode(e,t){if(e.asset&&e.asset.id){if(e.asset.id===t)return e;if(e.children.length>0&&e.expanded){let s;return e.children.forEach(e=>{s||(s=this._findNode(e,t))}),s}return}}_findNodeFromAssetId(e){if(this._nodes){let t;return this._nodes.forEach(s=>{t||(t=this._findNode(s,e))}),t}}_onNodeClicked(e,t){var s,i,r,a;if(e&&e.defaultPrevented)return;e&&e.preventDefault();let d=e&&e.target.className.indexOf("expander")>=0,n=e&&(null==(i=null==(s=e.target)?void 0:s.icon)?void 0:i.includes("checkbox-multiple"));if(d)this._toggleExpander(e.target,t);else{let s=!0;if(t&&this.config&&(null==(r=this.config.select)?void 0:r.types)&&(s=this.config.select.types.indexOf(t.asset.type)>=0),!s&&!n)return;let i=[];if(t){let s=this.selectedNodes.indexOf(t),r=!0,d=!0,o=!this._isReadonly()&&(!this.config||!this.config.select||!this.config.select.multiSelect);if((this.checkboxes||o&&e&&(e.ctrlKey||e.shiftKey||e.metaKey))&&(d=!1,s>=0&&this.selectedIds&&this.selectedIds.length>1&&(r=!1)),n){i=[...this.selectedNodes];let e=[];OrAssetTree_1._forEachNodeRecursive(t.children,t=>{var s,i;let r=!0;t&&(null==(i=null==(s=this.config)?void 0:s.select)?void 0:i.types)&&(r=this.config.select.types.indexOf(t.asset.type)>=0),r&&e.push(t)}),i=t.allChildrenSelected?i.filter(t=>!e.map(e=>e.asset.id).includes(t.asset.id)):i.concat(e)}else if(d)this._latestSelected=Object.assign({},t),i=[t];else if(r){if(s<0){if(e&&e.shiftKey){let e=[];if(null==(a=this._nodes)||a.forEach(t=>{e=e.concat(this._buildPaths(t))}),this._latestSelected&&this._latestSelected.asset&&this._latestSelected.asset.id&&t.asset&&t.asset.id){let s=this._latestSelected.asset.id,r=t.asset.id,a=e.findIndex(e=>e.includes(s)),d=e.findIndex(e=>e.includes(r)),n=-1,o=-1;a>d?(n=d,o=a):(n=a,o=d);let l=e.slice(n,o+1),h=[];l.forEach(e=>{let t=this._findNodeFromAssetId(e);t&&h.push(t)}),i=(i=[...this.selectedNodes]).concat(h)}}else(i=[...this.selectedNodes]).push(t);this._latestSelected=Object.assign({},t)}}else s>=0&&(1===(i=[...this.selectedNodes]).length&&(this._latestSelected=void 0),i.splice(s,1))}Util.dispatchCancellableEvent(this,new OrAssetTreeRequestSelectionEvent({oldNodes:this.selectedNodes,newNodes:i})).then(e=>{e.allow&&(this.selectedNodes=e.detail.newNodes)})}}_onDeselectClicked(){this._onNodeClicked(null,null)}parseFromInputFilter(e){let t=this._filterInput.value;e&&(t=e);let s=new OrAssetTreeFilter;if(t){let e=t,i=t.match(/(attribute\:)(\"[^"]+\")\S*/g);i&&(i.length>0&&i.forEach((t,i)=>{e=e.replace(t,"");let r=t.toString().indexOf("attribute:"),a=t.toString().substring(r+10+1,t.toString().length-1);s.attribute.push(a),s.attributeValue.push("")}),this._attributeValueFilter.disabled=!1),(i=t.match(/(type\:)\S+/g))&&i.length>0&&i.forEach((t,i)=>{e=e.replace(t,"");let r=t.toString().indexOf("type:"),a=t.toString().substring(r+5);s.assetType.push(a)}),(i=t.match(/(\"[^\"]+\")\:(([^\"\s]+)|(\"[^\"]+\"))/g))&&i.length>0&&i.forEach((t,i)=>{e=e.replace(t,"");let r=t.toString().indexOf('":'),a=t.toString().substring(r+2),d=t.toString().substring(1,r);'"'===a[0]&&'"'===a[a.length-1]&&(a=a.substring(1,a.length-1)),s.attribute.push(d),s.attributeValue.push(a)}),s.asset=e&&e.length>0?e.trim():void 0}return s}formatFilter(e){let t=e.asset?e.asset:"",s=e.asset?" ":"",i=[];return e.assetType.length>0&&e.assetType.forEach(e=>{t+=s+"type:"+e,s=" "}),e.attribute.length>0&&e.attributeValue.length>0&&e.attributeValue.forEach((r,a)=>{i.push(e.attribute[a]),t+=s+'"'+e.attribute[a]+'":'+r,s=" "}),e.attribute.length>0&&0===e.attributeValue.length&&e.attribute.forEach(e=>{i.includes(e)||(t+=s+'attribute:"'+e+'"',s=" ")}),t}_shouldEnableAttrTypeEvent(e){let t;e.composedPath()&&(t=e.composedPath()[0].value||void 0),this._shouldEnableAttrType(t)}_shouldEnableAttrType(e){e?this._attributeValueFilter.disabled=!1:this._attributeValueFilter.disabled=!0}applySettingFields(e){if(this._assetTypeFilter?e.assetType=[this._assetTypeFilter]:e.assetType=[],this._attributeNameFilter.value?e.attribute=[this._attributeNameFilter.value]:e.attribute=[],this._attributeNameFilter.value&&this._attributeValueFilter.value){let t=this._attributeValueFilter.value;t.includes(" ")&&(t='"'+t+'"'),e.attributeValue=[t]}else e.attributeValue=[];return e}_filterFromSettings(){let e=this.parseFromInputFilter(),t=this.applySettingFields(e);this._filter=t;let s=this.formatFilter(this._filter);this._filterInput.value=s,this._filterSettingOpen=!1,this._doFiltering()}_onFilterInputEvent(e){let t;e.composedPath()&&(t=e.composedPath()[0].value||void 0),this._onFilterInput(t,!1)}_onFilterInput(e,t){let s=this.parseFromInputFilter(e);Util.objectsEqual(this._filter,s,!0)||(this._filter=s,this._searchInputTimer&&clearTimeout(this._searchInputTimer),t?this._doFiltering():this._searchInputTimer=window.setTimeout(()=>{this._doFiltering()},350))}_doFiltering(){return __awaiter(this,void 0,void 0,function*(){if(this._searchInputTimer&&(clearTimeout(this._searchInputTimer),this._searchInputTimer=void 0),this.isConnected&&this._nodes){if(!this._filter.asset&&!this._filter.attribute&&!this._filter.assetType&&!this._filter.attributeValue){OrAssetTree_1._forEachNodeRecursive(this._nodes,e=>{e.notMatchingFilter=!1,e.hidden=!1}),this.requestUpdate("_nodes");return}if(this.disabled=!0,this._filter.asset||this._filter.assetType||this._filter.attribute){let e=!1;this._filter.attribute&&(e=!0),this.getMatcher(e).then(e=>{this._nodes&&(this._nodes.forEach(t=>{this.filterTreeNode(t,e)}),this.disabled=!1)})}}})}getMatcher(e){return e?this.getMatcherFromQuery():this.getSimpleNameMatcher()}getSimpleNameMatcher(){return __awaiter(this,void 0,void 0,function*(){return e=>{let t=!0;return this._filter.asset&&(t=t&&e.name.toLowerCase().includes(this._filter.asset.toLowerCase())),this._filter.assetType.length>0&&(t=t&&e.type.toLowerCase()===this._filter.assetType[0].toLowerCase()),t}})}getMatcherFromQuery(){return __awaiter(this,void 0,void 0,function*(){let response,foundAssetIds,assetCond,attributeCond,assetTypeCond;this._filter.asset&&(assetCond=[{predicateType:"string",match:"CONTAINS",value:this._filter.asset,caseSensitive:!1}]),this._filter.assetType.length>0&&(assetTypeCond=this._filter.assetType),this._filter.attribute.length>0&&(attributeCond={operator:"AND",items:this._filter.attribute.map(e=>({name:{predicateType:"string",match:"EXACT",value:Util.sentenceCaseToCamelCase(e),caseSensitive:!1}}))});let query={select:{attributes:attributeCond?void 0:[]},names:assetCond,types:assetTypeCond,attributes:attributeCond};try{foundAssetIds=(response=yield manager.rest.api.AssetResource.queryAssets(query)).data.map(e=>e.id)}catch(e){this._filter.assetType.forEach(e=>{-1===this._assetTypes.findIndex(t=>t.name===e)&&showSnackbar(void 0,"filter.assetTypeDoesNotExist","dismiss")}),foundAssetIds=[]}return asset=>{let attrValueCheck=!0;if(this._filter.attribute.length>0&&this._filter.attributeValue.length>0&&foundAssetIds.includes(asset.id)){let attributeVal=[];this._filter.attributeValue.forEach((e,t)=>{e.length>0&&attributeVal.push([this._filter.attribute[t],e])});let matchingAsset=response.data.find(e=>e.id===asset.id);if(matchingAsset&&matchingAsset.attributes)for(let attributeValIndex=0;attributeValIndex<attributeVal.length;attributeValIndex++){let currentAttributeVal=attributeVal[attributeValIndex],atLeastOneAttributeMatchValue=!1;Object.keys(matchingAsset.attributes).forEach(key=>{let attr=matchingAsset.attributes[key];if(attr.name.toLowerCase()===currentAttributeVal[0].toLowerCase()&&attr.value)switch(attr.type){case"number":case"integer":case"long":case"bigInteger":case"bigNumber":case"positiveInteger":case"negativeInteger":case"positiveNumber":case"negativeNumber":let value=currentAttributeVal[1];currentAttributeVal[1].startsWith("=")&&"="!==currentAttributeVal[1][1]&&(value="="+value),/^[0-9]+$/.test(currentAttributeVal[1])&&(value="=="+value);let resultNumberEval=eval(attr.value+value);resultNumberEval&&(atLeastOneAttributeMatchValue=!0);break;case"text":if(attr.value){let unparsedValue=currentAttributeVal[1],multicharString="*",parsedValue=unparsedValue.replace(multicharString,".*");parsedValue=parsedValue.replace(/"/g,""),-1!=attr.value.toLowerCase().indexOf(parsedValue.toLowerCase())&&(atLeastOneAttributeMatchValue=!0)}}}),attrValueCheck=atLeastOneAttributeMatchValue}}return foundAssetIds.includes(asset.id)&&attrValueCheck}})}isAnyFilter(){return void 0!==this._filter.asset||this._filter.assetType.length>0||this._filter.attribute.length>0}filterTreeNode(e,t,s=!1){let i=t(e.asset);e.notMatchingFilter=!i;let r=e.children.map(e=>this.filterTreeNode(e,t,i)).some(e=>e);return i=i||r,e.expanded=r&&e.children.length>0&&this.isAnyFilter(),e.hidden=!i&&!s,i}_onCopyClicked(){return __awaiter(this,void 0,void 0,function*(){if(1===this._selectedNodes.length)try{let e=yield manager.rest.api.AssetResource.get(this._selectedNodes[0].asset.id);if(!e.data)throw Error("API returned an invalid response when retrieving the source asset");let t=JSON.parse(JSON.stringify(e.data));t.name+=" copy",delete t.id,delete t.path,delete t.createdOn,delete t.version,Util.dispatchCancellableEvent(this,new OrAssetTreeRequestAddEvent({sourceAsset:this._selectedNodes[0].asset,asset:t})).then(e=>{e.allow&&this.dispatchEvent(new OrAssetTreeAddEvent(e.detail))})}catch(e){console.error("Failed to copy asset",e),showErrorDialog("Failed to copy asset")}})}_onAddClicked(){let e,t=this._getAllowedChildTypes(this._selectedNodes[0]),s=t.filter(e=>"agent"===e.descriptorType),i=t.filter(e=>"asset"===e.descriptorType),r=this._selectedNodes&&1===this._selectedNodes.length?this._selectedNodes[0].asset:void 0,a=t=>{let s=!!t.detail.name&&t.detail.name.trim().length>0&&t.detail.name.trim().length<1024;e.shadowRoot.getElementById("add-btn").disabled=!t.detail.descriptor||!s};e=showDialog(new OrMwcDialog().setHeading(i18next.t("addAsset")).setContent(html`
-                    <or-add-asset-dialog id="add-panel" .config="${this.config}" .agentTypes="${s}" .assetTypes="${i}" .parent="${r}" @or-add-asset-changed="${a}"></or-add-asset-dialog>
-                `).setActions([{actionName:"cancel",content:"cancel"},{actionName:"add",content:html`<or-mwc-input id="add-btn" class="button" .type="${InputType.BUTTON}" label="add" disabled></or-mwc-input>`,action:()=>{let t=e.shadowRoot.getElementById("add-panel"),s=t.selectedType,i=t.selectedAttributes,r=t.name.trim(),a=t.parent;if(!s)return;let d={name:r,type:s.name,realm:manager.displayRealm},n=AssetModelUtil.getAssetTypeInfo(s.name);if(!n)return;n.attributeDescriptors&&(d.attributes={},n.attributeDescriptors.filter(e=>!e.optional).forEach(e=>{d.attributes[e.name]={name:e.name,type:e.type,meta:e.meta?Object.assign({},e.meta):void 0}})),i&&(null==i||i.forEach(e=>{d.attributes[e.name]={name:e.name,type:e.type,meta:e.meta?Object.assign({},e.meta):void 0}})),this.selectedIds&&(d.parentId=a?a.id:void 0);let o={asset:d};Util.dispatchCancellableEvent(this,new OrAssetTreeRequestAddEvent(o)).then(e=>{e.allow&&this.dispatchEvent(new OrAssetTreeAddEvent(e.detail))})}}]).setStyles(html`
-                    <style>
-                        .mdc-dialog__content {
-                            padding: 0 !important;
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var OrAssetTree_1;
+import { html, LitElement } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+import "@openremote/or-mwc-components/or-mwc-input";
+import { InputType } from "@openremote/or-mwc-components/or-mwc-input";
+import "@openremote/or-icon";
+import { AssetModelUtil } from "@openremote/model";
+import "@openremote/or-translate";
+import { style } from "./style";
+import manager, { subscribe, Util } from "@openremote/core";
+import Qs from "qs";
+import { getAssetDescriptorIconTemplate } from "@openremote/or-icon";
+import "@openremote/or-mwc-components/or-mwc-menu";
+import { getContentWithMenuTemplate } from "@openremote/or-mwc-components/or-mwc-menu";
+import "@openremote/or-mwc-components/or-mwc-list";
+import { i18next } from "@openremote/or-translate";
+import "@openremote/or-mwc-components/or-mwc-dialog";
+import { OrMwcDialog, showDialog, showErrorDialog, showOkCancelDialog } from "@openremote/or-mwc-components/or-mwc-dialog";
+import "./or-add-asset-dialog";
+import { showSnackbar } from "@openremote/or-mwc-components/or-mwc-snackbar";
+import { when } from "lit/directives/when.js";
+export { style };
+export class OrAssetTreeRequestSelectionEvent extends CustomEvent {
+    constructor(request) {
+        super(OrAssetTreeRequestSelectionEvent.NAME, {
+            bubbles: true,
+            composed: true,
+            detail: {
+                allow: true,
+                detail: request
+            }
+        });
+    }
+}
+OrAssetTreeRequestSelectionEvent.NAME = "or-asset-tree-request-selection";
+export class OrAssetTreeSelectionEvent extends CustomEvent {
+    constructor(detail) {
+        super(OrAssetTreeSelectionEvent.NAME, {
+            bubbles: true,
+            composed: true,
+            detail: detail
+        });
+    }
+}
+OrAssetTreeSelectionEvent.NAME = "or-asset-tree-selection";
+export class OrAssetTreeChangeParentEvent extends CustomEvent {
+    constructor(parent, assetsIds) {
+        super(OrAssetTreeChangeParentEvent.NAME, {
+            bubbles: true,
+            composed: true,
+            detail: {
+                parentId: parent,
+                assetIds: assetsIds
+            }
+        });
+    }
+}
+OrAssetTreeChangeParentEvent.NAME = "or-asset-tree-change-parent";
+export class OrAssetTreeToggleExpandEvent extends CustomEvent {
+    constructor(detail) {
+        super(OrAssetTreeToggleExpandEvent.NAME, {
+            bubbles: true,
+            composed: true,
+            detail: detail
+        });
+    }
+}
+OrAssetTreeToggleExpandEvent.NAME = "or-asset-tree-expand";
+var FilterElementType;
+(function (FilterElementType) {
+    FilterElementType[FilterElementType["SEARCH_FILTER"] = 0] = "SEARCH_FILTER";
+    FilterElementType[FilterElementType["ASSET_TYPE"] = 1] = "ASSET_TYPE";
+    FilterElementType[FilterElementType["ATTRIBUTE_NAME"] = 2] = "ATTRIBUTE_NAME";
+    FilterElementType[FilterElementType["ATTRIBUTE_VALUE"] = 3] = "ATTRIBUTE_VALUE";
+})(FilterElementType || (FilterElementType = {}));
+export class OrAssetTreeRequestAddEvent extends CustomEvent {
+    constructor(detail) {
+        super(OrAssetTreeRequestAddEvent.NAME, {
+            bubbles: true,
+            composed: true,
+            detail: {
+                allow: true,
+                detail: detail
+            }
+        });
+    }
+}
+OrAssetTreeRequestAddEvent.NAME = "or-asset-tree-request-add";
+export class OrAssetTreeAddEvent extends CustomEvent {
+    constructor(detail) {
+        super(OrAssetTreeAddEvent.NAME, {
+            bubbles: true,
+            composed: true,
+            detail: detail
+        });
+    }
+}
+OrAssetTreeAddEvent.NAME = "or-asset-tree-add";
+export class OrAssetTreeRequestDeleteEvent extends CustomEvent {
+    constructor(request) {
+        super(OrAssetTreeRequestDeleteEvent.NAME, {
+            bubbles: true,
+            composed: true,
+            detail: {
+                allow: true,
+                detail: request
+            }
+        });
+    }
+}
+OrAssetTreeRequestDeleteEvent.NAME = "or-asset-tree-request-delete";
+export class OrAssetTreeAssetEvent extends CustomEvent {
+    constructor(assetEvent) {
+        super(OrAssetTreeAssetEvent.NAME, {
+            bubbles: true,
+            composed: true,
+            detail: assetEvent
+        });
+    }
+}
+OrAssetTreeAssetEvent.NAME = "or-asset-tree-asset-event";
+export class OrAssetTreeFilter {
+    constructor() {
+        this.asset = undefined;
+        this.assetType = [];
+        this.attribute = [];
+        this.attributeValue = [];
+    }
+}
+export const getAssetTypes = () => __awaiter(void 0, void 0, void 0, function* () {
+    const response = yield manager.rest.api.AssetResource.queryAssets({
+        select: {
+            attributes: []
+        },
+        recursive: true
+    });
+    if (response && response.data) {
+        return response.data.map(asset => asset.type);
+    }
+});
+let OrAssetTree = OrAssetTree_1 = class OrAssetTree extends subscribe(manager)(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.readonly = false;
+        this.disabled = false;
+        this.disableSubscribe = false;
+        this.showDeselectBtn = true;
+        this.showSortBtn = true;
+        this.showFilter = true;
+        this.sortBy = "name";
+        this.expandAllNodes = false;
+        this.expandedIds = [];
+        this.checkboxes = false;
+        this._loading = false;
+        this._connected = false;
+        this._selectedNodes = [];
+        this._expandedNodes = [];
+        this._filter = new OrAssetTreeFilter();
+        this._searchInputTimer = undefined;
+        this._filterSettingOpen = false;
+        this._assetTypes = [];
+        this._uniqueAssetTypes = [];
+        this._dragDropParentId = null;
+        this._expandTimer = undefined;
+        this._latestSelected = undefined;
+        this.assetsChildren = {};
+    }
+    static get styles() {
+        return [
+            style
+        ];
+    }
+    get selectedNodes() {
+        return this._selectedNodes ? [...this._selectedNodes] : [];
+    }
+    set selectedNodes(nodes) {
+        this.selectedIds = nodes.map((node) => node.asset.id);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.requestUpdate();
+    }
+    refresh() {
+        // Clear nodes to re-fetch them
+        this._nodes = undefined;
+    }
+    isAncestorSelected(node) {
+        if (!this.selectedIds || !node.parent) {
+            return false;
+        }
+        while (node.parent) {
+            node = node.parent;
+            if (this.selectedIds.includes(node.asset.id)) {
+                return true;
+            }
+        }
+        return false;
+    }
+    mapDescriptors(descriptors, withNoneValue) {
+        let items = descriptors.map((descriptor) => {
+            return {
+                styleMap: {
+                    "--or-icon-fill": descriptor.colour ? "#" + descriptor.colour : "unset"
+                },
+                icon: descriptor.icon,
+                text: Util.getAssetTypeLabel(descriptor),
+                value: descriptor.name,
+                data: descriptor
+            };
+        }).sort(Util.sortByString((listItem) => listItem.text));
+        if (withNoneValue) {
+            items.splice(0, 0, withNoneValue);
+        }
+        return items;
+    }
+    getSelectHeader() {
+        return html `<or-mwc-input style="width:100%;" ?disabled="${this._loading}" type="${InputType.TEXT}" .label="${i18next.t("filter.assetTypeLabel")}" iconTrailing="menu-down" iconColor="rgba(0, 0, 0, 0.87)" icon="selection-ellipse" value="${i18next.t("filter.assetTypeNone")}"></or-mwc-input>`;
+    }
+    getSelectedHeader(descriptor) {
+        return html `<or-mwc-input style="width:100%;" ?disabled="${this._loading}" type="${InputType.TEXT}" .label="${i18next.t("filter.assetTypeLabel")}" .iconColor="${descriptor.colour}" iconTrailing="menu-down" icon="${descriptor.icon}" value="${Util.getAssetTypeLabel(descriptor)}"></or-mwc-input>`;
+    }
+    assetTypeSelect() {
+        if (this._assetTypeFilter) {
+            const descriptor = this._assetTypes.find((at) => { return at.name === this._assetTypeFilter; });
+            if (descriptor) {
+                return this.getSelectedHeader(descriptor);
+            }
+            else {
+                return this.getSelectHeader();
+            }
+        }
+        else {
+            return this.getSelectHeader();
+        }
+    }
+    atLeastOneNodeToBeShown() {
+        var _a;
+        let atLeastOne = false;
+        (_a = this._nodes) === null || _a === void 0 ? void 0 : _a.forEach((value) => {
+            if (!value.hidden) {
+                atLeastOne = true;
+            }
+        });
+        return atLeastOne;
+    }
+    render() {
+        const canAdd = this._canAdd();
+        return html `
+            <div id="header">
+                <div id="title-container">
+                    <or-translate id="title" value="asset_plural"></or-translate>
+                </div>
+
+                <div id="header-btns">
+                    <or-mwc-input ?hidden="${!this.selectedIds || this.selectedIds.length === 0 || !this.showDeselectBtn}" type="${InputType.BUTTON}" icon="close" title="${i18next.t("deselect")}" @or-mwc-input-changed="${() => this._onDeselectClicked()}"></or-mwc-input>
+                    <or-mwc-input ?hidden="${this._isReadonly() || !this.selectedIds || this.selectedIds.length !== 1 || !canAdd}" type="${InputType.BUTTON}" icon="content-copy" title="${i18next.t("duplicate")}" @or-mwc-input-changed="${() => this._onCopyClicked()}"></or-mwc-input>
+                    <or-mwc-input ?hidden="${this._isReadonly() || !this.selectedIds || this.selectedIds.length === 0 || this._gatewayDescendantIsSelected()}" type="${InputType.BUTTON}" icon="delete" title="${i18next.t("delete")}" @or-mwc-input-changed="${() => this._onDeleteClicked()}"></or-mwc-input>
+                    <or-mwc-input ?hidden="${this._isReadonly() || !canAdd}" type="${InputType.BUTTON}" icon="plus" title="${i18next.t("addAsset")}" @or-mwc-input-changed="${() => this._onAddClicked()}"></or-mwc-input>
+                    
+                    ${getContentWithMenuTemplate(html `<or-mwc-input type="${InputType.BUTTON}" ?hidden="${!this.showSortBtn}" icon="sort-variant" title="${i18next.t("sort")}" ></or-mwc-input>`, ["name", "type", "createdOn"].map((sort) => { return { value: sort, text: i18next.t(sort) }; }), this.sortBy, (v) => this._onSortClicked(v))}
+                </div>
+            </div>
+            
+            ${when(this.showFilter, () => html `
+                <div id="asset-tree-filter">
+                    <or-mwc-input id="filterInput"
+                                  ?disabled="${this._loading}"
+                                  style="width: 100%;"
+                                  type="${InputType.TEXT}"
+                                  placeholder="${i18next.t("filter.filter")}..."
+                                  compact="true"
+                                  outlined="true"
+                                  @input="${(e) => {
+            // Means some input is occurring so delay filter
+            this._onFilterInputEvent(e);
+        }}"
+                                  @or-mwc-input-changed="${(e) => {
+            // Means field has lost focus so do filter immediately
+            this._onFilterInput(e.detail.value || undefined, true);
+        }}">
+                    </or-mwc-input>
+                    <or-icon id="filterSettingsIcon" icon="${this._filterSettingOpen ? "window-close" : "tune"}" title="${i18next.t(this._filterSettingOpen ? "filter.close" : "filter.open")}" @click="${() => {
+            if (this._filterSettingOpen) {
+                this._filterSettingOpen = false;
+            }
+            else {
+                this._filterSettingOpen = true;
+                // Avoid to build again the types
+                if (this._assetTypes.length === 0) {
+                    let usedTypes = [];
+                    const types = this._getAllowedChildTypes(this._selectedNodes[0]);
+                    this._assetTypes = types.filter((t) => t.descriptorType === "asset");
+                }
+                if (this._filter.attribute.length > 0) {
+                    this._attributeNameFilter.value = this._filter.attribute[0];
+                }
+                if (this._filter.attributeValue.length > 0 && this._filter.attribute.length > 0) {
+                    this._attributeValueFilter.disabled = false;
+                    this._attributeValueFilter.value = this._filter.attributeValue[0];
+                }
+                if (this._filter.assetType.length > 0) {
+                    this._assetTypeFilter = this._filter.assetType[0];
+                }
+                else {
+                    this._assetTypeFilter = '';
+                }
+            }
+        }}"></or-icon>
+                </div>
+                <div id="asset-tree-filter-setting" class="${this._filterSettingOpen ? "visible" : ""}">
+                    <div class="advanced-filter">
+                        ${this._assetTypes.length > 0 ? getContentWithMenuTemplate(this.assetTypeSelect(), this.mapDescriptors(this._assetTypes, { text: i18next.t("filter.assetTypeMenuNone"), value: "", icon: "selection-ellipse" }), undefined, (v) => {
+            this._assetTypeFilter = v;
+        }, undefined, false, true, true) : html ``}
+                        <or-mwc-input id="attributeNameFilter" .label="${i18next.t("filter.attributeLabel")}"
+
+                                      .type="${InputType.TEXT}"
+                                      style="margin-top: 10px;"
+                                      ?disabled="${this._loading}"
+                                      @input="${(e) => {
+            this._shouldEnableAttrTypeEvent(e);
+        }}"
+                                      @or-mwc-input-changed="${(e) => {
+            this._shouldEnableAttrType(e.detail.value || undefined);
+        }}"></or-mwc-input>
+                        <or-mwc-input id="attributeValueFilter" .label="${i18next.t("filter.attributeValueLabel")}"
+
+                                      .type="${InputType.TEXT}"
+                                      style="margin-top: 10px;"
+                                      disabled></or-mwc-input>
+                        <div style="margin-top: 10px;">
+                            <or-mwc-input style="float:left;" type="${InputType.BUTTON}" label="filter.clear" @or-mwc-input-changed="${() => {
+            // Wipe the current value and hide the clear button
+            this._filterInput.value = undefined;
+            this._attributeValueFilter.value = undefined;
+            this._attributeNameFilter.value = undefined;
+            this._attributeValueFilter.disabled = true;
+            this._assetTypeFilter = '';
+            this._filter = new OrAssetTreeFilter();
+            // Call filtering
+            this._doFiltering();
+        }}"></or-mwc-input>
+                            <or-mwc-input style="float: right;" type="${InputType.BUTTON}" label="filter.action" raised @or-mwc-input-changed="${() => {
+            this._filterFromSettings();
+        }}"></or-mwc-input>
+                        </div>
+                    </div>
+                </div>
+            `)}
+            
+            ${!this._nodes
+            ? html `
+                    <span id="loading"><or-translate value="loading"></or-translate></span>`
+            : ((this._nodes.length === 0 || !this.atLeastOneNodeToBeShown())
+                ? html `<span id="noAssetsFound"><or-translate value="noAssetsFound"></or-translate></span>`
+                : html `
+                    <div id="list-container">
+                        <ol id="list">
+                            ${this._nodes.map((treeNode) => this._treeNodeTemplate(treeNode, 0)).filter(t => !!t)}
+                            <li class="asset-list-element">    
+                                <div class="end-element" node-asset-id="${''}" @dragleave=${(ev) => { this._onDragLeave(ev); }} @dragenter="${(ev) => this._onDragEnter(ev)}" @dragend="${(ev) => this._onDragEnd(ev)}" @dragover="${(ev) => this._onDragOver(ev)}"></div>
+                            </li>
+                        </ol>
+                    </div>
+                `)}
+
+            <div id="footer">
+            
+            </div>
+        `;
+    }
+    _isReadonly() {
+        return this.readonly || !manager.hasRole("write:assets" /* ClientRole.WRITE_ASSETS */);
+    }
+    shouldUpdate(_changedProperties) {
+        const result = super.shouldUpdate(_changedProperties);
+        if (_changedProperties.has("assets")
+            || _changedProperties.has("rootAssets")
+            || _changedProperties.has("rootAssetIds")) {
+            this._nodes = undefined;
+        }
+        if (!this._nodes) {
+            this._loadAssets();
+            return true;
+        }
+        if (_changedProperties.has("selectedIds")) {
+            if (!Util.objectsEqual(_changedProperties.get("selectedIds"), this.selectedIds)) {
+                this._updateSelectedNodes();
+            }
+        }
+        if (_changedProperties.has("sortBy")) {
+            this._updateSort(this._nodes, this._getSortFunction());
+        }
+        if (_changedProperties.has("disabledSubscribe")) {
+            if (this.disableSubscribe) {
+                this._removeEventSubscriptions();
+            }
+        }
+        return result;
+    }
+    _updateSelectedNodes() {
+        const actuallySelectedIds = [];
+        const selectedNodes = [];
+        OrAssetTree_1._forEachNodeRecursive(this._nodes, (node) => {
+            if (this.selectedIds && this.selectedIds.indexOf(node.asset.id) >= 0) {
+                actuallySelectedIds.push(node.asset.id);
+                selectedNodes.push(node);
+                node.selected = true;
+                // Expand every ancestor
+                let parent = node.parent;
+                while (parent) {
+                    parent.expanded = true;
+                    parent = parent.parent;
+                }
+            }
+            else {
+                node.selected = false;
+            }
+            if (this.checkboxes) {
+                let parent = node.parent;
+                while (parent) {
+                    const allChildren = [];
+                    OrAssetTree_1._forEachNodeRecursive(parent.children, (child) => {
+                        allChildren.push(child);
+                    });
+                    parent.someChildrenSelected = false;
+                    parent.allChildrenSelected = false;
+                    if (allChildren.every(c => actuallySelectedIds.includes(c.asset.id))) {
+                        parent.allChildrenSelected = true;
+                    }
+                    else if (allChildren.some(c => actuallySelectedIds.includes(c.asset.id))) {
+                        parent.someChildrenSelected = true;
+                    }
+                    parent = parent.parent;
+                }
+            }
+        });
+        this.selectedIds = actuallySelectedIds;
+        const oldSelection = this._selectedNodes;
+        this._selectedNodes = selectedNodes;
+        this.dispatchEvent(new OrAssetTreeSelectionEvent({
+            oldNodes: oldSelection,
+            newNodes: selectedNodes
+        }));
+    }
+    _updateSort(nodes, sortFunction) {
+        if (!nodes) {
+            return;
+        }
+        nodes.sort(sortFunction);
+        nodes.forEach((node) => this._updateSort(node.children, sortFunction));
+    }
+    _toggleExpander(expander, node, silent = false) {
+        if (node && node.expandable) {
+            node.expanded = !node.expanded;
+            if (node.expanded) {
+                this._expandedNodes.push(node);
+            }
+            else {
+                this._expandedNodes = this._expandedNodes.filter(n => n !== node);
+            }
+            const elem = expander.parentElement.parentElement.parentElement;
+            elem.toggleAttribute("data-expanded");
+            if (!silent) {
+                this.dispatchEvent(new OrAssetTreeToggleExpandEvent({ node: node }));
+            }
+            this.requestUpdate();
+        }
+    }
+    _buildPaths(node) {
+        let paths = [];
+        if (node.asset) {
+            if (node.asset.id) {
+                paths.push(node.asset.id);
+                if (node.children.length > 0 && node.expanded) {
+                    node.children.forEach((child) => {
+                        paths = paths.concat(this._buildPaths(child));
+                    });
+                }
+                return paths;
+            }
+            return [];
+        }
+        return [];
+    }
+    _findNode(n, assetId) {
+        if (n.asset && n.asset.id) {
+            if (n.asset.id === assetId) {
+                return n;
+            }
+            else if (n.children.length > 0 && n.expanded) {
+                let foundNode = undefined;
+                n.children.forEach((n) => {
+                    if (!foundNode) {
+                        foundNode = this._findNode(n, assetId);
+                    }
+                });
+                return foundNode;
+            }
+            return undefined;
+        }
+    }
+    _findNodeFromAssetId(assetId) {
+        if (this._nodes) {
+            let foundNode = undefined;
+            this._nodes.forEach((n) => {
+                if (!foundNode) {
+                    foundNode = this._findNode(n, assetId);
+                }
+            });
+            return foundNode;
+        }
+        else {
+            return undefined;
+        }
+    }
+    _onNodeClicked(evt, node) {
+        var _a, _b, _c, _d;
+        if (evt && evt.defaultPrevented) {
+            return;
+        }
+        if (evt) {
+            evt.preventDefault();
+        }
+        const isExpander = evt && evt.target.className.indexOf("expander") >= 0;
+        const isParentCheckbox = evt && ((_b = (_a = evt.target) === null || _a === void 0 ? void 0 : _a.icon) === null || _b === void 0 ? void 0 : _b.includes("checkbox-multiple"));
+        if (isExpander) {
+            this._toggleExpander(evt.target, node);
+        }
+        else {
+            let canSelect = true;
+            if (node && this.config && ((_c = this.config.select) === null || _c === void 0 ? void 0 : _c.types)) {
+                canSelect = this.config.select.types.indexOf(node.asset.type) >= 0;
+            }
+            // If node cannot be selected, and it is not the 'select all of this parent'-checkbox, cancel it.
+            if (!canSelect && !isParentCheckbox) {
+                return;
+            }
+            let selectedNodes = [];
+            if (node) {
+                const index = this.selectedNodes.indexOf(node);
+                let select = true;
+                let deselectOthers = true;
+                const multiSelect = !this._isReadonly() && (!this.config || !this.config.select || !this.config.select.multiSelect);
+                // determine if node was already selected
+                if (this.checkboxes || (multiSelect && evt && (evt.ctrlKey || evt.shiftKey || evt.metaKey))) {
+                    deselectOthers = false;
+                    if (index >= 0 && this.selectedIds && this.selectedIds.length > 1) {
+                        select = false;
+                    }
+                }
+                // handle selected state
+                if (isParentCheckbox) {
+                    selectedNodes = [...this.selectedNodes];
+                    const childNodes = [];
+                    OrAssetTree_1._forEachNodeRecursive(node.children, (childNode) => {
+                        var _a, _b;
+                        let canSelectChild = true;
+                        // If not of required asset type, cancel selection of the child
+                        if (childNode && ((_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.select) === null || _b === void 0 ? void 0 : _b.types)) {
+                            canSelectChild = this.config.select.types.indexOf(childNode.asset.type) >= 0;
                         }
-                    </style>
-                `).setDismissAction(null))}_gatewayDescendantIsSelected(){return this._selectedNodes.some(e=>{var t;let s=null==e?void 0:e.parent;for(;s;){if((null==(t=s.asset)?void 0:t.type)==="GatewayAsset")return!0;s=s.parent}return!1})}_onDeleteClicked(){this._selectedNodes.length>0&&Util.dispatchCancellableEvent(this,new OrAssetTreeRequestDeleteEvent(this._selectedNodes)).then(e=>{e.allow&&this._doDelete()})}_onSortClicked(e){this.sortBy=e}_doDelete(){if(!this._selectedNodes||0===this._selectedNodes.length)return;let e=new Set,t=this._selectedNodes.filter(t=>{var s;return(null==(s=t.asset)?void 0:s.type)!=="GatewayAsset"||(e.add(t.asset),!1)});OrAssetTree_1._forEachNodeRecursive(t,t=>{var s;let i=t.parent,r=!0;for(;i&&r;)"GatewayAsset"===(null==(s=null==i?void 0:i.asset)?void 0:s.type)&&(r=!1),i=i.parent;r&&e.add(t.asset)});let s=Array.from(e).map(e=>e.id),i=Array.from(e).map(e=>e.name),r=()=>{this.disabled=!0,manager.rest.api.AssetResource.delete({assetId:s},{paramsSerializer:e=>Qs.stringify(e,{arrayFormat:"repeat"})}).then(e=>{this.refresh(),this.disabled=!1,204!==e.status&&showErrorDialog(i18next.t("deleteAssetsFailed"))}).catch(e=>{this.refresh(),this.disabled=!1,showErrorDialog(i18next.t("deleteAssetsFailed"))})};showOkCancelDialog(i18next.t("deleteAssets"),i18next.t("deleteAssetsConfirm",{assetNames:i.join(",\n- ")}),i18next.t("delete")).then(e=>{e&&r()})}_canAdd(){var e;if(this._selectedNodes&&this._selectedNodes.length>1)return!1;let t=this._selectedNodes?this._selectedNodes[0]:void 0;return!((null==(e=null==t?void 0:t.asset)?void 0:e.type)==="GatewayAsset"||this._gatewayDescendantIsSelected())&&this._getAllowedChildTypes(t).length>0}_getAllowedChildTypes(e){let t,s;if(this.config&&this.config.add){if(this.config.add.typesProvider){let t=this.config.add.typesProvider(e);if(t)return t}if(this.config.add.typesParent){let i;!e&&this.config.add.typesParent.none?i=this.config.add.typesParent.none:e&&this.config.add.typesParent.assetTypes&&(i=this.config.add.typesParent.assetTypes[e.asset.type]),i||(i=this.config.add.typesParent.default),i&&(t=i.include,s=i.exclude||[])}}return AssetModelUtil.getAssetDescriptors().filter(e=>(!t||t.some(t=>Util.stringMatch(t,e.name)))&&(!s||!s.some(t=>Util.stringMatch(t,e.name))))}_getSortFunction(){return"createdOn"===this.sortBy?Util.sortByNumber(e=>e.asset[this.sortBy]):Util.sortByString(e=>e.asset[this.sortBy])}_loadAssets(){let e=this._getSortFunction();if(this.assets)this._loading=!1,this._buildTreeNodes(this.assets,e);else{if(!this._connected||this._loading)return;if(this._loading=!0,this.dataProvider)this.dataProvider().then(t=>{this._loading=!1,this._buildTreeNodes(t,e)});else{let t={realm:{name:manager.displayRealm},select:{attributes:[]}};this.assetIds?(t.ids=this.assetIds,t.recursive=!0):this.rootAssets?(t.ids=this.rootAssets.map(e=>e.id),t.recursive=!0):this.rootAssetIds&&(t.ids=this.rootAssetIds,t.recursive=!0),this._sendEventWithReply({eventType:"read-assets",assetQuery:t}).then(t=>{this._loading=!1,this._buildTreeNodes(t.assets,e)})}}}_addEventSubscriptions(){return __awaiter(this,void 0,void 0,function*(){this.disableSubscribe||(this._subscriptionIds=[(yield manager.getEventProvider().subscribeAssetEvents(void 0,!1,e=>this._onEvent(e)))])})}onEventsConnect(){this._connected=!0,this._loadAssets()}onEventsDisconnect(){this._connected=!1,this._nodes=void 0}getNodes(){return this._nodes||[]}_onEvent(e){if("assets"===e.eventType){let t=e;this._buildTreeNodes(t.assets,this._getSortFunction());return}if("asset"===e.eventType){let t=e;if("READ"===t.cause||"UPDATE"===t.cause&&!(t.updatedProperties.includes("name")||t.updatedProperties.includes("parentId")))return;let s=[];"DELETE"!==t.cause&&s.push(t.asset),this._nodes&&OrAssetTree_1._forEachNodeRecursive(this._nodes,e=>{e.asset.id!==t.asset.id&&s.push(e.asset)}),this._buildTreeNodes(s,this._getSortFunction()),this._filterInput.value&&this._doFiltering(),this.dispatchEvent(new OrAssetTreeAssetEvent(t))}}_buildTreeNodes(e,t){if(e&&0!==e.length){let s,i;manager.isRestrictedUser()&&e.forEach(t=>{if(t.parentId&&t.path&&void 0===e.find(e=>e.id===t.parentId)){let s=null;for(let i=0;i<t.path.length;i++){let r=t.path[i];t.id!==r&&void 0!==e.find(e=>e.id===r)&&(s=r)}t.reparentId=s}}),this.rootAssetIds?s=this.rootAssetIds:this.rootAssets&&(s=this.rootAssets.map(e=>e.id)),i=s?e.filter(e=>s.indexOf(e.id)>=0||null===e.reparentId).map(e=>({asset:e})):e.filter(e=>!e.parentId||null===e.reparentId).map(e=>({asset:e})),this.assetsChildren={},e.forEach(e=>{e.parentId&&(this.assetsChildren[e.parentId]||(this.assetsChildren[e.parentId]=[]),this.assetsChildren[e.parentId].push({asset:e})),e.reparentId&&(this.assetsChildren[e.reparentId]||(this.assetsChildren[e.reparentId]=[]),this.assetsChildren[e.reparentId].push({asset:e}))}),i.sort(t),i.forEach(s=>this._buildChildTreeNodes(s,e,t)),this._nodes=i;let r=[];this._expandedNodes.forEach(e=>{OrAssetTree_1._forEachNodeRecursive(this._nodes,t=>{if(t.asset&&e&&e.asset&&t.asset.id===e.asset.id){t.expanded=!0,r.push(t);let e=t.parent;for(;e;)e.expanded=!0,e=e.parent,0>r.indexOf(e)&&r.push(e)}})}),this._expandedNodes=r}else this._nodes=[];this.selectedIds&&this.selectedIds.length>0&&this._updateSelectedNodes(),this.expandAllNodes&&OrAssetTree_1._forEachNodeRecursive(this._nodes,e=>{e.children&&e.children.length>0&&(e.expanded=!0)})}_buildChildTreeNodes(e,t,s){let i=this.assetsChildren[e.asset.id];e.children=i?i.sort(s):[],e.children.length>0&&(e.expandable=!0),e.children.forEach(i=>{i.parent=e,this._buildChildTreeNodes(i,t,s)})}_onDragStart(e){this._dragDropParentId=null;let t=e.currentTarget.getAttribute("node-asset-id");this.selectedIds||(this.selectedIds=[]),t&&this.selectedIds&&!this.selectedIds.includes(t)&&(e.ctrlKey||e.shiftKey||(this.selectedIds=[]),this.selectedIds.push(t))}_onDragEnd(e){let t=e.x,s=e.y;if(null!==this.shadowRoot){let e=this.shadowRoot.getElementById("list");if(e){let i=e.getBoundingClientRect().top,r=e.getBoundingClientRect().bottom,a=e.getBoundingClientRect().left,d=e.getBoundingClientRect().right;if(t<a||t>d||s>r||s<i)return}}this.selectedIds&&this.dispatchEvent(new OrAssetTreeChangeParentEvent(!this._dragDropParentId?void 0:this._dragDropParentId,this.selectedIds))}isExpandable(e){return!!(this._nodes&&this.shadowRoot&&this.shadowRoot.querySelector('[node-asset-id="'+e+'"] > .node-name > [data-expandable]'))||!1}_onDragOver(e){let t=e.currentTarget;t.classList.add("over");let s=t.getAttribute("node-asset-id");s&&this.isExpandable(s)&&!this._expandTimer&&(this._expandTimer=window.setTimeout(()=>{this.expandNode(s)},1e3))}expandNode(e){var t;if(this.shadowRoot&&e&&e===this._dragDropParentId){let s=this._findNodeFromAssetId(e),i=null==(t=this.shadowRoot)?void 0:t.querySelector('[node-asset-id="'+e+'"]');i&&s&&!s.expanded&&this._toggleExpander(i.firstElementChild.firstElementChild,s,!0)}}_onDragEnter(e){let t=e.currentTarget;t.classList.add("over");let s=t.getAttribute("node-asset-id");this._dragDropParentId=s}_onDragLeave(e){e.currentTarget.classList.remove("over"),clearTimeout(this._expandTimer),this._expandTimer=void 0}_treeNodeTemplate(e,t){let s,i=AssetModelUtil.getAssetDescriptor(e.asset.type);if(s=e.allChildrenSelected?"checkbox-multiple-marked":e.someChildrenSelected?"checkbox-multiple-marked-outline":"checkbox-multiple-blank-outline",e.hidden)return html``;let r=!1;return e.asset&&e.notMatchingFilter&&(r=!0),e.expanded&&0===e.children.length&&(e.expanded=!1),this.expandedIds&&-1!==this.expandedIds.findIndex(t=>t===e.asset.id)&&(e.expanded=!0),html`
-            <li class="asset-list-element" ?data-selected="${e.selected}" ?data-expanded="${e.expanded}" @click="${t=>this._onNodeClicked(t,e)}">
-                <div class="in-between-element" node-asset-id="${e.parent?e.parent.asset?e.parent.asset.id:"":void 0}" @dragleave=${e=>{this._onDragLeave(e)}} @dragenter="${e=>this._onDragEnter(e)}" @dragend="${e=>this._onDragEnd(e)}" @dragover="${e=>this._onDragOver(e)}"></div>
-                <div class="node-container draggable" node-asset-id="${e.asset?e.asset.id:""}" draggable="${!this._isReadonly()}" @dragleave=${e=>{this._onDragLeave(e)}} @dragenter="${e=>this._onDragEnter(e)}" @dragstart="${e=>this._onDragStart(e)}" @dragend="${e=>this._onDragEnd(e)}" @dragover="${e=>this._onDragOver(e)}" style="padding-left: ${22*t}px">
-                    <div class="node-name">
-                        <div class="expander" ?data-expandable="${e.expandable}"></div>
-                        ${getAssetDescriptorIconTemplate(i,void 0,void 0,r?"d3d3d3":void 0)}
-                        <span style="color: ${r?"#d3d3d3;":""}">${e.asset.name}</span>
-                        ${this.checkboxes?html`
-                            <span class="mdc-list-item__graphic">
-                                ${e.expandable?html`<div class="mdc-checkbox">
-                                            <or-icon class="mdc-checkbox--parent" icon="${s}"></or-icon>
-                                        </div>`:""}
-                                <div class="mdc-checkbox">
-                                    ${e.selected?html`<or-icon icon="checkbox-marked"></or-icon>`:html`<or-icon icon="checkbox-blank-outline"></or-icon>`}
-                                </div>
-                            </span>`:""}
-                    </div>
-                </div>
-                <ol>
-                    ${!e.children||e.expandable&&!e.expanded?"":e.children.map(e=>this._treeNodeTemplate(e,t+1)).filter(e=>!!e)}
-                </ol>
-            </li>
-        `}static _forEachNodeRecursive(e,t){e&&e.forEach(e=>{t(e),this._forEachNodeRecursive(e.children,t)})}};__decorate([property({type:Array,reflect:!1})],OrAssetTree.prototype,"assets",void 0),__decorate([property({type:Object})],OrAssetTree.prototype,"assetInfos",void 0),__decorate([property({type:Array})],OrAssetTree.prototype,"_assetIdsOverride",void 0),__decorate([property({type:Array})],OrAssetTree.prototype,"rootAssets",void 0),__decorate([property({type:Array})],OrAssetTree.prototype,"rootAssetIds",void 0),__decorate([property({type:Object})],OrAssetTree.prototype,"dataProvider",void 0),__decorate([property({type:Boolean})],OrAssetTree.prototype,"readonly",void 0),__decorate([property({type:Boolean})],OrAssetTree.prototype,"disabled",void 0),__decorate([property({type:Boolean})],OrAssetTree.prototype,"disableSubscribe",void 0),__decorate([property({type:Array})],OrAssetTree.prototype,"selectedIds",void 0),__decorate([property({type:Boolean})],OrAssetTree.prototype,"showDeselectBtn",void 0),__decorate([property({type:Boolean})],OrAssetTree.prototype,"showSortBtn",void 0),__decorate([property({type:Boolean})],OrAssetTree.prototype,"showFilter",void 0),__decorate([property({type:String})],OrAssetTree.prototype,"sortBy",void 0),__decorate([property({type:Boolean})],OrAssetTree.prototype,"expandAllNodes",void 0),__decorate([property({type:Array})],OrAssetTree.prototype,"expandedIds",void 0),__decorate([property({type:Boolean})],OrAssetTree.prototype,"checkboxes",void 0),__decorate([property({attribute:!1})],OrAssetTree.prototype,"_nodes",void 0),__decorate([state()],OrAssetTree.prototype,"_filter",void 0),__decorate([query("#clearIconContainer")],OrAssetTree.prototype,"_clearIconContainer",void 0),__decorate([query("#filterInput")],OrAssetTree.prototype,"_filterInput",void 0),__decorate([state()],OrAssetTree.prototype,"_filterSettingOpen",void 0),__decorate([state()],OrAssetTree.prototype,"_assetTypes",void 0),__decorate([query("#attributeNameFilter")],OrAssetTree.prototype,"_attributeNameFilter",void 0),__decorate([query("#attributeValueFilter")],OrAssetTree.prototype,"_attributeValueFilter",void 0),__decorate([state()],OrAssetTree.prototype,"_assetTypeFilter",void 0),OrAssetTree=OrAssetTree_1=__decorate([customElement("or-asset-tree")],OrAssetTree);export{style,OrAssetTree};
+                        if (canSelectChild) {
+                            childNodes.push(childNode);
+                        }
+                    });
+                    // based on multiple-box already selected, remove or add to array of selected nodes
+                    selectedNodes = (!node.allChildrenSelected)
+                        ? selectedNodes.concat(childNodes)
+                        : selectedNodes.filter(n => !childNodes.map(cn => cn.asset.id).includes(n.asset.id));
+                }
+                else if (deselectOthers) {
+                    this._latestSelected = Object.assign({}, node);
+                    selectedNodes = [node];
+                }
+                else if (select) {
+                    if (index < 0) {
+                        if (evt && evt.shiftKey) {
+                            let hierarchy = [];
+                            (_d = this._nodes) === null || _d === void 0 ? void 0 : _d.forEach((n) => {
+                                hierarchy = hierarchy.concat(this._buildPaths(n));
+                            });
+                            if (this._latestSelected && this._latestSelected.asset && this._latestSelected.asset.id && node.asset && node.asset.id) {
+                                let latestSelectedAssetId = this._latestSelected.asset.id;
+                                let newlySelectedAssetId = node.asset.id;
+                                let previousIndex = hierarchy.findIndex((val) => { return val.includes(latestSelectedAssetId); });
+                                let newIndex = hierarchy.findIndex((val) => { return val.includes(newlySelectedAssetId); });
+                                let startIndex = -1;
+                                let endIndex = -1;
+                                if (previousIndex > newIndex) {
+                                    startIndex = newIndex;
+                                    endIndex = previousIndex;
+                                }
+                                else {
+                                    startIndex = previousIndex;
+                                    endIndex = newIndex;
+                                }
+                                let assetIdsToSelect = hierarchy.slice(startIndex, endIndex + 1);
+                                let foundNodes = [];
+                                assetIdsToSelect.forEach((assetIdToSelect) => {
+                                    let foundNode = this._findNodeFromAssetId(assetIdToSelect);
+                                    if (foundNode) {
+                                        foundNodes.push(foundNode);
+                                    }
+                                });
+                                selectedNodes = [...this.selectedNodes];
+                                selectedNodes = selectedNodes.concat(foundNodes);
+                            }
+                        }
+                        else {
+                            selectedNodes = [...this.selectedNodes];
+                            selectedNodes.push(node);
+                        }
+                        this._latestSelected = Object.assign({}, node);
+                    }
+                }
+                else if (index >= 0) {
+                    selectedNodes = [...this.selectedNodes];
+                    if (selectedNodes.length === 1) {
+                        this._latestSelected = undefined;
+                    }
+                    selectedNodes.splice(index, 1);
+                }
+            }
+            Util.dispatchCancellableEvent(this, new OrAssetTreeRequestSelectionEvent({
+                oldNodes: this.selectedNodes,
+                newNodes: selectedNodes
+            })).then((detail) => {
+                if (detail.allow) {
+                    this.selectedNodes = detail.detail.newNodes;
+                }
+            });
+        }
+    }
+    _onDeselectClicked() {
+        this._onNodeClicked(null, null);
+    }
+    parseFromInputFilter(inputValue) {
+        let searchValue = this._filterInput.value;
+        if (inputValue) {
+            searchValue = inputValue;
+        }
+        let resultingFilter = new OrAssetTreeFilter();
+        if (searchValue) {
+            let asset = searchValue;
+            let matchingResult = searchValue.match(/(attribute\:)(\"[^"]+\")\S*/g);
+            if (matchingResult) {
+                if (matchingResult.length > 0) {
+                    matchingResult.forEach((value, index) => {
+                        asset = asset.replace(value, '');
+                        const startIndex = value.toString().indexOf('attribute:');
+                        const matchingVal = value.toString().substring(startIndex + 'attribute:'.length + 1, value.toString().length - 1);
+                        resultingFilter.attribute.push(matchingVal);
+                        resultingFilter.attributeValue.push('');
+                    });
+                }
+                this._attributeValueFilter.disabled = false;
+            }
+            matchingResult = searchValue.match(/(type\:)\S+/g);
+            if (matchingResult) {
+                if (matchingResult.length > 0) {
+                    matchingResult.forEach((value, index) => {
+                        asset = asset.replace(value, '');
+                        const startIndex = value.toString().indexOf('type:');
+                        const matchingVal = value.toString().substring(startIndex + 'type:'.length);
+                        resultingFilter.assetType.push(matchingVal);
+                    });
+                }
+            }
+            matchingResult = searchValue.match(/(\"[^\"]+\")\:(([^\"\s]+)|(\"[^\"]+\"))/g);
+            if (matchingResult) {
+                if (matchingResult.length > 0) {
+                    matchingResult.forEach((value, index) => {
+                        asset = asset.replace(value, '');
+                        const startIndex = value.toString().indexOf('":');
+                        // Adding 2 to remove the ": matched before
+                        let matchingVal = value.toString().substring(startIndex + 2);
+                        // Starting from position 1 to remove first "
+                        const matchingName = value.toString().substring(1, startIndex);
+                        if (matchingVal[0] === '"' && matchingVal[matchingVal.length - 1] === '"') {
+                            matchingVal = matchingVal.substring(1, matchingVal.length - 1);
+                        }
+                        resultingFilter.attribute.push(matchingName);
+                        resultingFilter.attributeValue.push(matchingVal);
+                    });
+                }
+            }
+            resultingFilter.asset = (asset && asset.length > 0) ? asset.trim() : undefined;
+        }
+        return resultingFilter;
+    }
+    formatFilter(newFilter) {
+        let searchInput = newFilter.asset ? newFilter.asset : '';
+        let prefix = newFilter.asset ? ' ' : '';
+        let handledAttributeForValues = [];
+        if (newFilter.assetType.length > 0) {
+            newFilter.assetType.forEach((assetType) => {
+                searchInput += prefix + 'type:' + assetType;
+                prefix = ' ';
+            });
+        }
+        if (newFilter.attribute.length > 0 && newFilter.attributeValue.length > 0) {
+            newFilter.attributeValue.forEach((attributeValue, index) => {
+                handledAttributeForValues.push(newFilter.attribute[index]);
+                searchInput += prefix + '"' + newFilter.attribute[index] + '":' + attributeValue;
+                prefix = ' ';
+            });
+        }
+        if (newFilter.attribute.length > 0 && newFilter.attributeValue.length === 0) {
+            newFilter.attribute.forEach((attributeName) => {
+                if (!handledAttributeForValues.includes(attributeName)) {
+                    searchInput += prefix + 'attribute:"' + attributeName + '"';
+                    prefix = ' ';
+                }
+            });
+        }
+        return searchInput;
+    }
+    _shouldEnableAttrTypeEvent(e) {
+        let value;
+        if (e.composedPath()) {
+            value = (e.composedPath()[0].value) || undefined;
+        }
+        this._shouldEnableAttrType(value);
+    }
+    _shouldEnableAttrType(value) {
+        if (value) {
+            this._attributeValueFilter.disabled = false;
+        }
+        else {
+            this._attributeValueFilter.disabled = true;
+        }
+    }
+    applySettingFields(filter) {
+        if (this._assetTypeFilter) {
+            filter.assetType = [this._assetTypeFilter];
+        }
+        else {
+            filter.assetType = [];
+        }
+        if (this._attributeNameFilter.value) {
+            filter.attribute = [this._attributeNameFilter.value];
+        }
+        else {
+            filter.attribute = [];
+        }
+        if (this._attributeNameFilter.value && this._attributeValueFilter.value) {
+            let attributeValueValue = this._attributeValueFilter.value;
+            if (attributeValueValue.includes(' ')) {
+                attributeValueValue = '"' + attributeValueValue + '"';
+            }
+            filter.attributeValue = [attributeValueValue];
+        }
+        else {
+            filter.attributeValue = [];
+        }
+        return filter;
+    }
+    _filterFromSettings() {
+        let filterFromSearchInput = this.parseFromInputFilter();
+        let filterFromSearchInputWithSettings = this.applySettingFields(filterFromSearchInput);
+        this._filter = filterFromSearchInputWithSettings;
+        let newFilterForSearchInput = this.formatFilter(this._filter);
+        this._filterInput.value = newFilterForSearchInput;
+        this._filterSettingOpen = false;
+        this._doFiltering();
+    }
+    _onFilterInputEvent(e) {
+        let value;
+        if (e.composedPath()) {
+            value = (e.composedPath()[0].value) || undefined;
+        }
+        this._onFilterInput(value, false);
+    }
+    _onFilterInput(newValue, force) {
+        let currentFilter = this.parseFromInputFilter(newValue);
+        if (Util.objectsEqual(this._filter, currentFilter, true)) {
+            return;
+        }
+        this._filter = currentFilter;
+        if (this._searchInputTimer) {
+            clearTimeout(this._searchInputTimer);
+        }
+        if (!force) {
+            this._searchInputTimer = window.setTimeout(() => {
+                this._doFiltering();
+            }, 350);
+        }
+        else {
+            this._doFiltering();
+        }
+    }
+    _doFiltering() {
+        return __awaiter(this, void 0, void 0, function* () {
+            // Clear timeout in case we got here from value change
+            if (this._searchInputTimer) {
+                clearTimeout(this._searchInputTimer);
+                this._searchInputTimer = undefined;
+            }
+            if (this.isConnected && this._nodes) {
+                if (!this._filter.asset && !this._filter.attribute && !this._filter.assetType && !this._filter.attributeValue) {
+                    // Clear the filter
+                    OrAssetTree_1._forEachNodeRecursive(this._nodes, (node) => {
+                        node.notMatchingFilter = false;
+                        node.hidden = false;
+                    });
+                    this.requestUpdate("_nodes");
+                    return;
+                }
+                this.disabled = true;
+                // Use a matcher function - this can be altered independent of the filtering logic
+                // Maybe we should just filter in memory for basic matches like name
+                if (this._filter.asset || this._filter.assetType || this._filter.attribute) {
+                    let queryRequired = false;
+                    if (this._filter.attribute) {
+                        queryRequired = true;
+                    }
+                    this.getMatcher(queryRequired).then((matcher) => {
+                        if (this._nodes) {
+                            this._nodes.forEach((node) => {
+                                this.filterTreeNode(node, matcher);
+                            });
+                            this.disabled = false;
+                        }
+                    });
+                }
+            }
+        });
+    }
+    getMatcher(requireQuery) {
+        if (requireQuery) {
+            return this.getMatcherFromQuery();
+        }
+        else {
+            return this.getSimpleNameMatcher();
+        }
+    }
+    getSimpleNameMatcher() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return (asset) => {
+                let match = true;
+                if (this._filter.asset) {
+                    match = match && asset.name.toLowerCase().includes(this._filter.asset.toLowerCase());
+                }
+                if (this._filter.assetType.length > 0) {
+                    match = match && (asset.type.toLowerCase() === this._filter.assetType[0].toLowerCase());
+                }
+                return match;
+            };
+        });
+    }
+    getMatcherFromQuery() {
+        return __awaiter(this, void 0, void 0, function* () {
+            let assetCond = undefined;
+            let attributeCond = undefined;
+            let assetTypeCond = undefined;
+            if (this._filter.asset) {
+                assetCond = [{
+                        predicateType: "string",
+                        match: "CONTAINS" /* AssetQueryMatch.CONTAINS */,
+                        value: this._filter.asset,
+                        caseSensitive: false
+                    }];
+            }
+            if (this._filter.assetType.length > 0) {
+                assetTypeCond = this._filter.assetType;
+            }
+            if (this._filter.attribute.length > 0) {
+                attributeCond = {
+                    operator: "AND" /* LogicGroupOperator.AND */,
+                    items: this._filter.attribute.map((attributeName) => {
+                        return {
+                            name: {
+                                predicateType: "string",
+                                match: "EXACT" /* AssetQueryMatch.EXACT */,
+                                value: Util.sentenceCaseToCamelCase(attributeName),
+                                caseSensitive: false
+                            }
+                        };
+                    })
+                };
+            }
+            const query = {
+                select: {
+                    attributes: attributeCond ? undefined : []
+                },
+                names: assetCond,
+                types: assetTypeCond,
+                attributes: attributeCond
+            };
+            let response;
+            let foundAssetIds;
+            try {
+                response = yield manager.rest.api.AssetResource.queryAssets(query);
+                foundAssetIds = response.data.map((asset) => asset.id);
+            }
+            catch (e) {
+                this._filter.assetType.forEach((assetT) => {
+                    if (this._assetTypes.findIndex((assetD) => { return assetD.name === assetT; }) === -1) {
+                        showSnackbar(undefined, "filter.assetTypeDoesNotExist", "dismiss");
+                    }
+                });
+                foundAssetIds = [];
+            }
+            return (asset) => {
+                let attrValueCheck = true;
+                if (this._filter.attribute.length > 0 && this._filter.attributeValue.length > 0 && foundAssetIds.includes(asset.id)) {
+                    let attributeVal = [];
+                    this._filter.attributeValue.forEach((attrVal, index) => {
+                        if (attrVal.length > 0) {
+                            attributeVal.push([this._filter.attribute[index], attrVal]);
+                        }
+                    });
+                    let matchingAsset = response.data.find((a) => a.id === asset.id);
+                    if (matchingAsset && matchingAsset.attributes) {
+                        for (let attributeValIndex = 0; attributeValIndex < attributeVal.length; attributeValIndex++) {
+                            let currentAttributeVal = attributeVal[attributeValIndex];
+                            let atLeastOneAttributeMatchValue = false;
+                            Object.keys(matchingAsset.attributes).forEach((key) => {
+                                let attr = matchingAsset.attributes[key];
+                                // attr.value check to avoid to compare with empty/non existing value
+                                if (attr.name.toLowerCase() === currentAttributeVal[0].toLowerCase() && attr.value) {
+                                    switch (attr.type) {
+                                        case "number":
+                                        case "integer":
+                                        case "long":
+                                        case "bigInteger":
+                                        case "bigNumber":
+                                        case "positiveInteger":
+                                        case "negativeInteger":
+                                        case "positiveNumber":
+                                        case "negativeNumber":
+                                            let value = currentAttributeVal[1];
+                                            if (currentAttributeVal[1].startsWith('=') && currentAttributeVal[1][1] !== '=') {
+                                                value = '=' + value;
+                                            }
+                                            if (/^[0-9]+$/.test(currentAttributeVal[1])) {
+                                                value = '==' + value;
+                                            }
+                                            const resultNumberEval = eval(attr.value + value);
+                                            if (resultNumberEval) {
+                                                atLeastOneAttributeMatchValue = true;
+                                            }
+                                            break;
+                                        case "text":
+                                            if (attr.value) {
+                                                let unparsedValue = currentAttributeVal[1];
+                                                const multicharString = '*';
+                                                let parsedValue = unparsedValue.replace(multicharString, '.*');
+                                                parsedValue = parsedValue.replace(/"/g, '');
+                                                let valueFromAttribute = attr.value;
+                                                if (valueFromAttribute.toLowerCase().indexOf(parsedValue.toLowerCase()) != -1) {
+                                                    atLeastOneAttributeMatchValue = true;
+                                                }
+                                            }
+                                            break;
+                                    }
+                                }
+                            });
+                            attrValueCheck = atLeastOneAttributeMatchValue;
+                        }
+                    }
+                }
+                return foundAssetIds.includes(asset.id) && attrValueCheck;
+            };
+        });
+    }
+    isAnyFilter() {
+        return this._filter.asset !== undefined || this._filter.assetType.length > 0 || this._filter.attribute.length > 0;
+    }
+    filterTreeNode(currentNode, matcher, parentMatching = false) {
+        let nodeOrDescendantMatches = matcher(currentNode.asset);
+        currentNode.notMatchingFilter = !nodeOrDescendantMatches;
+        const childOrDescendantMatches = currentNode.children.map((childNode) => {
+            return this.filterTreeNode(childNode, matcher, nodeOrDescendantMatches);
+        });
+        let childMatches = childOrDescendantMatches.some(m => m);
+        nodeOrDescendantMatches = nodeOrDescendantMatches || childMatches;
+        currentNode.expanded = childMatches && currentNode.children.length > 0 && this.isAnyFilter();
+        currentNode.hidden = !nodeOrDescendantMatches && !parentMatching;
+        return nodeOrDescendantMatches;
+    }
+    _onCopyClicked() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this._selectedNodes.length !== 1) {
+                return;
+            }
+            try {
+                // Need to fully load the source asset
+                const response = yield manager.rest.api.AssetResource.get(this._selectedNodes[0].asset.id);
+                if (!response.data) {
+                    throw new Error("API returned an invalid response when retrieving the source asset");
+                }
+                const asset = JSON.parse(JSON.stringify(response.data));
+                asset.name += " copy";
+                delete asset.id;
+                delete asset.path;
+                delete asset.createdOn;
+                delete asset.version;
+                Util.dispatchCancellableEvent(this, new OrAssetTreeRequestAddEvent({
+                    sourceAsset: this._selectedNodes[0].asset,
+                    asset: asset
+                })).then((detail) => {
+                    if (detail.allow) {
+                        this.dispatchEvent(new OrAssetTreeAddEvent(detail.detail));
+                    }
+                });
+            }
+            catch (e) {
+                console.error("Failed to copy asset", e);
+                showErrorDialog("Failed to copy asset");
+            }
+        });
+    }
+    _onAddClicked() {
+        const types = this._getAllowedChildTypes(this._selectedNodes[0]);
+        const agentTypes = types.filter((t) => t.descriptorType === "agent");
+        const assetTypes = types.filter((t) => t.descriptorType === "asset");
+        const parent = this._selectedNodes && this._selectedNodes.length === 1 ? this._selectedNodes[0].asset : undefined;
+        let dialog;
+        const onAddChanged = (ev) => {
+            const nameValid = !!ev.detail.name && ev.detail.name.trim().length > 0 && ev.detail.name.trim().length < 1024;
+            const addBtn = dialog.shadowRoot.getElementById("add-btn");
+            addBtn.disabled = !ev.detail.descriptor || !nameValid;
+        };
+        dialog = showDialog(new OrMwcDialog()
+            .setHeading(i18next.t("addAsset"))
+            .setContent(html `
+                    <or-add-asset-dialog id="add-panel" .config="${this.config}" .agentTypes="${agentTypes}" .assetTypes="${assetTypes}" .parent="${parent}" @or-add-asset-changed="${onAddChanged}"></or-add-asset-dialog>
+                `)
+            .setActions([
+            {
+                actionName: "cancel",
+                content: "cancel"
+            },
+            {
+                actionName: "add",
+                content: html `<or-mwc-input id="add-btn" class="button" .type="${InputType.BUTTON}" label="add" disabled></or-mwc-input>`,
+                action: () => {
+                    const addAssetDialog = dialog.shadowRoot.getElementById("add-panel");
+                    const descriptor = addAssetDialog.selectedType;
+                    const selectedOptionalAttributes = addAssetDialog.selectedAttributes;
+                    const name = addAssetDialog.name.trim();
+                    const parent = addAssetDialog.parent;
+                    if (!descriptor) {
+                        return;
+                    }
+                    const asset = {
+                        name: name,
+                        type: descriptor.name,
+                        realm: manager.displayRealm
+                    };
+                    // Construct attributes
+                    const assetTypeInfo = AssetModelUtil.getAssetTypeInfo(descriptor.name);
+                    if (!assetTypeInfo) {
+                        return;
+                    }
+                    if (assetTypeInfo.attributeDescriptors) {
+                        asset.attributes = {};
+                        assetTypeInfo.attributeDescriptors
+                            .filter((attributeDescriptor) => !attributeDescriptor.optional)
+                            .forEach((attributeDescriptor) => {
+                            asset.attributes[attributeDescriptor.name] = {
+                                name: attributeDescriptor.name,
+                                type: attributeDescriptor.type,
+                                meta: attributeDescriptor.meta ? Object.assign({}, attributeDescriptor.meta) : undefined
+                            };
+                        });
+                    }
+                    if (selectedOptionalAttributes) {
+                        selectedOptionalAttributes === null || selectedOptionalAttributes === void 0 ? void 0 : selectedOptionalAttributes.forEach(attribute => {
+                            asset.attributes[attribute.name] = {
+                                name: attribute.name,
+                                type: attribute.type,
+                                meta: attribute.meta ? Object.assign({}, attribute.meta) : undefined
+                            };
+                        });
+                    }
+                    if (this.selectedIds) {
+                        asset.parentId = parent ? parent.id : undefined;
+                    }
+                    const detail = {
+                        asset: asset
+                    };
+                    Util.dispatchCancellableEvent(this, new OrAssetTreeRequestAddEvent(detail))
+                        .then((detail) => {
+                        if (detail.allow) {
+                            this.dispatchEvent(new OrAssetTreeAddEvent(detail.detail));
+                        }
+                    });
+                }
+            }
+        ])
+            .setStyles(html `
+                    <style>
+                        .mdc-dialog__content {
+                            padding: 0 !important;
+                        }
+                    </style>
+                `)
+            .setDismissAction(null));
+    }
+    _gatewayDescendantIsSelected() {
+        return this._selectedNodes.some((n) => {
+            var _a;
+            let parentNode = n === null || n === void 0 ? void 0 : n.parent;
+            while (parentNode) {
+                if (((_a = parentNode.asset) === null || _a === void 0 ? void 0 : _a.type) === "GatewayAsset" /* WellknownAssets.GATEWAYASSET */) {
+                    return true;
+                }
+                parentNode = parentNode.parent;
+            }
+            return false;
+        });
+    }
+    _onDeleteClicked() {
+        if (this._selectedNodes.length > 0) {
+            Util.dispatchCancellableEvent(this, new OrAssetTreeRequestDeleteEvent(this._selectedNodes))
+                .then((detail) => {
+                if (detail.allow) {
+                    this._doDelete();
+                }
+            });
+        }
+    }
+    _onSortClicked(sortBy) {
+        this.sortBy = sortBy;
+    }
+    _doDelete() {
+        if (!this._selectedNodes || this._selectedNodes.length === 0) {
+            return;
+        }
+        const uniqueAssets = new Set();
+        // Add gateway nodes first
+        const nodes = this._selectedNodes.filter((node) => {
+            var _a;
+            if (((_a = node.asset) === null || _a === void 0 ? void 0 : _a.type) === "GatewayAsset" /* WellknownAssets.GATEWAYASSET */) {
+                // Add gateway straight to the unique list and don't recursively select children
+                uniqueAssets.add(node.asset);
+                return false;
+            }
+            return true;
+        });
+        // Iterate through descendants of selected nodes that aren't gateways
+        // and add to delete list (don't recurse descendant gateway nodes)
+        OrAssetTree_1._forEachNodeRecursive(nodes, (node) => {
+            var _a;
+            // Check no ancestor is of type gateway
+            let ancestor = node.parent;
+            let okToAdd = true;
+            while (ancestor && okToAdd) {
+                const ancestorType = (_a = ancestor === null || ancestor === void 0 ? void 0 : ancestor.asset) === null || _a === void 0 ? void 0 : _a.type;
+                if (ancestorType === "GatewayAsset" /* WellknownAssets.GATEWAYASSET */) {
+                    okToAdd = false;
+                }
+                ancestor = ancestor.parent;
+            }
+            if (okToAdd) {
+                uniqueAssets.add(node.asset);
+            }
+        });
+        const assetIds = Array.from(uniqueAssets).map(asset => asset.id);
+        const assetNames = Array.from(uniqueAssets).map(asset => asset.name);
+        const doDelete = () => {
+            this.disabled = true;
+            manager.rest.api.AssetResource.delete({
+                assetId: assetIds
+            }, {
+                paramsSerializer: params => Qs.stringify(params, { arrayFormat: 'repeat' })
+            }).then((response) => {
+                // Clear nodes to re-fetch them
+                this.refresh();
+                this.disabled = false;
+                if (response.status !== 204) {
+                    showErrorDialog(i18next.t("deleteAssetsFailed"));
+                }
+            }).catch((reason) => {
+                this.refresh();
+                this.disabled = false;
+                showErrorDialog(i18next.t("deleteAssetsFailed"));
+            });
+        };
+        // Confirm deletion request
+        showOkCancelDialog(i18next.t("deleteAssets"), i18next.t("deleteAssetsConfirm", { assetNames: assetNames.join(",\n- ") }), i18next.t("delete"))
+            .then((ok) => {
+            if (ok) {
+                doDelete();
+            }
+        });
+    }
+    _canAdd() {
+        var _a;
+        if (this._selectedNodes && this._selectedNodes.length > 1) {
+            return false;
+        }
+        const selectedNode = this._selectedNodes ? this._selectedNodes[0] : undefined;
+        if (((_a = selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.asset) === null || _a === void 0 ? void 0 : _a.type) === "GatewayAsset" /* WellknownAssets.GATEWAYASSET */) {
+            // Cannot add to a gateway asset
+            return false;
+        }
+        if (this._gatewayDescendantIsSelected()) {
+            // Cannot add to a descendant of a gateway asset
+            return false;
+        }
+        return this._getAllowedChildTypes(selectedNode).length > 0;
+    }
+    _getAllowedChildTypes(selectedNode) {
+        let includedAssetTypes;
+        let excludedAssetTypes;
+        if (this.config && this.config.add) {
+            if (this.config.add.typesProvider) {
+                const allowedTypes = this.config.add.typesProvider(selectedNode);
+                if (allowedTypes) {
+                    return allowedTypes;
+                }
+            }
+            if (this.config.add.typesParent) {
+                let config;
+                if (!selectedNode && this.config.add.typesParent.none) {
+                    config = this.config.add.typesParent.none;
+                }
+                else if (selectedNode && this.config.add.typesParent.assetTypes) {
+                    config = this.config.add.typesParent.assetTypes[selectedNode.asset.type];
+                }
+                if (!config) {
+                    config = this.config.add.typesParent.default;
+                }
+                if (config) {
+                    includedAssetTypes = config.include;
+                    excludedAssetTypes = config.exclude || [];
+                }
+            }
+        }
+        return AssetModelUtil.getAssetDescriptors()
+            .filter((descriptor) => (!includedAssetTypes || includedAssetTypes.some((inc) => Util.stringMatch(inc, descriptor.name)))
+            && (!excludedAssetTypes || !excludedAssetTypes.some((exc) => Util.stringMatch(exc, descriptor.name))));
+    }
+    _getSortFunction() {
+        switch (this.sortBy) {
+            case "createdOn":
+                return Util.sortByNumber((node) => node.asset[this.sortBy]);
+            default:
+                return Util.sortByString((node) => node.asset[this.sortBy]);
+        }
+    }
+    _loadAssets() {
+        const sortFunction = this._getSortFunction();
+        if (!this.assets) {
+            if (!this._connected) {
+                return;
+            }
+            if (this._loading) {
+                return;
+            }
+            this._loading = true;
+            if (this.dataProvider) {
+                this.dataProvider().then(assets => {
+                    this._loading = false;
+                    this._buildTreeNodes(assets, sortFunction);
+                });
+            }
+            else {
+                const query = {
+                    realm: {
+                        name: manager.displayRealm
+                    },
+                    select: {
+                        attributes: []
+                    }
+                };
+                if (this.assetIds) {
+                    query.ids = this.assetIds;
+                    query.recursive = true;
+                }
+                else if (this.rootAssets) {
+                    query.ids = this.rootAssets.map((asset) => asset.id);
+                    query.recursive = true;
+                }
+                else if (this.rootAssetIds) {
+                    query.ids = this.rootAssetIds;
+                    query.recursive = true;
+                }
+                this._sendEventWithReply({
+                    eventType: "read-assets",
+                    assetQuery: query
+                }).then((ev) => {
+                    this._loading = false;
+                    this._buildTreeNodes(ev.assets, sortFunction);
+                });
+            }
+        }
+        else {
+            this._loading = false;
+            this._buildTreeNodes(this.assets, sortFunction);
+        }
+    }
+    /* Subscribe mixin overrides */
+    _addEventSubscriptions() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.disableSubscribe) {
+                // Subscribe to asset events for all assets in the realm
+                this._subscriptionIds = [yield manager.getEventProvider().subscribeAssetEvents(undefined, false, (event) => this._onEvent(event))];
+            }
+        });
+    }
+    onEventsConnect() {
+        this._connected = true;
+        this._loadAssets();
+    }
+    onEventsDisconnect() {
+        this._connected = false;
+        this._nodes = undefined;
+    }
+    getNodes() {
+        return this._nodes || [];
+    }
+    _onEvent(event) {
+        if (event.eventType === "assets") {
+            const assetsEvent = event;
+            this._buildTreeNodes(assetsEvent.assets, this._getSortFunction());
+            return;
+        }
+        if (event.eventType === "asset") {
+            const assetEvent = event;
+            if (assetEvent.cause === "READ" /* AssetEventCause.READ */) {
+                return;
+            }
+            if (assetEvent.cause === "UPDATE" /* AssetEventCause.UPDATE */
+                && !(assetEvent.updatedProperties.includes("name")
+                    || assetEvent.updatedProperties.includes("parentId"))) {
+                return;
+            }
+            // Extract all assets, update and rebuild tree
+            const assets = [];
+            if (assetEvent.cause !== "DELETE" /* AssetEventCause.DELETE */) {
+                assets.push(assetEvent.asset);
+            }
+            if (this._nodes) {
+                OrAssetTree_1._forEachNodeRecursive(this._nodes, (node) => {
+                    if (node.asset.id !== assetEvent.asset.id) {
+                        assets.push(node.asset);
+                    }
+                });
+            }
+            // In case of filter already active, do not override the actual state of assetTree
+            this._buildTreeNodes(assets, this._getSortFunction());
+            if (this._filterInput.value) {
+                this._doFiltering();
+            }
+            this.dispatchEvent(new OrAssetTreeAssetEvent(assetEvent));
+        }
+    }
+    _buildTreeNodes(assets, sortFunction) {
+        if (!assets || assets.length === 0) {
+            this._nodes = [];
+        }
+        else {
+            if (manager.isRestrictedUser()) {
+                // Restricted users might have access to children, without access to the parent asset.
+                // Any assets whose parents aren't accessible need to be 're-parented'.
+                assets.forEach(asset => {
+                    if (!!asset.parentId && !!asset.path && assets.find(a => a.id === asset.parentId) === undefined) {
+                        let reparentId = null;
+                        // Loop through ALL assets in the path, and check if they're present in the (restricted) asset list
+                        // Once found, update its parent ID without replacing the original (that's why it's named 'reparentId').
+                        for (let i = 0; i < asset.path.length; i++) {
+                            const ancestorId = asset.path[i];
+                            if (asset.id !== ancestorId && assets.find(a => a.id === ancestorId) !== undefined) {
+                                reparentId = ancestorId;
+                                // break; No break statement here, as when an asset further down the tree has been found, it should overwrite the parent ID.
+                            }
+                        }
+                        asset.reparentId = reparentId;
+                    }
+                });
+            }
+            let rootAssetIds;
+            if (this.rootAssetIds) {
+                rootAssetIds = this.rootAssetIds;
+            }
+            else if (this.rootAssets) {
+                rootAssetIds = this.rootAssets.map((ra) => ra.id);
+            }
+            let rootAssets;
+            if (rootAssetIds) {
+                rootAssets = assets.filter((asset) => rootAssetIds.indexOf(asset.id) >= 0 || asset.reparentId === null).map((asset) => {
+                    return {
+                        asset: asset
+                    };
+                });
+            }
+            else {
+                rootAssets = assets.filter((asset) => !asset.parentId || asset.reparentId === null).map((asset) => {
+                    return {
+                        asset: asset
+                    };
+                });
+            }
+            this.assetsChildren = {};
+            assets.forEach((asset) => {
+                if (asset.parentId) {
+                    if (!this.assetsChildren[asset.parentId]) {
+                        this.assetsChildren[asset.parentId] = [];
+                    }
+                    this.assetsChildren[asset.parentId].push({
+                        asset: asset
+                    });
+                }
+                if (asset.reparentId) {
+                    if (!this.assetsChildren[asset.reparentId]) {
+                        this.assetsChildren[asset.reparentId] = [];
+                    }
+                    this.assetsChildren[asset.reparentId].push({
+                        asset: asset
+                    });
+                }
+            });
+            rootAssets.sort(sortFunction);
+            rootAssets.forEach((rootAsset) => this._buildChildTreeNodes(rootAsset, assets, sortFunction));
+            this._nodes = rootAssets;
+            const newExpanded = [];
+            this._expandedNodes.forEach(expandedNode => {
+                OrAssetTree_1._forEachNodeRecursive(this._nodes, n => {
+                    if (n.asset && expandedNode && expandedNode.asset && n.asset.id === expandedNode.asset.id) {
+                        n.expanded = true;
+                        newExpanded.push(n);
+                        // Expand every ancestor
+                        let parent = n.parent;
+                        while (parent) {
+                            parent.expanded = true;
+                            parent = parent.parent;
+                            if (newExpanded.indexOf(parent) < 0) {
+                                newExpanded.push(parent);
+                            }
+                        }
+                    }
+                });
+            });
+            this._expandedNodes = newExpanded;
+        }
+        if (this.selectedIds && this.selectedIds.length > 0) {
+            this._updateSelectedNodes();
+        }
+        if (this.expandAllNodes) {
+            OrAssetTree_1._forEachNodeRecursive(this._nodes, (node) => {
+                if (node.children && node.children.length > 0) {
+                    node.expanded = true;
+                }
+            });
+        }
+    }
+    _buildChildTreeNodes(treeNode, assets, sortFunction) {
+        let children = this.assetsChildren[treeNode.asset.id];
+        treeNode.children = children ? children.sort(sortFunction) : [];
+        if (treeNode.children.length > 0) {
+            treeNode.expandable = true;
+        }
+        treeNode.children.forEach((childNode) => {
+            childNode.parent = treeNode;
+            this._buildChildTreeNodes(childNode, assets, sortFunction);
+        });
+    }
+    _onDragStart(ev) {
+        this._dragDropParentId = null;
+        let currentElement = ev.currentTarget;
+        let selectedId = currentElement.getAttribute('node-asset-id');
+        if (!this.selectedIds) {
+            this.selectedIds = [];
+        }
+        if (selectedId && this.selectedIds && !this.selectedIds.includes(selectedId)) {
+            if (!ev.ctrlKey && !ev.shiftKey) {
+                this.selectedIds = [];
+            }
+            this.selectedIds.push(selectedId);
+        }
+    }
+    _onDragEnd(ev) {
+        const dragEndTargetX = ev.x;
+        const dragEndTargetY = ev.y;
+        if (this.shadowRoot !== null) {
+            let listElement = this.shadowRoot.getElementById('list');
+            if (listElement) {
+                const topY = listElement.getBoundingClientRect().top;
+                const bottomY = listElement.getBoundingClientRect().bottom;
+                const leftX = listElement.getBoundingClientRect().left;
+                const rightX = listElement.getBoundingClientRect().right;
+                if (dragEndTargetX < leftX || dragEndTargetX > rightX || dragEndTargetY > bottomY || dragEndTargetY < topY) {
+                    return;
+                }
+            }
+        }
+        if (this.selectedIds) {
+            this.dispatchEvent(new OrAssetTreeChangeParentEvent(!this._dragDropParentId ? undefined : this._dragDropParentId, this.selectedIds));
+        }
+    }
+    isExpandable(assetId) {
+        if (this._nodes) {
+            if (this.shadowRoot) {
+                let elem = this.shadowRoot.querySelector('[node-asset-id="' + assetId + '"] > .node-name > [data-expandable]');
+                if (elem) {
+                    return true;
+                }
+                else {
+                    return false;
+                }
+            }
+        }
+        return false;
+    }
+    _onDragOver(ev) {
+        let currentElement = ev.currentTarget;
+        currentElement.classList.add('over');
+        let assetId = currentElement.getAttribute('node-asset-id');
+        if (assetId && this.isExpandable(assetId) && !this._expandTimer) {
+            this._expandTimer = window.setTimeout(() => {
+                this.expandNode(assetId);
+            }, 1000);
+        }
+    }
+    expandNode(assetId) {
+        var _a;
+        if (this.shadowRoot && assetId && assetId === this._dragDropParentId) {
+            const node = this._findNodeFromAssetId(assetId);
+            let elem = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('[node-asset-id="' + assetId + '"]');
+            if (elem && node && !node.expanded) {
+                this._toggleExpander(elem.firstElementChild.firstElementChild, node, true);
+            }
+        }
+    }
+    _onDragEnter(ev) {
+        let currentElement = ev.currentTarget;
+        currentElement.classList.add('over');
+        let enteredId = currentElement.getAttribute('node-asset-id');
+        this._dragDropParentId = enteredId;
+    }
+    _onDragLeave(ev) {
+        let currentElement = ev.currentTarget;
+        currentElement.classList.remove('over');
+        clearTimeout(this._expandTimer);
+        this._expandTimer = undefined;
+    }
+    _treeNodeTemplate(treeNode, level) {
+        const descriptor = AssetModelUtil.getAssetDescriptor(treeNode.asset.type);
+        let parentCheckboxIcon;
+        if (treeNode.allChildrenSelected) {
+            parentCheckboxIcon = 'checkbox-multiple-marked';
+        }
+        else if (treeNode.someChildrenSelected) {
+            parentCheckboxIcon = 'checkbox-multiple-marked-outline';
+        }
+        else {
+            parentCheckboxIcon = 'checkbox-multiple-blank-outline';
+        }
+        if (treeNode.hidden) {
+            return html ``;
+        }
+        let filterColorForNonMatchingAsset = false;
+        if (treeNode.asset && treeNode.notMatchingFilter) {
+            filterColorForNonMatchingAsset = true;
+        }
+        if (treeNode.expanded && treeNode.children.length === 0) {
+            treeNode.expanded = false;
+        }
+        if (this.expandedIds && this.expandedIds.findIndex((expandId) => { return expandId === treeNode.asset.id; }) !== -1) {
+            treeNode.expanded = true;
+        }
+        return html `
+            <li class="asset-list-element" ?data-selected="${treeNode.selected}" ?data-expanded="${treeNode.expanded}" @click="${(evt) => this._onNodeClicked(evt, treeNode)}">
+                <div class="in-between-element" node-asset-id="${treeNode.parent ? (treeNode.parent.asset ? treeNode.parent.asset.id : '') : undefined}" @dragleave=${(ev) => { this._onDragLeave(ev); }} @dragenter="${(ev) => this._onDragEnter(ev)}" @dragend="${(ev) => this._onDragEnd(ev)}" @dragover="${(ev) => this._onDragOver(ev)}"></div>
+                <div class="node-container draggable" node-asset-id="${treeNode.asset ? treeNode.asset.id : ''}" draggable="${!this._isReadonly()}" @dragleave=${(ev) => { this._onDragLeave(ev); }} @dragenter="${(ev) => this._onDragEnter(ev)}" @dragstart="${(ev) => this._onDragStart(ev)}" @dragend="${(ev) => this._onDragEnd(ev)}" @dragover="${(ev) => this._onDragOver(ev)}" style="padding-left: ${level * 22}px">
+                    <div class="node-name">
+                        <div class="expander" ?data-expandable="${treeNode.expandable}"></div>
+                        ${getAssetDescriptorIconTemplate(descriptor, undefined, undefined, (filterColorForNonMatchingAsset ? 'd3d3d3' : undefined))}
+                        <span style="color: ${filterColorForNonMatchingAsset ? '#d3d3d3;' : ''}">${treeNode.asset.name}</span>
+                        ${this.checkboxes ? html `
+                            <span class="mdc-list-item__graphic">
+                                ${treeNode.expandable
+            ? html `<div class="mdc-checkbox">
+                                            <or-icon class="mdc-checkbox--parent" icon="${parentCheckboxIcon}"></or-icon>
+                                        </div>`
+            : ``}
+                                <div class="mdc-checkbox">
+                                    ${treeNode.selected ? html `<or-icon icon="checkbox-marked"></or-icon>` : html `<or-icon icon="checkbox-blank-outline"></or-icon>`}
+                                </div>
+                            </span>`
+            : ``}
+                    </div>
+                </div>
+                <ol>
+                    ${!treeNode.children || (treeNode.expandable && !treeNode.expanded) ? `` : treeNode.children.map((childNode) => this._treeNodeTemplate(childNode, level + 1)).filter(t => !!t)}
+                </ol>
+            </li>
+        `;
+    }
+    static _forEachNodeRecursive(nodes, fn) {
+        if (!nodes) {
+            return;
+        }
+        nodes.forEach((node) => {
+            fn(node);
+            this._forEachNodeRecursive(node.children, fn);
+        });
+    }
+};
+__decorate([
+    property({ type: Array, reflect: false })
+], OrAssetTree.prototype, "assets", void 0);
+__decorate([
+    property({ type: Object })
+], OrAssetTree.prototype, "assetInfos", void 0);
+__decorate([
+    property({ type: Array })
+], OrAssetTree.prototype, "_assetIdsOverride", void 0);
+__decorate([
+    property({ type: Array })
+], OrAssetTree.prototype, "rootAssets", void 0);
+__decorate([
+    property({ type: Array })
+], OrAssetTree.prototype, "rootAssetIds", void 0);
+__decorate([
+    property({ type: Object })
+], OrAssetTree.prototype, "dataProvider", void 0);
+__decorate([
+    property({ type: Boolean })
+], OrAssetTree.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean })
+], OrAssetTree.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], OrAssetTree.prototype, "disableSubscribe", void 0);
+__decorate([
+    property({ type: Array })
+], OrAssetTree.prototype, "selectedIds", void 0);
+__decorate([
+    property({ type: Boolean })
+], OrAssetTree.prototype, "showDeselectBtn", void 0);
+__decorate([
+    property({ type: Boolean })
+], OrAssetTree.prototype, "showSortBtn", void 0);
+__decorate([
+    property({ type: Boolean })
+], OrAssetTree.prototype, "showFilter", void 0);
+__decorate([
+    property({ type: String })
+], OrAssetTree.prototype, "sortBy", void 0);
+__decorate([
+    property({ type: Boolean })
+], OrAssetTree.prototype, "expandAllNodes", void 0);
+__decorate([
+    property({ type: Array })
+], OrAssetTree.prototype, "expandedIds", void 0);
+__decorate([
+    property({ type: Boolean })
+], OrAssetTree.prototype, "checkboxes", void 0);
+__decorate([
+    property({ attribute: false })
+], OrAssetTree.prototype, "_nodes", void 0);
+__decorate([
+    state()
+], OrAssetTree.prototype, "_filter", void 0);
+__decorate([
+    query("#clearIconContainer")
+], OrAssetTree.prototype, "_clearIconContainer", void 0);
+__decorate([
+    query("#filterInput")
+], OrAssetTree.prototype, "_filterInput", void 0);
+__decorate([
+    state()
+], OrAssetTree.prototype, "_filterSettingOpen", void 0);
+__decorate([
+    state()
+], OrAssetTree.prototype, "_assetTypes", void 0);
+__decorate([
+    query("#attributeNameFilter")
+], OrAssetTree.prototype, "_attributeNameFilter", void 0);
+__decorate([
+    query("#attributeValueFilter")
+], OrAssetTree.prototype, "_attributeValueFilter", void 0);
+__decorate([
+    state()
+], OrAssetTree.prototype, "_assetTypeFilter", void 0);
+OrAssetTree = OrAssetTree_1 = __decorate([
+    customElement("or-asset-tree")
+], OrAssetTree);
+export { OrAssetTree };
+//# sourceMappingURL=index.js.map