@esri/calcite-components 5.1.0-next.46 → 5.1.0-next.47

package/dist/cdn/{OYTOUXX5.js → AK5E3R6F.js}

@@ -1,2 +1,2 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import{a as L}from"./N5GIZQAK.js";import{b as y}from"./QS4T2NHO.js";import{b as d}from"./VJ76XAA7.js";import"./T3MK7GRX.js";import"./YGX7CUXN.js";import{a as F}from"./P7ITHHCY.js";import{a as U}from"./6VIA3EQ6.js";import{a as C,c as E}from"./RH6ZIP65.js";import{e as R}from"./EGJIW3MN.js";import"./TBETPECJ.js";import"./JMDN6DZ2.js";import"./OAOQ5BXS.js";import{E as s,F as l,G as D,H as i,S as H,g as S,h as n,p as x}from"./SBHUMGKR.js";var e={button:"button",buttonBottomLeft:"button--bottom-left",buttonBottomRight:"button--bottom-right",buttonFractionalSecondDown:"button--fractionalSecond-down",buttonFractionalSecondUp:"button--fractionalSecond-up",buttonHourDown:"button--hour-down",buttonHourUp:"button--hour-up",buttonMeridiemDown:"button--meridiem-down",buttonMeridiemUp:"button--meridiem-up",buttonMinuteDown:"button--minute-down",buttonMinuteUp:"button--minute-up",buttonSecondDown:"button--second-down",buttonSecondUp:"button--second-up",buttonTopLeft:"button--top-left",buttonTopRight:"button--top-right",column:"column",decimalSeparator:"decimal-separator",delimiter:"delimiter",fractionalSecond:"fractionalSecond",hour:"hour",hourSuffix:"hour-suffix",input:"input",inputFocus:"inputFocus",meridiem:"meridiem",minute:"minute",minuteSuffix:"minute-suffix",second:"second",secondSuffix:"second-suffix",showMeridiem:"show-meridiem",showSecond:"show-second",scale:b=>`scale-${b}`,timePicker:"time-picker",meridiemStart:"meridiem--start"},a={chevronUp:"chevron-up",chevronDown:"chevron-down"},Y=S`:host{display:inline-block}.time-picker{display:flex;-webkit-user-select:none;user-select:none;align-items:center;border-width:1px;border-style:solid;font-weight:var(--calcite-font-weight-medium);border-color:var(--calcite-time-picker-border-color, var(--calcite-color-border-3));border-radius:var(--calcite-time-picker-corner-radius, var(--calcite-border-radius-round));color:var(--calcite-time-picker-color, var(--calcite-color-text-1));background-color:var(--calcite-time-picker-background-color, var(--calcite-color-foreground-1));line-height:var(--calcite-font-line-height-md);overflow:hidden}.time-picker .column{display:flex;flex-direction:column}.time-picker .meridiem--start{order:-1}.time-picker .button{display:inline-flex;cursor:pointer;align-items:center;justify-content:center;background-color:var(--calcite-time-picker-background-color, var(--calcite-color-foreground-1))}.time-picker .button:hover,.time-picker .button:focus{outline:2px solid transparent;outline-offset:2px;z-index:var(--calcite-z-index-header);outline-offset:0;background-color:var(--calcite-time-picker-button-background-color-hover, var(--calcite-color-foreground-2))}.time-picker .button:active{background-color:var(--calcite-time-picker-button-background-color-press, var(--calcite-color-foreground-3))}.time-picker .button.top-left{border-start-start-radius:var(--calcite-time-picker-corner-radius, var(--calcite-border-radius-round))}.time-picker .button.bottom-left{border-end-start-radius:var(--calcite-time-picker-corner-radius, var(--calcite-border-radius-round))}.time-picker .button.top-right{border-start-end-radius:var(--calcite-time-picker-corner-radius, var(--calcite-border-radius-round))}.time-picker .button.bottom-right{border-end-end-radius:var(--calcite-time-picker-corner-radius, var(--calcite-border-radius-round))}.time-picker .button calcite-icon{color:var(--calcite-time-picker-icon-color, var(--calcite-color-text-3))}.time-picker .input{display:inline-flex;cursor:pointer;align-items:center;justify-content:center;font-weight:var(--calcite-font-weight-medium);background-color:var(--calcite-time-picker-background-color, var(--calcite-color-foreground-1))}.time-picker .input:hover{box-shadow:inset 0 0 0 2px var(--calcite-time-picker-input-border-color-hover, var(--calcite-color-foreground-2));z-index:var(--calcite-z-index-header)}.time-picker .input:focus,.time-picker .input:hover:focus{outline:2px solid transparent;outline-offset:2px;outline-offset:0}.time-picker .input.inputFocus,.time-picker .input:hover.inputFocus{box-shadow:inset 0 0 0 2px var(--calcite-time-picker-input-border-color-press, var(--calcite-color-brand));z-index:var(--calcite-z-index-header)}.time-picker.scale-s{font-size:var(--calcite-font-size-relative-base)}.time-picker.scale-s .button,.time-picker.scale-s .input{padding-inline:var(--calcite-spacing-sm);padding-block:var(--calcite-spacing-xxs)}.time-picker.scale-s:not(.show-meridiem) .delimiter:last-child{padding-inline-end:var(--calcite-spacing-md)}.time-picker.scale-m{font-size:var(--calcite-font-size-relative-md)}.time-picker.scale-m .button,.time-picker.scale-m .input{padding-inline:var(--calcite-spacing-md);padding-block:var(--calcite-spacing-sm)}.time-picker.scale-m:not(.show-meridiem) .delimiter:last-child{padding-inline-end:var(--calcite-spacing-xl)}.time-picker.scale-l{font-size:var(--calcite-font-size-relative-lg)}.time-picker.scale-l .button,.time-picker.scale-l .input{padding-inline:var(--calcite-spacing-lg);padding-block:var(--calcite-spacing-md)}.time-picker.scale-l:not(.show-meridiem) .delimiter:last-child{padding-inline-end:var(--calcite-spacing-xxl)}:host([hidden]){display:none}[hidden]{display:none}`,f=class extends D{constructor(){super(),this.direction=R(),this.fractionalSecondRef=s(),this.hourRef=s(),this.meridiemRef=s(),this.minuteRef=s(),this.pointerActivated=!1,this.secondRef=s(),this.messages=F(),this.focusSetter=U()(this),this.time=L(this),this.hourFormat="user",this.scale="m",this.step=60,this.value=null,this.calciteTimePickerChange=x({cancelable:!1}),this.listen("blur",this.blurHandler),this.listen("calciteTimeChange",this.timeChangeHandler),this.listen("keydown",this.keyDownHandler),this.listen("pointerdown",this.pointerDownHandler)}static{this.properties={activeEl:[16,{},{state:!0}],showFractionalSecond:[16,{},{state:!0}],showSecond:[16,{},{state:!0}],time:[0,{},{attribute:!1}],hourFormat:[3,{},{reflect:!0}],messageOverrides:[0,{},{attribute:!1}],numberingSystem:1,scale:[3,{},{reflect:!0}],step:[11,{},{reflect:!0,type:Number}],value:1}}static{this.shadowRootOptions={mode:"open",delegatesFocus:!0}}static{this.styles=Y}async setFocus(t){return this.focusSetter(()=>this.el,t)}connectedCallback(){super.connectedCallback(),this.toggleSecond()}willUpdate(t){t.has("step")&&(this.hasUpdated||this.step!==60)&&this.toggleSecond(),t.has("value")&&(this.hasUpdated||this.value!==null)&&this.time.setValue(this.value)}blurHandler(){this.activeEl=void 0,this.pointerActivated=!1}keyDownHandler(t){this.pointerActivated=!1;let{defaultPrevented:o,key:r}=t;if(o)return;let{hourFormat:u}=this.time;switch(this.activeEl){case this.hourRef.value:r==="ArrowRight"&&(this.focusPart("minute"),t.preventDefault());break;case this.minuteRef.value:switch(r){case"ArrowLeft":this.focusPart("hour"),t.preventDefault();break;case"ArrowRight":this.step!==60?(this.focusPart("second"),t.preventDefault()):u==="12"&&(this.focusPart("meridiem"),t.preventDefault());break}break;case this.secondRef.value:switch(r){case"ArrowLeft":this.focusPart("minute"),t.preventDefault();break;case"ArrowRight":this.showFractionalSecond?this.focusPart("fractionalSecond"):u==="12"&&(this.focusPart("meridiem"),t.preventDefault());break}break;case this.fractionalSecondRef.value:switch(r){case"ArrowLeft":this.focusPart("second"),t.preventDefault();break;case"ArrowRight":u==="12"&&(this.focusPart("meridiem"),t.preventDefault());break}break;case this.meridiemRef.value:switch(r){case"ArrowLeft":this.showFractionalSecond?this.focusPart("fractionalSecond"):this.step!==60?(this.focusPart("second"),t.preventDefault()):(this.focusPart("minute"),t.preventDefault());break}break}}pointerDownHandler(){this.pointerActivated=!0}async focusPart(t){await E(this),(t==="hour"?this.hourRef:t==="minute"?this.minuteRef:t==="second"?this.secondRef:t==="fractionalSecond"?this.fractionalSecondRef:this.meridiemRef).value?.focus()}focusHandler(t){this.pointerActivated||(this.activeEl=t.currentTarget)}fractionalSecondDownClickHandler(){this.activeEl=this.fractionalSecondRef.value,this.activeEl.focus(),this.time.nudgeFractionalSecond("down")}fractionalSecondUpClickHandler(){this.activeEl=this.fractionalSecondRef.value,this.activeEl.focus(),this.time.nudgeFractionalSecond("up")}hourDownClickHandler(){this.activeEl=this.hourRef.value,this.activeEl.focus(),this.time.decrementHour()}hourUpClickHandler(){this.activeEl=this.hourRef.value,this.activeEl.focus(),this.time.incrementHour()}inputClickHandler(t){this.activeEl=t.target}meridiemUpClickHandler(){this.activeEl=this.meridiemRef.value,this.activeEl.focus(),this.time.toggleMeridiem("up")}meridiemDownClickHandler(){this.activeEl=this.meridiemRef.value,this.activeEl.focus(),this.time.toggleMeridiem("down")}minuteDownClickHandler(){this.activeEl=this.minuteRef.value,this.activeEl.focus(),this.time.decrementMinute()}minuteUpClickHandler(){this.activeEl=this.minuteRef.value,this.activeEl.focus(),this.time.incrementMinute()}secondDownClickHandler(){this.activeEl=this.secondRef.value,this.activeEl.focus(),this.time.decrementSecond()}secondUpClickHandler(){this.activeEl=this.secondRef.value,this.activeEl.focus(),this.time.incrementSecond()}timeChangeHandler(t){t.stopPropagation();let o=t.detail;o!==this.value&&(this.value=o),this.calciteTimePickerChange.emit()}toggleSecond(){this.showSecond=this.step<60,this.stepPrecision=y(this.step),this.showFractionalSecond=this.stepPrecision>0}render(){let{activeEl:t,messages:o,scale:r}=this,{_lang:u}=o,{fractionalSecond:v,handleFractionalSecondKeyDownEvent:P,handleHourKeyDownEvent:M,handleMeridiemKeyDownEvent:z,handleMinuteKeyDownEvent:T,handleSecondKeyDownEvent:A,hour:h,hourFormat:V,localizedDecimalSeparator:N,localizedFractionalSecond:k,localizedHour:I,localizedHourSuffix:K,localizedMeridiem:B,localizedMinute:O,localizedMinuteSuffix:j,localizedSecond:_,localizedSecondSuffix:$,meridiem:w,meridiemOrder:q,minute:m,second:p}=this.time,G=d(h),c=C(r),J=d(m),Q=d(p),W=d(v),X=u!=="bg"&&$,g=V==="12";return n`<div class=${i({[e.timePicker]:!0,[e.showMeridiem]:g,[e.showSecond]:this.showSecond,[e.scale(r)]:!0})} dir=ltr><div class=${i(e.column)} role=group><span .ariaLabel=${o.hourUp} class=${i({[e.button]:!0,[e.buttonHourUp]:!0,[e.buttonTopLeft]:!0})} @click=${this.hourUpClickHandler} role=button><calcite-icon .icon=${a.chevronUp} .scale=${c}></calcite-icon></span><span .ariaLabel=${o.hour} aria-valuemax=23 aria-valuemin=1 .ariaValueNow=${G&&parseInt(h)||"0"} .ariaValueText=${h} class=${i({[e.input]:!0,[e.hour]:!0,[e.inputFocus]:t&&t===this.hourRef.value})} @click=${this.inputClickHandler} @focus=${this.focusHandler} @keydown=${M} role=spinbutton tabindex=0 ${l(this.hourRef)}>${I||"--"}</span><span .ariaLabel=${o.hourDown} class=${i({[e.button]:!0,[e.buttonHourDown]:!0,[e.buttonBottomLeft]:!0})} @click=${this.hourDownClickHandler} role=button><calcite-icon .icon=${a.chevronDown} .scale=${c}></calcite-icon></span></div><span class=${i({[e.delimiter]:!0,[e.hourSuffix]:!0})}>${K}</span><div class=${i(e.column)} role=group><span .ariaLabel=${o.minuteUp} class=${i({[e.button]:!0,[e.buttonMinuteUp]:!0})} @click=${this.minuteUpClickHandler} role=button><calcite-icon .icon=${a.chevronUp} .scale=${c}></calcite-icon></span><span .ariaLabel=${o.minute} aria-valuemax=12 aria-valuemin=1 .ariaValueNow=${J&&parseInt(m)||"0"} .ariaValueText=${m} class=${i({[e.input]:!0,[e.minute]:!0,[e.inputFocus]:t&&t===this.minuteRef.value})} @click=${this.inputClickHandler} @focus=${this.focusHandler} @keydown=${T} role=spinbutton tabindex=0 ${l(this.minuteRef)}>${O||"--"}</span><span .ariaLabel=${o.minuteDown} class=${i({[e.button]:!0,[e.buttonMinuteDown]:!0})} @click=${this.minuteDownClickHandler} role=button><calcite-icon .icon=${a.chevronDown} .scale=${c}></calcite-icon></span></div>${this.showSecond&&n`<span class=${i({[e.delimiter]:!0,[e.minuteSuffix]:!0})}>${j}</span>`||""}${this.showSecond&&n`<div class=${i(e.column)} role=group><span .ariaLabel=${o.secondUp} class=${i({[e.button]:!0,[e.buttonSecondUp]:!0})} @click=${this.secondUpClickHandler} role=button><calcite-icon .icon=${a.chevronUp} .scale=${c}></calcite-icon></span><span .ariaLabel=${o.second} aria-valuemax=59 aria-valuemin=0 .ariaValueNow=${Q&&parseInt(p)||"0"} .ariaValueText=${p} class=${i({[e.input]:!0,[e.second]:!0,[e.inputFocus]:t&&t===this.secondRef.value})} @click=${this.inputClickHandler} @focus=${this.focusHandler} @keydown=${A} role=spinbutton tabindex=0 ${l(this.secondRef)}>${_||"--"}</span><span .ariaLabel=${o.secondDown} class=${i({[e.button]:!0,[e.buttonSecondDown]:!0})} @click=${this.secondDownClickHandler} role=button><calcite-icon .icon=${a.chevronDown} .scale=${c}></calcite-icon></span></div>`||""}${this.showFractionalSecond&&n`<span class=${i({[e.delimiter]:!0,[e.decimalSeparator]:!0})}>${N}</span>`||""}${this.showFractionalSecond&&n`<div class=${i(e.column)} role=group><span .ariaLabel=${o.fractionalSecondUp} class=${i({[e.button]:!0,[e.buttonFractionalSecondUp]:!0})} @click=${this.fractionalSecondUpClickHandler} role=button><calcite-icon .icon=${a.chevronUp} .scale=${c}></calcite-icon></span><span .ariaLabel=${o.fractionalSecond} aria-valuemax=999 aria-valuemin=1 .ariaValueNow=${W&&parseInt(v)||"0"} .ariaValueText=${k} class=${i({[e.input]:!0,[e.fractionalSecond]:!0,[e.inputFocus]:t&&t===this.fractionalSecondRef.value})} @click=${this.inputClickHandler} @focus=${this.focusHandler} @keydown=${P} role=spinbutton tabindex=0 ${l(this.fractionalSecondRef)}>${k||"".padStart(this.stepPrecision,"-")}</span><span .ariaLabel=${o.fractionalSecondDown} class=${i({[e.button]:!0,[e.buttonFractionalSecondDown]:!0})} @click=${this.fractionalSecondDownClickHandler} role=button><calcite-icon .icon=${a.chevronDown} .scale=${c}></calcite-icon></span></div>`||""}${X&&n`<span class=${i({[e.delimiter]:!0,[e.secondSuffix]:!0})}>${$}</span>`||""}${g&&n`<div class=${i({[e.column]:!0,[e.meridiemStart]:q===0||this.direction==="rtl"})} role=group><span .ariaLabel=${o.meridiemUp} class=${i({[e.button]:!0,[e.buttonMeridiemUp]:!0,[e.buttonTopRight]:!0})} @click=${this.meridiemUpClickHandler} role=button><calcite-icon .icon=${a.chevronUp} .scale=${c}></calcite-icon></span><span .ariaLabel=${o.meridiem} aria-valuemax=2 aria-valuemin=1 .ariaValueNow=${w==="PM"&&"2"||"1"} .ariaValueText=${w} class=${i({[e.input]:!0,[e.meridiem]:!0,[e.inputFocus]:t&&t===this.meridiemRef.value})} @click=${this.inputClickHandler} @focus=${this.focusHandler} @keydown=${z} role=spinbutton tabindex=0 ${l(this.meridiemRef)}>${B||"--"}</span><span .ariaLabel=${o.meridiemDown} class=${i({[e.button]:!0,[e.buttonMeridiemDown]:!0,[e.buttonBottomRight]:!0})} @click=${this.meridiemDownClickHandler} role=button><calcite-icon .icon=${a.chevronDown} .scale=${c}></calcite-icon></span></div>`||""}</div>`}};H("calcite-time-picker",f);export{f as TimePicker};
+import{a as L}from"./NGK67HIF.js";import{b as y}from"./QS4T2NHO.js";import{b as d}from"./3WVYWCHT.js";import"./DG4IM44O.js";import"./YGX7CUXN.js";import{a as F}from"./HDFMIYOW.js";import{a as U}from"./UXDLXWJ3.js";import{a as C,c as E}from"./RH6ZIP65.js";import{e as R}from"./6SWMJ5CU.js";import"./XAHDXNHK.js";import"./N5Y264VM.js";import"./OAOQ5BXS.js";import{E as s,F as l,G as D,H as i,S as H,g as S,h as n,p as x}from"./2EHFS2P4.js";var e={button:"button",buttonBottomLeft:"button--bottom-left",buttonBottomRight:"button--bottom-right",buttonFractionalSecondDown:"button--fractionalSecond-down",buttonFractionalSecondUp:"button--fractionalSecond-up",buttonHourDown:"button--hour-down",buttonHourUp:"button--hour-up",buttonMeridiemDown:"button--meridiem-down",buttonMeridiemUp:"button--meridiem-up",buttonMinuteDown:"button--minute-down",buttonMinuteUp:"button--minute-up",buttonSecondDown:"button--second-down",buttonSecondUp:"button--second-up",buttonTopLeft:"button--top-left",buttonTopRight:"button--top-right",column:"column",decimalSeparator:"decimal-separator",delimiter:"delimiter",fractionalSecond:"fractionalSecond",hour:"hour",hourSuffix:"hour-suffix",input:"input",inputFocus:"inputFocus",meridiem:"meridiem",minute:"minute",minuteSuffix:"minute-suffix",second:"second",secondSuffix:"second-suffix",showMeridiem:"show-meridiem",showSecond:"show-second",scale:b=>`scale-${b}`,timePicker:"time-picker",meridiemStart:"meridiem--start"},a={chevronUp:"chevron-up",chevronDown:"chevron-down"},Y=S`:host{display:inline-block}.time-picker{display:flex;-webkit-user-select:none;user-select:none;align-items:center;border-width:1px;border-style:solid;font-weight:var(--calcite-font-weight-medium);border-color:var(--calcite-time-picker-border-color, var(--calcite-color-border-3));border-radius:var(--calcite-time-picker-corner-radius, var(--calcite-border-radius-round));color:var(--calcite-time-picker-color, var(--calcite-color-text-1));background-color:var(--calcite-time-picker-background-color, var(--calcite-color-foreground-1));line-height:var(--calcite-font-line-height-md);overflow:hidden}.time-picker .column{display:flex;flex-direction:column}.time-picker .meridiem--start{order:-1}.time-picker .button{display:inline-flex;cursor:pointer;align-items:center;justify-content:center;background-color:var(--calcite-time-picker-background-color, var(--calcite-color-foreground-1))}.time-picker .button:hover,.time-picker .button:focus{outline:2px solid transparent;outline-offset:2px;z-index:var(--calcite-z-index-header);outline-offset:0;background-color:var(--calcite-time-picker-button-background-color-hover, var(--calcite-color-foreground-2))}.time-picker .button:active{background-color:var(--calcite-time-picker-button-background-color-press, var(--calcite-color-foreground-3))}.time-picker .button.top-left{border-start-start-radius:var(--calcite-time-picker-corner-radius, var(--calcite-border-radius-round))}.time-picker .button.bottom-left{border-end-start-radius:var(--calcite-time-picker-corner-radius, var(--calcite-border-radius-round))}.time-picker .button.top-right{border-start-end-radius:var(--calcite-time-picker-corner-radius, var(--calcite-border-radius-round))}.time-picker .button.bottom-right{border-end-end-radius:var(--calcite-time-picker-corner-radius, var(--calcite-border-radius-round))}.time-picker .button calcite-icon{color:var(--calcite-time-picker-icon-color, var(--calcite-color-text-3))}.time-picker .input{display:inline-flex;cursor:pointer;align-items:center;justify-content:center;font-weight:var(--calcite-font-weight-medium);background-color:var(--calcite-time-picker-background-color, var(--calcite-color-foreground-1))}.time-picker .input:hover{box-shadow:inset 0 0 0 2px var(--calcite-time-picker-input-border-color-hover, var(--calcite-color-foreground-2));z-index:var(--calcite-z-index-header)}.time-picker .input:focus,.time-picker .input:hover:focus{outline:2px solid transparent;outline-offset:2px;outline-offset:0}.time-picker .input.inputFocus,.time-picker .input:hover.inputFocus{box-shadow:inset 0 0 0 2px var(--calcite-time-picker-input-border-color-press, var(--calcite-color-brand));z-index:var(--calcite-z-index-header)}.time-picker.scale-s{font-size:var(--calcite-font-size-relative-base)}.time-picker.scale-s .button,.time-picker.scale-s .input{padding-inline:var(--calcite-spacing-sm);padding-block:var(--calcite-spacing-xxs)}.time-picker.scale-s:not(.show-meridiem) .delimiter:last-child{padding-inline-end:var(--calcite-spacing-md)}.time-picker.scale-m{font-size:var(--calcite-font-size-relative-md)}.time-picker.scale-m .button,.time-picker.scale-m .input{padding-inline:var(--calcite-spacing-md);padding-block:var(--calcite-spacing-sm)}.time-picker.scale-m:not(.show-meridiem) .delimiter:last-child{padding-inline-end:var(--calcite-spacing-xl)}.time-picker.scale-l{font-size:var(--calcite-font-size-relative-lg)}.time-picker.scale-l .button,.time-picker.scale-l .input{padding-inline:var(--calcite-spacing-lg);padding-block:var(--calcite-spacing-md)}.time-picker.scale-l:not(.show-meridiem) .delimiter:last-child{padding-inline-end:var(--calcite-spacing-xxl)}:host([hidden]){display:none}[hidden]{display:none}`,f=class extends D{constructor(){super(),this.direction=R(),this.fractionalSecondRef=s(),this.hourRef=s(),this.meridiemRef=s(),this.minuteRef=s(),this.pointerActivated=!1,this.secondRef=s(),this.messages=F(),this.focusSetter=U()(this),this.time=L(this),this.hourFormat="user",this.scale="m",this.step=60,this.value=null,this.calciteTimePickerChange=x({cancelable:!1}),this.listen("blur",this.blurHandler),this.listen("calciteTimeChange",this.timeChangeHandler),this.listen("keydown",this.keyDownHandler),this.listen("pointerdown",this.pointerDownHandler)}static{this.properties={activeEl:[16,{},{state:!0}],showFractionalSecond:[16,{},{state:!0}],showSecond:[16,{},{state:!0}],time:[0,{},{attribute:!1}],hourFormat:[3,{},{reflect:!0}],messageOverrides:[0,{},{attribute:!1}],numberingSystem:1,scale:[3,{},{reflect:!0}],step:[11,{},{reflect:!0,type:Number}],value:1}}static{this.shadowRootOptions={mode:"open",delegatesFocus:!0}}static{this.styles=Y}async setFocus(t){return this.focusSetter(()=>this.el,t)}connectedCallback(){super.connectedCallback(),this.toggleSecond()}willUpdate(t){t.has("step")&&(this.hasUpdated||this.step!==60)&&this.toggleSecond(),t.has("value")&&(this.hasUpdated||this.value!==null)&&this.time.setValue(this.value)}blurHandler(){this.activeEl=void 0,this.pointerActivated=!1}keyDownHandler(t){this.pointerActivated=!1;let{defaultPrevented:o,key:r}=t;if(o)return;let{hourFormat:u}=this.time;switch(this.activeEl){case this.hourRef.value:r==="ArrowRight"&&(this.focusPart("minute"),t.preventDefault());break;case this.minuteRef.value:switch(r){case"ArrowLeft":this.focusPart("hour"),t.preventDefault();break;case"ArrowRight":this.step!==60?(this.focusPart("second"),t.preventDefault()):u==="12"&&(this.focusPart("meridiem"),t.preventDefault());break}break;case this.secondRef.value:switch(r){case"ArrowLeft":this.focusPart("minute"),t.preventDefault();break;case"ArrowRight":this.showFractionalSecond?this.focusPart("fractionalSecond"):u==="12"&&(this.focusPart("meridiem"),t.preventDefault());break}break;case this.fractionalSecondRef.value:switch(r){case"ArrowLeft":this.focusPart("second"),t.preventDefault();break;case"ArrowRight":u==="12"&&(this.focusPart("meridiem"),t.preventDefault());break}break;case this.meridiemRef.value:switch(r){case"ArrowLeft":this.showFractionalSecond?this.focusPart("fractionalSecond"):this.step!==60?(this.focusPart("second"),t.preventDefault()):(this.focusPart("minute"),t.preventDefault());break}break}}pointerDownHandler(){this.pointerActivated=!0}async focusPart(t){await E(this),(t==="hour"?this.hourRef:t==="minute"?this.minuteRef:t==="second"?this.secondRef:t==="fractionalSecond"?this.fractionalSecondRef:this.meridiemRef).value?.focus()}focusHandler(t){this.pointerActivated||(this.activeEl=t.currentTarget)}fractionalSecondDownClickHandler(){this.activeEl=this.fractionalSecondRef.value,this.activeEl.focus(),this.time.nudgeFractionalSecond("down")}fractionalSecondUpClickHandler(){this.activeEl=this.fractionalSecondRef.value,this.activeEl.focus(),this.time.nudgeFractionalSecond("up")}hourDownClickHandler(){this.activeEl=this.hourRef.value,this.activeEl.focus(),this.time.decrementHour()}hourUpClickHandler(){this.activeEl=this.hourRef.value,this.activeEl.focus(),this.time.incrementHour()}inputClickHandler(t){this.activeEl=t.target}meridiemUpClickHandler(){this.activeEl=this.meridiemRef.value,this.activeEl.focus(),this.time.toggleMeridiem("up")}meridiemDownClickHandler(){this.activeEl=this.meridiemRef.value,this.activeEl.focus(),this.time.toggleMeridiem("down")}minuteDownClickHandler(){this.activeEl=this.minuteRef.value,this.activeEl.focus(),this.time.decrementMinute()}minuteUpClickHandler(){this.activeEl=this.minuteRef.value,this.activeEl.focus(),this.time.incrementMinute()}secondDownClickHandler(){this.activeEl=this.secondRef.value,this.activeEl.focus(),this.time.decrementSecond()}secondUpClickHandler(){this.activeEl=this.secondRef.value,this.activeEl.focus(),this.time.incrementSecond()}timeChangeHandler(t){t.stopPropagation();let o=t.detail;o!==this.value&&(this.value=o),this.calciteTimePickerChange.emit()}toggleSecond(){this.showSecond=this.step<60,this.stepPrecision=y(this.step),this.showFractionalSecond=this.stepPrecision>0}render(){let{activeEl:t,messages:o,scale:r}=this,{_lang:u}=o,{fractionalSecond:v,handleFractionalSecondKeyDownEvent:P,handleHourKeyDownEvent:M,handleMeridiemKeyDownEvent:z,handleMinuteKeyDownEvent:T,handleSecondKeyDownEvent:A,hour:h,hourFormat:V,localizedDecimalSeparator:N,localizedFractionalSecond:k,localizedHour:I,localizedHourSuffix:K,localizedMeridiem:B,localizedMinute:O,localizedMinuteSuffix:j,localizedSecond:_,localizedSecondSuffix:$,meridiem:w,meridiemOrder:q,minute:m,second:p}=this.time,G=d(h),c=C(r),J=d(m),Q=d(p),W=d(v),X=u!=="bg"&&$,g=V==="12";return n`<div class=${i({[e.timePicker]:!0,[e.showMeridiem]:g,[e.showSecond]:this.showSecond,[e.scale(r)]:!0})} dir=ltr><div class=${i(e.column)} role=group><span .ariaLabel=${o.hourUp} class=${i({[e.button]:!0,[e.buttonHourUp]:!0,[e.buttonTopLeft]:!0})} @click=${this.hourUpClickHandler} role=button><calcite-icon .icon=${a.chevronUp} .scale=${c}></calcite-icon></span><span .ariaLabel=${o.hour} aria-valuemax=23 aria-valuemin=1 .ariaValueNow=${G&&parseInt(h)||"0"} .ariaValueText=${h} class=${i({[e.input]:!0,[e.hour]:!0,[e.inputFocus]:t&&t===this.hourRef.value})} @click=${this.inputClickHandler} @focus=${this.focusHandler} @keydown=${M} role=spinbutton tabindex=0 ${l(this.hourRef)}>${I||"--"}</span><span .ariaLabel=${o.hourDown} class=${i({[e.button]:!0,[e.buttonHourDown]:!0,[e.buttonBottomLeft]:!0})} @click=${this.hourDownClickHandler} role=button><calcite-icon .icon=${a.chevronDown} .scale=${c}></calcite-icon></span></div><span class=${i({[e.delimiter]:!0,[e.hourSuffix]:!0})}>${K}</span><div class=${i(e.column)} role=group><span .ariaLabel=${o.minuteUp} class=${i({[e.button]:!0,[e.buttonMinuteUp]:!0})} @click=${this.minuteUpClickHandler} role=button><calcite-icon .icon=${a.chevronUp} .scale=${c}></calcite-icon></span><span .ariaLabel=${o.minute} aria-valuemax=12 aria-valuemin=1 .ariaValueNow=${J&&parseInt(m)||"0"} .ariaValueText=${m} class=${i({[e.input]:!0,[e.minute]:!0,[e.inputFocus]:t&&t===this.minuteRef.value})} @click=${this.inputClickHandler} @focus=${this.focusHandler} @keydown=${T} role=spinbutton tabindex=0 ${l(this.minuteRef)}>${O||"--"}</span><span .ariaLabel=${o.minuteDown} class=${i({[e.button]:!0,[e.buttonMinuteDown]:!0})} @click=${this.minuteDownClickHandler} role=button><calcite-icon .icon=${a.chevronDown} .scale=${c}></calcite-icon></span></div>${this.showSecond&&n`<span class=${i({[e.delimiter]:!0,[e.minuteSuffix]:!0})}>${j}</span>`||""}${this.showSecond&&n`<div class=${i(e.column)} role=group><span .ariaLabel=${o.secondUp} class=${i({[e.button]:!0,[e.buttonSecondUp]:!0})} @click=${this.secondUpClickHandler} role=button><calcite-icon .icon=${a.chevronUp} .scale=${c}></calcite-icon></span><span .ariaLabel=${o.second} aria-valuemax=59 aria-valuemin=0 .ariaValueNow=${Q&&parseInt(p)||"0"} .ariaValueText=${p} class=${i({[e.input]:!0,[e.second]:!0,[e.inputFocus]:t&&t===this.secondRef.value})} @click=${this.inputClickHandler} @focus=${this.focusHandler} @keydown=${A} role=spinbutton tabindex=0 ${l(this.secondRef)}>${_||"--"}</span><span .ariaLabel=${o.secondDown} class=${i({[e.button]:!0,[e.buttonSecondDown]:!0})} @click=${this.secondDownClickHandler} role=button><calcite-icon .icon=${a.chevronDown} .scale=${c}></calcite-icon></span></div>`||""}${this.showFractionalSecond&&n`<span class=${i({[e.delimiter]:!0,[e.decimalSeparator]:!0})}>${N}</span>`||""}${this.showFractionalSecond&&n`<div class=${i(e.column)} role=group><span .ariaLabel=${o.fractionalSecondUp} class=${i({[e.button]:!0,[e.buttonFractionalSecondUp]:!0})} @click=${this.fractionalSecondUpClickHandler} role=button><calcite-icon .icon=${a.chevronUp} .scale=${c}></calcite-icon></span><span .ariaLabel=${o.fractionalSecond} aria-valuemax=999 aria-valuemin=1 .ariaValueNow=${W&&parseInt(v)||"0"} .ariaValueText=${k} class=${i({[e.input]:!0,[e.fractionalSecond]:!0,[e.inputFocus]:t&&t===this.fractionalSecondRef.value})} @click=${this.inputClickHandler} @focus=${this.focusHandler} @keydown=${P} role=spinbutton tabindex=0 ${l(this.fractionalSecondRef)}>${k||"".padStart(this.stepPrecision,"-")}</span><span .ariaLabel=${o.fractionalSecondDown} class=${i({[e.button]:!0,[e.buttonFractionalSecondDown]:!0})} @click=${this.fractionalSecondDownClickHandler} role=button><calcite-icon .icon=${a.chevronDown} .scale=${c}></calcite-icon></span></div>`||""}${X&&n`<span class=${i({[e.delimiter]:!0,[e.secondSuffix]:!0})}>${$}</span>`||""}${g&&n`<div class=${i({[e.column]:!0,[e.meridiemStart]:q===0||this.direction==="rtl"})} role=group><span .ariaLabel=${o.meridiemUp} class=${i({[e.button]:!0,[e.buttonMeridiemUp]:!0,[e.buttonTopRight]:!0})} @click=${this.meridiemUpClickHandler} role=button><calcite-icon .icon=${a.chevronUp} .scale=${c}></calcite-icon></span><span .ariaLabel=${o.meridiem} aria-valuemax=2 aria-valuemin=1 .ariaValueNow=${w==="PM"&&"2"||"1"} .ariaValueText=${w} class=${i({[e.input]:!0,[e.meridiem]:!0,[e.inputFocus]:t&&t===this.meridiemRef.value})} @click=${this.inputClickHandler} @focus=${this.focusHandler} @keydown=${z} role=spinbutton tabindex=0 ${l(this.meridiemRef)}>${B||"--"}</span><span .ariaLabel=${o.meridiemDown} class=${i({[e.button]:!0,[e.buttonMeridiemDown]:!0,[e.buttonBottomRight]:!0})} @click=${this.meridiemDownClickHandler} role=button><calcite-icon .icon=${a.chevronDown} .scale=${c}></calcite-icon></span></div>`||""}</div>`}};H("calcite-time-picker",f);export{f as TimePicker};

