/*
All material copyright ESRI, All Rights Reserved, unless otherwise specified.
See https://js.arcgis.com/4.24/esri/copyright.txt for details.
*/
define(["exports","./componentsUtils","./color-picker-swatch","./dom","./icon","./input","./progress","./math","./interactive","./button","./loader","./tab","./tab-nav","./tab-title","./tabs","./debounce"],(function(e,t,i,o,n,l,a,r,s,c,h,d,u,m,p,f){"use strict";
/*!
   * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
   * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
   * v1.0.0-beta.82
   */function g(e){const{r:t,g:i,b:o}=e;return`#${t.toString(16).padStart(2,"0")}${i.toString(16).padStart(2,"0")}${o.toString(16).padStart(2,"0")}`.toLowerCase()}const v=/^[0-9A-F]$/i,C=/^#[0-9A-F]{3}$/i,b=/^#[0-9A-F]{6}$/i;function S(e){return w(e)||x(e)}function w(e){return e&&4===e.length&&C.test(e)}function x(e){return e&&7===e.length&&b.test(e)}function y(e){return(e=e.toLowerCase()).startsWith("#")||(e=`#${e}`),w(e)?g(k(e)):e}function k(e){if(!S(e))return null;if(3===(e=e.replace("#","")).length){const[t,i,o]=e.split("");return{r:parseInt(`${t}${t}`,16),g:parseInt(`${i}${i}`,16),b:parseInt(`${o}${o}`,16)}}return{r:parseInt(e.slice(0,2),16),g:parseInt(e.slice(2,4),16),b:parseInt(e.slice(4,6),16)}}const F=e=>e,D=F({HEX:"hex",HEXA:"hexa",RGB_CSS:"rgb-css",RGBA_CSS:"rgba-css",HSL_CSS:"hsl-css",HSLA_CSS:"hsla-css"}),A=F({RGB:"rgb",RGBA:"rgba",HSL:"hsl",HSLA:"hsla",HSV:"hsv",HSVA:"hsva"});function E(e){if("string"==typeof e){if(e.startsWith("#")){const{length:t}=e;if(4===t||7===t)return D.HEX;if(5===t||9===t)return D.HEXA}if(e.startsWith("rgba("))return D.RGBA_CSS;if(e.startsWith("rgb("))return D.RGB_CSS;if(e.startsWith("hsl("))return D.HSL_CSS;if(e.startsWith("hsla("))return D.HSLA_CSS}if("object"==typeof e){if(H(e,"r","g","b"))return H(e,"a")?A.RGBA:A.RGB;if(H(e,"h","s","l"))return H(e,"a")?A.HSLA:A.HSL;if(H(e,"h","s","v"))return H(e,"a")?A.HSVA:A.HSV}return null}function H(e,...t){return t.every((t=>t&&e&&`${t}`in e))}function I(e,t){return(null==e?void 0:e.rgbNumber())===(null==t?void 0:t.rgbNumber())}
/*!
   * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
   * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
   * v1.0.0-beta.82
   */const T={container:"container",controlSection:"control-section",hexOptions:"color-hex-options",section:"section",header:"header",control:"control",splitSection:"section--split",colorModeContainer:"color-mode-container",colorMode:"color-mode",channels:"channels",channel:"channel",savedColors:"saved-colors",savedColorsSection:"saved-colors-section",saveColor:"save-color",deleteColor:"delete-color",savedColorsButtons:"saved-colors-buttons",headerHex:"header--hex",colorFieldAndSlider:"color-field-and-slider",colorFieldAndSliderInteractive:"color-field-and-slider--interactive",colorFieldAndSliderWrap:"color-field-and-slider-wrap",scope:"scope",hueScope:"scope--hue",colorFieldScope:"scope--color-field",savedColor:"saved-color"},M=i.color("#007AC2"),R="calcite-color-",L={r:255,g:255,b:255},_={h:360,s:100,v:100},$={b:"B",blue:"Blue",deleteColor:"Delete color",g:"G",green:"Green",h:"H",hsv:"HSV",hex:"Hex",hue:"Hue",noColor:"No color",r:"R",red:"Red",rgb:"RGB",s:"S",saturation:"Saturation",saveColor:"Save color",saved:"Saved",v:"V",value:"Value"},K={s:{slider:{height:10,width:160},colorField:{height:80,width:160},thumb:{radius:8}},m:{slider:{height:14,width:272},colorField:{height:150,width:272},thumb:{radius:10}},l:{slider:{height:16,width:464},colorField:{height:200,width:464},thumb:{radius:12}}},V={container:"container",preview:"preview",input:"input"},N="@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{display:block}.container{display:inline-grid;width:100%;-ms-flex-align:center;align-items:center;grid-template-columns:1fr auto}.preview{grid-column:2/3;pointer-events:none;margin-top:0px;margin-bottom:0px;margin-left:0.25rem;margin-right:0.25rem;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;z-index:1}.preview,.input{grid-row:1}.input{grid-column:1/3;width:100%;text-transform:uppercase}",B=i.color(),P=t.proxyCustomElement(class extends t.H{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.calciteColorPickerHexInputChange=t.createEvent(this,"calciteColorPickerHexInputChange",7),this.allowEmpty=!1,this.intlHex=$.hex,this.intlNoColor=$.noColor,this.scale="m",this.value=y(B.hex()),this.onCalciteInputBlur=()=>{const e=this.inputNode,t=e.value,i=`#${t}`;this.allowEmpty&&!t||S(i)&&x(i)||(e.value=this.allowEmpty&&!this.internalColor?"":this.formatForInternalInput(g(this.internalColor.object())))},this.onInputChange=()=>{this.internalSetValue(this.inputNode.value,this.value)},this.internalColor=B,this.previousNonNullValue=this.value,this.storeInputRef=e=>{this.inputNode=e}}connectedCallback(){const{allowEmpty:e,value:t}=this;if(t){const e=y(t);S(e)&&this.internalSetValue(e,e,!1)}else e&&this.internalSetValue(null,null,!1)}handleValueChange(e,t){this.internalSetValue(e,t,!1)}onInputKeyDown(e){const{altKey:t,ctrlKey:i,metaKey:o,shiftKey:n}=e,{internalColor:l,value:a}=this,r=e.key;if("Tab"===r||"Enter"===r)return void this.onInputChange();const s="ArrowDown"===r||"ArrowUp"===r,c=this.value;if(s){if(!a)return this.internalSetValue(this.previousNonNullValue,c),void e.preventDefault();const t="ArrowUp"===r?1:-1,i=n?10:1;return this.internalSetValue(y(this.nudgeRGBChannels(l,i*t).hex()),c),void e.preventDefault()}const h=t||i||o,d=1===r.length,u=v.test(r);!d||h||u||e.preventDefault()}render(){const{intlHex:e,value:i}=this,o=this.formatForInternalInput(i);return t.h("div",{class:V.container},t.h("calcite-input",{class:V.input,label:e,maxLength:6,onCalciteInputBlur:this.onCalciteInputBlur,onCalciteInputChange:this.onInputChange,onKeyDown:this.handleKeyDown,prefixText:"#",ref:this.storeInputRef,scale:this.scale,value:o}),o?t.h("calcite-color-picker-swatch",{active:!0,class:V.preview,color:`#${o}`,scale:this.scale}):null)}async setFocus(){o.focusElement(this.inputNode)}internalSetValue(e,t,o=!0){if(e){const t=y(e);if(S(t)){const{internalColor:e}=this,n=!e||t!==y(e.hex());return this.internalColor=i.color(t),this.previousNonNullValue=t,this.value=t,void(n&&o&&this.calciteColorPickerHexInputChange.emit())}}else if(this.allowEmpty)return this.internalColor=null,this.value=null,void(o&&this.calciteColorPickerHexInputChange.emit());this.value=t}formatForInternalInput(e){return e?e.replace("#",""):""}nudgeRGBChannels(e,t){return i.color.rgb(e.array().map((e=>e+t)))}handleKeyDown(e){"Enter"===e.key&&e.preventDefault()}get el(){return this}static get watchers(){return{value:["handleValueChange"]}}static get style(){return N}},[1,"calcite-color-picker-hex-input",{allowEmpty:[4,"allow-empty"],intlHex:[1,"intl-hex"],intlNoColor:[1,"intl-no-color"],scale:[513],value:[1537],internalColor:[32],setFocus:[64]},[[2,"keydown","onInputKeyDown"]]]);function G(){if("undefined"==typeof customElements)return;["calcite-color-picker-hex-input","calcite-color-picker-swatch","calcite-icon","calcite-input","calcite-progress"].forEach((e=>{switch(e){case"calcite-color-picker-hex-input":customElements.get(e)||customElements.define(e,P);break;case"calcite-color-picker-swatch":customElements.get(e)||i.defineCustomElement();break;case"calcite-icon":customElements.get(e)||n.defineCustomElement();break;case"calcite-input":customElements.get(e)||l.defineCustomElement();break;case"calcite-progress":customElements.get(e)||a.defineCustomElement()}}))}G();
/*!
   * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
   * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
   * v1.0.0-beta.82
   */
var O="Expected a function";function U(e,t,i){var o=!0,n=!0;if("function"!=typeof e)throw new TypeError(O);return f.isObject(i)&&(o="leading"in i?!!i.leading:o,n="trailing"in i?!!i.trailing:n),f.debounce(e,t,{leading:o,maxWait:t,trailing:n})}const j="@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{display:inline-block;font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-normal)}:host([disabled]){pointer-events:none;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host([scale=s]) .container{width:160px}:host([scale=s]) .saved-colors{grid-template-columns:repeat(auto-fill, minmax(20px, 1fr))}:host([scale=s]) .channels{-ms-flex-direction:column;flex-direction:column}:host([scale=s]) .channel{width:100%;margin-bottom:4px}:host([scale=s]) .channel:last-child{margin-bottom:0}:host([scale=m]) .container{width:272px}:host([scale=l]) .header{padding-bottom:0px}:host([scale=l]){font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=l]) .container{width:464px}:host([scale=l]) .color-field-and-slider{margin-bottom:-20px}:host([scale=l]) .section{padding:0 16px 16px}:host([scale=l]) .section:first-of-type{padding-top:16px}:host([scale=l]) .saved-colors{grid-template-columns:repeat(auto-fill, minmax(28px, 1fr));grid-gap:12px;padding-top:16px}:host([scale=l]) .control-section{-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-align:baseline;align-items:baseline}:host([scale=l]) .control-section>:nth-child(2){-webkit-margin-start:12px;margin-inline-start:12px}:host([scale=l]) .color-hex-options{display:-ms-flexbox;display:flex;-ms-flex-negative:1;flex-shrink:1;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:distribute;justify-content:space-around;min-height:98px;width:160px}:host([scale=l]) .color-mode-container{-ms-flex-negative:3;flex-shrink:3}:host([appearance=minimal]) .container{border:none}.container{background-color:var(--calcite-ui-foreground-1);display:inline-block;border:1px solid var(--calcite-ui-border-1)}.color-field-and-slider-wrap{position:relative}.scope{pointer-events:none;position:absolute;font-size:var(--calcite-font-size--1);outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;outline-offset:14px}.scope:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:16px}.color-field-and-slider{margin-bottom:-16px}.color-field-and-slider--interactive{cursor:pointer}.control-section{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap}.section{padding:0 12px 12px}.section:first-of-type{padding-top:12px}.color-hex-options,.section--split{-ms-flex-positive:1;flex-grow:1}.header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;padding-bottom:0.25rem;color:var(--calcite-ui-text-1)}.header--hex,.color-mode-container{padding-top:12px}.channels{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}.channel{width:31%}.saved-colors{padding-top:12px;display:grid;grid-template-columns:repeat(auto-fill, minmax(24px, 1fr));grid-gap:8px;width:100%}.saved-colors-buttons{display:-ms-flexbox;display:flex}.saved-color{outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;cursor:pointer}.saved-color:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:2px}.saved-color:hover{-webkit-transition:outline-color var(--calcite-internal-animation-timing-fast) ease-in-out;transition:outline-color var(--calcite-internal-animation-timing-fast) ease-in-out;outline:2px solid var(--calcite-ui-border-2);outline-offset:2px}",W=16,z=y(M.hex()),X="auto",J=t.proxyCustomElement(class extends t.H{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.calciteColorPickerChange=t.createEvent(this,"calciteColorPickerChange",7),this.calciteColorPickerInput=t.createEvent(this,"calciteColorPickerInput",7),this.allowEmpty=!1,this.appearance="default",this.color=M,this.disabled=!1,this.format=X,this.hideHex=!1,this.hideChannels=!1,this.hideSaved=!1,this.intlB=$.b,this.intlBlue=$.blue,this.intlDeleteColor=$.deleteColor,this.intlG=$.g,this.intlGreen=$.green,this.intlH=$.h,this.intlHsv=$.hsv,this.intlHex=$.hex,this.intlHue=$.hue,this.intlNoColor=$.noColor,this.intlR=$.r,this.intlRed=$.red,this.intlRgb=$.rgb,this.intlS=$.s,this.intlSaturation=$.saturation,this.intlSaveColor=$.saveColor,this.intlSaved=$.saved,this.intlV=$.v,this.intlValue=$.value,this.scale="m",this.value=z,this.colorFieldAndSliderHovered=!1,this.hueThumbState="idle",this.internalColorUpdateContext=null,this.mode=D.HEX,this.shiftKeyChannelAdjustment=0,this.sliderThumbState="idle",this.colorFieldAndSliderInteractive=!1,this.channelMode="rgb",this.channels=this.toChannels(M),this.dimensions=K.m,this.savedColors=[],this.handleTabActivate=e=>{this.channelMode=e.currentTarget.getAttribute("data-color-mode"),this.updateChannelsFromColor(this.color)},this.handleColorFieldScopeKeyDown=e=>{const t=e.key,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="ArrowDown"===t||"ArrowUp"===t?"vertical":"horizontal",this.captureColorFieldColor(this.colorFieldScopeLeft+i[t].x||0,this.colorFieldScopeTop+i[t].y||0,!1))},this.handleHueScopeKeyDown=e=>{const t=e.shiftKey?10:1,i=e.key,o={ArrowUp:1,ArrowRight:1,ArrowDown:-1,ArrowLeft:-1};if(o[i]){e.preventDefault();const n=o[i]*t,l=this.baseColorFieldColor.hue(),a=this.baseColorFieldColor.hue(l+n);this.internalColorSet(a,!1)}},this.handleHexInputChange=e=>{e.stopPropagation();const{allowEmpty:t,color:o}=this,n=e.target.value;if(t&&!n)return void this.internalColorSet(null);n!==(o&&y(o.hex()))&&this.internalColorSet(i.color(n))},this.handleSavedColorSelect=e=>{const t=e.currentTarget;this.internalColorSet(i.color(t.color))},this.handleChannelInput=e=>{const t=e.currentTarget,i=e.detail.nativeEvent.target,o=Number(t.getAttribute("data-channel-index")),n="rgb"===this.channelMode?L[Object.keys(L)[o]]:_[Object.keys(_)[o]];let l;if(this.allowEmpty&&!t.value)l="";else{const e=Number(t.value)+this.shiftKeyChannelAdjustment;l=r.clamp(e,0,n).toString()}t.value=l,i.value=l},this.handleChannelChange=e=>{const t=e.currentTarget,i=Number(t.getAttribute("data-channel-index")),o=[...this.channels];if(this.allowEmpty&&!t.value)return this.channels=[null,null,null],void this.internalColorSet(null);o[i]=Number(t.value),this.updateColorFromChannels(o)},this.handleSavedColorKeyDown=e=>{" "!==e.key&&"Enter"!==e.key||(e.preventDefault(),e.stopPropagation(),this.handleSavedColorSelect(e))},this.handleColorFieldAndSliderMouseLeave=()=>{this.colorFieldAndSliderInteractive=!1,this.colorFieldAndSliderHovered=!1,"drag"!==this.sliderThumbState&&"drag"!==this.hueThumbState&&(this.hueThumbState="idle",this.sliderThumbState="idle",this.drawColorFieldAndSlider())},this.handleColorFieldAndSliderMouseDown=e=>{const{offsetX:t,offsetY:i}=e,o=this.getCanvasRegion(i);"color-field"===o?(this.hueThumbState="drag",this.captureColorFieldColor(t,i),this.colorFieldScopeNode.focus()):"slider"===o&&(this.sliderThumbState="drag",this.captureHueSliderColor(t),this.hueScopeNode.focus()),e.preventDefault(),document.addEventListener("mousemove",this.globalMouseMoveHandler),document.addEventListener("mouseup",this.globalMouseUpHandler,{once:!0}),this.activeColorFieldAndSliderRect=this.fieldAndSliderRenderingContext.canvas.getBoundingClientRect()},this.globalMouseUpHandler=()=>{const e="drag"===this.sliderThumbState||"drag"===this.hueThumbState;this.hueThumbState="idle",this.sliderThumbState="idle",this.activeColorFieldAndSliderRect=null,this.drawColorFieldAndSlider(),e&&this.calciteColorPickerChange.emit()},this.globalMouseMoveHandler=e=>{const{el:t,dimensions:i}=this,o="drag"===this.sliderThumbState,n="drag"===this.hueThumbState;if(!t.isConnected||!o&&!n)return;let l,a;const r=this.activeColorFieldAndSliderRect,{clientX:s,clientY:c}=e;if(this.colorFieldAndSliderHovered)l=s-r.x,a=c-r.y;else{const e=i.colorField.width,t=i.colorField.height,o=i.slider.height;l=s<r.x+e&&s>r.x?s-r.x:s<r.x?0:e,a=c<r.y+t+o&&c>r.y?c-r.y:c<r.y?0:t+o}n?this.captureColorFieldColor(l,a,!1):this.captureHueSliderColor(l)},this.handleColorFieldAndSliderMouseEnterOrMove=({offsetX:e,offsetY:t})=>{const{dimensions:{colorField:i,slider:o,thumb:n}}=this;this.colorFieldAndSliderInteractive=t<=i.height+o.height,this.colorFieldAndSliderHovered=!0;const l=this.getCanvasRegion(t);if("color-field"===l){const o=this.hueThumbState,l=this.baseColorFieldColor.hsv(),a=Math.round(l.saturationv()/(_.s/i.width)),r=Math.round(i.height-l.value()/(_.v/i.height)),s=this.containsPoint(e,t,a,r,n.radius);let c=!1;"idle"===o&&s?(this.hueThumbState="hover",c=!0):"hover"!==o||s||(this.hueThumbState="idle",c=!0),"drag"!==this.hueThumbState&&c&&this.drawColorFieldAndSlider()}else if("slider"===l){const l=this.baseColorFieldColor.hsv().saturationv(100).value(100),a=this.sliderThumbState,r=Math.round(l.hue()/(360/o.width)),s=Math.round((o.height+this.getSliderCapSpacing())/2)+i.height,c=this.containsPoint(e,t,r,s,n.radius);let h=!1;"idle"===a&&c?(this.sliderThumbState="hover",h=!0):"hover"!==a||c||(this.sliderThumbState="idle",h=!0),"drag"!==this.sliderThumbState&&h&&this.drawColorFieldAndSlider()}},this.storeColorFieldScope=e=>{this.colorFieldScopeNode=e},this.storeHueScope=e=>{this.hueScopeNode=e},this.renderChannelsTabTitle=e=>{const{channelMode:i,intlRgb:o,intlHsv:n}=this,l=e===i,a="rgb"===e?o:n;return t.h("calcite-tab-title",{active:l,class:T.colorMode,"data-color-mode":e,key:e,onCalciteTabsActivate:this.handleTabActivate},a)},this.renderChannelsTab=e=>{const{channelMode:i,channels:n,intlB:l,intlBlue:a,intlG:r,intlGreen:s,intlH:c,intlHue:h,intlR:d,intlRed:u,intlS:m,intlSaturation:p,intlV:f,intlValue:g}=this,v=e===i,C="rgb"===e,b=C?[d,r,l]:[c,m,f],S=C?[u,s,a]:[h,p,g],w=o.getElementDir(this.el);return t.h("calcite-tab",{active:v,class:T.control,key:e},t.h("div",{class:T.channels,dir:"ltr"},n.map(((e,t)=>this.renderChannel(e,t,b[t],S[t],w)))))},this.renderChannel=(e,i,o,n,l)=>t.h("calcite-input",{class:T.channel,"data-channel-index":i,dir:l,label:n,numberButtonType:"none",onCalciteInputChange:this.handleChannelChange,onCalciteInputInput:this.handleChannelInput,onKeyDown:this.handleKeyDown,prefixText:o,scale:"l"===this.scale?"m":"s",type:"number",value:null==e?void 0:e.toString()}),this.deleteColor=()=>{const e=this.color.hex();if(!(this.savedColors.indexOf(e)>-1))return;const t=this.savedColors.filter((t=>t!==e));this.savedColors=t;const i=`${R}${this.storageId}`;this.storageId&&localStorage.setItem(i,JSON.stringify(t))},this.saveColor=()=>{const e=this.color.hex();if(this.savedColors.indexOf(e)>-1)return;const t=[...this.savedColors,e];this.savedColors=t;const i=`${R}${this.storageId}`;this.storageId&&localStorage.setItem(i,JSON.stringify(t))},this.drawColorFieldAndSlider=U((()=>{this.fieldAndSliderRenderingContext&&(this.drawColorField(),this.drawHueSlider())}),W),this.captureColorFieldColor=(e,t,i=!0)=>{const{dimensions:{colorField:{height:o,width:n}}}=this,l=Math.round(_.s/n*e),a=Math.round(_.v/o*(o-t));this.internalColorSet(this.baseColorFieldColor.hsv().saturationv(l).value(a),i)},this.initColorFieldAndSlider=e=>{this.fieldAndSliderRenderingContext=e.getContext("2d"),this.setCanvasContextSize(e,{width:this.dimensions.colorField.width,height:this.dimensions.colorField.height+this.dimensions.slider.height+2*this.getSliderCapSpacing()}),this.drawColorFieldAndSlider()}}handleColorChange(e,t){this.drawColorFieldAndSlider(),this.updateChannelsFromColor(e),this.previousColor=t}handleFormatChange(e){this.setMode(e),this.internalColorSet(this.color,!1,"internal")}handleScaleChange(e="m"){this.updateDimensions(e)}handleValueChange(e,t){const{allowEmpty:o,format:n}=this;let l=!1;if(!o||e){const i=E(e);if(!i||"auto"!==n&&i!==n)return this.showIncompatibleColorWarning(e,n),void(this.value=t);l=this.mode!==i,this.setMode(i)}const a="drag"===this.sliderThumbState||"drag"===this.hueThumbState;if("initial"===this.internalColorUpdateContext)return;if("user-interaction"===this.internalColorUpdateContext)return this.calciteColorPickerInput.emit(),void(a||this.calciteColorPickerChange.emit());const r=o&&!e?null:i.color(e),s=!I(r,this.color);(l||s)&&this.internalColorSet(r,!0,"internal")}get baseColorFieldColor(){return this.color||this.previousColor||M}handleChannelKeyUpOrDown(e){this.shiftKeyChannelAdjustment=0;const t=e.key;if("ArrowUp"!==t&&"ArrowDown"!==t||!e.composedPath().some((e=>{var t;return null===(t=e.classList)||void 0===t?void 0:t.contains(T.channel)})))return;const{shiftKey:i}=e;if(e.preventDefault(),!this.color)return this.internalColorSet(this.previousColor),void e.stopPropagation();const o=9;this.shiftKeyChannelAdjustment="ArrowUp"===t&&i?o:"ArrowDown"===t&&i?-o:0}async setFocus(){return o.focusElement(this.colorFieldScopeNode)}componentWillLoad(){const{allowEmpty:e,color:t,format:o,value:n}=this,l=e&&!n,a=E(n),r=l||"auto"===o&&a||o===a,s=l?null:r?i.color(n):t;r||this.showIncompatibleColorWarning(n,o),this.setMode(o),this.internalColorSet(s,!1,"initial"),this.updateDimensions(this.scale);const c=`${R}${this.storageId}`;this.storageId&&localStorage.getItem(c)&&(this.savedColors=JSON.parse(localStorage.getItem(c)))}disconnectedCallback(){document.removeEventListener("mousemove",this.globalMouseMoveHandler),document.removeEventListener("mouseup",this.globalMouseUpHandler)}componentDidRender(){s.updateHostInteraction(this)}render(){const{allowEmpty:e,color:i,intlDeleteColor:o,hideHex:n,hideChannels:l,hideSaved:a,intlHex:r,intlSaved:s,intlSaveColor:c,savedColors:h,scale:d}=this,u=i?i.hex():null,m="l"===d?"m":"s",{colorFieldAndSliderInteractive:p,colorFieldScopeTop:f,colorFieldScopeLeft:g,hueScopeLeft:v,hueScopeTop:C,scopeOrientation:b,dimensions:{colorField:{height:S,width:w},slider:{height:x}}}=this,y=null!=C?C:x/2+S,k=null!=v?v:w*M.hue()/_.h,F=null===i,D="vertical"===b;return t.h("div",{class:T.container},t.h("div",{class:T.colorFieldAndSliderWrap},t.h("canvas",{class:{[T.colorFieldAndSlider]:!0,[T.colorFieldAndSliderInteractive]:p},onMouseDown:this.handleColorFieldAndSliderMouseDown,onMouseEnter:this.handleColorFieldAndSliderMouseEnterOrMove,onMouseLeave:this.handleColorFieldAndSliderMouseLeave,onMouseMove:this.handleColorFieldAndSliderMouseEnterOrMove,ref:this.initColorFieldAndSlider}),t.h("div",{"aria-label":D?this.intlValue:this.intlSaturation,"aria-valuemax":D?_.v:_.s,"aria-valuemin":"0","aria-valuenow":(D?null==i?void 0:i.saturationv():null==i?void 0:i.value())||"0",class:{[T.scope]:!0,[T.colorFieldScope]:!0},onKeyDown:this.handleColorFieldScopeKeyDown,ref:this.storeColorFieldScope,role:"slider",style:{top:`${f||0}px`,left:`${g||0}px`},tabindex:"0"}),t.h("div",{"aria-label":this.intlHue,"aria-valuemax":_.h,"aria-valuemin":"0","aria-valuenow":(null==i?void 0:i.round().hue())||M.round().hue(),class:{[T.scope]:!0,[T.hueScope]:!0},onKeyDown:this.handleHueScopeKeyDown,ref:this.storeHueScope,role:"slider",style:{top:`${y}px`,left:`${k}px`},tabindex:"0"})),n&&l?null:t.h("div",{class:{[T.controlSection]:!0,[T.section]:!0}},n?null:t.h("div",{class:T.hexOptions},t.h("span",{class:{[T.header]:!0,[T.headerHex]:!0}},r),t.h("calcite-color-picker-hex-input",{allowEmpty:e,class:T.control,onCalciteColorPickerHexInputChange:this.handleHexInputChange,scale:m,value:u})),l?null:t.h("calcite-tabs",{class:{[T.colorModeContainer]:!0,[T.splitSection]:!0},scale:m},t.h("calcite-tab-nav",{slot:"tab-nav"},this.renderChannelsTabTitle("rgb"),this.renderChannelsTabTitle("hsv")),this.renderChannelsTab("rgb"),this.renderChannelsTab("hsv"))),a?null:t.h("div",{class:{[T.savedColorsSection]:!0,[T.section]:!0}},t.h("div",{class:T.header},t.h("label",null,s),t.h("div",{class:T.savedColorsButtons},t.h("calcite-button",{appearance:"transparent",class:T.deleteColor,color:"neutral",disabled:F,iconStart:"minus",label:o,onClick:this.deleteColor,scale:m,type:"button"}),t.h("calcite-button",{appearance:"transparent",class:T.saveColor,color:"neutral",disabled:F,iconStart:"plus",label:c,onClick:this.saveColor,scale:m,type:"button"}))),h.length>0?t.h("div",{class:T.savedColors},[...h.map((e=>t.h("calcite-color-picker-swatch",{active:u===e,class:T.savedColor,color:e,key:e,onClick:this.handleSavedColorSelect,onKeyDown:this.handleSavedColorKeyDown,scale:d,tabIndex:0})))]):null))}handleKeyDown(e){"Enter"===e.key&&e.preventDefault()}showIncompatibleColorWarning(e,t){console.warn(`ignoring color value (${e}) as it is not compatible with the current format (${t})`)}setMode(e){this.mode="auto"===e?this.mode:e}captureHueSliderColor(e){const{dimensions:{slider:{width:t}}}=this,i=360/t*e;this.internalColorSet(this.baseColorFieldColor.hue(i),!1)}getCanvasRegion(e){const{dimensions:{colorField:{height:t},slider:{height:i}}}=this;return e<=t?"color-field":e<=t+i?"slider":"none"}internalColorSet(e,t=!0,i="user-interaction"){t&&I(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;const i="hex";if(t.includes(i))return y(e.round()[i]());if(t.includes("-css"))return e[t.replace("-css","").replace("a","")]().round().string();const o=e[t]().round().object();return t.endsWith("a")&&(o.a=o.alpha,delete o.alpha),o}getSliderCapSpacing(){const{dimensions:{slider:{height:e},thumb:{radius:t}}}=this;return 2*t-e}updateDimensions(e="m"){this.dimensions=K[e]}drawColorField(){const e=this.fieldAndSliderRenderingContext,{dimensions:{colorField:{height:t,width:i}}}=this;e.fillStyle=this.baseColorFieldColor.hsv().saturationv(100).value(100).string(),e.fillRect(0,0,i,t);const o=e.createLinearGradient(0,0,i,0);o.addColorStop(0,"rgba(255,255,255,1)"),o.addColorStop(1,"rgba(255,255,255,0)"),e.fillStyle=o,e.fillRect(0,0,i,t);const n=e.createLinearGradient(0,0,0,t);n.addColorStop(0,"rgba(0,0,0,0)"),n.addColorStop(1,"rgba(0,0,0,1)"),e.fillStyle=n,e.fillRect(0,0,i,t),this.drawActiveColorFieldColor()}setCanvasContextSize(e,{height:t,width:i}){const 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)}containsPoint(e,t,i,o,n){return Math.pow(e-i,2)+Math.pow(t-o,2)<=Math.pow(n,2)}drawActiveColorFieldColor(){const{color:e}=this;if(!e)return;const t=e.hsv(),{dimensions:{colorField:{height:i,width:o},thumb:{radius:n}}}=this,l=t.saturationv()/(_.s/o),a=i-t.value()/(_.v/i);requestAnimationFrame((()=>{this.colorFieldScopeLeft=l,this.colorFieldScopeTop=a})),this.drawThumb(this.fieldAndSliderRenderingContext,n,l,a,t,this.hueThumbState)}drawThumb(e,t,i,o,n,l){const a=0,r=2*Math.PI;e.beginPath(),e.arc(i,o,t,a,r),e.shadowBlur="hover"===l?32:16,e.shadowColor=`rgba(0, 0, 0, ${"drag"===l?.32:.16})`,e.fillStyle="#fff",e.fill(),e.beginPath(),e.arc(i,o,t-3,a,r),e.shadowBlur=0,e.shadowColor="transparent",e.fillStyle=n.rgb().string(),e.fill()}drawActiveHueSliderColor(){const{color:e}=this;if(!e)return;const t=e.hsv().saturationv(100).value(100),{dimensions:{colorField:{height:i},slider:{height:o,width:n},thumb:{radius:l}}}=this,a=t.hue()/(360/n),r=o/2+i;requestAnimationFrame((()=>{this.hueScopeLeft=a,this.hueScopeTop=r})),this.drawThumb(this.fieldAndSliderRenderingContext,l,a,r,t,this.sliderThumbState)}drawHueSlider(){const e=this.fieldAndSliderRenderingContext,{dimensions:{colorField:{height:t},slider:{height:o,width:n}}}=this,l=e.createLinearGradient(0,0,n,0),a=["red","yellow","lime","cyan","blue","magenta","red"],r=1/(a.length-1);let s=0;a.forEach((e=>{l.addColorStop(s,i.color(e).string()),s+=r})),e.fillStyle=l,e.clearRect(0,t,n,o+2*this.getSliderCapSpacing()),e.fillRect(0,t,n,o),this.drawActiveHueSliderColor()}updateColorFromChannels(e){this.internalColorSet(i.color(e,this.channelMode))}updateChannelsFromColor(e){this.channels=e?this.toChannels(e):[null,null,null]}toChannels(e){const{channelMode:t}=this;return e[t]().array().map((e=>Math.floor(e)))}get el(){return this}static get watchers(){return{color:["handleColorChange"],format:["handleFormatChange"],scale:["handleScaleChange"],value:["handleValueChange"]}}static get style(){return j}},[1,"calcite-color-picker",{allowEmpty:[4,"allow-empty"],appearance:[513],color:[1040],disabled:[516],format:[1],hideHex:[4,"hide-hex"],hideChannels:[4,"hide-channels"],hideSaved:[4,"hide-saved"],intlB:[1,"intl-b"],intlBlue:[1,"intl-blue"],intlDeleteColor:[1,"intl-delete-color"],intlG:[1,"intl-g"],intlGreen:[1,"intl-green"],intlH:[1,"intl-h"],intlHsv:[1,"intl-hsv"],intlHex:[1,"intl-hex"],intlHue:[1,"intl-hue"],intlNoColor:[1,"intl-no-color"],intlR:[1,"intl-r"],intlRed:[1,"intl-red"],intlRgb:[1,"intl-rgb"],intlS:[1,"intl-s"],intlSaturation:[1,"intl-saturation"],intlSaveColor:[1,"intl-save-color"],intlSaved:[1,"intl-saved"],intlV:[1,"intl-v"],intlValue:[1,"intl-value"],scale:[513],storageId:[1,"storage-id"],value:[1025],colorFieldAndSliderInteractive:[32],channelMode:[32],channels:[32],dimensions:[32],savedColors:[32],colorFieldScopeTop:[32],colorFieldScopeLeft:[32],scopeOrientation:[32],hueScopeLeft:[32],hueScopeTop:[32],setFocus:[64]},[[2,"keydown","handleChannelKeyUpOrDown"],[2,"keyup","handleChannelKeyUpOrDown"]]]);function Y(){if("undefined"==typeof customElements)return;["calcite-color-picker","calcite-button","calcite-color-picker-hex-input","calcite-color-picker-swatch","calcite-icon","calcite-input","calcite-loader","calcite-progress","calcite-tab","calcite-tab-nav","calcite-tab-title","calcite-tabs"].forEach((e=>{switch(e){case"calcite-color-picker":customElements.get(e)||customElements.define(e,J);break;case"calcite-button":customElements.get(e)||c.defineCustomElement();break;case"calcite-color-picker-hex-input":customElements.get(e)||G();break;case"calcite-color-picker-swatch":customElements.get(e)||i.defineCustomElement();break;case"calcite-icon":customElements.get(e)||n.defineCustomElement();break;case"calcite-input":customElements.get(e)||l.defineCustomElement();break;case"calcite-loader":customElements.get(e)||h.defineCustomElement();break;case"calcite-progress":customElements.get(e)||a.defineCustomElement();break;case"calcite-tab":customElements.get(e)||d.defineCustomElement();break;case"calcite-tab-nav":customElements.get(e)||u.defineCustomElement();break;case"calcite-tab-title":customElements.get(e)||m.defineCustomElement();break;case"calcite-tabs":customElements.get(e)||p.defineCustomElement()}}))}Y();const q=J,Q=Y;e.CalciteColorPicker=q,e.defineCustomElement=Q,Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})}));
