@arcgis/core/widgets/UtilityNetworkAssociations/UtilityNetworkAssociationsLineSymbolPicker.js

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

/* COPYRIGHT Esri - https://js.arcgis.com/5.0.8/LICENSE.txt */
import{__decorate as e}from"tslib";import{getAssetUrl as t}from"../../assets.js";import o from"../../Color.js";import{property as i,subclass as r}from"../../core/accessorSupport/decorators.js";import s from"../../symbols/LineSymbolMarker.js";import n from"../../symbols/SimpleLineSymbol.js";import l from"../Widget.js";import{loadCalciteComponents as c}from"../support/componentsUtils.js";import{messageBundle as a,tsx as d}from"../support/widget.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:i,showArrows:r}},visibleElements:s}=this,n=this.lineSymbol;return d("div",{class:u.divControlsSymbolPicker},s.arrowsToggle?this._renderToggle(r,this.showArrows,n,"marker"):void 0,s.capSelect?this._renderLineStylePicker(e,this._lineCapTypes,n,"cap"):void 0,s.colorPicker&&n.color?this._renderColorPicker(t,n.color.toHex(),n,"color"):void 0,s.stylePicker?this._renderLineStylePicker(o,this._lineStyleTypes,n,"style"):void 0,s.widthInput?this._renderNumberInput(i,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,i,r){return d("calcite-label",{scale:"s"},e,d("calcite-input",{scale:"s",type:"color",value:t,onCalciteInputInput:e=>{const t=e.currentTarget;i.set(r,new o(t.value))}}))}_renderLineStylePicker(e,o,i,r){const s="style"===r,n="esri/widgets/UtilityNetworkAssociations/assets/img";function l(e,o){return d("calcite-dropdown-item",{label:e,selected:i[o]===e},d("div",{class:s?u.dropdownItemLinePattern:u.dropdownItemLineCap,style:`background-image:url(${t(`${n}/line-${s?"patterns":"caps"}/${e}.png`)})`}))}return d("calcite-label",{scale:"s"},e,d("calcite-dropdown",{class:u.dropdown,topLayerDisabled:this.topLayerDisabled,onCalciteDropdownSelect:e=>{const t=e.currentTarget;i.set(r,t.selectedItems[0].label)}},d("div",{class:u.dropdownTrigger,role:"button",slot:"trigger"},d("div",{class:s?u.dropdownSelectedItemLinePattern:u.dropdownSelectedItemLineCap,style:`background-image:url(${t(`${n}/line-${s?"patterns":"caps"}/${i[r]}.png`)})`})),d("calcite-dropdown-group",null,o.map(e=>l(e,r)))))}_renderNumberInput(e,t,o,i){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(i,t.value)}}))}_renderToggle(e,t,o,i){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(i,new s({style:"arrow"})):o.set(i,null)}}))}};e([i()],w.prototype,"lineSymbol",void 0),e([i(),a("esri/widgets/UtilityNetworkAssociations/t9n/UtilityNetworkAssociations")],w.prototype,"messages",void 0),e([i()],w.prototype,"showArrows",void 0),e([i({type:p,nonNullable:!0})],w.prototype,"visibleElements",void 0),w=e([r("esri.widgets.UtilityNetworkAssociations.UtilityNetworkAssociationsLineSymbolPicker")],w);const g=w;export{g as default};