@doegis/core/widgets/FeatureTemplates.js

DOE GIS API

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{cast as l}from"../core/accessorSupport/decorators/cast.js";import"../core/arrayUtils.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="esri-feature-templates",v={base:f,loader:`${f}__loader`,widget:"esri-widget"};function b(e){return"items"in e}function I(e){return e.length>0&&b(e[0])}function g(e){return e.id}const y={filter:!0};let w=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?.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,t){return this.viewModel.select(e,t)}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(I(i)){const e=i.find((e=>e.label===c.nullGroupBy.label));e&&(e.label=s.other)}return h("div",{class:this.classes(v.base,v.widget),"aria-label":s.widgetLabel},"loading"===n?this.renderLoader():"ready"===n?h(d,{id:this.id,identify:g,filterText:t,items:i,headingLevel:r,selectionMode:"single",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??void 0,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:v.loader,key:"loader"})}_afterItemCreateOrUpdate(e){this._iconIntersectionObserver?.observe(e)}_afterItemRemoved(e){this._iconIntersectionObserver?.unobserve(e)}};e([o()],w.prototype,"enableListScroll",void 0),e([o()],w.prototype,"filterFunction",null),e([o()],w.prototype,"filterText",void 0),e([o()],w.prototype,"groupBy",null),e([o()],w.prototype,"headingLevel",void 0),e([o()],w.prototype,"label",null),e([o()],w.prototype,"layers",null),e([o(),p("esri/widgets/FeatureTemplates/t9n/FeatureTemplates")],w.prototype,"messages",void 0),e([o({readOnly:!0})],w.prototype,"selectedItem",null),e([o(),u("select")],w.prototype,"viewModel",void 0),e([o()],w.prototype,"visibleElements",void 0),e([l("visibleElements")],w.prototype,"castVisibleElements",null),w=e([n("esri.widgets.FeatureTemplates")],w);const j=w;export{j as default};