FeatureTemplates.js 4.8 KB

12345
  1. /*
  2. All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  3. See https://js.arcgis.com/4.25/esri/copyright.txt for details.
  4. */
  5. import{_ as e}from"../chunks/tslib.es6.js";import{HandleOwnerMixin as t}from"../core/HandleOwner.js";import{isNone as r}from"../core/maybe.js";import{watch as s,initial as i}from"../core/reactiveUtils.js";import{property as o}from"../core/accessorSupport/decorators/property.js";import"../core/arrayUtils.js";import{cast as l}from"../core/accessorSupport/decorators/cast.js";import{subclass as n}from"../core/accessorSupport/decorators/subclass.js";import a from"./Widget.js";import c from"./FeatureTemplates/FeatureTemplatesViewModel.js";import{ItemList as d}from"./FeatureTemplates/ItemList.js";import m from"./FeatureTemplates/TemplateItem.js";import"./support/widgetUtils.js";import{messageBundle as p}from"./support/decorators/messageBundle.js";import{vmEvent as u}from"./support/decorators/vmEvent.js";import{tsx as h}from"./support/jsxFactory.js";const f={base:"esri-feature-templates",loader:"esri-feature-templates__loader",widget:"esri-widget"};function v(e){return"items"in e}function b(e){return e.length>0&&v(e[0])}function I(e){const{label:t}=e;return v(e)?t:`${t}–${e.layer.id}`}const y={filter:!0};let g=class extends(t(a)){constructor(e,t){super(e,t),this._iconIntersectionObserver=new IntersectionObserver(((e,t)=>{e.forEach((async e=>{if(e.isIntersecting){const s=e.target;if(s["data-has-icon"])return void t.unobserve(s);const i=s["data-item"],{layer:o,template:l}=i;s["data-has-icon"]=!0;const n=await m.fetchThumbnail(o,l).catch((()=>(s["data-has-icon"]=!1,null)));if(r(n))return;s.appendChild(n)}}))})),this.enableListScroll=!0,this.filterText="",this.headingLevel=4,this.messages=null,this.viewModel=new c,this.visibleElements={...y},this.renderItemIcon=this.renderItemIcon.bind(this),this._afterItemCreateOrUpdate=this._afterItemCreateOrUpdate.bind(this),this._afterItemRemoved=this._afterItemRemoved.bind(this)}initialize(){const e=({label:e})=>!this.filterText||e.toLowerCase().includes(this.filterText.toLowerCase());this.addHandles(s((()=>this.viewModel),((t,r)=>{t&&!t.filterFunction&&(this.filterFunction=e),r&&r!==t&&r.filterFunction===e&&(r.filterFunction=null)}),i))}destroy(){this._iconIntersectionObserver&&(this._iconIntersectionObserver.disconnect(),this._iconIntersectionObserver=null)}loadDependencies(){return Promise.all([import("@esri/calcite-components/dist/components/calcite-input.js"),import("@esri/calcite-components/dist/components/calcite-list-item.js")])}get filterFunction(){return this.viewModel.filterFunction}set filterFunction(e){this.viewModel.filterFunction=e}get groupBy(){return this.viewModel.groupBy}set groupBy(e){this.viewModel.groupBy=e}get label(){return this.messages?.widgetLabel??""}set label(e){this._overrideIfSome("label",e)}get layers(){return this.viewModel.layers}set layers(e){this.viewModel.layers=e}get selectedItem(){return this.viewModel.selectedItem}castVisibleElements(e){return{...y,...e}}select(e){return this.viewModel.select(e)}render(){const{enableListScroll:e,filterText:t,headingLevel:r,messages:s,viewModel:{items:i,numberOfFeatureTemplates:o,selectedItem:l,state:n}}=this,a=this.visibleElements.filter&&o>1;if(b(i)){const e=i.find((e=>e.label===c.nullGroupBy.label));e&&(e.label=s.other)}return h("div",{class:this.classes(f.base,f.widget),"aria-label":s.widgetLabel},"loading"===n?this.renderLoader():"ready"===n?h(d,{id:this.id,identify:I,filterText:t,items:i,headingLevel:r,messages:{filterPlaceholder:s.filterPlaceholder,noItems:s.noItems,noMatches:s.noMatches},filterEnabled:a,onItemSelect:e=>{this.viewModel.select(e)},onFilterChange:e=>{this.filterText=e,this.viewModel.refresh()},renderIcon:this.renderItemIcon,selectedItem:l,enableListScroll:e}):null)}renderItemIcon({item:e}){return h("span",{key:"icon",afterCreate:this._afterItemCreateOrUpdate,afterUpdate:this._afterItemCreateOrUpdate,afterRemoved:this._afterItemRemoved,"data-item":e,"data-has-icon":!1})}renderLoader(){return h("div",{class:f.loader,key:"loader"})}_afterItemCreateOrUpdate(e){this._iconIntersectionObserver?.observe(e)}_afterItemRemoved(e){this._iconIntersectionObserver?.unobserve(e)}};e([o()],g.prototype,"enableListScroll",void 0),e([o()],g.prototype,"filterFunction",null),e([o()],g.prototype,"filterText",void 0),e([o()],g.prototype,"groupBy",null),e([o()],g.prototype,"headingLevel",void 0),e([o()],g.prototype,"label",null),e([o()],g.prototype,"layers",null),e([o(),p("esri/widgets/FeatureTemplates/t9n/FeatureTemplates")],g.prototype,"messages",void 0),e([o({readOnly:!0})],g.prototype,"selectedItem",null),e([o(),u("select")],g.prototype,"viewModel",void 0),e([o()],g.prototype,"visibleElements",void 0),e([l("visibleElements")],g.prototype,"castVisibleElements",null),g=e([n("esri.widgets.FeatureTemplates")],g);const w=g;export{w as default};