package/dist/cdn/{4S4BZYJR.js → ANHMRAGX.js}

@@ -1,2 +1,2 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import{a as i}from"./MIAQT2TM.js";import{a as k}from"./CS7M52ZC.js";import{c as u,d as g,e as v}from"./27P2SCOG.js";import{a as m}from"./T7B6EPNI.js";import{a as p}from"./YGX7CUXN.js";import{a as b}from"./6VIA3EQ6.js";import"./RH6ZIP65.js";import"./EGJIW3MN.js";import"./TBETPECJ.js";import"./JMDN6DZ2.js";import"./OAOQ5BXS.js";import{E as s,F as o,G as d,H as t,S as h,g as c,h as l,p as r}from"./SBHUMGKR.js";var a={container:"container",track:"track",handle:"handle"},f=c`: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([scale=s]) .container{block-size:.75rem}:host([scale=s]) .track{block-size:.75rem;inline-size:1.5rem}:host([scale=s]) .handle{block-size:.5rem;inline-size:.5rem}:host([scale=m]) .container{block-size:1rem}:host([scale=m]) .track{block-size:1rem;inline-size:2rem}:host([scale=m]) .handle{block-size:.75rem;inline-size:.75rem}:host([scale=l]) .container{block-size:1.5rem}:host([scale=l]) .track{block-size:1.5rem;inline-size:3rem}:host([scale=l]) .handle{block-size:1.25rem;inline-size:1.25rem}:host{position:relative;display:inline-block;inline-size:auto;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:middle;tap-highlight-color:transparent}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.container{outline:none;display:flex}.track{pointer-events:none;position:relative;box-sizing:border-box;display:inline-block;vertical-align:top;outline-color:transparent;border-radius:var(--calcite-switch-corner-radius, 9999px);border-color:var(--calcite-switch-border-color);background-color:var(--calcite-switch-background-color, var(--calcite-color-border-input))}.container:focus .track{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(var(--calcite-spacing-base) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.container:hover .track{background-color:var(--calcite-switch-background-color-hover, var(--calcite-color-text-3))}.handle{pointer-events:none;position:absolute;display:block;transition-property:all;transition-duration:var(--calcite-animation-timing);transition-timing-function:cubic-bezier(.4,0,.2,1);inset-block-start:var(--calcite-spacing-base);inset-inline:var(--calcite-spacing-base) auto;background-color:var(--calcite-switch-handle-background-color, var(--calcite-color-foreground-1));border-color:var(--calcite-switch-handle-border-color);border-radius:var(--calcite-switch-corner-radius, 9999px);box-shadow:var(--calcite-switch-handle-shadow)}:host([checked]) .track{background-color:var(--calcite-switch-background-color, var(--calcite-color-brand))}:host([checked]) .handle{inset-inline:auto var(--calcite-spacing-base)}:host([checked]):host(:hover:not([disabled])) .track{background-color:var(--calcite-switch-background-color-hover, var(--calcite-color-brand-hover))}@media(forced-colors:active){:host([checked]) .track{background-color:canvasText}}.internal-label-alignment--center{align-items:center}.internal-label-alignment--end{align-items:end}.internal-label--container{display:flex;justify-content:space-between;color:var(--calcite-color-text-1)}.internal-label-required--indicator{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-status-danger);padding-inline:var(--calcite-spacing-base)}.internal-label-required--indicator:hover{cursor:help}.internal-label--text{line-height:1}:host([scale=s]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-xxs)}:host([scale=s]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label--text{font-size:var(--calcite-font-size--2)}:host([scale=m]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label--text{font-size:var(--calcite-font-size--1)}:host([scale=l]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=l]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-md)}:host([scale=l]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-md)}:host([scale=l]) .internal-label--text{font-size:var(--calcite-font-size-0)}::slotted(input[slot=hidden-form-input]){margin:0!important;opacity:0!important;outline:none!important;padding:0!important;position:absolute!important;inset:0!important;transform:none!important;-webkit-appearance:none!important;z-index:-1!important}:host([hidden]){display:none}[hidden]{display:none}`,n=class extends d{constructor(){super(),this.formSupport=k({inputType:"checkbox"})(this),this.switchRef=s(),this.focusSetter=b()(this),this.interactiveContainer=m(this),this.checked=!1,this.disabled=!1,this.scale="m",this.calciteSwitchChange=r({cancelable:!1}),this.listen("click",this.clickHandler),this.listen("keydown",this.keyDownHandler)}static{this.properties={checked:[7,{},{reflect:!0,type:Boolean}],disabled:[7,{},{reflect:!0,type:Boolean}],form:[3,{},{reflect:!0}],label:1,labelTextEnd:1,labelTextStart:1,name:[3,{},{reflect:!0}],scale:[3,{},{reflect:!0}],value:1}}static{this.formAssociated=!0}static{this.styles=f}async setFocus(e){return this.focusSetter(()=>this.switchRef.value,e)}connectedCallback(){super.connectedCallback(),u(this)}disconnectedCallback(){super.disconnectedCallback(),g(this)}keyDownHandler(e){!this.disabled&&p(e.key)&&(this.toggle(),e.preventDefault())}onLabelClick(){this.disabled||(this.toggle(),this.setFocus())}toggle(){this.checked=!this.checked,this.calciteSwitchChange.emit()}clickHandler(){this.disabled||this.toggle()}render(){return this.interactiveContainer({disabled:this.disabled,children:l`<div .ariaChecked=${this.checked} .ariaLabel=${v(this)} class=${t(a.container)} role=switch tabindex=0 ${o(this.switchRef)}>${this.labelTextStart&&i({alignmentCenter:!0,bottomSpacingDisabled:!0,labelText:this.labelTextStart,spacingInlineEnd:!0})||""}<div class=${t(a.track)}><div class=${t(a.handle)}></div></div>${this.labelTextEnd&&i({alignmentCenter:!0,bottomSpacingDisabled:!0,labelText:this.labelTextEnd,spacingInlineStart:!0})||""}</div>`})}};h("calcite-switch",n);export{n as Switch};
+import{a as i}from"./ORXV4MP6.js";import{a as k}from"./5RX5WZO5.js";import{c as u,d as g,e as v}from"./EEVHJKWU.js";import{a as m}from"./OSXJ5GXG.js";import{a as p}from"./YGX7CUXN.js";import{a as b}from"./UXDLXWJ3.js";import"./RH6ZIP65.js";import"./6SWMJ5CU.js";import"./XAHDXNHK.js";import"./N5Y264VM.js";import"./OAOQ5BXS.js";import{E as s,F as o,G as d,H as t,S as h,g as c,h as l,p as r}from"./2EHFS2P4.js";var a={container:"container",track:"track",handle:"handle"},f=c`: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([scale=s]) .container{block-size:.75rem}:host([scale=s]) .track{block-size:.75rem;inline-size:1.5rem}:host([scale=s]) .handle{block-size:.5rem;inline-size:.5rem}:host([scale=m]) .container{block-size:1rem}:host([scale=m]) .track{block-size:1rem;inline-size:2rem}:host([scale=m]) .handle{block-size:.75rem;inline-size:.75rem}:host([scale=l]) .container{block-size:1.5rem}:host([scale=l]) .track{block-size:1.5rem;inline-size:3rem}:host([scale=l]) .handle{block-size:1.25rem;inline-size:1.25rem}:host{position:relative;display:inline-block;inline-size:auto;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:middle;tap-highlight-color:transparent}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.container{outline:none;display:flex}.track{pointer-events:none;position:relative;box-sizing:border-box;display:inline-block;vertical-align:top;outline-color:transparent;border-radius:var(--calcite-switch-corner-radius, 9999px);border-color:var(--calcite-switch-border-color);background-color:var(--calcite-switch-background-color, var(--calcite-color-border-input))}.container:focus .track{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(var(--calcite-spacing-base) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.container:hover .track{background-color:var(--calcite-switch-background-color-hover, var(--calcite-color-text-3))}.handle{pointer-events:none;position:absolute;display:block;transition-property:all;transition-duration:var(--calcite-animation-timing);transition-timing-function:cubic-bezier(.4,0,.2,1);inset-block-start:var(--calcite-spacing-base);inset-inline:var(--calcite-spacing-base) auto;background-color:var(--calcite-switch-handle-background-color, var(--calcite-color-foreground-1));border-color:var(--calcite-switch-handle-border-color);border-radius:var(--calcite-switch-corner-radius, 9999px);box-shadow:var(--calcite-switch-handle-shadow)}:host([checked]) .track{background-color:var(--calcite-switch-background-color, var(--calcite-color-brand))}:host([checked]) .handle{inset-inline:auto var(--calcite-spacing-base)}:host([checked]):host(:hover:not([disabled])) .track{background-color:var(--calcite-switch-background-color-hover, var(--calcite-color-brand-hover))}@media(forced-colors:active){:host([checked]) .track{background-color:canvasText}}.internal-label-alignment--center{align-items:center}.internal-label-alignment--end{align-items:end}.internal-label--container{display:flex;justify-content:space-between;color:var(--calcite-color-text-1)}.internal-label-required--indicator{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-status-danger);padding-inline:var(--calcite-spacing-base)}.internal-label-required--indicator:hover{cursor:help}.internal-label--text{line-height:1}:host([scale=s]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-xxs)}:host([scale=s]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label--text{font-size:var(--calcite-font-size--2)}:host([scale=m]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label--text{font-size:var(--calcite-font-size--1)}:host([scale=l]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=l]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-md)}:host([scale=l]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-md)}:host([scale=l]) .internal-label--text{font-size:var(--calcite-font-size-0)}::slotted(input[slot=hidden-form-input]){margin:0!important;opacity:0!important;outline:none!important;padding:0!important;position:absolute!important;inset:0!important;transform:none!important;-webkit-appearance:none!important;z-index:-1!important}:host([hidden]){display:none}[hidden]{display:none}`,n=class extends d{constructor(){super(),this.formSupport=k({inputType:"checkbox"})(this),this.switchRef=s(),this.focusSetter=b()(this),this.interactiveContainer=m(this),this.checked=!1,this.disabled=!1,this.scale="m",this.calciteSwitchChange=r({cancelable:!1}),this.listen("click",this.clickHandler),this.listen("keydown",this.keyDownHandler)}static{this.properties={checked:[7,{},{reflect:!0,type:Boolean}],disabled:[7,{},{reflect:!0,type:Boolean}],form:[3,{},{reflect:!0}],label:1,labelTextEnd:1,labelTextStart:1,name:[3,{},{reflect:!0}],scale:[3,{},{reflect:!0}],value:1}}static{this.formAssociated=!0}static{this.styles=f}async setFocus(e){return this.focusSetter(()=>this.switchRef.value,e)}connectedCallback(){super.connectedCallback(),u(this)}disconnectedCallback(){super.disconnectedCallback(),g(this)}keyDownHandler(e){!this.disabled&&p(e.key)&&(this.toggle(),e.preventDefault())}onLabelClick(){this.disabled||(this.toggle(),this.setFocus())}toggle(){this.checked=!this.checked,this.calciteSwitchChange.emit()}clickHandler(){this.disabled||this.toggle()}render(){return this.interactiveContainer({disabled:this.disabled,children:l`<div .ariaChecked=${this.checked} .ariaLabel=${v(this)} class=${t(a.container)} role=switch tabindex=0 ${o(this.switchRef)}>${this.labelTextStart&&i({alignmentCenter:!0,bottomSpacingDisabled:!0,labelText:this.labelTextStart,spacingInlineEnd:!0})||""}<div class=${t(a.track)}><div class=${t(a.handle)}></div></div>${this.labelTextEnd&&i({alignmentCenter:!0,bottomSpacingDisabled:!0,labelText:this.labelTextEnd,spacingInlineStart:!0})||""}</div>`})}};h("calcite-switch",n);export{n as Switch};

