@coderundebug/ui-web/ui-input-color.js

A collection of UI web components that can be used in any web project.

/* By Stephen Paul Hassall (web: https://coderundebug.com) */
import{UiTools as i}from"./ui-tools.js";export class UiInputColor extends HTMLElement{static get formAssociated(){return!0}constructor(){super(),this.attachShadow({mode:"open",delegatesFocus:!0}),this.shadowRoot.innerHTML=UiInputColor.uiHtml,this.shadowRoot.adoptedStyleSheets=[UiInputColor.uiCssStyleSheet],this.i=this.attachInternals(),this.t=this.shadowRoot.getElementById("base"),this.h=this.shadowRoot.getElementById("preview-color"),this.o=this.shadowRoot.getElementById("dialog"),this.l=this.l.bind(this),this.u=this.u.bind(this),this.p=this.p.bind(this),this.v=this.v.bind(this),this.m=null,this.k=!1,this.I=!1,this.C=0,this._=0,this.U=0,this.A=0,this.R=0,this.F=0,this.T=1,this.M="",this.H=!1}get value(){return this.M}set value(i){!1===this.j(i)&&0===i.length&&(i="#000000",this.m||!1!==this.hasAttribute("alpha")||(i="#000000FF")),this.M=i,this.m?this.m.value=i:(this.B(),this.D(),this.L(),this.P(),this.G(),this.S(),setTimeout((()=>{this.X()})),this.X())}get red(){return this.C}get green(){return this._}get blue(){return this.U}get hue(){return this.A}get saturation(){return this.R}get lightness(){return this.F}get alpha(){return this.T}showPicker(){!0!==this.I&&!0!==this.t.hasAttribute("disabled")&&(this.m?this.m.showPicker():this.K())}hidePicker(){if(this.m)return this.t.removeChild(this.m),void this.t.appendChild(this.m);!1!==this.I&&(this.N(),this.V())}connectedCallback(){this.t.addEventListener("click",this.l),this.addEventListener("keydown",this.v),this.H=!0,this.M||(!0===this.hasAttribute("alpha")?this.M="#000000FF":this.M="#000000"),UiInputColor.q||(UiInputColor.q=2),this.J(),this.O(),!0!==this.hasAttribute("default-input")&&(this.B(),this.D(),this.L())}disconnectedCallback(){this.t.removeEventListener("click",this.l),this.removeEventListener("keydown",this.v),this.m&&(this.m.removeEventListener("change",this.u),this.m.removeEventListener("input",this.p),this.t.removeChild(this.m),this.m=null),!0===this.k&&(this.k=!1,this.W(this.Y),this.W(this.Z),this.W(this.$),this.W(this.ii),this.W(this.ti),this.W(this.si),this.ei(this.hi),this.ei(this.oi),this.ei(this.ri),this.ei(this.ai),this.ei(this.li),this.ei(this.ni),this.ei(this.di),this.ei(this.ui),this.ei(this.pi),this.ci.removeEventListener("click",this.bi),this.ci.removeEventListener("keydown",this.gi)),this.H=!1}attributeChangedCallback(i,t,s){!1===this.j(s)&&0===s.length&&(s=!0===this.hasAttribute("default-input")?"#000000":"#000000FF"),!1===this.hasAttribute("alpha")&&9===s.length&&(s=s.substring(0,7)),this.M=s,this.m?this.m.value=this.M:!1!==this.H&&(this.B(),this.D(),this.L(),this.P(),this.G(),this.S(),this.J(),setTimeout((()=>{this.X()})),this.X())}static get observedAttributes(){return["value"]}l(i){if(!this.m)return!0===this.I?(this.N(),this.V(),void i.stopPropagation()):void(!0!==this.t.hasAttribute("disabled")&&this.K())}fi(i){i.stopPropagation()}xi(i){!0!==this.mi?(this.N(),this.V()):this.mi=!1}u(){this.i.setFormValue(this.m.value),this.M=this.m.value,this.J(),this.V()}p(){this.M=this.m.value}v(i){if("Space"===i.code||"Enter"===i.key){if(!1===this.I)return this.h.click(),i.preventDefault(),void i.stopPropagation();if(!0===this.I){this.N(),this.V();this.shadowRoot.querySelector(".base").focus(),i.preventDefault(),i.stopPropagation()}}if("Escape"===i.key){if(!1===this.I)return;this.N(),this.V();this.shadowRoot.querySelector(".base").focus(),i.preventDefault(),i.stopPropagation()}if("ArrowLeft"===i.key||"ArrowRight"===i.key||"ArrowUp"===i.key||"ArrowDown"===i.key){if(!1===this.I)return;if(this.shadowRoot.activeElement){let t=!1;if("map-color"===this.shadowRoot.activeElement.id){const s=this.Z.getBoundingClientRect();let e=s.x+s.width/2,h=s.y+s.height/2;"ArrowLeft"===i.key&&(e-=10),"ArrowRight"===i.key&&(e+=10),"ArrowUp"===i.key&&(h-=10),"ArrowDown"===i.key&&(h+=10),this.wi="map",this.ki(e,h,this.Y,this.Z),this.wi="none",t=!0}if("slider-color"===this.shadowRoot.activeElement.id){const s=this.ii.getBoundingClientRect();let e=s.x+s.width/2,h=s.y+s.height/2;"ArrowLeft"===i.key&&(e-=10),"ArrowRight"===i.key&&(e+=10),this.wi="slider",this.ki(e,h,this.$,this.ii),this.wi="none",t=!0}if("alpha-color"===this.shadowRoot.activeElement.id){const s=this.si.getBoundingClientRect();let e=s.x+s.width/2,h=s.y+s.height/2;"ArrowLeft"===i.key&&(e-=10),"ArrowRight"===i.key&&(e+=10),this.wi="alpha",this.ki(e,h,this.ti,this.si),this.wi="none",t=!0}if(!1===t)return;i.preventDefault(),i.stopPropagation(),this.yi(),this.J()}}"Tab"===i.key&&(i.shiftKey?"map-color"===this.shadowRoot.activeElement.id&&(!0===this.hasAttribute("inputs")?this.ci.focus():this.si.focus(),i.preventDefault()):!0===this.hasAttribute("inputs")?"scroll"===this.shadowRoot.activeElement.id&&(this.Z.focus(),i.preventDefault()):"alpha-color"===this.shadowRoot.activeElement.id&&(this.Z.focus(),i.preventDefault()),!0===this.I&&this.shadowRoot.activeElement===this.o&&(this.Z.focus(),i.preventDefault()))}yi(){const i=new Event("input",{bubbles:!0,composed:!0});this.dispatchEvent(i)}V(){if(this.M===this.Ii)return;const i=new Event("change",{bubbles:!0,composed:!0});this.dispatchEvent(i)}O(){if(!1===this.hasAttribute("default-input")&&(this.m&&(this.m.removeEventListener("change",this.u),this.m.removeEventListener("input",this.p),this.t.removeChild(this.m),this.m=null),this.t.setAttribute("tabindex","0")),!0===this.hasAttribute("default-input")){if(!this.m){this.m=document.createElement("input"),this.m.classList.add("default-input"),this.m.setAttribute("id","default-input");const i=this.shadowRoot.querySelector('slot[name="end"]');this.t.insertBefore(this.m,i),this.m.addEventListener("change",this.u),this.m.addEventListener("input",this.p)}this.t.setAttribute("tabindex","-1"),this.m.setAttribute("tabindex","0"),this.M&&(this.m.value=this.M),this.m.setAttribute("type","color")}}K(){!1===this.k&&(this.k=!0,this.Y=this.shadowRoot.getElementById("map"),this.Ci=this.shadowRoot.querySelector(".map-base"),this.Z=this.shadowRoot.getElementById("map-color"),this.$=this.shadowRoot.getElementById("slider"),this.ii=this.shadowRoot.getElementById("slider-color"),this.ti=this.shadowRoot.getElementById("alpha"),this._i=this.shadowRoot.querySelector(".alpha-scale"),this.si=this.shadowRoot.getElementById("alpha-color"),this.zi=this.shadowRoot.getElementById("hsla"),this.Ei=this.shadowRoot.getElementById("rgba"),this.Ui=this.shadowRoot.getElementById("hex"),this.ci=this.shadowRoot.getElementById("scroll"),this.hi=this.shadowRoot.getElementById("hsla-h"),this.oi=this.shadowRoot.getElementById("hsla-s"),this.ri=this.shadowRoot.getElementById("hsla-l"),this.ai=this.shadowRoot.getElementById("hsla-a"),this.li=this.shadowRoot.getElementById("rgba-r"),this.ni=this.shadowRoot.getElementById("rgba-g"),this.di=this.shadowRoot.getElementById("rgba-b"),this.ui=this.shadowRoot.getElementById("rgba-a"),this.pi=this.shadowRoot.getElementById("hex-color"),this.Ai=this.shadowRoot.getElementById("hsla-label"),this.Ri=this.shadowRoot.getElementById("rgba-label"),this.Fi=this.shadowRoot.getElementById("hex-label"),this.Ti=this.Ti.bind(this),this.Mi=this.Mi.bind(this),this.Hi=this.Hi.bind(this),this.fi=this.fi.bind(this),this.xi=this.xi.bind(this),this.bi=this.bi.bind(this),this.gi=this.gi.bind(this),this.ji=this.ji.bind(this),this.Bi=this.Bi.bind(this),this.Di(this.Y),this.Di(this.Z),this.Di(this.$),this.Di(this.ii),this.Di(this.ti),this.Di(this.si),this.Li(this.hi),this.Li(this.oi),this.Li(this.ri),this.Li(this.ai),this.Li(this.li),this.Li(this.ni),this.Li(this.di),this.Li(this.ui),this.Li(this.pi),this.ci.addEventListener("click",this.bi),this.ci.addEventListener("keydown",this.gi),this.wi="none"),this.Ii=this.M,this.P(),this.G(),this.S(),setTimeout((()=>{this.X()})),this.setAttribute("open",""),this.o.show(),this.o.addEventListener("click",this.fi),document.addEventListener("click",this.xi),this.I=!0,this.mi=!0}N(){this.o.removeEventListener("click",this.fi),document.removeEventListener("click",this.xi),this.removeAttribute("open"),this.o.close(),this.I=!1}Di(i){i.addEventListener("pointerdown",this.Mi),i.addEventListener("pointerup",this.Ti),i.addEventListener("pointermove",this.Hi)}W(i){i.removeEventListener("pointerdown",this.Mi),i.removeEventListener("pointerup",this.Ti),i.removeEventListener("pointermove",this.Hi)}Li(i){i.addEventListener("beforeinput",this.ji),i.addEventListener("input",this.Bi)}ei(i){i.removeEventListener("beforeinput",this.ji),i.removeEventListener("input",this.Bi)}Mi(i){i.target.setPointerCapture(i.pointerId),this.wi=i.target.id,"map"===this.wi&&this.ki(i.clientX,i.clientY,this.Y,this.Z),"slider"===this.wi&&this.ki(i.clientX,i.clientY,this.$,this.ii),"alpha"===this.wi&&this.ki(i.clientX,i.clientY,this.ti,this.si)}Ti(i){i.target.releasePointerCapture(i.pointerId),this.wi="none",this.yi(),this.J()}Hi(i){"none"!==this.wi&&("map"!==this.wi&&"map-color"!==this.wi||this.ki(i.clientX,i.clientY,this.Y,this.Z),"slider"!==this.wi&&"slider-color"!==this.wi||this.ki(i.clientX,i.clientY,this.$,this.ii),"alpha"!==this.wi&&"alpha-color"!==this.wi||this.ki(i.clientX,i.clientY,this.ti,this.si),this.yi())}ki(i,t,s,e){const h=s.getBoundingClientRect();let o=i-h.left,r=t-h.top;const a=(e.clientWidth+9)/2,l=s.clientWidth-(e.clientWidth+9)/2,n=(e.clientHeight+9)/2,d=s.clientHeight-(e.clientHeight+9)/2;o<a&&(o=a),o>l&&(o=l),r<n&&(r=n),r>d&&(r=d);const u=(o-a)/(l-a),p=(r-n)/(d-n);const c=o-e.clientWidth/2,b=r-e.clientHeight/2;if("map"===this.wi||"map-color"===this.wi){this.Z.style.left=c.toString()+"px",this.Z.style.top=b.toString()+"px";const i=1-p,t=u,s=i/2*(2-t);let e=0;const h=1-Math.abs(2*s-1);0!==h&&(e=i*t/h),this.F=100*s,this.R=100*e}"slider"!==this.wi&&"slider-color"!==this.wi||(this.ii.style.left=c.toString()+"px",this.A=360*u),"alpha"!==this.wi&&"alpha-color"!==this.wi||(this.si.style.left=c.toString()+"px",this.T=u),this.Pi(),this.Gi(),this.L(),this.P(),this.G()}bi(){1===UiInputColor.q?UiInputColor.q=2:2===UiInputColor.q?UiInputColor.q=3:3===UiInputColor.q&&(UiInputColor.q=1),this.S()}gi(i){"Space"!==i.code&&"Enter"!==i.key||(1===UiInputColor.q?UiInputColor.q=2:2===UiInputColor.q?UiInputColor.q=3:3===UiInputColor.q&&(UiInputColor.q=1),this.S(),i.preventDefault(),i.stopPropagation())}ji(i){let t=!0,s=i.target.value;if("insertText"===i.inputType||"insertFromPaste"===i.inputType)s=i.target.value.substring(0,i.target.selectionStart)+i.data+i.target.value.substring(i.target.selectionEnd);else if("deleteContentForward"===i.inputType)s=i.target.value.substring(0,i.target.selectionStart)+i.target.value.substring(i.target.selectionEnd+1);else{if("deleteContentBackward"!==i.inputType)return void i.preventDefault();s=i.target.value.substring(0,i.target.selectionStart-1)+i.target.value.substring(i.target.selectionEnd)}if("hex-color"===i.target.id)if(!1===s.startsWith("#"))t=!1;else if(s.length>9)t=!1;else for(let i=1;i<s.length;i++){const e=s.charAt(i);if(!(e>="0"&&e<="9")&&!(e>="a"&&e<="f"||e>="A"&&e<="F")){t=!1;break}}else if(!0===i.target.id.endsWith("a")){if(1===s.length&&"0"!==s&&"1"!==s&&(t=!1),2===s.length&&!1===s.startsWith("0.")&&!1===s.startsWith("1.")&&(t=!1),3===s.length||4===s.length){!1===s.startsWith("0.")&&!1===s.startsWith("1.")&&(t=!1);let i=s.charAt(2);(i<"0"||i>"9")&&(t=!1),4===s.length&&(i=s.charAt(2),(i<"0"||i>"9")&&(t=!1))}s.length>4&&(t=!1)}else!0===i.target.id.startsWith("rgba")?!1===this.Si(s,255)&&(t=!1):"hsla-h"===i.target.id?!1===this.Si(s,360)&&(t=!1):!1===this.Si(s,100)&&(t=!1);!0!==t&&i.preventDefault()}Bi(i){if(!0===i.target.id.startsWith("rgba")&&("rgba-r"===i.target.id&&(this.C=parseInt(this.li.value)),"rgba-g"===i.target.id&&(this._=parseInt(this.ni.value)),"rgba-b"===i.target.id&&(this.U=parseInt(this.di.value))),!0===i.target.id.startsWith("hsla")&&("hsla-h"===i.target.id&&(this.A=parseInt(this.hi.value)),"hsla-s"===i.target.id&&(this.R=parseInt(this.oi.value)),"hsla-l"===i.target.id&&(this.F=parseInt(this.ri.value))),"rgba-a"===i.target.id&&(this.T=parseFloat(this.ui.value),this.ai.value=this.ui.value),"hsla-a"===i.target.id&&(this.T=parseFloat(this.ai.value),this.ui.value=this.ai.value),"hex-color"===i.target.id){if(!0===this.hasAttribute("alpha")){if(9!==this.pi.value.length)return}else if(7!==this.pi.value.length)return;this.M=this.pi.value}!0===i.target.id.startsWith("rgba")&&(this.D(),this.Gi(),this.hi.value=this.A.toFixed(0),this.oi.value=this.R.toFixed(0),this.ri.value=this.F.toFixed(0),this.pi.value=this.M),!0===i.target.id.startsWith("hsla")&&(this.Pi(),this.Gi(),this.li.value=this.C.toFixed(0),this.ni.value=this._.toFixed(0),this.di.value=this.U.toFixed(0),this.pi.value=this.M),"hex-color"===i.target.id&&(this.B(),this.D(),this.hi.value=this.A.toFixed(0),this.oi.value=this.R.toFixed(0),this.ri.value=this.F.toFixed(0),this.ai.value=this.T.toFixed(2),this.li.value=this.C.toFixed(0),this.ni.value=this._.toFixed(0),this.di.value=this.U.toFixed(0),this.ui.value=this.T.toFixed(2)),this.L(),this.P(),this.X(),this.J(),this.yi()}j(i){if(7!==i.length&&9!==i.length)return!1;if(!1===i.startsWith("#"))return!1;for(let t=1;t<i.length;t++){const s=i.charAt(t);if(!(s>="0"&&s<="9")&&!(s>="a"&&s<="f"||s>="A"&&s<="F"))return!1}return!0}Si(i,t){if(i.length>1&&!0===i.startsWith("0"))return!1;for(let t=0;t<i.length;t++){const s=i.charAt(t);if(!(s>="0"&&s<="9"))return!1}return!(parseInt(i)>t)}L(){const i="hsla("+this.A.toFixed(0)+"deg "+this.R.toFixed(0)+"% "+this.F.toFixed(0)+"% / "+this.T.toString()+")";this.h.style.backgroundColor=i}P(){if(!1===this.k)return;const i="hsl("+this.A.toFixed(0)+"deg 100% 50%)";this.ii.style.backgroundColor=i,this.Ci.style.backgroundColor=i;const t="hsl("+this.A.toFixed(0)+"deg "+this.R.toFixed(0)+"% "+this.F.toFixed(0)+"%)";this.Z.style.backgroundColor=t;const s="linear-gradient(to right, rgba(0,0,0,0) 0%, "+t+" 100%)";this._i.style.background=s;const e="hsla("+this.A.toFixed(0)+"deg "+this.R.toFixed(0)+"% "+this.F.toFixed(0)+"% / "+this.T.toString()+")";this.si.style.backgroundColor=e}G(){!1!==this.k&&(this.hi.value=this.A.toFixed(0),this.oi.value=this.R.toFixed(0),this.ri.value=this.F.toFixed(0),this.ai.value=this.T.toFixed(2),this.li.value=this.C.toFixed(0),this.ni.value=this._.toFixed(0),this.di.value=this.U.toFixed(0),this.ui.value=this.T.toFixed(2),this.pi.value=this.M)}S(){!1!==this.k&&(this.zi.style.visibility="hidden",this.Ei.style.visibility="hidden",this.Ui.style.visibility="hidden",this.Ai.style.visibility="hidden",this.Ri.style.visibility="hidden",this.Fi.style.visibility="hidden",1===UiInputColor.q&&(this.zi.style.visibility="visible",this.Ai.style.visibility="visible"),2===UiInputColor.q&&(this.Ei.style.visibility="visible",this.Ri.style.visibility="visible"),3===UiInputColor.q&&(this.Ui.style.visibility="visible",this.Fi.style.visibility="visible"))}X(){if(!1===this.k)return;const i=this.$.clientWidth-this.ii.clientWidth-9;let t=this.A/360*i+this.ii.clientWidth/2;this.ii.style.left=t.toFixed(0)+"px";const s=this.ti.clientWidth-this.si.clientWidth-9;t=this.T*s+this.si.clientWidth/2,this.si.style.left=t.toFixed(0)+"px";const e=this.Y.clientWidth-this.Z.clientWidth-9,h=this.Y.clientHeight-this.Z.clientHeight-9,o=this.C/255,r=this._/255,a=this.U/255,l=Math.max(o,r,a),n=Math.min(o,r,a);let d=0;0!==l&&(d=(l-n)/l);let u=1-l;t=d*e+this.Z.clientWidth/2;let p=u*h+this.Z.clientHeight/2;this.Z.style.left=t.toFixed(0)+"px",this.Z.style.top=p.toFixed(0)+"px"}J(){this.i.setFormValue(this.M)}Xi(i,t,s){return s<0&&(s+=1),s>1&&(s-=1),s<1/6?i+6*(t-i)*s:s<.5?t:s<2/3?i+(t-i)*(2/3-s)*6:i}Pi(){const i=this.A/360,t=this.R/100,s=this.F/100;let e=0,h=0,o=0;if(0===t)e=s,h=s,o=s;else{let r=0;r=s<.5?s*(1+t):s+t-s*t;let a=2*s-r;e=this.Xi(a,r,i+1/3),h=this.Xi(a,r,i),o=this.Xi(a,r,i-1/3)}this.C=Math.round(255*e),this._=Math.round(255*h),this.U=Math.round(255*o)}D(){const i=this.C/255,t=this._/255,s=this.U/255,e=Math.max(i,t,s),h=Math.min(i,t,s);let o=0,r=0;const a=(e+h)/2;if(e!==h){const l=e-h;r=a>.5?l/(2-l):l/(e+h),i===e&&(o=t<s?(t-s)/l+6:(t-s)/l),t===e&&(o=(s-i)/l+2),s===e&&(o=(i-t)/l+4),o/=6}this.A=360*o,this.R=100*r,this.F=100*a}B(){this.C=parseInt(this.M.substring(1,3),16),this._=parseInt(this.M.substring(3,5),16),this.U=parseInt(this.M.substring(5,7),16),this.T=1,this.M.length>7&&(this.T=parseInt(this.M.substring(7,9),16)/255)}Gi(){let i=this.C.toString(16),t=this._.toString(16),s=this.U.toString(16),e=Math.round(255*this.T).toString(16);1===i.length&&(i="0"+i),1===t.length&&(t="0"+t),1===s.length&&(s="0"+s),1===e.length&&(e="0"+e),!0===this.hasAttribute("alpha")?this.M="#"+i+t+s+e:this.M="#"+i+t+s}formDisabledCallback(i){this.t.tabIndex=!0===i?-1:0,!0===i?this.t.setAttribute("disabled",""):this.t.removeAttribute("disabled"),this.m&&(!0===i?this.m.setAttribute("disabled",""):this.m.removeAttribute("disabled"))}formStateRestoreCallback(i){this.m?this.m.value=i:(this.i.setFormValue(i),this.M=i,this.B(),this.D(),!0===this.k&&(this.hi.value=this.A.toFixed(0),this.oi.value=this.R.toFixed(0),this.ri.value=this.F.toFixed(0),this.ai.value=this.T.toFixed(2),this.li.value=this.C.toFixed(0),this.ni.value=this._.toFixed(0),this.di.value=this.U.toFixed(0),this.ui.value=this.T.toFixed(2)),this.L(),this.P(),this.X(),this.J())}formResetCallback(){this.C=0,this._=0,this.U=0,this.A=0,this.R=0,this.F=0,this.T=1,this.M="#000000FF",this.m&&(this.m.value=""),this.i.setFormValue(void 0),this.L(),this.P(),this.X(),this.J()}}UiInputColor.uiCss=' :host{display:grid;position:relative;box-shadow:var(--ui-input-box-shadow, var(--ui-border-box-shadow, none));}.base{display:flex;align-items:center;gap:var(--ui-input-gap, 8px);width:100%;border-radius:var(--ui-input-border-radius, var(--ui-border-radius-normal, 4px));border-style:var(--ui-input-border-style, var(--ui-border-style, solid));border-width:var(--ui-input-border-width, 2px);border-color:var(--ui-input-border-color, var(--ui-midground, hsl(0 0% 90% / 1)));box-shadow:none;--ui-icon-primary-color:var(--ui-input-foreground, fieldText);background-color:var(--ui-input-background, field);color:var(--ui-input-foreground, fieldText);padding:var(--ui-input-padding, 8px 8px);box-sizing:border-box;--ui-ic-s:var(--ui-input-color-height, calc(var(--ui-input-font-size, var(--ui-font-size-normal, 16px)) * 1.5));transition:border-color var(--ui-animation-duration-default, 200ms) ease-in-out, box-shadow var(--ui-animation-duration-default, 200ms) ease-in-out;}:host([valid]) .base:not([disabled]){border-color:var(--ui-input-border-valid-color, hsl(120 80% 50% / 1));--ui-icon-primary-color:var(--ui-input-icon-valid-color, hsl(120 80% 50% / 1));}:host([invalid]) .base:not([disabled]){border-color:var(--ui-input-border-invalid-color, hsl(0 80% 50% / 1));--ui-icon-primary-color:var(--ui-input-icon-invalid-color, hsl(0 80% 50% / 1));}.base:not([disabled]):focus, .base:not([disabled]):focus-visible, .base:not([disabled]):focus-within, :host([open]) .base:not([disabled]){outline-style:var(--ui-input-outline-style, none);outline-width:var(--ui-input-outline-width, 0);outline-offset:var(--ui-input-outline-offset, 0);outline-color:var(--ui-input-outline-color, transparent);border-width:var(--ui-input-focus-width, 2px);border-color:var(--ui-input-focus-color, var(--ui-selected-foreground, hsl(215 50% 30% / 1)));box-shadow:inset 0 0 0 var(--ui-input-focus-shadow-width, 4px) var(--ui-input-focus-shadow-color, var(--ui-selected-background, hsl(215 50% 90% / 1)));}:host([valid]) .base:not([disabled]):focus, :host([valid]) .base:not([disabled]):focus-visible, :host([valid]) .base:not([disabled]):focus-within, :host([valid][open]) .base{outline-color:var(--ui-input-outline-valid-color, transparent);border-width:var(--ui-input-focus-width, 2px);border-color:var(--ui-input-focus-valid-color, hsl(120 80% 50% / 1));box-shadow:inset 0 0 0 var(--ui-input-focus-shadow-width, 4px) var(--ui-input-focus-valid-shadow-color, hsl(120 50% 80% / 1));}:host([invalid]) .base:not([disabled]):focus, :host([invalid]) .base:not([disabled]):focus-visible, :host([invalid]) .base:not([disabled]):focus-within, :host([invalid][open]) .base{outline-color:var(--ui-input-outline-invalid-color, transparent);border-width:var(--ui-input-focus-width, 2px);border-color:var(--ui-input-focus-invalid-color, hsl(0 80% 50% / 1));box-shadow:inset 0 0 0 var(--ui-input-focus-shadow-width, 4px) var(--ui-input-focus-invalid-shadow-color, hsl(0 50% 80% / 1));}.preview{flex-grow:1;position:relative;display:block;min-width:8px;min-height:var(--ui-ic-s);height:100%;}.preview-base{background-color:#ffffff;background-image:repeating-linear-gradient( 45deg, rgba(211, 211, 211, 1) 25%, transparent 25%, transparent 75%, rgba(211, 211, 211, 1) 75%, rgba(211, 211, 211, 1)), repeating-linear-gradient( 45deg, rgba(211, 211, 211, 1) 25%, #ffffff 25%, #ffffff 75%, rgba(211, 211, 211, 1) 75%, rgba(211, 211, 211, 1));background-position:0 0, 8px 8px;background-size:16px 16px;}.preview-base, #preview-color{position:absolute;inset:0;}.default-input{display:block;width:100%;min-height:var(--ui-ic-s);height:100%;padding:0;border:none;outline:none;background-color:field;}.default-input::-webkit-color-swatch-wrapper, .default-input::-webkit-color-swatch{border:none;padding:0;}:host([default-input]) .preview{display:none;}:host([left]) #dialog{inset-block-start:calc(100% + var(--ui-input-color-gap, 8px));inset-inline-start:var(--ui-input-color-shift, 2px);justify-self:start;align-self:start;}:host(:not([left]):not([right])) #dialog{inset-block-start:calc(100% + var(--ui-input-color-gap, 8px));justify-self:center;align-self:start;}:host([right]) #dialog{inset-block-start:calc(100% + var(--ui-input-color-gap, 8px));inset-inline-end:var(--ui-input-color-shift, 2px);justify-self:end;align-self:start;}#dialog{position:absolute;direction:ltr;background-color:var(--ui-module-background, hsl(0 0% 97% / 1));color:var(--ui-module-foreground, hsl(0 0% 18% / 1));border-radius:var(--ui-border-radius-normal, 4px);border-style:var(--ui-module-border-style, none);border-width:var(--ui-module-border-width, 0);border-color:var(--ui-module-border-color, transparent);box-shadow:var(--ui-module-shadow, 0 1px 4px 0 rgb(from var(--ui-module-foreground, hsl(0 0% 18% / 1)) r g b / 50%));inset:unset;padding:4px;margin:0;outline:none;z-index:1;height:var(--ui-input-color-dialog-height, 250px);width:var(--ui-input-color-dialog-width, 250px);max-width:95vw;display:none;grid-template-columns:1fr;gap:12px;padding:8px;box-sizing:border-box;touch-action:none;user-select:none;-webkit-user-select:none;}:host(:not([alpha]):not([inputs])) #dialog{grid-template-rows:[map] 6fr [slider] 1fr;}:host(:not([alpha])[inputs]) #dialog{height:calc( var(--ui-input-color-dialog-height, 250px) + var(--ui-input-color-dialog-height-inputs, 50px) );grid-template-rows:[map] 6fr [slider] 1fr [inputs] 2fr;}:host([alpha]:not([inputs])) #dialog{height:calc( var(--ui-input-color-dialog-height, 250px) + var(--ui-input-color-dialog-height-alpha, 25px) );grid-template-rows:[map] 6fr [slider] 1fr [alpha] 1fr;}:host([alpha][inputs]) #dialog{height:calc( var(--ui-input-color-dialog-height, 250px) + var(--ui-input-color-dialog-height-alpha, 25px) + var(--ui-input-color-dialog-height-inputs, 50px) );grid-template-rows:[map] 6fr [slider] 1fr [alpha] 1fr [inputs] 2fr;}#dialog[open]{display:grid;}#map{grid-row:map;position:relative;border-radius:var(--ui-border-radius-normal, 4px);box-shadow:0 0 5px rgb(0 0 0 / 50%);}.map-base, .map-light, .map-dark{position:absolute;inset:0;border-radius:var(--ui-border-radius-normal, 4px);pointer-events:none;}.map-base{z-index:0;}.map-light{background:linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);z-index:1;}.map-dark{background:linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, black 100%);z-index:2;}#map-color{position:absolute;width:0.75rem;height:0.75rem;border-radius:0.5rem;box-sizing:border-box;cursor:move;box-shadow:0 0 1px 2px black, 0 0 0 4px white, 0 0 3px 6px black;z-index:3;}#map-color:focus{outline:2px solid white;outline-offset:-2px;}#slider{grid-row:slider;position:relative;background:linear-gradient( to right, hsl(0deg 100% 50%) 0%, hsl(36deg 100% 50%) 10%, hsl(72deg 100% 50%) 20%, hsl(108deg 100% 50%) 30%, hsl(144deg 100% 50%) 40%, hsl(180deg 100% 50%) 50%, hsl(216deg 100% 50%) 60%, hsl(252deg 100% 50%) 70%, hsl(288deg 100% 50%) 80%, hsl(324deg 100% 50%) 90%, hsl(360deg 100% 50%) 100% );border-radius:var(--ui-border-radius-normal, 4px);box-shadow:0 0 3px rgb(0 0 0 / 50%);}#slider-color{position:absolute;width:8px;height:100%;border-radius:8px;box-sizing:border-box;cursor:ew-resize;box-shadow:0 0 1px 2px black, 0 0 0 4px white, 0 0 3px 6px black;}#slider-color:focus{outline:2px solid white;outline-offset:-2px;}#alpha{grid-row:alpha;position:relative;border-radius:var(--ui-border-radius-normal, 4px);}:host(:not([alpha])) #alpha{display:none;}.alpha-base{position:absolute;left:0;right:0;top:0;bottom:0;background-color:#ffffff;background-image:repeating-linear-gradient( 45deg, rgba(211, 211, 211, 1) 25%, transparent 25%, transparent 75%, rgba(211, 211, 211, 1) 75%, rgba(211, 211, 211, 1)), repeating-linear-gradient( 45deg, rgba(211, 211, 211, 1) 25%, #ffffff 25%, #ffffff 75%, rgba(211, 211, 211, 1) 75%, rgba(211, 211, 211, 1));background-position:0 0, 0.5rem 0.5rem;background-size:1rem 1rem;border-radius:var(--ui-border-radius-normal, 4px);box-shadow:0 0 3px rgb(0 0 0 / 50%);pointer-events:none;z-index:0;}.alpha-scale{position:absolute;left:0;right:0;top:0;bottom:0;border-radius:var(--ui-border-radius-normal, 4px);pointer-events:none;z-index:1;}#alpha-color{position:absolute;width:0.5rem;height:100%;border-radius:0.5rem;box-sizing:border-box;cursor:ew-resize;box-shadow:0 0 1px 2px black, 0 0 0 4px white, 0 0 3px 6px black;z-index:2;}#alpha-color:focus{outline:2px solid white;outline-offset:-2px;}#inputs{grid-row:inputs;display:grid;grid-template-columns:1fr 3rem;grid-template-rows:1fr 1fr;align-items:center;justify-items:center;}:host(:not([inputs])) #inputs{display:none;}#inputs input[type="text"]{width:100%;padding:0;margin:0;font-size:var(--ui-input-color-dialog-font-size, var(--ui-font-size-normal, 16px));font-family:inherit;text-align:center;color:inherit;background-color:inherit;border-radius:var(--ui-border-radius-normal, 4px);border-style:var(--ui-border-style, solid);border-width:var(--ui-border-width, 1px);border-color:var(--ui-default-background, hsl(0 0% 90% / 1));outline:none;}#inputs input:focus-visible{border:2px solid var(--ui-selected-foreground, hsl(215 50% 30% / 1));box-shadow:0 0 3px rgb(0 0 0 / 50%);}#rgba{grid-column:1;grid-row:1;width:100%;height:100%;display:grid;grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr;gap:0.5rem;}#hsla{grid-column:1;grid-row:1;width:100%;height:100%;display:grid;grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr;gap:0.5rem;}:host(:not([alpha])){& #rgba{grid-template-columns:1fr 1fr 1fr;}& #rgba-a{display:none;}& #hsla{grid-template-columns:1fr 1fr 1fr;}& #hsla-a{display:none;}} #hex{grid-column:1;grid-row:1;width:100%;height:100%;display:grid;grid-template-columns:1fr;grid-template-rows:1fr;gap:0.5rem;}.label{grid-column:1;grid-row:2;width:100%;height:100%;display:grid;align-items:center;justify-items:center;color:var(--ui-input-foreground, fieldText);font-size:var(--ui-input-color-dialog-font-size, var(--ui-font-size-normal, 16px));font-family:inherit;font-weight:var(--ui-input-color-dialog-font-weight-bold, var(--ui-font-weight-bold, 600));user-select:none;-webkit-user-select:none;}#hsla-label{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr;gap:0.5rem;}#rgba-label{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr;gap:0.5rem;}#hex-label{grid-template-columns:1fr;grid-template-rows:1fr;}:host(:not([alpha])){& #hsla-label{grid-template-columns:1fr 1fr 1fr;}& #hsla-label > div:nth-child(4){display:none;}& #rgba-label{grid-template-columns:1fr 1fr 1fr;}& #rgba-label > div:nth-child(4){display:none;}& #hex-label > div:nth-child(1){display:none;}& #hex-label > div:nth-child(2){display:block;}} :host([alpha]){& #hex-label > div:nth-child(1){display:block;}& #hex-label > div:nth-child(2){display:none;}} #scroll{grid-column:2;grid-row:1;display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;cursor:pointer;background-color:transparent;border-radius:var(--ui-border-radius-normal, 4px);border:none;outline:none;}#scroll svg{display:block;height:inherit;width:16px;height:16px;fill:var(--ui-default-foreground, hsl(0 0% 30% / 1));stroke-width:1;stroke-linejoin:round;stroke:var(--ui-default-foreground, hsl(0 0% 30% / 1));}#scroll:focus-visible{outline-offset:2px;outline-style:solid;outline-width:2px;outline-color:var(--ui-default-foreground);}#scroll:active{filter:brightness(85%);}.base[disabled], .default-input:disabled{background-color:var( --ui-input-disabled-background, color-mix( in srgb-linear, var(--ui-foreground, hsl(0 0% 18% / 1)) 75%, var(--ui-background, hsl(0 0% 97% / 1)) 25% ) );color:var( --ui-input-disabled-foreground, color-mix( in srgb-linear, var(--ui-foreground, hsl(0 0% 18% / 1)) 25%, var(--ui-background, hsl(0 0% 97% / 1)) 75% ) );--ui-icon-primary-color:var( --ui-input-disabled-foreground, color-mix( in srgb-linear, var(--ui-foreground, hsl(0 0% 18% / 1)) 25%, var(--ui-background, hsl(0 0% 97% / 1)) 75% ) );}slot[name="start"]::slotted(*:not(ui-lozenge):not(ui-button):not(ui-icon-button)), slot[name="end"]::slotted(*:not(ui-lozenge):not(ui-button):not(ui-icon-button)){padding:var(--ui-input-icon-padding, 0);min-height:var(--ui-input-icon-size, 16px);min-width:var(--ui-input-icon-size, 16px);}::slotted(*){align-self:center;}@media (hover:hover){.base, .default-input{cursor:pointer;}.base[disabled], .default-input:disabled{cursor:not-allowed;}#scroll:hover{background-color:var(--ui-default-background, hsl(0 0% 90% / 1));}} @media (forced-colors:active) or (prefers-contrast:more){.base{border-style:solid;border-color:fieldtext;box-shadow:none;transition:none;}:host(:not([disabled])) .base:focus, :host(:not([disabled])) .base:focus-visible, :host(:not([disabled])) .base:focus-within, :host([open]) .base{box-shadow:none;outline:3px solid fieldtext;outline-offset:2px;}#dialog{border-style:var(--ui-module-border-style, solid);border-width:var(--ui-module-border-width, 3px);border-color:var(--ui-module-border-color, var(--ui-foreground, fieldtext));box-shadow:var(--ui-module-shadow, none);}} @media (prefers-reduced-motion){.base{transition:none;}} ',UiInputColor.uiHtml='<div id="base" class="base" tabindex="0"><slot name="start"></slot><div class="preview"><div class="preview-base"></div><div id="preview-color"></div></div><slot name="end"></slot></div><dialog id="dialog"><div id="map"><div class="map-base"></div><div class="map-light"></div><div class="map-dark"></div><div id="map-color" tabindex="1"></div></div><div id="slider"><div id="slider-color" tabindex="2"></div></div><div id="alpha"><div class="alpha-base"></div><div class="alpha-scale"></div><div id="alpha-color" tabindex="3"></div></div><div id="inputs"><div id="hsla"><input id="hsla-h" type="text" tabindex="4" spellcheck="false" autocomplete="off" aria-label="hue"><input id="hsla-s" type="text" tabindex="5" spellcheck="false" autocomplete="off" aria-label="saturation"><input id="hsla-l" type="text" tabindex="6" spellcheck="false" autocomplete="off" aria-label="lightness"><input id="hsla-a" type="text" tabindex="7" spellcheck="false" autocomplete="off" aria-label="transparency"></div><div id="rgba"><input id="rgba-r" type="text" tabindex="8" spellcheck="false" autocomplete="off" aria-label="red"><input id="rgba-g" type="text" tabindex="9" spellcheck="false" autocomplete="off" aria-label="green"><input id="rgba-b" type="text" tabindex="10" spellcheck="false" autocomplete="off" aria-label="blue"><input id="rgba-a" type="text" tabindex="11" spellcheck="false" autocomplete="off" aria-label="transparency"></div><div id="hex"><input id="hex-color" type="text" tabindex="12" spellcheck="false" autocomplete="off" aria-label="hex color value"></div><button id="scroll" tabindex="13" aria-label="switch color input mode"><svg viewBox="0 0 16 16"><path d="m 15,8 -5.5,4.5 v -9 z"></path><path d="m 1,8 5.5,4.5 v -9 z"></path></svg></button><div id="hsla-label" class="label" aria-hidden="true"><div>H</div><div>S</div><div>L</div><div>A</div></div><div id="rgba-label" class="label" aria-hidden="true"><div>R</div><div>G</div><div>B</div><div>A</div></div><div id="hex-label" class="label" aria-hidden="true"><div>HEX #RRGGBBAA</div><div>HEX #RRGGBB</div></div></div></dialog>',i.createUi(UiInputColor,"ui-input-color",import.meta.url);