"use strict";(self.webpackChunkCCLibraries=self.webpackChunkCCLibraries||[]).push([[9198],{9729:(e,t,i)=>{i.r(t),i.d(t,{ColorSlider:()=>v});var o=i(12827),r=i(73719),s=i(30959),l=i(19392),a=i(68910),n=i(45590),d=(i(15990),i(65042)),c=i(17977),h=i(9184);const u=o.iv`
    :host{--spectrum-color-slider-handle-margin-block:var(--spectrum-component-top-to-text-75);--spectrum-color-slider-border-color-rgba:rgba(var(--spectrum-gray-900-rgb),var(--spectrum-color-slider-border-opacity));--spectrum-color-slider-checkerboard-size:var(--spectrum-opacity-checkerboard-square-size);--spectrum-color-slider-checkerboard-dark-color:var(--spectrum-opacity-checkerboard-square-dark);--spectrum-color-slider-checkerboard-light-color:var(--spectrum-opacity-checkerboard-square-light);--mod-colorhandle-hitarea-border-radius:var(--mod-color-slider-handle-hitarea-border-radius,0px)}@media (forced-colors:active){:host{--highcontrast-color-slider-border-color:CanvasText;--highcontrast-color-slider-border-color-disabled:GrayText;--highcontrast-color-slider-background-color-disabled:Canvas;forced-color-adjust:none}}:host{min-inline-size:var(--mod-color-slider-minimum-length,var(--spectrum-color-slider-minimum-length));inline-size:var(--mod-color-slider-length,var(--spectrum-color-slider-length));block-size:var(--mod-color-slider-control-track-width,var(--spectrum-color-control-track-width));-webkit-user-select:none;user-select:none;cursor:default;display:block;position:relative}:host([focused]){z-index:2}:host([disabled]){pointer-events:none}:host([disabled]) .gradient{display:none}:host([vertical]){min-block-size:var(--mod-color-slider-vertical-minimum-height,var(--mod-color-slider-minimum-length,var(--spectrum-color-slider-minimum-length)));block-size:var(--mod-color-slider-vertical-height,var(--mod-color-slider-length,var(--spectrum-color-slider-length)));min-inline-size:0;inline-size:var(--mod-color-slider-vertical-control-track-width,var(--mod-color-slider-control-track-height,var(--spectrum-color-control-track-width)));display:inline-block}:host([vertical]) .handle{inset-block-start:0;inset-inline-start:50%}.handle{inset-block-start:50%;inset-inline-start:0}.checkerboard{--spectrum-color-slider-border-color-local:var(--highcontrast-color-slider-border-color,var(--mod-color-slider-border-color,var(--spectrum-color-slider-border-color-rgba)))}.checkerboard:before{content:"";z-index:1;box-shadow:inset 0 0 0 var(--mod-color-slider-border-width,var(--spectrum-color-slider-border-width))var(--spectrum-color-slider-border-color-local);border-radius:var(--mod-color-slider-border-rounding,var(--spectrum-color-slider-border-rounding));position:absolute;inset:0}:host([disabled]) .checkerboard{--spectrum-color-slider-border-color-local:var(--highcontrast-color-slider-border-color-disabled,var(--mod-color-slider-border-color-disabled,var(--spectrum-disabled-background-color)));background:var(--highcontrast-color-slider-background-color-disabled,var(--mod-color-slider-background-color-disabled,var(--spectrum-disabled-background-color)))}.checkerboard,.gradient{inline-size:100%;block-size:100%;border-radius:var(--mod-color-slider-border-rounding,var(--spectrum-color-slider-border-rounding))}.gradient:dir(rtl),:host([dir=rtl]) .gradient{transform:scaleX(-1)}.slider{opacity:0;inline-size:100%;block-size:100%;z-index:0;pointer-events:none;margin:0;position:absolute;inset-block-start:0;inset-inline-start:0}:host{--sp-color-slider-gradient-fallback:red 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%;touch-action:none}:host([vertical]) .handle{inset-block-start:unset;inset-block-end:0}:host([vertical]) .slider{appearance:slider-vertical}:host(:focus){outline:none}.gradient{overflow:hidden}::slotted(*){width:100%;height:100%}
`;var b=Object.defineProperty,p=Object.getOwnPropertyDescriptor,m=(e,t,i,o)=>{for(var r,s=o>1?void 0:o?p(t,i):t,l=e.length-1;l>=0;l--)(r=e[l])&&(s=(o?r(t,i,s):r(s))||s);return o&&s&&b(t,i,s),s};class v extends n.Y{constructor(){super(...arguments),this.disabled=!1,this.focused=!1,this.label="hue",this.vertical=!1,this.languageResolver=new c.A(this),this.colorController=new d.xR(this,{applyColorToState:()=>{this.sliderHandlePosition=this.colorController.hue/360*100},extractColorFromState:e=>({...e.getColor("hsl"),h:this.value}),maintains:"saturation"}),this.sliderHandlePosition=0,this.step=1,this._altered=0,this._pointerDown=!1}static get styles(){return[h.Z,u]}get value(){return this.colorController.hue}set value(e){this.colorController.hue=e}get color(){return this.colorController.color}set color(e){this.colorController.color=e}get altered(){return this._altered}set altered(e){this._altered=e,this.step=Math.max(1,10*this.altered)}get focusElement(){return this.input}handleKeydown(e){const{key:t}=e;this.focused=!0,this.altered=[e.shiftKey,e.ctrlKey,e.altKey].filter((e=>!!e)).length;let i=0;switch(t){case"ArrowUp":i=this.step;break;case"ArrowDown":i=-this.step;break;case"ArrowLeft":i=this.step*(this.isLTR?-1:1);break;case"ArrowRight":i=this.step*(this.isLTR?1:-1);break;default:return}e.preventDefault(),this.sliderHandlePosition=Math.min(100,Math.max(0,this.sliderHandlePosition+i*(100/360))),this.value=Math.min(100,Math.max(0,this.value+i)),this.colorController.applyColorFromState(),0!=i&&(this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})))}handleInput(e){const{valueAsNumber:t}=e.target;this.value=t,this.sliderHandlePosition=this.value/360*100,this.colorController.applyColorFromState()}handleChange(e){this.handleInput(e),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}focus(e={}){super.focus(e),this.forwardFocus()}forwardFocus(){this.focused=this.hasVisibleFocusInTree(),this.input.focus()}handleFocus(){this.focused=!0}handleBlur(){this._pointerDown||(this.altered=0,this.focused=!1)}handlePointerdown(e){0===e.button?(this._pointerDown=!0,this.colorController.savePreviousColor(),this.boundingClientRect=this.getBoundingClientRect(),e.target.setPointerCapture(e.pointerId),"mouse"===e.pointerType&&(this.focused=!0)):e.preventDefault()}handlePointermove(e){this.sliderHandlePosition=this.calculateHandlePosition(e),this.value=this.sliderHandlePosition/100*360,this.colorController.applyColorFromState(),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0,cancelable:!0}))}handlePointerup(e){this._pointerDown=!1,e.target.releasePointerCapture(e.pointerId),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0,cancelable:!0}))||this.colorController.restorePreviousColor(),this.focus(),"mouse"===e.pointerType&&(this.focused=!1)}calculateHandlePosition(e){if(!this.boundingClientRect)return this.sliderHandlePosition;const t=this.boundingClientRect,i=this.vertical?t.top:t.left,o=this.vertical?e.clientY:e.clientX,r=this.vertical?t.height:t.width,s=Math.max(0,Math.min(1,(o-i)/r));return this.vertical||!this.isLTR?100-100*s:100*s}handleGradientPointerdown(e){0===e.button&&(e.stopPropagation(),e.preventDefault(),this.handle.dispatchEvent(new PointerEvent("pointerdown",e)),this.handlePointermove(e))}get handlePositionStyles(){return`${this.vertical?"inset-block-end":"inset-inline-start"}: ${this.sliderHandlePosition}%`}get getColorSliderStyle(){return{background:`linear-gradient(to ${this.vertical?"top":"right"}, var(--sp-color-slider-gradient, var(--sp-color-slider-gradient-fallback)))`}}render(){return o.dy`
            <div
                class="opacity-checkerboard checkerboard"
                role="presentation"
                @pointerdown=${this.handleGradientPointerdown}
            >
                <div
                    class="gradient"
                    role="presentation"
                    style=${(0,r.V)(this.getColorSliderStyle)}
                >
                    <slot name="gradient"></slot>
                </div>
            </div>
            <sp-color-handle-1-0-228
                tabindex=${(0,s.o)(this.focused?void 0:"0")}
                @focus=${this.forwardFocus}
                ?focused=${this.focused}
                class="handle"
                color="hsl(${this.value}, 100%, 50%)"
                ?disabled=${this.disabled}
                style=${this.handlePositionStyles}
                ${(0,a.k)({start:["pointerdown",this.handlePointerdown],streamInside:["pointermove",this.handlePointermove],end:[["pointerup","pointercancel","pointerleave"],this.handlePointerup]})}
            ></sp-color-handle-1-0-228>
            <input
                type="range"
                class="slider"
                min="0"
                max="360"
                aria-orientation=${(0,s.o)(this.vertical?"vertical":void 0)}
                orient=${(0,s.o)(this.vertical?"vertical":void 0)}
                step=${this.step}
                aria-label=${this.label}
                .value=${String(this.value)}
                aria-valuetext=${`${new Intl.NumberFormat(this.languageResolver.language,{maximumFractionDigits:0,minimumIntegerDigits:1,style:"unit",unit:"degree",unitDisplay:"narrow"}).format(this.value)}`}
                @input=${this.handleInput}
                @change=${this.handleChange}
                @keydown=${this.handleKeydown}
            />
        `}firstUpdated(e){super.firstUpdated(e),this.boundingClientRect=this.getBoundingClientRect(),this.addEventListener("focus",this.handleFocus),this.addEventListener("blur",this.handleBlur)}}m([(0,l.Cb)({type:String,reflect:!0})],v.prototype,"dir",2),m([(0,l.Cb)({type:Boolean,reflect:!0})],v.prototype,"disabled",2),m([(0,l.Cb)({type:Boolean,reflect:!0})],v.prototype,"focused",2),m([(0,l.IO)(".handle")],v.prototype,"handle",2),m([(0,l.Cb)({type:String})],v.prototype,"label",2),m([(0,l.Cb)({type:Boolean,reflect:!0})],v.prototype,"vertical",2),m([(0,l.Cb)({type:Number})],v.prototype,"value",1),m([(0,l.Cb)({type:Number,reflect:!0})],v.prototype,"sliderHandlePosition",2),m([(0,l.Cb)({type:String})],v.prototype,"color",1),m([(0,l.Cb)({type:Number})],v.prototype,"step",2),m([(0,l.IO)("input")],v.prototype,"input",2)},56764:(e,t,i)=>{i.d(t,{V:()=>r});let o=!0;try{document.body.querySelector(":focus-visible")}catch(e){o=!1,i.e(7868).then(i.t.bind(i,27868,19))}const r=e=>{var t,i;const r=Symbol("endPolyfillCoordination");class s extends(i=e,t=r,i){constructor(){super(...arguments),this[t]=null}connectedCallback(){super.connectedCallback&&super.connectedCallback(),o||requestAnimationFrame((()=>{null==this[r]&&(this[r]=(e=>{if(null==e.shadowRoot||e.hasAttribute("data-js-focus-visible"))return()=>{};if(!self.applyFocusVisiblePolyfill){const t=()=>{self.applyFocusVisiblePolyfill&&e.shadowRoot&&self.applyFocusVisiblePolyfill(e.shadowRoot),e.manageAutoFocus&&e.manageAutoFocus()};return self.addEventListener("focus-visible-polyfill-ready",t,{once:!0}),()=>{self.removeEventListener("focus-visible-polyfill-ready",t)}}return self.applyFocusVisiblePolyfill(e.shadowRoot),e.manageAutoFocus&&e.manageAutoFocus(),()=>{}})(this))}))}disconnectedCallback(){super.disconnectedCallback&&super.disconnectedCallback(),o||requestAnimationFrame((()=>{null!=this[r]&&(this[r](),this[r]=null)}))}}return s}},45590:(e,t,i)=>{i.d(t,{Y:()=>c});var o=i(28731),r=i(19392),s=i(56764),l=Object.defineProperty,a=Object.getOwnPropertyDescriptor,n=(e,t,i,o)=>{for(var r,s=o>1?void 0:o?a(t,i):t,n=e.length-1;n>=0;n--)(r=e[n])&&(s=(o?r(t,i,s):r(s))||s);return o&&s&&l(t,i,s),s};function d(){return new Promise((e=>requestAnimationFrame((()=>e()))))}class c extends((0,s.V)(o.o)){constructor(){super(...arguments),this.disabled=!1,this.autofocus=!1,this._tabIndex=0,this.manipulatingTabindex=!1,this.autofocusReady=Promise.resolve()}get tabIndex(){if(this.focusElement===this){const e=this.hasAttribute("tabindex")?Number(this.getAttribute("tabindex")):NaN;return isNaN(e)?-1:e}const e=parseFloat(this.hasAttribute("tabindex")&&this.getAttribute("tabindex")||"0");return this.disabled||e<0?-1:this.focusElement?this._tabIndex:e}set tabIndex(e){var t;if(this.manipulatingTabindex)this.manipulatingTabindex=!1;else if(this.focusElement!==this)if(-1===e?this.addEventListener("pointerdown",this.onPointerdownManagementOfTabIndex):(this.manipulatingTabindex=!0,this.removeEventListener("pointerdown",this.onPointerdownManagementOfTabIndex)),-1===e||this.disabled){if(this.manipulatingTabindex=!0,this.setAttribute("tabindex","-1"),this.removeAttribute("focusable"),this.selfManageFocusElement)return;-1!==e?(this._tabIndex=e,this.manageFocusElementTabindex(e)):null==(t=this.focusElement)||t.removeAttribute("tabindex")}else this.setAttribute("focusable",""),this.hasAttribute("tabindex")?this.removeAttribute("tabindex"):this.manipulatingTabindex=!1,this._tabIndex=e,this.manageFocusElementTabindex(e);else if(this.disabled)this._tabIndex=e;else if(e!==this._tabIndex){this._tabIndex=e;const t=""+e;this.manipulatingTabindex=!0,this.setAttribute("tabindex",t)}}onPointerdownManagementOfTabIndex(){-1===this.tabIndex&&setTimeout((()=>{this.tabIndex=0,this.focus({preventScroll:!0}),this.tabIndex=-1}))}async manageFocusElementTabindex(e){this.focusElement||await this.updateComplete,null===e?this.focusElement.removeAttribute("tabindex"):this.focusElement!==this&&(this.focusElement.tabIndex=e)}get focusElement(){throw new Error("Must implement focusElement getter!")}get selfManageFocusElement(){return!1}focus(e){this.disabled||!this.focusElement||(this.focusElement!==this?this.focusElement.focus(e):HTMLElement.prototype.focus.apply(this,[e]))}blur(){const e=this.focusElement||this;e!==this?e.blur():HTMLElement.prototype.blur.apply(this)}click(){if(this.disabled)return;const e=this.focusElement||this;e!==this?e.click():HTMLElement.prototype.click.apply(this)}manageAutoFocus(){this.autofocus&&(this.dispatchEvent(new KeyboardEvent("keydown",{code:"Tab"})),this.focusElement.focus())}firstUpdated(e){super.firstUpdated(e),(!this.hasAttribute("tabindex")||"-1"!==this.getAttribute("tabindex"))&&this.setAttribute("focusable","")}update(e){e.has("disabled")&&this.handleDisabledChanged(this.disabled,e.get("disabled")),super.update(e)}updated(e){super.updated(e),e.has("disabled")&&this.disabled&&this.blur()}async handleDisabledChanged(e,t){const i=()=>this.focusElement!==this&&void 0!==this.focusElement.disabled;e?(this.manipulatingTabindex=!0,this.setAttribute("tabindex","-1"),await this.updateComplete,i()?this.focusElement.disabled=!0:this.setAttribute("aria-disabled","true")):t&&(this.manipulatingTabindex=!0,this.focusElement===this?this.setAttribute("tabindex",""+this._tabIndex):this.removeAttribute("tabindex"),await this.updateComplete,i()?this.focusElement.disabled=!1:this.removeAttribute("aria-disabled"))}async getUpdateComplete(){const e=await super.getUpdateComplete();return await this.autofocusReady,e}connectedCallback(){super.connectedCallback(),this.autofocus&&(this.autofocusReady=new Promise((async e=>{await d(),await d(),e()})),this.updateComplete.then((()=>{this.manageAutoFocus()})))}}n([(0,r.Cb)({type:Boolean,reflect:!0})],c.prototype,"disabled",2),n([(0,r.Cb)({type:Boolean})],c.prototype,"autofocus",2),n([(0,r.Cb)({type:Number})],c.prototype,"tabIndex",1)}}]);