@arcgis/map-components/dist/cdn/I47TNNJX.js

ArcGIS Map Components

/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import{a as q}from"./Q52QESBE.js";import b from"./FT372QJV.js";import a from"./R3NYK6BO.js";import{e as D,f as O}from"./AKBXFBDL.js";import"./LMBRORN7.js";import{g as H}from"./PBSJQPB2.js";import{N as P,O as U,R as M,U as B,a as E,b as I}from"./WUJCCZQC.js";import"./3TTFCHAA.js";export default $arcgis.t(([{getColorsFromRenderer:re},{substitute:ne},{watch:se},oe,J,{renderingSanitizer:Q},,{e:C,f:j,g:V,h:G,i:K,j:W,l:L,n:F,o:k,p:R}])=>{var le=E`.container{display:flex;flex-flow:row wrap;align-items:center;margin-top:var(--calcite-spacing-xs);width:100%;min-height:150px}.container .pagination-button{display:flex;align-items:center;justify-content:center;border:none;background:transparent;cursor:pointer;padding-block:var(--calcite-spacing-xs);padding-inline:var(--calcite-spacing-xs);color:var(--calcite-color-text-3)}.container .pagination-button:hover,.container .pagination-button:focus{background-color:var(--calcite-color-foreground-3);color:var(--calcite-color-text-1);fill:var(--calcite-color-text-1)}.item-title{margin:0;font-size:var(--calcite-font-size-md);line-height:var(--calcite-font-line-height-relative-snug)}.item-caption{padding-block-start:var(--calcite-spacing-xxs);font-size:var(--calcite-font-size-sm);line-height:var(--calcite-font-line-height-relative-snug)}.item{display:flex;align-items:flex-start;justify-content:center;margin-block:var(--calcite-spacing-xs);width:100%;height:auto}.item-navigation{display:flex;flex:0 1 100%;align-items:flex-start;justify-content:space-between;margin-block-end:var(--calcite-spacing-xs)}.item-text{margin-inline-end:var(--calcite-spacing-xs)}.pagination{display:flex;flex:0 0 auto;align-items:center;overflow:hidden}.pagination:only-child{margin-inline-start:auto}.pagination-text{padding-inline:var(--calcite-spacing-xxs);color:var(--calcite-color-text-3);font-size:var(--calcite-font-size-sm);line-height:var(--calcite-font-line-height-relative-normal)}.item-container{flex:0 1 auto;width:100%}.item-container img{max-width:100%}.item-container img[src$=".SVG"],.item-container img[src$=".svg"]{width:100%}.chart{width:100%;height:155px}`;function z(S){if(!C(S))return null;let[e,t]=S.split("/").slice(1);return{layerId:e,fieldName:t}}var X=15,w="category",A="value",ce="rgba(50, 50, 50, 1)",de=250,he=500,ue=200,N=class extends U{constructor(){super(...arguments),this._direction=O(),this._prefersReducedMotion=D("(prefers-reduced-motion)"),this.activeMediaInfoIndex=0,this.chartAnimationDisabled=!1,this.headingLevel=2}static{this.properties={_refreshIntervalInfo:16,messages:0,values:0,expressionValues:0,activeMediaInfoIndex:9,chartAnimationDisabled:5,activeMediaInfo:32,formattedMediaInfos:32,description:1,fieldInfoMap:0,layer:0,mediaInfos:0,popupTemplate:0,relatedInfos:0,formattedValues:0,heading:1,graphic:0,formattedMediaInfoCount:32,headingLevel:9}}static{this.styles=le}get activeMediaInfo(){return this.formattedMediaInfos[this.activeMediaInfoIndex]||null}get formattedMediaInfos(){return this._formatMediaInfos()||[]}get formattedMediaInfoCount(){return this.formattedMediaInfos.length}next(){this._pageContentElementMedia(1)}previous(){this._pageContentElementMedia(-1)}setActiveMedia(e){this._setContentElementMedia(e)}loaded(){this.manager.onLifecycle(()=>[se(()=>[this.activeMediaInfo,this.activeMediaInfoIndex],()=>this._setupMediaRefreshTimer(),{initial:!0}),{remove:()=>this._clearMediaRefreshTimer()}])}_setContentElementMedia(e){let{formattedMediaInfoCount:t}=this,i=(e+t)%t;this.activeMediaInfoIndex=i}_pageContentElementMedia(e){let{activeMediaInfoIndex:t}=this,i=t+e;this._setContentElementMedia(i)}_formatMediaInfos(){let{mediaInfos:e,layer:t}=this,i=this.values??{},a=this.formattedValues??{},s=this.fieldInfoMap??new Map,r=this.expressionValues??{};return e?.map(o=>{let n=o?.clone();if(!n)return null;if(n.title=R({values:i,fieldInfoMap:s,globalValues:a,layer:t,text:n.title}),n.caption=R({values:i,fieldInfoMap:s,globalValues:a,layer:t,text:n.caption}),n.altText=R({values:i,fieldInfoMap:s,globalValues:a,layer:t,text:n.altText}),n.type==="image"){if(!n.value)return null;let l=n.value;return this._setImageValue({value:l,formattedValues:a,layer:t}),l.sourceURL?n:void 0}if(n.type==="pie-chart"||n.type==="line-chart"||n.type==="column-chart"||n.type==="bar-chart"){if(!n.value)return null;let l=n.value;return this._setChartValue({value:l,chartType:n.type,values:i,expressionValues:r,formattedValues:a,layer:t}),n}return null}).filter(o=>o!=null)??[]}_setImageValue(e){let t=this.fieldInfoMap??new Map,{value:i,formattedValues:a,layer:s}=e,{linkURL:r,sourceURL:o}=i;if(o){let n=k(o,s);i.sourceURL=F({formattedValues:a,template:n,fieldInfoMap:t})}if(r){let n=k(r,s);i.linkURL=F({formattedValues:a,template:n,fieldInfoMap:t})}}_setChartValue(e){let{value:t,values:i,expressionValues:a,formattedValues:s,chartType:r,layer:o}=e,{popupTemplate:n,relatedInfos:l}=this,{fields:p,normalizeField:d}=t,c=o;if(t.fields=G(p,c),d&&(t.normalizeField=V(d,c)),!p.some(u=>!!(s[u]!=null||C(u)&&l?.size)))return;let m=n?.fieldInfos??[];t.series=[],p.forEach((u,g)=>{let h=t.colors?.[g];if(C(u)){t.series=[...t.series,...this._getRelatedChartInfos({fieldInfos:m,fieldName:u,formattedValues:s,expressionValues:a,chartType:r,value:t,color:h})];return}let v=this._getChartOption({value:t,values:i,chartType:r,formattedValues:s,expressionValues:a,fieldName:u,fieldInfos:m,color:h});t.series.push(v)})}_getRelatedChartInfos(e){let{fieldInfos:t,fieldName:i,formattedValues:a,chartType:s,value:r,color:o,expressionValues:n}=e,l=[],p=z(i),d=p&&this.relatedInfos?.get(p.layerId);if(!d)return l;let{relatedFeatures:c,relation:m}=d;if(!m||!c)return l;let{cardinality:u}=m;return c.forEach(g=>{let h=g.attributes;h&&Object.keys(h).forEach(v=>{v===p.fieldName&&l.push(this._getChartOption({value:r,values:h,formattedValues:a,expressionValues:n,fieldName:i,chartType:s,relatedFieldName:v,hasMultipleRelatedFeatures:c?.length>1,fieldInfos:t,color:o}))})}),u&&(u==="one-to-many"||u==="many-to-many")?l:[l[0]]}_getTooltip({label:e,value:t,chartType:i}){return i==="pie-chart"?`${e}`:`${e}: ${t}`}_getChartOption(e){let{value:t,values:i,formattedValues:a,expressionValues:s,fieldName:r,relatedFieldName:o,fieldInfos:n,chartType:l,hasMultipleRelatedFeatures:p,color:d}=e,{layer:c,graphic:m}=this,u=this.fieldInfoMap??new Map,{normalizeField:g,tooltipField:h}=t,v=g?C(g)?i[z(g).fieldName]:i[g]:null,x=K(r)&&s?.[r]!==void 0?s[r]:o&&i[o]!==void 0?i[o]:i[r]!==void 0?i[r]:a[r],_=x===void 0?null:x&&v&&typeof x=="number"&&typeof v=="number"?x/v:x,f=W(n,r),y=V(r,c),b=(h&&a[h]!==void 0?a[h]:L({fieldInfo:f||new oe({fieldName:y}),expressionInfos:this.popupTemplate?.expressionInfos,graphic:m,layer:c}))??"",Z=a[y]??"",Y=_!=null?typeof _=="number"?_:Number(_):null;if(C(r)){let T=u.get(r.toLowerCase()),ee=h?u.get(h.toLowerCase()):null,te=T?.fieldName??r,$=p&&h?z(h).fieldName:ee?.fieldName??h,ie=(p&&$?i[$]:a[$]??(T&&L({fieldInfo:T,layer:c,graphic:m}))??T?.fieldName??o)??"",ae=(p&&o?i[o]:a[te])??"";return new J({fieldName:r,tooltip:this._getTooltip({label:ie,value:ae,chartType:l}),color:d,value:Y})}return new J({fieldName:r,tooltip:this._getTooltip({label:b,value:Z,chartType:l}),color:d,value:Y})}_getRenderer(){let e=this.layer;return this.graphic?.isAggregate&&e?.featureReduction&&"renderer"in e.featureReduction?e.featureReduction.renderer:e?.renderer}async _getSeriesColors(e){let{color:t}=await import("./23N5RSQM.js"),i=new Map;return e.forEach(a=>{a.color&&i.set(a,t(a.color.toCss(!0)))}),i}async _getRendererColors(){let{color:e}=await import("./23N5RSQM.js"),t=new Map,i=this._getRenderer(),a="default";if(!i)return t;let s=await re(i);return s.delete(a),Array.from(s.values()).every(r=>r?.length===1)&&Array.from(s.keys()).forEach(r=>{let o=s.get(r)?.[0]?.toCss(!0);o&&t.set(r,e(o))}),t}async _createChart(e){let{activeMediaInfo:t}=this;if(!e||!t)return;let{createRoot:i}=await import("./7DGQHON2.js").then(m=>m.default.then(e=>({createRoot:e}))),a=await i(e);this._chartRoot=a,this._renderChart({mediaInfo:t,root:a})}_handleMediaKeyup(e){let{key:t}=e;t==="ArrowLeft"&&(e.stopPropagation(),this.previous()),t==="ArrowRight"&&(e.stopPropagation(),this.next())}_canAnimateChart(){return!this.chartAnimationDisabled&&!this._prefersReducedMotion}_getChartAnimationMS(){return this._canAnimateChart()?de:0}_getChartSeriesAnimationMS(){return this._canAnimateChart()?he:0}async _customizeChartTooltip(e,t="horizontal"){let{color:i}=await import("./23N5RSQM.js");e.setAll({pointerOrientation:t}),e.get("background")?.setAll({stroke:i(ce)}),e.label.setAll({direction:this._direction,oversizedBehavior:"wrap",maxWidth:ue})}async _createPieChart(e,t){let[{Tooltip:i},{PieChart:a,PieSeries:s}]=await Promise.all([import("./23N5RSQM.js"),import("./BLJAHET2.js")]),{mediaInfo:r,root:o}=e,{title:n}=r,l=5,p=r?.altText||r?.title||"",d=o.container.children.push(a.new(o,{role:"figure",ariaLabel:p,focusable:!0,paddingBottom:l,paddingTop:l,paddingLeft:l,paddingRight:l})),c=`{category}: {valuePercentTotal.formatNumber('0.00')}%
 ({value})`,m=i.new(o,{labelText:c}),u=d.series.push(s.new(o,{name:n,valueField:A,categoryField:w,tooltip:m}));u.ticks.template.set("forceHidden",!0),u.labels.template.set("forceHidden",!0),u.slices.template.states.create("active",{shiftRadius:l}),this._customizeChartTooltip(m),u.slices.template.setAll({ariaLabel:c,focusable:!0,templateField:"columnSettings"}),u.data.setAll(t),u.appear(this._getChartSeriesAnimationMS()),d.appear(this._getChartAnimationMS()),d.root.dom.classList.toggle("chart-rendered",!0)}_getMinSeriesValue(e){let t=0;return e.forEach(i=>t=Math.min(i.value,t)),t}async _createColumnChart(e,t,i){let[{Tooltip:a,Scrollbar:s},{CategoryAxis:r,AxisRendererX:o,AxisRendererY:n,ValueAxis:l,ColumnSeries:p}]=await Promise.all([import("./23N5RSQM.js"),import("./G4FCTRVU.js")]),{mediaInfo:d,root:c}=t,{value:m,title:u}=d,{_direction:g}=this;e.setAll({wheelX:"panX",wheelY:"zoomX"});let h=e.xAxes.push(r.new(c,{renderer:o.new(c,{inversed:g==="rtl"}),categoryField:w}));h.get("renderer").labels.template.setAll({forceHidden:!0});let v=e.yAxes.push(l.new(c,{renderer:n.new(c,{inside:!1}),min:this._getMinSeriesValue(m.series)}));v.get("renderer").labels.template.setAll({direction:g});let x="{categoryX}",_=a.new(c,{labelText:x}),f=e.series.push(p.new(c,{name:u,xAxis:h,yAxis:v,valueYField:A,categoryXField:w,tooltip:_}));this._customizeChartTooltip(_),f.columns.template.setAll({ariaLabel:x,focusable:!0,templateField:"columnSettings"}),m.series.length>X&&e.set("scrollbarX",s.new(c,{orientation:"horizontal"})),h.data.setAll(i),f.data.setAll(i),f.appear(this._getChartSeriesAnimationMS()),e.appear(this._getChartAnimationMS())}async _createBarChart(e,t,i){let[{Tooltip:a,Scrollbar:s},{CategoryAxis:r,AxisRendererX:o,AxisRendererY:n,ValueAxis:l,ColumnSeries:p}]=await Promise.all([import("./23N5RSQM.js"),import("./G4FCTRVU.js")]),{mediaInfo:d,root:c}=t,{value:m,title:u}=d,{_direction:g}=this;e.setAll({wheelX:"panY",wheelY:"zoomY"});let h=e.yAxes.push(r.new(c,{renderer:n.new(c,{inversed:!0}),categoryField:w}));h.get("renderer").labels.template.setAll({forceHidden:!0});let v=e.xAxes.push(l.new(c,{renderer:o.new(c,{inside:!1,inversed:g==="rtl"}),min:this._getMinSeriesValue(m.series)}));v.get("renderer").labels.template.setAll({direction:g});let x="{categoryY}",_=a.new(c,{labelText:x}),f=e.series.push(p.new(c,{name:u,xAxis:v,yAxis:h,valueXField:A,categoryYField:w,tooltip:_}));this._customizeChartTooltip(_,"vertical"),f.columns.template.setAll({ariaLabel:x,focusable:!0,templateField:"columnSettings"}),m.series.length>X&&e.set("scrollbarY",s.new(c,{orientation:"vertical"})),h.data.setAll(i),f.data.setAll(i),f.appear(this._getChartSeriesAnimationMS()),e.appear(this._getChartAnimationMS())}async _createLineChart(e,t,i){let[{Tooltip:a,Scrollbar:s},{CategoryAxis:r,AxisRendererX:o,AxisRendererY:n,ValueAxis:l,LineSeries:p}]=await Promise.all([import("./23N5RSQM.js"),import("./G4FCTRVU.js")]),{root:d,mediaInfo:c}=t,{value:m,title:u}=c,{_direction:g}=this;e.setAll({wheelX:"panX",wheelY:"zoomX"});let h=e.xAxes.push(r.new(d,{renderer:o.new(d,{inversed:g==="rtl"}),categoryField:w}));h.get("renderer").labels.template.setAll({forceHidden:!0});let v=e.yAxes.push(l.new(d,{renderer:n.new(d,{inside:!1}),min:this._getMinSeriesValue(m.series)}));v.get("renderer").labels.template.setAll({direction:g});let x="{categoryX}",_=i[0]?.lineSettings?.stroke,f=a.new(d,{getFillFromSprite:!_,labelText:x});_&&f.get("background")?.setAll({fill:_});let y=e.series.push(p.new(d,{name:u,xAxis:h,yAxis:v,valueYField:A,categoryXField:w,tooltip:f}));y.strokes.template.setAll({templateField:"lineSettings"}),this._customizeChartTooltip(f,"vertical"),m.series.length>X&&e.set("scrollbarX",s.new(d,{orientation:"horizontal"})),h.data.setAll(i),y.data.setAll(i),y.appear(this._getChartSeriesAnimationMS()),e.appear(this._getChartAnimationMS())}async _createXYChart(e,t){let{XYChart:i,XYCursor:a}=await import("./G4FCTRVU.js"),{root:s,mediaInfo:r}=e,{type:o}=r,n=r?.altText||r?.title||"",l=s.container.children.push(i.new(s,{role:"figure",ariaLabel:n,focusable:!0,panX:!0,panY:!0}));l.set("cursor",a.new(s,{})),o==="column-chart"&&await this._createColumnChart(l,e,t),o==="bar-chart"&&await this._createBarChart(l,e,t),o==="line-chart"&&await this._createLineChart(l,e,t),l.root.dom.classList.toggle("chart-rendered",!0)}_clearMediaRefreshTimer(){let{_refreshTimer:e}=this;e&&(clearTimeout(e),this._refreshTimer=void 0)}_updateMediaInfoTimestamp(e){let t=Date.now();this._refreshIntervalInfo={timestamp:t,sourceURL:e&&this._getImageSource(e,t)}}_setupMediaRefreshTimer(){this._clearMediaRefreshTimer();let{activeMediaInfo:e}=this;e?.type==="image"&&e.refreshInterval>0&&this._setRefreshTimeout(e)}_setRefreshTimeout(e){let{refreshInterval:t,value:i}=e,a=t*6e4;this._updateMediaInfoTimestamp(i.sourceURL);let s=window.setInterval(()=>{this._updateMediaInfoTimestamp(i.sourceURL)},a);this._refreshTimer=s}_getImageSource(e,t){let i=e.includes("?")?"&":"?",[a,s=""]=e.split("#");return`${a}${i}timestamp=${t}${s?"#":""}${s}`}_updateChartElement(e){this._chartRoot?.dispose(),this._chartRoot=void 0,e&&this._createChart(e)}render(){return I`<div class="root" @keyup=${this._handleMediaKeyup}><arcgis-feature-element-info .heading=${this.heading} .description=${this.description} .headingLevel=${this.headingLevel}></arcgis-feature-element-info>${this._renderMedia()}</div>`}_renderMedia(){let{formattedMediaInfoCount:e,activeMediaInfoIndex:t}=this,i=this._renderMediaText();return e?I`<div class="container">${this._renderMediaInfo()}<div class="item-navigation">${i}${e>1?I`<div class="pagination">${this._renderMediaPageButton("previous")}<span class="pagination-text">${ne(this.messages?.pageText??"",{index:t+1,total:e})}</span>${this._renderMediaPageButton("next")}</div>`:null}</div></div>`:null}_renderMediaText(){let{activeMediaInfo:e}=this;if(!e)return null;let t=e?.title?I`<div class="item-title" .innerHTML=${Q.sanitize(e.title)??""}></div>`:null,i=e?.caption?I`<div class="item-caption" .innerHTML=${Q.sanitize(e.caption)??""}></div>`:null;return t||i?I`<div class="item-text">${t}${i}</div>`:null}_renderImageMediaInfo(e){if(!e.value)return null;let{_refreshIntervalInfo:t}=this,{value:i,refreshInterval:a,altText:s,title:r}=e,{sourceURL:o,linkURL:n}=i,l=j(n??void 0)?"_blank":"_self",p=l==="_blank"?"noreferrer":"",d=a?t:null,c=d?d.sourceURL:o,m=I`<img alt=${(s||r)??M} src=${c??void 0??M}>`;return(n?I`<a href=${n??M} rel=${p??M} target=${l??M} title=${r??M}>${m}</a>`:null)??m}_renderChartMediaInfo(e){let{activeMediaInfoIndex:t,formattedMediaInfoCount:i}=this;return q(`media-${e.type}-${t}-${i}`,I`<div class="chart" ${P(this._updateChartElement)}></div>`)}_renderMediaInfoType(){let{activeMediaInfo:e}=this;return e?e.type==="image"?this._renderImageMediaInfo(e):e.type.includes("chart")?this._renderChartMediaInfo(e):null:null}_renderMediaInfo(){let{activeMediaInfo:e}=this;return e?I`<div class="item-container"><div class="item">${this._renderMediaInfoType()}</div></div>`:null}_renderMediaPageButton(e){if(this.formattedMediaInfoCount<2)return null;let t=e==="previous",i=t?this.messages?.previous??"":this.messages?.next??"",a=t?"chevron-left":"chevron-right",s=t?this.previous:this.next;return I`<button .ariaLabel=${i} class="pagination-button" @click=${s} tabindex=0 title=${i??M} type=button><calcite-icon flip-rtl class="pagination-icon" .icon=${a} scale=s></calcite-icon></button>`}async _renderChart(e){let{root:t,mediaInfo:i}=e,{value:a,type:s}=i,[{default:r},{default:o},{default:n},{esriChartColorSet:l},{ColorSet:p,Theme:d}]=await Promise.all([import("./AJTKCFGJ.js"),import("./INHQ3RYK.js"),import("./KZS3PUUX.js"),import("./WKTEY3AU.js"),import("./23N5RSQM.js")]),c=d.new(t);c.rule("ColorSet").set("colors",l),c.rule("ColorSet").set("reuse",!0);let m=[n.new(t),c];H(this.el)==="dark"&&m.push(o.new(t)),this._canAnimateChart()&&m.push(r.new(t)),t.setThemes(m);let u=await this._getRendererColors(),g=await this._getSeriesColors(a.series),h=p.new(t,{}),v=g.get(a.series[0]),x=v?{lineSettings:{stroke:v}}:void 0,_=a.series.map((f,y)=>{let b=g.get(f)||u.get(f.fieldName)||h.getIndex(y);return{[w]:f.tooltip,[A]:f.value,columnSettings:{fill:b,stroke:b},...x}}).filter(f=>s==="pie-chart"?f.value!=null&&f.value>0:!0);s==="pie-chart"?this._createPieChart(e,_):this._createXYChart(e,_)}};B("arcgis-feature-media",N);return N},"renderers/support/utils","intl","core/reactiveUtils","popup/FieldInfo","popup/content/support/ChartMediaInfoValueSeries","applications/Components/sanitizerUtils",a,b)