@arcgis/core/widgets/Legend/styles/card/LegendElement.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 s from"../../../../Color.js";import{substitute as t}from"../../../../intl.js";import{property as i,subclass as r}from"../../../../core/accessorSupport/decorators.js";import l from"../../../Widget.js";import a from"./ColorRamp.js";import{css as o}from"./css.js";import n from"./SizeRamp.js";import c from"./UnivariateAboveAndBelowRamp.js";import p from"./UnivariateColorSizeRamp.js";import{renderRelationshipRamp as h}from"../support/relationshipUtils.js";import{getLegendElementTitle as m,getPreviewAriaLabelIntl as d}from"../support/utils.js";import{attachToNode as y,isImageryStretchedLegend as g,getTitle as f}from"../../support/styleUtils.js";import{Heading as u,incrementHeadingLevel as b}from"../../../support/Heading.js";import{tsx as v}from"../../../support/widget.js";var E;let w=E=class extends l{constructor(e,s){super(e,s),this.cssEffectFilter=null,this.hasIndicators=!1,this.headingLevel=3,this.isChild=!1,this.legendElement=null}render(){const e=this._renderLegendElement(),s=m(this.legendElement,this.messages),t=this.hasIndicators&&!this.isChild?v("div",null,v(u,{class:o.carouselTitle,level:this.headingLevel},this.activeLayerInfo.title),v(u,{class:o.layerCaption,level:b(this.headingLevel)},s)):s?v(u,{class:o.layerCaption,level:this.headingLevel},s):null;return v("section",{"aria-labelledby":this.key,class:o.section,id:`${this.key}-panel`,key:this.key,role:"tabpanel",tabIndex:0},t,e)}_renderLegendElement(){switch(this.legendElement.type){case"symbol-table":return this._renderSymbolTable(this.legendElement);case"size-ramp":return v(n,{hasIndicators:this.hasIndicators,key:this.key,legendElement:this.legendElement,messages:this.messages,opacity:this.layer.opacity});case"color-ramp":case"opacity-ramp":case"heatmap-ramp":case"stretch-ramp":return v(a,{cssEffectFilter:this.cssEffectFilter,key:this.key,legendElement:this.legendElement,messages:this.messages,opacity:this.layer.opacity});case"relationship-ramp":return h(this.legendElement,this.id,{opacity:this.layer.opacity,cssEffectFilter:this.cssEffectFilter,ariaLabel:this.messages.previewRelationshipRampAriaLabel,key:this.key});case"pie-chart-ramp":{const{preview:e}=this.legendElement;if(!e)return null;const s=t(this.messages.previewPieChartAriaLabel,{label:null});return s&&e.querySelector("svg")?.setAttribute("aria-label",s),v("div",{afterCreate:y,bind:e,class:o.pieChartRampPreview,key:`${this.key}-preview`})}case"univariate-above-and-below-ramp":return v(c,{cssEffectFilter:this.cssEffectFilter,key:this.key,legendElement:this.legendElement,messages:this.messages,opacity:this.layer.opacity});case"univariate-color-size-ramp":return v(p,{cssEffectFilter:this.cssEffectFilter,key:this.key,legendElement:this.legendElement,messages:this.messages,opacity:this.layer.opacity});default:return null}}_renderSymbolTable(e){const s=e.infos.map(s=>this._renderElementInfo(s,e.legendType)).filter(Boolean);if(!s.length)return null;const t=this.activeLayerInfo.legendElements.some(({type:e})=>"relationship-ramp"===e),i=s[0]?.properties?.classes?.[o.symbolRow],r={[o.labelContainer]:!i&&!t,[o.relationshipLabelContainer]:t};return v("div",{class:this.classes(r)},s)}_renderElementInfo(e,s){const{layer:t}=this,i="label"in e?e.label:null,r=`${this.key}-${i}`;if("type"in e&&e.type)return v(E,{activeLayerInfo:this.activeLayerInfo,cssEffectFilter:this.cssEffectFilter,hasIndicators:this.hasIndicators,headingLevel:this.headingLevel,isChild:!0,key:r,layer:t,legendElement:e,messages:this.messages});if(!("preview"in e&&e.preview||"src"in e&&e.src))return null;const l=g(t,s),a=f(this.messages,i,!1)||"";if("src"in e&&e.src)return v("div",{class:o.layerRow,key:`${r}-row`},this._renderImage(e,t,l),v("div",{class:o.imageLabel},a));if("symbol"in e&&e.preview){if(!e.symbol?.type.includes("simple-fill")){if(!e.label)return v("div",{afterCreate:y,bind:e.preview,key:`${r}-row`});const s={[o.symbolCell]:this.hasIndicators},{preview:t}=e,i="previewAriaLabel"in e?e.previewAriaLabel:null,l="label"in e?f(this.messages,e.label,!1):null,n=t.querySelector("svg"),c=d(this.messages,i||l);return c&&n&&n.setAttribute("aria-label",c),v("div",{class:this.classes(o.layerRow,{[o.symbolRow]:this.hasIndicators}),key:`${r}-row`},v("div",{afterCreate:y,bind:t,class:this.classes(s)}),v("div",{class:this.classes(o.imageLabel,{[o.labelCell]:this.hasIndicators})},a))}return v("div",{class:o.layerRow,key:`${r}-row`},v("div",{class:o.labelElement,styles:this._getBackgroundStyles(e)},a))}return null}_getBackgroundStyles(e){const t=e.symbol,i=t.color,r=!!i?.a,l="outline"in t?t.outline:null,a=!!l?.color?.a,o=new s(r&&i?[i.r,i.g,i.b,i.a*this.layer.opacity]:[255,255,255,0]),n=a&&l.color?new s([l.color.r,l.color.g,l.color.b,l.color.a*this.layer.opacity]):new s([255,255,255,0]),c=e.symbol.color?.isBright??!0,p=c?"black":"white",h=c?"rgba(255, 255, 255, .6)":"rgba(0, 0, 0, .6)";return{background:r?o.toCss(!0):"none",color:p,textShadow:`-1px -1px 0 ${h},\n                  1px -1px 0 ${h},\n                  -1px 1px 0 ${h},\n                  1px 1px 0 ${h}`,border:a?`1px solid ${n.toCss(!0)}`:"none",filter:this.cssEffectFilter??void 0}}_renderImage(e,s,t){const{previewAriaLabel:i,src:r,opacity:l}=e,a=f(this.messages,e.label,!1),n={[o.imageryLayerStretchedImage]:t,[o.symbol]:!t},c={opacity:`${l??s.opacity}`},p=d(this.messages,i||a);return v("img",{alt:p,"aria-label":p,border:0,class:this.classes(n),height:e.height,src:r,styles:c,width:e.width})}};e([i()],w.prototype,"activeLayerInfo",void 0),e([i()],w.prototype,"cssEffectFilter",void 0),e([i()],w.prototype,"hasIndicators",void 0),e([i()],w.prototype,"headingLevel",void 0),e([i()],w.prototype,"isChild",void 0),e([i()],w.prototype,"layer",void 0),e([i()],w.prototype,"legendElement",void 0),e([i()],w.prototype,"messages",void 0),w=E=e([r("esri.widgets.Legend.styles.card.LegendElement")],w);export{w as default};