package/dist/cdn/{FQYUCP6M.js → AQQEKS5A.js}

@@ -1,2 +1,2 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import{a as y}from"./T7B6EPNI.js";import{a as x}from"./2M64JSHT.js";import{a as v}from"./P7ITHHCY.js";import{a as g}from"./6VIA3EQ6.js";import"./RH6ZIP65.js";import"./EGJIW3MN.js";import"./TBETPECJ.js";import"./JMDN6DZ2.js";import"./OAOQ5BXS.js";import{E as u,F as b,G as p,H as f,S as m,g as d,h,l as s,p as l}from"./SBHUMGKR.js";var S={handle:"handle",handleSelected:"handle--selected"},k={drag:"drag"},i={itemLabel:"{itemLabel}",position:"{position}",total:"{total}"},C=d`: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:flex}.handle{display:flex;align-items:center;justify-content:center;align-self:stretch;border-style:none;outline-color:transparent;color:var(--calcite-handle-icon-color, var(--calcite-color-border-input));background-color:var(--calcite-handle-background-color, transparent);padding-block:.75rem;padding-inline:.25rem;line-height:0}.handle calcite-icon{color:inherit}:host(:not([disabled])) .handle{cursor:move}:host(:not([disabled])) .handle:hover{color:var(--calcite-handle-icon-color-hover, var(--calcite-color-text-1));background-color:var(--calcite-handle-background-color-hover, var(--calcite-color-foreground-2))}:host(:not([disabled])) .handle:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))));color:var(--calcite-handle-icon-color-hover, var(--calcite-color-text-1))}:host(:not([disabled])) .handle--selected{color:var(--calcite-handle-icon-color-selected, var(--calcite-color-text-1));background-color:var(--calcite-handle-background-color-selected, var(--calcite-color-foreground-3))}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}`,o=class extends p{constructor(){super(...arguments),this.handleButtonRef=u(),this.messages=v({blocking:!0}),this.focusSetter=g()(this),this.interactiveContainer=y(this),this.blurUnselectDisabled=!1,this.disabled=!1,this.selected=!1,this.calciteHandleChange=l({cancelable:!1}),this.calciteHandleNudge=l({cancelable:!1}),this.calciteInternalAssistiveTextChange=l({cancelable:!1})}static{this.properties={blurUnselectDisabled:[5,{},{type:Boolean}],disabled:[7,{},{reflect:!0,type:Boolean}],dragHandle:[3,{},{reflect:!0}],label:1,messageOverrides:[0,{},{attribute:!1}],selected:[7,{},{reflect:!0,type:Boolean}],setPosition:[9,{},{type:Number}],setSize:[9,{},{type:Number}]}}static{this.styles=C}async setFocus(e){return this.focusSetter(()=>this.handleButtonRef.value,e)}willUpdate(e){(e.has("messages")||e.has("label")||e.has("selected")&&(this.hasUpdated||this.selected!==!1)||e.has("setPosition")||e.has("setSize"))&&this.handleAriaTextChange()}loaded(){x.deprecated("component",{component:this,name:"handle",removalVersion:5,suggested:"sort-handle"})}handleAriaTextChange(){let e=this.getAriaText("live");e&&this.calciteInternalAssistiveTextChange.emit({message:e})}getTooltip(){let{label:e,messages:t}=this;return t?e?t.dragHandle.replace(i.itemLabel,e):t.dragHandleUntitled:""}getAriaText(e){let{setPosition:t,setSize:r,label:c,messages:a,selected:n}=this;return!a||!c||typeof r!="number"||typeof t!="number"?null:(e==="label"?n?a.dragHandleChange:a.dragHandleIdle:n?a.dragHandleActive:a.dragHandleCommit).replace(i.position,t.toString()).replace(i.itemLabel,c).replace(i.total,r.toString())}handleKeyDown(e){if(!this.disabled)switch(e.key){case" ":this.selected=!this.selected,this.calciteHandleChange.emit(),e.preventDefault();break;case"ArrowUp":if(!this.selected)return;e.preventDefault(),this.calciteHandleNudge.emit({direction:"up"});break;case"ArrowDown":if(!this.selected)return;e.preventDefault(),this.calciteHandleNudge.emit({direction:"down"});break}}handleBlur(){this.blurUnselectDisabled||this.disabled||this.selected&&(this.selected=!1,this.calciteHandleChange.emit())}render(){return this.interactiveContainer({disabled:this.disabled,children:h`<span .ariaChecked=${this.disabled?null:this.selected} .ariaDisabled=${this.disabled?this.disabled:null} .ariaLabel=${this.disabled?null:this.getAriaText("label")} class=${f({[S.handle]:!0,[S.handleSelected]:!this.disabled&&this.selected})} @blur=${this.handleBlur} @keydown=${this.handleKeyDown} role=radio tabindex=${(this.disabled?null:0)??s} title=${this.getTooltip()??s} ${b(this.handleButtonRef)}><calcite-icon .icon=${k.drag} scale=s></calcite-icon></span>`})}};m("calcite-handle",o);export{o as Handle};
+import{a as y}from"./OSXJ5GXG.js";import{a as x}from"./J5NLZPSL.js";import{a as v}from"./HDFMIYOW.js";import{a as g}from"./UXDLXWJ3.js";import"./RH6ZIP65.js";import"./6SWMJ5CU.js";import"./XAHDXNHK.js";import"./N5Y264VM.js";import"./OAOQ5BXS.js";import{E as u,F as b,G as p,H as f,S as m,g as d,h,l as s,p as l}from"./2EHFS2P4.js";var S={handle:"handle",handleSelected:"handle--selected"},k={drag:"drag"},i={itemLabel:"{itemLabel}",position:"{position}",total:"{total}"},C=d`: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:flex}.handle{display:flex;align-items:center;justify-content:center;align-self:stretch;border-style:none;outline-color:transparent;color:var(--calcite-handle-icon-color, var(--calcite-color-border-input));background-color:var(--calcite-handle-background-color, transparent);padding-block:.75rem;padding-inline:.25rem;line-height:0}.handle calcite-icon{color:inherit}:host(:not([disabled])) .handle{cursor:move}:host(:not([disabled])) .handle:hover{color:var(--calcite-handle-icon-color-hover, var(--calcite-color-text-1));background-color:var(--calcite-handle-background-color-hover, var(--calcite-color-foreground-2))}:host(:not([disabled])) .handle:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))));color:var(--calcite-handle-icon-color-hover, var(--calcite-color-text-1))}:host(:not([disabled])) .handle--selected{color:var(--calcite-handle-icon-color-selected, var(--calcite-color-text-1));background-color:var(--calcite-handle-background-color-selected, var(--calcite-color-foreground-3))}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}`,o=class extends p{constructor(){super(...arguments),this.handleButtonRef=u(),this.messages=v({blocking:!0}),this.focusSetter=g()(this),this.interactiveContainer=y(this),this.blurUnselectDisabled=!1,this.disabled=!1,this.selected=!1,this.calciteHandleChange=l({cancelable:!1}),this.calciteHandleNudge=l({cancelable:!1}),this.calciteInternalAssistiveTextChange=l({cancelable:!1})}static{this.properties={blurUnselectDisabled:[5,{},{type:Boolean}],disabled:[7,{},{reflect:!0,type:Boolean}],dragHandle:[3,{},{reflect:!0}],label:1,messageOverrides:[0,{},{attribute:!1}],selected:[7,{},{reflect:!0,type:Boolean}],setPosition:[9,{},{type:Number}],setSize:[9,{},{type:Number}]}}static{this.styles=C}async setFocus(e){return this.focusSetter(()=>this.handleButtonRef.value,e)}willUpdate(e){(e.has("messages")||e.has("label")||e.has("selected")&&(this.hasUpdated||this.selected!==!1)||e.has("setPosition")||e.has("setSize"))&&this.handleAriaTextChange()}loaded(){x.deprecated("component",{component:this,name:"handle",removalVersion:5,suggested:"sort-handle"})}handleAriaTextChange(){let e=this.getAriaText("live");e&&this.calciteInternalAssistiveTextChange.emit({message:e})}getTooltip(){let{label:e,messages:t}=this;return t?e?t.dragHandle.replace(i.itemLabel,e):t.dragHandleUntitled:""}getAriaText(e){let{setPosition:t,setSize:r,label:c,messages:a,selected:n}=this;return!a||!c||typeof r!="number"||typeof t!="number"?null:(e==="label"?n?a.dragHandleChange:a.dragHandleIdle:n?a.dragHandleActive:a.dragHandleCommit).replace(i.position,t.toString()).replace(i.itemLabel,c).replace(i.total,r.toString())}handleKeyDown(e){if(!this.disabled)switch(e.key){case" ":this.selected=!this.selected,this.calciteHandleChange.emit(),e.preventDefault();break;case"ArrowUp":if(!this.selected)return;e.preventDefault(),this.calciteHandleNudge.emit({direction:"up"});break;case"ArrowDown":if(!this.selected)return;e.preventDefault(),this.calciteHandleNudge.emit({direction:"down"});break}}handleBlur(){this.blurUnselectDisabled||this.disabled||this.selected&&(this.selected=!1,this.calciteHandleChange.emit())}render(){return this.interactiveContainer({disabled:this.disabled,children:h`<span .ariaChecked=${this.disabled?null:this.selected} .ariaDisabled=${this.disabled?this.disabled:null} .ariaLabel=${this.disabled?null:this.getAriaText("label")} class=${f({[S.handle]:!0,[S.handleSelected]:!this.disabled&&this.selected})} @blur=${this.handleBlur} @keydown=${this.handleKeyDown} role=radio tabindex=${(this.disabled?null:0)??s} title=${this.getTooltip()??s} ${b(this.handleButtonRef)}><calcite-icon .icon=${k.drag} scale=s></calcite-icon></span>`})}};m("calcite-handle",o);export{o as Handle};

