@arcgis/core/widgets/Legend/styles/card/LegendElement.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 s from"../../../../Color.js";import{property as t}from"../../../../core/accessorSupport/decorators/property.js";import"../../../../core/has.js";import"../../../../core/Logger.js";import"../../../../core/RandomLCG.js";import{subclass as i}from"../../../../core/accessorSupport/decorators/subclass.js";import{getCSSFilterFromEffectList as r}from"../../../../symbols/support/utils.js";import a from"../../../Widget.js";import l 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}from"../support/utils.js";import{attachToNode as d,isImageryStretchedLegend as y,getTitle as g}from"../../support/styleUtils.js";import{Heading as f,incrementHeadingLevel as u}from"../../../support/Heading.js";import"../../../support/widgetUtils.js";import{tsx as v}from"../../../support/jsxFactory.js";var b;let L=b=class extends a{constructor(e,s){super(e,s),this.effectList=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(f,{class:o.carouselTitle,level:this.headingLevel},this.activeLayerInfo.title),v(f,{class:o.layerCaption,level:u(this.headingLevel)},s)):s?v(f,{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(l,{effectList:this.effectList,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,effectList:this.effectList,ariaLabel:this.messages.previewRelationshipRampAriaLabel,key:this.key});case"pie-chart-ramp":return v("div",{afterCreate:d,bind:this.legendElement.preview,class:o.pieChartRampPreview,key:`${this.key}-preview`});case"univariate-above-and-below-ramp":return v(c,{effectList:this.effectList,key:this.key,legendElement:this.legendElement,messages:this.messages,opacity:this.layer.opacity});case"univariate-color-size-ramp":return v(p,{effectList:this.effectList,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(b,{activeLayerInfo:this.activeLayerInfo,effectList:this.effectList,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 a=y(t,s),l=g(this.messages,i,!1)||"";if("src"in e&&e.src)return v("div",{class:o.layerRow,key:`${r}-row`},this._renderImage(e,t,a),v("div",{class:o.imageLabel},l));if("symbol"in e&&e.preview){if(!e.symbol?.type.includes("simple-fill")){if(!e.label)return v("div",{afterCreate:d,bind:e.preview,key:`${r}-row`});const s={[o.symbolCell]:this.hasIndicators};return v("div",{class:this.classes(o.layerRow,{[o.symbolRow]:this.hasIndicators}),key:`${r}-row`},v("div",{afterCreate:d,bind:e.preview,class:this.classes(s)}),v("div",{class:this.classes(o.imageLabel,{[o.labelCell]:this.hasIndicators})},l))}return v("div",{class:o.layerRow,key:`${r}-row`},v("div",{class:o.labelElement,styles:this._getBackgroundStyles(e)},l))}return null}_getBackgroundStyles(e){const t=e.symbol,i=t.color,a=!!i?.a,l="outline"in t?t.outline:null,o=!!l?.color?.a,n=new s(a&&i?[i.r,i.g,i.b,i.a*this.layer.opacity]:[255,255,255,0]),c=o&&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]),p=e.symbol.color?.isBright??!0,h=p?"black":"white",m=p?"rgba(255, 255, 255, .6)":"rgba(0, 0, 0, .6)";return{background:a?n.toCss(!0):"none",color:h,textShadow:`-1px -1px 0 ${m},\n                  1px -1px 0 ${m},\n                  -1px 1px 0 ${m},\n                  1px 1px 0 ${m}`,border:o?`1px solid ${c.toCss(!0)}`:"none",filter:r(this.effectList)??void 0}}_renderImage(e,s,t){const{label:i,src:r,opacity:a}=e,l={[o.imageryLayerStretchedImage]:t,[o.symbol]:!t},n={opacity:`${a??s.opacity}`},c=g(this.messages,i,!1);return v("img",{alt:c,"aria-label":c,border:0,class:this.classes(l),height:e.height,src:r,styles:n,width:e.width})}};e([t()],L.prototype,"activeLayerInfo",void 0),e([t()],L.prototype,"effectList",void 0),e([t()],L.prototype,"hasIndicators",void 0),e([t()],L.prototype,"headingLevel",void 0),e([t()],L.prototype,"isChild",void 0),e([t()],L.prototype,"layer",void 0),e([t()],L.prototype,"legendElement",void 0),e([t()],L.prototype,"messages",void 0),L=b=e([i("esri.widgets.Legend.styles.card.LegendElement")],L);export{L as default};