@arcgis/core/widgets/UtilityNetworkAssociations/UtilityNetworkAssociationsLineSymbolPicker.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 t}from"../../assets.js";import o from"../../Color.js";import{property as r}from"../../core/accessorSupport/decorators/property.js";import"../../core/has.js";import"../../core/Logger.js";import"../../core/RandomLCG.js";import{subclass as s}from"../../core/accessorSupport/decorators/subclass.js";import i from"../../symbols/LineSymbolMarker.js";import n from"../../symbols/SimpleLineSymbol.js";import l from"../Widget.js";import{loadCalciteComponents as c}from"../support/componentsUtils.js";import"../support/widgetUtils.js";import{messageBundle as a}from"../support/decorators/messageBundle.js";import{tsx as d}from"../support/jsxFactory.js";import p from"./VisibleElementsSettingsPane.js";const m="esri-un-associations",u={divControlsSymbolPicker:`${m}__div-controls-symbol-picker`,dropdown:`${m}__dropdown`,dropdownItemLineCap:`${m}__dropdown-item-line-cap`,dropdownItemLinePattern:`${m}__dropdown-item-line-pattern`,dropdownSelectedItemLineCap:`${m}__dropdown-selected-item-line-cap`,dropdownSelectedItemLinePattern:`${m}__dropdown-selected-item-line-pattern`,dropdownTrigger:`${m}__dropdown-trigger`,labelAndToggle:`${m}__label-and-toggle`};let w=class extends l{constructor(e,t){super(e,t),this._lineCapTypes=["butt","round","square"],this._lineStyleTypes=["solid","dash","dash-dot","dot","long-dash","long-dash-dot","long-dash-dot-dot","short-dash","short-dash-dot","short-dash-dot-dot","short-dot"],this.lineSymbol=new n,this.messages=null,this.showArrows=!1,this.visibleElements=new p,this._afterComponentCreate=this._afterComponentCreate.bind(this)}render(){const{messages:{input:{lineCap:e,lineColor:t,lineStyle:o,lineWidth:r,showArrows:s}},visibleElements:i}=this,n=this.lineSymbol;return d("div",{class:u.divControlsSymbolPicker},i.arrowsToggle?this._renderToggle(s,this.showArrows,n,"marker"):void 0,i.capSelect?this._renderLineStylePicker(e,this._lineCapTypes,n,"cap"):void 0,i.colorPicker&&n.color?this._renderColorPicker(t,n.color.toHex(),n,"color"):void 0,i.stylePicker?this._renderLineStylePicker(o,this._lineStyleTypes,n,"style"):void 0,i.widthInput?this._renderNumberInput(r,n.width.toString(),n,"width"):void 0)}loadDependencies(){return c({dropdown:()=>import("@esri/calcite-components/dist/components/calcite-dropdown"),"dropdown-group":()=>import("@esri/calcite-components/dist/components/calcite-dropdown-group"),"dropdown-item":()=>import("@esri/calcite-components/dist/components/calcite-dropdown-item"),input:()=>import("@esri/calcite-components/dist/components/calcite-input"),"input-number":()=>import("@esri/calcite-components/dist/components/calcite-input-number"),label:()=>import("@esri/calcite-components/dist/components/calcite-label"),switch:()=>import("@esri/calcite-components/dist/components/calcite-switch")})}_afterComponentCreate(e){"value"in e&&null!=e.value&&"setNumberValue"in e&&e.setNumberValue({committing:!1,value:e.value,origin:"direct"})}_renderColorPicker(e,t,r,s){return d("calcite-label",{scale:"s"},e,d("calcite-input",{scale:"s",type:"color",value:t,onCalciteInputInput:e=>{const t=e.currentTarget;r.set(s,new o(t.value))}}))}_renderLineStylePicker(e,o,r,s){const i="style"===s,n="esri/widgets/UtilityNetworkAssociations/assets/img";function l(e,o){return d("calcite-dropdown-item",{label:e,selected:r[o]===e},d("div",{class:i?u.dropdownItemLinePattern:u.dropdownItemLineCap,style:`background-image:url(${t(`${n}/line-${i?"patterns":"caps"}/${e}.png`)})`}))}return d("calcite-label",{scale:"s"},e,d("calcite-dropdown",{class:u.dropdown,onCalciteDropdownSelect:e=>{const t=e.currentTarget;r.set(s,t.selectedItems[0].label)}},d("div",{class:u.dropdownTrigger,role:"button",slot:"trigger"},d("div",{class:i?u.dropdownSelectedItemLinePattern:u.dropdownSelectedItemLineCap,style:`background-image:url(${t(`${n}/line-${i?"patterns":"caps"}/${r[s]}.png`)})`})),d("calcite-dropdown-group",null,o.map((e=>l(e,s))))))}_renderNumberInput(e,t,o,r){return d("calcite-label",{scale:"s"},e,d("calcite-input-number",{afterCreate:this._afterComponentCreate,max:10,min:1,scale:"s",step:1,type:"number",value:t,onCalciteInputNumberChange:e=>{const t=e.currentTarget;o.set(r,t.value)}}))}_renderToggle(e,t,o,r){return d("div",{class:u.labelAndToggle},d("calcite-label",{scale:"s"},e),d("calcite-switch",{bind:this,checked:t,onCalciteSwitchChange:e=>{e.currentTarget.checked?o.set(r,new i({style:"arrow"})):o.set(r,null)}}))}};e([r()],w.prototype,"lineSymbol",void 0),e([r(),a("esri/widgets/UtilityNetworkAssociations/t9n/UtilityNetworkAssociations")],w.prototype,"messages",void 0),e([r()],w.prototype,"showArrows",void 0),e([r({type:p,nonNullable:!0})],w.prototype,"visibleElements",void 0),w=e([s("esri.widgets.UtilityNetworkAssociations.UtilityNetworkAssociationsLineSymbolPicker")],w);const g=w;export{g as default};