package/dist/cdn/{RWBPA37A.js → BFBGUCIN.js}

@@ -1,2 +1,2 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import{a as O}from"./YO7MJMEB.js";import{a as F}from"./MIAQT2TM.js";import{a as T}from"./CS7M52ZC.js";import{c as z,d as S,e as q}from"./27P2SCOG.js";import{a as I}from"./T7B6EPNI.js";import{a as C}from"./P7ITHHCY.js";import{a as L}from"./6VIA3EQ6.js";import"./RH6ZIP65.js";import"./EGJIW3MN.js";import"./TBETPECJ.js";import"./JMDN6DZ2.js";import{a as V}from"./OAOQ5BXS.js";import{D as y,G as $,H as s,I as x,J as o,L as k,S as w,g as b,h as l,p as f}from"./SBHUMGKR.js";var E=({full:h,scale:e,partial:t})=>l`<calcite-icon class=${s(t?void 0:"icon")} .icon=${h?"star-f":"star"} .scale=${e}></calcite-icon>`,n={fieldSet:"fieldset",star:"star",fraction:"fraction",numberAverage:"number--average",numberCount:"number--count",wrapper:"wrapper",visuallyHidden:"visually-hidden"},M="calcite-ratings",v={validationMessage:"validationMessage",host:h=>`${M}-${h}`},P=b`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([read-only]) *,:host([disabled]) *,:host([read-only]) ::slotted(*),:host([disabled]) ::slotted(*){pointer-events:none}:host{position:relative;display:flex;align-items:center;inline-size:fit-content}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([scale=s]){block-size:1.5rem;--calcite-internal-rating-spacing: .25rem}:host([scale=m]){block-size:2rem;--calcite-internal-rating-spacing: .5rem}:host([scale=l]){block-size:2.75rem;--calcite-internal-rating-spacing: .75rem}.fieldset{margin:0;display:flex;border-width:0;padding:0;align-items:center;gap:var(--calcite-rating-spacing, var(--calcite-internal-rating-spacing))}.wrapper{display:inline-block}.star{transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;position:relative;display:flex;flex-direction:column;cursor:pointer;color:var(--calcite-rating-color, var(--calcite-color-border-input))}.star:hover{color:var(--calcite-rating-color-hover, var(--calcite-color-brand-hover))}.star:active{color:var(--calcite-rating-color-press, var(--calcite-color-brand-press))}.star:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(var(--calcite-spacing-base) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.average,.fraction{color:var(--calcite-rating-average-color, var(--calcite-color-status-warning))}.hovered,.selected{color:var(--calcite-rating-color, var(--calcite-color-brand))}.fraction{transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;position:absolute;pointer-events:none;inset-block-start:0;overflow:hidden;inset-inline-start:0}calcite-chip{pointer-events:none;cursor:default}.number--average{font-weight:700;color:var(--calcite-rating-average-text-color)}.number--count{color:var(--calcite-rating-count-text-color, var(--calcite-color-text-2));font-style:italic}.number--count:not(:first-child){margin-inline-start:var(--calcite-rating-spacing, var(--calcite-internal-rating-spacing))}.visually-hidden{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.internal-label-alignment--center{align-items:center}.internal-label-alignment--end{align-items:end}.internal-label--container{display:flex;justify-content:space-between;color:var(--calcite-color-text-1)}.internal-label-required--indicator{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-status-danger);padding-inline:var(--calcite-spacing-base)}.internal-label-required--indicator:hover{cursor:help}.internal-label--text{line-height:1}:host([scale=s]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-xxs)}:host([scale=s]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label--text{font-size:var(--calcite-font-size--2)}:host([scale=m]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label--text{font-size:var(--calcite-font-size--1)}:host([scale=l]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=l]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-md)}:host([scale=l]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-md)}:host([scale=l]) .internal-label--text{font-size:var(--calcite-font-size-0)}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:.5rem}:host([scale=s]) .validation-container{padding-block-start:.25rem}::slotted(input[slot=hidden-form-input]){margin:0!important;opacity:0!important;outline:none!important;padding:0!important;position:absolute!important;inset:0!important;transform:none!important;-webkit-appearance:none!important;z-index:-1!important}:host([hidden]){display:none}[hidden]{display:none}`,m=class extends ${constructor(){super(),this.emit=!1,this.formSupport=T({inputType:"number",getValue:()=>this.value===0?"":this.value})(this),this.guid=v.host(V()),this.isKeyboardInteraction=!0,this.labelElements=[],this.max=5,this._value=0,this.messages=C({blocking:!0}),this.focusSetter=L()(this),this.interactiveContainer=I(this),this.disabled=!1,this.readOnly=!1,this.required=!1,this.scale="m",this.showChip=!1,this.status="idle",this.calciteRatingChange=f({cancelable:!1}),this.listen("keydown",this.handleHostKeyDown),this.listen("pointerout",this.handleRatingPointerOut),this.listen("pointerover",this.handleRatingPointerOver)}static{this.properties={hoverValue:[16,{},{state:!0}],average:[11,{},{reflect:!0,type:Number}],count:[11,{},{reflect:!0,type:Number}],disabled:[7,{},{reflect:!0,type:Boolean}],form:[3,{},{reflect:!0}],labelText:1,messageOverrides:[0,{},{attribute:!1}],name:[3,{},{reflect:!0}],readOnly:[7,{},{reflect:!0,type:Boolean}],required:[7,{},{reflect:!0,type:Boolean}],scale:[3,{},{reflect:!0}],showChip:[7,{},{reflect:!0,type:Boolean}],status:[3,{},{reflect:!0}],validationIcon:[3,{converter:k,type:String},{reflect:!0}],validationMessage:1,validity:[32,{},{readOnly:!0,attribute:!1}],value:[11,{},{reflect:!0,type:Number}]}}static{this.formAssociated=!0}static{this.styles=P}get value(){return this._value}set value(e){let t=this._value;e!==t&&(this._value=e,this.hasUpdated&&this.handleValueUpdate(e))}async setFocus(e){return this.focusSetter(()=>this.el,e)}connectedCallback(){super.connectedCallback(),z(this)}async load(){this.requestUpdate("value")}willUpdate(){this.starsMap=Array.from({length:this.max},(e,t)=>{let a=t+1,i=!this.hoverValue&&this.average&&!this.value&&a<=this.average,u=a===this.value,r=this.average&&this.average+1-a,c=a<=this.hoverValue,p=`${this.guid}-${a}`,d=!this.hoverValue&&!this.value&&!c&&r>0&&r<1,g=this.value>=a,R=this.getTabIndex(a);return{average:i,checked:u,fraction:r,hovered:c,id:p,partial:d,selected:g,value:a,tabIndex:R}})}loaded(){this.labelElements=Array.from(this.renderRoot.querySelectorAll("label"))}disconnectedCallback(){super.disconnectedCallback(),S(this)}handleValueUpdate(e){this.hoverValue=e,this.emit&&this.calciteRatingChange.emit(),this.emit=!1}onLabelClick(){this.setFocus()}handleRatingPointerOver(){this.isKeyboardInteraction=!1}handleRatingPointerOut(){this.isKeyboardInteraction=!0,this.hoverValue=null}handleHostKeyDown(){this.isKeyboardInteraction=!0}handleLabelKeyDown(e){let t=this.getValueFromLabelEvent(e),a=e.key,i=a==" "?void 0:Number(a);if(this.emit=!0,isNaN(i))switch(a){case"Enter":case" ":this.value=!this.required&&this.value===t?0:t;break;case"ArrowLeft":this.value=this.getPreviousRatingValue(t),this.updateFocus(),e.preventDefault();break;case"ArrowRight":this.value=this.getNextRatingValue(t),this.updateFocus(),e.preventDefault();break;case"Tab":this.hoverValue=null;break}else!this.required&&i>=0&&i<=this.max?this.value=i:this.required&&i>0&&i<=this.max&&(this.value=i),this.updateFocus()}handleInputChange(e){if(this.isKeyboardInteraction===!0){let t=Number(e.target.value);this.hoverValue=t,this.value=t}}handleLabelPointerOver(e){this.hoverValue=this.getValueFromLabelEvent(e)}handleLabelPointerDown(e){let t=e.currentTarget,a=this.getValueFromLabelEvent(e);this.hoverValue=a,this.emit=!0,this.value=!this.required&&this.value===a?0:a,t.focus()}handleLabelClick(e){e.preventDefault()}handleLabelFocus(e){let t=this.getValueFromLabelEvent(e);this.hoverValue=t}updateFocus(){this.hoverValue=this.value,this.labelElements[this.value-1].focus()}getTabIndex(e){return this.readOnly||this.value!==e&&(this.value||e!==1)?-1:0}getValueFromLabelEvent(e){let t=e.currentTarget;return Number(t.getAttribute("data-value"))}getNextRatingValue(e){return e===5?1:e+1}getPreviousRatingValue(e){return e===1?5:e-1}render(){let e=this.count?.toString();return this.interactiveContainer({disabled:this.disabled,children:l`<span class=${s(n.wrapper)}>${this.labelText&&F({labelText:this.labelText,onClick:this.onLabelClick,required:this.required,tooltipText:this.messages.required})||""}<fieldset class=${s(n.fieldSet)} .disabled=${this.disabled}><legend class=${s(n.visuallyHidden)}>${this.messages.rating}</legend>${this.starsMap.map(({average:t,checked:a,fraction:i,hovered:u,id:r,partial:c,selected:p,value:d,tabIndex:g})=>l`<label class=${s({[n.star]:!0,selected:p,hovered:u,average:t,partial:c})} data-value=${d??o} for=${r??o} @click=${this.handleLabelClick} @focus=${this.handleLabelFocus} @keydown=${this.handleLabelKeyDown} @pointerdown=${this.handleLabelPointerDown} @pointerover=${this.handleLabelPointerOver} tabindex=${g??o}><input aria-errormessage=${v.validationMessage} .ariaInvalid=${this.status==="invalid"} .ariaLabel=${q(this)} .ariaRequired=${this.required} .checked=${a} class=${s(n.visuallyHidden)} .disabled=${this.disabled||this.readOnly} id=${r??o} name=${this.guid??o} @change=${this.handleInputChange} tabindex=-1 type=radio .value=${y(d??"")}>${E({full:p||t||u,scale:this.scale})}${c&&l`<div class=${s(n.fraction)} style=${x({width:`${i*100}%`})}>${E({full:!0,partial:!0,scale:this.scale})}</div>`||""}<span class=${s(n.visuallyHidden)}>${this.messages.stars.replace("{num}",`${d}`)}</span></label>`)}${(this.count||this.average)&&this.showChip?l`<calcite-chip .label=${e} .scale=${this.scale} .value=${e}>${!!this.average&&l`<span class=${s(n.numberAverage)}>${this.average.toString()}</span>`||""}${!!this.count&&l`<span class=${s(n.numberCount)}>(${e})</span>`||""}</calcite-chip>`:null}</fieldset>${this.validationMessage&&this.status==="invalid"?O({icon:this.validationIcon,id:v.validationMessage,message:this.validationMessage,scale:this.scale,status:this.status}):null}</span>`})}};w("calcite-rating",m);export{m as Rating};
+import{a as O}from"./PI5E6IHE.js";import{a as F}from"./ORXV4MP6.js";import{a as T}from"./5RX5WZO5.js";import{c as z,d as S,e as q}from"./EEVHJKWU.js";import{a as I}from"./OSXJ5GXG.js";import{a as C}from"./HDFMIYOW.js";import{a as L}from"./UXDLXWJ3.js";import"./RH6ZIP65.js";import"./6SWMJ5CU.js";import"./XAHDXNHK.js";import"./N5Y264VM.js";import{a as V}from"./OAOQ5BXS.js";import{D as y,G as $,H as s,I as x,J as o,L as k,S as w,g as b,h as l,p as f}from"./2EHFS2P4.js";var E=({full:h,scale:e,partial:t})=>l`<calcite-icon class=${s(t?void 0:"icon")} .icon=${h?"star-f":"star"} .scale=${e}></calcite-icon>`,n={fieldSet:"fieldset",star:"star",fraction:"fraction",numberAverage:"number--average",numberCount:"number--count",wrapper:"wrapper",visuallyHidden:"visually-hidden"},M="calcite-ratings",v={validationMessage:"validationMessage",host:h=>`${M}-${h}`},P=b`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([read-only]) *,:host([disabled]) *,:host([read-only]) ::slotted(*),:host([disabled]) ::slotted(*){pointer-events:none}:host{position:relative;display:flex;align-items:center;inline-size:fit-content}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([scale=s]){block-size:1.5rem;--calcite-internal-rating-spacing: .25rem}:host([scale=m]){block-size:2rem;--calcite-internal-rating-spacing: .5rem}:host([scale=l]){block-size:2.75rem;--calcite-internal-rating-spacing: .75rem}.fieldset{margin:0;display:flex;border-width:0;padding:0;align-items:center;gap:var(--calcite-rating-spacing, var(--calcite-internal-rating-spacing))}.wrapper{display:inline-block}.star{transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;position:relative;display:flex;flex-direction:column;cursor:pointer;color:var(--calcite-rating-color, var(--calcite-color-border-input))}.star:hover{color:var(--calcite-rating-color-hover, var(--calcite-color-brand-hover))}.star:active{color:var(--calcite-rating-color-press, var(--calcite-color-brand-press))}.star:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(var(--calcite-spacing-base) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.average,.fraction{color:var(--calcite-rating-average-color, var(--calcite-color-status-warning))}.hovered,.selected{color:var(--calcite-rating-color, var(--calcite-color-brand))}.fraction{transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;position:absolute;pointer-events:none;inset-block-start:0;overflow:hidden;inset-inline-start:0}calcite-chip{pointer-events:none;cursor:default}.number--average{font-weight:700;color:var(--calcite-rating-average-text-color)}.number--count{color:var(--calcite-rating-count-text-color, var(--calcite-color-text-2));font-style:italic}.number--count:not(:first-child){margin-inline-start:var(--calcite-rating-spacing, var(--calcite-internal-rating-spacing))}.visually-hidden{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.internal-label-alignment--center{align-items:center}.internal-label-alignment--end{align-items:end}.internal-label--container{display:flex;justify-content:space-between;color:var(--calcite-color-text-1)}.internal-label-required--indicator{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-status-danger);padding-inline:var(--calcite-spacing-base)}.internal-label-required--indicator:hover{cursor:help}.internal-label--text{line-height:1}:host([scale=s]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-xxs)}:host([scale=s]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label--text{font-size:var(--calcite-font-size--2)}:host([scale=m]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label--text{font-size:var(--calcite-font-size--1)}:host([scale=l]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=l]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-md)}:host([scale=l]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-md)}:host([scale=l]) .internal-label--text{font-size:var(--calcite-font-size-0)}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:.5rem}:host([scale=s]) .validation-container{padding-block-start:.25rem}::slotted(input[slot=hidden-form-input]){margin:0!important;opacity:0!important;outline:none!important;padding:0!important;position:absolute!important;inset:0!important;transform:none!important;-webkit-appearance:none!important;z-index:-1!important}:host([hidden]){display:none}[hidden]{display:none}`,m=class extends ${constructor(){super(),this.emit=!1,this.formSupport=T({inputType:"number",getValue:()=>this.value===0?"":this.value})(this),this.guid=v.host(V()),this.isKeyboardInteraction=!0,this.labelElements=[],this.max=5,this._value=0,this.messages=C({blocking:!0}),this.focusSetter=L()(this),this.interactiveContainer=I(this),this.disabled=!1,this.readOnly=!1,this.required=!1,this.scale="m",this.showChip=!1,this.status="idle",this.calciteRatingChange=f({cancelable:!1}),this.listen("keydown",this.handleHostKeyDown),this.listen("pointerout",this.handleRatingPointerOut),this.listen("pointerover",this.handleRatingPointerOver)}static{this.properties={hoverValue:[16,{},{state:!0}],average:[11,{},{reflect:!0,type:Number}],count:[11,{},{reflect:!0,type:Number}],disabled:[7,{},{reflect:!0,type:Boolean}],form:[3,{},{reflect:!0}],labelText:1,messageOverrides:[0,{},{attribute:!1}],name:[3,{},{reflect:!0}],readOnly:[7,{},{reflect:!0,type:Boolean}],required:[7,{},{reflect:!0,type:Boolean}],scale:[3,{},{reflect:!0}],showChip:[7,{},{reflect:!0,type:Boolean}],status:[3,{},{reflect:!0}],validationIcon:[3,{converter:k,type:String},{reflect:!0}],validationMessage:1,validity:[32,{},{readOnly:!0,attribute:!1}],value:[11,{},{reflect:!0,type:Number}]}}static{this.formAssociated=!0}static{this.styles=P}get value(){return this._value}set value(e){let t=this._value;e!==t&&(this._value=e,this.hasUpdated&&this.handleValueUpdate(e))}async setFocus(e){return this.focusSetter(()=>this.el,e)}connectedCallback(){super.connectedCallback(),z(this)}async load(){this.requestUpdate("value")}willUpdate(){this.starsMap=Array.from({length:this.max},(e,t)=>{let a=t+1,i=!this.hoverValue&&this.average&&!this.value&&a<=this.average,u=a===this.value,r=this.average&&this.average+1-a,c=a<=this.hoverValue,p=`${this.guid}-${a}`,d=!this.hoverValue&&!this.value&&!c&&r>0&&r<1,g=this.value>=a,R=this.getTabIndex(a);return{average:i,checked:u,fraction:r,hovered:c,id:p,partial:d,selected:g,value:a,tabIndex:R}})}loaded(){this.labelElements=Array.from(this.renderRoot.querySelectorAll("label"))}disconnectedCallback(){super.disconnectedCallback(),S(this)}handleValueUpdate(e){this.hoverValue=e,this.emit&&this.calciteRatingChange.emit(),this.emit=!1}onLabelClick(){this.setFocus()}handleRatingPointerOver(){this.isKeyboardInteraction=!1}handleRatingPointerOut(){this.isKeyboardInteraction=!0,this.hoverValue=null}handleHostKeyDown(){this.isKeyboardInteraction=!0}handleLabelKeyDown(e){let t=this.getValueFromLabelEvent(e),a=e.key,i=a==" "?void 0:Number(a);if(this.emit=!0,isNaN(i))switch(a){case"Enter":case" ":this.value=!this.required&&this.value===t?0:t;break;case"ArrowLeft":this.value=this.getPreviousRatingValue(t),this.updateFocus(),e.preventDefault();break;case"ArrowRight":this.value=this.getNextRatingValue(t),this.updateFocus(),e.preventDefault();break;case"Tab":this.hoverValue=null;break}else!this.required&&i>=0&&i<=this.max?this.value=i:this.required&&i>0&&i<=this.max&&(this.value=i),this.updateFocus()}handleInputChange(e){if(this.isKeyboardInteraction===!0){let t=Number(e.target.value);this.hoverValue=t,this.value=t}}handleLabelPointerOver(e){this.hoverValue=this.getValueFromLabelEvent(e)}handleLabelPointerDown(e){let t=e.currentTarget,a=this.getValueFromLabelEvent(e);this.hoverValue=a,this.emit=!0,this.value=!this.required&&this.value===a?0:a,t.focus()}handleLabelClick(e){e.preventDefault()}handleLabelFocus(e){let t=this.getValueFromLabelEvent(e);this.hoverValue=t}updateFocus(){this.hoverValue=this.value,this.labelElements[this.value-1].focus()}getTabIndex(e){return this.readOnly||this.value!==e&&(this.value||e!==1)?-1:0}getValueFromLabelEvent(e){let t=e.currentTarget;return Number(t.getAttribute("data-value"))}getNextRatingValue(e){return e===5?1:e+1}getPreviousRatingValue(e){return e===1?5:e-1}render(){let e=this.count?.toString();return this.interactiveContainer({disabled:this.disabled,children:l`<span class=${s(n.wrapper)}>${this.labelText&&F({labelText:this.labelText,onClick:this.onLabelClick,required:this.required,tooltipText:this.messages.required})||""}<fieldset class=${s(n.fieldSet)} .disabled=${this.disabled}><legend class=${s(n.visuallyHidden)}>${this.messages.rating}</legend>${this.starsMap.map(({average:t,checked:a,fraction:i,hovered:u,id:r,partial:c,selected:p,value:d,tabIndex:g})=>l`<label class=${s({[n.star]:!0,selected:p,hovered:u,average:t,partial:c})} data-value=${d??o} for=${r??o} @click=${this.handleLabelClick} @focus=${this.handleLabelFocus} @keydown=${this.handleLabelKeyDown} @pointerdown=${this.handleLabelPointerDown} @pointerover=${this.handleLabelPointerOver} tabindex=${g??o}><input aria-errormessage=${v.validationMessage} .ariaInvalid=${this.status==="invalid"} .ariaLabel=${q(this)} .ariaRequired=${this.required} .checked=${a} class=${s(n.visuallyHidden)} .disabled=${this.disabled||this.readOnly} id=${r??o} name=${this.guid??o} @change=${this.handleInputChange} tabindex=-1 type=radio .value=${y(d??"")}>${E({full:p||t||u,scale:this.scale})}${c&&l`<div class=${s(n.fraction)} style=${x({width:`${i*100}%`})}>${E({full:!0,partial:!0,scale:this.scale})}</div>`||""}<span class=${s(n.visuallyHidden)}>${this.messages.stars.replace("{num}",`${d}`)}</span></label>`)}${(this.count||this.average)&&this.showChip?l`<calcite-chip .label=${e} .scale=${this.scale} .value=${e}>${!!this.average&&l`<span class=${s(n.numberAverage)}>${this.average.toString()}</span>`||""}${!!this.count&&l`<span class=${s(n.numberCount)}>(${e})</span>`||""}</calcite-chip>`:null}</fieldset>${this.validationMessage&&this.status==="invalid"?O({icon:this.validationIcon,id:v.validationMessage,message:this.validationMessage,scale:this.scale,status:this.status}):null}</span>`})}};w("calcite-rating",m);export{m as Rating};

