https://iucn.cr/arcgis/home/11.5.0/js/calcite-components/calcite/XVCE2OUE.js

1/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
2See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
3v3.0.3 */
4import{a as x,h as v,k as B,l as f,m as $,n as p,o as m,p as y,q as o,r as c,s as T}from"./B7IG4G6I.js";import"./NUDAXIBZ.js";import"./EJZAAUYU.js";import{a as k}from"./RIMAR2EG.js";import{b as d}from"./SZONZQBZ.js";import{l as D}from"./SXYTJEOC.js";import{b as E}from"./H6E5FODU.js";import"./B4YIOD3M.js";import{J as V,e as F,f as C,v as O,w as S,x as I}from"./74XIV7EB.js";var g={container:"container",hexInput:"hex-input",opacityInput:"opacity-input"},U=F`:host{display:block}.container{display:flex;inline-size:100%;flex-wrap:nowrap;align-items:center}.hex-input{flex-grow:1;text-transform:uppercase}.opacity-input{inline-size:100px;margin-inline-start:-1px}:host([hidden]){display:none}[hidden]{display:none}`,b=x(),N=class extends S{constructor(){super(...arguments),this.internalColor=b,this.alphaChannel=!1,this.allowEmpty=!1,this.hexLabel="Hex",this.scale="m",this.value=o(c(b,this.alphaChannel),this.alphaChannel,!0),this.calciteColorPickerHexInputChange=O({cancelable:!1})}static{this.properties={internalColor:16,alphaChannel:5,allowEmpty:5,hexLabel:1,messages:0,numberingSystem:1,scale:3,value:3}}static{this.styles=U}async setFocus(){return await E(this),D(this.hexInputNode)}connectedCallback(){super.connectedCallback(),this.previousNonNullValue=this.value;let{allowEmpty:t,alphaChannel:e,value:a}=this;if(a){let n=o(a,e);p(n,e)&&this.internalSetValue(n,n,!1);return}t&&this.internalSetValue(void 0,void 0,!1)}load(){}willUpdate(t){t.has("value")&&(this.hasUpdated||this.value!==o(c(b,this.alphaChannel),this.alphaChannel,!0))&&this.internalSetValue(this.value,t.get("value"),!1)}loaded(){}onHexInputBlur(){let t=this.hexInputNode,e=t.value,a=`#${e}`,{allowEmpty:n,internalColor:i}=this,s=n&&!e,l=y(a);(m(a,!0)||m(a,!1))&&this.onHexInputChange(),!(s||p(a)&&l)&&(t.value=n&&!i?"":this.formatHexForInternalInput(T(i.object())))}onOpacityInputBlur(){let t=this.opacityInputNode,e=t.value,{allowEmpty:a,internalColor:n}=this;a&&!e||(t.value=a&&!n?"":this.formatOpacityForInternalInput(n))}onOpacityInputInput(){this.onOpacityInputChange()}onHexInputChange(){let t=this.hexInputNode.value;if(t){let e=o(t,!1);if(p(e)&&this.alphaChannel&&this.internalColor){let a=o(this.internalColor.hexa(),!0).slice(-2);t=`${e+a}`}}this.internalSetValue(t,this.value)}onOpacityInputChange(){let t=this.opacityInputNode,e;if(!t.value)e=t.value;else{let a=$(Number(t.value));e=this.internalColor?.alpha(a).hexa()}this.internalSetValue(e,this.value)}onInputFocus(t){t.type==="calciteInternalInputTextFocus"?this.hexInputNode.selectText():this.opacityInputNode.selectText()}onHexInputInput(){let t=`#${this.hexInputNode.value}`,e=this.value;p(t,this.alphaChannel)&&y(t,this.alphaChannel)&&this.internalSetValue(t,e)}onInputKeyDown(t){let{altKey:e,ctrlKey:a,metaKey:n,shiftKey:i}=t,{alphaChannel:s,hexInputNode:l,internalColor:r,value:u}=this,{key:h}=t,w=t.composedPath();if(h==="Tab"&&m(u,this.alphaChannel)||h==="Enter"){w.includes(l)?this.onHexInputChange():this.onOpacityInputChange(),h==="Enter"&&t.preventDefault();return}let K=h==="ArrowDown"||h==="ArrowUp",H=this.value;if(K){if(!u){this.internalSetValue(this.previousNonNullValue,H),t.preventDefault();return}let A=h==="ArrowUp"?1:-1,z=i?10:1;this.internalSetValue(c(this.nudgeRGBChannels(r,z*A,w.includes(l)?"rgb":"a"),s),H),t.preventDefault();return}let P=e||a||n,R=h.length===1,L=B.test(h);R&&!P&&!L&&t.preventDefault()}onHexInputPaste(t){let e=t.clipboardData.getData("text");p(e,this.alphaChannel)&&y(e,this.alphaChannel)&&(t.preventDefault(),this.hexInputNode.value=e.slice(1),this.internalSetValue(e,this.value))}internalSetValue(t,e,a=!0){if(t){let{alphaChannel:n}=this,i=o(t,n,n);if(p(i,n)){let{internalColor:s}=this,l=x(i),r=o(c(l,n),n),u=!s||r!==o(c(s,n),n);this.internalColor=l,this.previousNonNullValue=r,this.value=r,u&&a&&this.calciteColorPickerHexInputChange.emit();return}}else if(this.allowEmpty){this.internalColor=void 0,this.value=void 0,a&&this.calciteColorPickerHexInputChange.emit();return}this.value=e}storeHexInputRef(t){this.hexInputNode=t}storeOpacityInputRef(t){this.opacityInputNode=t}formatHexForInternalInput(t){return t?t.replace("#","").slice(0,6):""}formatOpacityForInternalInput(t){return t?`${f(t.alpha())}`:""}nudgeRGBChannels(t,e,a){let n,i=t.array(),s=i.slice(0,3);if(a==="rgb")n=[...s.map(l=>l+e),this.alphaChannel?i[3]:void 0];else{let l=$(f(t.alpha())+e);n=[...s,l]}return x(n)}render(){let{alphaChannel:t,hexLabel:e,internalColor:a,messages:n,scale:i,value:s}=this,l=this.formatHexForInternalInput(s),r=this.formatOpacityForInternalInput(a),u=i==="l"?"m":"s";return C`<div class=${I(g.container)}><calcite-input-text class=${I(g.hexInput)} .label=${n?.hex||e} .maxLength=${this.alphaChannel?8:6} @keydown=${this.onInputKeyDown} @paste=${this.onHexInputPaste} @calciteInputTextChange=${this.onHexInputChange} @calciteInputTextInput=${this.onHexInputInput} @calciteInternalInputTextBlur=${this.onHexInputBlur} @calciteInternalInputTextFocus=${this.onInputFocus} prefix-text=# .scale=${u} .value=${l} ${d(this.storeHexInputRef)}></calcite-input-text>${t?k("opacity-input",C`<calcite-input-number class=${I(g.opacityInput)} .label=${n?.opacity} .max=${v.max} max-length=3 .min=${v.min} number-button-type=none .numberingSystem=${this.numberingSystem} @keydown=${this.onInputKeyDown} @calciteInputNumberInput=${this.onOpacityInputInput} @calciteInternalInputNumberBlur=${this.onOpacityInputBlur} @calciteInternalInputNumberFocus=${this.onInputFocus} .scale=${u} suffix-text=% .value=${r} ${d(this.storeOpacityInputRef)}></calcite-input-number>`):null}</div>`}};V("calcite-color-picker-hex-input",N);export{N as ColorPickerHexInput};