@doegis/core/widgets/BasemapGallery.js

DOE GIS API

import{_ as e}from"../chunks/tslib.es6.js";import{getAssetUrl as s}from"../assets.js";import t from"../core/Handles.js";import{on as a,when as i,watch as r}from"../core/reactiveUtils.js";import{property as o}from"../core/accessorSupport/decorators/property.js";import"../core/accessorSupport/ensureType.js";import"../core/arrayUtils.js";import{subclass as l}from"../core/accessorSupport/decorators/subclass.js";import d from"./Widget.js";import n from"./BasemapGallery/BasemapGalleryViewModel.js";import{CSS as m}from"./BasemapGallery/css.js";import{Heading as p}from"./support/Heading.js";import{accessibleHandler as c}from"./support/decorators/accessibleHandler.js";import{messageBundle as h}from"./support/decorators/messageBundle.js";import{tsx as u}from"./support/jsxFactory.js";import"./support/widgetUtils.js";let g=class extends d{constructor(e,s){super(e,s),this._handles=new t,this._focusBasemapItemEnabled=!1,this.disabled=!1,this.headingLevel=2,this.iconClass=m.widgetIcon,this.messages=null,this.viewModel=new n}initialize(){const e=this._handles;this.addHandles([a((()=>this.viewModel.items),"change",(s=>{const t="basemap-gallery-item-changes",{added:a,moved:i}=s;e.remove(t),e.add([...a,...i].map((e=>r((()=>e.state),(()=>this.scheduleRender())))),t),this.scheduleRender()})),i((()=>this.source),(()=>this.viewModel.load()),{initial:!0,once:!0})])}destroy(){this._handles.destroy()}loadDependencies(){return import("@esri/calcite-components/dist/components/calcite-scrim.js")}get activeBasemap(){return this.viewModel.activeBasemap}set activeBasemap(e){this.viewModel.activeBasemap=e}get label(){return this.messages?.widgetLabel??""}set label(e){this._overrideIfSome("label",e)}get source(){return this.viewModel.source}set source(e){this.viewModel.source=e}get view(){return this.viewModel.view}set view(e){this.viewModel.view=e}render(){const e="loading"===this.source.state,s=this.disabled||"disabled"===this.viewModel.state,t=this.viewModel.items.map(((e,s)=>this._renderBasemapGalleryItem(e,s))).toArray(),a={[m.sourceLoading]:e,[m.disabled]:s},i=e?u("div",{class:m.loader,key:"esri-basemap-gallery__loader"}):null,r=e?null:t.length>0?u("ul",{bind:this,"aria-disabled":this.disabled,"aria-label":this.label,class:m.itemContainer,key:"esri-basemap-gallery__item-container",onkeydown:this._handleKeyDown,role:"radiogroup"},t):u("div",{class:m.emptyMessage,key:"esri-basemap-gallery__empty-message"},u(p,{level:this.headingLevel},this.messages.noBasemaps));return u("div",{class:this.classes(m.base,a)},i,r)}_getRoundRobinIndex(e,s){return(e+s)%s}_handleKeyDown(e){const{key:s}=e;if(!["ArrowUp","ArrowDown","ArrowRight","ArrowLeft"].includes(s))return;e.preventDefault();const{items:t,activeBasemapIndex:a}=this.viewModel,i="ArrowUp"===s||"ArrowLeft"===s?this._getRoundRobinIndex(Math.max(a-1,-1),t.length):this._getRoundRobinIndex(a+1,t.length),r=t.getItemAt(i);"ready"===r?.state&&(this.viewModel.activeBasemap=r.basemap),this._focusBasemapItemEnabled=!0}_focusBasemapItem(e){this._focusBasemapItemEnabled&&0===e.tabIndex&&(e.focus(),this._focusBasemapItemEnabled=!1)}_handleClick(e){const s=e.currentTarget["data-item"];"ready"===s.state&&(this.viewModel.activeBasemap=s.basemap)}_renderBasemapGalleryItem(e,t){const a=e.basemap.thumbnailUrl||s("esri/themes/base/images/basemap-toggle-64.svg"),i=e.basemap.title,r=e.basemap.portalItem?.snippet,o=e.error?.message||r||i,{viewModel:{state:l,activeBasemapIndex:d}}=this,n=this.disabled||"disabled"===l,p=d===t,c=p||-1===d&&0===t?0:-1,h="loading"===l,g={[m.selectedItem]:p,[m.itemError]:"error"===e.state},v=`basemapgallery-item-${e.uid}`;return u("li",{"aria-checked":p.toString(),"aria-disabled":n.toString(),"aria-labelledby":v,bind:this,class:this.classes(m.item,g),"data-item":e,onkeydown:this._handleClick,onclick:this._handleClick,role:"radio",tabIndex:c,afterUpdate:this._focusBasemapItem,title:o},u("img",{alt:"",class:m.itemThumbnail,src:a}),u("div",{id:v,class:m.itemTitle},i),"loading"===e.state||p&&h?u("calcite-scrim",null,u("span",{"aria-hidden":"true",role:"presentation",class:m.loaderAnimation})):null)}};e([o()],g.prototype,"activeBasemap",null),e([o()],g.prototype,"disabled",void 0),e([o()],g.prototype,"headingLevel",void 0),e([o()],g.prototype,"iconClass",void 0),e([o()],g.prototype,"label",null),e([o(),h("esri/widgets/BasemapGallery/t9n/BasemapGallery")],g.prototype,"messages",void 0),e([o()],g.prototype,"source",null),e([o()],g.prototype,"view",null),e([o()],g.prototype,"viewModel",void 0),e([c()],g.prototype,"_handleClick",null),g=e([l("esri.widgets.BasemapGallery")],g);const v=g;export{v as default};