package/dist/cdn/{FBSPWAST.js → BUQJTUSJ.js}

@@ -1,2 +1,2 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import{a as pe,d as q,e as Ce}from"./QS4T2NHO.js";import{a as re}from"./YJJ36KKF.js";import{A as P,B as he,C as X,D as de,E as ue,a as x,b as n,c as m,d as I,e as k,f as p,g as E,h as b,i as D,j,k as U,m as W,n as O,o as B,s as R,t as S,v as ce,x as _,y as N,z as V}from"./DSQ47C3C.js";import"./CUJ2U3RS.js";import{a as le}from"./T7B6EPNI.js";import{a as T}from"./U2UN3VJQ.js";import{a as se}from"./VAL3I4Q6.js";import{c as H}from"./AP2LDRUV.js";import{a as ne}from"./YGX7CUXN.js";import{a as te}from"./ENDXE7YY.js";import{a as ae}from"./P7ITHHCY.js";import{a as oe}from"./6VIA3EQ6.js";import"./RH6ZIP65.js";import{e as ie}from"./EGJIW3MN.js";import"./TBETPECJ.js";import{w as K}from"./JMDN6DZ2.js";import"./OAOQ5BXS.js";import{E as F,F as g,G as Q,H as r,I as $,S as ee,g as Z,h as u,l as w,p as L}from"./SBHUMGKR.js";var Ae=Z`: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-relative-sm);line-height:var(--calcite-font-line-height-sm);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: var(--calcite-spacing-sm)}:host([scale=m]){--calcite-internal-color-picker-min-width: 240px;--calcite-color-picker-spacing: var(--calcite-spacing-md)}:host([scale=l]){--calcite-internal-color-picker-min-width: 304px;--calcite-color-picker-spacing: var(--calcite-spacing-lg);font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base)}:host([scale=l]) .section:first-of-type{padding-block-start:var(--calcite-color-picker-spacing)}: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}calcite-input-number{--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-prefix-text-color: var(--calcite-color-picker-input-prefix-text-color);--calcite-input-suffix-text-color: var(--calcite-color-picker-input-suffix-text-color)}calcite-button{--calcite-button-text-color: var(--calcite-color-picker-action-text-color);--calcite-button-text-color-press: var(--calcite-color-picker-action-text-color-press)}calcite-button:hover,calcite-button:focus{--calcite-button-text-color: var(--calcite-color-picker-action-text-color-hover)}calcite-button:active{--calcite-button-text-color: var(--calcite-color-picker-action-text-color-press)}calcite-tabs{--calcite-tab-border-color: var(--calcite-color-picker-tab-border-color);--calcite-tab-text-color: var(--calcite-color-picker-tab-text-color);--calcite-tab-accent-color-press: var(--calcite-color-picker-tab-accent-color);--calcite-swatch-corner-radius: var(--calcite-color-picker-swatch-corner-radius)}calcite-tab-title:hover{--calcite-color-text-1: var(--calcite-color-picker-tab-text-color-hover)}calcite-swatch{--calcite-swatch-corner-radius: var(--calcite-color-picker-swatch-corner-radius)}.container{display:flex;flex-direction:column;block-size:min-content;border:1px solid var(--calcite-color-picker-border-color, var(--calcite-color-border-3));background-color:var(--calcite-color-picker-background-color, var(--calcite-color-foreground-1));border-radius:var(--calcite-color-picker-corner-radius, var(--calcite-corner-radius-none));box-shadow:var(--calcite-color-picker-shadow, var(--calcite-shadow-none))}.control-and-scope{position:relative;display:flex;cursor:pointer;touch-action:none}.color-field,.control-and-scope{-webkit-user-select:none;user-select:none;border-radius:var(--calcite-color-picker-corner-radius, var(--calcite-corner-radius-none)) var(--calcite-color-picker-corner-radius, var(--calcite-corner-radius-none)) var(--calcite-corner-radius-none) var(--calcite-corner-radius-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-relative-base);outline-color:transparent}.scope:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(var(--calcite-spacing-base) * calc(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-picker-text-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-buttons{display:flex}.swatch-group{margin-block-start:var(--calcite-color-picker-spacing)}:host([hidden]){display:none}[hidden]{display:none}`,fe=16,G=class extends Q{constructor(){super(),this._color=m,this.colorFieldScopeRef=F(),this.direction=ie(),this.hueScopeRef=F(),this.internalColorUpdateContext=null,this.isActiveChannelInputEmpty=!1,this.mode=_.HEX,this.opacityScopeRef=F(),this.resizeObserver=te("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,l=Math.round(p.s/o*e),s=Math.round(p.v/a*(a-t));this.internalColorSet(this.baseColorFieldColor.hsv().saturationv(l).value(s),i)},this.cancelable=se()(this),this.drawColorControls=H((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()},fe),this.globalPointerMoveHandler=e=>{let{activeCanvasInfo:t,el:i}=this;if(!i.isConnected||!t)return;let{context:o,bounds:a}=t,l,s,{clientX:c,clientY:h}=e;o.canvas.matches(":hover")?(l=c-a.x,s=h-a.y):(c<a.x+a.width&&c>a.x?l=c-a.x:c<a.x?l=0:l=a.width,h<a.y+a.height&&h>a.y?s=h-a.y:h<a.y?s=0:s=a.height),o===this.colorFieldRenderingContext?this.captureColorFieldColor(l,s,!1):o===this.hueSliderRenderingContext?this.captureHueSliderColor(l):o===this.opacitySliderRenderingContext&&this.captureOpacitySliderValue(l)},this.globalPointerUpHandler=e=>{if(!K(e))return;let t=this.activeCanvasInfo;this.activeCanvasInfo=null,this.drawColorControls(),t&&this.calciteColorPickerChange.emit()},this.resizeCanvas=H(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())},fe),this.updateDynamicDimensions=e=>{let t={width:de(e,this.staticDimensions,this.alphaChannel),height:this.staticDimensions.slider.height};this.dynamicDimensions={colorField:ue(e),slider:t}},this.focusSetter=oe()(this),this.interactiveContainer=le(this),this.channelMode="rgb",this.channels=this.toChannels(m),this.staticDimensions=D.m,this.savedColors=[],this.alphaChannel=!1,this.channelsDisabled=!1,this.clearable=!1,this.disabled=!1,this.fieldDisabled=!1,this.format="auto",this.hexDisabled=!1,this.savedDisabled=!1,this.scale="m",this.calciteColorPickerChange=L({cancelable:!1}),this.calciteColorPickerInput=L({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}],alphaChannel:[5,{},{type:Boolean}],channelsDisabled:[5,{},{type:Boolean}],clearable:[7,{},{reflect:!0,type:Boolean}],color:[0,{},{attribute:!1}],disabled:[7,{},{reflect:!0,type:Boolean}],fieldDisabled:[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 baseColorFieldColor(){return this.color||this.previousColor||m}get effectiveSliderWidth(){return this.dynamicDimensions.slider.width}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(e){return this.focusSetter(()=>this.el,e)}connectedCallback(){super.connectedCallback(),this.observeResize(),this.cancelable.add([this.drawColorControls,this.resizeCanvas])}async load(){this._valueWasSet||(this._value??=R(S(m,this.alphaChannel)));let{clearable:e,color:t,format:i,value:o}=this,a=e&&!o,l=N(o),s=a||i==="auto"&&l||i===l,c=s?W(o,e,l):t;s||this.showIncompatibleColorWarning(o,i),this.setMode(i,!1),this.internalColorSet(c,!1,"initial"),this.updateStaticDimensions(this.scale),this.updateDynamicDimensions(D[this.scale].minWidth);let h=`${I}${this.storageId}`;this.storageId&&localStorage.getItem(h)&&(this.savedColors=JSON.parse(localStorage.getItem(h)))}willUpdate(e){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!==D.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)}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)}handleAlphaChannelChange(e){let{format:t}=this;e&&t!=="auto"&&!P(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{clearable:i,format:o}=this,a=!i||e,l=!1;if(a){let d=N(e);if(!d||o!=="auto"&&d!==o){this.showIncompatibleColorWarning(e,o),this._value=t;return}l=this.mode!==d,this.setMode(d,this.internalColorUpdateContext===null)}let s=this.activeCanvasInfo;if(this.internalColorUpdateContext==="initial")return;if(this.internalColorUpdateContext==="user-interaction"){this.calciteColorPickerInput.emit(),s||this.calciteColorPickerChange.emit();return}let c=W(e,i,this.mode),h=!V(c,this.color);(l||h)&&this.internalColorSet(c,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,l=this.baseColorFieldColor.hue(),s=this.baseColorFieldColor.hue(l+a);this.internalColorSet(s,!1)}}handleHexInputChange(e){e.stopPropagation();let{clearable:t,color:i}=this,a=e.target.value;if(t&&!a){this.internalColorSet(null);return}let l=i&&R(S(i,P(this.mode)));a!==l&&this.internalColorSet(x(a))}handleSavedColorSelect(e){let t=e.currentTarget;this.internalColorSet(x(t.color))}handleChannelInput(e){let t=e.currentTarget,i=Number(t.getAttribute("data-channel-index")),a=i===3?b.max:this.channelMode==="rgb"?k[Object.keys(k)[i]]:p[Object.keys(p)[i]],l;if(!t.value)l="",this.isActiveChannelInputEmpty=!0,this.upOrDownArrowKeyTracker=null;else{let c=Number(t.value)+this.shiftKeyChannelAdjustment;l=pe(c,0,a).toString()}t.value=l,l!==""&&this.shiftKeyChannelAdjustment!==0?this.handleChannelChange(e):l!==""&&this.handleChannelChange(e)}handleChannelBlur(e){let t=e.currentTarget,i=Number(t.getAttribute("data-channel-index")),o=[...this.channels];!t.value&&!this.clearable&&(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?-o:0,t==="ArrowUp"&&(this.upOrDownArrowKeyTracker="up"),t==="ArrowDown"&&(this.upOrDownArrowKeyTracker="down")}getChannelInputLimit(e){return this.channelMode==="rgb"?k[Object.keys(k)[e]]:p[Object.keys(p)[e]]}handleChannelChange(e){let t=e.currentTarget,i=Number(t.getAttribute("data-channel-index")),o=[...this.channels];if(this.clearable&&!t.value){this.channels=[null,null,null,null],this.internalColorSet(null);return}let l=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 s=t.value?Number(t.value):o[i];o[i]=l?B(s):s,this.updateColorFromChannels(o)}handleSavedColorKeyDown(e){ne(e.key)&&(e.preventDefault(),this.handleSavedColorSelect(e))}handleColorFieldPointerDown(e){this.handleCanvasControlPointerDown(e,this.colorFieldRenderingContext,this.captureColorFieldColor,this.colorFieldScopeRef.value)}focusScope(e){requestAnimationFrame(()=>{e.focus()})}handleHueSliderPointerDown(e){this.handleCanvasControlPointerDown(e,this.hueSliderRenderingContext,this.captureHueSliderColor,this.hueScopeRef.value)}handleOpacitySliderPointerDown(e){this.handleCanvasControlPointerDown(e,this.opacitySliderRenderingContext,this.captureOpacitySliderValue,this.opacityScopeRef.value)}handleCanvasControlPointerDown(e,t,i,o){K(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))}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=P(e);if(i&&!o){let a=he(e);return t&&console.warn(`setting format to (${a}) as the provided one (${e}) does not support alpha`),a}if(!i&&o){let a=X(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=B(b.max/this.effectiveSliderWidth*e);this.internalColorSet(this.baseColorFieldColor.alpha(t),!1)}internalColorSet(e,t=!0,i="user-interaction"){t&&V(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===_.HEXA;return R(S(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 s=a.slice(0,3),c=a.slice(4,-1);return`${s}a(${c}, ${e.alpha()})`}return a}let o=e[X(t)]().round().object();return t.endsWith("a")?ce(o):o}getSliderCapSpacing(){let{staticDimensions:{slider:{height:e},thumb:{radius:t}}}=this;return t*2-e}updateStaticDimensions(e="m"){this.staticDimensions=D[e]}deleteColor(){let e=S(this.color,this.alphaChannel);if(!(this.savedColors.indexOf(e)>-1))return;let i=this.savedColors.filter(a=>a!==e);this.savedColors=i;let o=`${I}${this.storageId}`;this.storageId&&localStorage.setItem(o,JSON.stringify(i))}saveColor(){let e=S(this.color,this.alphaChannel);if(this.savedColors.indexOf(e)>-1)return;let i=[...this.savedColors,e];this.savedColors=i;let o=`${I}${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,l=t.saturationv()/(p.s/o),s=a-t.value()/(p.v/a);requestAnimationFrame(()=>{this.colorFieldScopeLeft=l,this.colorFieldScopeTop=s}),this.drawThumb(this.colorFieldRenderingContext,i,l,s,t,!1)}drawThumb(e,t,i,o,a,l){let c=2*Math.PI,h=1;if(e.beginPath(),e.arc(i,o,t,0,c),e.fillStyle="#fff",e.fill(),e.strokeStyle="rgba(0,0,0,0.3)",e.lineWidth=h,e.stroke(),l&&a.alpha()<1){let f=e.createPattern(this.getCheckeredBackgroundPattern(),"repeat");e.beginPath(),e.arc(i,o,t-3,0,c),e.fillStyle=f,e.fill()}e.globalCompositeOperation="source-atop",e.beginPath(),e.arc(i,o,t-3,0,c);let d=l?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),l=i,s=this.getSliderBoundX(a,o,i);requestAnimationFrame(()=>{this.hueScopeLeft=s}),this.drawThumb(this.hueSliderRenderingContext,i,s,l,t,!1)}drawHueSlider(){let e=this.hueSliderRenderingContext,{staticDimensions:{slider:{height:t},thumb:{radius:i}}}=this,o=0,a=i-t/2,l=this.effectiveSliderWidth,s=e.createLinearGradient(0,0,l,0),c=["red","yellow","lime","cyan","blue","magenta","#ff0004"],h=1/(c.length-1),d=0;c.forEach(f=>{s.addColorStop(d,x(f).string()),d+=h}),e.clearRect(0,0,l,t+this.getSliderCapSpacing()*2),this.drawSliderPath(e,t,l,o,a),e.fillStyle=s,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,l=o-i/2,s=this.effectiveSliderWidth;e.clearRect(0,0,s,i+this.getSliderCapSpacing()*2);let c=e.createLinearGradient(0,l,s,0),h=t.rgb().alpha(0),d=t.rgb().alpha(.5),f=t.rgb().alpha(1);c.addColorStop(0,h.string()),c.addColorStop(.5,d.string()),c.addColorStop(1,f.string()),this.drawSliderPath(e,i,s,a,l);let C=e.createPattern(this.getCheckeredBackgroundPattern(),"repeat");e.fillStyle=C,e.fill(),e.fillStyle=c,e.fill(),e.strokeStyle="rgba(0,0,0,0.3)",e.lineWidth=1,e.stroke(),this.drawActiveOpacitySliderColor()}drawSliderPath(e,t,i,o,a){let l=t/2+1;e.beginPath(),e.moveTo(o+l,a),e.lineTo(o+i-l,a),e.quadraticCurveTo(o+i,a,o+i,a+l),e.lineTo(o+i,a+t-l),e.quadraticCurveTo(o+i,a+t,o+i-l,a+t),e.lineTo(o+l,a+t),e.quadraticCurveTo(o,a+t,o,a+t-l),e.lineTo(o,a+l),e.quadraticCurveTo(o,a,o+l,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=O(t.alpha())/(b.max/o),l=i,s=this.getSliderBoundX(a,o,i);requestAnimationFrame(()=>{this.opacityScopeLeft=s}),this.drawThumb(this.opacitySliderRenderingContext,i,s,l,t,!0)}getSliderBoundX(e,t,i){let o=Ce(e,t,i);return o===0?e:o===-1?q(e,0,t,i,i*2):q(e,0,t,t-i*2,t-i)}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,l=this.baseColorFieldColor.alpha(),s=this.baseColorFieldColor.alpha(l+a);this.internalColorSet(s,!1)}}updateColorFromChannels(e){this.internalColorSet(x(e,this.channelMode))}updateChannelsFromColor(e){this.channels=e?this.toChannels(e):[null,null,null,null]}toChannels(e){let{channelMode:t}=this,i=e[t]().round().array();return i.length===3&&i.push(1),i}getAdjustedScopePosition(e,t){return[e-j/2,t-j/2]}render(){let{channelsDisabled:e,color:t,colorFieldScopeLeft:i,colorFieldScopeTop:o,staticDimensions:{thumb:{radius:a}},fieldDisabled:l,hexDisabled:s,hueScopeLeft:c,messages:h,alphaChannel:d,opacityScopeLeft:f,savedColors:C,savedDisabled:y,scale:v,scopeOrientation:ve}=this,Y=this.effectiveSliderWidth,M=t?S(t,d):null,me=a,ge=c??Y*m.hue()/p.h,be=a,Se=f??Y*O(m.alpha())/b.max,J=t===void 0,z=ve==="vertical",[ye,we]=this.getAdjustedScopePosition(i,o),[$e,xe]=this.getAdjustedScopePosition(ge,me),[ke,De]=this.getAdjustedScopePosition(Se,be);return this.interactiveContainer({disabled:this.disabled,children:u`<div class=${r(n.container)}>${l?null:u`<div class=${r(n.controlAndScope)}><canvas class=${r(n.colorField)} @pointerdown=${this.handleColorFieldPointerDown} ${g(this.initColorField)}></canvas><div .ariaLabel=${z?h.value:h.saturation} .ariaValueMax=${z?p.v:p.s} aria-valuemin=0 .ariaValueNow=${(z?t?.saturationv():t?.value())||"0"} class=${r({[n.scope]:!0,[n.colorFieldScope]:!0})} @keydown=${this.handleColorFieldScopeKeyDown} role=slider style=${$({top:`${we||0}px`,left:`${ye||0}px`})} tabindex=0 ${g(this.colorFieldScopeRef)}></div></div>`}<div class=${r(n.previewAndSliders)}><calcite-swatch class=${r(n.preview)} .color=${M} .label=${M} .scale=${this.alphaChannel?"l":this.scale}></calcite-swatch><div class=${r(n.sliders)}><div class=${r(n.controlAndScope)}><canvas class=${r({[n.slider]:!0,[n.hueSlider]:!0})} @pointerdown=${this.handleHueSliderPointerDown} ${g(this.initHueSlider)}></canvas><div .ariaLabel=${h.hue} .ariaValueMax=${p.h} aria-valuemin=0 .ariaValueNow=${t?.round().hue()||m.round().hue()} class=${r({[n.scope]:!0,[n.hueScope]:!0})} @keydown=${this.handleHueScopeKeyDown} role=slider style=${$({top:`${xe}px`,left:`${$e}px`})} tabindex=0 ${g(this.hueScopeRef)}></div></div>${d?u`<div class=${r(n.controlAndScope)}><canvas class=${r({[n.slider]:!0,[n.opacitySlider]:!0})} @pointerdown=${this.handleOpacitySliderPointerDown} ${g(this.initOpacitySlider)}></canvas><div .ariaLabel=${h.opacity} .ariaValueMax=${b.max} .ariaValueMin=${b.min} .ariaValueNow=${(t||m).round().alpha()} class=${r({[n.scope]:!0,[n.opacityScope]:!0})} @keydown=${this.handleOpacityScopeKeyDown} role=slider style=${$({top:`${De}px`,left:`${ke}px`})} tabindex=0 ${g(this.opacityScopeRef)}></div></div>`:null}</div></div>${s&&e?null:u`<div class=${r({[n.controlSection]:!0,[n.section]:!0})}><div class=${r(n.hexAndChannelsGroup)}>${s?null:u`<div class=${r(n.hexOptions)}><calcite-color-picker-hex-input .allowEmpty=${this.clearable} .alphaChannel=${d} class=${r(n.control)} .messages=${h} .numberingSystem=${this.numberingSystem} @calciteColorPickerHexInputChange=${this.handleHexInputChange} .scale=${v} .value=${M}></calcite-color-picker-hex-input></div>`}${e?null:u`<calcite-tabs class=${r({[n.colorModeContainer]:!0,[n.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>`}${y?null:u`<div class=${r({[n.savedColorsSection]:!0,[n.section]:!0})}><div class=${r(n.header)}><label>${h.saved}</label><div class=${r(n.savedColorsButtons)}><calcite-button appearance=transparent class=${r(n.deleteColor)} .disabled=${J} .iconStart=${U.minus} kind=neutral .label=${h.deleteColor} @click=${this.deleteColor} .scale=${v} type=button></calcite-button><calcite-button appearance=transparent class=${r(n.saveColor)} .disabled=${J} .iconStart=${U.plus} kind=neutral .label=${h.saveColor} @click=${this.saveColor} .scale=${v} type=button></calcite-button></div></div>${C.length>0?u`<calcite-swatch-group class=${r(n.swatchGroup)} .label=${h.saved} .scale=${v} selection-mode=none>${re(C,A=>A,A=>u`<calcite-swatch class=${r(n.savedColor)} .color=${A} .label=${A} @click=${this.handleSavedColorSelect} @keydown=${this.handleSavedColorKeyDown} .scale=${v} tabindex=0></calcite-swatch>`)}</calcite-swatch-group>`:null}</div>`}</div>`})}renderChannelsTabTitle(e){let{channelMode:t,messages:i}=this,o=e===t,a=e==="rgb"?i.rgb:i.hsv;return T(e,u`<calcite-tab-title class=${r(n.colorMode)} data-color-mode=${e??w} @calciteTabsActivate=${this.handleTabActivate} .selected=${o}>${a}</calcite-tab-title>`)}renderChannelsTab(e){let{clearable:t,channelMode:i,channels:o,messages:a,alphaChannel:l}=this,s=e===i,h=e==="rgb"?[a.red,a.green,a.blue]:[a.hue,a.saturation,a.value],d=this.direction,f=l?o:o.slice(0,3);return T(e,u`<calcite-tab class=${r(n.control)} .selected=${s}><div class=${r(n.channels)} dir=ltr>${f.map((C,y)=>{let v=y===3;return v&&(C=t&&!C?C:O(C)),this.renderChannel(C,y,h[y],d,v?"%":"")})}</div></calcite-tab>`)}renderChannel(e,t,i,o,a){return T(t,u`<calcite-input-number class=${r(n.channel)} data-channel-index=${t??w} dir=${o??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=${$({marginLeft:t>0&&!(this.scale==="s"&&this.alphaChannel&&t===3)?"-1px":""})} .suffixText=${a} .value=${e?.toString()}></calcite-input-number>`)}};ee("calcite-color-picker",G);export{G as ColorPicker};
+import{a as pe,d as q,e as Ce}from"./QS4T2NHO.js";import{a as re}from"./CSTNMYYL.js";import{A as P,B as he,C as X,D as de,E as ue,a as x,b as n,c as m,d as I,e as k,f as p,g as E,h as b,i as D,j,k as U,m as W,n as O,o as B,s as R,t as S,v as ce,x as _,y as N,z as V}from"./DSQ47C3C.js";import"./CUJ2U3RS.js";import{a as le}from"./OSXJ5GXG.js";import{a as T}from"./HIRC3NOV.js";import{a as se}from"./K5YCZRLY.js";import{c as H}from"./AP2LDRUV.js";import{a as ne}from"./YGX7CUXN.js";import{a as te}from"./ENDXE7YY.js";import{a as ae}from"./HDFMIYOW.js";import{a as oe}from"./UXDLXWJ3.js";import"./RH6ZIP65.js";import{e as ie}from"./6SWMJ5CU.js";import"./XAHDXNHK.js";import{w as K}from"./N5Y264VM.js";import"./OAOQ5BXS.js";import{E as F,F as g,G as Q,H as r,I as $,S as ee,g as Z,h as u,l as w,p as L}from"./2EHFS2P4.js";var Ae=Z`: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-relative-sm);line-height:var(--calcite-font-line-height-sm);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: var(--calcite-spacing-sm)}:host([scale=m]){--calcite-internal-color-picker-min-width: 240px;--calcite-color-picker-spacing: var(--calcite-spacing-md)}:host([scale=l]){--calcite-internal-color-picker-min-width: 304px;--calcite-color-picker-spacing: var(--calcite-spacing-lg);font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base)}:host([scale=l]) .section:first-of-type{padding-block-start:var(--calcite-color-picker-spacing)}: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}calcite-input-number{--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-prefix-text-color: var(--calcite-color-picker-input-prefix-text-color);--calcite-input-suffix-text-color: var(--calcite-color-picker-input-suffix-text-color)}calcite-button{--calcite-button-text-color: var(--calcite-color-picker-action-text-color);--calcite-button-text-color-press: var(--calcite-color-picker-action-text-color-press)}calcite-button:hover,calcite-button:focus{--calcite-button-text-color: var(--calcite-color-picker-action-text-color-hover)}calcite-button:active{--calcite-button-text-color: var(--calcite-color-picker-action-text-color-press)}calcite-tabs{--calcite-tab-border-color: var(--calcite-color-picker-tab-border-color);--calcite-tab-text-color: var(--calcite-color-picker-tab-text-color);--calcite-tab-accent-color-press: var(--calcite-color-picker-tab-accent-color);--calcite-swatch-corner-radius: var(--calcite-color-picker-swatch-corner-radius)}calcite-tab-title:hover{--calcite-color-text-1: var(--calcite-color-picker-tab-text-color-hover)}calcite-swatch{--calcite-swatch-corner-radius: var(--calcite-color-picker-swatch-corner-radius)}.container{display:flex;flex-direction:column;block-size:min-content;border:1px solid var(--calcite-color-picker-border-color, var(--calcite-color-border-3));background-color:var(--calcite-color-picker-background-color, var(--calcite-color-foreground-1));border-radius:var(--calcite-color-picker-corner-radius, var(--calcite-corner-radius-none));box-shadow:var(--calcite-color-picker-shadow, var(--calcite-shadow-none))}.control-and-scope{position:relative;display:flex;cursor:pointer;touch-action:none}.color-field,.control-and-scope{-webkit-user-select:none;user-select:none;border-radius:var(--calcite-color-picker-corner-radius, var(--calcite-corner-radius-none)) var(--calcite-color-picker-corner-radius, var(--calcite-corner-radius-none)) var(--calcite-corner-radius-none) var(--calcite-corner-radius-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-relative-base);outline-color:transparent}.scope:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(var(--calcite-spacing-base) * calc(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-picker-text-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-buttons{display:flex}.swatch-group{margin-block-start:var(--calcite-color-picker-spacing)}:host([hidden]){display:none}[hidden]{display:none}`,fe=16,G=class extends Q{constructor(){super(),this._color=m,this.colorFieldScopeRef=F(),this.direction=ie(),this.hueScopeRef=F(),this.internalColorUpdateContext=null,this.isActiveChannelInputEmpty=!1,this.mode=_.HEX,this.opacityScopeRef=F(),this.resizeObserver=te("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,l=Math.round(p.s/o*e),s=Math.round(p.v/a*(a-t));this.internalColorSet(this.baseColorFieldColor.hsv().saturationv(l).value(s),i)},this.cancelable=se()(this),this.drawColorControls=H((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()},fe),this.globalPointerMoveHandler=e=>{let{activeCanvasInfo:t,el:i}=this;if(!i.isConnected||!t)return;let{context:o,bounds:a}=t,l,s,{clientX:c,clientY:h}=e;o.canvas.matches(":hover")?(l=c-a.x,s=h-a.y):(c<a.x+a.width&&c>a.x?l=c-a.x:c<a.x?l=0:l=a.width,h<a.y+a.height&&h>a.y?s=h-a.y:h<a.y?s=0:s=a.height),o===this.colorFieldRenderingContext?this.captureColorFieldColor(l,s,!1):o===this.hueSliderRenderingContext?this.captureHueSliderColor(l):o===this.opacitySliderRenderingContext&&this.captureOpacitySliderValue(l)},this.globalPointerUpHandler=e=>{if(!K(e))return;let t=this.activeCanvasInfo;this.activeCanvasInfo=null,this.drawColorControls(),t&&this.calciteColorPickerChange.emit()},this.resizeCanvas=H(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())},fe),this.updateDynamicDimensions=e=>{let t={width:de(e,this.staticDimensions,this.alphaChannel),height:this.staticDimensions.slider.height};this.dynamicDimensions={colorField:ue(e),slider:t}},this.focusSetter=oe()(this),this.interactiveContainer=le(this),this.channelMode="rgb",this.channels=this.toChannels(m),this.staticDimensions=D.m,this.savedColors=[],this.alphaChannel=!1,this.channelsDisabled=!1,this.clearable=!1,this.disabled=!1,this.fieldDisabled=!1,this.format="auto",this.hexDisabled=!1,this.savedDisabled=!1,this.scale="m",this.calciteColorPickerChange=L({cancelable:!1}),this.calciteColorPickerInput=L({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}],alphaChannel:[5,{},{type:Boolean}],channelsDisabled:[5,{},{type:Boolean}],clearable:[7,{},{reflect:!0,type:Boolean}],color:[0,{},{attribute:!1}],disabled:[7,{},{reflect:!0,type:Boolean}],fieldDisabled:[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 baseColorFieldColor(){return this.color||this.previousColor||m}get effectiveSliderWidth(){return this.dynamicDimensions.slider.width}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(e){return this.focusSetter(()=>this.el,e)}connectedCallback(){super.connectedCallback(),this.observeResize(),this.cancelable.add([this.drawColorControls,this.resizeCanvas])}async load(){this._valueWasSet||(this._value??=R(S(m,this.alphaChannel)));let{clearable:e,color:t,format:i,value:o}=this,a=e&&!o,l=N(o),s=a||i==="auto"&&l||i===l,c=s?W(o,e,l):t;s||this.showIncompatibleColorWarning(o,i),this.setMode(i,!1),this.internalColorSet(c,!1,"initial"),this.updateStaticDimensions(this.scale),this.updateDynamicDimensions(D[this.scale].minWidth);let h=`${I}${this.storageId}`;this.storageId&&localStorage.getItem(h)&&(this.savedColors=JSON.parse(localStorage.getItem(h)))}willUpdate(e){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!==D.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)}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)}handleAlphaChannelChange(e){let{format:t}=this;e&&t!=="auto"&&!P(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{clearable:i,format:o}=this,a=!i||e,l=!1;if(a){let d=N(e);if(!d||o!=="auto"&&d!==o){this.showIncompatibleColorWarning(e,o),this._value=t;return}l=this.mode!==d,this.setMode(d,this.internalColorUpdateContext===null)}let s=this.activeCanvasInfo;if(this.internalColorUpdateContext==="initial")return;if(this.internalColorUpdateContext==="user-interaction"){this.calciteColorPickerInput.emit(),s||this.calciteColorPickerChange.emit();return}let c=W(e,i,this.mode),h=!V(c,this.color);(l||h)&&this.internalColorSet(c,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,l=this.baseColorFieldColor.hue(),s=this.baseColorFieldColor.hue(l+a);this.internalColorSet(s,!1)}}handleHexInputChange(e){e.stopPropagation();let{clearable:t,color:i}=this,a=e.target.value;if(t&&!a){this.internalColorSet(null);return}let l=i&&R(S(i,P(this.mode)));a!==l&&this.internalColorSet(x(a))}handleSavedColorSelect(e){let t=e.currentTarget;this.internalColorSet(x(t.color))}handleChannelInput(e){let t=e.currentTarget,i=Number(t.getAttribute("data-channel-index")),a=i===3?b.max:this.channelMode==="rgb"?k[Object.keys(k)[i]]:p[Object.keys(p)[i]],l;if(!t.value)l="",this.isActiveChannelInputEmpty=!0,this.upOrDownArrowKeyTracker=null;else{let c=Number(t.value)+this.shiftKeyChannelAdjustment;l=pe(c,0,a).toString()}t.value=l,l!==""&&this.shiftKeyChannelAdjustment!==0?this.handleChannelChange(e):l!==""&&this.handleChannelChange(e)}handleChannelBlur(e){let t=e.currentTarget,i=Number(t.getAttribute("data-channel-index")),o=[...this.channels];!t.value&&!this.clearable&&(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?-o:0,t==="ArrowUp"&&(this.upOrDownArrowKeyTracker="up"),t==="ArrowDown"&&(this.upOrDownArrowKeyTracker="down")}getChannelInputLimit(e){return this.channelMode==="rgb"?k[Object.keys(k)[e]]:p[Object.keys(p)[e]]}handleChannelChange(e){let t=e.currentTarget,i=Number(t.getAttribute("data-channel-index")),o=[...this.channels];if(this.clearable&&!t.value){this.channels=[null,null,null,null],this.internalColorSet(null);return}let l=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 s=t.value?Number(t.value):o[i];o[i]=l?B(s):s,this.updateColorFromChannels(o)}handleSavedColorKeyDown(e){ne(e.key)&&(e.preventDefault(),this.handleSavedColorSelect(e))}handleColorFieldPointerDown(e){this.handleCanvasControlPointerDown(e,this.colorFieldRenderingContext,this.captureColorFieldColor,this.colorFieldScopeRef.value)}focusScope(e){requestAnimationFrame(()=>{e.focus()})}handleHueSliderPointerDown(e){this.handleCanvasControlPointerDown(e,this.hueSliderRenderingContext,this.captureHueSliderColor,this.hueScopeRef.value)}handleOpacitySliderPointerDown(e){this.handleCanvasControlPointerDown(e,this.opacitySliderRenderingContext,this.captureOpacitySliderValue,this.opacityScopeRef.value)}handleCanvasControlPointerDown(e,t,i,o){K(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))}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=P(e);if(i&&!o){let a=he(e);return t&&console.warn(`setting format to (${a}) as the provided one (${e}) does not support alpha`),a}if(!i&&o){let a=X(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=B(b.max/this.effectiveSliderWidth*e);this.internalColorSet(this.baseColorFieldColor.alpha(t),!1)}internalColorSet(e,t=!0,i="user-interaction"){t&&V(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===_.HEXA;return R(S(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 s=a.slice(0,3),c=a.slice(4,-1);return`${s}a(${c}, ${e.alpha()})`}return a}let o=e[X(t)]().round().object();return t.endsWith("a")?ce(o):o}getSliderCapSpacing(){let{staticDimensions:{slider:{height:e},thumb:{radius:t}}}=this;return t*2-e}updateStaticDimensions(e="m"){this.staticDimensions=D[e]}deleteColor(){let e=S(this.color,this.alphaChannel);if(!(this.savedColors.indexOf(e)>-1))return;let i=this.savedColors.filter(a=>a!==e);this.savedColors=i;let o=`${I}${this.storageId}`;this.storageId&&localStorage.setItem(o,JSON.stringify(i))}saveColor(){let e=S(this.color,this.alphaChannel);if(this.savedColors.indexOf(e)>-1)return;let i=[...this.savedColors,e];this.savedColors=i;let o=`${I}${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,l=t.saturationv()/(p.s/o),s=a-t.value()/(p.v/a);requestAnimationFrame(()=>{this.colorFieldScopeLeft=l,this.colorFieldScopeTop=s}),this.drawThumb(this.colorFieldRenderingContext,i,l,s,t,!1)}drawThumb(e,t,i,o,a,l){let c=2*Math.PI,h=1;if(e.beginPath(),e.arc(i,o,t,0,c),e.fillStyle="#fff",e.fill(),e.strokeStyle="rgba(0,0,0,0.3)",e.lineWidth=h,e.stroke(),l&&a.alpha()<1){let f=e.createPattern(this.getCheckeredBackgroundPattern(),"repeat");e.beginPath(),e.arc(i,o,t-3,0,c),e.fillStyle=f,e.fill()}e.globalCompositeOperation="source-atop",e.beginPath(),e.arc(i,o,t-3,0,c);let d=l?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),l=i,s=this.getSliderBoundX(a,o,i);requestAnimationFrame(()=>{this.hueScopeLeft=s}),this.drawThumb(this.hueSliderRenderingContext,i,s,l,t,!1)}drawHueSlider(){let e=this.hueSliderRenderingContext,{staticDimensions:{slider:{height:t},thumb:{radius:i}}}=this,o=0,a=i-t/2,l=this.effectiveSliderWidth,s=e.createLinearGradient(0,0,l,0),c=["red","yellow","lime","cyan","blue","magenta","#ff0004"],h=1/(c.length-1),d=0;c.forEach(f=>{s.addColorStop(d,x(f).string()),d+=h}),e.clearRect(0,0,l,t+this.getSliderCapSpacing()*2),this.drawSliderPath(e,t,l,o,a),e.fillStyle=s,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,l=o-i/2,s=this.effectiveSliderWidth;e.clearRect(0,0,s,i+this.getSliderCapSpacing()*2);let c=e.createLinearGradient(0,l,s,0),h=t.rgb().alpha(0),d=t.rgb().alpha(.5),f=t.rgb().alpha(1);c.addColorStop(0,h.string()),c.addColorStop(.5,d.string()),c.addColorStop(1,f.string()),this.drawSliderPath(e,i,s,a,l);let C=e.createPattern(this.getCheckeredBackgroundPattern(),"repeat");e.fillStyle=C,e.fill(),e.fillStyle=c,e.fill(),e.strokeStyle="rgba(0,0,0,0.3)",e.lineWidth=1,e.stroke(),this.drawActiveOpacitySliderColor()}drawSliderPath(e,t,i,o,a){let l=t/2+1;e.beginPath(),e.moveTo(o+l,a),e.lineTo(o+i-l,a),e.quadraticCurveTo(o+i,a,o+i,a+l),e.lineTo(o+i,a+t-l),e.quadraticCurveTo(o+i,a+t,o+i-l,a+t),e.lineTo(o+l,a+t),e.quadraticCurveTo(o,a+t,o,a+t-l),e.lineTo(o,a+l),e.quadraticCurveTo(o,a,o+l,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=O(t.alpha())/(b.max/o),l=i,s=this.getSliderBoundX(a,o,i);requestAnimationFrame(()=>{this.opacityScopeLeft=s}),this.drawThumb(this.opacitySliderRenderingContext,i,s,l,t,!0)}getSliderBoundX(e,t,i){let o=Ce(e,t,i);return o===0?e:o===-1?q(e,0,t,i,i*2):q(e,0,t,t-i*2,t-i)}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,l=this.baseColorFieldColor.alpha(),s=this.baseColorFieldColor.alpha(l+a);this.internalColorSet(s,!1)}}updateColorFromChannels(e){this.internalColorSet(x(e,this.channelMode))}updateChannelsFromColor(e){this.channels=e?this.toChannels(e):[null,null,null,null]}toChannels(e){let{channelMode:t}=this,i=e[t]().round().array();return i.length===3&&i.push(1),i}getAdjustedScopePosition(e,t){return[e-j/2,t-j/2]}render(){let{channelsDisabled:e,color:t,colorFieldScopeLeft:i,colorFieldScopeTop:o,staticDimensions:{thumb:{radius:a}},fieldDisabled:l,hexDisabled:s,hueScopeLeft:c,messages:h,alphaChannel:d,opacityScopeLeft:f,savedColors:C,savedDisabled:y,scale:v,scopeOrientation:ve}=this,Y=this.effectiveSliderWidth,M=t?S(t,d):null,me=a,ge=c??Y*m.hue()/p.h,be=a,Se=f??Y*O(m.alpha())/b.max,J=t===void 0,z=ve==="vertical",[ye,we]=this.getAdjustedScopePosition(i,o),[$e,xe]=this.getAdjustedScopePosition(ge,me),[ke,De]=this.getAdjustedScopePosition(Se,be);return this.interactiveContainer({disabled:this.disabled,children:u`<div class=${r(n.container)}>${l?null:u`<div class=${r(n.controlAndScope)}><canvas class=${r(n.colorField)} @pointerdown=${this.handleColorFieldPointerDown} ${g(this.initColorField)}></canvas><div .ariaLabel=${z?h.value:h.saturation} .ariaValueMax=${z?p.v:p.s} aria-valuemin=0 .ariaValueNow=${(z?t?.saturationv():t?.value())||"0"} class=${r({[n.scope]:!0,[n.colorFieldScope]:!0})} @keydown=${this.handleColorFieldScopeKeyDown} role=slider style=${$({top:`${we||0}px`,left:`${ye||0}px`})} tabindex=0 ${g(this.colorFieldScopeRef)}></div></div>`}<div class=${r(n.previewAndSliders)}><calcite-swatch class=${r(n.preview)} .color=${M} .label=${M} .scale=${this.alphaChannel?"l":this.scale}></calcite-swatch><div class=${r(n.sliders)}><div class=${r(n.controlAndScope)}><canvas class=${r({[n.slider]:!0,[n.hueSlider]:!0})} @pointerdown=${this.handleHueSliderPointerDown} ${g(this.initHueSlider)}></canvas><div .ariaLabel=${h.hue} .ariaValueMax=${p.h} aria-valuemin=0 .ariaValueNow=${t?.round().hue()||m.round().hue()} class=${r({[n.scope]:!0,[n.hueScope]:!0})} @keydown=${this.handleHueScopeKeyDown} role=slider style=${$({top:`${xe}px`,left:`${$e}px`})} tabindex=0 ${g(this.hueScopeRef)}></div></div>${d?u`<div class=${r(n.controlAndScope)}><canvas class=${r({[n.slider]:!0,[n.opacitySlider]:!0})} @pointerdown=${this.handleOpacitySliderPointerDown} ${g(this.initOpacitySlider)}></canvas><div .ariaLabel=${h.opacity} .ariaValueMax=${b.max} .ariaValueMin=${b.min} .ariaValueNow=${(t||m).round().alpha()} class=${r({[n.scope]:!0,[n.opacityScope]:!0})} @keydown=${this.handleOpacityScopeKeyDown} role=slider style=${$({top:`${De}px`,left:`${ke}px`})} tabindex=0 ${g(this.opacityScopeRef)}></div></div>`:null}</div></div>${s&&e?null:u`<div class=${r({[n.controlSection]:!0,[n.section]:!0})}><div class=${r(n.hexAndChannelsGroup)}>${s?null:u`<div class=${r(n.hexOptions)}><calcite-color-picker-hex-input .allowEmpty=${this.clearable} .alphaChannel=${d} class=${r(n.control)} .messages=${h} .numberingSystem=${this.numberingSystem} @calciteColorPickerHexInputChange=${this.handleHexInputChange} .scale=${v} .value=${M}></calcite-color-picker-hex-input></div>`}${e?null:u`<calcite-tabs class=${r({[n.colorModeContainer]:!0,[n.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>`}${y?null:u`<div class=${r({[n.savedColorsSection]:!0,[n.section]:!0})}><div class=${r(n.header)}><label>${h.saved}</label><div class=${r(n.savedColorsButtons)}><calcite-button appearance=transparent class=${r(n.deleteColor)} .disabled=${J} .iconStart=${U.minus} kind=neutral .label=${h.deleteColor} @click=${this.deleteColor} .scale=${v} type=button></calcite-button><calcite-button appearance=transparent class=${r(n.saveColor)} .disabled=${J} .iconStart=${U.plus} kind=neutral .label=${h.saveColor} @click=${this.saveColor} .scale=${v} type=button></calcite-button></div></div>${C.length>0?u`<calcite-swatch-group class=${r(n.swatchGroup)} .label=${h.saved} .scale=${v} selection-mode=none>${re(C,A=>A,A=>u`<calcite-swatch class=${r(n.savedColor)} .color=${A} .label=${A} @click=${this.handleSavedColorSelect} @keydown=${this.handleSavedColorKeyDown} .scale=${v} tabindex=0></calcite-swatch>`)}</calcite-swatch-group>`:null}</div>`}</div>`})}renderChannelsTabTitle(e){let{channelMode:t,messages:i}=this,o=e===t,a=e==="rgb"?i.rgb:i.hsv;return T(e,u`<calcite-tab-title class=${r(n.colorMode)} data-color-mode=${e??w} @calciteTabsActivate=${this.handleTabActivate} .selected=${o}>${a}</calcite-tab-title>`)}renderChannelsTab(e){let{clearable:t,channelMode:i,channels:o,messages:a,alphaChannel:l}=this,s=e===i,h=e==="rgb"?[a.red,a.green,a.blue]:[a.hue,a.saturation,a.value],d=this.direction,f=l?o:o.slice(0,3);return T(e,u`<calcite-tab class=${r(n.control)} .selected=${s}><div class=${r(n.channels)} dir=ltr>${f.map((C,y)=>{let v=y===3;return v&&(C=t&&!C?C:O(C)),this.renderChannel(C,y,h[y],d,v?"%":"")})}</div></calcite-tab>`)}renderChannel(e,t,i,o,a){return T(t,u`<calcite-input-number class=${r(n.channel)} data-channel-index=${t??w} dir=${o??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=${$({marginLeft:t>0&&!(this.scale==="s"&&this.alphaChannel&&t===3)?"-1px":""})} .suffixText=${a} .value=${e?.toString()}></calcite-input-number>`)}};ee("calcite-color-picker",G);export{G as ColorPicker};