https://maps.watertown-ny.gov/portal/home/11.5.0/js/calcite-components/calcite/WHHZYHGQ.js

4=this,o=e&&!a,l=E(a),n=o||i==="auto"&&l||i===l,r=o?null:n?b(a):t;n||this.showIncompatibleColorWarning(a,i),this.setMode(i,!1),this.internalColorSet(r,!1,"initial"),this.updateStaticDimensions(this.scale),this.updateDynamicDimensions(k[this.scale].minWidth);let h=`${F}${this.storageId}`;this.storageId&&localStorage.getItem(h)&&(this.savedColors=JSON.parse(localStorage.getItem(h)))}willUpdate(e){(e.has("allowEmpty")&&(this.hasUpdated||this.allowEmpty!==!1)||e.has("clearable")&&(this.hasUpdated||this.clearable!==!1))&&this.handleAllowEmptyOrClearableChange(),e.has("alphaChannel")&&(this.hasUpdated||this.alphaChannel!==!1)&&this.handleAlphaChannelChange(this.alphaChannel),this.hasUpdated&&(e.has("alphaChannel")&&this.alphaChannel!==!1||e.has("staticDimensions")&&this.staticDimensions!==k.m)&&this.handleAlphaChannelDimensionsChange(),(e.has("alphaChannel")&&(this.hasUpdated||this.alphaChannel!==!1)||e.has("format")&&(this.hasUpdated||this.format!=="auto"))&&this.handleFormatOrAlphaChannelChange(),e.has("scale")&&(this.hasUpdated||this.scale!=="m")&&this.handleScaleChange(this.scale)}updated(){te(this)}loaded(){this.handleAlphaChannelDimensionsChange()}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("pointermove",this.globalPointerMoveHandler),window.removeEventListener("pointerup",this.globalPointerUpHandler),this.resizeObserver?.disconnect()}observeResize(){this.resizeObserver?.observe(this.el)}handleAllowEmptyOrClearableChange(){this.isClearable=this.clearable||this.allowEmpty}handleAlphaChannelChange(e){let{format:t}=this;e&&t!=="auto"&&!D(t)&&(console.warn(`ignoring alphaChannel as the current format (${t}) does not support alpha`),this.alphaChannel=!1)}handleAlphaChannelDimensionsChange(){this.drawColorControls()}handleColorChange(e,t){this.drawColorControls(),this.updateChannelsFromColor(e),this.previousColor=t}handleFormatOrAlphaChannelChange(){this.setMode(this.format),this.internalColorSet(this.color,!1,"internal")}handleScaleChange(e="m"){this.updateStaticDimensions(e),this.updateCanvasSize(),this.drawColorControls()}handleValueChange(e,t){let{isClearable:i,format:a}=this,o=!i||e,l=!1;if(o){let d=E(e);if(!d||a!=="auto"&&d!==a){this.showIncompatibleColorWarning(e,a),this._value=t;return}l=this.mode!==d,this.setMode(d,this.internalColorUpdateContext===null)}let n=this.activeCanvasInfo;if(this.internalColorUpdateContext==="initial")return;if(this.internalColorUpdateContext==="user-interaction"){this.calciteColorPickerInput.emit(),n||this.calciteColorPickerChange.emit();return}let r=i&&!e?null:b(e!=null&&typeof e=="object"&&D(this.mode)?se(e):e),h=!W(r,this.color);(l||h)&&this.internalColorSet(r,this.alphaChannel&&!(this.mode.endsWith("a")||this.mode.endsWith("a-css"))||this.internalColorUpdateContext==="internal","internal")}handleTabActivate(e){this.channelMode=e.currentTarget.getAttribute("data-color-mode"),this.updateChannelsFromColor(this.color)}handleColorFieldScopeKeyDown(e){let{key:t}=e,i={ArrowUp:{x:0,y:-10},ArrowRight:{x:10,y:0},ArrowDown:{x:0,y:10},ArrowLeft:{x:-10,y:0}};i[t]&&(e.preventDefault(),this.scopeOrientation=t==="ArrowDown"||t==="ArrowUp"?"vertical":"horizontal",this.captureColorFieldColor(this.colorFieldScopeLeft+i[t].x||0,this.colorFieldScopeTop+i[t].y||0,!1))}handleHueScopeKeyDown(e){let t=e.shiftKey?10:1,{key:i}=e,a={ArrowUp:1,ArrowRight:1,ArrowDown:-1,ArrowLeft:-1};if(a[i]){e.preventDefault();let o=a[i]*t,l=this.baseColorFieldColor.hue(),n=this.baseColorFieldColor.hue(l+o);this.internalColorSet(n,!1)}}handleHexInputChange(e){e.stopPropagation();let{isClearable:t,color:i}=this,a=e.target.value;if(t&&!a){this.internalColorSet(null);return}let o=i&&P(y(i,D(this.mode)));a!==o&&this.internalColorSet(b(a))}handleSavedColorSelect(e){let t=e.currentTarget;this.internalColorSet(b(t.color))}handleChannelInput(e){let t=e.currentTarget,i=Number(t.getAttribute("data-channel-index")),a=i===3?S.max:this.channelMode==="rgb"?$[Object.keys($)[i]]:p[Object.keys(p)[i]],o;if(!t.value)o="",this.isActiveChannelInputEmpty=!0,this.upOrDownArrowKeyTracker=null;else{let l=Number(t.value)+this.shiftKeyChannelAdjustment;o=de(l,0,a).toString()}t.value=o,o!==""&&this.shiftKeyChannelAdjustment!==0?this.handleChannelChange(e):o!==""&&this.handleChannelChange(e)}handleChannelBlur(e){let t=e.currentTarget,i=Number(t.getAttribute("data-channel-index")),a=[...this.channels];!t.value&&!this.isClearable&&(t.value=a[i]?.toString())}handleChannelFocus(e){e.currentTarget.selectText()}handleChannelKeyUpOrDown(e){this.shiftKeyChannelAdjustment=0;let{key:t}=e;if(t!=="ArrowUp"&&t!=="ArrowDown"||!e.composedPath().some(o=>o.classList?.contains(s.channel)))return;let{shiftKey:i}=e;if(e.preventDefault(),!this.color){this.internalColorSet(this.previousColor),e.stopPropagation();return}let a=9;this.shiftKeyChannelAdjustment=t==="ArrowUp"&&i?a:t==="ArrowDown"&&i?-9:0,t==="ArrowUp"&&(this.upOrDownArrowKeyTracker="up"),t==="ArrowDown"&&(this.upOrDownArrowKeyTracker="down")}getChannelInputLimit(e){return this.channelMode==="rgb"?$[Object.keys($)[e]]:p[Object.keys(p)[e]]}handleChannelChange(e){let t=e.currentTarget,i=Number(t.getAttribute("data-channel-index")),a=[...this.channels];if(this.isClearable&&!t.value){this.channels=[null,null,null,null],this.internalColorSet(null);return}let o=i===3;this.isActiveChannelInputEmpty&&this.upOrDownArrowKeyTracker&&(t.value=this.upOrDownArrowKeyTracker==="up"?(a[i]+1<=this.getChannelInputLimit(i)?a[i]+1:this.getChannelInputLimit(i)).toString():(a[i]-1>=0?a[i]-1:0).toString(),this.isActiveChannelInputEmpty=!1,this.upOrDownArrowKeyTracker=null);let l=t.value?Number(t.value):a[i];a[i]=o?H(l):l,this.updateColorFromChannels(a)}handleSavedColorKeyDown(e){oe(e.key)&&(e.preventDefault(),this.handleSavedColorSelect(e))}handleColorFieldPointerDown(e){this.handleCanvasControlPointerDown(e,this.colorFieldRenderingContext,this.captureColorFieldColor,this.colorFieldScopeNode)}focusScope(e){requestAnimationFrame(()=>{e.focus()})}handleHueSliderPointerDown(e){this.handleCanvasControlPointerDown(e,this.hueSliderRenderingContext,this.captureHueSliderColor,this.hueScopeNode)}handleOpacitySliderPointerDown(e){this.handleCanvasControlPointerDown(e,this.opacitySliderRenderingContext,this.captureOpacitySliderValue,this.opacityScopeNode)}handleCanvasControlPointerDown(e,t,i,a){R(e)&&(window.addEventListener("pointermove",this.globalPointerMoveHandler),window.addEventListener("pointerup",this.globalPointerUpHandler,{once:!0}),this.activeCanvasInfo={context:t,bounds:t.canvas.getBoundingClientRect()},i.call(this,e.offsetX,e.offsetY),this.focusScope(a))}storeColorFieldScope(e){this.colorFieldScopeNode=e}storeHueScope(e){this.hueScopeNode=e}handleKeyDown(e){e.key==="Enter"&&e.preventDefault()}showIncompatibleColorWarning(e,t){console.warn(`ignoring color value (${e}) as it is not compatible with the current format (${t})`)}setMode(e,t=!0){let i=e==="auto"?this.mode:e;this.mode=this.ensureCompatibleMode(i,t)}ensureCompatibleMode(e,t){let{alphaChannel:i}=this,a=D(e);if(i&&!a){let o=re(e);return t&&console.warn(`setting format to (${o}) as the provided one (${e}) does not support alpha`),o}if(!i&&a){let o=N(e);return t&&console.warn(`setting format to (${o}) as the provided one (${e}) does not support alpha`),o}return e}captureHueSliderColor(e){let t=L/this.effectiveSliderWidth*e;this.internalColorSet(this.baseColorFieldColor.hue(t),!1)}captureOpacitySliderValue(e){let t=H(S.max/this.effectiveSliderWidth*e);this.internalColorSet(this.baseColorFieldColor.alpha(t),!1)}internalColorSet(e,t=!0,i="user-interaction"){t&&W(e,this.color)||(this.internalColorUpdateContext=i,this.color=e,this.value=this.toValue(e),this.internalColorUpdateContext=null)}toValue(e,t=this.mode){if(!e)return null;if(t.includes("hex")){let a=t===K.HEXA;return P(y(e.round(),a),a)}if(t.includes("-css")){let a=e[t.replace("-css","").replace("a","")]().round().string();if((t.endsWith("a")||t.endsWith("a-css"))&&e.alpha()===1){let o=a.slice(0,3),l=a.slice(4,-1);return`${o}a(${l}, ${e.alpha()})`}return a}let i=e[N(t)]().round().object();return t.endsWith("a")?ne(i):i}getSliderCapSpacing(){let{staticDimensions:{slider:{height:e},thumb:{radius:t}}}=this;return t*2-e}updateStaticDimensions(e="m"){this.staticDimensions=k[e]}deleteColor(){let e=y(this.color,this.alphaChannel);if(!(this.savedColors.indexOf(e)>-1))return;let t=this.savedColors.filter(a=>a!==e);this.savedColors=t;let i=`${F}${this.storageId}`;this.storageId&&localStorage.setItem(i,JSON.stringify(t))}saveColor(){let e=y(this.color,this.alphaChannel);if(this.savedColors.indexOf(e)>-1)return;let t=[...this.savedColors,e];this.savedColors=t;let i=`${F}${this.storageId}`;this.storageId&&localStorage.setItem(i,JSON.stringify(t))}drawColorField(){let e=this.colorFieldRenderingContext,{width:t,height:i}=this.dynamicDimensions.colorField;e.fillStyle=this.baseColorFieldColor.hsv().saturationv(100).value(100).alpha(1).string(),e.fillRect(0,0,t,i);let a=e.createLinearGradient(0,0,t,0);a.addColorStop(0,"rgba(255,255,255,1)"),a.addColorStop(1,"rgba(255,255,255,0)"),e.fillStyle=a,e.fillRect(0,0,t,i);let o=e.createLinearGradient(0,0,0,i);o.addColorStop(0,"rgba(0,0,0,0)"),o.addColorStop(1,"rgba(0,0,0,1)"),e.fillStyle=o,e.fillRect(0,0,t,i),this.drawActiveColorFieldColor()}setCanvasContextSize(e,{height:t,width:i}){if(!e)return;let a=window.devicePixelRatio||1;e.width=i*a,e.height=t*a,e.style.height=`${t}px`,e.style.width=`${i}px`,e.getContext("2d").scale(a,a)}initColorField(e){e&&(this.colorFieldRenderingContext=e.getContext("2d"),this.updateCanvasSize("color-field"),this.drawColorControls())}initHueSlider(e){e&&(this.hueSliderRenderingContext=e.getContext("2d"),this.updateCanvasSize("hue-slider"),this.drawHueSlider())}initOpacitySlider(e){e&&(this.opacitySliderRenderingContext=e.getContext("2d"),this.updateCanvasSize("opacity-slider"),this.drawOpacitySlider())}updateCanvasSize(e="all"){let{dynamicDimensions:t,staticDimensions:i}=this;(e==="all"||e==="color-field")&&this.setCanvasContextSize(this.colorFieldRenderingContext?.canvas,t.colorField);let a={width:this.effectiveSliderWidth,height:i.slider.height+(i.thumb.radius-t.slider.height/2)*2};(e==="all"||e==="hue-slider")&&this.setCanvasContextSize(this.hueSliderRenderingContext?.canvas,a),(e==="all"||e==="opacity-slider")&&this.setCanvasContextSize(this.opacitySliderRenderingContext?.canvas,a)}drawActiveColorFieldColor(){let{color:e}=this;if(!e)return;let t=e.hsv(),{staticDimensions:{thumb:{radius:i}}}=this,{width:a,height:o}=this.dynamicDimensions.colorField,l=t.saturationv()/(p.s/a),n=o-t.value()/(p.v/o);requestAnimationFrame(()=>{this.colorFieldScopeLeft=l,this.colorFieldScopeTop=n}),this.drawThumb(this.colorFieldRenderingContext,i,l,n,t,!1)}drawThumb(e,t,i,a,o,l){let n=2*Math.PI,r=1;if(e.beginPath(),e.arc(i,a,t,0,n),e.fillStyle="#fff",e.fill(),e.strokeStyle="rgba(0,0,0,0.3)",e.lineWidth=r,e.stroke(),l&&o.alpha()<1){let d=e.createPattern(this.getCheckeredBackgroundPattern(),"repeat");e.beginPath(),e.arc(i,a,t-3,0,n),e.fillStyle=d,e.fill()}e.globalCompositeOperation="source-atop",e.beginPath(),e.arc(i,a,t-3,0,n);let h=l?o.alpha():1;e.fillStyle=o.rgb().alpha(h).string(),e.fill(),e.globalCompositeOperation="source-over"}drawActiveHueSliderColor(){let{color:e}=this;if(!e)return;let t=e.hsv().saturationv(100).value(100),{staticDimensions:{thumb:{radius:i}}}=this,a=this.effectiveSliderWidth,o=t.hue()/(L/a),l=i,n=this.getSliderBoundX(o,a,i);requestAnimationFrame(()=>{this.hueScopeLeft=n}),this.drawThumb(this.hueSliderRenderingContext,i,n,l,t,!1)}drawHueSlider(){let e=this.hueSliderRenderingContext,{staticDimensions:{slider:{height:t},thumb:{radius:i}}}=this,a=0,o=i-t/2,l=this.effectiveSliderWidth,n=e.createLinearGradient(0,0,l,0),r=["red","yellow","lime","cyan","blue","magenta","#ff0004"],h=1/(r.length-1),d=0;r.forEach(u=>{n.addColorStop(d,b(u).string()),d+=h}),e.clearRect(0,0,l,t+this.getSliderCapSpacing()*2),this.drawSliderPath(e,t,l,a,o),e.fillStyle=n,e.fill(),e.strokeStyle="rgba(0,0,0,0.3)",e.lineWidth=1,e.stroke(),this.drawActiveHueSliderColor()}drawOpacitySlider(){let e=this.opacitySliderRenderingContext,{baseColorFieldColor:t,staticDimensions:{slider:{height:i},thumb:{radius:a}}}=this,o=0,l=a-i/2,n=this.effectiveSliderWidth;e.clearRect(0,0,n,i+this.getSliderCapSpacing()*2);let r=e.createLinearGradient(0,l,n,0),h=t.rgb().alpha(0),d=t.rgb().alpha(.5),u=t.rgb().alpha(1);r.addColorStop(0,h.string()),r.addColorStop(.5,d.string()),r.addColorStop(1,u.string()),this.drawSliderPath(e,i,n,o,l);let g=e.createPattern(this.getCheckeredBackgroundPattern(),"repeat");e.fillStyle=g,e.fill(),e.fillStyle=r,e.fill(),e.strokeStyle="rgba(0,0,0,0.3)",e.lineWidth=1,e.stroke(),this.drawActiveOpacitySliderColor()}drawSliderPath(e,t,i,a,o){let l=t/2+1;e.beginPath(),e.moveTo(a+l,o),e.lineTo(a+i-l,o),e.quadraticCurveTo(a+i,o,a+i,o+l),e.lineTo(a+i,o+t-l),e.quadraticCurveTo(a+i,o+t,a+i-l,o+t),e.lineTo(a+l,o+t),e.quadraticCurveTo(a,o+t,a,o+t-l),e.lineTo(a,o+l),e.quadraticCurveTo(a,o,a+l,o),e.closePath()}getCheckeredBackgroundPattern(){if(this.checkerPattern)return this.checkerPattern;let e=document.createElement("canvas");e.width=10,e.height=10;let t=e.getContext("2d");return t.fillStyle="#ccc",t.fillRect(0,0,10,10),t.fillStyle="#fff",t.fillRect(0,0,5,5),t.fillRect(5,5,5,5),this.checkerPattern=e,e}drawActiveOpacitySliderColor(){let{color:e}=this;if(!e)return;let t=e,{staticDimensions:{thumb:{radius:i}}}=this,a=this.effectiveSliderWidth,o=O(t.alpha())/(S.max/a),l=i,n=this.getSliderBoundX(o,a,i);requestAnimationFrame(()=>{this.opacityScopeLeft=n}),this.drawThumb(this.opacitySliderRenderingContext,i,n,l,t,!0)}getSliderBoundX(e,t,i){let a=pe(e,t,i);return a===0?e:a===-1?j(e,0,t,i,i*2):j(e,0,t,t-i*2,t-i)}storeOpacityScope(e){this.opacityScopeNode=e}handleOpacityScopeKeyDown(e){let t=e.shiftKey?10:1,{key:i}=e,a={ArrowUp:.01,ArrowRight:.01,ArrowDown:-.01,ArrowLeft:-.01};if(a[i]){e.preventDefault();let o=a[i]*t,l=this.baseColorFieldColor.alpha(),n=this.baseColorFieldColor.alpha(l+o);this.internalColorSet(n,!1)}}updateColorFromChannels(e){this.internalColorSet(b(e,this.channelMode))}updateChannelsFromColor(e){this.channels=e?this.toChannels(e):[null,null,null,null]}toChannels(e){let{channelMode:t}=this,i=e[t]().array().map((a,o)=>o===3?a:Math.floor(a));return i.length===3&&i.push(1),i}getAdjustedScopePosition(e,t){return[e-U/2,t-U/2]}render(){let{channelsDisabled:e,color:t,colorFieldScopeLeft:i,colorFieldScopeTop:a,staticDimensions:{thumb:{radius:o}},hexDisabled:l,hueScopeLeft:n,messages:r,alphaChannel:h,opacityScopeLeft:d,savedColors:u,savedDisabled:g,scale:v,scopeOrientation:Ce}=this,_=this.effectiveSliderWidth,B=t?y(t,h):null,me=o,ve=n??_*m.hue()/p.h,ge=o,fe=d??_*O(m.alpha())/S.max,q=t===void 0,T=Ce==="vertical",[be,Se]=this.getAdjustedScopePosition(i,a),[ye,we]=this.getAdjustedScopePosition(ve,me),[xe,$e]=this.getAdjustedScopePosition(fe,ge);return ie({disabled:this.disabled,children:C`<div class=${c(s.container)}><div class=${c(s.controlAndScope)}><canvas class=${c(s.colorField)} @pointerdown=${this.handleColorFieldPointerDown} ${f(this.initColorField)}></canvas><div .ariaLabel=${T?r.value:r.saturation} .ariaValueMax=${T?p.v:p.s} aria-valuemin=0 .ariaValueNow=${(T?t?.saturationv():t?.value())||"0"} class=${c({[s.scope]:!0,[s.colorFieldScope]:!0})} @keydown=${this.handleColorFieldScopeKeyDown} role=slider style=${x({top:`${Se||0}px`,left:`${be||0}px`})} tabindex=0 ${f(this.storeColorFieldScope)}></div></div><div class=${c(s.previewAndSliders)}><calcite-color-picker-swatch class=${c(s.preview)} .color=${B} .scale=${this.alphaChannel?"l":this.scale}></calcite-color-picker-swatch><div class=${c(s.sliders)}><div class=${c(s.controlAndScope)}><canvas class=${c({[s.slider]:!0,[s.hueSlider]:!0})} @pointerdown=${this.handleHueSliderPointerDown} ${f(this.initHueSlider)}></canvas><div .ariaLabel=${r.hue} .ariaValueMax=${p.h} aria-valuemin=0 .ariaValueNow=${t?.round().hue()||m.round().hue()} class=${c({[s.scope]:!0,[s.hueScope]:!0})} @keydown=${this.handleHueScopeKeyDown} role=slider style=${x({top:`${we}px`,left:`${ye}px`})} tabindex=0 ${f(this.storeHueScope)}></div></div>${h?C`<div class=${c(s.controlAndScope)}><canvas class=${c({[s.slider]:!0,[s.opacitySlider]:!0})} @pointerdown=${this.handleOpacitySliderPointerDown} ${f(this.initOpacitySlider)}></canvas><div .ariaLabel=${r.opacity} .ariaValueMax=${S.max} .ariaValueMin=${S.min} .ariaValueNow=${(t||m).round().alpha()} class=${c({[s.scope]:!0,[s.opacityScope]:!0})} @keydown=${this.handleOpacityScopeKeyDown} role=slider style=${x({top:`${$e}px`,left:`${xe}px`})} tabindex=0 ${f(this.storeOpacityScope)}></div></div>`:null}</div></div>${l&&e?null:C`<div class=${c({[s.controlSection]:!0,[s.section]:!0})}><div class=${c(s.hexAndChannelsGroup)}>${l?null:C`<div class=${c(s.hexOptions)}><calcite-color-picker-hex-input .allowEmpty=${this.isClearable} .alphaChannel=${h} class=${c(s.control)} .messages=${r} .numberingSystem=${this.numberingSystem} @calciteColorPickerHexInputChange=${this.handleHexInputChange} .scale=${v} .value=${B}></calcite-color-picker-hex-input></div>`}${e?null:C`<calcite-tabs class=${c({[s.colorModeContainer]:!0,[s.splitSection]:!0})} .scale=${v==="l"?"m":"s"}><calcite-tab-nav slot=title-group>${this.renderChannelsTabTitle("rgb")}${this.renderChannelsTabTitle("hsv")}</calcite-tab-nav>${this.renderChannelsTab("rgb")}${this.renderChannelsTab("hsv")}</calcite-tabs>`}</div></div>`}${g?null:C`<div class=${c({[s.savedColorsSection]:!0,[s.section]:!0})}><div class=${c(s.header)}><label>${r.saved}</label><div class=${c(s.savedColorsButtons)}><calcite-button appearance=transparent class=${c(s.deleteColor)} .disabled=${q} icon-start=minus kind=neutral .label=${r.deleteColor} @click=${this.deleteColor} .scale=${v} type=button></calcite-button><calcite-button appearance=transparent class=${c(s.saveColor)} .disabled=${q} icon-start=plus kind=neutral .label=${r.saveColor} @click=${this.saveColor} .scale=${v} type=button></calcite-button></div></div>${u.length>0?C`<div class=${c(s.savedColors)}>${le(u,I=>I,I=>C`<calcite-color-picker-swatch class=${c(s.savedColor)} .color=${I} @click=${this.handleSavedColorSelect} @keydown=${this.handleSavedColorKeyDown} .scale=${v} tabindex=0></calcite-color-picker-swatch>`)}</div>`:null}</div>`}</div>`})}renderChannelsTabTitle(e){let{channelMode:t,messages:i}=this,a=e===t,o=e==="rgb"?i.rgb:i.hsv;return A(e,C`<calcite-tab-title class=${c(s.colorMode)} data-color-mode=${e??w} @calciteTabsActivate=${this.handleTabActivate} .selected=${a}>${o}</calcite-tab-title>`)}renderChannelsTab(e){let{isClearable:t,channelMode:i,channels:a,messages:o,alphaChannel:l}=this,n=e===i,r=e==="rgb"?[o.red,o.green,o.blue]:[o.hue,o.saturation,o.value],h=Q(this.el),d=l?a:a.slice(0,3);return A(e,C`<calcite-tab class=${c(s.control)} .selected=${n}><div class=${c(s.channels)} dir=ltr>${d.map((u,g)=>{let v=g===3;return v&&(u=t&&!u?u:O(u)),this.renderChannel(u,g,r[g],h,v?"%":"")})}</div></calcite-tab>`)}renderChannel(e,t,i,a,o){return A(t,C`<calcite-input-number class=${c(s.channel)} data-channel-index=${t??w} dir=${a??w} .label=${i} lang=${this.messages._lang??w} number-button-type=none .numberingSystem=${this.numberingSystem} @keydown=${this.handleKeyDown} @calciteInputNumberChange=${this.handleChannelChange} @calciteInputNumberInput=${this.handleChannelInput} @calciteInternalInputNumberBlur=${this.handleChannelBlur} @calciteInternalInputNumberFocus=${this.handleChannelFocus} .scale=${this.scale==="l"?"m":"s"} style=${x({marginLeft:t>0&&!(this.scale==="s"&&this.alphaChannel&&t===3)?"-1px":""})} .suffixText=${o} .value=${e?.toString()}></calcite-input-number>`)}};J("calcite-color-picker",V);