@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
5 lines (4 loc) • 28.4 kB
JavaScript
/*! 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 pe,d as B,e as ue}from"./5VPUXQOI.js";import{a as le}from"./RE7G2NN7.js";import{A as ce,B as N,C as he,D as de,a as S,b as n,c as g,d as T,e as x,f as p,g as E,h as b,i as A,j as K,l as I,m as H,q as O,r as y,t as ne,u as re,w as U,x as j,y as W,z as D}from"./TGDV7BPX.js";import"./YSI7ZYDZ.js";import{a as ie,b as oe}from"./BVJFCLMH.js";import{a as F}from"./YXZ62PQO.js";import{d as L}from"./OQOKN4KP.js";import{a as se}from"./3FSOG4LN.js";import{a as Z}from"./M7EAHGE3.js";import{d as ae}from"./CKRTMNFR.js";import{b as v}from"./5RDOSP2E.js";import{e as Q,n as ee,x as z}from"./3ADX47DD.js";import{d as te}from"./HPN2C7M6.js";import"./JOSABGK6.js";import"./NNVH7JUI.js";import{E as Y,F as c,G as $,R as J,c as G,d as u,h as w,q as M}from"./BJZTU5BQ.js";var Ae=G`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:inline-block;font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-normal);inline-size:var(--calcite-internal-color-picker-min-width);min-inline-size:var(--calcite-internal-color-picker-min-width)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([scale=s]){--calcite-internal-color-picker-min-width: 200px;--calcite-color-picker-spacing: 8px}:host([scale=s]) .saved-colors{gap:.25rem;grid-template-columns:repeat(auto-fill,20px)}:host([scale=m]){--calcite-internal-color-picker-min-width: 240px;--calcite-color-picker-spacing: 12px}:host([scale=l]){--calcite-internal-color-picker-min-width: 304px;--calcite-color-picker-spacing: 16px;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=l]) .section:first-of-type{padding-block-start:var(--calcite-color-picker-spacing)}:host([scale=l]) .saved-colors{grid-template-columns:repeat(auto-fill,32px)}:host([scale=l]) .control-section{display:flex;flex-direction:column;flex-wrap:wrap;align-items:baseline}:host([scale=l]) .color-hex-options{inline-size:100%;display:flex;flex-shrink:1;flex-direction:column;justify-content:space-around}:host([scale=l]) .color-mode-container{flex-shrink:3}.container{background-color:var(--calcite-color-foreground-1);display:flex;flex-direction:column;block-size:min-content;border:1px solid var(--calcite-color-border-1)}.control-and-scope{position:relative;display:flex;cursor:pointer;touch-action:none}.color-field,.control-and-scope{-webkit-user-select:none;user-select:none}.scope{pointer-events:none;position:absolute;z-index:var(--calcite-z-index);block-size:1px;inline-size:1px;border-radius:9999px;background-color:transparent;font-size:var(--calcite-font-size--1);outline-color:transparent}.scope:focus{outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))));outline-offset:6px}.hex-and-channels-group{display:flex;inline-size:100%;flex-direction:column;flex-wrap:wrap}.section{padding-block:0 var(--calcite-color-picker-spacing);padding-inline:var(--calcite-color-picker-spacing)}.section:first-of-type{padding-block-start:var(--calcite-color-picker-spacing)}.sliders{display:flex;flex-direction:column;justify-content:space-between;margin-inline-start:var(--calcite-color-picker-spacing);gap:var(--calcite-spacing-xxs)}.preview-and-sliders{display:flex;align-items:center;padding:var(--calcite-color-picker-spacing)}.color-hex-options,.section--split{flex-grow:1}.header{display:flex;align-items:center;justify-content:space-between;color:var(--calcite-color-text-1)}.color-mode-container{padding-block-start:var(--calcite-color-picker-spacing)}.channels{display:flex}.channel{flex-grow:1}.channel[data-channel-index="3"]{margin-inline-start:-1px;min-inline-size:81px}:host([scale=s]) .channel[data-channel-index="3"]{min-inline-size:68px}:host([scale=l]) .channel[data-channel-index="3"]{min-inline-size:88px}.saved-colors{display:grid;gap:.5rem;padding-block-start:var(--calcite-color-picker-spacing);grid-template-columns:repeat(auto-fill,24px)}.saved-colors-buttons{display:flex}.saved-color{outline-offset:0;outline-color:transparent;cursor:pointer}.saved-color:focus{outline:2px solid var(--calcite-color-brand);outline-offset:2px}.saved-color:hover{transition:outline-color var(--calcite-internal-animation-timing-fast) ease-in-out;outline:2px solid var(--calcite-color-border-2);outline-offset:2px}:host([hidden]){display:none}[hidden]{display:none}`,Ce=16,_=class extends Y{constructor(){super(),this._color=g,this.internalColorUpdateContext=null,this.isActiveChannelInputEmpty=!1,this.mode=U.HEX,this.resizeObserver=Z("resize",e=>this.resizeCanvas(e)),this.shiftKeyChannelAdjustment=0,this.upOrDownArrowKeyTracker=null,this._valueWasSet=!1,this.messages=ae({blocking:!0}),this.captureColorFieldColor=(e,t,i=!0)=>{let{width:o,height:a}=this.dynamicDimensions.colorField,s=Math.round(p.s/o*e),l=Math.round(p.v/a*(a-t));this.internalColorSet(this.baseColorFieldColor.hsv().saturationv(s).value(l),i)},this.drawColorControls=L((e="all")=>{(e==="all"||e==="color-field")&&this.colorFieldRenderingContext&&this.drawColorField(),(e==="all"||e==="hue-slider")&&this.hueSliderRenderingContext&&this.drawHueSlider(),this.alphaChannel&&(e==="all"||e==="opacity-slider")&&this.opacitySliderRenderingContext&&this.drawOpacitySlider()},Ce),this.globalPointerMoveHandler=e=>{let{activeCanvasInfo:t,el:i}=this;if(!i.isConnected||!t)return;let{context:o,bounds:a}=t,s,l,{clientX:r,clientY:h}=e;o.canvas.matches(":hover")?(s=r-a.x,l=h-a.y):(r<a.x+a.width&&r>a.x?s=r-a.x:r<a.x?s=0:s=a.width,h<a.y+a.height&&h>a.y?l=h-a.y:h<a.y?l=0:l=a.height),o===this.colorFieldRenderingContext?this.captureColorFieldColor(s,l,!1):o===this.hueSliderRenderingContext?this.captureHueSliderColor(s):o===this.opacitySliderRenderingContext&&this.captureOpacitySliderValue(s)},this.globalPointerUpHandler=e=>{if(!z(e))return;let t=this.activeCanvasInfo;this.activeCanvasInfo=null,this.drawColorControls(),t&&this.calciteColorPickerChange.emit()},this.resizeCanvas=L(e=>{if(!this.hasUpdated)return;let[t]=e,i=Math.floor(t.contentBoxSize[0].inlineSize);this.dynamicDimensions.colorField.width!==i&&(this.updateDynamicDimensions(i),this.updateCanvasSize(),this.drawColorControls())},Ce),this.updateDynamicDimensions=e=>{let t={width:he(e,this.staticDimensions,this.alphaChannel),height:this.staticDimensions.slider.height};this.dynamicDimensions={colorField:de(e),slider:t}},this.channelMode="rgb",this.channels=this.toChannels(g),this.staticDimensions=A.m,this.savedColors=[],this.allowEmpty=!1,this.alphaChannel=!1,this.channelsDisabled=!1,this.clearable=!1,this.disabled=!1,this.format="auto",this.hexDisabled=!1,this.savedDisabled=!1,this.scale="m",this.calciteColorPickerChange=M({cancelable:!1}),this.calciteColorPickerInput=M({cancelable:!1}),this.listen("keydown",this.handleChannelKeyUpOrDown,{capture:!0}),this.listen("keyup",this.handleChannelKeyUpOrDown,{capture:!0})}static{this.properties={channelMode:[16,{},{state:!0}],channels:[16,{},{state:!0}],colorFieldScopeLeft:[16,{},{state:!0}],colorFieldScopeTop:[16,{},{state:!0}],staticDimensions:[16,{},{state:!0}],hueScopeLeft:[16,{},{state:!0}],opacityScopeLeft:[16,{},{state:!0}],savedColors:[16,{},{state:!0}],scopeOrientation:[16,{},{state:!0}],allowEmpty:[7,{},{reflect:!0,type:Boolean}],alphaChannel:[5,{},{type:Boolean}],channelsDisabled:[5,{},{type:Boolean}],clearable:[7,{},{reflect:!0,type:Boolean}],color:[0,{},{attribute:!1}],disabled:[7,{},{reflect:!0,type:Boolean}],format:[3,{},{reflect:!0}],hexDisabled:[5,{},{type:Boolean}],messageOverrides:[0,{},{attribute:!1}],numberingSystem:[3,{},{reflect:!0}],savedDisabled:[7,{},{reflect:!0,type:Boolean}],scale:[3,{},{reflect:!0}],storageId:[3,{},{reflect:!0}],value:1}}static{this.styles=Ae}get color(){return this._color}set color(e){let t=this._color;this._color=e,this.handleColorChange(e,t)}get value(){return this._value}set value(e){let t=this._value;this._value=e,this.handleValueChange(e,t),this._valueWasSet=!0}async setFocus(){await te(this),ee(this.el)}connectedCallback(){super.connectedCallback(),this.observeResize()}async load(){this._valueWasSet||(this._value??=O(y(g,this.alphaChannel))),this.handleAllowEmptyOrClearableChange();let{isClearable:e,color:t,format:i,value:o}=this,a=e&&!o,s=j(o),l=a||i==="auto"&&s||i===s,r=a?null:l?S(o):t;l||this.showIncompatibleColorWarning(o,i),this.setMode(i,!1),this.internalColorSet(r,!1,"initial"),this.updateStaticDimensions(this.scale),this.updateDynamicDimensions(A[this.scale].minWidth);let h=`${T}${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!==A.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(){ie(this)}loaded(){this.handleAlphaChannelDimensionsChange()}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("pointermove",this.globalPointerMoveHandler),window.removeEventListener("pointerup",this.globalPointerUpHandler),this.resizeObserver?.disconnect()}get baseColorFieldColor(){return this.color||this.previousColor||g}get effectiveSliderWidth(){return this.dynamicDimensions.slider.width}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:o}=this,a=!i||e,s=!1;if(a){let d=j(e);if(!d||o!=="auto"&&d!==o){this.showIncompatibleColorWarning(e,o),this._value=t;return}s=this.mode!==d,this.setMode(d,this.internalColorUpdateContext===null)}let l=this.activeCanvasInfo;if(this.internalColorUpdateContext==="initial")return;if(this.internalColorUpdateContext==="user-interaction"){this.calciteColorPickerInput.emit(),l||this.calciteColorPickerChange.emit();return}let r=i&&!e?null:S(e!=null&&typeof e=="object"&&D(this.mode)?re(e):e),h=!W(r,this.color);(s||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,o={ArrowUp:1,ArrowRight:1,ArrowDown:-1,ArrowLeft:-1};if(o[i]){e.preventDefault();let a=o[i]*t,s=this.baseColorFieldColor.hue(),l=this.baseColorFieldColor.hue(s+a);this.internalColorSet(l,!1)}}handleHexInputChange(e){e.stopPropagation();let{isClearable:t,color:i}=this,a=e.target.value;if(t&&!a){this.internalColorSet(null);return}let s=i&&O(y(i,D(this.mode)));a!==s&&this.internalColorSet(S(a))}handleSavedColorSelect(e){let t=e.currentTarget;this.internalColorSet(S(t.color))}handleChannelInput(e){let t=e.currentTarget,i=Number(t.getAttribute("data-channel-index")),a=i===3?b.max:this.channelMode==="rgb"?x[Object.keys(x)[i]]:p[Object.keys(p)[i]],s;if(!t.value)s="",this.isActiveChannelInputEmpty=!0,this.upOrDownArrowKeyTracker=null;else{let r=Number(t.value)+this.shiftKeyChannelAdjustment;s=pe(r,0,a).toString()}t.value=s,s!==""&&this.shiftKeyChannelAdjustment!==0?this.handleChannelChange(e):s!==""&&this.handleChannelChange(e)}handleChannelBlur(e){let t=e.currentTarget,i=Number(t.getAttribute("data-channel-index")),o=[...this.channels];!t.value&&!this.isClearable&&(t.value=o[i]?.toString())}handleChannelFocus(e){e.currentTarget.selectText()}handleChannelKeyUpOrDown(e){this.shiftKeyChannelAdjustment=0;let{key:t}=e;if(t!=="ArrowUp"&&t!=="ArrowDown"||!e.composedPath().some(a=>a.classList?.contains(n.channel)))return;let{shiftKey:i}=e;if(e.preventDefault(),!this.color){this.internalColorSet(this.previousColor),e.stopPropagation();return}let o=9;this.shiftKeyChannelAdjustment=t==="ArrowUp"&&i?o:t==="ArrowDown"&&i?-9:0,t==="ArrowUp"&&(this.upOrDownArrowKeyTracker="up"),t==="ArrowDown"&&(this.upOrDownArrowKeyTracker="down")}getChannelInputLimit(e){return this.channelMode==="rgb"?x[Object.keys(x)[e]]:p[Object.keys(p)[e]]}handleChannelChange(e){let t=e.currentTarget,i=Number(t.getAttribute("data-channel-index")),o=[...this.channels];if(this.isClearable&&!t.value){this.channels=[null,null,null,null],this.internalColorSet(null);return}let s=i===3;this.isActiveChannelInputEmpty&&this.upOrDownArrowKeyTracker&&(t.value=this.upOrDownArrowKeyTracker==="up"?(o[i]+1<=this.getChannelInputLimit(i)?o[i]+1:this.getChannelInputLimit(i)).toString():(o[i]-1>=0?o[i]-1:0).toString(),this.isActiveChannelInputEmpty=!1,this.upOrDownArrowKeyTracker=null);let l=t.value?Number(t.value):o[i];o[i]=s?H(l):l,this.updateColorFromChannels(o)}handleSavedColorKeyDown(e){se(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,o){z(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(o))}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,o=D(e);if(i&&!o){let a=ce(e);return t&&console.warn(`setting format to (${a}) as the provided one (${e}) does not support alpha`),a}if(!i&&o){let a=N(e);return t&&console.warn(`setting format to (${a}) as the provided one (${e}) does not support alpha`),a}return e}captureHueSliderColor(e){let t=E/this.effectiveSliderWidth*e;this.internalColorSet(this.baseColorFieldColor.hue(t),!1)}captureOpacitySliderValue(e){let t=H(b.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===U.HEXA;return O(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 l=a.slice(0,3),r=a.slice(4,-1);return`${l}a(${r}, ${e.alpha()})`}return a}let o=e[N(t)]().round().object();return t.endsWith("a")?ne(o):o}getSliderCapSpacing(){let{staticDimensions:{slider:{height:e},thumb:{radius:t}}}=this;return t*2-e}updateStaticDimensions(e="m"){this.staticDimensions=A[e]}deleteColor(){let e=y(this.color,this.alphaChannel);if(!(this.savedColors.indexOf(e)>-1))return;let i=this.savedColors.filter(a=>a!==e);this.savedColors=i;let o=`${T}${this.storageId}`;this.storageId&&localStorage.setItem(o,JSON.stringify(i))}saveColor(){let e=y(this.color,this.alphaChannel);if(this.savedColors.indexOf(e)>-1)return;let i=[...this.savedColors,e];this.savedColors=i;let o=`${T}${this.storageId}`;this.storageId&&localStorage.setItem(o,JSON.stringify(i))}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 o=e.createLinearGradient(0,0,t,0);o.addColorStop(0,"rgba(255,255,255,1)"),o.addColorStop(1,"rgba(255,255,255,0)"),e.fillStyle=o,e.fillRect(0,0,t,i);let a=e.createLinearGradient(0,0,0,i);a.addColorStop(0,"rgba(0,0,0,0)"),a.addColorStop(1,"rgba(0,0,0,1)"),e.fillStyle=a,e.fillRect(0,0,t,i),this.drawActiveColorFieldColor()}setCanvasContextSize(e,{height:t,width:i}){if(!e)return;let o=window.devicePixelRatio||1;e.width=i*o,e.height=t*o,e.style.height=`${t}px`,e.style.width=`${i}px`,e.getContext("2d").scale(o,o)}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 o={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,o),(e==="all"||e==="opacity-slider")&&this.setCanvasContextSize(this.opacitySliderRenderingContext?.canvas,o)}drawActiveColorFieldColor(){let{color:e}=this;if(!e)return;let t=e.hsv(),{staticDimensions:{thumb:{radius:i}}}=this,{width:o,height:a}=this.dynamicDimensions.colorField,s=t.saturationv()/(p.s/o),l=a-t.value()/(p.v/a);requestAnimationFrame(()=>{this.colorFieldScopeLeft=s,this.colorFieldScopeTop=l}),this.drawThumb(this.colorFieldRenderingContext,i,s,l,t,!1)}drawThumb(e,t,i,o,a,s){let r=2*Math.PI,h=1;if(e.beginPath(),e.arc(i,o,t,0,r),e.fillStyle="#fff",e.fill(),e.strokeStyle="rgba(0,0,0,0.3)",e.lineWidth=h,e.stroke(),s&&a.alpha()<1){let C=e.createPattern(this.getCheckeredBackgroundPattern(),"repeat");e.beginPath(),e.arc(i,o,t-3,0,r),e.fillStyle=C,e.fill()}e.globalCompositeOperation="source-atop",e.beginPath(),e.arc(i,o,t-3,0,r);let d=s?a.alpha():1;e.fillStyle=a.rgb().alpha(d).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,o=this.effectiveSliderWidth,a=t.hue()/(E/o),s=i,l=this.getSliderBoundX(a,o,i);requestAnimationFrame(()=>{this.hueScopeLeft=l}),this.drawThumb(this.hueSliderRenderingContext,i,l,s,t,!1)}drawHueSlider(){let e=this.hueSliderRenderingContext,{staticDimensions:{slider:{height:t},thumb:{radius:i}}}=this,o=0,a=i-t/2,s=this.effectiveSliderWidth,l=e.createLinearGradient(0,0,s,0),r=["red","yellow","lime","cyan","blue","magenta","#ff0004"],h=1/(r.length-1),d=0;r.forEach(C=>{l.addColorStop(d,S(C).string()),d+=h}),e.clearRect(0,0,s,t+this.getSliderCapSpacing()*2),this.drawSliderPath(e,t,s,o,a),e.fillStyle=l,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:o}}}=this,a=0,s=o-i/2,l=this.effectiveSliderWidth;e.clearRect(0,0,l,i+this.getSliderCapSpacing()*2);let r=e.createLinearGradient(0,s,l,0),h=t.rgb().alpha(0),d=t.rgb().alpha(.5),C=t.rgb().alpha(1);r.addColorStop(0,h.string()),r.addColorStop(.5,d.string()),r.addColorStop(1,C.string()),this.drawSliderPath(e,i,l,a,s);let f=e.createPattern(this.getCheckeredBackgroundPattern(),"repeat");e.fillStyle=f,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,o,a){let s=t/2+1;e.beginPath(),e.moveTo(o+s,a),e.lineTo(o+i-s,a),e.quadraticCurveTo(o+i,a,o+i,a+s),e.lineTo(o+i,a+t-s),e.quadraticCurveTo(o+i,a+t,o+i-s,a+t),e.lineTo(o+s,a+t),e.quadraticCurveTo(o,a+t,o,a+t-s),e.lineTo(o,a+s),e.quadraticCurveTo(o,a,o+s,a),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,o=this.effectiveSliderWidth,a=I(t.alpha())/(b.max/o),s=i,l=this.getSliderBoundX(a,o,i);requestAnimationFrame(()=>{this.opacityScopeLeft=l}),this.drawThumb(this.opacitySliderRenderingContext,i,l,s,t,!0)}getSliderBoundX(e,t,i){let o=ue(e,t,i);return o===0?e:o===-1?B(e,0,t,i,i*2):B(e,0,t,t-i*2,t-i)}storeOpacityScope(e){this.opacityScopeNode=e}handleOpacityScopeKeyDown(e){let t=e.shiftKey?10:1,{key:i}=e,o={ArrowUp:.01,ArrowRight:.01,ArrowDown:-.01,ArrowLeft:-.01};if(o[i]){e.preventDefault();let a=o[i]*t,s=this.baseColorFieldColor.alpha(),l=this.baseColorFieldColor.alpha(s+a);this.internalColorSet(l,!1)}}updateColorFromChannels(e){this.internalColorSet(S(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((o,a)=>a===3?o:Math.floor(o));return i.length===3&&i.push(1),i}getAdjustedScopePosition(e,t){return[e-K/2,t-K/2]}render(){let{channelsDisabled:e,color:t,colorFieldScopeLeft:i,colorFieldScopeTop:o,staticDimensions:{thumb:{radius:a}},hexDisabled:s,hueScopeLeft:l,messages:r,alphaChannel:h,opacityScopeLeft:d,savedColors:C,savedDisabled:f,scale:m,scopeOrientation:k}=this,V=this.effectiveSliderWidth,X=t?y(t,h):null,fe=a,me=l??V*g.hue()/p.h,ge=a,ve=d??V*I(g.alpha())/b.max,q=t===void 0,P=k==="vertical",[Se,be]=this.getAdjustedScopePosition(i,o),[ye,we]=this.getAdjustedScopePosition(me,fe),[$e,xe]=this.getAdjustedScopePosition(ve,ge);return oe({disabled:this.disabled,children:u`<div class=${c(n.container)}><div class=${c(n.controlAndScope)}><canvas class=${c(n.colorField)} =${this.handleColorFieldPointerDown} ${v(this.initColorField)}></canvas><div .ariaLabel=${P?r.value:r.saturation} .ariaValueMax=${P?p.v:p.s} aria-valuemin=0 .ariaValueNow=${(P?t?.saturationv():t?.value())||"0"} class=${c({[n.scope]:!0,[n.colorFieldScope]:!0})} =${this.handleColorFieldScopeKeyDown} role=slider style=${$({top:`${be||0}px`,left:`${Se||0}px`})} tabindex=0 ${v(this.storeColorFieldScope)}></div></div><div class=${c(n.previewAndSliders)}><calcite-color-picker-swatch class=${c(n.preview)} .color=${X} .scale=${this.alphaChannel?"l":this.scale}></calcite-color-picker-swatch><div class=${c(n.sliders)}><div class=${c(n.controlAndScope)}><canvas class=${c({[n.slider]:!0,[n.hueSlider]:!0})} =${this.handleHueSliderPointerDown} ${v(this.initHueSlider)}></canvas><div .ariaLabel=${r.hue} .ariaValueMax=${p.h} aria-valuemin=0 .ariaValueNow=${t?.round().hue()||g.round().hue()} class=${c({[n.scope]:!0,[n.hueScope]:!0})} =${this.handleHueScopeKeyDown} role=slider style=${$({top:`${we}px`,left:`${ye}px`})} tabindex=0 ${v(this.storeHueScope)}></div></div>${h?u`<div class=${c(n.controlAndScope)}><canvas class=${c({[n.slider]:!0,[n.opacitySlider]:!0})} =${this.handleOpacitySliderPointerDown} ${v(this.initOpacitySlider)}></canvas><div .ariaLabel=${r.opacity} .ariaValueMax=${b.max} .ariaValueMin=${b.min} .ariaValueNow=${(t||g).round().alpha()} class=${c({[n.scope]:!0,[n.opacityScope]:!0})} =${this.handleOpacityScopeKeyDown} role=slider style=${$({top:`${xe}px`,left:`${$e}px`})} tabindex=0 ${v(this.storeOpacityScope)}></div></div>`:null}</div></div>${s&&e?null:u`<div class=${c({[n.controlSection]:!0,[n.section]:!0})}><div class=${c(n.hexAndChannelsGroup)}>${s?null:u`<div class=${c(n.hexOptions)}><calcite-color-picker-hex-input .allowEmpty=${this.isClearable} .alphaChannel=${h} class=${c(n.control)} .messages=${r} .numberingSystem=${this.numberingSystem} =${this.handleHexInputChange} .scale=${m} .value=${X}></calcite-color-picker-hex-input></div>`}${e?null:u`<calcite-tabs class=${c({[n.colorModeContainer]:!0,[n.splitSection]:!0})} .scale=${m==="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>`}${f?null:u`<div class=${c({[n.savedColorsSection]:!0,[n.section]:!0})}><div class=${c(n.header)}><label>${r.saved}</label><div class=${c(n.savedColorsButtons)}><calcite-button appearance=transparent class=${c(n.deleteColor)} .disabled=${q} icon-start=minus kind=neutral .label=${r.deleteColor} =${this.deleteColor} .scale=${m} type=button></calcite-button><calcite-button appearance=transparent class=${c(n.saveColor)} .disabled=${q} icon-start=plus kind=neutral .label=${r.saveColor} =${this.saveColor} .scale=${m} type=button></calcite-button></div></div>${C.length>0?u`<div class=${c(n.savedColors)}>${le(C,R=>R,R=>u`<calcite-color-picker-swatch class=${c(n.savedColor)} .color=${R} =${this.handleSavedColorSelect} =${this.handleSavedColorKeyDown} .scale=${m} tabindex=0></calcite-color-picker-swatch>`)}</div>`:null}</div>`}</div>`})}renderChannelsTabTitle(e){let{channelMode:t,messages:i}=this,o=e===t,a=e==="rgb"?i.rgb:i.hsv;return F(e,u`<calcite-tab-title class=${c(n.colorMode)} data-color-mode=${e??w} =${this.handleTabActivate} .selected=${o}>${a}</calcite-tab-title>`)}renderChannelsTab(e){let{isClearable:t,channelMode:i,channels:o,messages:a,alphaChannel:s}=this,l=e===i,h=e==="rgb"?[a.red,a.green,a.blue]:[a.hue,a.saturation,a.value],d=Q(this.el),C=s?o:o.slice(0,3);return F(e,u`<calcite-tab class=${c(n.control)} .selected=${l}><div class=${c(n.channels)} dir=ltr>${C.map((f,m)=>{let k=m===3;return k&&(f=t&&!f?f:I(f)),this.renderChannel(f,m,h[m],d,k?"%":"")})}</div></calcite-tab>`)}renderChannel(e,t,i,o,a){return F(t,u`<calcite-input-number class=${c(n.channel)} data-channel-index=${t??w} dir=${o??w} .label=${i} lang=${this.messages._lang??w} number-button-type=none .numberingSystem=${this.numberingSystem} =${this.handleKeyDown} =${this.handleChannelChange} =${this.handleChannelInput} =${this.handleChannelBlur} =${this.handleChannelFocus} .scale=${this.scale==="l"?"m":"s"} style=${$({marginLeft:t>0&&!(this.scale==="s"&&this.alphaChannel&&t===3)?"-1px":""})} .suffixText=${a} .value=${e?.toString()}></calcite-input-number>`)}};J("calcite-color-picker",_);export{_ as ColorPicker};