@arcgis/core/widgets/CatalogLayerList.js

ArcGIS Maps SDK for JavaScript: A complete 2D and 3D mapping and data visualization API

/* COPYRIGHT Esri - https://js.arcgis.com/5.0.19/LICENSE.txt */
import{__decorate as e}from"tslib";import t from"../core/Collection.js";import{deprecateWidget as o}from"../core/deprecate.js";import{IdentifiableMixin as i}from"../core/Identifiable.js";import s from"../core/Logger.js";import l from"../core/ReactiveMap.js";import{on as a,initial as r,watch as n}from"../core/reactiveUtils.js";import{property as p,subclass as d}from"../core/accessorSupport/decorators.js";import c from"./Widget.js";import m from"./CatalogLayerList/CatalogLayerListViewModel.js";import h from"./CatalogLayerList/CatalogLayerListVisibleElements.js";import{css as y}from"./CatalogLayerList/css.js";import u from"./LayerList/LayerListItem.js";import g from"./LayerList/ListItem.js";import{minFilterItems as L,getItem as f,removeDestroyedListItems as _,setFilterPredicate as v}from"./LayerList/support/layerListUtils.js";import{loadCalciteComponents as I}from"./support/componentsUtils.js";import{globalCss as w}from"./support/globalCss.js";import{calciteListFilterProps as b}from"./support/listUtils.js";import{tsx as C,messageBundle as F,vmEvent as M}from"./support/widget.js";import{setFocus as O}from"./support/widgetUtils.js";var T;const P=t.ofType(g),A="nested";let E=T=class extends(i(c)){constructor(e,i){super(e,i),this._rootListEl=null,this._activeItem=null,this._tooltipReferenceMap=new l,this._focusRootFlowItem=!1,this._focusPanelFlowItem=!1,this._focusLayerFlowItem=null,this._layerListMap=new l,this._rootGroupUid=`operational-${this.uid}`,this._openedLayersController=null,this.catalogLayerList=null,this.catalogOptions=null,this.collapsed=!1,this.filterPlaceholder="",this.filterPredicate=null,this.filterText="",this.headingLevel=2,this.knowledgeGraphOptions=null,this.layerTablesEnabled=new t(["knowledge-graph"]),this.mapImageOptions=null,this.messages=null,this.messagesCommon=null,this.minFilterItems=L,this.openedLayers=new t,this.openedLayerLists=new t,this.selectedItems=new P,this.selectionMode="none",this.tableList=null,this.tileOptions=null,this.viewModel=new m,this.visibilityAppearance="default",this.visibleElements=new h,this._onTablesOpen=e=>{this.onTablesOpen?this.onTablesOpen(e):(this.openedLayers.push(e.layer),this._focusLayerFlowItem=e.layer?.uid)},this._onCatalogOpen=e=>{this.onCatalogOpen?this.onCatalogOpen(e):(this.openedLayers.push(e.layer?.parent),this._focusLayerFlowItem=e.layer?.uid)},this._onPanelOpen=()=>{this._focusPanelFlowItem=!0},this._onTooltipReferenceChange=(e,t)=>{t?this._tooltipReferenceMap.set(e,t):this._tooltipReferenceMap.delete(e)},this._onTriggerAction=(e,t)=>{this.triggerAction(e,t)},this._clearActiveItem=()=>{this._activeItem=null},this._setActiveItem=e=>{if("default"!==this.visibilityAppearance)return;const t=Array.from(e.composedPath()).find(e=>e.classList?.contains(y.item));this._activeItem=f(t)},this.announceDeprecation=()=>{o(s.getLogger(this),"Catalog Layer List","arcgis-catalog-layer-list",{version:"5.0"})}}initialize(){this.addHandles([a(()=>this.openedLayers,"change",()=>this._handleOpenedLayersChange(),r),a(()=>this.viewModel.catalogItems,"change",()=>_(this.selectedItems),r),n(()=>[this.filterPredicate,this._rootListEl],()=>v(this._rootListEl,this.filterPredicate))])}loadDependencies(){return I({button:()=>import("@esri/calcite-components/dist/components/calcite-button"),flow:()=>import("@esri/calcite-components/dist/components/calcite-flow"),"flow-item":()=>import("@esri/calcite-components/dist/components/calcite-flow-item"),list:()=>import("@esri/calcite-components/dist/components/calcite-list"),notice:()=>import("@esri/calcite-components/dist/components/calcite-notice"),tooltip:()=>import("@esri/calcite-components/dist/components/calcite-tooltip")})}destroy(){this._destroyOpenedLayerLists(),this._tooltipReferenceMap.clear()}get _filterEnabled(){return this.viewModel.totalItems>=this.minFilterItems&&this.visibleElements.filter}get _visibleItems(){return this.catalogItems?.filter(e=>!e.hidden&&(this.visibleElements.errors||!e.error))}get _openedPanelItems(){return this._visibleItems.flatten(e=>e.children).filter(({hidden:e,panel:t})=>!e&&t?.open&&!t.disabled&&t.flowEnabled)}get _renderedOpenLayerFlowItems(){const{openedLayers:e}=this;return e.toArray().map((t,o)=>this._renderLayerFlowItem(t,o===e.length-1))}get catalogItems(){return this.viewModel.catalogItems}set catalogItems(e){this.viewModel.catalogItems=e}get catalogLayer(){return this.viewModel.catalogLayer}set catalogLayer(e){this.viewModel.catalogLayer=e}get icon(){return"catalog-dataset"}set icon(e){this._overrideIfSome("icon",e)}get label(){return this.messages?.widgetLabel??""}set label(e){this._overrideIfSome("label",e)}get listItemCreatedFunction(){return this.viewModel.listItemCreatedFunction}set listItemCreatedFunction(e){this.viewModel.listItemCreatedFunction=e}get view(){return this.viewModel.view}set view(e){this.viewModel.view=e}triggerAction(e,t){return this.viewModel.triggerAction(e,t)}render(){const e=this.viewModel?.state,t={[w.hidden]:"loading"===e,[w.disabled]:"disabled"===e};return C("div",{class:this.classes(y.base,w.widget,w.panel,t)},this._renderItemTooltips(),this._renderItems())}async _createFlowList(e,t){const{_layerListMap:o}=this,i=o.get(e);if(i)return i;const s="catalog"===e.type?this._createCatalogLayerList(e):await this._createTableList(e);return t.aborted||o.set(e,s),s}async _handleOpenedLayersChange(){const{_layerListMap:e,openedLayers:t,openedLayerLists:o}=this;this._openedLayersController?.abort();const i=new AbortController,{signal:s}=i;this._openedLayersController=i,e.forEach((o,i)=>{t.includes(i)||(o.destroy(),e.delete(i))});const l=await Promise.all(t.map(e=>this._createFlowList(e,s)));if(s.aborted)return;o.removeAll(),o.addMany(l);const a=o.at(-1);a?"catalogLayer"in a?(this._set("catalogLayerList",a),this._set("tableList",null)):(this._set("catalogLayerList",null),this._set("tableList",a)):(this._set("catalogLayerList",null),this._set("tableList",null))}_destroyOpenedLayerLists(){this.openedLayerLists.destroyAll(),this.openedLayers.removeAll(),this._layerListMap.forEach(e=>e.destroy()),this._layerListMap.clear()}_renderItemTooltip(e){const{_tooltipReferenceMap:t,messages:o}=this;return e?.layer?C("calcite-tooltip",{key:`tooltip-${e.layer.uid}`,overlayPositioning:"fixed",referenceElement:t.get(e.layer.uid),topLayerDisabled:this.topLayerDisabled},o.layerIncompatibleTooltip):null}_renderItemTooltipNodes(e){return e.incompatible?this._renderItemTooltip(e):e.children?.filter(e=>!e.hidden).toArray().map(e=>this._renderItemTooltipNodes(e))}_renderItemTooltips(){return this._visibleItems?.toArray().map(e=>this._renderItemTooltipNodes(e))}_renderNoItemsMessage(){return C("div",{slot:"message"},this.messages.noItemsToDisplay)}_renderNoItems(){return C("div",{class:y.itemMessage,key:"esri-layer-list__no-items"},C("calcite-notice",{icon:"information",kind:"info",open:!0,width:"full"},this._renderNoItemsMessage()))}_renderPanelFlowItems(){const{_openedPanelItems:e,openedLayers:t}=this;return e.toArray().map(({title:o,panel:i},s)=>{const l=()=>this._handlePanelFlowItemBack(i);return C("calcite-flow-item",{afterCreate:this._focusPanelFlowItemNode,afterUpdate:this._focusPanelFlowItemNode,bind:this,description:o,heading:i.title,headingLevel:this.headingLevel,key:`flow-panel-${i.uid}`,selected:!t.length&&s===e.length-1,onCalciteFlowItemBack:e=>{e.preventDefault(),l()}},i.render(),C("calcite-button",{appearance:"transparent",onclick:l,slot:"footer-start",width:"full"},this.messagesCommon.back))})}_handlePanelFlowItemBack(e){e.open=!1,this._focusRootFlowItem=!0}_focusRootFlowItemNode(e){this._focusRootFlowItem&&(this._focusRootFlowItem=!1,O(e))}_focusPanelFlowItemNode(e){this._focusPanelFlowItem&&(this._focusPanelFlowItem=!1,O(e))}_renderItems(){const{visible:e,collapsed:t,_visibleItems:o,_filterEnabled:i,_rootGroupUid:s,visibleElements:{closeButton:l,collapseButton:a,heading:r,flow:n},selectionMode:p,filterText:d,filterPlaceholder:c,messages:m,openedLayers:h,_openedPanelItems:u}=this,g=[C("calcite-flow-item",{afterCreate:this._focusRootFlowItemNode,afterUpdate:this._focusRootFlowItemNode,bind:this,closable:l,closed:!e,collapsed:t,collapsible:a,heading:r?m.widgetLabel:void 0,headingLevel:this.headingLevel,key:"root-flow-item",selected:!h.length&&!u.length,onCalciteFlowItemClose:()=>this.visible=!1},o?.length?null:this._renderNoItems(),C("calcite-list",{afterCreate:e=>{this._rootListEl=e,e.addEventListener("focusin",this._setActiveItem),e.addEventListener("focusout",this._clearActiveItem)},afterRemoved:e=>{this._rootListEl=null,e.removeEventListener("focusin",this._setActiveItem),e.removeEventListener("focusout",this._clearActiveItem)},"data-layer-type":s,displayMode:A,filterEnabled:i,filterPlaceholder:c,filterProps:b,filterText:i?d:"",group:s,key:"root-list",label:m.widgetLabel,onmouseleave:this._clearActiveItem,onmouseover:this._setActiveItem,selectionAppearance:"border",selectionMode:p,onCalciteListChange:e=>this._handleCalciteListChange(e),onCalciteListFilter:e=>this.filterText=e.currentTarget?.filterText??""},o.toArray().map(e=>this._renderItem(e)),i?C("div",{class:y.filterNoResults,slot:"filter-no-results"},C("calcite-notice",{kind:"info",open:!0,width:"full"},this._renderNoItemsMessage())):null)),this._renderPanelFlowItems(),this._renderedOpenLayerFlowItems];return e?n?C("calcite-flow",{key:"root-flow"},g):g:null}_focusLayerFlowItemNode(e){this._focusLayerFlowItem===e.dataset.layerUid&&(this._focusLayerFlowItem=null,O(e))}_renderLayerFlowItem(e,t){const{messages:o,openedLayers:i}=this,s=e.title||this.messages.untitledLayer;return C("calcite-flow-item",{afterCreate:this._focusLayerFlowItemNode,afterUpdate:this._focusLayerFlowItemNode,bind:this,"data-layer-uid":e.uid,description:s,heading:o["catalog"===e.type?"catalogLayers":"tables"],headingLevel:this.headingLevel,key:`flow-layer-list-${e.uid}`,selected:t,onCalciteFlowItemBack:e=>{e.preventDefault(),i.pop();const t=i.at(-1);t?this._focusLayerFlowItem=t.uid:this._focusRootFlowItem=!0}},this._layerListMap.get(e)?.render())}_createCatalogLayerList(e){const{headingLevel:t,catalogOptions:o,view:i,filterPlaceholder:s,listItemCreatedFunction:l,minFilterItems:a,selectionMode:r,visibilityAppearance:n,onCatalogOpen:p,onTablesOpen:d}=this;return new T({headingLevel:t,view:i,filterPlaceholder:s,listItemCreatedFunction:l,minFilterItems:a,selectionMode:r,visibilityAppearance:n,...o,catalogLayer:e,onCatalogOpen:p,onTablesOpen:d})}_getTableListParams(e){switch(e.type){case"knowledge-graph":return{...this.knowledgeGraphOptions,tables:e.tables};case"map-image":return{...this.mapImageOptions,tables:e.subtables};case"tile":return{...this.tileOptions,tables:e.subtables};default:return null}}async _createTableList(e){const{default:t}=await import("./TableList.js"),{headingLevel:o,selectionMode:i}=this;return new t({headingLevel:o,selectionMode:i,...this._getTableListParams(e)})}_renderItem(e,t,o){return C(u,{activeItem:this._activeItem,css:y,displayMode:A,dragEnabled:!1,item:e,key:`layerListItem-${e.layer?.uid}`,layerTablesEnabled:this.layerTablesEnabled,listModeDisabled:this.viewModel.listModeDisabled,messages:this.messages,messagesCommon:this.messagesCommon,parent:t,parentTitles:o,rootGroupUid:this._rootGroupUid,selectedItems:this.selectedItems,selectionMode:this.selectionMode,visibilityAppearance:this.visibilityAppearance,visibleElements:this.visibleElements,onAction:this._onTriggerAction,onCatalogOpen:this._onCatalogOpen,onPanelOpen:this._onPanelOpen,onTablesOpen:this._onTablesOpen,onTooltipReferenceChange:this._onTooltipReferenceChange})}_handleCalciteListChange(e){const{selectionMode:t,selectedItems:o}=this;if("none"===t)return;const i=e.target.selectedItems.map(e=>f(e)).filter(Boolean);o.removeAll(),o.addMany(i)}};e([p()],E.prototype,"_rootListEl",void 0),e([p()],E.prototype,"_activeItem",void 0),e([p()],E.prototype,"_tooltipReferenceMap",void 0),e([p()],E.prototype,"_focusRootFlowItem",void 0),e([p()],E.prototype,"_focusPanelFlowItem",void 0),e([p()],E.prototype,"_focusLayerFlowItem",void 0),e([p()],E.prototype,"_layerListMap",void 0),e([p()],E.prototype,"_filterEnabled",null),e([p()],E.prototype,"_visibleItems",null),e([p()],E.prototype,"_openedPanelItems",null),e([p()],E.prototype,"_renderedOpenLayerFlowItems",null),e([p()],E.prototype,"catalogItems",null),e([p()],E.prototype,"catalogLayer",null),e([p({readOnly:!0})],E.prototype,"catalogLayerList",void 0),e([p()],E.prototype,"catalogOptions",void 0),e([p()],E.prototype,"collapsed",void 0),e([p()],E.prototype,"filterPlaceholder",void 0),e([p()],E.prototype,"filterPredicate",void 0),e([p()],E.prototype,"filterText",void 0),e([p()],E.prototype,"headingLevel",void 0),e([p()],E.prototype,"icon",null),e([p()],E.prototype,"knowledgeGraphOptions",void 0),e([p()],E.prototype,"label",null),e([p()],E.prototype,"layerTablesEnabled",void 0),e([p()],E.prototype,"listItemCreatedFunction",null),e([p()],E.prototype,"mapImageOptions",void 0),e([p(),F("esri/widgets/CatalogLayerList/t9n/CatalogLayerList")],E.prototype,"messages",void 0),e([p(),F("esri/t9n/common")],E.prototype,"messagesCommon",void 0),e([p()],E.prototype,"minFilterItems",void 0),e([p({readOnly:!0})],E.prototype,"openedLayers",void 0),e([p({readOnly:!0})],E.prototype,"openedLayerLists",void 0),e([p()],E.prototype,"onCatalogOpen",void 0),e([p()],E.prototype,"onTablesOpen",void 0),e([p({type:P})],E.prototype,"selectedItems",void 0),e([p()],E.prototype,"selectionMode",void 0),e([p({readOnly:!0})],E.prototype,"tableList",void 0),e([p()],E.prototype,"tileOptions",void 0),e([p()],E.prototype,"view",null),e([M("trigger-action"),p({type:m})],E.prototype,"viewModel",void 0),e([p()],E.prototype,"visibilityAppearance",void 0),e([p({type:h,nonNullable:!0})],E.prototype,"visibleElements",void 0),E=T=e([d("esri.widgets.CatalogLayerList")],E);const k=E;export{k as default};