https://gislk.com/static/js/4589.46d96c3a.chunk.js

1/*! For license information please see 4589.46d96c3a.chunk.js.LICENSE.txt */
2"use strict";(self.webpackChunkgis_solutions_website=self.webpackChunkgis_solutions_website||[]).push([[4589],{4589:(t,e,n)=>{n.r(e),n.d(e,{ColorPickerHexInput:()=>m});var a,l,i,o,c=n(7528),r=n(7688),u=n(6956),s=n(2359),p=n(2020),h=n(6150),v=n(2329),x=n(4961),I=n(6499);const f="container",d="hex-input",C="opacity-input",y=(0,p.AH)(a||(a=(0,c.A)([":host{--calcite-internal-color-focus: var( --calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)) )}.hex-input{--calcite-input-text-background-color: var(--calcite-color-picker-input-background-color);--calcite-input-text-border-color: var(--calcite-color-picker-input-border-color);--calcite-input-text-text-color: var(--calcite-color-picker-input-text-color);--calcite-input-prefix-background-color: var(--calcite-color-picker-input-prefix-background-color);--calcite-input-prefix-text-color: var(--calcite-color-picker-input-prefix-text-color)}.opacity-input{--calcite-input-number-background-color: var(--calcite-color-picker-input-background-color);--calcite-input-number-border-color: var(--calcite-color-picker-input-border-color);--calcite-input-number-text-color: var(--calcite-color-picker-input-text-color);--calcite-input-suffix-background-color: var(--calcite-color-picker-input-suffix-background-color);--calcite-input-suffix-text-color: var(--calcite-color-picker-input-suffix-text-color)}: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=(0,s.A)();class m extends h.WF{constructor(){super(...arguments),this.hexInputRef=(0,v._)(),this.opacityInputRef=(0,v._)(),this.focusSetter=(0,I.u)()(this),this.internalColor=b,this.alphaChannel=!1,this.allowEmpty=!1,this.hexLabel="Hex",this.scale="m",this.value=(0,x.n)((0,x.h)(b,this.alphaChannel),this.alphaChannel,!0),this.calciteColorPickerHexInputChange=(0,h.lh)({cancelable:!1})}async setFocus(t){return this.focusSetter(()=>this.hexInputRef.value,t)}connectedCallback(){super.connectedCallback(),this.previousNonNullValue=this.value;const{allowEmpty:t,alphaChannel:e,value:n}=this;if(n){const t=(0,x.n)(n,e);return void((0,x.i)(t,e)&&this.internalSetValue(t,t,!1))}t&&this.internalSetValue(void 0,void 0,!1)}willUpdate(t){t.has("value")&&(this.hasUpdated||this.value!==(0,x.n)((0,x.h)(b,this.alphaChannel),this.alphaChannel,!0))&&this.internalSetValue(this.value,t.get("value"),!1)}onHexInputBlur(){const t=this.hexInputRef.value,e=t.value,n="#".concat(e),{allowEmpty:a,internalColor:l}=this,i=a&&!e,o=(0,x.a)(n);((0,x.b)(n,!0)||(0,x.b)(n,!1))&&this.onHexInputChange(),i||(0,x.i)(n)&&o||(t.value=a&&!l?"":this.formatHexForInternalInput((0,x.r)(l.object())))}onOpacityInputBlur(){const t=this.opacityInputRef.value,e=t.value,{allowEmpty:n,internalColor:a}=this;n&&!e||(t.value=n&&!a?"":this.formatOpacityForInternalInput(a))}onOpacityInputInput(){this.onOpacityInputChange()}onHexInputChange(){let t=this.hexInputRef.value.value;if(t){const e=(0,x.n)(t,!1);if((0,x.i)(e)&&this.alphaChannel&&this.internalColor){const n=(0,x.n)(this.internalColor.hexa(),!0).slice(-2);t="".concat(e+n)}}this.internalSetValue(t,this.value)}onOpacityInputChange(){const t=this.opacityInputRef.value;let e;if(t.value){var n;const a=(0,x.o)(Number(t.value));e=null===(n=this.internalColor)||void 0===n?void 0:n.alpha(a).hexa()}else e=t.value;this.internalSetValue(e,this.value)}onInputFocus(t){("calciteInternalInputTextFocus"===t.type?this.hexInputRef:this.opacityInputRef).value.selectText()}onHexInputInput(){const t="#".concat(this.hexInputRef.value.value),e=this.value;(0,x.i)(t,this.alphaChannel)&&(0,x.a)(t,this.alphaChannel)&&this.internalSetValue(t,e)}onInputKeyDown(t){const{altKey:e,ctrlKey:n,metaKey:a,shiftKey:l}=t,{alphaChannel:i,hexInputRef:o,internalColor:c,value:r}=this,{key:u}=t,s=t.composedPath();if("Tab"===u&&(0,x.b)(r,this.alphaChannel)||"Enter"===u)return s.includes(o.value)?this.onHexInputChange():this.onOpacityInputChange(),void("Enter"===u&&t.preventDefault());const p="ArrowDown"===u||"ArrowUp"===u,h=this.value;if(p){if(!r)return this.internalSetValue(this.previousNonNullValue,h),void t.preventDefault();const e="ArrowUp"===u?1:-1,n=l?10:1;return this.internalSetValue((0,x.h)(this.nudgeRGBChannels(c,n*e,s.includes(o.value)?"rgb":"a"),i),h),void t.preventDefault()}const v=e||n||a,I=1===u.length,f=x.d.test(u);!I||v||f||t.preventDefault()}onHexInputPaste(t){const e=t.clipboardData.getData("text");(0,x.i)(e,this.alphaChannel)&&(0,x.a)(e,this.alphaChannel)&&(t.preventDefault(),this.hexInputRef.value.value=e.slice(1),this.internalSetValue(e,this.value))}internalSetValue(t,e){let n=!(arguments.length>2&&void 0!==arguments[2])||arguments[2];if(t){const{alphaChannel:e}=this,a=(0,x.n)(t,e,e);if((0,x.i)(a,e)){const{internalColor:t}=this,l=(0,s.A)(a),i=(0,x.n)((0,x.h)(l,e),e),o=!t||i!==(0,x.n)((0,x.h)(t,e),e);return this.internalColor=l,this.previousNonNullValue=i,this.value=i,void(o&&n&&this.calciteColorPickerHexInputChange.emit())}}else if(this.allowEmpty)return this.internalColor=void 0,this.value=void 0,void(n&&this.calciteColorPickerHexInputChange.emit());this.value=e}formatHexForInternalInput(t){return t?t.replace("#","").slice(0,6):""}formatOpacityForInternalInput(t){return t?"".concat((0,x.c)(t.alpha())):""}nudgeRGBChannels(t,e,n){let a;const l=t.array(),i=l.slice(0,3);

2if("rgb"===n){a=[...i.map(t=>t+e),this.alphaChannel?l[3]:void 0]}else{const n=(0,x.o)((0,x.c)(t.alpha())+e);a=[...i,n]}return(0,s.A)(a)}render(){const{alphaChannel:t,hexLabel:e,internalColor:n,messages:a,scale:l,value:r}=this,s=this.formatHexForInternalInput(r),I=this.formatOpacityForInternalInput(n),y="l"===l?"m":"s";return(0,p.qy)(i||(i=(0,c.A)(["<div class=","><calcite-input-text class="," .label="," .maxLength="," @keydown="," @paste="," @calciteInputTextChange="," @calciteInputTextInput="," @calciteInternalInputTextBlur="," @calciteInternalInputTextFocus="," prefix-text=# .scale="," .value="," ","></calcite-input-text>","</div>"])),(0,h.CP)(f),(0,h.CP)(d),(null===a||void 0===a?void 0:a.hex)||e,this.alphaChannel?8:6,this.onInputKeyDown,this.onHexInputPaste,this.onHexInputChange,this.onHexInputInput,this.onHexInputBlur,this.onInputFocus,y,s,(0,v.K)(this.hexInputRef),t?(0,u.D)("opacity-input",(0,p.qy)(o||(o=(0,c.A)(["<calcite-input-number class="," .label="," .max="," max-length=3 .min="," number-button-type=none .numberingSystem="," @keydown="," @calciteInputNumberInput="," @calciteInternalInputNumberBlur="," @calciteInternalInputNumberFocus="," .scale="," suffix-text=% .value="," ","></calcite-input-number>"])),(0,h.CP)(C),null===a||void 0===a?void 0:a.opacity,x.O.max,x.O.min,this.numberingSystem,this.onInputKeyDown,this.onOpacityInputInput,this.onOpacityInputBlur,this.onInputFocus,y,I,(0,v.K)(this.opacityInputRef))):null)}}(l=m).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}]},l.styles=y,(0,r.c)("calcite-color-picker-hex-input",m)}}]);