@editora/ui-core 0.1.12 → 0.1.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +95 -5
- package/dist/alert-dialog.cjs.js +18 -18
- package/dist/alert-dialog.esm.js +130 -117
- package/dist/app-header.cjs.js +22 -2
- package/dist/app-header.esm.js +22 -2
- package/dist/badge.cjs.js +5 -5
- package/dist/badge.esm.js +9 -8
- package/dist/color-picker.cjs.js +4 -4
- package/dist/color-picker.esm.js +40 -31
- package/dist/combobox.cjs.js +21 -21
- package/dist/combobox.esm.js +79 -40
- package/dist/command-palette.cjs.js +1 -1
- package/dist/command-palette.esm.js +2 -2
- package/dist/components/date-time-utils.d.ts +2 -1
- package/dist/components/date-time-utils.d.ts.map +1 -1
- package/dist/components/ui-alert-dialog.d.ts +2 -0
- package/dist/components/ui-alert-dialog.d.ts.map +1 -1
- package/dist/components/ui-app-header.d.ts.map +1 -1
- package/dist/components/ui-badge.d.ts.map +1 -1
- package/dist/components/ui-color-picker.d.ts.map +1 -1
- package/dist/components/ui-combobox.d.ts +4 -1
- package/dist/components/ui-combobox.d.ts.map +1 -1
- package/dist/components/ui-context-menu.d.ts +6 -0
- package/dist/components/ui-context-menu.d.ts.map +1 -1
- package/dist/components/ui-date-picker.d.ts +3 -0
- package/dist/components/ui-date-picker.d.ts.map +1 -1
- package/dist/components/ui-date-range-picker.d.ts +3 -0
- package/dist/components/ui-date-range-picker.d.ts.map +1 -1
- package/dist/components/ui-date-range-time-picker.d.ts +3 -0
- package/dist/components/ui-date-range-time-picker.d.ts.map +1 -1
- package/dist/components/ui-date-time-picker.d.ts +3 -0
- package/dist/components/ui-date-time-picker.d.ts.map +1 -1
- package/dist/components/ui-dialog.d.ts +3 -0
- package/dist/components/ui-dialog.d.ts.map +1 -1
- package/dist/components/ui-drawer.d.ts +14 -0
- package/dist/components/ui-drawer.d.ts.map +1 -1
- package/dist/components/ui-floating-toolbar.d.ts +3 -0
- package/dist/components/ui-floating-toolbar.d.ts.map +1 -1
- package/dist/components/ui-gantt.d.ts +30 -1
- package/dist/components/ui-gantt.d.ts.map +1 -1
- package/dist/components/ui-hover-card.d.ts +3 -0
- package/dist/components/ui-hover-card.d.ts.map +1 -1
- package/dist/components/ui-menu.d.ts +1 -0
- package/dist/components/ui-menu.d.ts.map +1 -1
- package/dist/components/ui-menubar.d.ts +1 -0
- package/dist/components/ui-menubar.d.ts.map +1 -1
- package/dist/components/ui-positioner.d.ts.map +1 -1
- package/dist/components/ui-quick-actions.d.ts.map +1 -1
- package/dist/components/ui-radio.d.ts +47 -0
- package/dist/components/ui-radio.d.ts.map +1 -0
- package/dist/components/ui-select.d.ts +8 -0
- package/dist/components/ui-select.d.ts.map +1 -1
- package/dist/components/ui-selection-popup.d.ts.map +1 -1
- package/dist/components/ui-stepper.d.ts.map +1 -1
- package/dist/components/ui-time-picker.d.ts +3 -0
- package/dist/components/ui-time-picker.d.ts.map +1 -1
- package/dist/context-menu.cjs.js +12 -12
- package/dist/context-menu.esm.js +160 -133
- package/dist/date-field.cjs.js +1 -1
- package/dist/date-field.esm.js +3 -2
- package/dist/date-picker.cjs.js +13 -13
- package/dist/date-picker.esm.js +101 -67
- package/dist/date-range-picker.cjs.js +14 -14
- package/dist/date-range-picker.esm.js +99 -65
- package/dist/date-range-time-picker.cjs.js +13 -13
- package/dist/date-range-time-picker.esm.js +77 -45
- package/dist/date-time-picker.cjs.js +13 -13
- package/dist/date-time-picker.esm.js +133 -101
- package/dist/date-time-utils-66480de4.js +1 -0
- package/dist/date-time-utils-a2c7af25.mjs +307 -0
- package/dist/dialog.cjs.js +29 -20
- package/dist/dialog.esm.js +90 -70
- package/dist/drawer.cjs.js +16 -16
- package/dist/drawer.esm.js +216 -98
- package/dist/floating-toolbar.cjs.js +6 -16
- package/dist/floating-toolbar.esm.js +57 -40
- package/dist/gantt.cjs.js +656 -74
- package/dist/gantt.esm.js +1050 -100
- package/dist/hover-card.cjs.js +4 -4
- package/dist/hover-card.esm.js +62 -39
- package/dist/index.cjs.js +1 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.esm.js +300 -286
- package/dist/menu.cjs.js +2 -2
- package/dist/menu.esm.js +118 -110
- package/dist/menubar.cjs.js +5 -5
- package/dist/menubar.esm.js +83 -78
- package/dist/{overlayManager-ece06517.js → overlayManager-0eda4e08.js} +1 -1
- package/dist/{overlayManager-86454af7.mjs → overlayManager-5bbd4dc3.mjs} +1 -1
- package/dist/popover.cjs.js +1 -1
- package/dist/popover.esm.js +2 -2
- package/dist/portal-c69756c0.js +1 -0
- package/dist/portal-fe73e5cc.mjs +123 -0
- package/dist/portal.d.ts +29 -3
- package/dist/portal.d.ts.map +1 -1
- package/dist/positioner-33529bb8.js +1 -0
- package/dist/positioner-e9770c66.mjs +582 -0
- package/dist/positioner.cjs.js +2 -2
- package/dist/positioner.esm.js +36 -26
- package/dist/primitives/positioner.d.ts +199 -1
- package/dist/primitives/positioner.d.ts.map +1 -1
- package/dist/quick-actions.cjs.js +10 -4
- package/dist/quick-actions.esm.js +27 -21
- package/dist/radio.cjs.js +259 -0
- package/dist/radio.esm.js +455 -0
- package/dist/{runtime-4ac0107b.mjs → runtime-161f68a2.mjs} +24 -23
- package/dist/runtime-3f13807b.js +1 -0
- package/dist/runtime.cjs.js +1 -1
- package/dist/runtime.d.ts +2 -0
- package/dist/runtime.d.ts.map +1 -1
- package/dist/runtime.esm.js +39 -24
- package/dist/scroll-lock-31da444f.mjs +56 -0
- package/dist/scroll-lock-d7b0df21.js +1 -0
- package/dist/scroll-lock.d.ts.map +1 -1
- package/dist/select.cjs.js +14 -15
- package/dist/select.esm.js +117 -97
- package/dist/selection-popup.cjs.js +4 -7
- package/dist/selection-popup.esm.js +8 -11
- package/dist/split-button.cjs.js +1 -1
- package/dist/split-button.esm.js +2 -2
- package/dist/standalone/radio.d.ts +2 -0
- package/dist/standalone/radio.d.ts.map +1 -0
- package/dist/stepper.cjs.js +19 -50
- package/dist/stepper.esm.js +17 -48
- package/dist/time-field.cjs.js +1 -1
- package/dist/time-field.esm.js +3 -2
- package/dist/time-picker.cjs.js +15 -15
- package/dist/time-picker.esm.js +100 -68
- package/dist/tooltip.cjs.js +1 -1
- package/dist/tooltip.esm.js +2 -1
- package/package.json +1 -1
- package/dist/date-time-utils-5cf58cd0.js +0 -1
- package/dist/date-time-utils-bdceb7af.mjs +0 -273
- package/dist/portal-1cf392ca.mjs +0 -114
- package/dist/portal-d8d7fbca.js +0 -1
- package/dist/positioner-accc6e5f.js +0 -1
- package/dist/positioner-fbd61bf1.mjs +0 -132
- package/dist/runtime-5f282bc8.js +0 -1
- package/dist/scroll-lock-48793569.js +0 -1
- package/dist/scroll-lock-9de6d328.mjs +0 -53
package/dist/app-header.esm.js
CHANGED
|
@@ -7,6 +7,9 @@ const t = `
|
|
|
7
7
|
--ui-app-header-height-large: 76px;
|
|
8
8
|
--ui-app-header-bg-base: var(--base-app-header-bg, var(--color-panel, var(--ui-color-surface, #ffffff)));
|
|
9
9
|
--ui-app-header-bg: var(--ui-app-header-bg-base);
|
|
10
|
+
--ui-app-header-sticky-bg-base: var(--base-app-header-sticky-bg, var(--ui-color-surface, #ffffff));
|
|
11
|
+
--ui-app-header-surface-bg: var(--ui-app-header-bg);
|
|
12
|
+
--ui-app-header-surface-backdrop: blur(6px) saturate(1.05);
|
|
10
13
|
--ui-app-header-color: var(--ui-color-text, var(--ui-text, #202020));
|
|
11
14
|
--ui-app-header-muted: color-mix(in srgb, var(--ui-app-header-color) 56%, var(--ui-color-muted, var(--ui-muted, #646464)) 44%);
|
|
12
15
|
--ui-app-header-accent: var(--ui-color-primary, var(--ui-primary, #2563eb));
|
|
@@ -115,6 +118,22 @@ const t = `
|
|
|
115
118
|
position: sticky;
|
|
116
119
|
top: 0;
|
|
117
120
|
z-index: var(--ui-app-header-z);
|
|
121
|
+
--ui-app-header-surface-bg: var(--ui-app-header-sticky-bg-base);
|
|
122
|
+
--ui-app-header-surface-backdrop: none;
|
|
123
|
+
contain: paint;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
:host([sticky][variant='soft']) {
|
|
127
|
+
--ui-app-header-surface-bg: color-mix(in srgb, var(--ui-app-header-accent) 8%, var(--ui-app-header-sticky-bg-base));
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
:host([sticky][variant='solid']) {
|
|
131
|
+
--ui-app-header-surface-bg: var(--ui-app-header-accent);
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
:host([sticky]) header {
|
|
135
|
+
transform: translateZ(0);
|
|
136
|
+
backface-visibility: hidden;
|
|
118
137
|
}
|
|
119
138
|
|
|
120
139
|
header {
|
|
@@ -124,14 +143,15 @@ const t = `
|
|
|
124
143
|
grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
|
|
125
144
|
align-items: center;
|
|
126
145
|
gap: var(--ui-app-header-gap);
|
|
127
|
-
background: var(--ui-app-header-bg);
|
|
146
|
+
background: var(--ui-app-header-surface-bg);
|
|
128
147
|
color: var(--ui-app-header-color);
|
|
129
148
|
border: var(--ui-app-header-border);
|
|
130
149
|
padding: 0 var(--ui-app-header-padding-x);
|
|
131
150
|
box-sizing: border-box;
|
|
132
151
|
border-radius: var(--ui-app-header-radius);
|
|
133
152
|
box-shadow: var(--ui-app-header-shadow);
|
|
134
|
-
backdrop-filter:
|
|
153
|
+
-webkit-backdrop-filter: var(--ui-app-header-surface-backdrop);
|
|
154
|
+
backdrop-filter: var(--ui-app-header-surface-backdrop);
|
|
135
155
|
transition:
|
|
136
156
|
background var(--ui-app-header-duration) var(--ui-app-header-easing),
|
|
137
157
|
border-color var(--ui-app-header-duration) var(--ui-app-header-easing),
|
package/dist/badge.cjs.js
CHANGED
|
@@ -406,11 +406,11 @@
|
|
|
406
406
|
outline-offset: 2px;
|
|
407
407
|
}
|
|
408
408
|
}
|
|
409
|
-
`;function c(t){return String(t).replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'")}function
|
|
409
|
+
`;function c(t){return String(t).replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'")}function o(t){if(!t)return"";const e=t.trim().toLowerCase();return e?e==="none"?"0px":e==="sm"?"8px":e==="md"||e==="large"?"12px":e==="lg"?"16px":e==="full"||e==="pill"?"9999px":/^\d+(\.\d+)?$/.test(e)?`${e}px`:t:""}class n extends u.ElementBase{constructor(){super(),this._removeBtn=null,this._managedRole=!1,this._managedTabIndex=!1,this._managedAriaDisabled=!1,this._managedAriaBusy=!1,this._managedAriaLabel=!1,this._lastLabelText="",this._onRemoveClick=this._onRemoveClick.bind(this),this._onHostKeyDown=this._onHostKeyDown.bind(this)}static get observedAttributes(){return["text","tone","variant","size","pill","dot","radius","disabled","interactive","removable","auto-remove","icon-only","truncate","max-width","state","headless","elevation"]}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",this._onHostKeyDown),this._syncInteractiveA11y(),this._syncBusyState();const e=o(this.getAttribute("radius"));e&&this.style.setProperty("--ui-badge-radius",e);const i=this.getAttribute("max-width");i&&this.style.setProperty("--ui-badge-max-inline-size",i)}disconnectedCallback(){this._detachListeners(),this.removeEventListener("keydown",this._onHostKeyDown),super.disconnectedCallback()}attributeChangedCallback(e,i,a){if(i!==a){if((e==="interactive"||e==="disabled")&&this._syncInteractiveA11y(),e==="state"&&this._syncBusyState(),e==="radius"){const r=o(a);r?this.style.setProperty("--ui-badge-radius",r):this.style.removeProperty("--ui-badge-radius")}e==="max-width"&&(a?this.style.setProperty("--ui-badge-max-inline-size",a):this.style.removeProperty("--ui-badge-max-inline-size")),this.isConnected&&this.shouldRenderOnAttributeChange(e,i,a)&&this.requestRender()}}render(){this._syncInteractiveA11y(),this._syncBusyState();const e=(this.getAttribute("text")||"").trim(),i=this.hasAttribute("dot"),a=this.hasAttribute("removable"),r=this.hasAttribute("icon-only"),s=this.getAttribute("state")==="loading",d=this.querySelector('[slot="icon"]')!==null,b=(this.textContent||"").trim().length>0,l=!r&&(e.length>0||b);this._lastLabelText=e||(this.textContent||"").trim(),r&&!this.hasAttribute("aria-label")?(this.setAttribute("aria-label",this._lastLabelText||"Badge"),this._managedAriaLabel=!0):!r&&this._managedAriaLabel&&(this.removeAttribute("aria-label"),this._managedAriaLabel=!1),this.setContent(`
|
|
410
410
|
<style>${g}</style>
|
|
411
411
|
<span class="badge" part="base">
|
|
412
412
|
<span class="dot" part="dot" aria-hidden="true" ${i?"":"hidden"}></span>
|
|
413
|
-
<span class="spinner" part="spinner" aria-hidden="true" ${
|
|
413
|
+
<span class="spinner" part="spinner" aria-hidden="true" ${s?"":"hidden"}></span>
|
|
414
414
|
<span class="icon-slot" part="icon" ${d?"":"hidden"}><slot name="icon"></slot></span>
|
|
415
415
|
<span class="label-wrap" part="label-wrap" ${l?"":"hidden"}>
|
|
416
416
|
<span class="label" part="label"><slot>${c(e)}</slot></span>
|
|
@@ -421,12 +421,12 @@
|
|
|
421
421
|
part="remove"
|
|
422
422
|
aria-label="Remove badge"
|
|
423
423
|
${a?"":"hidden"}
|
|
424
|
-
${this.hasAttribute("disabled")||
|
|
424
|
+
${this.hasAttribute("disabled")||s?"disabled":""}
|
|
425
425
|
>
|
|
426
426
|
<svg viewBox="0 0 12 12" fill="none" aria-hidden="true">
|
|
427
427
|
<path d="M3 3L9 9M9 3L3 9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
|
|
428
428
|
</svg>
|
|
429
429
|
</button>
|
|
430
|
-
<span class="visually-hidden" aria-live="polite" ${
|
|
430
|
+
<span class="visually-hidden" aria-live="polite" ${s?"":"hidden"}>Loading</span>
|
|
431
431
|
</span>
|
|
432
|
-
`),this._detachListeners(),this._removeBtn=this.root.querySelector(".remove-btn"),this._removeBtn&&this._removeBtn.addEventListener("click",this._onRemoveClick)}_syncInteractiveA11y(){const e=this.hasAttribute("interactive"),i=this.hasAttribute("disabled");if(e){this.hasAttribute("role")||(this.setAttribute("role","button"),this._managedRole=!0),this.hasAttribute("tabindex")?this._managedTabIndex&&this.setAttribute("tabindex",i?"-1":"0"):(this.setAttribute("tabindex",i?"-1":"0"),this._managedTabIndex=!0),(!this.hasAttribute("aria-disabled")||this._managedAriaDisabled)&&(this.setAttribute("aria-disabled",i?"true":"false"),this._managedAriaDisabled=!0);return}this._managedRole&&(this.removeAttribute("role"),this._managedRole=!1),this._managedTabIndex&&(this.removeAttribute("tabindex"),this._managedTabIndex=!1),this._managedAriaDisabled&&(this.removeAttribute("aria-disabled"),this._managedAriaDisabled=!1)}_syncBusyState(){if(this.getAttribute("state")==="loading"){(!this.hasAttribute("aria-busy")||this._managedAriaBusy)&&(this.setAttribute("aria-busy","true"),this._managedAriaBusy=!0);return}this._managedAriaBusy&&(this.removeAttribute("aria-busy"),this._managedAriaBusy=!1)}_detachListeners(){this._removeBtn&&(this._removeBtn.removeEventListener("click",this._onRemoveClick),this._removeBtn=null)}_onHostKeyDown(e){if(!this.hasAttribute("interactive")||this.hasAttribute("disabled"))return;const i=e.target;i&&typeof i.closest=="function"&&i.closest(".remove-btn")||e.key!=="Enter"&&e.key!==" "||(e.preventDefault(),this.click())}_onRemoveClick(e){if(e.preventDefault(),e.stopPropagation(),this.hasAttribute("disabled")||this.getAttribute("state")==="loading")return;const i={text:this._lastLabelText,source:"button"},a=new CustomEvent("remove",{detail:i,bubbles:!0,cancelable:!0,composed:!0});this.dispatchEvent(a),this.dispatchEvent(new CustomEvent("ui-remove",{detail:i,bubbles:!0,composed:!0})),!a.defaultPrevented&&this.hasAttribute("auto-remove")&&this.remove()}shouldRenderOnAttributeChange(e,i,a){return i===a?!1:!["tone","variant","size","pill","radius","disabled","interactive","truncate","max-width","elevation"].includes(e)}}typeof customElements<"u"&&!customElements.get("ui-badge")&&customElements.define("ui-badge",n);exports.UIBadge=n;
|
|
432
|
+
`),this._detachListeners(),this._removeBtn=this.root.querySelector(".remove-btn"),this._removeBtn&&this._removeBtn.addEventListener("click",this._onRemoveClick)}_syncInteractiveA11y(){const e=this.hasAttribute("interactive"),i=this.hasAttribute("disabled");if(e){this.hasAttribute("role")||(this.setAttribute("role","button"),this._managedRole=!0),this.hasAttribute("tabindex")?this._managedTabIndex&&this.setAttribute("tabindex",i?"-1":"0"):(this.setAttribute("tabindex",i?"-1":"0"),this._managedTabIndex=!0),(!this.hasAttribute("aria-disabled")||this._managedAriaDisabled)&&(this.setAttribute("aria-disabled",i?"true":"false"),this._managedAriaDisabled=!0);return}this._managedRole&&(this.removeAttribute("role"),this._managedRole=!1),this._managedTabIndex&&(this.removeAttribute("tabindex"),this._managedTabIndex=!1),this._managedAriaDisabled&&(this.removeAttribute("aria-disabled"),this._managedAriaDisabled=!1)}_syncBusyState(){if(this.getAttribute("state")==="loading"){(!this.hasAttribute("aria-busy")||this._managedAriaBusy)&&(this.setAttribute("aria-busy","true"),this._managedAriaBusy=!0);return}this._managedAriaBusy&&(this.removeAttribute("aria-busy"),this._managedAriaBusy=!1)}_detachListeners(){this._removeBtn&&(this._removeBtn.removeEventListener("click",this._onRemoveClick),this._removeBtn=null)}_onHostKeyDown(e){if(!this.hasAttribute("interactive")||this.hasAttribute("disabled"))return;const i=e.target;i&&typeof i.closest=="function"&&i.closest(".remove-btn")||e.key!=="Enter"&&e.key!==" "||(e.preventDefault(),this.click())}_onRemoveClick(e){if(e.preventDefault(),e.stopPropagation(),this.hasAttribute("disabled")||this.getAttribute("state")==="loading")return;const i={text:this._lastLabelText,source:"button"},a=new CustomEvent("remove",{detail:i,bubbles:!0,cancelable:!0,composed:!0});this.dispatchEvent(a),this.dispatchEvent(new CustomEvent("ui-remove",{detail:i,bubbles:!0,composed:!0})),!a.defaultPrevented&&this.hasAttribute("auto-remove")&&this.remove()}shouldRenderOnAttributeChange(e,i,a){return i===a?!1:!["tone","variant","size","pill","radius","disabled","interactive","truncate","max-width","headless","elevation"].includes(e)}}typeof customElements<"u"&&!customElements.get("ui-badge")&&customElements.define("ui-badge",n);exports.UIBadge=n;
|
package/dist/badge.esm.js
CHANGED
|
@@ -411,7 +411,7 @@ const u = `
|
|
|
411
411
|
function g(t) {
|
|
412
412
|
return String(t).replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/'/g, "'");
|
|
413
413
|
}
|
|
414
|
-
function
|
|
414
|
+
function o(t) {
|
|
415
415
|
if (!t)
|
|
416
416
|
return "";
|
|
417
417
|
const e = t.trim().toLowerCase();
|
|
@@ -444,7 +444,7 @@ class c extends l {
|
|
|
444
444
|
}
|
|
445
445
|
connectedCallback() {
|
|
446
446
|
super.connectedCallback(), this.addEventListener("keydown", this._onHostKeyDown), this._syncInteractiveA11y(), this._syncBusyState();
|
|
447
|
-
const e =
|
|
447
|
+
const e = o(this.getAttribute("radius"));
|
|
448
448
|
e && this.style.setProperty("--ui-badge-radius", e);
|
|
449
449
|
const i = this.getAttribute("max-width");
|
|
450
450
|
i && this.style.setProperty("--ui-badge-max-inline-size", i);
|
|
@@ -455,20 +455,20 @@ class c extends l {
|
|
|
455
455
|
attributeChangedCallback(e, i, a) {
|
|
456
456
|
if (i !== a) {
|
|
457
457
|
if ((e === "interactive" || e === "disabled") && this._syncInteractiveA11y(), e === "state" && this._syncBusyState(), e === "radius") {
|
|
458
|
-
const r =
|
|
458
|
+
const r = o(a);
|
|
459
459
|
r ? this.style.setProperty("--ui-badge-radius", r) : this.style.removeProperty("--ui-badge-radius");
|
|
460
460
|
}
|
|
461
|
-
e === "max-width" && (a ? this.style.setProperty("--ui-badge-max-inline-size", a) : this.style.removeProperty("--ui-badge-max-inline-size")), this.isConnected && this.requestRender();
|
|
461
|
+
e === "max-width" && (a ? this.style.setProperty("--ui-badge-max-inline-size", a) : this.style.removeProperty("--ui-badge-max-inline-size")), this.isConnected && this.shouldRenderOnAttributeChange(e, i, a) && this.requestRender();
|
|
462
462
|
}
|
|
463
463
|
}
|
|
464
464
|
render() {
|
|
465
465
|
this._syncInteractiveA11y(), this._syncBusyState();
|
|
466
|
-
const e = (this.getAttribute("text") || "").trim(), i = this.hasAttribute("dot"), a = this.hasAttribute("removable"), r = this.hasAttribute("icon-only"),
|
|
466
|
+
const e = (this.getAttribute("text") || "").trim(), i = this.hasAttribute("dot"), a = this.hasAttribute("removable"), r = this.hasAttribute("icon-only"), s = this.getAttribute("state") === "loading", n = this.querySelector('[slot="icon"]') !== null, d = (this.textContent || "").trim().length > 0, b = !r && (e.length > 0 || d);
|
|
467
467
|
this._lastLabelText = e || (this.textContent || "").trim(), r && !this.hasAttribute("aria-label") ? (this.setAttribute("aria-label", this._lastLabelText || "Badge"), this._managedAriaLabel = !0) : !r && this._managedAriaLabel && (this.removeAttribute("aria-label"), this._managedAriaLabel = !1), this.setContent(`
|
|
468
468
|
<style>${u}</style>
|
|
469
469
|
<span class="badge" part="base">
|
|
470
470
|
<span class="dot" part="dot" aria-hidden="true" ${i ? "" : "hidden"}></span>
|
|
471
|
-
<span class="spinner" part="spinner" aria-hidden="true" ${
|
|
471
|
+
<span class="spinner" part="spinner" aria-hidden="true" ${s ? "" : "hidden"}></span>
|
|
472
472
|
<span class="icon-slot" part="icon" ${n ? "" : "hidden"}><slot name="icon"></slot></span>
|
|
473
473
|
<span class="label-wrap" part="label-wrap" ${b ? "" : "hidden"}>
|
|
474
474
|
<span class="label" part="label"><slot>${g(e)}</slot></span>
|
|
@@ -479,13 +479,13 @@ class c extends l {
|
|
|
479
479
|
part="remove"
|
|
480
480
|
aria-label="Remove badge"
|
|
481
481
|
${a ? "" : "hidden"}
|
|
482
|
-
${this.hasAttribute("disabled") ||
|
|
482
|
+
${this.hasAttribute("disabled") || s ? "disabled" : ""}
|
|
483
483
|
>
|
|
484
484
|
<svg viewBox="0 0 12 12" fill="none" aria-hidden="true">
|
|
485
485
|
<path d="M3 3L9 9M9 3L3 9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
|
|
486
486
|
</svg>
|
|
487
487
|
</button>
|
|
488
|
-
<span class="visually-hidden" aria-live="polite" ${
|
|
488
|
+
<span class="visually-hidden" aria-live="polite" ${s ? "" : "hidden"}>Loading</span>
|
|
489
489
|
</span>
|
|
490
490
|
`), this._detachListeners(), this._removeBtn = this.root.querySelector(".remove-btn"), this._removeBtn && this._removeBtn.addEventListener("click", this._onRemoveClick);
|
|
491
491
|
}
|
|
@@ -544,6 +544,7 @@ class c extends l {
|
|
|
544
544
|
"interactive",
|
|
545
545
|
"truncate",
|
|
546
546
|
"max-width",
|
|
547
|
+
"headless",
|
|
547
548
|
"elevation"
|
|
548
549
|
].includes(e);
|
|
549
550
|
}
|
package/dist/color-picker.cjs.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const W=require("./ElementBase-1b301e7f.js"),
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const W=require("./ElementBase-1b301e7f.js"),m=require("./date-time-utils-66480de4.js");require("./calendar-a8735e40.js");require("./scroll-lock-d7b0df21.js");require("./positioner-33529bb8.js");function g(s,t,e){return Math.max(t,Math.min(e,s))}function y(s,t=3){const e=10**t;return Math.round(s*e)/e}function C(s){return g(Math.round(s),0,255)}function O(s){const t=s.trim();if(!t)return null;if(t.endsWith("%")){const r=Number(t.slice(0,-1));return Number.isFinite(r)?g(r/100,0,1):null}const e=Number(t);return Number.isFinite(e)?g(e,0,1):null}function B(s){const t=s.trim();if(!t)return null;if(t.endsWith("%")){const r=Number(t.slice(0,-1));return Number.isFinite(r)?C(g(r,0,100)/100*255):null}const e=Number(t);return Number.isFinite(e)?C(e):null}function H(s){const t=s.trim();if(!t.endsWith("%"))return null;const e=Number(t.slice(0,-1));return Number.isFinite(e)?g(e,0,100):null}function K(s){const t=s.trim().toLowerCase();if(!t)return null;if(t.endsWith("deg")){const r=Number(t.slice(0,-3));return Number.isFinite(r)?k(r):null}if(t.endsWith("turn")){const r=Number(t.slice(0,-4));return Number.isFinite(r)?k(r*360):null}if(t.endsWith("rad")){const r=Number(t.slice(0,-3));return Number.isFinite(r)?k(r*180/Math.PI):null}const e=Number(t);return Number.isFinite(e)?k(e):null}function k(s){const t=s%360;return t<0?t+360:t}function F(s){const t=s.trim();if(!t)return null;if(t.includes("/")){const[r,i]=t.split("/");if(i==null)return null;const a=r.includes(",")?r.split(","):r.trim().split(/\s+/);return a.length<3?null:{channels:a.map(n=>n.trim()).filter(Boolean),alpha:i.trim()}}if(t.includes(",")){const r=t.split(",").map(i=>i.trim()).filter(Boolean);return r.length<3?null:{channels:r.slice(0,3),alpha:r[3]??null}}const e=t.split(/\s+/).map(r=>r.trim()).filter(Boolean);return e.length<3?null:{channels:e.slice(0,3),alpha:e[3]??null}}function G(s){const t=s.trim().replace(/^#/,"");if(![3,4,6,8].includes(t.length)||!/^[0-9a-f]+$/i.test(t))return null;if(t.length===3||t.length===4){const n=parseInt(t[0]+t[0],16),o=parseInt(t[1]+t[1],16),l=parseInt(t[2]+t[2],16),u=t.length===4?parseInt(t[3]+t[3],16)/255:1;return h({r:n,g:o,b:l,a:u})}const e=parseInt(t.slice(0,2),16),r=parseInt(t.slice(2,4),16),i=parseInt(t.slice(4,6),16),a=t.length===8?parseInt(t.slice(6,8),16)/255:1;return h({r:e,g:r,b:i,a})}function X(s){const t=/^rgba?\((.+)\)$/i.exec(s.trim());if(!t)return null;const e=F(t[1]);if(!e||e.channels.length<3)return null;const r=B(e.channels[0]),i=B(e.channels[1]),a=B(e.channels[2]);if(r==null||i==null||a==null)return null;const n=e.alpha!=null?O(e.alpha):1;return n==null?null:h({r,g:i,b:a,a:n})}function Y(s){const t=/^hsla?\((.+)\)$/i.exec(s.trim());if(!t)return null;const e=F(t[1]);if(!e||e.channels.length<3)return null;const r=K(e.channels[0]),i=H(e.channels[1]),a=H(e.channels[2]);if(r==null||i==null||a==null)return null;const n=e.alpha!=null?O(e.alpha):1;return n==null?null:U({h:r,s:i,l:a,a:n})}function h(s){return{r:C(s.r),g:C(s.g),b:C(s.b),a:y(g(s.a,0,1),4)}}function f(s){const t=(s||"").trim();return t?t.startsWith("#")?G(t):/^rgba?\(/i.test(t)?X(t):/^hsla?\(/i.test(t)?Y(t):null:null}function j(s,t=!1){const e=h(s),r=a=>a.toString(16).padStart(2,"0"),i=`#${r(e.r)}${r(e.g)}${r(e.b)}`;return t?`${i}${r(Math.round(e.a*255))}`:i}function J(s,t=!0){const e=h(s);return!t||e.a>=1?`rgb(${e.r} ${e.g} ${e.b})`:`rgb(${e.r} ${e.g} ${e.b} / ${y(e.a,3)})`}function Q(s,t=!0){const e=Math.round(k(s.h)),r=Math.round(g(s.s,0,100)),i=Math.round(g(s.l,0,100)),a=y(g(s.a,0,1),3);return!t||a>=1?`hsl(${e} ${r}% ${i}%)`:`hsl(${e} ${r}% ${i}% / ${a})`}function T(s){const t=h(s),e=t.r/255,r=t.g/255,i=t.b/255,a=Math.max(e,r,i),n=Math.min(e,r,i),o=a-n;let l=0;o!==0&&(a===e?l=(r-i)/o%6:a===r?l=(i-e)/o+2:l=(e-r)/o+4,l*=60,l<0&&(l+=360));const u=a===0?0:o/a*100,b=a*100;return{h:y(l,3),s:y(u,3),v:y(b,3),a:t.a}}function Z(s){const t=k(s.h),e=g(s.s,0,100)/100,r=g(s.v,0,100)/100,i=r*e,a=i*(1-Math.abs(t/60%2-1)),n=r-i;let o=0,l=0,u=0;return t<60?(o=i,l=a):t<120?(o=a,l=i):t<180?(l=i,u=a):t<240?(l=a,u=i):t<300?(o=a,u=i):(o=i,u=a),h({r:(o+n)*255,g:(l+n)*255,b:(u+n)*255,a:s.a})}function L(s){const t=h(s),e=t.r/255,r=t.g/255,i=t.b/255,a=Math.max(e,r,i),n=Math.min(e,r,i),o=a-n,l=(a+n)/2;let u=0,b=0;return o!==0&&(b=o/(1-Math.abs(2*l-1)),a===e?u=(r-i)/o%6:a===r?u=(i-e)/o+2:u=(e-r)/o+4,u*=60,u<0&&(u+=360)),{h:y(u,3),s:y(b*100,3),l:y(l*100,3),a:t.a}}function U(s){const t=k(s.h),e=g(s.s,0,100)/100,r=g(s.l,0,100)/100,i=(1-Math.abs(2*r-1))*e,a=i*(1-Math.abs(t/60%2-1)),n=r-i/2;let o=0,l=0,u=0;return t<60?(o=i,l=a):t<120?(o=a,l=i):t<180?(l=i,u=a):t<240?(l=a,u=i):t<300?(o=a,u=i):(o=i,u=a),h({r:(o+n)*255,g:(l+n)*255,b:(u+n)*255,a:s.a})}function w(s,t){return j(s,t).toUpperCase()}function A(s,t){return J(s,t)}function tt(s,t){return Q(L(s),t)}const z="#2563eb",q="editora:ui-color-picker:recent",et=`
|
|
2
2
|
<svg viewBox="0 0 20 20" aria-hidden="true" focusable="false">
|
|
3
3
|
<path d="m5.6 7.6 4.4 4.6 4.4-4.6" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
|
|
4
4
|
</svg>
|
|
@@ -686,7 +686,7 @@
|
|
|
686
686
|
max-block-size: min(84vh, 680px);
|
|
687
687
|
overflow: auto;
|
|
688
688
|
}
|
|
689
|
-
`;function c(s,t,e){return Math.max(t,Math.min(e,s))}function M(s,t){return Math.abs(s-t)<=5e-4}function E(s){return s.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'")}class N extends W.ElementBase{constructor(){super(),this._syncing=!1,this._initialized=!1,this._rgba=h(f(z)||{r:37,g:99,b:235,a:1}),this._hsva=T(this._rgba),this._format="hex",this._open=!1,this._error="",this._presets=[],this._recentColors=[],this._panelCache=new WeakMap,this._overlay=null,this._overlayRoot=null,this._releaseScrollLock=null,this._restoreFocusEl=null,this._isSheetOpen=!1,this._dragTarget=null,this._dragPointerId=-1,this._dragRect=null,this._dragX=0,this._dragY=0,this._dragRaf=0,this._dragChanged=!1,this._dragSource="drag",this._renderingSwatches=!1,this._scheduleOverlayPosition=
|
|
689
|
+
`;function c(s,t,e){return Math.max(t,Math.min(e,s))}function M(s,t){return Math.abs(s-t)<=5e-4}function E(s){return s.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'")}class N extends W.ElementBase{constructor(){super(),this._syncing=!1,this._initialized=!1,this._rgba=h(f(z)||{r:37,g:99,b:235,a:1}),this._hsva=T(this._rgba),this._format="hex",this._open=!1,this._error="",this._presets=[],this._recentColors=[],this._panelCache=new WeakMap,this._overlay=null,this._overlayRoot=null,this._releaseScrollLock=null,this._restoreFocusEl=null,this._isSheetOpen=!1,this._dragTarget=null,this._dragPointerId=-1,this._dragRect=null,this._dragX=0,this._dragY=0,this._dragRaf=0,this._dragChanged=!1,this._dragSource="drag",this._renderingSwatches=!1,this._scheduleOverlayPosition=m.rafThrottle(()=>this._positionOverlay()),this._onRootClickBound=t=>this._onPanelClick(t,"root"),this._onRootInputBound=t=>this._onPanelInput(t,"root"),this._onRootChangeBound=t=>this._onPanelChange(t,"root"),this._onRootKeyDownBound=t=>this._onPanelKeyDown(t,"root"),this._onRootPointerDownBound=t=>this._onPanelPointerDown(t,"root"),this._onRootPointerMoveBound=t=>this._onPanelPointerMove(t),this._onRootPointerUpBound=t=>this._onPanelPointerUp(t),this._onRootPointerCancelBound=t=>this._onPanelPointerCancel(t),this._onDocumentPointerDownBound=t=>this._onDocumentPointerDown(t),this._onDocumentKeyDownBound=t=>this._onDocumentKeyDown(t),this._onWindowResizeBound=()=>this._scheduleOverlayPosition.run(),this._onWindowScrollBound=t=>{m.eventOriginatesWithin(t,[this._overlay])||this._scheduleOverlayPosition.run()},this._applyValueAttribute(!1),this._applyFormatAttribute(),this._open=this.hasAttribute("open"),this._parsePresetsAttribute()}static get observedAttributes(){return["value","format","alpha","disabled","readonly","size","variant","state","tone","mode","open","close-on-escape","placeholder","presets","recent","max-recent","persist","aria-label","aria-labelledby","aria-describedby"]}connectedCallback(){super.connectedCallback(),this._bindRootEvents(),this._loadRecent(),!this._isPopoverMode()&&this._open&&(this._open=!1,this._syncOpenAttribute(!1))}disconnectedCallback(){this._cancelDragFrame(),this._stopDrag(!1),this._destroyOverlay(),this.root.removeEventListener("click",this._onRootClickBound),this.root.removeEventListener("input",this._onRootInputBound),this.root.removeEventListener("change",this._onRootChangeBound),this.root.removeEventListener("keydown",this._onRootKeyDownBound),this.root.removeEventListener("pointerdown",this._onRootPointerDownBound),this.root.removeEventListener("pointermove",this._onRootPointerMoveBound),this.root.removeEventListener("pointerup",this._onRootPointerUpBound),this.root.removeEventListener("pointercancel",this._onRootPointerCancelBound),super.disconnectedCallback()}attributeChangedCallback(t,e,r){if(e!==r){switch(t){case"value":this._syncing||this._applyValueAttribute(!0);break;case"format":this._applyFormatAttribute();break;case"presets":this._parsePresetsAttribute();break;case"open":this._syncing||(this._open=this.hasAttribute("open"));break;case"disabled":case"state":(this.hasAttribute("disabled")||this._isLoading())&&this._open&&this._setOpen(!1,"attribute");break;case"alpha":{this._alphaEnabled()||(this._rgba=h({...this._rgba,a:1}),this._hsva={...this._hsva,a:1},this._syncValueAttribute());break}}this.isConnected&&this.requestRender()}}get value(){return this.getAttribute("value")||this._serializeValue()}set value(t){this.setColor(t)}get format(){return this._format}set format(t){this.setAttribute("format",t)}get alpha(){return this._alphaEnabled()}set alpha(t){t?this.setAttribute("alpha",""):this.removeAttribute("alpha")}get open(){return this._open}set open(t){this._setOpen(t,"api")}setColor(t){const e=f(t||"");if(!e){this._setInvalid(t,"Invalid color format");return}this._error="",this._applyRgba(e,!1),this._syncValueAttribute(),this._updateUI(!1)}getColor(){const t=h(this._rgba);return{hex:w(t,this._alphaEnabled()),rgba:t,hsva:{...this._hsva}}}openPopover(){this._setOpen(!0,"api")}closePopover(){this._setOpen(!1,"api")}focus(){const t=this.root.querySelector(".trigger"),e=this.root.querySelector('[data-cp="sv"]');(t||e||this).focus()}render(){this._initialized||(this._initialized=!0,this.setContent(this._buildTemplate(),{force:!0})),!this._isPopoverMode()&&this._open&&(this._open=!1,this._syncOpenAttribute(!1)),this._isPopoverMode()&&this._open?(this._ensureOverlay(),this._renderOverlayTemplate(),this._scheduleOverlayPosition.run()):this._destroyOverlay(),this._updateUI(!1)}_bindRootEvents(){this.root.removeEventListener("click",this._onRootClickBound),this.root.removeEventListener("input",this._onRootInputBound),this.root.removeEventListener("change",this._onRootChangeBound),this.root.removeEventListener("keydown",this._onRootKeyDownBound),this.root.removeEventListener("pointerdown",this._onRootPointerDownBound),this.root.removeEventListener("pointermove",this._onRootPointerMoveBound),this.root.removeEventListener("pointerup",this._onRootPointerUpBound),this.root.removeEventListener("pointercancel",this._onRootPointerCancelBound),this.root.addEventListener("click",this._onRootClickBound),this.root.addEventListener("input",this._onRootInputBound),this.root.addEventListener("change",this._onRootChangeBound),this.root.addEventListener("keydown",this._onRootKeyDownBound),this.root.addEventListener("pointerdown",this._onRootPointerDownBound),this.root.addEventListener("pointermove",this._onRootPointerMoveBound),this.root.addEventListener("pointerup",this._onRootPointerUpBound),this.root.addEventListener("pointercancel",this._onRootPointerCancelBound)}_eventHTMLElement(t){const e=typeof t.composedPath=="function"?t.composedPath():[];for(const i of e)if(i instanceof HTMLElement)return i;const r=t.target;return r instanceof HTMLElement?r:null}_buildTemplate(){return`
|
|
690
690
|
<style>${$}</style>
|
|
691
691
|
<section class="root">
|
|
692
692
|
<div class="trigger-wrap" data-role="trigger-wrap">
|
|
@@ -794,10 +794,10 @@
|
|
|
794
794
|
${this._panelMarkup("overlay")}
|
|
795
795
|
</div>
|
|
796
796
|
</section>
|
|
797
|
-
`,t&&!this._isSheetOpen&&(this._isSheetOpen=!0,this._releaseScrollLock=x.lockBodyScroll()),!t&&this._isSheetOpen&&(this._isSheetOpen=!1,this._releaseScrollLock&&(this._releaseScrollLock(),this._releaseScrollLock=null)))}_isPopoverMode(){return(this.getAttribute("mode")||"inline")==="popover"}_state(){const t=(this.getAttribute("state")||"idle").trim().toLowerCase();return t==="loading"||t==="error"||t==="success"?t:"idle"}_tone(){const t=(this.getAttribute("tone")||"brand").trim().toLowerCase();return t==="neutral"||t==="success"||t==="warning"||t==="danger"?t:"brand"}_closeOnEscape(){return x.isTruthyAttr(this.getAttribute("close-on-escape"),!0)}_syncOverlayHostAttributes(){if(!this._overlay)return;const t=r=>{const i=this.getAttribute(r);i==null?this._overlay.removeAttribute(r):this._overlay.setAttribute(r,i)},e=r=>{this.hasAttribute(r)?this._overlay.setAttribute(r,""):this._overlay.removeAttribute(r)};t("size"),t("variant"),t("state"),t("tone"),t("close-on-escape"),t("aria-label"),t("aria-labelledby"),t("aria-describedby"),e("disabled"),e("readonly")}_isMobileSheet(){return x.shouldUseMobileSheet(this.getAttribute("mode")||"inline")}_alphaEnabled(){return x.isTruthyAttr(this.getAttribute("alpha"),!1)}_recentEnabled(){return x.isTruthyAttr(this.getAttribute("recent"),!0)}_persistRecent(){return x.isTruthyAttr(this.getAttribute("persist"),!1)}_isDisabled(){return this.hasAttribute("disabled")}_isReadonly(){return this.hasAttribute("readonly")}_isLoading(){return this._state()==="loading"}_maxRecent(){const t=Number(this.getAttribute("max-recent")||8);return!Number.isFinite(t)||t<1?8:Math.max(1,Math.min(24,Math.trunc(t)))}_labelText(){return this.getAttribute("aria-label")||"Color picker"}_placeholder(){return this.getAttribute("placeholder")||"Select color"}_applyFormatAttribute(){const t=(this.getAttribute("format")||"hex").trim().toLowerCase();if(t==="rgb"||t==="hsl"||t==="hex"){this._format=t;return}this._format="hex"}_applyValueAttribute(t){const e=this.getAttribute("value");if(!e){this._applyRgba(f(z)||this._rgba,!1);return}const r=f(e);if(!r){t&&this._setInvalid(e,"Unable to parse color value");return}this._error="",this._applyRgba(r,!1)}_parsePresetsAttribute(){const t=this.getAttribute("presets");if(!t){this._presets=["#2563eb","#16a34a","#f59e0b","#dc2626","#7c3aed","#0ea5e9"];return}try{const e=JSON.parse(t);if(!Array.isArray(e)){this._presets=[];return}const r=[];for(const i of e){if(typeof i!="string")continue;const a=f(i);if(!a)continue;const n=w(this._normalizeByAlpha(a),this._alphaEnabled());r.includes(n)||r.push(n)}this._presets=r}catch{this._presets=[]}}_loadRecent(){if(!this._recentEnabled()){this._recentColors=[];return}if(!(!this._persistRecent()||typeof localStorage>"u"))try{const t=localStorage.getItem(q);if(!t)return;const e=JSON.parse(t);if(!Array.isArray(e))return;this._recentColors=e.filter(r=>typeof r=="string").map(r=>f(r)).filter(r=>!!r).map(r=>w(this._normalizeByAlpha(r),this._alphaEnabled())).slice(0,this._maxRecent())}catch{this._recentColors=[]}}_persistRecentColors(){if(!(!this._persistRecent()||typeof localStorage>"u"))try{localStorage.setItem(q,JSON.stringify(this._recentColors))}catch{}}_normalizeByAlpha(t){return this._alphaEnabled()?h(t):h({...t,a:1})}_applyRgba(t,e){const r=this._normalizeByAlpha(t),i=T(r);e&&i.s===0&&(i.h=this._hsva.h),this._rgba=r,this._hsva={h:c(i.h,0,360),s:c(i.s,0,100),v:c(i.v,0,100),a:c(i.a,0,1)}}_serializeValue(t=this._format){return t==="rgb"?A(this._rgba,this._alphaEnabled()):t==="hsl"?tt(this._rgba,this._alphaEnabled()):w(this._rgba,this._alphaEnabled())}_currentHex(){return w(this._rgba,this._alphaEnabled())}_eventDetail(t){return{value:this._serializeValue(),hex:this._currentHex(),rgba:{...this._rgba},hsla:L(this._rgba),source:t}}_emitInput(t){this.dispatchEvent(new CustomEvent("input",{detail:this._eventDetail(t),bubbles:!0,composed:!0}))}_emitChange(t){this.dispatchEvent(new CustomEvent("change",{detail:this._eventDetail(t),bubbles:!0,composed:!0})),this._announce(this._serializeValue())}_setInvalid(t,e){this._error=e,this.dispatchEvent(new CustomEvent("invalid",{detail:{raw:t,reason:e},bubbles:!0,composed:!0})),this._updateUI(!1)}_announce(t){this._forEachPanel(e=>{e.live&&(e.live.textContent=`Color changed to ${t}`)})}_setOpen(t,e="api"){if(!this._isPopoverMode()||t&&(this._isDisabled()||this._isLoading())||this._open===t)return;const r=this._open;this._open=t,this._syncOpenAttribute(t);const i={open:t,previousOpen:r,source:e};if(t?(this._restoreFocusEl=typeof document<"u"?document.activeElement:null,this.dispatchEvent(new CustomEvent("open",{detail:i,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("ui-open",{detail:i,bubbles:!0,composed:!0}))):(this.dispatchEvent(new CustomEvent("close",{detail:i,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("ui-close",{detail:i,bubbles:!0,composed:!0}))),this.requestRender(),!t&&this._restoreFocusEl&&this._restoreFocusEl.isConnected){try{this._restoreFocusEl.focus()}catch{}this._restoreFocusEl=null}t&&queueMicrotask(()=>this._focusFirstOpenControl())}_focusFirstOpenControl(){if(!this._open)return;const t=this._getCurrentPanel(),e=t==null?void 0:t.querySelector('[data-cp="sv"]');if(e)try{e.focus()}catch{}}_syncValueAttribute(){const t=this._serializeValue();this._syncing=!0;try{this.getAttribute("value")!==t&&this.setAttribute("value",t)}finally{this._syncing=!1}}_syncOpenAttribute(t){this._syncing=!0;try{t?this.hasAttribute("open")||this.setAttribute("open",""):this.hasAttribute("open")&&this.removeAttribute("open")}finally{this._syncing=!1}}_ensureOverlay(){if(this._overlay||typeof document>"u")return;const t=document.createElement("div");t.style.position="fixed",t.style.inset="0",t.style.zIndex="var(--ui-cp-z, 1600)",t.style.pointerEvents="auto";const e=t.attachShadow({mode:"open"});t.addEventListener("click",r=>this._onPanelClick(r,"overlay")),t.addEventListener("input",r=>this._onPanelInput(r,"overlay")),t.addEventListener("change",r=>this._onPanelChange(r,"overlay")),t.addEventListener("keydown",r=>this._onPanelKeyDown(r,"overlay")),t.addEventListener("pointerdown",r=>this._onPanelPointerDown(r,"overlay")),t.addEventListener("pointermove",r=>this._onPanelPointerMove(r)),t.addEventListener("pointerup",r=>this._onPanelPointerUp(r)),t.addEventListener("pointercancel",r=>this._onPanelPointerCancel(r)),document.body.appendChild(t),this._overlay=t,this._overlayRoot=e,this._syncOverlayHostAttributes(),document.addEventListener("pointerdown",this._onDocumentPointerDownBound,!0),document.addEventListener("keydown",this._onDocumentKeyDownBound),window.addEventListener("resize",this._onWindowResizeBound),window.addEventListener("scroll",this._onWindowScrollBound,!0)}_destroyOverlay(){this._scheduleOverlayPosition.cancel(),typeof document<"u"&&(document.removeEventListener("pointerdown",this._onDocumentPointerDownBound,!0),document.removeEventListener("keydown",this._onDocumentKeyDownBound)),typeof window<"u"&&(window.removeEventListener("resize",this._onWindowResizeBound),window.removeEventListener("scroll",this._onWindowScrollBound,!0)),this._overlay&&this._overlay.parentElement&&this._overlay.parentElement.removeChild(this._overlay),this._overlay=null,this._overlayRoot=null,this._panelCache=new WeakMap,this._isSheetOpen&&(this._isSheetOpen=!1,this._releaseScrollLock&&(this._releaseScrollLock(),this._releaseScrollLock=null))}_positionOverlay(){if(!this._overlayRoot||!this._open||this._isMobileSheet())return;const t=this.root.querySelector(".trigger"),e=this._overlayRoot.querySelector(".popover-shell");if(!t||!e)return;const r=e.querySelector(".panel");if(!r)return;const i=x.computePopoverPosition(t.getBoundingClientRect(),r.getBoundingClientRect(),8,8);e.style.top=`${Math.round(i.top)}px`,e.style.left=`${Math.round(i.left)}px`}_onDocumentPointerDown(t){var i;if(!this._overlay||!this._open)return;const e=typeof t.composedPath=="function"?t.composedPath():[];if(e.includes(this))return;const r=(i=this._overlayRoot)==null?void 0:i.querySelector('[data-cp-panel="overlay"]');r&&e.includes(r)||this._setOpen(!1,"outside")}_onDocumentKeyDown(t){if(!(!this._open||!this._isPopoverMode())){if(t.key==="Tab"){this._trapOverlayFocus(t);return}t.key!=="Escape"||!this._closeOnEscape()||(t.preventDefault(),this._setOpen(!1,"escape"))}}_focusableInPanel(t){const e=t.querySelectorAll('button,[href],input,select,textarea,[tabindex]:not([tabindex="-1"]),[contenteditable="true"]');return Array.from(e).filter(r=>r.hasAttribute("disabled")||r.getAttribute("aria-hidden")==="true"||r.tabIndex<0?!1:r.getClientRects().length>0)}_trapOverlayFocus(t){var o;const e=(o=this._overlayRoot)==null?void 0:o.querySelector('[data-cp-panel="overlay"]');if(!e)return;const r=this._focusableInPanel(e);if(!r.length){t.preventDefault(),e.focus();return}const i=e.getRootNode(),a=i instanceof ShadowRoot?i.activeElement:e.ownerDocument.activeElement,n=a?r.indexOf(a):-1;if(t.shiftKey){n<=0&&(t.preventDefault(),r[r.length-1].focus());return}(n===-1||n===r.length-1)&&(t.preventDefault(),r[0].focus())}_forEachPanel(t){var i;const e=this.root.querySelector('[data-cp-panel="inline"]');e&&t(this._panelRefs(e));const r=(i=this._overlayRoot)==null?void 0:i.querySelector('[data-cp-panel="overlay"]');r&&t(this._panelRefs(r))}_panelRefs(t){const e=this._panelCache.get(t);if(e)return e;const r={panel:t,label:t.querySelector('[data-role="label"]'),valueText:t.querySelector('[data-role="value"]'),preview:t.querySelector('[data-role="preview"]'),status:t.querySelector('[data-role="status"]'),sv:t.querySelector('[data-cp="sv"]'),svThumb:t.querySelector('[data-role="sv-thumb"]'),hue:t.querySelector('[data-cp="hue"]'),hueThumb:t.querySelector('[data-role="hue-thumb"]'),alphaRow:t.querySelector('[data-role="alpha-row"]'),alpha:t.querySelector('[data-cp="alpha"]'),alphaThumb:t.querySelector('[data-role="alpha-thumb"]'),tabHex:t.querySelector('[data-format="hex"]'),tabRgb:t.querySelector('[data-format="rgb"]'),tabHsl:t.querySelector('[data-format="hsl"]'),groupHex:t.querySelector('[data-format-group="hex"]'),groupRgb:t.querySelector('[data-format-group="rgb"]'),groupHsl:t.querySelector('[data-format-group="hsl"]'),inputHex:t.querySelector('[data-input="hex"]'),inputR:t.querySelector('[data-input="r"]'),inputG:t.querySelector('[data-input="g"]'),inputB:t.querySelector('[data-input="b"]'),inputA1:t.querySelector('[data-input="a1"]'),inputH:t.querySelector('[data-input="h"]'),inputS:t.querySelector('[data-input="s"]'),inputL:t.querySelector('[data-input="l"]'),inputA2:t.querySelector('[data-input="a2"]'),copyHex:t.querySelector('[data-action="copy-hex"]'),copyRgb:t.querySelector('[data-action="copy-rgb"]'),eyedropper:t.querySelector('[data-action="eyedropper"]'),clear:t.querySelector('[data-action="clear"]'),apply:t.querySelector('[data-action="apply"]'),presets:t.querySelector('[data-role="presets"]'),recent:t.querySelector('[data-role="recent"]'),recentTitle:t.querySelector('[data-role="recent-title"]'),error:t.querySelector('[data-role="error"]'),live:t.querySelector('[data-role="live"]')};return this._panelCache.set(t,r),r}_getCurrentPanel(){return this._isPopoverMode()&&this._open&&this._overlayRoot?this._overlayRoot.querySelector('[data-cp-panel="overlay"]'):this.root.querySelector('[data-cp-panel="inline"]')}_updateUI(t,e=!1){const r=this.root.querySelector('[data-role="trigger-wrap"]'),i=this.root.querySelector(".trigger"),a=this.root.querySelector('[data-role="trigger-value"]'),n=this.root.querySelector('[data-role="trigger-preview"]'),o=this.root.querySelector('[data-role="inline-panel"]'),l=this._isPopoverMode(),u=this._state(),b=this._tone(),v=u==="loading",d=this._isDisabled(),_=this._isReadonly(),R=this._serializeValue()||this._placeholder();r&&(r.hidden=!l),i&&(i.disabled=d||v,i.dataset.state=u,i.dataset.tone=b,i.setAttribute("aria-expanded",l&&this._open?"true":"false"),this._applyAria(i)),a&&(a.textContent=R),n&&(n.style.background=A(this._rgba,!0)),o&&(o.hidden=l),this._forEachPanel(p=>this._updatePanel(p,{skipSwatches:t,disabled:d,readonly:_,loading:v,state:u,tone:b,modePopover:l,liveOnly:e}))}_updatePanel(t,e){const r=this._rgba,i=L(r),a=this._hsva,n=`hsl(${Math.round(a.h)} 100% 50%)`,o=t.panel.getAttribute("data-cp-panel")==="overlay",l=!!this._error||e.state==="error",u=e.disabled||e.readonly||e.loading;if(this._applyAria(t.panel),t.panel.dataset.state=l?"error":e.state,t.panel.dataset.tone=e.tone,t.panel.setAttribute("aria-busy",e.loading?"true":"false"),o&&e.modePopover?(t.panel.setAttribute("role","dialog"),t.panel.setAttribute("aria-modal","true"),t.panel.tabIndex=-1):(t.panel.removeAttribute("role"),t.panel.removeAttribute("aria-modal"),t.panel.removeAttribute("tabindex")),t.label&&(t.label.textContent=this._labelText()),t.valueText&&(t.valueText.textContent=this._serializeValue()),t.preview&&(t.preview.style.background=A(r,!0)),t.status){let p="";l?p="Error":e.state==="loading"?p="Syncing":e.state==="success"&&(p="Saved"),t.status.hidden=!p,t.status.textContent=p,t.status.dataset.tone=e.tone}if(t.sv&&(t.sv.style.background=`linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, ${n})`,t.sv.setAttribute("aria-valuetext",`Saturation ${Math.round(a.s)}%, Value ${Math.round(a.v)}%`),t.sv.setAttribute("aria-disabled",u?"true":"false"),t.sv.tabIndex=u?-1:0),t.svThumb){const p=c(a.s,1,99),S=c(100-a.v,1,99);t.svThumb.style.left=`${p}%`,t.svThumb.style.top=`${S}%`}t.hue&&(t.hue.setAttribute("aria-valuemin","0"),t.hue.setAttribute("aria-valuemax","360"),t.hue.setAttribute("aria-valuenow",String(Math.round(a.h))),t.hue.setAttribute("aria-disabled",u?"true":"false"),t.hue.tabIndex=u?-1:0),t.hueThumb&&(t.hueThumb.style.left=`${c(a.h/360*100,1,99)}%`),t.alphaRow&&(t.alphaRow.hidden=!this._alphaEnabled()),t.alpha&&(t.alpha.setAttribute("aria-valuemin","0"),t.alpha.setAttribute("aria-valuemax","100"),t.alpha.setAttribute("aria-valuenow",String(Math.round(a.a*100))),t.alpha.setAttribute("aria-disabled",u||!this._alphaEnabled()?"true":"false"),t.alpha.tabIndex=u?-1:0,t.alpha.style.backgroundImage=`
|
|
797
|
+
`,t&&!this._isSheetOpen&&(this._isSheetOpen=!0,this._releaseScrollLock=m.lockBodyScroll()),!t&&this._isSheetOpen&&(this._isSheetOpen=!1,this._releaseScrollLock&&(this._releaseScrollLock(),this._releaseScrollLock=null)))}_isPopoverMode(){return(this.getAttribute("mode")||"inline")==="popover"}_state(){const t=(this.getAttribute("state")||"idle").trim().toLowerCase();return t==="loading"||t==="error"||t==="success"?t:"idle"}_tone(){const t=(this.getAttribute("tone")||"brand").trim().toLowerCase();return t==="neutral"||t==="success"||t==="warning"||t==="danger"?t:"brand"}_closeOnEscape(){return m.isTruthyAttr(this.getAttribute("close-on-escape"),!0)}_syncOverlayHostAttributes(){if(!this._overlay)return;const t=r=>{const i=this.getAttribute(r);i==null?this._overlay.removeAttribute(r):this._overlay.setAttribute(r,i)},e=r=>{this.hasAttribute(r)?this._overlay.setAttribute(r,""):this._overlay.removeAttribute(r)};t("size"),t("variant"),t("state"),t("tone"),t("close-on-escape"),t("aria-label"),t("aria-labelledby"),t("aria-describedby"),e("disabled"),e("readonly")}_isMobileSheet(){return m.shouldUseMobileSheet(this.getAttribute("mode")||"inline")}_alphaEnabled(){return m.isTruthyAttr(this.getAttribute("alpha"),!1)}_recentEnabled(){return m.isTruthyAttr(this.getAttribute("recent"),!0)}_persistRecent(){return m.isTruthyAttr(this.getAttribute("persist"),!1)}_isDisabled(){return this.hasAttribute("disabled")}_isReadonly(){return this.hasAttribute("readonly")}_isLoading(){return this._state()==="loading"}_maxRecent(){const t=Number(this.getAttribute("max-recent")||8);return!Number.isFinite(t)||t<1?8:Math.max(1,Math.min(24,Math.trunc(t)))}_labelText(){return this.getAttribute("aria-label")||"Color picker"}_placeholder(){return this.getAttribute("placeholder")||"Select color"}_applyFormatAttribute(){const t=(this.getAttribute("format")||"hex").trim().toLowerCase();if(t==="rgb"||t==="hsl"||t==="hex"){this._format=t;return}this._format="hex"}_applyValueAttribute(t){const e=this.getAttribute("value");if(!e){this._applyRgba(f(z)||this._rgba,!1);return}const r=f(e);if(!r){t&&this._setInvalid(e,"Unable to parse color value");return}this._error="",this._applyRgba(r,!1)}_parsePresetsAttribute(){const t=this.getAttribute("presets");if(!t){this._presets=["#2563eb","#16a34a","#f59e0b","#dc2626","#7c3aed","#0ea5e9"];return}try{const e=JSON.parse(t);if(!Array.isArray(e)){this._presets=[];return}const r=[];for(const i of e){if(typeof i!="string")continue;const a=f(i);if(!a)continue;const n=w(this._normalizeByAlpha(a),this._alphaEnabled());r.includes(n)||r.push(n)}this._presets=r}catch{this._presets=[]}}_loadRecent(){if(!this._recentEnabled()){this._recentColors=[];return}if(!(!this._persistRecent()||typeof localStorage>"u"))try{const t=localStorage.getItem(q);if(!t)return;const e=JSON.parse(t);if(!Array.isArray(e))return;this._recentColors=e.filter(r=>typeof r=="string").map(r=>f(r)).filter(r=>!!r).map(r=>w(this._normalizeByAlpha(r),this._alphaEnabled())).slice(0,this._maxRecent())}catch{this._recentColors=[]}}_persistRecentColors(){if(!(!this._persistRecent()||typeof localStorage>"u"))try{localStorage.setItem(q,JSON.stringify(this._recentColors))}catch{}}_normalizeByAlpha(t){return this._alphaEnabled()?h(t):h({...t,a:1})}_applyRgba(t,e){const r=this._normalizeByAlpha(t),i=T(r);e&&i.s===0&&(i.h=this._hsva.h),this._rgba=r,this._hsva={h:c(i.h,0,360),s:c(i.s,0,100),v:c(i.v,0,100),a:c(i.a,0,1)}}_serializeValue(t=this._format){return t==="rgb"?A(this._rgba,this._alphaEnabled()):t==="hsl"?tt(this._rgba,this._alphaEnabled()):w(this._rgba,this._alphaEnabled())}_currentHex(){return w(this._rgba,this._alphaEnabled())}_eventDetail(t){return{value:this._serializeValue(),hex:this._currentHex(),rgba:{...this._rgba},hsla:L(this._rgba),source:t}}_emitInput(t){this.dispatchEvent(new CustomEvent("input",{detail:this._eventDetail(t),bubbles:!0,composed:!0}))}_emitChange(t){this.dispatchEvent(new CustomEvent("change",{detail:this._eventDetail(t),bubbles:!0,composed:!0})),this._announce(this._serializeValue())}_setInvalid(t,e){this._error=e,this.dispatchEvent(new CustomEvent("invalid",{detail:{raw:t,reason:e},bubbles:!0,composed:!0})),this._updateUI(!1)}_announce(t){this._forEachPanel(e=>{e.live&&(e.live.textContent=`Color changed to ${t}`)})}_setOpen(t,e="api"){if(!this._isPopoverMode()||t&&(this._isDisabled()||this._isLoading())||this._open===t)return;const r=this._open;this._open=t,this._syncOpenAttribute(t);const i={open:t,previousOpen:r,source:e};if(t?(this._restoreFocusEl=typeof document<"u"?document.activeElement:null,this.dispatchEvent(new CustomEvent("open",{detail:i,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("ui-open",{detail:i,bubbles:!0,composed:!0}))):(this.dispatchEvent(new CustomEvent("close",{detail:i,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("ui-close",{detail:i,bubbles:!0,composed:!0}))),this.requestRender(),!t&&this._restoreFocusEl&&this._restoreFocusEl.isConnected){try{this._restoreFocusEl.focus()}catch{}this._restoreFocusEl=null}t&&queueMicrotask(()=>this._focusFirstOpenControl())}_focusFirstOpenControl(){if(!this._open)return;const t=this._getCurrentPanel(),e=t==null?void 0:t.querySelector('[data-cp="sv"]');if(e)try{e.focus()}catch{}}_syncValueAttribute(){const t=this._serializeValue();this._syncing=!0;try{this.getAttribute("value")!==t&&this.setAttribute("value",t)}finally{this._syncing=!1}}_syncOpenAttribute(t){this._syncing=!0;try{t?this.hasAttribute("open")||this.setAttribute("open",""):this.hasAttribute("open")&&this.removeAttribute("open")}finally{this._syncing=!1}}_ensureOverlay(){if(this._overlay||typeof document>"u")return;const t=document.createElement("div");t.style.position="fixed",t.style.inset="0",t.style.zIndex="var(--ui-cp-z, 1600)",t.style.pointerEvents="auto";const e=t.attachShadow({mode:"open"});t.addEventListener("click",r=>this._onPanelClick(r,"overlay")),t.addEventListener("input",r=>this._onPanelInput(r,"overlay")),t.addEventListener("change",r=>this._onPanelChange(r,"overlay")),t.addEventListener("keydown",r=>this._onPanelKeyDown(r,"overlay")),t.addEventListener("pointerdown",r=>this._onPanelPointerDown(r,"overlay")),t.addEventListener("pointermove",r=>this._onPanelPointerMove(r)),t.addEventListener("pointerup",r=>this._onPanelPointerUp(r)),t.addEventListener("pointercancel",r=>this._onPanelPointerCancel(r)),document.body.appendChild(t),this._overlay=t,this._overlayRoot=e,this._syncOverlayHostAttributes(),document.addEventListener("pointerdown",this._onDocumentPointerDownBound,!0),document.addEventListener("keydown",this._onDocumentKeyDownBound),window.addEventListener("resize",this._onWindowResizeBound),window.addEventListener("scroll",this._onWindowScrollBound,{passive:!0,capture:!0})}_destroyOverlay(){this._scheduleOverlayPosition.cancel(),typeof document<"u"&&(document.removeEventListener("pointerdown",this._onDocumentPointerDownBound,!0),document.removeEventListener("keydown",this._onDocumentKeyDownBound)),typeof window<"u"&&(window.removeEventListener("resize",this._onWindowResizeBound),window.removeEventListener("scroll",this._onWindowScrollBound,!0)),this._overlay&&this._overlay.parentElement&&this._overlay.parentElement.removeChild(this._overlay),this._overlay=null,this._overlayRoot=null,this._panelCache=new WeakMap,this._isSheetOpen&&(this._isSheetOpen=!1,this._releaseScrollLock&&(this._releaseScrollLock(),this._releaseScrollLock=null))}_positionOverlay(){if(!this._overlayRoot||!this._open||this._isMobileSheet())return;const t=this.root.querySelector(".trigger"),e=this._overlayRoot.querySelector(".popover-shell");if(!t||!e)return;const r=e.querySelector(".panel");if(!r)return;const i=e.getAttribute("data-placement"),a=m.computePopoverPosition(t.getBoundingClientRect(),r.getBoundingClientRect(),8,8,i==="top"?"top":i==="bottom"?"bottom":null);e.style.top=`${Math.round(a.top)}px`,e.style.left=`${Math.round(a.left)}px`,e.setAttribute("data-placement",a.placement)}_onDocumentPointerDown(t){var i;if(!this._overlay||!this._open)return;const e=typeof t.composedPath=="function"?t.composedPath():[];if(e.includes(this))return;const r=(i=this._overlayRoot)==null?void 0:i.querySelector('[data-cp-panel="overlay"]');r&&e.includes(r)||this._setOpen(!1,"outside")}_onDocumentKeyDown(t){if(!(!this._open||!this._isPopoverMode())){if(t.key==="Tab"){this._trapOverlayFocus(t);return}t.key!=="Escape"||!this._closeOnEscape()||(t.preventDefault(),this._setOpen(!1,"escape"))}}_focusableInPanel(t){const e=t.querySelectorAll('button,[href],input,select,textarea,[tabindex]:not([tabindex="-1"]),[contenteditable="true"]');return Array.from(e).filter(r=>r.hasAttribute("disabled")||r.getAttribute("aria-hidden")==="true"||r.tabIndex<0?!1:r.getClientRects().length>0)}_trapOverlayFocus(t){var o;const e=(o=this._overlayRoot)==null?void 0:o.querySelector('[data-cp-panel="overlay"]');if(!e)return;const r=this._focusableInPanel(e);if(!r.length){t.preventDefault(),e.focus();return}const i=e.getRootNode(),a=i instanceof ShadowRoot?i.activeElement:e.ownerDocument.activeElement,n=a?r.indexOf(a):-1;if(t.shiftKey){n<=0&&(t.preventDefault(),r[r.length-1].focus());return}(n===-1||n===r.length-1)&&(t.preventDefault(),r[0].focus())}_forEachPanel(t){var i;const e=this.root.querySelector('[data-cp-panel="inline"]');e&&t(this._panelRefs(e));const r=(i=this._overlayRoot)==null?void 0:i.querySelector('[data-cp-panel="overlay"]');r&&t(this._panelRefs(r))}_panelRefs(t){const e=this._panelCache.get(t);if(e)return e;const r={panel:t,label:t.querySelector('[data-role="label"]'),valueText:t.querySelector('[data-role="value"]'),preview:t.querySelector('[data-role="preview"]'),status:t.querySelector('[data-role="status"]'),sv:t.querySelector('[data-cp="sv"]'),svThumb:t.querySelector('[data-role="sv-thumb"]'),hue:t.querySelector('[data-cp="hue"]'),hueThumb:t.querySelector('[data-role="hue-thumb"]'),alphaRow:t.querySelector('[data-role="alpha-row"]'),alpha:t.querySelector('[data-cp="alpha"]'),alphaThumb:t.querySelector('[data-role="alpha-thumb"]'),tabHex:t.querySelector('[data-format="hex"]'),tabRgb:t.querySelector('[data-format="rgb"]'),tabHsl:t.querySelector('[data-format="hsl"]'),groupHex:t.querySelector('[data-format-group="hex"]'),groupRgb:t.querySelector('[data-format-group="rgb"]'),groupHsl:t.querySelector('[data-format-group="hsl"]'),inputHex:t.querySelector('[data-input="hex"]'),inputR:t.querySelector('[data-input="r"]'),inputG:t.querySelector('[data-input="g"]'),inputB:t.querySelector('[data-input="b"]'),inputA1:t.querySelector('[data-input="a1"]'),inputH:t.querySelector('[data-input="h"]'),inputS:t.querySelector('[data-input="s"]'),inputL:t.querySelector('[data-input="l"]'),inputA2:t.querySelector('[data-input="a2"]'),copyHex:t.querySelector('[data-action="copy-hex"]'),copyRgb:t.querySelector('[data-action="copy-rgb"]'),eyedropper:t.querySelector('[data-action="eyedropper"]'),clear:t.querySelector('[data-action="clear"]'),apply:t.querySelector('[data-action="apply"]'),presets:t.querySelector('[data-role="presets"]'),recent:t.querySelector('[data-role="recent"]'),recentTitle:t.querySelector('[data-role="recent-title"]'),error:t.querySelector('[data-role="error"]'),live:t.querySelector('[data-role="live"]')};return this._panelCache.set(t,r),r}_getCurrentPanel(){return this._isPopoverMode()&&this._open&&this._overlayRoot?this._overlayRoot.querySelector('[data-cp-panel="overlay"]'):this.root.querySelector('[data-cp-panel="inline"]')}_updateUI(t,e=!1){const r=this.root.querySelector('[data-role="trigger-wrap"]'),i=this.root.querySelector(".trigger"),a=this.root.querySelector('[data-role="trigger-value"]'),n=this.root.querySelector('[data-role="trigger-preview"]'),o=this.root.querySelector('[data-role="inline-panel"]'),l=this._isPopoverMode(),u=this._state(),b=this._tone(),v=u==="loading",d=this._isDisabled(),_=this._isReadonly(),R=this._serializeValue()||this._placeholder();r&&(r.hidden=!l),i&&(i.disabled=d||v,i.dataset.state=u,i.dataset.tone=b,i.setAttribute("aria-expanded",l&&this._open?"true":"false"),this._applyAria(i)),a&&(a.textContent=R),n&&(n.style.background=A(this._rgba,!0)),o&&(o.hidden=l),this._forEachPanel(p=>this._updatePanel(p,{skipSwatches:t,disabled:d,readonly:_,loading:v,state:u,tone:b,modePopover:l,liveOnly:e}))}_updatePanel(t,e){const r=this._rgba,i=L(r),a=this._hsva,n=`hsl(${Math.round(a.h)} 100% 50%)`,o=t.panel.getAttribute("data-cp-panel")==="overlay",l=!!this._error||e.state==="error",u=e.disabled||e.readonly||e.loading;if(this._applyAria(t.panel),t.panel.dataset.state=l?"error":e.state,t.panel.dataset.tone=e.tone,t.panel.setAttribute("aria-busy",e.loading?"true":"false"),o&&e.modePopover?(t.panel.setAttribute("role","dialog"),t.panel.setAttribute("aria-modal","true"),t.panel.tabIndex=-1):(t.panel.removeAttribute("role"),t.panel.removeAttribute("aria-modal"),t.panel.removeAttribute("tabindex")),t.label&&(t.label.textContent=this._labelText()),t.valueText&&(t.valueText.textContent=this._serializeValue()),t.preview&&(t.preview.style.background=A(r,!0)),t.status){let p="";l?p="Error":e.state==="loading"?p="Syncing":e.state==="success"&&(p="Saved"),t.status.hidden=!p,t.status.textContent=p,t.status.dataset.tone=e.tone}if(t.sv&&(t.sv.style.background=`linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, ${n})`,t.sv.setAttribute("aria-valuetext",`Saturation ${Math.round(a.s)}%, Value ${Math.round(a.v)}%`),t.sv.setAttribute("aria-disabled",u?"true":"false"),t.sv.tabIndex=u?-1:0),t.svThumb){const p=c(a.s,1,99),S=c(100-a.v,1,99);t.svThumb.style.left=`${p}%`,t.svThumb.style.top=`${S}%`}t.hue&&(t.hue.setAttribute("aria-valuemin","0"),t.hue.setAttribute("aria-valuemax","360"),t.hue.setAttribute("aria-valuenow",String(Math.round(a.h))),t.hue.setAttribute("aria-disabled",u?"true":"false"),t.hue.tabIndex=u?-1:0),t.hueThumb&&(t.hueThumb.style.left=`${c(a.h/360*100,1,99)}%`),t.alphaRow&&(t.alphaRow.hidden=!this._alphaEnabled()),t.alpha&&(t.alpha.setAttribute("aria-valuemin","0"),t.alpha.setAttribute("aria-valuemax","100"),t.alpha.setAttribute("aria-valuenow",String(Math.round(a.a*100))),t.alpha.setAttribute("aria-disabled",u||!this._alphaEnabled()?"true":"false"),t.alpha.tabIndex=u?-1:0,t.alpha.style.backgroundImage=`
|
|
798
798
|
linear-gradient(45deg, var(--ui-cp-checker-a) 25%, transparent 25%),
|
|
799
799
|
linear-gradient(-45deg, var(--ui-cp-checker-a) 25%, transparent 25%),
|
|
800
800
|
linear-gradient(45deg, transparent 75%, var(--ui-cp-checker-a) 75%),
|
|
801
801
|
linear-gradient(-45deg, transparent 75%, var(--ui-cp-checker-a) 75%),
|
|
802
802
|
linear-gradient(to right, rgba(${r.r}, ${r.g}, ${r.b}, 0), rgba(${r.r}, ${r.g}, ${r.b}, 1))
|
|
803
|
-
`),t.alphaThumb&&(t.alphaThumb.style.left=`${c(a.a*100,1,99)}%`);const b=t.panel.getRootNode(),v=b instanceof ShadowRoot?b.activeElement:t.panel.ownerDocument.activeElement,d=v&&t.panel.contains(v)?v.getAttribute("data-input"):null;if(t.inputHex&&d!=="hex"&&(t.inputHex.value=w(r,this._alphaEnabled())),t.inputR&&d!=="r"&&(t.inputR.value=String(r.r)),t.inputG&&d!=="g"&&(t.inputG.value=String(r.g)),t.inputB&&d!=="b"&&(t.inputB.value=String(r.b)),t.inputA1&&d!=="a1"&&(t.inputA1.value=this._alphaEnabled()?String(Number(r.a.toFixed(3))):"1"),t.inputH&&d!=="h"&&(t.inputH.value=String(Math.round(i.h))),t.inputS&&d!=="s"&&(t.inputS.value=String(Math.round(i.s))),t.inputL&&d!=="l"&&(t.inputL.value=String(Math.round(i.l))),t.inputA2&&d!=="a2"&&(t.inputA2.value=this._alphaEnabled()?String(Number(r.a.toFixed(3))):"1"),e.liveOnly)return;if(t.tabHex&&(t.tabHex.dataset.active=String(this._format==="hex")),t.tabRgb&&(t.tabRgb.dataset.active=String(this._format==="rgb")),t.tabHsl&&(t.tabHsl.dataset.active=String(this._format==="hsl")),t.groupHex&&(t.groupHex.hidden=this._format!=="hex"),t.groupRgb&&(t.groupRgb.hidden=this._format!=="rgb"),t.groupHsl&&(t.groupHsl.hidden=this._format!=="hsl"),t.inputA1&&(t.inputA1.disabled=!this._alphaEnabled()||u),t.inputA2&&(t.inputA2.disabled=!this._alphaEnabled()||u),t.error){const p=this._error||(e.state==="error"?"Unable to validate current color value.":"");t.error.hidden=!p,t.error.textContent=p}const _=u;if(t.copyHex&&(t.copyHex.disabled=e.disabled||e.loading),t.copyRgb&&(t.copyRgb.disabled=e.disabled||e.loading),t.eyedropper){const p=typeof window<"u"&&typeof window.EyeDropper=="function";t.eyedropper.hidden=!p,t.eyedropper.disabled=_||!p}if(t.clear&&(t.clear.disabled=_),t.apply&&(t.apply.hidden=!e.modePopover,t.apply.disabled=_),t.panel.querySelectorAll(".input").forEach(p=>{const S=p;S.disabled=_}),!e.skipSwatches&&!this._renderingSwatches){this._renderingSwatches=!0;try{this._renderSwatches(t)}finally{this._renderingSwatches=!1}}}_renderSwatches(t){const e=this._currentHex().toLowerCase();t.presets&&(t.presets.innerHTML=this._presets.map(r=>{const i=f(r);if(!i)return"";const a=w(this._normalizeByAlpha(i),this._alphaEnabled()),n=a.toLowerCase()===e?' data-selected="true"':"";return`<button type="button" class="swatch" part="swatch" data-action="preset" data-color="${E(a)}"${n} title="${E(a)}" style="background:${E(A(i,!0))}"></button>`}).join("")),t.recentTitle&&(t.recentTitle.hidden=!this._recentEnabled()||this._recentColors.length===0),t.recent&&(t.recent.hidden=!this._recentEnabled()||this._recentColors.length===0,t.recent.innerHTML=this._recentColors.map(r=>{const i=f(r);if(!i)return"";const a=w(this._normalizeByAlpha(i),this._alphaEnabled()),n=a.toLowerCase()===e?' data-selected="true"':"";return`<button type="button" class="swatch" part="swatch recent" data-action="recent" data-color="${E(a)}"${n} title="${E(a)}" style="background:${E(A(i,!0))}"></button>`}).join(""))}_onPanelClick(t,e){const r=this._eventHTMLElement(t);if(!r)return;const i=r.closest("[data-action]");if(!i||this._isDisabled())return;const a=i.getAttribute("data-action");if(a==="close-popover"){this._setOpen(!1,"outside");return}if(a==="toggle-popover"){if(!this._isPopoverMode())return;this._setOpen(!this._open,"toggle");return}if(!this._isLoading()){if(a==="format"){const n=i.getAttribute("data-format");if(!n)return;this.setAttribute("format",n),this._error="",this._updateUI(!1);return}if(a==="copy-hex"){this._copyToClipboard(this._currentHex());return}if(a==="copy-rgb"){this._copyToClipboard(A(this._rgba,this._alphaEnabled()));return}if(a==="eyedropper"){this._openEyeDropper();return}if(a==="clear"){if(this._isReadonly())return;const n=f(z);n&&(this._applyRgba(n,!1),this._error="",this._syncValueAttribute(),this._emitInput("text"),this._emitChange("text"),this._pushRecent(this._currentHex()),this._updateUI(!1));return}if(a==="apply"){this._setOpen(!1,"apply");return}if(a==="preset"||a==="recent"){if(this._isReadonly())return;const n=i.getAttribute("data-color")||"",o=f(n);if(!o)return;const l=a==="preset"?"preset":"recent";this._applyRgba(o,!0),this._error="",this._syncValueAttribute(),this._emitInput(l),this._emitChange(l),this._pushRecent(this._currentHex()),this._updateUI(!1);return}}}_onPanelInput(t,e){const r=this._eventHTMLElement(t);if(!(r instanceof HTMLInputElement)||!r.hasAttribute("data-input")||(t.stopPropagation(),this._isDisabled()||this._isReadonly()||this._isLoading()))return;const i=this._parseInputsFromPanel(r.closest("[data-cp-panel]"));if(!i){this._error="";return}this._error="",this._applyRgba(i,!0),this._emitInput("text"),this._updateUI(!0,!0)}_onPanelChange(t,e){const r=this._eventHTMLElement(t);if(!(r instanceof HTMLInputElement)||!r.hasAttribute("data-input")||(t.stopPropagation(),this._isDisabled()||this._isReadonly()||this._isLoading()))return;const i=r.closest("[data-cp-panel]"),a=this._parseInputsFromPanel(i);if(!a){const n=r.value||"";this._setInvalid(n,"Invalid input values");return}this._error="",this._applyRgba(a,!0),this._syncValueAttribute(),this._emitInput("text"),this._emitChange("text"),this._pushRecent(this._currentHex()),this._updateUI(!1)}_onPanelKeyDown(t,e){const r=this._eventHTMLElement(t);if(!r||this._isDisabled()||this._isLoading())return;if(r instanceof HTMLInputElement&&r.hasAttribute("data-input")&&t.key==="Enter"){t.preventDefault();const l=this._parseInputsFromPanel(r.closest("[data-cp-panel]"));if(!l){this._setInvalid(r.value||"","Invalid input values");return}this._error="",this._applyRgba(l,!0),this._syncValueAttribute(),this._emitInput("text"),this._emitChange("text"),this._pushRecent(this._currentHex()),this._updateUI(!1);return}const i=r.getAttribute("data-cp");if(!i||this._isReadonly()||this._isLoading())return;const a=t.shiftKey?5:1;let n=!1;const o={...this._hsva};if(i==="sv"){t.key==="ArrowLeft"?(o.s=c(o.s-a,0,100),n=!0):t.key==="ArrowRight"?(o.s=c(o.s+a,0,100),n=!0):t.key==="ArrowUp"?(o.v=c(o.v+a,0,100),n=!0):t.key==="ArrowDown"?(o.v=c(o.v-a,0,100),n=!0):t.key==="Home"?(o.s=0,o.v=100,n=!0):t.key==="End"&&(o.s=100,o.v=0,n=!0),n&&(t.preventDefault(),this._commitHsva(o,"drag"));return}if(i==="hue"){t.key==="ArrowLeft"||t.key==="ArrowDown"?(o.h=c(o.h-a,0,360),n=!0):t.key==="ArrowRight"||t.key==="ArrowUp"?(o.h=c(o.h+a,0,360),n=!0):t.key==="Home"?(o.h=0,n=!0):t.key==="End"&&(o.h=360,n=!0),n&&(t.preventDefault(),this._commitHsva(o,"slider"));return}if(i==="alpha"&&this._alphaEnabled()){const l=t.shiftKey?.1:.01;t.key==="ArrowLeft"||t.key==="ArrowDown"?(o.a=c(o.a-l,0,1),n=!0):t.key==="ArrowRight"||t.key==="ArrowUp"?(o.a=c(o.a+l,0,1),n=!0):t.key==="Home"?(o.a=0,n=!0):t.key==="End"&&(o.a=1,n=!0),n&&(t.preventDefault(),this._commitHsva(o,"slider"))}}_commitHsva(t,e){this._setHsva(t),this._syncValueAttribute(),this._emitInput(e),this._emitChange(e),this._pushRecent(this._currentHex()),this._updateUI(!1)}_parseInputsFromPanel(t){var l,u,b,v,d,_,R,p,S;if(!t)return null;const e=this._panelRefs(t);if(this._format==="hex"){const y=((l=e.inputHex)==null?void 0:l.value)||"",I=y.trim().startsWith("#")?y.trim():`#${y.trim()}`,P=f(I);return P?this._normalizeByAlpha(P):null}if(this._format==="rgb"){const y=Number(((u=e.inputR)==null?void 0:u.value)??""),I=Number(((b=e.inputG)==null?void 0:b.value)??""),P=Number(((v=e.inputB)==null?void 0:v.value)??""),D=this._alphaEnabled()?Number(((d=e.inputA1)==null?void 0:d.value)??""):1;return[y,I,P,D].every(V=>Number.isFinite(V))?this._normalizeByAlpha({r:y,g:I,b:P,a:D}):null}const r=Number(((_=e.inputH)==null?void 0:_.value)??""),i=Number(((R=e.inputS)==null?void 0:R.value)??""),a=Number(((p=e.inputL)==null?void 0:p.value)??""),n=this._alphaEnabled()?Number(((S=e.inputA2)==null?void 0:S.value)??""):1;if(![r,i,a,n].every(y=>Number.isFinite(y)))return null;const o={h:c(r,0,360),s:c(i,0,100),l:c(a,0,100),a:c(n,0,1)};return this._normalizeByAlpha(U(o))}_onPanelPointerDown(t,e){var n;if(this._isDisabled()||this._isReadonly()||this._isLoading())return;const r=this._eventHTMLElement(t);if(!r)return;const i=(n=r.closest("[data-cp]"))==null?void 0:n.getAttribute("data-cp");if(!i||i==="alpha"&&!this._alphaEnabled())return;const a=r.closest(`[data-cp="${i}"]`);if(a){t.preventDefault(),this._dragTarget=i,this._dragPointerId=t.pointerId,this._dragRect=a.getBoundingClientRect(),this._dragX=t.clientX,this._dragY=t.clientY,this._dragChanged=!1,this._dragSource=i==="sv"?"drag":"slider";try{a.setPointerCapture(t.pointerId)}catch{}this._applyDragPointer(!0)}}_onPanelPointerMove(t){!this._dragTarget||t.pointerId!==this._dragPointerId||(this._dragX=t.clientX,this._dragY=t.clientY,!this._dragRaf&&(this._dragRaf=requestAnimationFrame(()=>{this._dragRaf=0,this._applyDragPointer(!0)})))}_onPanelPointerUp(t){!this._dragTarget||t.pointerId!==this._dragPointerId||(this._dragX=t.clientX,this._dragY=t.clientY,this._applyDragPointer(!0),this._stopDrag(!0))}_onPanelPointerCancel(t){!this._dragTarget||t.pointerId!==this._dragPointerId||this._stopDrag(!1)}_cancelDragFrame(){this._dragRaf&&(cancelAnimationFrame(this._dragRaf),this._dragRaf=0)}_applyDragPointer(t){if(!this._dragTarget||!this._dragRect)return;const e=this._dragRect,r=c(this._dragX-e.left,0,e.width||1),i=c(this._dragY-e.top,0,e.height||1),a={...this._hsva};this._dragTarget==="sv"?(a.s=c(r/Math.max(e.width,1)*100,0,100),a.v=c(100-i/Math.max(e.height,1)*100,0,100)):this._dragTarget==="hue"?a.h=c(r/Math.max(e.width,1)*360,0,360):this._dragTarget==="alpha"&&(a.a=c(r/Math.max(e.width,1),0,1)),this._setHsva(a)&&(this._dragChanged=!0,t&&this._emitInput(this._dragSource),this._updateUI(!0,!0))}_setHsva(t){const e={h:c(t.h,0,360),s:c(t.s,0,100),v:c(t.v,0,100),a:this._alphaEnabled()?c(t.a,0,1):1},r=this._hsva;return M(r.h,e.h)&&M(r.s,e.s)&&M(r.v,e.v)&&M(r.a,e.a)?!1:(this._hsva=e,this._rgba=this._normalizeByAlpha(Z(this._hsva)),this._error="",!0)}_stopDrag(t){this._cancelDragFrame();const e=t&&this._dragChanged;this._dragTarget=null,this._dragPointerId=-1,this._dragRect=null,this._dragChanged=!1,e&&(this._syncValueAttribute(),this._emitChange(this._dragSource),this._pushRecent(this._currentHex()),this._updateUI(!1))}_pushRecent(t){if(!this._recentEnabled())return;const e=(t||"").trim().toUpperCase();e&&(this._recentColors=[e,...this._recentColors.filter(r=>r.toUpperCase()!==e)].slice(0,this._maxRecent()),this._persistRecentColors())}async _openEyeDropper(){if(this._isDisabled()||this._isReadonly()||this._isLoading()||typeof window>"u")return;const t=window.EyeDropper;if(typeof t=="function")try{const r=await new t().open(),i=f((r==null?void 0:r.sRGBHex)||"");if(!i)return;this._applyRgba(i,!0),this._error="",this._syncValueAttribute(),this._emitInput("eyedropper"),this._emitChange("eyedropper"),this._pushRecent(this._currentHex()),this._updateUI(!1)}catch{}}async _copyToClipboard(t){var a;if(!t||this._isDisabled())return;let e=!1;if(typeof navigator<"u"&&((a=navigator.clipboard)!=null&&a.writeText))try{await navigator.clipboard.writeText(t),e=!0}catch{e=!1}if(!e&&typeof document<"u"){const n=document.createElement("textarea");n.value=t,n.setAttribute("readonly",""),n.style.position="fixed",n.style.opacity="0",document.body.appendChild(n),n.select();try{e=document.execCommand("copy")}catch{e=!1}finally{n.parentElement&&n.parentElement.removeChild(n)}}const r=e?`Copied ${t}`:`Unable to copy ${t}`,i=typeof window<"u"?window.showToast:null;if(typeof i=="function")try{i(r)}catch{this.dispatchEvent(new CustomEvent("toast",{detail:{message:r},bubbles:!0,composed:!0}))}else this.dispatchEvent(new CustomEvent("toast",{detail:{message:r},bubbles:!0,composed:!0}))}_applyAria(t){const e=this.getAttribute("aria-labelledby"),r=this.getAttribute("aria-describedby"),i=this.getAttribute("aria-label");e?t.setAttribute("aria-labelledby",e):t.removeAttribute("aria-labelledby"),r?t.setAttribute("aria-describedby",r):t.removeAttribute("aria-describedby"),i?t.setAttribute("aria-label",i):e||t.setAttribute("aria-label","Color picker")}}customElements.get("ui-color-picker")||customElements.define("ui-color-picker",N);exports.UIColorPicker=N;
|
|
803
|
+
`),t.alphaThumb&&(t.alphaThumb.style.left=`${c(a.a*100,1,99)}%`);const b=t.panel.getRootNode(),v=b instanceof ShadowRoot?b.activeElement:t.panel.ownerDocument.activeElement,d=v&&t.panel.contains(v)?v.getAttribute("data-input"):null;if(t.inputHex&&d!=="hex"&&(t.inputHex.value=w(r,this._alphaEnabled())),t.inputR&&d!=="r"&&(t.inputR.value=String(r.r)),t.inputG&&d!=="g"&&(t.inputG.value=String(r.g)),t.inputB&&d!=="b"&&(t.inputB.value=String(r.b)),t.inputA1&&d!=="a1"&&(t.inputA1.value=this._alphaEnabled()?String(Number(r.a.toFixed(3))):"1"),t.inputH&&d!=="h"&&(t.inputH.value=String(Math.round(i.h))),t.inputS&&d!=="s"&&(t.inputS.value=String(Math.round(i.s))),t.inputL&&d!=="l"&&(t.inputL.value=String(Math.round(i.l))),t.inputA2&&d!=="a2"&&(t.inputA2.value=this._alphaEnabled()?String(Number(r.a.toFixed(3))):"1"),e.liveOnly)return;if(t.tabHex&&(t.tabHex.dataset.active=String(this._format==="hex")),t.tabRgb&&(t.tabRgb.dataset.active=String(this._format==="rgb")),t.tabHsl&&(t.tabHsl.dataset.active=String(this._format==="hsl")),t.groupHex&&(t.groupHex.hidden=this._format!=="hex"),t.groupRgb&&(t.groupRgb.hidden=this._format!=="rgb"),t.groupHsl&&(t.groupHsl.hidden=this._format!=="hsl"),t.inputA1&&(t.inputA1.disabled=!this._alphaEnabled()||u),t.inputA2&&(t.inputA2.disabled=!this._alphaEnabled()||u),t.error){const p=this._error||(e.state==="error"?"Unable to validate current color value.":"");t.error.hidden=!p,t.error.textContent=p}const _=u;if(t.copyHex&&(t.copyHex.disabled=e.disabled||e.loading),t.copyRgb&&(t.copyRgb.disabled=e.disabled||e.loading),t.eyedropper){const p=typeof window<"u"&&typeof window.EyeDropper=="function";t.eyedropper.hidden=!p,t.eyedropper.disabled=_||!p}if(t.clear&&(t.clear.disabled=_),t.apply&&(t.apply.hidden=!e.modePopover,t.apply.disabled=_),t.panel.querySelectorAll(".input").forEach(p=>{const S=p;S.disabled=_}),!e.skipSwatches&&!this._renderingSwatches){this._renderingSwatches=!0;try{this._renderSwatches(t)}finally{this._renderingSwatches=!1}}}_renderSwatches(t){const e=this._currentHex().toLowerCase();t.presets&&(t.presets.innerHTML=this._presets.map(r=>{const i=f(r);if(!i)return"";const a=w(this._normalizeByAlpha(i),this._alphaEnabled()),n=a.toLowerCase()===e?' data-selected="true"':"";return`<button type="button" class="swatch" part="swatch" data-action="preset" data-color="${E(a)}"${n} title="${E(a)}" style="background:${E(A(i,!0))}"></button>`}).join("")),t.recentTitle&&(t.recentTitle.hidden=!this._recentEnabled()||this._recentColors.length===0),t.recent&&(t.recent.hidden=!this._recentEnabled()||this._recentColors.length===0,t.recent.innerHTML=this._recentColors.map(r=>{const i=f(r);if(!i)return"";const a=w(this._normalizeByAlpha(i),this._alphaEnabled()),n=a.toLowerCase()===e?' data-selected="true"':"";return`<button type="button" class="swatch" part="swatch recent" data-action="recent" data-color="${E(a)}"${n} title="${E(a)}" style="background:${E(A(i,!0))}"></button>`}).join(""))}_onPanelClick(t,e){const r=this._eventHTMLElement(t);if(!r)return;const i=r.closest("[data-action]");if(!i||this._isDisabled())return;const a=i.getAttribute("data-action");if(a==="close-popover"){this._setOpen(!1,"outside");return}if(a==="toggle-popover"){if(!this._isPopoverMode())return;this._setOpen(!this._open,"toggle");return}if(!this._isLoading()){if(a==="format"){const n=i.getAttribute("data-format");if(!n)return;this.setAttribute("format",n),this._error="",this._updateUI(!1);return}if(a==="copy-hex"){this._copyToClipboard(this._currentHex());return}if(a==="copy-rgb"){this._copyToClipboard(A(this._rgba,this._alphaEnabled()));return}if(a==="eyedropper"){this._openEyeDropper();return}if(a==="clear"){if(this._isReadonly())return;const n=f(z);n&&(this._applyRgba(n,!1),this._error="",this._syncValueAttribute(),this._emitInput("text"),this._emitChange("text"),this._pushRecent(this._currentHex()),this._updateUI(!1));return}if(a==="apply"){this._setOpen(!1,"apply");return}if(a==="preset"||a==="recent"){if(this._isReadonly())return;const n=i.getAttribute("data-color")||"",o=f(n);if(!o)return;const l=a==="preset"?"preset":"recent";this._applyRgba(o,!0),this._error="",this._syncValueAttribute(),this._emitInput(l),this._emitChange(l),this._pushRecent(this._currentHex()),this._updateUI(!1);return}}}_onPanelInput(t,e){const r=this._eventHTMLElement(t);if(!(r instanceof HTMLInputElement)||!r.hasAttribute("data-input")||(t.stopPropagation(),this._isDisabled()||this._isReadonly()||this._isLoading()))return;const i=this._parseInputsFromPanel(r.closest("[data-cp-panel]"));if(!i){this._error="";return}this._error="",this._applyRgba(i,!0),this._emitInput("text"),this._updateUI(!0,!0)}_onPanelChange(t,e){const r=this._eventHTMLElement(t);if(!(r instanceof HTMLInputElement)||!r.hasAttribute("data-input")||(t.stopPropagation(),this._isDisabled()||this._isReadonly()||this._isLoading()))return;const i=r.closest("[data-cp-panel]"),a=this._parseInputsFromPanel(i);if(!a){const n=r.value||"";this._setInvalid(n,"Invalid input values");return}this._error="",this._applyRgba(a,!0),this._syncValueAttribute(),this._emitInput("text"),this._emitChange("text"),this._pushRecent(this._currentHex()),this._updateUI(!1)}_onPanelKeyDown(t,e){const r=this._eventHTMLElement(t);if(!r||this._isDisabled()||this._isLoading())return;if(r instanceof HTMLInputElement&&r.hasAttribute("data-input")&&t.key==="Enter"){t.preventDefault();const l=this._parseInputsFromPanel(r.closest("[data-cp-panel]"));if(!l){this._setInvalid(r.value||"","Invalid input values");return}this._error="",this._applyRgba(l,!0),this._syncValueAttribute(),this._emitInput("text"),this._emitChange("text"),this._pushRecent(this._currentHex()),this._updateUI(!1);return}const i=r.getAttribute("data-cp");if(!i||this._isReadonly()||this._isLoading())return;const a=t.shiftKey?5:1;let n=!1;const o={...this._hsva};if(i==="sv"){t.key==="ArrowLeft"?(o.s=c(o.s-a,0,100),n=!0):t.key==="ArrowRight"?(o.s=c(o.s+a,0,100),n=!0):t.key==="ArrowUp"?(o.v=c(o.v+a,0,100),n=!0):t.key==="ArrowDown"?(o.v=c(o.v-a,0,100),n=!0):t.key==="Home"?(o.s=0,o.v=100,n=!0):t.key==="End"&&(o.s=100,o.v=0,n=!0),n&&(t.preventDefault(),this._commitHsva(o,"drag"));return}if(i==="hue"){t.key==="ArrowLeft"||t.key==="ArrowDown"?(o.h=c(o.h-a,0,360),n=!0):t.key==="ArrowRight"||t.key==="ArrowUp"?(o.h=c(o.h+a,0,360),n=!0):t.key==="Home"?(o.h=0,n=!0):t.key==="End"&&(o.h=360,n=!0),n&&(t.preventDefault(),this._commitHsva(o,"slider"));return}if(i==="alpha"&&this._alphaEnabled()){const l=t.shiftKey?.1:.01;t.key==="ArrowLeft"||t.key==="ArrowDown"?(o.a=c(o.a-l,0,1),n=!0):t.key==="ArrowRight"||t.key==="ArrowUp"?(o.a=c(o.a+l,0,1),n=!0):t.key==="Home"?(o.a=0,n=!0):t.key==="End"&&(o.a=1,n=!0),n&&(t.preventDefault(),this._commitHsva(o,"slider"))}}_commitHsva(t,e){this._setHsva(t),this._syncValueAttribute(),this._emitInput(e),this._emitChange(e),this._pushRecent(this._currentHex()),this._updateUI(!1)}_parseInputsFromPanel(t){var l,u,b,v,d,_,R,p,S;if(!t)return null;const e=this._panelRefs(t);if(this._format==="hex"){const x=((l=e.inputHex)==null?void 0:l.value)||"",I=x.trim().startsWith("#")?x.trim():`#${x.trim()}`,P=f(I);return P?this._normalizeByAlpha(P):null}if(this._format==="rgb"){const x=Number(((u=e.inputR)==null?void 0:u.value)??""),I=Number(((b=e.inputG)==null?void 0:b.value)??""),P=Number(((v=e.inputB)==null?void 0:v.value)??""),D=this._alphaEnabled()?Number(((d=e.inputA1)==null?void 0:d.value)??""):1;return[x,I,P,D].every(V=>Number.isFinite(V))?this._normalizeByAlpha({r:x,g:I,b:P,a:D}):null}const r=Number(((_=e.inputH)==null?void 0:_.value)??""),i=Number(((R=e.inputS)==null?void 0:R.value)??""),a=Number(((p=e.inputL)==null?void 0:p.value)??""),n=this._alphaEnabled()?Number(((S=e.inputA2)==null?void 0:S.value)??""):1;if(![r,i,a,n].every(x=>Number.isFinite(x)))return null;const o={h:c(r,0,360),s:c(i,0,100),l:c(a,0,100),a:c(n,0,1)};return this._normalizeByAlpha(U(o))}_onPanelPointerDown(t,e){var n;if(this._isDisabled()||this._isReadonly()||this._isLoading())return;const r=this._eventHTMLElement(t);if(!r)return;const i=(n=r.closest("[data-cp]"))==null?void 0:n.getAttribute("data-cp");if(!i||i==="alpha"&&!this._alphaEnabled())return;const a=r.closest(`[data-cp="${i}"]`);if(a){t.preventDefault(),this._dragTarget=i,this._dragPointerId=t.pointerId,this._dragRect=a.getBoundingClientRect(),this._dragX=t.clientX,this._dragY=t.clientY,this._dragChanged=!1,this._dragSource=i==="sv"?"drag":"slider";try{a.setPointerCapture(t.pointerId)}catch{}this._applyDragPointer(!0)}}_onPanelPointerMove(t){!this._dragTarget||t.pointerId!==this._dragPointerId||(this._dragX=t.clientX,this._dragY=t.clientY,!this._dragRaf&&(this._dragRaf=requestAnimationFrame(()=>{this._dragRaf=0,this._applyDragPointer(!0)})))}_onPanelPointerUp(t){!this._dragTarget||t.pointerId!==this._dragPointerId||(this._dragX=t.clientX,this._dragY=t.clientY,this._applyDragPointer(!0),this._stopDrag(!0))}_onPanelPointerCancel(t){!this._dragTarget||t.pointerId!==this._dragPointerId||this._stopDrag(!1)}_cancelDragFrame(){this._dragRaf&&(cancelAnimationFrame(this._dragRaf),this._dragRaf=0)}_applyDragPointer(t){if(!this._dragTarget||!this._dragRect)return;const e=this._dragRect,r=c(this._dragX-e.left,0,e.width||1),i=c(this._dragY-e.top,0,e.height||1),a={...this._hsva};this._dragTarget==="sv"?(a.s=c(r/Math.max(e.width,1)*100,0,100),a.v=c(100-i/Math.max(e.height,1)*100,0,100)):this._dragTarget==="hue"?a.h=c(r/Math.max(e.width,1)*360,0,360):this._dragTarget==="alpha"&&(a.a=c(r/Math.max(e.width,1),0,1)),this._setHsva(a)&&(this._dragChanged=!0,t&&this._emitInput(this._dragSource),this._updateUI(!0,!0))}_setHsva(t){const e={h:c(t.h,0,360),s:c(t.s,0,100),v:c(t.v,0,100),a:this._alphaEnabled()?c(t.a,0,1):1},r=this._hsva;return M(r.h,e.h)&&M(r.s,e.s)&&M(r.v,e.v)&&M(r.a,e.a)?!1:(this._hsva=e,this._rgba=this._normalizeByAlpha(Z(this._hsva)),this._error="",!0)}_stopDrag(t){this._cancelDragFrame();const e=t&&this._dragChanged;this._dragTarget=null,this._dragPointerId=-1,this._dragRect=null,this._dragChanged=!1,e&&(this._syncValueAttribute(),this._emitChange(this._dragSource),this._pushRecent(this._currentHex()),this._updateUI(!1))}_pushRecent(t){if(!this._recentEnabled())return;const e=(t||"").trim().toUpperCase();e&&(this._recentColors=[e,...this._recentColors.filter(r=>r.toUpperCase()!==e)].slice(0,this._maxRecent()),this._persistRecentColors())}async _openEyeDropper(){if(this._isDisabled()||this._isReadonly()||this._isLoading()||typeof window>"u")return;const t=window.EyeDropper;if(typeof t=="function")try{const r=await new t().open(),i=f((r==null?void 0:r.sRGBHex)||"");if(!i)return;this._applyRgba(i,!0),this._error="",this._syncValueAttribute(),this._emitInput("eyedropper"),this._emitChange("eyedropper"),this._pushRecent(this._currentHex()),this._updateUI(!1)}catch{}}async _copyToClipboard(t){var a;if(!t||this._isDisabled())return;let e=!1;if(typeof navigator<"u"&&((a=navigator.clipboard)!=null&&a.writeText))try{await navigator.clipboard.writeText(t),e=!0}catch{e=!1}if(!e&&typeof document<"u"){const n=document.createElement("textarea");n.value=t,n.setAttribute("readonly",""),n.style.position="fixed",n.style.opacity="0",document.body.appendChild(n),n.select();try{e=document.execCommand("copy")}catch{e=!1}finally{n.parentElement&&n.parentElement.removeChild(n)}}const r=e?`Copied ${t}`:`Unable to copy ${t}`,i=typeof window<"u"?window.showToast:null;if(typeof i=="function")try{i(r)}catch{this.dispatchEvent(new CustomEvent("toast",{detail:{message:r},bubbles:!0,composed:!0}))}else this.dispatchEvent(new CustomEvent("toast",{detail:{message:r},bubbles:!0,composed:!0}))}_applyAria(t){const e=this.getAttribute("aria-labelledby"),r=this.getAttribute("aria-describedby"),i=this.getAttribute("aria-label");e?t.setAttribute("aria-labelledby",e):t.removeAttribute("aria-labelledby"),r?t.setAttribute("aria-describedby",r):t.removeAttribute("aria-describedby"),i?t.setAttribute("aria-label",i):e||t.setAttribute("aria-label","Color picker")}}customElements.get("ui-color-picker")||customElements.define("ui-color-picker",N);exports.UIColorPicker=N;
|