@esri/calcite-components/dist/calcite/C4C4DBV4.js

Web Components for Esri's Calcite Design System.

/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
v3.2.1 */
import{a as x,h as y,k as D,l as v,m as g,n as p,o as d,p as m,q as r,r as c,s as L}from"./TGDV7BPX.js";import"./YSI7ZYDZ.js";import{a as F}from"./YXZ62PQO.js";import{b as C}from"./5RDOSP2E.js";import{l as T}from"./3ADX47DD.js";import{d as B}from"./HPN2C7M6.js";import"./JOSABGK6.js";import"./NNVH7JUI.js";import{E as O,F as I,R as E,c as N,d as f,q as S}from"./BJZTU5BQ.js";var b={container:"container",hexInput:"hex-input",opacityInput:"opacity-input"},U=N`: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}`,$=x(),V=class extends O{constructor(){super(...arguments),this.internalColor=$,this.alphaChannel=!1,this.allowEmpty=!1,this.hexLabel="Hex",this.scale="m",this.value=r(c($,this.alphaChannel),this.alphaChannel,!0),this.calciteColorPickerHexInputChange=S({cancelable:!1})}static{this.properties={internalColor:[16,{},{state:!0}],alphaChannel:[5,{},{type:Boolean}],allowEmpty:[5,{},{type:Boolean}],hexLabel:1,messages:[0,{},{attribute:!1}],numberingSystem:1,scale:[3,{},{reflect:!0}],value:[3,{},{reflect:!0}]}}static{this.styles=U}async setFocus(){return await B(this),T(this.hexInputNode)}connectedCallback(){super.connectedCallback(),this.previousNonNullValue=this.value;let{allowEmpty:t,alphaChannel:e,value:a}=this;if(a){let n=r(a,e);p(n,e)&&this.internalSetValue(n,n,!1);return}t&&this.internalSetValue(void 0,void 0,!1)}willUpdate(t){t.has("value")&&(this.hasUpdated||this.value!==r(c($,this.alphaChannel),this.alphaChannel,!0))&&this.internalSetValue(this.value,t.get("value"),!1)}onHexInputBlur(){let t=this.hexInputNode,e=t.value,a=`#${e}`,{allowEmpty:n,internalColor:l}=this,s=n&&!e,i=m(a);(d(a,!0)||d(a,!1))&&this.onHexInputChange(),!(s||p(a)&&i)&&(t.value=n&&!l?"":this.formatHexForInternalInput(L(l.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 e=this.hexInputNode.value;if(e){let a=r(e,!1);if(p(a)&&this.alphaChannel&&this.internalColor){let l=r(this.internalColor.hexa(),!0).slice(-2);e=`${a+l}`}}this.internalSetValue(e,this.value)}onOpacityInputChange(){let t=this.opacityInputNode,e;if(!t.value)e=t.value;else{let a=g(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)&&m(t,this.alphaChannel)&&this.internalSetValue(t,e)}onInputKeyDown(t){let{altKey:e,ctrlKey:a,metaKey:n,shiftKey:l}=t,{alphaChannel:s,hexInputNode:i,internalColor:o,value:h}=this,{key:u}=t,H=t.composedPath();if(u==="Tab"&&d(h,this.alphaChannel)||u==="Enter"){H.includes(i)?this.onHexInputChange():this.onOpacityInputChange(),u==="Enter"&&t.preventDefault();return}let k=u==="ArrowDown"||u==="ArrowUp",w=this.value;if(k){if(!h){this.internalSetValue(this.previousNonNullValue,w),t.preventDefault();return}let z=u==="ArrowUp"?1:-1,P=l?10:1;this.internalSetValue(c(this.nudgeRGBChannels(o,P*z,H.includes(i)?"rgb":"a"),s),w),t.preventDefault();return}let A=e||a||n,R=u.length===1,K=D.test(u);R&&!A&&!K&&t.preventDefault()}onHexInputPaste(t){let e=t.clipboardData.getData("text");p(e,this.alphaChannel)&&m(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,l=r(t,n,n);if(p(l,n)){let{internalColor:s}=this,i=x(l),o=r(c(i,n),n),h=!s||o!==r(c(s,n),n);this.internalColor=i,this.previousNonNullValue=o,this.value=o,h&&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?`${v(t.alpha())}`:""}nudgeRGBChannels(t,e,a){let n,l=t.array(),s=l.slice(0,3);if(a==="rgb")n=[...s.map(o=>o+e),this.alphaChannel?l[3]:void 0];else{let i=g(v(t.alpha())+e);n=[...s,i]}return x(n)}render(){let{alphaChannel:t,hexLabel:e,internalColor:a,messages:n,scale:l,value:s}=this,i=this.formatHexForInternalInput(s),o=this.formatOpacityForInternalInput(a),h=l==="l"?"m":"s";return f`<div class=${I(b.container)}><calcite-input-text class=${I(b.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=${h} .value=${i} ${C(this.storeHexInputRef)}></calcite-input-text>${t?F("opacity-input",f`<calcite-input-number class=${I(b.opacityInput)} .label=${n?.opacity} .max=${y.max} max-length=3 .min=${y.min} number-button-type=none .numberingSystem=${this.numberingSystem} @keydown=${this.onInputKeyDown} @calciteInputNumberInput=${this.onOpacityInputInput} @calciteInternalInputNumberBlur=${this.onOpacityInputBlur} @calciteInternalInputNumberFocus=${this.onInputFocus} .scale=${h} suffix-text=% .value=${o} ${C(this.storeOpacityInputRef)}></calcite-input-number>`):null}</div>`}};E("calcite-color-picker-hex-input",V);export{V as ColorPickerHexInput};