@arcgis/core/widgets/BasemapGallery.js

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

/*
All material copyright ESRI, All Rights Reserved, unless otherwise specified.
See https://js.arcgis.com/4.33/esri/copyright.txt for details.
*/
import{_ as e}from"../chunks/tslib.es6.js";import{getAssetUrl as s}from"../assets.js";import{deprecateWidget as t}from"../core/deprecate.js";import a from"../core/Logger.js";import{when as i}from"../core/reactiveUtils.js";import{property as r}from"../core/accessorSupport/decorators/property.js";import"../core/has.js";import"../core/RandomLCG.js";import{subclass as o}from"../core/accessorSupport/decorators/subclass.js";import{getBasemapThumbnailUrl as l,isBasemap3D as n,isBasemapInBeta as d}from"../support/basemapUtils.js";import p from"./Widget.js";import m from"./BasemapGallery/BasemapGalleryViewModel.js";import{css as c}from"./BasemapGallery/css.js";import{loadCalciteComponents as h}from"./support/componentsUtils.js";import{globalCss as u}from"./support/globalCss.js";import{Heading as g}from"./support/Heading.js";import{accessibleHandler as v}from"./support/decorators/accessibleHandler.js";import{messageBundle as b}from"./support/decorators/messageBundle.js";import{tsx as y}from"./support/jsxFactory.js";import"./support/widgetUtils.js";let w=class extends p{constructor(e,s){super(e,s),this.disabled=!1,this.headingLevel=2,this.messages=null,this.viewModel=new m,this._focusBasemapItemEnabled=!1,t(a.getLogger(this),"Basemap Gallery","arcgis-basemap-gallery",{version:"4.32"})}initialize(){this.addHandles(i((()=>this.source),(()=>this.viewModel.loadSource()),{sync:!0,initial:!0}))}loadDependencies(){return h({scrim:()=>import("@esri/calcite-components/dist/components/calcite-scrim"),chip:()=>import("@esri/calcite-components/dist/components/calcite-chip")})}get activeBasemap(){return this.viewModel.activeBasemap}set activeBasemap(e){this.viewModel.activeBasemap=e}get icon(){return"basemap"}set icon(e){this._overrideIfSome("icon",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={[c.sourceLoading]:e,[u.disabled]:s};return y("div",{class:this.classes(c.base,u.widget,u.panel,t),key:"container"},this._getContext())}_getContext(){if("unsupported"===this.viewModel.state)return y("div",{class:u.empty,key:"empty-message"},y(g,{level:this.headingLevel},this.messages.unsupported));if("loading"===this.source.state)return y("div",{class:c.loader,key:"loader"});const e=this.viewModel.items;return e.length>0?y("ul",{"aria-disabled":this.disabled,"aria-label":this.label,bind:this,class:c.itemContainer,key:"item-container",onkeydown:this._handleKeyDown,role:"radiogroup"},e.map(((e,s)=>this._renderBasemapGalleryItem(e,s))).toArray()):y("div",{class:u.empty,key:"empty-message"},y(g,{level:this.headingLevel},this.messages.noBasemaps))}_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.at(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=l(e.basemap)||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:d,activeBasemapIndex:p}}=this,m=this.disabled||"disabled"===d,h=p===t,g=h||-1===p&&0===t?0:-1,v="loading"===d,b={[c.selectedItem]:h,[c.itemError]:"error"===e.state},w=`basemapgallery-item-${e.uid}`;return y("li",{afterUpdate:this._focusBasemapItem,"aria-checked":h.toString(),"aria-disabled":m.toString(),"aria-labelledby":w,bind:this,class:this.classes(c.item,b),"data-item":e,key:e.uid,onclick:this._handleClick,onkeydown:this._handleClick,role:"radio",tabIndex:g,title:o},y("img",{alt:"",class:c.itemThumbnail,src:a}),y("div",{class:c.itemContent,key:"content"},y("div",{class:c.itemTitle,key:"title"},y("span",{id:w},i)),n(e.basemap)?this._renderTags(e.basemap):null),"loading"===e.state||h&&v?y("calcite-scrim",null,y("span",{"aria-hidden":"true",class:u.loaderAnimation,key:"loader",role:"presentation"})):null)}_renderTags(e){return y("div",{class:c.itemTagsContainer,key:"tag"},this._render3DTag(),d(e)?this._renderBetaTag():null)}_render3DTag(){const{messages:e}=this;return y("calcite-chip",{key:"tag-3d",label:e.tag3D,scale:"s"},this.messages.tag3D)}_renderBetaTag(){const{messages:e}=this;return y("calcite-chip",{appearance:"outline-fill",key:"tag-beta",label:e.tagBeta,scale:"s"},this.messages.tagBeta)}};e([r()],w.prototype,"activeBasemap",null),e([r()],w.prototype,"disabled",void 0),e([r()],w.prototype,"headingLevel",void 0),e([r()],w.prototype,"icon",null),e([r()],w.prototype,"label",null),e([r(),b("esri/widgets/BasemapGallery/t9n/BasemapGallery")],w.prototype,"messages",void 0),e([r()],w.prototype,"source",null),e([r()],w.prototype,"view",null),e([r()],w.prototype,"viewModel",void 0),e([r()],w.prototype,"_focusBasemapItemEnabled",void 0),e([v()],w.prototype,"_handleClick",null),w=e([o("esri.widgets.BasemapGallery")],w);const f=w;export{f as default};