"use strict";(self.webpackChunkCCLibraries=self.webpackChunkCCLibraries||[]).push([[5660],{67494:(e,t,r)=>{r.r(t),r.d(t,{ColorArea:()=>m});var o=r(28731),i=r(12827),a=r(30959),s=r(73719),n=r(19392),l=r(68910),h=(r(15990),r(65042)),d=r(17977),c=r(99862);const u=i.iv`
    :host{--spectrum-colorarea-border-radius:var(--spectrum-color-area-border-rounding);--spectrum-colorarea-border-color:#0000001a;--spectrum-colorarea-disabled-background-color:var(--spectrum-disabled-background-color);--spectrum-colorarea-border-width:var(--spectrum-color-area-border-width);--spectrum-colorarea-height:var(--spectrum-color-area-height);--spectrum-colorarea-width:var(--spectrum-color-area-width);--spectrum-colorarea-min-width:var(--spectrum-color-area-minimum-width);--spectrum-colorarea-min-height:var(--spectrum-color-area-minimum-height)}@media (forced-colors:active){:host{--highcontrast-colorarea-border-color-disabled:GrayText;--highcontrast-colorarea-border-color:Canvas;--highcontrast-colorarea-fill-color-disabled:Canvas}.gradient,:host([disabled]){forced-color-adjust:none}}:host{cursor:default;-webkit-user-select:none;user-select:none;min-inline-size:var(--mod-colorarea-min-width,var(--spectrum-colorarea-min-width));min-block-size:var(--mod-colorarea-min-height,var(--spectrum-colorarea-min-height));inline-size:var(--mod-colorarea-width,var(--spectrum-colorarea-width));block-size:var(--mod-colorarea-height,var(--spectrum-colorarea-height));box-sizing:border-box;border-radius:var(--mod-colorarea-border-radius,var(--spectrum-colorarea-border-radius));border:var(--mod-colorarea-border-width,var(--spectrum-colorarea-border-width))solid var(--highcontrast-colorarea-border-color,var(--mod-colorarea-border-color,var(--spectrum-colorarea-border-color)));display:inline-block;position:relative}:host([focused]){z-index:1}:host([disabled]){pointer-events:none;background:var(--highcontrast-colorarea-fill-color-disabled,var(--mod-colorarea-disabled-background-color,var(--spectrum-colorarea-disabled-background-color)));border:var(--mod-colorarea-border-width,var(--spectrum-colorarea-border-width))solid var(--highcontrast-colorarea-border-color-disabled)}:host([disabled]) .gradient{display:none}.handle{transform:translate(calc(var(--mod-colorarea-width,var(--spectrum-colorarea-width)) - var(--spectrum-colorarea-border-width)));inset-block-start:0}.handle:dir(rtl),:host([dir=rtl]) .handle{inset-inline-end:0}.gradient{inline-size:100%;block-size:100%;border-radius:var(--mod-colorarea-border-radius,var(--spectrum-colorarea-border-radius))}.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{touch-action:none}:host:before{pointer-events:none}.gradient{overflow:hidden}.handle{transform:translate(var(--spectrum-colorarea-default-width),0)}::slotted(*){width:100%;height:100%}:host([dir=rtl]) .gradient{transform:scaleX(-1)}.slider[orient=vertical]{appearance:slider-vertical}.slider:focus{z-index:1}.fieldset{border:0;margin:0;padding:0}
`;var p=Object.defineProperty,b=Object.getOwnPropertyDescriptor,v=(e,t,r,o)=>{for(var i,a=o>1?void 0:o?b(t,r):t,s=e.length-1;s>=0;s--)(i=e[s])&&(a=(o?i(t,r,a):i(a))||a);return o&&a&&p(t,r,a),a};class m extends o.o{constructor(){super(...arguments),this.disabled=!1,this.focused=!1,this.labelX="saturation",this.labelY="luminosity",this.languageResolver=new d.A(this),this.colorController=new h.xR(this,{extractColorFromState:()=>({h:this.hue,s:this.x,v:this.y}),applyColorToState:({s:e,v:t})=>{this._x=e,this._y=t,this.requestUpdate()}}),this.activeAxis="x",this._x=1,this._y=1,this.step=.01,this.altered=0,this.activeKeys=new Set,this._valueChanged=!1,this._pointerDown=!1}static get styles(){return[u]}get hue(){return this.colorController.hue}set hue(e){this.colorController.hue=e}get value(){return this.colorController.color}get color(){return this.colorController.color}set color(e){this.colorController.color=e}get x(){return this._x}set x(e){if(e===this.x)return;const t=this.x;this._x=e,this.inputX&&(this.inputX.value=e.toString(),this._x=this.inputX.valueAsNumber),this.requestUpdate("x",t),this.colorController.applyColorFromState()}get y(){return this._y}set y(e){if(e===this.y)return;const t=this.y;this._y=e,this.inputY&&(this.inputY.value=e.toString(),this._y=this.inputY.valueAsNumber),this.requestUpdate("y",t),this.colorController.applyColorFromState()}focus(e={}){super.focus(e),this.forwardFocus()}forwardFocus(){this.focused=this.hasVisibleFocusInTree(),"x"===this.activeAxis?this.inputX.focus():this.inputY.focus()}handleFocus(){this.focused=!0,this._valueChanged=!1}handleBlur(){this._pointerDown||(this.altered=0,this.focused=!1,this._valueChanged=!1)}handleKeydown(e){const{code:t}=e;this.focused=!0,this.altered=[e.shiftKey,e.ctrlKey,e.altKey].filter((e=>!!e)).length,(0===t.search("Arrow")||0===t.search("Page")||0===t.search("Home")||0===t.search("End"))&&(e.preventDefault(),this.activeKeys.add(t),this.handleKeypress())}handleKeypress(){let e=0,t=0;const r=Math.max(this.step,5*this.altered*this.step);this.activeKeys.forEach((o=>{switch(o){case"ArrowUp":t=r;break;case"ArrowDown":t=-1*r;break;case"ArrowLeft":e=this.step*(this.isLTR?-1:1);break;case"ArrowRight":e=this.step*(this.isLTR?1:-1);break;case"PageUp":t=10*r;break;case"PageDown":t=-10*r;break;case"Home":e=r*(this.isLTR?-10:10);break;case"End":e=r*(this.isLTR?10:-10)}})),0!=e?(this.activeAxis="x",this.inputX.focus()):0!=t&&(this.activeAxis="y",this.inputY.focus()),this.x=Math.min(1,Math.max(this.x+e,0)),this.y=Math.min(1,Math.max(this.y+t,0)),this.colorController.savePreviousColor(),this.colorController.applyColorFromState(),(0!=e||0!=t)&&(this._valueChanged=!0,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0,cancelable:!0}))||this.colorController.restorePreviousColor())}handleKeyup(e){e.preventDefault();const{code:t}=e;this.activeKeys.delete(t)}handleInput(e){const{valueAsNumber:t,name:r}=e.target;this[r]=t,this.colorController.applyColorFromState()}handleChange(e){this.handleInput(e),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0,cancelable:!0}))}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){const[t,r]=this.calculateHandlePosition(e);this._valueChanged=!1,this.x=t,this.y=1-r,this.colorController.applyColorFromState(),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0,cancelable:!0}))}handlePointerup(e){e.preventDefault(),this._pointerDown=!1,e.target.releasePointerCapture(e.pointerId);const t=this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0,cancelable:!0}));this.inputX.focus(),"mouse"===e.pointerType&&(this.focused=!1),t||this.colorController.restorePreviousColor()}calculateHandlePosition(e){if(!this.boundingClientRect)return[this.x,this.y];const t=this.boundingClientRect,r=t.left,o=t.top,i=e.clientX,a=e.clientY,s=t.width,n=t.height,l=Math.max(0,Math.min(1,(i-r)/s)),h=Math.max(0,Math.min(1,(a-o)/n));return[this.isLTR?l:1-l,h]}handleAreaPointerdown(e){0===e.button&&(e.stopPropagation(),e.preventDefault(),this.handle.dispatchEvent(new PointerEvent("pointerdown",e)),this.handlePointermove(e))}render(){const{width:e=0,height:t=0}=this.boundingClientRect||{},r=(0,c.Dt)()||(0,c.gn)(),o="Color Picker",n=(0,a.o)(r?void 0:"2d slider"),h=this.labelX,d=this.labelY,u=new Intl.NumberFormat(this.languageResolver.language,{style:"percent",unitDisplay:"narrow"}).format(this.x),p=new Intl.NumberFormat(this.languageResolver.language,{style:"percent",unitDisplay:"narrow"}).format(this.y),b={background:`linear-gradient(to top, black 0%, hsla(${this.hue}, 100%, 0.01%, 0) 100%),linear-gradient(to right, white 0%, hsla(${this.hue}, 100%, 0.01%, 0) 100%), hsl(${this.hue}, 100%, 50%);`};return i.dy`
            <div
                @pointerdown=${this.handleAreaPointerdown}
                class="gradient"
                style=${(0,s.V)(b)}
            >
                <slot name="gradient"></slot>
            </div>

            <sp-color-handle-1-0-228
                tabindex=${(0,a.o)(this.focused?void 0:"0")}
                @focus=${this.forwardFocus}
                ?focused=${this.focused}
                class="handle"
                color=${this.colorController.getHslString()}
                ?disabled=${this.disabled}
                style=${`transform: translate(${(this.isLTR?this.x:1-this.x)*e}px, ${t-this.y*t}px);`}
                ${(0,l.k)({start:["pointerdown",this.handlePointerdown],streamInside:["pointermove",this.handlePointermove],end:[["pointerup","pointercancel","pointerleave"],this.handlePointerup]})}
            ></sp-color-handle-1-0-228>

            <fieldset
                class="fieldset"
                aria-label=${(0,a.o)(r?o:void 0)}
            >
                <div role="presentation">
                    <input
                        type="range"
                        class="slider"
                        name="x"
                        aria-label=${r?h:`${h} ${o}`}
                        aria-roledescription=${n}
                        aria-orientation="horizontal"
                        aria-valuetext=${r?u:`${u}, ${h}${this._valueChanged?"":`, ${p}, ${d}`}`}
                        min="0"
                        max="1"
                        step=${this.step}
                        tabindex="-1"
                        .value=${String(this.x)}
                        @input=${this.handleInput}
                        @change=${this.handleChange}
                    />
                </div>
                <div role="presentation">
                    <input
                        type="range"
                        class="slider"
                        name="y"
                        aria-label=${r?d:`${d} ${o}`}
                        aria-roledescription=${n}
                        aria-orientation="vertical"
                        aria-valuetext=${r?p:`${p}, ${d}${this._valueChanged?"":`, ${u}, ${h}`}`}
                        orient="vertical"
                        min="0"
                        max="1"
                        step=${this.step}
                        tabindex="-1"
                        .value=${String(this.y)}
                        @input=${this.handleInput}
                        @change=${this.handleChange}
                    />
                </div>
            </fieldset>
        `}firstUpdated(e){super.firstUpdated(e),this.boundingClientRect=this.getBoundingClientRect(),this.addEventListener("focus",this.handleFocus),this.addEventListener("blur",this.handleBlur),this.addEventListener("keyup",this.handleKeyup),this.addEventListener("keydown",this.handleKeydown)}updated(e){if(super.updated(e),this.x!==this.inputX.valueAsNumber&&(this._x=this.inputX.valueAsNumber),this.y!==this.inputY.valueAsNumber&&(this._y=this.inputY.valueAsNumber),e.has("focused")&&this.focused){const e=this.inputX.parentElement,t=this.inputY.parentElement;if(!e.shadowRoot&&!t.shadowRoot){e.attachShadow({mode:"open"}),t.attachShadow({mode:"open"});const r='<div tabindex="-1"><slot></slot></div>';e.shadowRoot.innerHTML=r,t.shadowRoot.innerHTML=r}}}connectedCallback(){var e;super.connectedCallback(),!this.observer&&window.ResizeObserver&&(this.observer=new window.ResizeObserver((e=>{for(const t of e)this.boundingClientRect=t.contentRect;this.requestUpdate()}))),null==(e=this.observer)||e.observe(this)}disconnectedCallback(){var e;null==(e=this.observer)||e.unobserve(this),super.disconnectedCallback()}}v([(0,n.Cb)({type:String,reflect:!0})],m.prototype,"dir",2),v([(0,n.Cb)({type:Boolean,reflect:!0})],m.prototype,"disabled",2),v([(0,n.Cb)({type:Boolean,reflect:!0})],m.prototype,"focused",2),v([(0,n.Cb)({type:String,attribute:"label-x"})],m.prototype,"labelX",2),v([(0,n.Cb)({type:String,attribute:"label-y"})],m.prototype,"labelY",2),v([(0,n.IO)(".handle")],m.prototype,"handle",2),v([(0,n.Cb)({type:Number})],m.prototype,"hue",1),v([(0,n.Cb)({type:String})],m.prototype,"value",1),v([(0,n.Cb)({type:String})],m.prototype,"color",1),v([(0,n.Cb)({attribute:!1})],m.prototype,"activeAxis",2),v([(0,n.Cb)({type:Number})],m.prototype,"x",1),v([(0,n.Cb)({type:Number})],m.prototype,"y",1),v([(0,n.Cb)({type:Number})],m.prototype,"step",2),v([(0,n.IO)('[name="x"]')],m.prototype,"inputX",2),v([(0,n.IO)('[name="y"]')],m.prototype,"inputY",2)},99862:(e,t,r)=>{function o(e){return"undefined"!=typeof window&&null!=window.navigator&&e.test(window.navigator.platform)}function i(){return o(/^iPhone/)||o(/^iPad/)||o(/^Mac/)&&navigator.maxTouchPoints>1}function a(){return"undefined"!=typeof window&&null!=window.navigator&&/Android/.test(window.navigator.userAgent)}r.d(t,{Dt:()=>a,gn:()=>i})}}]);