@editora/ui-core 0.1.19 → 0.1.20
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/dist/{ElementBase-1b301e7f.js → ElementBase-EV6mVBUV.js} +1 -1
- package/dist/{ElementBase-909688f3.mjs → ElementBase-YlTLMsGk.mjs} +3 -3
- package/dist/accordion.cjs.js +3 -3
- package/dist/accordion.esm.js +39 -62
- package/dist/alert-dialog.cjs.js +19 -19
- package/dist/alert-dialog.esm.js +69 -87
- package/dist/alert.cjs.js +1 -1
- package/dist/alert.esm.js +4 -7
- package/dist/anchor.cjs.js +2 -2
- package/dist/anchor.esm.js +3 -3
- package/dist/animated-beam.cjs.js +83 -83
- package/dist/animated-beam.esm.js +250 -277
- package/dist/animated-list.cjs.js +4 -4
- package/dist/animated-list.esm.js +47 -61
- package/dist/animated-text.cjs.js +2 -2
- package/dist/animated-text.esm.js +13 -24
- package/dist/app-header.cjs.js +3 -3
- package/dist/app-header.esm.js +11 -13
- package/dist/aspect-ratio.cjs.js +1 -1
- package/dist/aspect-ratio.esm.js +4 -7
- package/dist/avatar.cjs.js +1 -1
- package/dist/avatar.esm.js +7 -13
- package/dist/badge.cjs.js +1 -1
- package/dist/badge.esm.js +4 -7
- package/dist/block-controls.cjs.js +2 -2
- package/dist/block-controls.esm.js +19 -35
- package/dist/box.cjs.js +1 -1
- package/dist/box.esm.js +8 -15
- package/dist/breadcrumb.cjs.js +2 -2
- package/dist/breadcrumb.esm.js +20 -37
- package/dist/button.cjs.js +1 -521
- package/dist/button.esm.js +2 -671
- package/dist/{calendar-2c11b824.mjs → calendar-DLY4acgn.mjs} +293 -342
- package/dist/{calendar-a8735e40.js → calendar-Dkof-FTK.js} +25 -25
- package/dist/calendar.cjs.js +1 -1
- package/dist/calendar.esm.js +8 -9
- package/dist/card.cjs.js +4 -4
- package/dist/card.esm.js +13 -19
- package/dist/chart.cjs.js +64 -64
- package/dist/chart.esm.js +223 -254
- package/dist/checkbox.cjs.js +1 -1
- package/dist/checkbox.esm.js +2 -3
- package/dist/collapsible.cjs.js +1 -1
- package/dist/collapsible.esm.js +5 -9
- package/dist/{collection-a1aac0c6.mjs → collection-C7URGjEI.mjs} +8 -14
- package/dist/collection.cjs.js +1 -1
- package/dist/collection.esm.js +4 -7
- package/dist/color-picker.cjs.js +9 -9
- package/dist/color-picker.esm.js +189 -252
- package/dist/combobox.cjs.js +13 -13
- package/dist/combobox.esm.js +93 -126
- package/dist/command-palette.cjs.js +3 -3
- package/dist/command-palette.esm.js +19 -30
- package/dist/command.cjs.js +4 -4
- package/dist/command.esm.js +41 -53
- package/dist/components/ui-orbiter.d.ts.map +1 -1
- package/dist/components/ui-skeleton.d.ts.map +1 -1
- package/dist/components/ui-split-button.d.ts +1 -0
- package/dist/components/ui-split-button.d.ts.map +1 -1
- package/dist/components/ui-time-picker.d.ts.map +1 -1
- package/dist/container.cjs.js +2 -2
- package/dist/container.esm.js +2 -3
- package/dist/context-menu.cjs.js +8 -8
- package/dist/context-menu.esm.js +157 -219
- package/dist/control-group.cjs.js +1 -1
- package/dist/control-group.esm.js +2 -3
- package/dist/data-table.cjs.js +4 -4
- package/dist/data-table.esm.js +299 -381
- package/dist/date-field.cjs.js +3 -3
- package/dist/date-field.esm.js +68 -80
- package/dist/date-picker.cjs.js +9 -9
- package/dist/date-picker.esm.js +69 -97
- package/dist/date-range-picker.cjs.js +3 -3
- package/dist/date-range-picker.esm.js +32 -56
- package/dist/date-range-time-picker.cjs.js +9 -9
- package/dist/date-range-time-picker.esm.js +111 -140
- package/dist/date-time-picker.cjs.js +4 -4
- package/dist/date-time-picker.esm.js +112 -144
- package/dist/date-time-utils-Dmost5Ee.js +1 -0
- package/dist/date-time-utils-y1N2gvG2.mjs +268 -0
- package/dist/description.cjs.js +1 -1
- package/dist/description.esm.js +3 -5
- package/dist/dialog.cjs.js +12 -12
- package/dist/dialog.esm.js +44 -63
- package/dist/direction-provider.cjs.js +1 -1
- package/dist/direction-provider.esm.js +2 -3
- package/dist/{dismissable-layer-9c7e6b58.mjs → dismissable-layer-BmPIoK80.mjs} +29 -33
- package/dist/dismissable-layer-DNfrKA20.js +1 -0
- package/dist/dismissable-layer.cjs.js +2 -2
- package/dist/dismissable-layer.esm.js +4 -6
- package/dist/dock.cjs.js +5 -5
- package/dist/dock.esm.js +134 -155
- package/dist/drawer.cjs.js +2 -2
- package/dist/drawer.esm.js +18 -35
- package/dist/dropdown.cjs.js +2 -2
- package/dist/dropdown.esm.js +119 -149
- package/dist/dropzone.cjs.js +1 -1
- package/dist/dropzone.esm.js +0 -1
- package/dist/empty-state.cjs.js +1 -1
- package/dist/empty-state.esm.js +1 -1
- package/dist/field-error.cjs.js +1 -1
- package/dist/field-error.esm.js +3 -5
- package/dist/field.cjs.js +5 -5
- package/dist/field.esm.js +27 -34
- package/dist/fieldset.cjs.js +4 -4
- package/dist/fieldset.esm.js +19 -24
- package/dist/file-upload.cjs.js +4 -4
- package/dist/file-upload.esm.js +69 -93
- package/dist/flex.cjs.js +1 -1
- package/dist/flex.esm.js +5 -9
- package/dist/floating-toolbar.cjs.js +4 -4
- package/dist/floating-toolbar.esm.js +60 -85
- package/dist/focus-scope-Bwug2gDv.js +1 -0
- package/dist/{focus-scope-103833ee.mjs → focus-scope-CmEsG5UZ.mjs} +39 -48
- package/dist/focus-scope.cjs.js +2 -2
- package/dist/focus-scope.esm.js +15 -20
- package/dist/form.cjs.js +2 -2
- package/dist/form.esm.js +26 -53
- package/dist/gantt.cjs.js +43 -43
- package/dist/gantt.esm.js +295 -322
- package/dist/grid.cjs.js +1 -1
- package/dist/grid.esm.js +5 -9
- package/dist/hover-card.cjs.js +4 -4
- package/dist/hover-card.esm.js +22 -28
- package/dist/icon-cloud.cjs.js +7 -7
- package/dist/icon-cloud.esm.js +48 -62
- package/dist/icon.cjs.js +1 -1
- package/dist/icon.esm.js +2 -4
- package/dist/index.cjs.js +1 -1
- package/dist/index.esm.js +378 -390
- package/dist/inline-edit.cjs.js +11 -11
- package/dist/inline-edit.esm.js +32 -36
- package/dist/input.cjs.js +17 -17
- package/dist/input.esm.js +50 -63
- package/dist/label.cjs.js +2 -2
- package/dist/label.esm.js +8 -17
- package/dist/layout.cjs.js +2 -2
- package/dist/layout.esm.js +20 -26
- package/dist/listbox-B6QgECax.js +46 -0
- package/dist/listbox-DJamVeFj.mjs +200 -0
- package/dist/listbox.cjs.js +1 -1
- package/dist/listbox.esm.js +2 -4
- package/dist/marquee.cjs.js +5 -5
- package/dist/marquee.esm.js +33 -50
- package/dist/masonry-grid.cjs.js +1 -1
- package/dist/masonry-grid.esm.js +5 -9
- package/dist/menu.cjs.js +3 -3
- package/dist/menu.esm.js +106 -126
- package/dist/menubar.cjs.js +5 -5
- package/dist/menubar.esm.js +118 -164
- package/dist/meter.cjs.js +2 -2
- package/dist/meter.esm.js +4 -4
- package/dist/multi-select.cjs.js +4 -4
- package/dist/multi-select.esm.js +120 -140
- package/dist/navigation-menu.cjs.js +4 -4
- package/dist/navigation-menu.esm.js +44 -55
- package/dist/number-field.cjs.js +2 -2
- package/dist/number-field.esm.js +73 -98
- package/dist/number-ticker.cjs.js +3 -3
- package/dist/number-ticker.esm.js +22 -43
- package/dist/odometer.cjs.js +1 -1
- package/dist/odometer.esm.js +5 -9
- package/dist/orbiter.cjs.js +13 -13
- package/dist/orbiter.esm.js +79 -90
- package/dist/{overlayManager-5bbd4dc3.mjs → overlayManager-BJjU1VA8.mjs} +4 -5
- package/dist/{overlayManager-0eda4e08.js → overlayManager-CSy3fJmJ.js} +1 -1
- package/dist/pagination.cjs.js +2 -2
- package/dist/pagination.esm.js +14 -18
- package/dist/{panel-group-a376cc5e.mjs → panel-group-8sVNnGxg.mjs} +24 -46
- package/dist/panel-group-CaD0_KQf.js +36 -0
- package/dist/panel-group.cjs.js +1 -1
- package/dist/panel-group.esm.js +2 -5
- package/dist/panel.cjs.js +4 -4
- package/dist/panel.esm.js +8 -10
- package/dist/password-field.cjs.js +9 -9
- package/dist/password-field.esm.js +62 -82
- package/dist/pin-input.cjs.js +3 -3
- package/dist/pin-input.esm.js +33 -39
- package/dist/placement-grid.cjs.js +4 -4
- package/dist/placement-grid.esm.js +108 -131
- package/dist/plugin-panel.cjs.js +7 -7
- package/dist/plugin-panel.esm.js +13 -15
- package/dist/popover.cjs.js +2 -2
- package/dist/popover.esm.js +21 -31
- package/dist/portal-DgpQ3Jo1.js +1 -0
- package/dist/{portal-fe73e5cc.mjs → portal-bR42gHvG.mjs} +43 -48
- package/dist/portal.cjs.js +2 -2
- package/dist/portal.esm.js +10 -19
- package/dist/{positioner-e9770c66.mjs → positioner-D0VGxtYU.mjs} +189 -209
- package/dist/positioner-D_fqyx_j.js +1 -0
- package/dist/positioner.cjs.js +2 -2
- package/dist/positioner.esm.js +11 -18
- package/dist/presence.cjs.js +1 -1
- package/dist/presence.esm.js +7 -13
- package/dist/progress.cjs.js +1 -1
- package/dist/progress.esm.js +5 -9
- package/dist/quick-actions.cjs.js +6 -6
- package/dist/quick-actions.esm.js +52 -62
- package/dist/radio-group.cjs.js +13 -13
- package/dist/radio-group.esm.js +39 -51
- package/dist/radio.cjs.js +1 -1
- package/dist/radio.esm.js +5 -9
- package/dist/rating.cjs.js +1 -1
- package/dist/rating.esm.js +12 -23
- package/dist/{roving-focus-group-4350c9a7.mjs → roving-focus-group-Dbm1Jko_.mjs} +3 -6
- package/dist/roving-focus-group.cjs.js +1 -1
- package/dist/roving-focus-group.esm.js +3 -5
- package/dist/runtime-CTaOSmBj.js +1 -0
- package/dist/{runtime-161f68a2.mjs → runtime-D1gFh1fS.mjs} +338 -366
- package/dist/runtime.cjs.js +1 -1
- package/dist/runtime.esm.js +6 -6
- package/dist/scroll-area.cjs.js +3 -3
- package/dist/scroll-area.esm.js +38 -46
- package/dist/{scroll-lock-31da444f.mjs → scroll-lock-LfqXXqsu.mjs} +5 -9
- package/dist/section.cjs.js +1 -1
- package/dist/section.esm.js +1 -1
- package/dist/select.cjs.js +7 -7
- package/dist/select.esm.js +67 -97
- package/dist/selection-popup.cjs.js +1 -1
- package/dist/selection-popup.esm.js +8 -15
- package/dist/separator.cjs.js +1 -1
- package/dist/separator.esm.js +1 -1
- package/dist/sidebar.cjs.js +18 -18
- package/dist/sidebar.esm.js +117 -139
- package/dist/skeleton.cjs.js +11 -11
- package/dist/skeleton.esm.js +27 -24
- package/dist/slider.cjs.js +1 -1
- package/dist/slider.esm.js +6 -11
- package/dist/slot.cjs.js +4 -4
- package/dist/slot.esm.js +16 -19
- package/dist/sortable.cjs.js +45 -45
- package/dist/sortable.esm.js +421 -524
- package/dist/spinning-text.cjs.js +12 -12
- package/dist/spinning-text.esm.js +80 -92
- package/dist/split-button.cjs.js +4 -4
- package/dist/split-button.esm.js +77 -62
- package/dist/splitter.cjs.js +1 -1
- package/dist/splitter.esm.js +1 -1
- package/dist/stepper.cjs.js +8 -8
- package/dist/stepper.esm.js +32 -52
- package/dist/switch.cjs.js +7 -7
- package/dist/switch.esm.js +23 -31
- package/dist/table.cjs.js +2 -2
- package/dist/table.esm.js +46 -56
- package/dist/tabs.cjs.js +3 -3
- package/dist/tabs.esm.js +35 -55
- package/dist/tags-input.cjs.js +4 -4
- package/dist/tags-input.esm.js +45 -62
- package/dist/textarea.cjs.js +6 -6
- package/dist/textarea.esm.js +32 -41
- package/dist/time-field.cjs.js +4 -4
- package/dist/time-field.esm.js +70 -84
- package/dist/time-picker.cjs.js +22 -22
- package/dist/time-picker.esm.js +88 -110
- package/dist/timeline.cjs.js +1 -1
- package/dist/timeline.esm.js +3 -5
- package/dist/toast.cjs.js +2 -2
- package/dist/toast.esm.js +33 -47
- package/dist/toggle-group.cjs.js +6 -6
- package/dist/toggle-group.esm.js +85 -105
- package/dist/toggle.cjs.js +1 -1
- package/dist/toggle.esm.js +3 -5
- package/dist/toolbar.cjs.js +1 -1
- package/dist/toolbar.esm.js +13 -24
- package/dist/tooltip.cjs.js +2 -2
- package/dist/tooltip.esm.js +31 -42
- package/dist/transfer-list.cjs.js +19 -19
- package/dist/transfer-list.esm.js +98 -111
- package/dist/{tree-dcd74a4a.mjs → tree-B3kE8ESs.mjs} +55 -62
- package/dist/tree-Dx_kv_ih.js +39 -0
- package/dist/tree-item.cjs.js +2 -2
- package/dist/tree-item.esm.js +2 -3
- package/dist/tree.cjs.js +1 -1
- package/dist/tree.esm.js +2 -5
- package/dist/ui-button-Q0GNNWKC.mjs +665 -0
- package/dist/ui-button-rXQOS9QJ.js +521 -0
- package/dist/{icon-9e9da03b.js → ui-icon-BzVNC_lr.js} +4 -4
- package/dist/{icon-e2a85cc1.mjs → ui-icon-YI6lyuqU.mjs} +58 -65
- package/dist/visually-hidden.cjs.js +1 -1
- package/dist/visually-hidden.esm.js +1 -1
- package/dist/wizard.cjs.js +14 -14
- package/dist/wizard.esm.js +85 -105
- package/package.json +2 -2
- package/dist/date-time-utils-66480de4.js +0 -1
- package/dist/date-time-utils-a2c7af25.mjs +0 -307
- package/dist/dismissable-layer-193e3bed.js +0 -1
- package/dist/focus-scope-2b12b4e7.js +0 -1
- package/dist/listbox-308789a0.mjs +0 -210
- package/dist/listbox-ef2f708e.js +0 -46
- package/dist/panel-group-40254cdd.js +0 -36
- package/dist/portal-c69756c0.js +0 -1
- package/dist/positioner-33529bb8.js +0 -1
- package/dist/runtime-3f13807b.js +0 -1
- package/dist/tree-0a7a8d05.js +0 -39
- /package/dist/{collection-a2969ad2.js → collection-qv8A8rq4.js} +0 -0
- /package/dist/{menu-item-styles-27fdbac4.mjs → menu-item-styles-CZiPwPwl.mjs} +0 -0
- /package/dist/{menu-item-styles-83ad1e22.js → menu-item-styles-CbNUEwP2.js} +0 -0
- /package/dist/{roving-focus-group-5c059bf9.js → roving-focus-group-BdJ_4Njm.js} +0 -0
- /package/dist/{scroll-lock-d7b0df21.js → scroll-lock-BX6e3Ced.js} +0 -0
package/dist/color-picker.esm.js
CHANGED
|
@@ -1,22 +1,18 @@
|
|
|
1
|
-
import { E as
|
|
2
|
-
import { r as
|
|
3
|
-
import "./calendar-2c11b824.mjs";
|
|
4
|
-
import "./scroll-lock-31da444f.mjs";
|
|
5
|
-
import "./positioner-e9770c66.mjs";
|
|
1
|
+
import { E as q } from "./ElementBase-YlTLMsGk.mjs";
|
|
2
|
+
import { r as O, e as F, l as U, i as A, s as N, c as V } from "./date-time-utils-y1N2gvG2.mjs";
|
|
6
3
|
function g(s, t, e) {
|
|
7
4
|
return Math.max(t, Math.min(e, s));
|
|
8
5
|
}
|
|
9
|
-
function
|
|
6
|
+
function _(s, t = 3) {
|
|
10
7
|
const e = 10 ** t;
|
|
11
8
|
return Math.round(s * e) / e;
|
|
12
9
|
}
|
|
13
|
-
function
|
|
10
|
+
function S(s) {
|
|
14
11
|
return g(Math.round(s), 0, 255);
|
|
15
12
|
}
|
|
16
|
-
function
|
|
13
|
+
function H(s) {
|
|
17
14
|
const t = s.trim();
|
|
18
|
-
if (!t)
|
|
19
|
-
return null;
|
|
15
|
+
if (!t) return null;
|
|
20
16
|
if (t.endsWith("%")) {
|
|
21
17
|
const r = Number(t.slice(0, -1));
|
|
22
18
|
return Number.isFinite(r) ? g(r / 100, 0, 1) : null;
|
|
@@ -24,55 +20,50 @@ function O(s) {
|
|
|
24
20
|
const e = Number(t);
|
|
25
21
|
return Number.isFinite(e) ? g(e, 0, 1) : null;
|
|
26
22
|
}
|
|
27
|
-
function
|
|
23
|
+
function P(s) {
|
|
28
24
|
const t = s.trim();
|
|
29
|
-
if (!t)
|
|
30
|
-
return null;
|
|
25
|
+
if (!t) return null;
|
|
31
26
|
if (t.endsWith("%")) {
|
|
32
27
|
const r = Number(t.slice(0, -1));
|
|
33
|
-
return Number.isFinite(r) ?
|
|
28
|
+
return Number.isFinite(r) ? S(g(r, 0, 100) / 100 * 255) : null;
|
|
34
29
|
}
|
|
35
30
|
const e = Number(t);
|
|
36
|
-
return Number.isFinite(e) ?
|
|
31
|
+
return Number.isFinite(e) ? S(e) : null;
|
|
37
32
|
}
|
|
38
|
-
function
|
|
33
|
+
function B(s) {
|
|
39
34
|
const t = s.trim();
|
|
40
|
-
if (!t.endsWith("%"))
|
|
41
|
-
return null;
|
|
35
|
+
if (!t.endsWith("%")) return null;
|
|
42
36
|
const e = Number(t.slice(0, -1));
|
|
43
37
|
return Number.isFinite(e) ? g(e, 0, 100) : null;
|
|
44
38
|
}
|
|
45
|
-
function
|
|
39
|
+
function W(s) {
|
|
46
40
|
const t = s.trim().toLowerCase();
|
|
47
|
-
if (!t)
|
|
48
|
-
return null;
|
|
41
|
+
if (!t) return null;
|
|
49
42
|
if (t.endsWith("deg")) {
|
|
50
43
|
const r = Number(t.slice(0, -3));
|
|
51
|
-
return Number.isFinite(r) ?
|
|
44
|
+
return Number.isFinite(r) ? y(r) : null;
|
|
52
45
|
}
|
|
53
46
|
if (t.endsWith("turn")) {
|
|
54
47
|
const r = Number(t.slice(0, -4));
|
|
55
|
-
return Number.isFinite(r) ?
|
|
48
|
+
return Number.isFinite(r) ? y(r * 360) : null;
|
|
56
49
|
}
|
|
57
50
|
if (t.endsWith("rad")) {
|
|
58
51
|
const r = Number(t.slice(0, -3));
|
|
59
|
-
return Number.isFinite(r) ?
|
|
52
|
+
return Number.isFinite(r) ? y(r * 180 / Math.PI) : null;
|
|
60
53
|
}
|
|
61
54
|
const e = Number(t);
|
|
62
|
-
return Number.isFinite(e) ?
|
|
55
|
+
return Number.isFinite(e) ? y(e) : null;
|
|
63
56
|
}
|
|
64
|
-
function
|
|
57
|
+
function y(s) {
|
|
65
58
|
const t = s % 360;
|
|
66
59
|
return t < 0 ? t + 360 : t;
|
|
67
60
|
}
|
|
68
|
-
function
|
|
61
|
+
function T(s) {
|
|
69
62
|
const t = s.trim();
|
|
70
|
-
if (!t)
|
|
71
|
-
return null;
|
|
63
|
+
if (!t) return null;
|
|
72
64
|
if (t.includes("/")) {
|
|
73
65
|
const [r, i] = t.split("/");
|
|
74
|
-
if (i == null)
|
|
75
|
-
return null;
|
|
66
|
+
if (i == null) return null;
|
|
76
67
|
const a = r.includes(",") ? r.split(",") : r.trim().split(/\s+/);
|
|
77
68
|
return a.length < 3 ? null : {
|
|
78
69
|
channels: a.map((n) => n.trim()).filter(Boolean),
|
|
@@ -92,123 +83,116 @@ function F(s) {
|
|
|
92
83
|
alpha: e[3] ?? null
|
|
93
84
|
};
|
|
94
85
|
}
|
|
95
|
-
function
|
|
86
|
+
function K(s) {
|
|
96
87
|
const t = s.trim().replace(/^#/, "");
|
|
97
|
-
if (![3, 4, 6, 8].includes(t.length) || !/^[0-9a-f]+$/i.test(t))
|
|
98
|
-
return null;
|
|
88
|
+
if (![3, 4, 6, 8].includes(t.length) || !/^[0-9a-f]+$/i.test(t)) return null;
|
|
99
89
|
if (t.length === 3 || t.length === 4) {
|
|
100
90
|
const n = parseInt(t[0] + t[0], 16), o = parseInt(t[1] + t[1], 16), l = parseInt(t[2] + t[2], 16), c = t.length === 4 ? parseInt(t[3] + t[3], 16) / 255 : 1;
|
|
101
|
-
return
|
|
91
|
+
return b({ r: n, g: o, b: l, a: c });
|
|
102
92
|
}
|
|
103
93
|
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;
|
|
104
|
-
return
|
|
94
|
+
return b({ r: e, g: r, b: i, a });
|
|
105
95
|
}
|
|
106
|
-
function
|
|
96
|
+
function G(s) {
|
|
107
97
|
const t = /^rgba?\((.+)\)$/i.exec(s.trim());
|
|
108
|
-
if (!t)
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
const
|
|
114
|
-
|
|
115
|
-
return null;
|
|
116
|
-
const n = e.alpha != null ? O(e.alpha) : 1;
|
|
117
|
-
return n == null ? null : h({ r, g: i, b: a, a: n });
|
|
98
|
+
if (!t) return null;
|
|
99
|
+
const e = T(t[1]);
|
|
100
|
+
if (!e || e.channels.length < 3) return null;
|
|
101
|
+
const r = P(e.channels[0]), i = P(e.channels[1]), a = P(e.channels[2]);
|
|
102
|
+
if (r == null || i == null || a == null) return null;
|
|
103
|
+
const n = e.alpha != null ? H(e.alpha) : 1;
|
|
104
|
+
return n == null ? null : b({ r, g: i, b: a, a: n });
|
|
118
105
|
}
|
|
119
|
-
function
|
|
106
|
+
function X(s) {
|
|
120
107
|
const t = /^hsla?\((.+)\)$/i.exec(s.trim());
|
|
121
|
-
if (!t)
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
const
|
|
127
|
-
|
|
128
|
-
return null;
|
|
129
|
-
const n = e.alpha != null ? O(e.alpha) : 1;
|
|
130
|
-
return n == null ? null : U({ h: r, s: i, l: a, a: n });
|
|
108
|
+
if (!t) return null;
|
|
109
|
+
const e = T(t[1]);
|
|
110
|
+
if (!e || e.channels.length < 3) return null;
|
|
111
|
+
const r = W(e.channels[0]), i = B(e.channels[1]), a = B(e.channels[2]);
|
|
112
|
+
if (r == null || i == null || a == null) return null;
|
|
113
|
+
const n = e.alpha != null ? H(e.alpha) : 1;
|
|
114
|
+
return n == null ? null : $({ h: r, s: i, l: a, a: n });
|
|
131
115
|
}
|
|
132
|
-
function
|
|
116
|
+
function b(s) {
|
|
133
117
|
return {
|
|
134
|
-
r:
|
|
135
|
-
g:
|
|
136
|
-
b:
|
|
137
|
-
a:
|
|
118
|
+
r: S(s.r),
|
|
119
|
+
g: S(s.g),
|
|
120
|
+
b: S(s.b),
|
|
121
|
+
a: _(g(s.a, 0, 1), 4)
|
|
138
122
|
};
|
|
139
123
|
}
|
|
140
124
|
function f(s) {
|
|
141
125
|
const t = (s || "").trim();
|
|
142
|
-
return t ? t.startsWith("#") ?
|
|
126
|
+
return t ? t.startsWith("#") ? K(t) : /^rgba?\(/i.test(t) ? G(t) : /^hsla?\(/i.test(t) ? X(t) : null : null;
|
|
143
127
|
}
|
|
144
|
-
function
|
|
145
|
-
const e =
|
|
128
|
+
function Y(s, t = !1) {
|
|
129
|
+
const e = b(s), r = (a) => a.toString(16).padStart(2, "0"), i = `#${r(e.r)}${r(e.g)}${r(e.b)}`;
|
|
146
130
|
return t ? `${i}${r(Math.round(e.a * 255))}` : i;
|
|
147
131
|
}
|
|
148
|
-
function
|
|
149
|
-
const e =
|
|
150
|
-
return !t || e.a >= 1 ? `rgb(${e.r} ${e.g} ${e.b})` : `rgb(${e.r} ${e.g} ${e.b} / ${
|
|
132
|
+
function j(s, t = !0) {
|
|
133
|
+
const e = b(s);
|
|
134
|
+
return !t || e.a >= 1 ? `rgb(${e.r} ${e.g} ${e.b})` : `rgb(${e.r} ${e.g} ${e.b} / ${_(e.a, 3)})`;
|
|
151
135
|
}
|
|
152
|
-
function
|
|
153
|
-
const e = Math.round(
|
|
136
|
+
function J(s, t = !0) {
|
|
137
|
+
const e = Math.round(y(s.h)), r = Math.round(g(s.s, 0, 100)), i = Math.round(g(s.l, 0, 100)), a = _(g(s.a, 0, 1), 3);
|
|
154
138
|
return !t || a >= 1 ? `hsl(${e} ${r}% ${i}%)` : `hsl(${e} ${r}% ${i}% / ${a})`;
|
|
155
139
|
}
|
|
156
|
-
function
|
|
157
|
-
const t =
|
|
140
|
+
function z(s) {
|
|
141
|
+
const t = b(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;
|
|
158
142
|
let l = 0;
|
|
159
143
|
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));
|
|
160
|
-
const c = a === 0 ? 0 : o / a * 100,
|
|
144
|
+
const c = a === 0 ? 0 : o / a * 100, d = a * 100;
|
|
161
145
|
return {
|
|
162
|
-
h:
|
|
163
|
-
s:
|
|
164
|
-
v:
|
|
146
|
+
h: _(l, 3),
|
|
147
|
+
s: _(c, 3),
|
|
148
|
+
v: _(d, 3),
|
|
165
149
|
a: t.a
|
|
166
150
|
};
|
|
167
151
|
}
|
|
168
|
-
function
|
|
169
|
-
const t =
|
|
152
|
+
function Q(s) {
|
|
153
|
+
const t = y(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;
|
|
170
154
|
let o = 0, l = 0, c = 0;
|
|
171
|
-
return t < 60 ? (o = i, l = a) : t < 120 ? (o = a, l = i) : t < 180 ? (l = i, c = a) : t < 240 ? (l = a, c = i) : t < 300 ? (o = a, c = i) : (o = i, c = a),
|
|
155
|
+
return t < 60 ? (o = i, l = a) : t < 120 ? (o = a, l = i) : t < 180 ? (l = i, c = a) : t < 240 ? (l = a, c = i) : t < 300 ? (o = a, c = i) : (o = i, c = a), b({
|
|
172
156
|
r: (o + n) * 255,
|
|
173
157
|
g: (l + n) * 255,
|
|
174
158
|
b: (c + n) * 255,
|
|
175
159
|
a: s.a
|
|
176
160
|
});
|
|
177
161
|
}
|
|
178
|
-
function
|
|
179
|
-
const t =
|
|
180
|
-
let c = 0,
|
|
181
|
-
return o !== 0 && (
|
|
182
|
-
h:
|
|
183
|
-
s:
|
|
184
|
-
l:
|
|
162
|
+
function I(s) {
|
|
163
|
+
const t = b(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;
|
|
164
|
+
let c = 0, d = 0;
|
|
165
|
+
return o !== 0 && (d = o / (1 - Math.abs(2 * l - 1)), a === e ? c = (r - i) / o % 6 : a === r ? c = (i - e) / o + 2 : c = (e - r) / o + 4, c *= 60, c < 0 && (c += 360)), {
|
|
166
|
+
h: _(c, 3),
|
|
167
|
+
s: _(d * 100, 3),
|
|
168
|
+
l: _(l * 100, 3),
|
|
185
169
|
a: t.a
|
|
186
170
|
};
|
|
187
171
|
}
|
|
188
|
-
function
|
|
189
|
-
const t =
|
|
172
|
+
function $(s) {
|
|
173
|
+
const t = y(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;
|
|
190
174
|
let o = 0, l = 0, c = 0;
|
|
191
|
-
return t < 60 ? (o = i, l = a) : t < 120 ? (o = a, l = i) : t < 180 ? (l = i, c = a) : t < 240 ? (l = a, c = i) : t < 300 ? (o = a, c = i) : (o = i, c = a),
|
|
175
|
+
return t < 60 ? (o = i, l = a) : t < 120 ? (o = a, l = i) : t < 180 ? (l = i, c = a) : t < 240 ? (l = a, c = i) : t < 300 ? (o = a, c = i) : (o = i, c = a), b({
|
|
192
176
|
r: (o + n) * 255,
|
|
193
177
|
g: (l + n) * 255,
|
|
194
178
|
b: (c + n) * 255,
|
|
195
179
|
a: s.a
|
|
196
180
|
});
|
|
197
181
|
}
|
|
198
|
-
function
|
|
199
|
-
return
|
|
182
|
+
function m(s, t) {
|
|
183
|
+
return Y(s, t).toUpperCase();
|
|
200
184
|
}
|
|
201
|
-
function
|
|
202
|
-
return
|
|
185
|
+
function w(s, t) {
|
|
186
|
+
return j(s, t);
|
|
203
187
|
}
|
|
204
|
-
function
|
|
205
|
-
return
|
|
188
|
+
function Z(s, t) {
|
|
189
|
+
return J(I(s), t);
|
|
206
190
|
}
|
|
207
|
-
const
|
|
191
|
+
const C = "#2563eb", L = "editora:ui-color-picker:recent", tt = `
|
|
208
192
|
<svg viewBox="0 0 20 20" aria-hidden="true" focusable="false">
|
|
209
193
|
<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"/>
|
|
210
194
|
</svg>
|
|
211
|
-
`,
|
|
195
|
+
`, D = `
|
|
212
196
|
:host {
|
|
213
197
|
--ui-cp-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 96%, transparent);
|
|
214
198
|
--ui-cp-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 74%, transparent);
|
|
@@ -855,7 +839,7 @@ const z = "#2563eb", $ = "editora:ui-color-picker:recent", nt = `
|
|
|
855
839
|
border-color: Highlight;
|
|
856
840
|
}
|
|
857
841
|
}
|
|
858
|
-
`,
|
|
842
|
+
`, et = `
|
|
859
843
|
.overlay {
|
|
860
844
|
position: fixed;
|
|
861
845
|
inset: 0;
|
|
@@ -896,16 +880,16 @@ const z = "#2563eb", $ = "editora:ui-color-picker:recent", nt = `
|
|
|
896
880
|
function u(s, t, e) {
|
|
897
881
|
return Math.max(t, Math.min(e, s));
|
|
898
882
|
}
|
|
899
|
-
function
|
|
883
|
+
function E(s, t) {
|
|
900
884
|
return Math.abs(s - t) <= 5e-4;
|
|
901
885
|
}
|
|
902
|
-
function
|
|
886
|
+
function k(s) {
|
|
903
887
|
return s.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/'/g, "'");
|
|
904
888
|
}
|
|
905
|
-
class
|
|
889
|
+
class rt extends q {
|
|
906
890
|
constructor() {
|
|
907
|
-
super(), this._syncing = !1, this._initialized = !1, this._rgba =
|
|
908
|
-
|
|
891
|
+
super(), this._syncing = !1, this._initialized = !1, this._rgba = b(f(C) || { r: 37, g: 99, b: 235, a: 1 }), this._hsva = z(this._rgba), this._format = "hex", this._open = !1, this._error = "", this._presets = [], this._recentColors = [], this._panelCache = /* @__PURE__ */ 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 = O(() => 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) => {
|
|
892
|
+
F(t, [this._overlay]) || this._scheduleOverlayPosition.run();
|
|
909
893
|
}, this._applyValueAttribute(!1), this._applyFormatAttribute(), this._open = this.hasAttribute("open"), this._parsePresetsAttribute();
|
|
910
894
|
}
|
|
911
895
|
static get observedAttributes() {
|
|
@@ -958,7 +942,7 @@ class ot extends V {
|
|
|
958
942
|
(this.hasAttribute("disabled") || this._isLoading()) && this._open && this._setOpen(!1, "attribute");
|
|
959
943
|
break;
|
|
960
944
|
case "alpha": {
|
|
961
|
-
this._alphaEnabled() || (this._rgba =
|
|
945
|
+
this._alphaEnabled() || (this._rgba = b({ ...this._rgba, a: 1 }), this._hsva = { ...this._hsva, a: 1 }, this._syncValueAttribute());
|
|
962
946
|
break;
|
|
963
947
|
}
|
|
964
948
|
}
|
|
@@ -998,9 +982,9 @@ class ot extends V {
|
|
|
998
982
|
this._error = "", this._applyRgba(e, !1), this._syncValueAttribute(), this._updateUI(!1);
|
|
999
983
|
}
|
|
1000
984
|
getColor() {
|
|
1001
|
-
const t =
|
|
985
|
+
const t = b(this._rgba);
|
|
1002
986
|
return {
|
|
1003
|
-
hex:
|
|
987
|
+
hex: m(t, this._alphaEnabled()),
|
|
1004
988
|
rgba: t,
|
|
1005
989
|
hsva: { ...this._hsva }
|
|
1006
990
|
};
|
|
@@ -1024,14 +1008,13 @@ class ot extends V {
|
|
|
1024
1008
|
_eventHTMLElement(t) {
|
|
1025
1009
|
const e = typeof t.composedPath == "function" ? t.composedPath() : [];
|
|
1026
1010
|
for (const i of e)
|
|
1027
|
-
if (i instanceof HTMLElement)
|
|
1028
|
-
return i;
|
|
1011
|
+
if (i instanceof HTMLElement) return i;
|
|
1029
1012
|
const r = t.target;
|
|
1030
1013
|
return r instanceof HTMLElement ? r : null;
|
|
1031
1014
|
}
|
|
1032
1015
|
_buildTemplate() {
|
|
1033
1016
|
return `
|
|
1034
|
-
<style>${
|
|
1017
|
+
<style>${D}</style>
|
|
1035
1018
|
<section class="root">
|
|
1036
1019
|
<div class="trigger-wrap" data-role="trigger-wrap">
|
|
1037
1020
|
<button
|
|
@@ -1044,7 +1027,7 @@ class ot extends V {
|
|
|
1044
1027
|
>
|
|
1045
1028
|
<span class="trigger-preview" data-role="trigger-preview"></span>
|
|
1046
1029
|
<span class="trigger-value" data-role="trigger-value"></span>
|
|
1047
|
-
<span class="trigger-chevron" aria-hidden="true">${
|
|
1030
|
+
<span class="trigger-chevron" aria-hidden="true">${tt}</span>
|
|
1048
1031
|
</button>
|
|
1049
1032
|
</div>
|
|
1050
1033
|
<div class="panel-inline" data-role="inline-panel" part="popover">
|
|
@@ -1136,19 +1119,18 @@ class ot extends V {
|
|
|
1136
1119
|
`;
|
|
1137
1120
|
}
|
|
1138
1121
|
_renderOverlayTemplate() {
|
|
1139
|
-
if (!this._overlay || !this._overlayRoot)
|
|
1140
|
-
return;
|
|
1122
|
+
if (!this._overlay || !this._overlayRoot) return;
|
|
1141
1123
|
this._syncOverlayHostAttributes();
|
|
1142
1124
|
const t = this._isMobileSheet(), e = t ? "sheet" : "popover";
|
|
1143
1125
|
this._overlay.dataset.mode !== e && (this._overlay.dataset.mode = e, this._overlayRoot.innerHTML = `
|
|
1144
|
-
<style>${
|
|
1126
|
+
<style>${D}${et}</style>
|
|
1145
1127
|
<section class="overlay">
|
|
1146
1128
|
${t ? '<div class="sheet-backdrop" data-action="close-popover"></div>' : ""}
|
|
1147
1129
|
<div class="${t ? "sheet-shell" : "popover-shell"}">
|
|
1148
1130
|
${this._panelMarkup("overlay")}
|
|
1149
1131
|
</div>
|
|
1150
1132
|
</section>
|
|
1151
|
-
`, t && !this._isSheetOpen && (this._isSheetOpen = !0, this._releaseScrollLock =
|
|
1133
|
+
`, t && !this._isSheetOpen && (this._isSheetOpen = !0, this._releaseScrollLock = U()), !t && this._isSheetOpen && (this._isSheetOpen = !1, this._releaseScrollLock && (this._releaseScrollLock(), this._releaseScrollLock = null)));
|
|
1152
1134
|
}
|
|
1153
1135
|
_isPopoverMode() {
|
|
1154
1136
|
return (this.getAttribute("mode") || "inline") === "popover";
|
|
@@ -1162,11 +1144,10 @@ class ot extends V {
|
|
|
1162
1144
|
return t === "neutral" || t === "success" || t === "warning" || t === "danger" ? t : "brand";
|
|
1163
1145
|
}
|
|
1164
1146
|
_closeOnEscape() {
|
|
1165
|
-
return
|
|
1147
|
+
return A(this.getAttribute("close-on-escape"), !0);
|
|
1166
1148
|
}
|
|
1167
1149
|
_syncOverlayHostAttributes() {
|
|
1168
|
-
if (!this._overlay)
|
|
1169
|
-
return;
|
|
1150
|
+
if (!this._overlay) return;
|
|
1170
1151
|
const t = (r) => {
|
|
1171
1152
|
const i = this.getAttribute(r);
|
|
1172
1153
|
i == null ? this._overlay.removeAttribute(r) : this._overlay.setAttribute(r, i);
|
|
@@ -1176,16 +1157,16 @@ class ot extends V {
|
|
|
1176
1157
|
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");
|
|
1177
1158
|
}
|
|
1178
1159
|
_isMobileSheet() {
|
|
1179
|
-
return
|
|
1160
|
+
return N(this.getAttribute("mode") || "inline");
|
|
1180
1161
|
}
|
|
1181
1162
|
_alphaEnabled() {
|
|
1182
|
-
return
|
|
1163
|
+
return A(this.getAttribute("alpha"), !1);
|
|
1183
1164
|
}
|
|
1184
1165
|
_recentEnabled() {
|
|
1185
|
-
return
|
|
1166
|
+
return A(this.getAttribute("recent"), !0);
|
|
1186
1167
|
}
|
|
1187
1168
|
_persistRecent() {
|
|
1188
|
-
return
|
|
1169
|
+
return A(this.getAttribute("persist"), !1);
|
|
1189
1170
|
}
|
|
1190
1171
|
_isDisabled() {
|
|
1191
1172
|
return this.hasAttribute("disabled");
|
|
@@ -1217,7 +1198,7 @@ class ot extends V {
|
|
|
1217
1198
|
_applyValueAttribute(t) {
|
|
1218
1199
|
const e = this.getAttribute("value");
|
|
1219
1200
|
if (!e) {
|
|
1220
|
-
this._applyRgba(f(
|
|
1201
|
+
this._applyRgba(f(C) || this._rgba, !1);
|
|
1221
1202
|
return;
|
|
1222
1203
|
}
|
|
1223
1204
|
const r = f(e);
|
|
@@ -1241,12 +1222,10 @@ class ot extends V {
|
|
|
1241
1222
|
}
|
|
1242
1223
|
const r = [];
|
|
1243
1224
|
for (const i of e) {
|
|
1244
|
-
if (typeof i != "string")
|
|
1245
|
-
continue;
|
|
1225
|
+
if (typeof i != "string") continue;
|
|
1246
1226
|
const a = f(i);
|
|
1247
|
-
if (!a)
|
|
1248
|
-
|
|
1249
|
-
const n = x(this._normalizeByAlpha(a), this._alphaEnabled());
|
|
1227
|
+
if (!a) continue;
|
|
1228
|
+
const n = m(this._normalizeByAlpha(a), this._alphaEnabled());
|
|
1250
1229
|
r.includes(n) || r.push(n);
|
|
1251
1230
|
}
|
|
1252
1231
|
this._presets = r;
|
|
@@ -1261,13 +1240,11 @@ class ot extends V {
|
|
|
1261
1240
|
}
|
|
1262
1241
|
if (!(!this._persistRecent() || typeof localStorage > "u"))
|
|
1263
1242
|
try {
|
|
1264
|
-
const t = localStorage.getItem(
|
|
1265
|
-
if (!t)
|
|
1266
|
-
return;
|
|
1243
|
+
const t = localStorage.getItem(L);
|
|
1244
|
+
if (!t) return;
|
|
1267
1245
|
const e = JSON.parse(t);
|
|
1268
|
-
if (!Array.isArray(e))
|
|
1269
|
-
|
|
1270
|
-
this._recentColors = e.filter((r) => typeof r == "string").map((r) => f(r)).filter((r) => !!r).map((r) => x(this._normalizeByAlpha(r), this._alphaEnabled())).slice(0, this._maxRecent());
|
|
1246
|
+
if (!Array.isArray(e)) return;
|
|
1247
|
+
this._recentColors = e.filter((r) => typeof r == "string").map((r) => f(r)).filter((r) => !!r).map((r) => m(this._normalizeByAlpha(r), this._alphaEnabled())).slice(0, this._maxRecent());
|
|
1271
1248
|
} catch {
|
|
1272
1249
|
this._recentColors = [];
|
|
1273
1250
|
}
|
|
@@ -1275,15 +1252,15 @@ class ot extends V {
|
|
|
1275
1252
|
_persistRecentColors() {
|
|
1276
1253
|
if (!(!this._persistRecent() || typeof localStorage > "u"))
|
|
1277
1254
|
try {
|
|
1278
|
-
localStorage.setItem(
|
|
1255
|
+
localStorage.setItem(L, JSON.stringify(this._recentColors));
|
|
1279
1256
|
} catch {
|
|
1280
1257
|
}
|
|
1281
1258
|
}
|
|
1282
1259
|
_normalizeByAlpha(t) {
|
|
1283
|
-
return this._alphaEnabled() ?
|
|
1260
|
+
return this._alphaEnabled() ? b(t) : b({ ...t, a: 1 });
|
|
1284
1261
|
}
|
|
1285
1262
|
_applyRgba(t, e) {
|
|
1286
|
-
const r = this._normalizeByAlpha(t), i =
|
|
1263
|
+
const r = this._normalizeByAlpha(t), i = z(r);
|
|
1287
1264
|
e && i.s === 0 && (i.h = this._hsva.h), this._rgba = r, this._hsva = {
|
|
1288
1265
|
h: u(i.h, 0, 360),
|
|
1289
1266
|
s: u(i.s, 0, 100),
|
|
@@ -1292,17 +1269,17 @@ class ot extends V {
|
|
|
1292
1269
|
};
|
|
1293
1270
|
}
|
|
1294
1271
|
_serializeValue(t = this._format) {
|
|
1295
|
-
return t === "rgb" ?
|
|
1272
|
+
return t === "rgb" ? w(this._rgba, this._alphaEnabled()) : t === "hsl" ? Z(this._rgba, this._alphaEnabled()) : m(this._rgba, this._alphaEnabled());
|
|
1296
1273
|
}
|
|
1297
1274
|
_currentHex() {
|
|
1298
|
-
return
|
|
1275
|
+
return m(this._rgba, this._alphaEnabled());
|
|
1299
1276
|
}
|
|
1300
1277
|
_eventDetail(t) {
|
|
1301
1278
|
return {
|
|
1302
1279
|
value: this._serializeValue(),
|
|
1303
1280
|
hex: this._currentHex(),
|
|
1304
1281
|
rgba: { ...this._rgba },
|
|
1305
|
-
hsla:
|
|
1282
|
+
hsla: I(this._rgba),
|
|
1306
1283
|
source: t
|
|
1307
1284
|
};
|
|
1308
1285
|
}
|
|
@@ -1327,8 +1304,7 @@ class ot extends V {
|
|
|
1327
1304
|
});
|
|
1328
1305
|
}
|
|
1329
1306
|
_setOpen(t, e = "api") {
|
|
1330
|
-
if (!this._isPopoverMode() || t && (this._isDisabled() || this._isLoading()) || this._open === t)
|
|
1331
|
-
return;
|
|
1307
|
+
if (!this._isPopoverMode() || t && (this._isDisabled() || this._isLoading()) || this._open === t) return;
|
|
1332
1308
|
const r = this._open;
|
|
1333
1309
|
this._open = t, this._syncOpenAttribute(t);
|
|
1334
1310
|
const i = { open: t, previousOpen: r, source: e };
|
|
@@ -1342,9 +1318,8 @@ class ot extends V {
|
|
|
1342
1318
|
t && queueMicrotask(() => this._focusFirstOpenControl());
|
|
1343
1319
|
}
|
|
1344
1320
|
_focusFirstOpenControl() {
|
|
1345
|
-
if (!this._open)
|
|
1346
|
-
|
|
1347
|
-
const t = this._getCurrentPanel(), e = t == null ? void 0 : t.querySelector('[data-cp="sv"]');
|
|
1321
|
+
if (!this._open) return;
|
|
1322
|
+
const e = this._getCurrentPanel()?.querySelector('[data-cp="sv"]');
|
|
1348
1323
|
if (e)
|
|
1349
1324
|
try {
|
|
1350
1325
|
e.focus();
|
|
@@ -1369,8 +1344,7 @@ class ot extends V {
|
|
|
1369
1344
|
}
|
|
1370
1345
|
}
|
|
1371
1346
|
_ensureOverlay() {
|
|
1372
|
-
if (this._overlay || typeof document > "u")
|
|
1373
|
-
return;
|
|
1347
|
+
if (this._overlay || typeof document > "u") return;
|
|
1374
1348
|
const t = document.createElement("div");
|
|
1375
1349
|
t.style.position = "fixed", t.style.inset = "0", t.style.zIndex = "var(--ui-cp-z, 1600)", t.style.pointerEvents = "auto";
|
|
1376
1350
|
const e = t.attachShadow({ mode: "open" });
|
|
@@ -1380,15 +1354,12 @@ class ot extends V {
|
|
|
1380
1354
|
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 = /* @__PURE__ */ new WeakMap(), this._isSheetOpen && (this._isSheetOpen = !1, this._releaseScrollLock && (this._releaseScrollLock(), this._releaseScrollLock = null));
|
|
1381
1355
|
}
|
|
1382
1356
|
_positionOverlay() {
|
|
1383
|
-
if (!this._overlayRoot || !this._open || this._isMobileSheet())
|
|
1384
|
-
return;
|
|
1357
|
+
if (!this._overlayRoot || !this._open || this._isMobileSheet()) return;
|
|
1385
1358
|
const t = this.root.querySelector(".trigger"), e = this._overlayRoot.querySelector(".popover-shell");
|
|
1386
|
-
if (!t || !e)
|
|
1387
|
-
return;
|
|
1359
|
+
if (!t || !e) return;
|
|
1388
1360
|
const r = e.querySelector(".panel");
|
|
1389
|
-
if (!r)
|
|
1390
|
-
|
|
1391
|
-
const i = e.getAttribute("data-placement"), a = Y(
|
|
1361
|
+
if (!r) return;
|
|
1362
|
+
const i = e.getAttribute("data-placement"), a = V(
|
|
1392
1363
|
t.getBoundingClientRect(),
|
|
1393
1364
|
r.getBoundingClientRect(),
|
|
1394
1365
|
8,
|
|
@@ -1398,13 +1369,10 @@ class ot extends V {
|
|
|
1398
1369
|
e.style.top = `${Math.round(a.top)}px`, e.style.left = `${Math.round(a.left)}px`, e.setAttribute("data-placement", a.placement);
|
|
1399
1370
|
}
|
|
1400
1371
|
_onDocumentPointerDown(t) {
|
|
1401
|
-
|
|
1402
|
-
if (!this._overlay || !this._open)
|
|
1403
|
-
return;
|
|
1372
|
+
if (!this._overlay || !this._open) return;
|
|
1404
1373
|
const e = typeof t.composedPath == "function" ? t.composedPath() : [];
|
|
1405
|
-
if (e.includes(this))
|
|
1406
|
-
|
|
1407
|
-
const r = (i = this._overlayRoot) == null ? void 0 : i.querySelector('[data-cp-panel="overlay"]');
|
|
1374
|
+
if (e.includes(this)) return;
|
|
1375
|
+
const r = this._overlayRoot?.querySelector('[data-cp-panel="overlay"]');
|
|
1408
1376
|
r && e.includes(r) || this._setOpen(!1, "outside");
|
|
1409
1377
|
}
|
|
1410
1378
|
_onDocumentKeyDown(t) {
|
|
@@ -1423,10 +1391,8 @@ class ot extends V {
|
|
|
1423
1391
|
return Array.from(e).filter((r) => r.hasAttribute("disabled") || r.getAttribute("aria-hidden") === "true" || r.tabIndex < 0 ? !1 : r.getClientRects().length > 0);
|
|
1424
1392
|
}
|
|
1425
1393
|
_trapOverlayFocus(t) {
|
|
1426
|
-
|
|
1427
|
-
|
|
1428
|
-
if (!e)
|
|
1429
|
-
return;
|
|
1394
|
+
const e = this._overlayRoot?.querySelector('[data-cp-panel="overlay"]');
|
|
1395
|
+
if (!e) return;
|
|
1430
1396
|
const r = this._focusableInPanel(e);
|
|
1431
1397
|
if (!r.length) {
|
|
1432
1398
|
t.preventDefault(), e.focus();
|
|
@@ -1440,16 +1406,14 @@ class ot extends V {
|
|
|
1440
1406
|
(n === -1 || n === r.length - 1) && (t.preventDefault(), r[0].focus());
|
|
1441
1407
|
}
|
|
1442
1408
|
_forEachPanel(t) {
|
|
1443
|
-
var i;
|
|
1444
1409
|
const e = this.root.querySelector('[data-cp-panel="inline"]');
|
|
1445
1410
|
e && t(this._panelRefs(e));
|
|
1446
|
-
const r =
|
|
1411
|
+
const r = this._overlayRoot?.querySelector('[data-cp-panel="overlay"]');
|
|
1447
1412
|
r && t(this._panelRefs(r));
|
|
1448
1413
|
}
|
|
1449
1414
|
_panelRefs(t) {
|
|
1450
1415
|
const e = this._panelCache.get(t);
|
|
1451
|
-
if (e)
|
|
1452
|
-
return e;
|
|
1416
|
+
if (e) return e;
|
|
1453
1417
|
const r = {
|
|
1454
1418
|
panel: t,
|
|
1455
1419
|
label: t.querySelector('[data-role="label"]'),
|
|
@@ -1495,18 +1459,18 @@ class ot extends V {
|
|
|
1495
1459
|
return this._isPopoverMode() && this._open && this._overlayRoot ? this._overlayRoot.querySelector('[data-cp-panel="overlay"]') : this.root.querySelector('[data-cp-panel="inline"]');
|
|
1496
1460
|
}
|
|
1497
1461
|
_updateUI(t, e = !1) {
|
|
1498
|
-
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(), c = this._state(),
|
|
1499
|
-
r && (r.hidden = !l), i && (i.disabled =
|
|
1462
|
+
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(), c = this._state(), d = this._tone(), v = c === "loading", h = this._isDisabled(), x = this._isReadonly(), M = this._serializeValue() || this._placeholder();
|
|
1463
|
+
r && (r.hidden = !l), i && (i.disabled = h || v, i.dataset.state = c, i.dataset.tone = d, i.setAttribute("aria-expanded", l && this._open ? "true" : "false"), this._applyAria(i)), a && (a.textContent = M), n && (n.style.background = w(this._rgba, !0)), o && (o.hidden = l), this._forEachPanel((p) => this._updatePanel(p, { skipSwatches: t, disabled: h, readonly: x, loading: v, state: c, tone: d, modePopover: l, liveOnly: e }));
|
|
1500
1464
|
}
|
|
1501
1465
|
_updatePanel(t, e) {
|
|
1502
|
-
const r = this._rgba, i =
|
|
1503
|
-
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 =
|
|
1466
|
+
const r = this._rgba, i = I(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", c = e.disabled || e.readonly || e.loading;
|
|
1467
|
+
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 = w(r, !0)), t.status) {
|
|
1504
1468
|
let p = "";
|
|
1505
1469
|
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;
|
|
1506
1470
|
}
|
|
1507
1471
|
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", c ? "true" : "false"), t.sv.tabIndex = c ? -1 : 0), t.svThumb) {
|
|
1508
|
-
const p = u(a.s, 1, 99),
|
|
1509
|
-
t.svThumb.style.left = `${p}%`, t.svThumb.style.top = `${
|
|
1472
|
+
const p = u(a.s, 1, 99), R = u(100 - a.v, 1, 99);
|
|
1473
|
+
t.svThumb.style.left = `${p}%`, t.svThumb.style.top = `${R}%`;
|
|
1510
1474
|
}
|
|
1511
1475
|
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", c ? "true" : "false"), t.hue.tabIndex = c ? -1 : 0), t.hueThumb && (t.hueThumb.style.left = `${u(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", c || !this._alphaEnabled() ? "true" : "false"), t.alpha.tabIndex = c ? -1 : 0, t.alpha.style.backgroundImage = `
|
|
1512
1476
|
linear-gradient(45deg, var(--ui-cp-checker-a) 25%, transparent 25%),
|
|
@@ -1515,21 +1479,20 @@ class ot extends V {
|
|
|
1515
1479
|
linear-gradient(-45deg, transparent 75%, var(--ui-cp-checker-a) 75%),
|
|
1516
1480
|
linear-gradient(to right, rgba(${r.r}, ${r.g}, ${r.b}, 0), rgba(${r.r}, ${r.g}, ${r.b}, 1))
|
|
1517
1481
|
`), t.alphaThumb && (t.alphaThumb.style.left = `${u(a.a * 100, 1, 99)}%`);
|
|
1518
|
-
const
|
|
1519
|
-
if (t.inputHex &&
|
|
1520
|
-
return;
|
|
1482
|
+
const d = t.panel.getRootNode(), v = d instanceof ShadowRoot ? d.activeElement : t.panel.ownerDocument.activeElement, h = v && t.panel.contains(v) ? v.getAttribute("data-input") : null;
|
|
1483
|
+
if (t.inputHex && h !== "hex" && (t.inputHex.value = m(r, this._alphaEnabled())), t.inputR && h !== "r" && (t.inputR.value = String(r.r)), t.inputG && h !== "g" && (t.inputG.value = String(r.g)), t.inputB && h !== "b" && (t.inputB.value = String(r.b)), t.inputA1 && h !== "a1" && (t.inputA1.value = this._alphaEnabled() ? String(Number(r.a.toFixed(3))) : "1"), t.inputH && h !== "h" && (t.inputH.value = String(Math.round(i.h))), t.inputS && h !== "s" && (t.inputS.value = String(Math.round(i.s))), t.inputL && h !== "l" && (t.inputL.value = String(Math.round(i.l))), t.inputA2 && h !== "a2" && (t.inputA2.value = this._alphaEnabled() ? String(Number(r.a.toFixed(3))) : "1"), e.liveOnly) return;
|
|
1521
1484
|
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() || c), t.inputA2 && (t.inputA2.disabled = !this._alphaEnabled() || c), t.error) {
|
|
1522
1485
|
const p = this._error || (e.state === "error" ? "Unable to validate current color value." : "");
|
|
1523
1486
|
t.error.hidden = !p, t.error.textContent = p;
|
|
1524
1487
|
}
|
|
1525
|
-
const
|
|
1488
|
+
const x = c;
|
|
1526
1489
|
if (t.copyHex && (t.copyHex.disabled = e.disabled || e.loading), t.copyRgb && (t.copyRgb.disabled = e.disabled || e.loading), t.eyedropper) {
|
|
1527
1490
|
const p = typeof window < "u" && typeof window.EyeDropper == "function";
|
|
1528
|
-
t.eyedropper.hidden = !p, t.eyedropper.disabled =
|
|
1491
|
+
t.eyedropper.hidden = !p, t.eyedropper.disabled = x || !p;
|
|
1529
1492
|
}
|
|
1530
|
-
if (t.clear && (t.clear.disabled =
|
|
1531
|
-
const
|
|
1532
|
-
|
|
1493
|
+
if (t.clear && (t.clear.disabled = x), t.apply && (t.apply.hidden = !e.modePopover, t.apply.disabled = x), t.panel.querySelectorAll(".input").forEach((p) => {
|
|
1494
|
+
const R = p;
|
|
1495
|
+
R.disabled = x;
|
|
1533
1496
|
}), !e.skipSwatches && !this._renderingSwatches) {
|
|
1534
1497
|
this._renderingSwatches = !0;
|
|
1535
1498
|
try {
|
|
@@ -1543,41 +1506,35 @@ class ot extends V {
|
|
|
1543
1506
|
const e = this._currentHex().toLowerCase();
|
|
1544
1507
|
t.presets && (t.presets.innerHTML = this._presets.map((r) => {
|
|
1545
1508
|
const i = f(r);
|
|
1546
|
-
if (!i)
|
|
1547
|
-
|
|
1548
|
-
|
|
1549
|
-
return `<button type="button" class="swatch" part="swatch" data-action="preset" data-color="${A(a)}"${n} title="${A(a)}" style="background:${A(S(i, !0))}"></button>`;
|
|
1509
|
+
if (!i) return "";
|
|
1510
|
+
const a = m(this._normalizeByAlpha(i), this._alphaEnabled()), n = a.toLowerCase() === e ? ' data-selected="true"' : "";
|
|
1511
|
+
return `<button type="button" class="swatch" part="swatch" data-action="preset" data-color="${k(a)}"${n} title="${k(a)}" style="background:${k(w(i, !0))}"></button>`;
|
|
1550
1512
|
}).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) => {
|
|
1551
1513
|
const i = f(r);
|
|
1552
|
-
if (!i)
|
|
1553
|
-
|
|
1554
|
-
|
|
1555
|
-
return `<button type="button" class="swatch" part="swatch recent" data-action="recent" data-color="${A(a)}"${n} title="${A(a)}" style="background:${A(S(i, !0))}"></button>`;
|
|
1514
|
+
if (!i) return "";
|
|
1515
|
+
const a = m(this._normalizeByAlpha(i), this._alphaEnabled()), n = a.toLowerCase() === e ? ' data-selected="true"' : "";
|
|
1516
|
+
return `<button type="button" class="swatch" part="swatch recent" data-action="recent" data-color="${k(a)}"${n} title="${k(a)}" style="background:${k(w(i, !0))}"></button>`;
|
|
1556
1517
|
}).join(""));
|
|
1557
1518
|
}
|
|
1558
1519
|
_onPanelClick(t, e) {
|
|
1559
1520
|
const r = this._eventHTMLElement(t);
|
|
1560
|
-
if (!r)
|
|
1561
|
-
return;
|
|
1521
|
+
if (!r) return;
|
|
1562
1522
|
const i = r.closest("[data-action]");
|
|
1563
|
-
if (!i || this._isDisabled())
|
|
1564
|
-
return;
|
|
1523
|
+
if (!i || this._isDisabled()) return;
|
|
1565
1524
|
const a = i.getAttribute("data-action");
|
|
1566
1525
|
if (a === "close-popover") {
|
|
1567
1526
|
this._setOpen(!1, "outside");
|
|
1568
1527
|
return;
|
|
1569
1528
|
}
|
|
1570
1529
|
if (a === "toggle-popover") {
|
|
1571
|
-
if (!this._isPopoverMode())
|
|
1572
|
-
return;
|
|
1530
|
+
if (!this._isPopoverMode()) return;
|
|
1573
1531
|
this._setOpen(!this._open, "toggle");
|
|
1574
1532
|
return;
|
|
1575
1533
|
}
|
|
1576
1534
|
if (!this._isLoading()) {
|
|
1577
1535
|
if (a === "format") {
|
|
1578
1536
|
const n = i.getAttribute("data-format");
|
|
1579
|
-
if (!n)
|
|
1580
|
-
return;
|
|
1537
|
+
if (!n) return;
|
|
1581
1538
|
this.setAttribute("format", n), this._error = "", this._updateUI(!1);
|
|
1582
1539
|
return;
|
|
1583
1540
|
}
|
|
@@ -1586,7 +1543,7 @@ class ot extends V {
|
|
|
1586
1543
|
return;
|
|
1587
1544
|
}
|
|
1588
1545
|
if (a === "copy-rgb") {
|
|
1589
|
-
this._copyToClipboard(
|
|
1546
|
+
this._copyToClipboard(w(this._rgba, this._alphaEnabled()));
|
|
1590
1547
|
return;
|
|
1591
1548
|
}
|
|
1592
1549
|
if (a === "eyedropper") {
|
|
@@ -1594,9 +1551,8 @@ class ot extends V {
|
|
|
1594
1551
|
return;
|
|
1595
1552
|
}
|
|
1596
1553
|
if (a === "clear") {
|
|
1597
|
-
if (this._isReadonly())
|
|
1598
|
-
|
|
1599
|
-
const n = f(z);
|
|
1554
|
+
if (this._isReadonly()) return;
|
|
1555
|
+
const n = f(C);
|
|
1600
1556
|
n && (this._applyRgba(n, !1), this._error = "", this._syncValueAttribute(), this._emitInput("text"), this._emitChange("text"), this._pushRecent(this._currentHex()), this._updateUI(!1));
|
|
1601
1557
|
return;
|
|
1602
1558
|
}
|
|
@@ -1605,11 +1561,9 @@ class ot extends V {
|
|
|
1605
1561
|
return;
|
|
1606
1562
|
}
|
|
1607
1563
|
if (a === "preset" || a === "recent") {
|
|
1608
|
-
if (this._isReadonly())
|
|
1609
|
-
return;
|
|
1564
|
+
if (this._isReadonly()) return;
|
|
1610
1565
|
const n = i.getAttribute("data-color") || "", o = f(n);
|
|
1611
|
-
if (!o)
|
|
1612
|
-
return;
|
|
1566
|
+
if (!o) return;
|
|
1613
1567
|
const l = a === "preset" ? "preset" : "recent";
|
|
1614
1568
|
this._applyRgba(o, !0), this._error = "", this._syncValueAttribute(), this._emitInput(l), this._emitChange(l), this._pushRecent(this._currentHex()), this._updateUI(!1);
|
|
1615
1569
|
return;
|
|
@@ -1618,8 +1572,7 @@ class ot extends V {
|
|
|
1618
1572
|
}
|
|
1619
1573
|
_onPanelInput(t, e) {
|
|
1620
1574
|
const r = this._eventHTMLElement(t);
|
|
1621
|
-
if (!(r instanceof HTMLInputElement) || !r.hasAttribute("data-input") || (t.stopPropagation(), this._isDisabled() || this._isReadonly() || this._isLoading()))
|
|
1622
|
-
return;
|
|
1575
|
+
if (!(r instanceof HTMLInputElement) || !r.hasAttribute("data-input") || (t.stopPropagation(), this._isDisabled() || this._isReadonly() || this._isLoading())) return;
|
|
1623
1576
|
const i = this._parseInputsFromPanel(r.closest("[data-cp-panel]"));
|
|
1624
1577
|
if (!i) {
|
|
1625
1578
|
this._error = "";
|
|
@@ -1629,8 +1582,7 @@ class ot extends V {
|
|
|
1629
1582
|
}
|
|
1630
1583
|
_onPanelChange(t, e) {
|
|
1631
1584
|
const r = this._eventHTMLElement(t);
|
|
1632
|
-
if (!(r instanceof HTMLInputElement) || !r.hasAttribute("data-input") || (t.stopPropagation(), this._isDisabled() || this._isReadonly() || this._isLoading()))
|
|
1633
|
-
return;
|
|
1585
|
+
if (!(r instanceof HTMLInputElement) || !r.hasAttribute("data-input") || (t.stopPropagation(), this._isDisabled() || this._isReadonly() || this._isLoading())) return;
|
|
1634
1586
|
const i = r.closest("[data-cp-panel]"), a = this._parseInputsFromPanel(i);
|
|
1635
1587
|
if (!a) {
|
|
1636
1588
|
const n = r.value || "";
|
|
@@ -1641,8 +1593,7 @@ class ot extends V {
|
|
|
1641
1593
|
}
|
|
1642
1594
|
_onPanelKeyDown(t, e) {
|
|
1643
1595
|
const r = this._eventHTMLElement(t);
|
|
1644
|
-
if (!r || this._isDisabled() || this._isLoading())
|
|
1645
|
-
return;
|
|
1596
|
+
if (!r || this._isDisabled() || this._isLoading()) return;
|
|
1646
1597
|
if (r instanceof HTMLInputElement && r.hasAttribute("data-input") && t.key === "Enter") {
|
|
1647
1598
|
t.preventDefault();
|
|
1648
1599
|
const l = this._parseInputsFromPanel(r.closest("[data-cp-panel]"));
|
|
@@ -1654,8 +1605,7 @@ class ot extends V {
|
|
|
1654
1605
|
return;
|
|
1655
1606
|
}
|
|
1656
1607
|
const i = r.getAttribute("data-cp");
|
|
1657
|
-
if (!i || this._isReadonly() || this._isLoading())
|
|
1658
|
-
return;
|
|
1608
|
+
if (!i || this._isReadonly() || this._isLoading()) return;
|
|
1659
1609
|
const a = t.shiftKey ? 5 : 1;
|
|
1660
1610
|
let n = !1;
|
|
1661
1611
|
const o = { ...this._hsva };
|
|
@@ -1676,39 +1626,32 @@ class ot extends V {
|
|
|
1676
1626
|
this._setHsva(t), this._syncValueAttribute(), this._emitInput(e), this._emitChange(e), this._pushRecent(this._currentHex()), this._updateUI(!1);
|
|
1677
1627
|
}
|
|
1678
1628
|
_parseInputsFromPanel(t) {
|
|
1679
|
-
|
|
1680
|
-
if (!t)
|
|
1681
|
-
return null;
|
|
1629
|
+
if (!t) return null;
|
|
1682
1630
|
const e = this._panelRefs(t);
|
|
1683
1631
|
if (this._format === "hex") {
|
|
1684
|
-
const
|
|
1685
|
-
return
|
|
1632
|
+
const l = e.inputHex?.value || "", c = l.trim().startsWith("#") ? l.trim() : `#${l.trim()}`, d = f(c);
|
|
1633
|
+
return d ? this._normalizeByAlpha(d) : null;
|
|
1686
1634
|
}
|
|
1687
1635
|
if (this._format === "rgb") {
|
|
1688
|
-
const
|
|
1689
|
-
return [
|
|
1636
|
+
const l = Number(e.inputR?.value ?? ""), c = Number(e.inputG?.value ?? ""), d = Number(e.inputB?.value ?? ""), v = this._alphaEnabled() ? Number(e.inputA1?.value ?? "") : 1;
|
|
1637
|
+
return [l, c, d, v].every((h) => Number.isFinite(h)) ? this._normalizeByAlpha({ r: l, g: c, b: d, a: v }) : null;
|
|
1690
1638
|
}
|
|
1691
|
-
const r = Number(
|
|
1692
|
-
if (![r, i, a, n].every((
|
|
1693
|
-
return null;
|
|
1639
|
+
const r = Number(e.inputH?.value ?? ""), i = Number(e.inputS?.value ?? ""), a = Number(e.inputL?.value ?? ""), n = this._alphaEnabled() ? Number(e.inputA2?.value ?? "") : 1;
|
|
1640
|
+
if (![r, i, a, n].every((l) => Number.isFinite(l))) return null;
|
|
1694
1641
|
const o = {
|
|
1695
1642
|
h: u(r, 0, 360),
|
|
1696
1643
|
s: u(i, 0, 100),
|
|
1697
1644
|
l: u(a, 0, 100),
|
|
1698
1645
|
a: u(n, 0, 1)
|
|
1699
1646
|
};
|
|
1700
|
-
return this._normalizeByAlpha(
|
|
1647
|
+
return this._normalizeByAlpha($(o));
|
|
1701
1648
|
}
|
|
1702
1649
|
_onPanelPointerDown(t, e) {
|
|
1703
|
-
|
|
1704
|
-
if (this._isDisabled() || this._isReadonly() || this._isLoading())
|
|
1705
|
-
return;
|
|
1650
|
+
if (this._isDisabled() || this._isReadonly() || this._isLoading()) return;
|
|
1706
1651
|
const r = this._eventHTMLElement(t);
|
|
1707
|
-
if (!r)
|
|
1708
|
-
|
|
1709
|
-
|
|
1710
|
-
if (!i || i === "alpha" && !this._alphaEnabled())
|
|
1711
|
-
return;
|
|
1652
|
+
if (!r) return;
|
|
1653
|
+
const i = r.closest("[data-cp]")?.getAttribute("data-cp");
|
|
1654
|
+
if (!i || i === "alpha" && !this._alphaEnabled()) return;
|
|
1712
1655
|
const a = r.closest(`[data-cp="${i}"]`);
|
|
1713
1656
|
if (a) {
|
|
1714
1657
|
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";
|
|
@@ -1734,8 +1677,7 @@ class ot extends V {
|
|
|
1734
1677
|
this._dragRaf && (cancelAnimationFrame(this._dragRaf), this._dragRaf = 0);
|
|
1735
1678
|
}
|
|
1736
1679
|
_applyDragPointer(t) {
|
|
1737
|
-
if (!this._dragTarget || !this._dragRect)
|
|
1738
|
-
return;
|
|
1680
|
+
if (!this._dragTarget || !this._dragRect) return;
|
|
1739
1681
|
const e = this._dragRect, r = u(this._dragX - e.left, 0, e.width || 1), i = u(this._dragY - e.top, 0, e.height || 1), a = { ...this._hsva };
|
|
1740
1682
|
this._dragTarget === "sv" ? (a.s = u(r / Math.max(e.width, 1) * 100, 0, 100), a.v = u(100 - i / Math.max(e.height, 1) * 100, 0, 100)) : this._dragTarget === "hue" ? a.h = u(r / Math.max(e.width, 1) * 360, 0, 360) : this._dragTarget === "alpha" && (a.a = u(r / Math.max(e.width, 1), 0, 1)), this._setHsva(a) && (this._dragChanged = !0, t && this._emitInput(this._dragSource), this._updateUI(!0, !0));
|
|
1741
1683
|
}
|
|
@@ -1746,7 +1688,7 @@ class ot extends V {
|
|
|
1746
1688
|
v: u(t.v, 0, 100),
|
|
1747
1689
|
a: this._alphaEnabled() ? u(t.a, 0, 1) : 1
|
|
1748
1690
|
}, r = this._hsva;
|
|
1749
|
-
return
|
|
1691
|
+
return E(r.h, e.h) && E(r.s, e.s) && E(r.v, e.v) && E(r.a, e.a) ? !1 : (this._hsva = e, this._rgba = this._normalizeByAlpha(Q(this._hsva)), this._error = "", !0);
|
|
1750
1692
|
}
|
|
1751
1693
|
_stopDrag(t) {
|
|
1752
1694
|
this._cancelDragFrame();
|
|
@@ -1754,8 +1696,7 @@ class ot extends V {
|
|
|
1754
1696
|
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));
|
|
1755
1697
|
}
|
|
1756
1698
|
_pushRecent(t) {
|
|
1757
|
-
if (!this._recentEnabled())
|
|
1758
|
-
return;
|
|
1699
|
+
if (!this._recentEnabled()) return;
|
|
1759
1700
|
const e = (t || "").trim().toUpperCase();
|
|
1760
1701
|
e && (this._recentColors = [e, ...this._recentColors.filter((r) => r.toUpperCase() !== e)].slice(
|
|
1761
1702
|
0,
|
|
@@ -1763,38 +1704,34 @@ class ot extends V {
|
|
|
1763
1704
|
), this._persistRecentColors());
|
|
1764
1705
|
}
|
|
1765
1706
|
async _openEyeDropper() {
|
|
1766
|
-
if (this._isDisabled() || this._isReadonly() || this._isLoading() || typeof window > "u")
|
|
1767
|
-
return;
|
|
1707
|
+
if (this._isDisabled() || this._isReadonly() || this._isLoading() || typeof window > "u") return;
|
|
1768
1708
|
const t = window.EyeDropper;
|
|
1769
1709
|
if (typeof t == "function")
|
|
1770
1710
|
try {
|
|
1771
|
-
const r = await new t().open(), i = f(
|
|
1772
|
-
if (!i)
|
|
1773
|
-
return;
|
|
1711
|
+
const r = await new t().open(), i = f(r?.sRGBHex || "");
|
|
1712
|
+
if (!i) return;
|
|
1774
1713
|
this._applyRgba(i, !0), this._error = "", this._syncValueAttribute(), this._emitInput("eyedropper"), this._emitChange("eyedropper"), this._pushRecent(this._currentHex()), this._updateUI(!1);
|
|
1775
1714
|
} catch {
|
|
1776
1715
|
}
|
|
1777
1716
|
}
|
|
1778
1717
|
async _copyToClipboard(t) {
|
|
1779
|
-
|
|
1780
|
-
if (!t || this._isDisabled())
|
|
1781
|
-
return;
|
|
1718
|
+
if (!t || this._isDisabled()) return;
|
|
1782
1719
|
let e = !1;
|
|
1783
|
-
if (typeof navigator < "u" &&
|
|
1720
|
+
if (typeof navigator < "u" && navigator.clipboard?.writeText)
|
|
1784
1721
|
try {
|
|
1785
1722
|
await navigator.clipboard.writeText(t), e = !0;
|
|
1786
1723
|
} catch {
|
|
1787
1724
|
e = !1;
|
|
1788
1725
|
}
|
|
1789
1726
|
if (!e && typeof document < "u") {
|
|
1790
|
-
const
|
|
1791
|
-
|
|
1727
|
+
const a = document.createElement("textarea");
|
|
1728
|
+
a.value = t, a.setAttribute("readonly", ""), a.style.position = "fixed", a.style.opacity = "0", document.body.appendChild(a), a.select();
|
|
1792
1729
|
try {
|
|
1793
1730
|
e = document.execCommand("copy");
|
|
1794
1731
|
} catch {
|
|
1795
1732
|
e = !1;
|
|
1796
1733
|
} finally {
|
|
1797
|
-
|
|
1734
|
+
a.parentElement && a.parentElement.removeChild(a);
|
|
1798
1735
|
}
|
|
1799
1736
|
}
|
|
1800
1737
|
const r = e ? `Copied ${t}` : `Unable to copy ${t}`, i = typeof window < "u" ? window.showToast : null;
|
|
@@ -1812,7 +1749,7 @@ class ot extends V {
|
|
|
1812
1749
|
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");
|
|
1813
1750
|
}
|
|
1814
1751
|
}
|
|
1815
|
-
customElements.get("ui-color-picker") || customElements.define("ui-color-picker",
|
|
1752
|
+
customElements.get("ui-color-picker") || customElements.define("ui-color-picker", rt);
|
|
1816
1753
|
export {
|
|
1817
|
-
|
|
1754
|
+
rt as UIColorPicker
|
|
1818
1755
|
};
|