@orangelogic/design-system 2.141.0 → 2.142.0
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/library/chunks/{asset-link-format.BDuHqEN5.js → asset-link-format.Du63EIst.js} +238 -214
- package/library/chunks/{document-viewer.BqZzhJyR.js → document-viewer.DQXvmHvo.js} +1 -1
- package/library/chunks/{endpoints.BlywT4Gl.js → endpoints.ASL1clzd.js} +89 -88
- package/library/chunks/{file-on-demand.Bxq3-Dk1.js → file-on-demand.Bve3SdQJ.js} +39 -39
- package/library/chunks/{folder-select.CpK1RX9O.js → folder-select.BudMvcEM.js} +1 -1
- package/library/chunks/{image.u2nQNoZ8.js → image.B3vsXGrN.js} +1 -1
- package/library/components/asset-link-format.js +1 -1
- package/library/components/atoms.js +2 -2
- package/library/components/color-picker.js +79 -72
- package/library/components/document-viewer.js +2 -2
- package/library/components/file-on-demand.js +1 -1
- package/library/components/folder-select.js +2 -2
- package/library/components/image.js +1 -1
- package/library/components/masonry.js +1 -1
- package/library/components/molecules.js +1 -1
- package/library/components/organisms.js +2 -2
- package/library/components/types.js +10210 -10194
- package/library/components/video.js +1 -1
- package/library/package.json +1 -1
- package/library/packages/atoms/src/components/color-picker/color-picker.d.ts +1 -0
- package/library/packages/molecules/src/asset-format-picker/asset-format-picker.d.ts +1 -0
- package/library/packages/organisms/src/asset-transformation-dialog/asset-transformation-dialog.d.ts +2 -1
- package/library/packages/organisms/src/content-builder/configs/image.d.ts +1 -0
- package/library/packages/organisms/src/content-builder/configs-controller.d.ts +1 -0
- package/library/packages/services/src/api/asset/asset.d.ts +2 -1
- package/library/packages/services/src/api/endpoints.d.ts +3 -0
- package/package.json +1 -1
|
@@ -1,40 +1,42 @@
|
|
|
1
|
-
import { n as l, C as
|
|
2
|
-
import { c as
|
|
3
|
-
import { c as
|
|
4
|
-
import { d as
|
|
5
|
-
import { d as
|
|
6
|
-
import { d as
|
|
7
|
-
import { F as
|
|
8
|
-
import { L as
|
|
1
|
+
import { n as l, C as D } from "../chunks/lib-cortex-element.CVMmyPMC.js";
|
|
2
|
+
import { c as E } from "../chunks/component.styles.CRO4Odto.js";
|
|
3
|
+
import { c as I } from "../chunks/custom-element.L4WJXn1j.js";
|
|
4
|
+
import { d as S } from "../chunks/debounce.DaHuiSGU.js";
|
|
5
|
+
import { d as H } from "../chunks/default-value.COZopaet.js";
|
|
6
|
+
import { d as w } from "../chunks/drag.DXEXVXPv.js";
|
|
7
|
+
import { F as M } from "../chunks/form.BSqXLytJ.js";
|
|
8
|
+
import { L as O } from "../chunks/i18n.DeUAP8n2.js";
|
|
9
9
|
import { c as u } from "../chunks/math.DuKzLacZ.js";
|
|
10
|
-
import { w as
|
|
11
|
-
import { i as
|
|
10
|
+
import { w as $ } from "../chunks/watch.CThbualB.js";
|
|
11
|
+
import { i as A, x as h } from "../chunks/lit-element.jLBm65_O.js";
|
|
12
12
|
import { r as g } from "../chunks/state.CSDxrqLd.js";
|
|
13
|
-
import { t as
|
|
14
|
-
import { e as
|
|
15
|
-
import { e as
|
|
16
|
-
import { o as
|
|
13
|
+
import { t as P } from "../chunks/event-options.CYHYGOd8.js";
|
|
14
|
+
import { e as b } from "../chunks/query.BBf1UFkC.js";
|
|
15
|
+
import { e as _ } from "../chunks/class-map.BiVq-cVR.js";
|
|
16
|
+
import { o as y } from "../chunks/if-defined.BRoBj_Rp.js";
|
|
17
17
|
import { o as f } from "../chunks/style-map.llVFPd__.js";
|
|
18
18
|
import { n as d } from "../chunks/when.Dr1es41R.js";
|
|
19
|
-
import { C as
|
|
20
|
-
import
|
|
21
|
-
import
|
|
22
|
-
import { C as
|
|
23
|
-
import { C as
|
|
24
|
-
import
|
|
25
|
-
import
|
|
26
|
-
import { T as
|
|
19
|
+
import { C as B } from "../chunks/button.C6-GrLyD.js";
|
|
20
|
+
import L from "./button-group.js";
|
|
21
|
+
import T from "./dropdown.js";
|
|
22
|
+
import { C as N } from "../chunks/icon.DnBh6-56.js";
|
|
23
|
+
import { C as K } from "../chunks/input.ClJ4MEsk.js";
|
|
24
|
+
import R from "./spinner.js";
|
|
25
|
+
import q from "./visually-hidden.js";
|
|
26
|
+
import { T as k } from "../chunks/index.C1chwzNp.js";
|
|
27
27
|
var m = /* @__PURE__ */ ((t) => (t.Hex = "hex", t.Rgb = "rgb", t.Hsl = "hsl", t.Hsv = "hsv", t))(m || {});
|
|
28
|
-
const
|
|
29
|
-
var
|
|
30
|
-
|
|
28
|
+
const G = A`:host{--grid-width:280px;--grid-height:200px;--grid-handle-size:16px;--slider-height:15px;--slider-handle-size:17px;--swatch-size:25px;--format-button-width:52px;--eye-dropper-button-width:52px;--control-border-color:var(--cx-color-neutral-300);--control-button-color:var(--cx-color-neutral-0);--control-caret-color:var(--cx-color-neutral-800);display:inline-block}.color-picker{width:var(--grid-width);font-family:var(--cx-font-sans);font-size:var(--cx-font-size-medium);font-weight:var(--cx-font-weight-regular);color:var(--color);background-color:var(--cx-panel-background-color);border-radius:var(--cx-border-radius-small);-webkit-user-select:none;user-select:none}.color-picker--inline{border:var(--inline-border,solid var(--cx-panel-border-width) var(--cx-panel-border-color))}.color-picker--inline:focus-visible{outline:var(--cx-focus-ring);outline-offset:var(--cx-focus-ring-offset)}.color-picker__grid{height:var(--grid-height);border-top-left-radius:var(--cx-border-radius-small);border-top-right-radius:var(--cx-border-radius-small);cursor:crosshair;forced-color-adjust:none;background-image:linear-gradient(#0000 0%,#000 100%),linear-gradient(90deg,#fff 0%,#fff0 100%);position:relative}.color-picker__grid-handle{width:var(--grid-handle-size);height:var(--grid-handle-size);margin-top:calc(var(--grid-handle-size) / -2);margin-left:calc(var(--grid-handle-size) / -2);transition:var(--cx-transition-fast) scale;border:2px solid #fff;border-radius:50%;position:absolute;box-shadow:0 0 0 1px #00000040}.color-picker__grid-handle--dragging{cursor:none;scale:1.5}.color-picker__grid-handle:focus-visible{outline:var(--cx-focus-ring)}.color-picker__controls{padding:var(--cx-spacing-small);align-items:center;gap:var(--cx-spacing-small);display:flex}.color-picker__sliders{flex:auto}.color-picker__slider{height:var(--slider-height);border-radius:var(--cx-border-radius-pill);forced-color-adjust:none;position:relative;box-shadow:inset 0 0 0 1px #0003}.color-picker__slider:not(:last-of-type){margin-bottom:var(--cx-spacing-small)}.color-picker__slider-handle{top:calc(50% - var(--slider-handle-size) / 2);width:var(--slider-handle-size);height:var(--slider-handle-size);margin-left:calc(var(--slider-handle-size) / -2);background-color:#fff;border-radius:50%;position:absolute;box-shadow:0 0 0 1px #00000040}.color-picker__slider-handle:focus-visible{outline:var(--cx-focus-ring)}.color-picker__hue{background-image:linear-gradient(90deg,red 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}.color-picker__alpha .color-picker__alpha-gradient{border-radius:inherit;width:100%;height:100%;position:absolute;top:0;left:0}.color-picker__preview{border-radius:var(--cx-border-radius-circle);cursor:pointer;forced-color-adjust:none;width:2rem;height:2rem;width:var(--cx-input-height-medium);height:var(--cx-input-height-medium);background:0 0;border:none;flex:none;justify-content:center;align-items:center;display:inline-flex;position:relative}.color-picker__preview--button,.color-picker__preview--button::part(base){border-radius:var(--cx-border-radius-small)}.color-picker__preview:focus-visible{outline:var(--cx-focus-ring);outline-offset:var(--cx-focus-ring-offset)}.color-picker__preview-color{border:1px solid #00000020;width:100%;height:100%;position:absolute;top:0;left:0}.color-picker__preview-color--copied{animation:.75s pulse}.color-picker__preview.color-picker__preview--button{outline:solid 1px var(--control-border-color)}.color-picker__preview--small.color-picker__preview--button{width:var(--cx-toggle-size-small);height:var(--cx-toggle-size-small)}.color-picker__preview--medium.color-picker__preview--button{width:var(--cx-toggle-size-medium);height:var(--cx-toggle-size-medium)}.color-picker__preview--large.color-picker__preview--button{width:var(--cx-toggle-size-large);height:var(--cx-toggle-size-large)}.color-picker__preview:before{content:"";border-radius:inherit;background-color:var(--preview-color,currentColor);width:100%;height:100%;position:absolute;top:0;left:0}.color-picker__preview--empty:before{background-color:#0000}.color-picker__preview__transparent-bg{background-image:linear-gradient(45deg, var(--cx-color-neutral-300) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--cx-color-neutral-300) 75%), linear-gradient(45deg, transparent 75%, var(--cx-color-neutral-300) 75%), linear-gradient(45deg, var(--cx-color-neutral-300) 25%, transparent 25%);background-position:0 0,0 0,-5px -5px,5px 5px;background-size:10px 10px}@keyframes pulse{0%{box-shadow:0 0 0 0 var(--cx-color-primary-500)}70%{box-shadow:0 0 0 .5rem #0000}to{box-shadow:0 0 #0000}}.color-picker__preview__container{align-items:center;gap:var(--cx-spacing-2x-small);display:flex}.color-picker__user-input__container{padding:0 var(--cx-spacing-small) var(--cx-spacing-small) var(--cx-spacing-small);display:flex}.color-picker__input_color{flex:auto;min-width:0}.color-picker__input_opacity{margin-left:var(--cx-spacing-2x-small);width:54px}.color-picker__input_opacity::part(input){padding-left:var(--cx-spacing-x-small);padding-right:var(--cx-spacing-x-small)}.color-picker__user-input__container cx-button-group{margin-left:var(--cx-spacing-2x-small)}.color-picker__user-input__container cx-button{font-size:var(--cx-font-size-medium)}.color-picker__user-input__container cx-button[part=format-button]{min-width:var(--format-button-width);max-width:var(--format-button-width)}.color-picker__user-input__container cx-button[part=eye-dropper-button]{min-width:var(--eye-dropper-button-width);max-width:var(--eye-dropper-button-width)}.color-picker__swatches{grid-gap:.5rem;border-top:solid 1px var(--cx-color-neutral-200);padding:var(--cx-spacing-small);forced-color-adjust:none;grid-template-columns:repeat(8,1fr);justify-items:center;display:grid}.color-picker__customSwatches{grid-gap:.5rem;padding:0 var(--cx-spacing-small) var(--cx-spacing-small) var(--cx-spacing-small);forced-color-adjust:none;grid-template-columns:repeat(8,1fr);justify-items:center;display:grid}.color-picker__customSwatches-label{--cx-button-text-transform:none;padding:var(--cx-spacing-small);justify-content:space-between;align-items:center;width:100%;display:inline-flex}.color-picker__spinner{text-align:center;margin:var(--cx-spacing-small) 0}.color-picker__swatch{width:var(--swatch-size);height:var(--swatch-size);border-radius:var(--cx-border-radius-small);position:relative}.color-picker__swatch .color-picker__swatch-color{border-radius:inherit;cursor:pointer;border:1px solid #00000020;width:100%;height:100%;position:absolute;top:0;left:0}.color-picker__swatch:focus-visible{outline:var(--cx-focus-ring);outline-offset:var(--cx-focus-ring-offset)}.color-picker--disabled{opacity:.5;cursor:default}.color-picker--disabled .color-picker__grid,.color-picker--disabled .color-picker__grid-handle,.color-picker--disabled .color-picker__slider,.color-picker--disabled .color-picker__slider-handle,.color-picker--disabled .color-picker__preview,.color-picker--disabled .color-picker__swatch,.color-picker--disabled .color-picker__swatch-color{pointer-events:none}.color-dropdown::part(panel){background-color:var(--cx-panel-background-color);border:solid var(--cx-panel-border-width) var(--cx-panel-border-color);border-radius:var(--cx-border-radius-small);max-height:none;overflow:visible}.color-dropdown__trigger::part(base){background-color:var(--control-button-color);border-color:var(--control-border-color);border-radius:var(--cx-border-radius-medium);padding-inline-start:var(--cx-spacing-2x-small);padding-inline-end:var(--cx-spacing-2x-small)}.color-dropdown__trigger::part(label){padding-inline-start:var(--cx-spacing-2x-small);padding-inline-end:var(--cx-spacing-2x-small)}.color-dropdown__trigger{cursor:pointer;forced-color-adjust:none;background-color:#0000;border:none;display:inline-block;position:relative}.color-dropdown__trigger:focus-visible{outline:none}.color-dropdown__trigger.color-dropdown__trigger--disabled{opacity:.5;cursor:default}.color-dropdown__trigger-icon{color:var(--control-caret-color);font-size:var(--cx-font-size-large);justify-content:flex-end;align-items:center;width:100%;height:100%;display:flex}cx-tooltip{display:inline-block}`;
|
|
29
|
+
var j = Object.defineProperty, U = Object.getOwnPropertyDescriptor, F = (t) => {
|
|
30
|
+
throw TypeError(t);
|
|
31
|
+
}, o = (t, e, i, s) => {
|
|
32
|
+
for (var a = s > 1 ? void 0 : s ? U(e, i) : e, c = t.length - 1, p; c >= 0; c--)
|
|
31
33
|
(p = t[c]) && (a = (s ? p(e, i, a) : p(a)) || a);
|
|
32
|
-
return s && a &&
|
|
33
|
-
};
|
|
34
|
-
const
|
|
35
|
-
let r = class extends
|
|
34
|
+
return s && a && j(e, i, a), a;
|
|
35
|
+
}, z = (t, e, i) => e.has(t) || F("Cannot " + i), W = (t, e, i) => (z(t, e, "read from private field"), e.get(t)), X = (t, e, i) => e.has(t) ? F("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, i), C = (t, e, i, s) => (z(t, e, "write to private field"), e.set(t, i), i), x;
|
|
36
|
+
const V = "EyeDropper" in window;
|
|
37
|
+
let r = class extends D {
|
|
36
38
|
constructor() {
|
|
37
|
-
super(), this.formControlController = new
|
|
39
|
+
super(), this.formControlController = new M(this), this.isSafeValue = !1, X(this, x, !1), this.localize = new O(this), this.hasFocus = !1, this.isDraggingGridHandle = !1, this.isEmpty = !1, this.inputColorValue = "", this.inputOpacityValue = "", this.hue = 0, this.saturation = 100, this.brightness = 100, this.alpha = 100, this.value = "", this.defaultValue = "", this.label = "", this.variant = "default", this.format = m.Hex, this.formats = [
|
|
38
40
|
m.Hex,
|
|
39
41
|
m.Rgb,
|
|
40
42
|
m.Hsl
|
|
@@ -82,7 +84,7 @@ let r = class extends V {
|
|
|
82
84
|
".color-picker__slider-handle"
|
|
83
85
|
), { width: s } = e.getBoundingClientRect();
|
|
84
86
|
let a = this.value, c = this.value;
|
|
85
|
-
i.focus(), t.preventDefault(),
|
|
87
|
+
i.focus(), t.preventDefault(), w(e, {
|
|
86
88
|
initialEvent: t,
|
|
87
89
|
onMove: (p) => {
|
|
88
90
|
this.alpha = u(p / s * 100, 0, 100), this.syncValues(), this.value !== c && (c = this.value, this.emit("cx-input"));
|
|
@@ -99,7 +101,7 @@ let r = class extends V {
|
|
|
99
101
|
".color-picker__slider-handle"
|
|
100
102
|
), { width: s } = e.getBoundingClientRect();
|
|
101
103
|
let a = this.value, c = this.value;
|
|
102
|
-
i.focus(), t.preventDefault(),
|
|
104
|
+
i.focus(), t.preventDefault(), w(e, {
|
|
103
105
|
initialEvent: t,
|
|
104
106
|
onMove: (p) => {
|
|
105
107
|
this.hue = u(p / s * 360, 0, 360), this.syncValues(), this.value !== c && (c = this.value, this.emit("cx-input"));
|
|
@@ -116,7 +118,7 @@ let r = class extends V {
|
|
|
116
118
|
".color-picker__grid-handle"
|
|
117
119
|
), { height: s, width: a } = e.getBoundingClientRect();
|
|
118
120
|
let c = this.value, p = this.value;
|
|
119
|
-
i.focus(), t.preventDefault(), this.isDraggingGridHandle = !0,
|
|
121
|
+
i.focus(), t.preventDefault(), this.isDraggingGridHandle = !0, w(e, {
|
|
120
122
|
initialEvent: t,
|
|
121
123
|
onMove: (v, n) => {
|
|
122
124
|
this.saturation = u(v / a * 100, 0, 100), this.brightness = u(100 - n / s * 100, 0, 100), this.syncValues(), this.value !== p && (p = this.value, this.emit("cx-input"));
|
|
@@ -147,7 +149,7 @@ let r = class extends V {
|
|
|
147
149
|
}
|
|
148
150
|
debouncedSetColor() {
|
|
149
151
|
const t = this.getFormatFromValue(this.input.value);
|
|
150
|
-
t && t !== this.format && (this.format = t), this.setColor(this.input.value, !1), this.inputOpacityValue = Math.round(this.alpha).toString();
|
|
152
|
+
t && t !== this.format && (C(this, x, !0), this.format = t), this.setColor(this.input.value, !1), this.inputOpacityValue = Math.round(this.alpha).toString();
|
|
151
153
|
}
|
|
152
154
|
handleInputKeyDown(t) {
|
|
153
155
|
if (t.key === "Enter") {
|
|
@@ -194,7 +196,7 @@ let r = class extends V {
|
|
|
194
196
|
parseColor(t) {
|
|
195
197
|
if (!t)
|
|
196
198
|
return null;
|
|
197
|
-
const e = new
|
|
199
|
+
const e = new k(t);
|
|
198
200
|
if (!e.isValid)
|
|
199
201
|
return null;
|
|
200
202
|
const i = e.toHsl(), s = {
|
|
@@ -299,7 +301,7 @@ let r = class extends V {
|
|
|
299
301
|
this.previewButton.classList.remove("color-picker__preview-color--copied");
|
|
300
302
|
}
|
|
301
303
|
handleEyeDropper() {
|
|
302
|
-
if (
|
|
304
|
+
if (!V)
|
|
303
305
|
return;
|
|
304
306
|
new EyeDropper().open().then((e) => {
|
|
305
307
|
const i = this.value;
|
|
@@ -326,7 +328,7 @@ let r = class extends V {
|
|
|
326
328
|
}
|
|
327
329
|
/** Generates a hex string from HSV values. Hue must be 0-360. All other arguments must be 0-100. */
|
|
328
330
|
getHexString(t, e, i, s = 100) {
|
|
329
|
-
const a = new
|
|
331
|
+
const a = new k(
|
|
330
332
|
`hsva(${t}, ${e}%, ${i}%, ${s / 100})`
|
|
331
333
|
);
|
|
332
334
|
return a.isValid ? a.toHex8String() : "";
|
|
@@ -337,7 +339,7 @@ let r = class extends V {
|
|
|
337
339
|
* @returns The color format.
|
|
338
340
|
*/
|
|
339
341
|
getFormatFromValue(t) {
|
|
340
|
-
const e = new
|
|
342
|
+
const e = new k(t);
|
|
341
343
|
return !e.isValid || !this.formats || this.formats.length === 0 ? null : this.formats.includes(e.format) ? e.format : this.formats[0];
|
|
342
344
|
}
|
|
343
345
|
// Prevents nested components from leaking events
|
|
@@ -345,6 +347,10 @@ let r = class extends V {
|
|
|
345
347
|
t.stopImmediatePropagation();
|
|
346
348
|
}
|
|
347
349
|
handleFormatChange() {
|
|
350
|
+
if (W(this, x)) {
|
|
351
|
+
C(this, x, !1);
|
|
352
|
+
return;
|
|
353
|
+
}
|
|
348
354
|
this.syncValues();
|
|
349
355
|
}
|
|
350
356
|
handleOpacityChange() {
|
|
@@ -421,11 +427,11 @@ let r = class extends V {
|
|
|
421
427
|
if (!i)
|
|
422
428
|
return console.error(`Unable to parse swatch color: "${e}"`, this), "";
|
|
423
429
|
const s = () => this.selectSwatch(e), a = (c) => !this.disabled && c.key === "Enter" && this.setColor(i.hexa);
|
|
424
|
-
return h`<div part="swatch" class="color-picker__swatch color-picker__transparent-bg" tabindex=${
|
|
430
|
+
return h`<div part="swatch" class="color-picker__swatch color-picker__transparent-bg" tabindex=${y(this.disabled ? void 0 : "0")} role="button" aria-label=${e} @click=${s} @keydown=${a}><div class="color-picker__swatch-color" style=${f({ backgroundColor: i.hexa })}></div></div>`;
|
|
425
431
|
});
|
|
426
432
|
}
|
|
427
433
|
render() {
|
|
428
|
-
const t = this.saturation, e = 100 - this.brightness, i = this.swatches ? Array.isArray(this.swatches) ? this.swatches : this.swatches.split(";").filter((n) => n.trim() !== "") : [], s = this.customSwatches ? Array.isArray(this.customSwatches) ? this.customSwatches : this.customSwatches.split(";").filter((n) => n.trim() !== "") : [], a = this.inputOpacityValue.endsWith("%") ? this.inputOpacityValue : `${this.inputOpacityValue}%`, c = h`<div part="base" class=${
|
|
434
|
+
const t = this.saturation, e = 100 - this.brightness, i = this.swatches ? Array.isArray(this.swatches) ? this.swatches : this.swatches.split(";").filter((n) => n.trim() !== "") : [], s = this.customSwatches ? Array.isArray(this.customSwatches) ? this.customSwatches : this.customSwatches.split(";").filter((n) => n.trim() !== "") : [], a = this.inputOpacityValue.endsWith("%") ? this.inputOpacityValue : `${this.inputOpacityValue}%`, c = h`<div part="base" class=${_({
|
|
429
435
|
"color-picker": !0,
|
|
430
436
|
"color-picker--disabled": this.disabled,
|
|
431
437
|
"color-picker--focused": this.hasFocus,
|
|
@@ -435,7 +441,7 @@ let r = class extends V {
|
|
|
435
441
|
() => h`<cx-visually-hidden id="label"><slot name="label">${this.label}</slot></cx-visually-hidden>`
|
|
436
442
|
)}<div part="grid" class="color-picker__grid" style=${f({
|
|
437
443
|
backgroundColor: this.getHexString(this.hue, 100, 100)
|
|
438
|
-
})} @pointerdown=${this.handleGridDrag} @touchmove=${this.handleTouchMove}><span part="grid-handle" class=${
|
|
444
|
+
})} @pointerdown=${this.handleGridDrag} @touchmove=${this.handleTouchMove}><span part="grid-handle" class=${_({
|
|
439
445
|
"color-picker__grid-handle": !0,
|
|
440
446
|
"color-picker__grid-handle--dragging": this.isDraggingGridHandle
|
|
441
447
|
})} style=${f({
|
|
@@ -447,9 +453,9 @@ let r = class extends V {
|
|
|
447
453
|
),
|
|
448
454
|
left: `${t}%`,
|
|
449
455
|
top: `${e}%`
|
|
450
|
-
})} role="application" aria-label="HSV" tabindex=${
|
|
456
|
+
})} role="application" aria-label="HSV" tabindex=${y(this.disabled ? void 0 : "0")} @keydown=${this.handleGridKeyDown}></span></div><div class="color-picker__controls"><div class="color-picker__sliders"><div part="slider hue-slider" class="color-picker__hue color-picker__slider" @pointerdown=${this.handleHueDrag} @touchmove=${this.handleTouchMove}><span part="slider-handle hue-slider-handle" class="color-picker__slider-handle" style=${f({
|
|
451
457
|
left: `${this.hue === 0 ? 0 : 100 / (360 / this.hue)}%`
|
|
452
|
-
})} role="slider" aria-label="hue" aria-orientation="horizontal" aria-valuemin="0" aria-valuemax="360" aria-valuenow=${`${Math.round(this.hue)}`} tabindex=${
|
|
458
|
+
})} role="slider" aria-label="hue" aria-orientation="horizontal" aria-valuemin="0" aria-valuemax="360" aria-valuenow=${`${Math.round(this.hue)}`} tabindex=${y(this.disabled ? void 0 : "0")} @keydown=${this.handleHueKeyDown}></span></div>${d(
|
|
453
459
|
this.opacity,
|
|
454
460
|
() => h`<div part="slider opacity-slider" class="color-picker__alpha color-picker__slider color-picker__transparent-bg" @pointerdown=${this.handleAlphaDrag} @touchmove=${this.handleTouchMove}><div class="color-picker__alpha-gradient" style=${f({
|
|
455
461
|
backgroundImage: `linear-gradient(
|
|
@@ -469,8 +475,8 @@ let r = class extends V {
|
|
|
469
475
|
)`
|
|
470
476
|
})}></div><span part="slider-handle opacity-slider-handle" class="color-picker__slider-handle" style=${f({
|
|
471
477
|
left: `${this.alpha}%`
|
|
472
|
-
})} role="slider" aria-label="alpha" aria-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-valuenow=${Math.round(this.alpha)} tabindex=${
|
|
473
|
-
)}</div><div class="color-picker__preview__container"><button type="button" part="preview" class=${
|
|
478
|
+
})} role="slider" aria-label="alpha" aria-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-valuenow=${Math.round(this.alpha)} tabindex=${y(this.disabled ? void 0 : "0")} @keydown=${this.handleAlphaKeyDown}></span></div>`
|
|
479
|
+
)}</div><div class="color-picker__preview__container"><button type="button" part="preview" class=${_({
|
|
474
480
|
"color-picker__preview": !0,
|
|
475
481
|
"color-picker__preview--button": this.variant === "button",
|
|
476
482
|
"color-picker__preview--empty": this.isEmpty,
|
|
@@ -513,7 +519,7 @@ let r = class extends V {
|
|
|
513
519
|
" @click=${this.handleFormatToggle} @cx-blur=${this.stopNestedEventPropagation} @cx-focus=${this.stopNestedEventPropagation}>${this.setLetterCase(this.format)}</cx-button>`
|
|
514
520
|
)}
|
|
515
521
|
${d(
|
|
516
|
-
|
|
522
|
+
V,
|
|
517
523
|
() => h`<cx-button part="eye-dropper-button" exportparts="
|
|
518
524
|
base:eye-dropper-button__base,
|
|
519
525
|
prefix:eye-dropper-button__prefix,
|
|
@@ -540,10 +546,10 @@ let r = class extends V {
|
|
|
540
546
|
${d(
|
|
541
547
|
this.loading,
|
|
542
548
|
() => h`<div part="loading-spinner" class="color-picker__spinner"><cx-spinner></cx-spinner></div>`
|
|
543
|
-
)}</div>`, p = this.variant === "button" ? h`<cx-button part="trigger" class=${
|
|
549
|
+
)}</div>`, p = this.variant === "button" ? h`<cx-button part="trigger" class=${_({
|
|
544
550
|
"color-dropdown__trigger": !0,
|
|
545
551
|
"color-dropdown__trigger--focused": this.hasFocus
|
|
546
|
-
})} outline aria-label=${this.label} ?disabled=${this.disabled} type="button" size=${this.size} @cx-blur=${this.stopNestedEventPropagation}><div slot="prefix" part="preview" class=${
|
|
552
|
+
})} outline aria-label=${this.label} ?disabled=${this.disabled} type="button" size=${this.size} @cx-blur=${this.stopNestedEventPropagation}><div slot="prefix" part="preview" class=${_({
|
|
547
553
|
"color-picker__preview": !0,
|
|
548
554
|
"color-picker__preview--button": !0,
|
|
549
555
|
"color-picker__preview--empty": this.isEmpty,
|
|
@@ -558,7 +564,7 @@ let r = class extends V {
|
|
|
558
564
|
this.brightness,
|
|
559
565
|
this.alpha
|
|
560
566
|
)
|
|
561
|
-
})}></div><slot slot="suffix" name="expand-icon" part="expand-icon" class="color-dropdown__trigger-icon"><cx-icon name="expand_more"></cx-icon></slot><cx-visually-hidden><slot name="label">${this.label}</slot></cx-visually-hidden></cx-button>` : h`<button part="trigger" class=${
|
|
567
|
+
})}></div><slot slot="suffix" name="expand-icon" part="expand-icon" class="color-dropdown__trigger-icon"><cx-icon name="expand_more"></cx-icon></slot><cx-visually-hidden><slot name="label">${this.label}</slot></cx-visually-hidden></cx-button>` : h`<button part="trigger" class=${_({
|
|
562
568
|
"color-picker__preview": !0,
|
|
563
569
|
"color-picker__preview--empty": this.isEmpty,
|
|
564
570
|
"color-picker__preview--large": this.size === "large",
|
|
@@ -577,39 +583,40 @@ let r = class extends V {
|
|
|
577
583
|
() => h`<cx-tooltip content=${this.tooltip}>${p}</cx-tooltip>`,
|
|
578
584
|
() => p
|
|
579
585
|
);
|
|
580
|
-
return this.inline ? c : h`<cx-dropdown aria-disabled=${this.disabled ? "true" : "false"} class=${
|
|
586
|
+
return this.inline ? c : h`<cx-dropdown aria-disabled=${this.disabled ? "true" : "false"} class=${_({
|
|
581
587
|
"color-dropdown": !0,
|
|
582
588
|
"color-dropdown--opened": !!this.dropdown?.open
|
|
583
589
|
})} .containing-element=${this} ?disabled=${this.disabled} ?hoist=${this.hoist} @cx-after-hide=${this.handleAfterHide}><slot name="trigger" slot="trigger">${v}</slot>${c}</cx-dropdown>`;
|
|
584
590
|
}
|
|
585
591
|
};
|
|
586
|
-
|
|
592
|
+
x = /* @__PURE__ */ new WeakMap();
|
|
593
|
+
r.styles = [E, G];
|
|
587
594
|
r.dependencies = {
|
|
588
|
-
"cx-button":
|
|
589
|
-
"cx-button-group":
|
|
590
|
-
"cx-dropdown":
|
|
591
|
-
"cx-icon":
|
|
592
|
-
"cx-input":
|
|
593
|
-
"cx-spinner":
|
|
594
|
-
"cx-visually-hidden":
|
|
595
|
+
"cx-button": B,
|
|
596
|
+
"cx-button-group": L,
|
|
597
|
+
"cx-dropdown": T,
|
|
598
|
+
"cx-icon": N,
|
|
599
|
+
"cx-input": K,
|
|
600
|
+
"cx-spinner": R,
|
|
601
|
+
"cx-visually-hidden": q
|
|
595
602
|
};
|
|
596
603
|
o([
|
|
597
|
-
|
|
604
|
+
b('[part~="base"]')
|
|
598
605
|
], r.prototype, "base", 2);
|
|
599
606
|
o([
|
|
600
|
-
|
|
607
|
+
b('[part~="input"]')
|
|
601
608
|
], r.prototype, "input", 2);
|
|
602
609
|
o([
|
|
603
|
-
|
|
610
|
+
b('[part~="opacity-input"]')
|
|
604
611
|
], r.prototype, "opacityInput", 2);
|
|
605
612
|
o([
|
|
606
|
-
|
|
613
|
+
b(".color-dropdown")
|
|
607
614
|
], r.prototype, "dropdown", 2);
|
|
608
615
|
o([
|
|
609
|
-
|
|
616
|
+
b('[part~="preview"]')
|
|
610
617
|
], r.prototype, "previewButton", 2);
|
|
611
618
|
o([
|
|
612
|
-
|
|
619
|
+
b('[part~="trigger"]')
|
|
613
620
|
], r.prototype, "trigger", 2);
|
|
614
621
|
o([
|
|
615
622
|
g()
|
|
@@ -642,7 +649,7 @@ o([
|
|
|
642
649
|
l({ reflect: !0, type: String })
|
|
643
650
|
], r.prototype, "value", 2);
|
|
644
651
|
o([
|
|
645
|
-
|
|
652
|
+
H()
|
|
646
653
|
], r.prototype, "defaultValue", 2);
|
|
647
654
|
o([
|
|
648
655
|
l()
|
|
@@ -717,25 +724,25 @@ o([
|
|
|
717
724
|
g()
|
|
718
725
|
], r.prototype, "emitValue", 2);
|
|
719
726
|
o([
|
|
720
|
-
|
|
727
|
+
S(300)
|
|
721
728
|
], r.prototype, "debouncedSetColor", 1);
|
|
722
729
|
o([
|
|
723
|
-
|
|
730
|
+
S(300)
|
|
724
731
|
], r.prototype, "setOpacity", 1);
|
|
725
732
|
o([
|
|
726
|
-
|
|
733
|
+
P({ passive: !1 })
|
|
727
734
|
], r.prototype, "handleTouchMove", 1);
|
|
728
735
|
o([
|
|
729
|
-
|
|
736
|
+
$("format", { waitUntilFirstUpdate: !0 })
|
|
730
737
|
], r.prototype, "handleFormatChange", 1);
|
|
731
738
|
o([
|
|
732
|
-
|
|
739
|
+
$("opacity", { waitUntilFirstUpdate: !0 })
|
|
733
740
|
], r.prototype, "handleOpacityChange", 1);
|
|
734
741
|
o([
|
|
735
|
-
|
|
742
|
+
$("value")
|
|
736
743
|
], r.prototype, "handleValueChange", 1);
|
|
737
744
|
r = o([
|
|
738
|
-
|
|
745
|
+
I("cx-color-picker")
|
|
739
746
|
], r);
|
|
740
747
|
export {
|
|
741
748
|
r as default
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import "../chunks/resizable-component.styles.CAfXABBc.js";
|
|
2
|
-
import { C as b } from "../chunks/document-viewer.
|
|
2
|
+
import { C as b } from "../chunks/document-viewer.DQXvmHvo.js";
|
|
3
3
|
import "../chunks/component.styles.CRO4Odto.js";
|
|
4
4
|
import "../chunks/index.Cpamj0jB.js";
|
|
5
5
|
import "../chunks/custom-element.L4WJXn1j.js";
|
|
@@ -10,7 +10,7 @@ import "../chunks/state.CSDxrqLd.js";
|
|
|
10
10
|
import "../chunks/class-map.BiVq-cVR.js";
|
|
11
11
|
import "../chunks/when.Dr1es41R.js";
|
|
12
12
|
import "../chunks/icon.DnBh6-56.js";
|
|
13
|
-
import "../chunks/image.
|
|
13
|
+
import "../chunks/image.B3vsXGrN.js";
|
|
14
14
|
import "../chunks/typography.DJC_UXgs.js";
|
|
15
15
|
export {
|
|
16
16
|
b as default
|
|
@@ -5,12 +5,12 @@ import "./select.js";
|
|
|
5
5
|
import "./tag.js";
|
|
6
6
|
import "../chunks/tree.DeIv5gWv.js";
|
|
7
7
|
import "../chunks/lib-cortex-element.CVMmyPMC.js";
|
|
8
|
-
import { C as h } from "../chunks/folder-select.
|
|
8
|
+
import { C as h } from "../chunks/folder-select.BudMvcEM.js";
|
|
9
9
|
import "../chunks/component.styles.CRO4Odto.js";
|
|
10
10
|
import "../chunks/custom-element.L4WJXn1j.js";
|
|
11
11
|
import "../chunks/i18n.DeUAP8n2.js";
|
|
12
12
|
import "../chunks/watch.CThbualB.js";
|
|
13
|
-
import "../chunks/endpoints.
|
|
13
|
+
import "../chunks/endpoints.ASL1clzd.js";
|
|
14
14
|
import "../chunks/lit-element.jLBm65_O.js";
|
|
15
15
|
import "../chunks/state.CSDxrqLd.js";
|
|
16
16
|
import "../chunks/query.BBf1UFkC.js";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import "../chunks/resizable-component.styles.CAfXABBc.js";
|
|
2
2
|
import "../chunks/component.styles.CRO4Odto.js";
|
|
3
3
|
import "../chunks/index.Cpamj0jB.js";
|
|
4
|
-
import { C as y } from "../chunks/image.
|
|
4
|
+
import { C as y } from "../chunks/image.B3vsXGrN.js";
|
|
5
5
|
import "../chunks/custom-element.L4WJXn1j.js";
|
|
6
6
|
import "../chunks/debounce.DaHuiSGU.js";
|
|
7
7
|
import "../chunks/i18n.DeUAP8n2.js";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import _ from "./grid.js";
|
|
2
2
|
import f from "./grid-item.js";
|
|
3
3
|
import { C as v } from "../chunks/icon-button.LhIEmHNF.js";
|
|
4
|
-
import { C as S } from "../chunks/image.
|
|
4
|
+
import { C as S } from "../chunks/image.B3vsXGrN.js";
|
|
5
5
|
import $ from "./space.js";
|
|
6
6
|
import C from "./tooltip.js";
|
|
7
7
|
import { n, C as w } from "../chunks/lib-cortex-element.CVMmyPMC.js";
|
|
@@ -5,7 +5,7 @@ import { C as u } from "../chunks/confirm-popover.CTdjw4Mi.js";
|
|
|
5
5
|
import { default as d } from "./corner-position-input-group.js";
|
|
6
6
|
import { default as l } from "./cropper.js";
|
|
7
7
|
import { default as i } from "./dynamic-select.js";
|
|
8
|
-
import { C as c } from "../chunks/folder-select.
|
|
8
|
+
import { C as c } from "../chunks/folder-select.BudMvcEM.js";
|
|
9
9
|
import { default as P } from "./masonry.js";
|
|
10
10
|
import { default as I } from "./padding-input-group.js";
|
|
11
11
|
import { default as y } from "./position-picker.js";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { C } from "../chunks/asset-link-format.
|
|
1
|
+
import { C } from "../chunks/asset-link-format.Du63EIst.js";
|
|
2
2
|
import { C as e } from "../chunks/color-swatch-group.BqJHjmG5.js";
|
|
3
|
-
import { C as x } from "../chunks/file-on-demand.
|
|
3
|
+
import { C as x } from "../chunks/file-on-demand.Bve3SdQJ.js";
|
|
4
4
|
export {
|
|
5
5
|
C as CxAssetLinkFormat,
|
|
6
6
|
e as CxColorSwatchGroup,
|