@orangelogic/design-system 2.56.0 → 2.57.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/{button.CiWlWCNb.js → button.2-Io1Wm4.js} +80 -66
- package/library/chunks/{color-swatch-group.Bsa_Z57a.js → color-swatch-group.VXPK-2tU.js} +167 -157
- package/library/chunks/{color-swatch.CsKJgvVf.js → color-swatch.8OhqVqb6.js} +2 -2
- package/library/chunks/{confirm-popover.Bfuw361W.js → confirm-popover.DGvyB12c.js} +3 -3
- package/library/chunks/{content-builder.UlVFSATk.js → content-builder.WranV3P4.js} +6 -5
- package/library/chunks/{dialog.C28qzMSQ.js → dialog.CIeu0rVD.js} +2 -2
- package/library/chunks/{dot-pagination.D3RYAiHL.js → dot-pagination.CyCA3kSP.js} +1 -1
- package/library/chunks/{file-on-demand.Cr7E_KqH.js → file-on-demand.aux9gsvH.js} +10 -10
- package/library/chunks/{folder-select.ELghy6Qk.js → folder-select.B7u40ijN.js} +5 -5
- package/library/chunks/{format-time.HdcgoabZ.js → format-time.C56HetWv.js} +1 -1
- package/library/chunks/{header.oyZxakKM.js → header.RvymymCe.js} +1 -1
- package/library/chunks/{i18n.C3Z8Xe8q.js → i18n.dCiJrmqj.js} +74 -83
- package/library/chunks/{iframe.C6CLUrTT.js → iframe.Cwqniwf2.js} +1 -1
- package/library/chunks/{image.BJfasRY_.js → image.gpleN29o.js} +3 -3
- package/library/chunks/list-editor.BToq5cqp.js +1641 -0
- package/library/chunks/{option.BOHZB9Sv.js → option.CJ1p2V0m.js} +1 -1
- package/library/chunks/{popup.Ba501Rgg.js → popup.BE5MfEQJ.js} +1 -1
- package/library/chunks/purify.es.BGaRrCfO.js +553 -0
- package/library/chunks/{select.oVg7uA-M.js → select.xBh4yerC.js} +3 -3
- package/library/chunks/string.DPf4puTr.js +136 -0
- package/library/chunks/{tab-group.BWYMMhrE.js → tab-group.CjvHb3OJ.js} +3 -3
- package/library/chunks/{table.-ecyjIUr.js → table.CrX_NJiY.js} +2019 -1744
- package/library/chunks/{timecode.PY1bymeS.js → timecode.XXmVg6tU.js} +1 -1
- package/library/chunks/{tree.82OigIgE.js → tree.CDaFhGjU.js} +1 -1
- package/library/components/alert.js +1 -1
- package/library/components/asset-link-format.js +4 -4
- package/library/components/atoms.js +14 -14
- package/library/components/border-input-group.js +1 -1
- package/library/components/breadcrumb.js +1 -1
- package/library/components/button.js +2 -2
- package/library/components/color-picker.js +3 -3
- package/library/components/color-swatch-group.js +6 -6
- package/library/components/color-swatch.js +3 -3
- package/library/components/confirm-popover.js +4 -4
- package/library/components/copy-button.js +1 -1
- package/library/components/corner-position-input-group.js +3 -3
- package/library/components/details.js +1 -1
- package/library/components/dialog.js +3 -3
- package/library/components/dot-pagination.js +2 -2
- package/library/components/drawer.js +1 -1
- package/library/components/dropdown.js +2 -2
- package/library/components/dynamic-select.js +5 -5
- package/library/components/element-clamp.js +2 -2
- package/library/components/file-on-demand.js +11 -11
- package/library/components/folder-select.js +4 -4
- package/library/components/format-bytes.js +1 -1
- package/library/components/format-date.js +1 -1
- package/library/components/format-number.js +1 -1
- package/library/components/format-time.js +2 -2
- package/library/components/header.js +2 -2
- package/library/components/icon-button.js +1 -1
- package/library/components/iframe.js +2 -2
- package/library/components/image-comparer.js +1 -1
- package/library/components/image.js +3 -3
- package/library/components/input.js +1 -1
- package/library/components/line-clamp.js +31 -23
- package/library/components/list-editor.js +9 -8
- package/library/components/masonry.js +1 -1
- package/library/components/menu-item.js +2 -2
- package/library/components/menu.js +1 -1
- package/library/components/molecules.js +4 -4
- package/library/components/option.js +2 -2
- package/library/components/organisms.js +2 -2
- package/library/components/pagination.js +4 -4
- package/library/components/popup.js +2 -2
- package/library/components/position-picker.js +1 -1
- package/library/components/progress-bar.js +1 -1
- package/library/components/progress-ring.js +1 -1
- package/library/components/range.js +2 -2
- package/library/components/rating.js +1 -1
- package/library/components/relative-time.js +1 -1
- package/library/components/select.js +4 -4
- package/library/components/share-option-list.js +1 -1
- package/library/components/size-input-group.js +2 -2
- package/library/components/spinner.js +1 -1
- package/library/components/split-panel.js +1 -1
- package/library/components/tab-group.js +3 -3
- package/library/components/tab.js +1 -1
- package/library/components/table.js +2 -2
- package/library/components/tag.js +1 -1
- package/library/components/timecode.js +2 -2
- package/library/components/tooltip.js +2 -2
- package/library/components/tree-item.js +2 -2
- package/library/components/tree.js +2 -2
- package/library/components/typeface.js +1 -1
- package/library/components/types.js +30808 -30016
- package/library/components/video.js +2 -2
- package/library/package.json +1 -1
- package/library/packages/atoms/src/components/button/button.d.ts +4 -0
- package/library/packages/atoms/src/components/line-clamp/line-clamp.d.ts +3 -1
- package/library/packages/atoms/src/components/table/components/table-toolbar/table-saved-search-dropdown.d.ts +60 -0
- package/library/packages/atoms/src/components/table/components/table-toolbar/table-toolbar.d.ts +38 -5
- package/library/packages/atoms/src/components/table/table.d.ts +28 -5
- package/library/packages/atoms/src/components/table/tabulator-tables/core/row/Row.d.ts +2 -2
- package/library/packages/events/src/cx-content-builder-translatable-value-change.d.ts +13 -0
- package/library/packages/events/src/cx-table-export.d.ts +1 -1
- package/library/packages/events/src/cx-table-save-search-select.d.ts +8 -0
- package/library/packages/events/src/events.d.ts +2 -0
- package/library/packages/molecules/src/data-tab-group/data-tab-group.d.ts +1 -0
- package/library/packages/molecules/src/details-group/details-group.d.ts +1 -0
- package/library/packages/molecules/src/list-editor/list-editor.d.ts +14 -0
- package/library/packages/molecules/src/timeline/timeline.d.ts +4 -0
- package/library/packages/organisms/src/color-swatch-group/color-swatch-group.d.ts +1 -0
- package/library/packages/organisms/src/comment/comment.d.ts +13 -0
- package/library/packages/organisms/src/comment/components/comment-menu/comment-menu.d.ts +14 -0
- package/library/packages/organisms/src/content-builder/components/color-swatch-picker/color-swatch-picker.d.ts +21 -0
- package/library/packages/organisms/src/content-builder/components/config-form/config-form-controller.d.ts +19 -0
- package/library/packages/organisms/src/content-builder/components/config-form/config-form.d.ts +28 -8
- package/library/packages/organisms/src/content-builder/components/config-manager/config-manager.d.ts +28 -1
- package/library/packages/organisms/src/content-builder/components/gallery-config/gallery-config.d.ts +1 -0
- package/library/packages/organisms/src/content-builder/configs/accordion.d.ts +1 -0
- package/library/packages/organisms/src/content-builder/configs/color-swatches.d.ts +1 -0
- package/library/packages/organisms/src/content-builder/configs/gallery.d.ts +2 -0
- package/library/packages/organisms/src/content-builder/configs/tab-group.d.ts +1 -0
- package/library/packages/organisms/src/content-builder/configs/timeline.d.ts +1 -0
- package/library/packages/organisms/src/content-builder/configs-controller.d.ts +10 -0
- package/library/packages/organisms/src/content-builder/content-builder-constants.d.ts +2 -0
- package/library/packages/organisms/src/content-builder/content-builder.d.ts +19 -2
- package/library/packages/organisms/src/content-builder/content-builder.utils.d.ts +0 -7
- package/library/packages/organisms/src/content-builder/plugins/plugin-factory.d.ts +1 -0
- package/library/packages/organisms/src/content-builder/styleController.d.ts +3 -1
- package/library/packages/types/src/color-swatch.d.ts +1 -0
- package/library/packages/types/src/content-builder.d.ts +7 -0
- package/library/packages/types/src/table.d.ts +13 -1
- package/library/packages/utils/src/custom-element/i18n-utils.d.ts +2 -0
- package/library/packages/utils/src/custom-element/i18n.d.ts +32 -9
- package/library/packages/utils/src/string/string.d.ts +2 -0
- package/library/react-web-component.d.ts +115 -58
- package/package.json +1 -1
- package/library/chunks/list-editor.Ct803qvF.js +0 -737
- package/library/chunks/string.D6poLUEC.js +0 -678
|
@@ -1,45 +1,45 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { C as
|
|
3
|
-
import { C as
|
|
4
|
-
import { x as h, B as
|
|
5
|
-
import { C
|
|
6
|
-
import { c as
|
|
7
|
-
import { D as
|
|
8
|
-
import { d as
|
|
9
|
-
import { L as
|
|
10
|
-
import { w as
|
|
11
|
-
import { r as
|
|
12
|
-
import { e as
|
|
13
|
-
import { r as
|
|
1
|
+
import z from "../components/space.js";
|
|
2
|
+
import { C as $ } from "./table.CrX_NJiY.js";
|
|
3
|
+
import { C as F } from "./typography.BFpl0WMA.js";
|
|
4
|
+
import { x as h, B as k, i as A, n as d, C as S, c as T } from "./custom-element.vnXBMQxc.js";
|
|
5
|
+
import { C, a as m } from "./color-swatch.8OhqVqb6.js";
|
|
6
|
+
import { c as E } from "./component.styles.CI-v8BZa.js";
|
|
7
|
+
import { D as l } from "./content-builder.WranV3P4.js";
|
|
8
|
+
import { d as D } from "./popup.BE5MfEQJ.js";
|
|
9
|
+
import { L as N } from "./i18n.dCiJrmqj.js";
|
|
10
|
+
import { w as x } from "./watch.BCJD77bD.js";
|
|
11
|
+
import { r as p } from "./state.Cw55xXlb.js";
|
|
12
|
+
import { e as P } from "./query.BBf1UFkC.js";
|
|
13
|
+
import { r as R } from "./query-all.i3PyvTUQ.js";
|
|
14
14
|
import { e as w } from "./class-map.CoZTSvbM.js";
|
|
15
15
|
import { i as b } from "./guard.BDP4A85K.js";
|
|
16
|
-
import { o as
|
|
17
|
-
import { c as
|
|
16
|
+
import { o as H } from "./if-defined.MfEgpxEN.js";
|
|
17
|
+
import { c as W } from "./repeat.CauKaXyy.js";
|
|
18
18
|
import { o as f } from "./style-map.CZovMmo_.js";
|
|
19
|
-
import { n as
|
|
20
|
-
var
|
|
21
|
-
function
|
|
22
|
-
const
|
|
23
|
-
Number.parseFloat(
|
|
24
|
-
Number.parseFloat(
|
|
19
|
+
import { n as O } from "./when.Dr1es41R.js";
|
|
20
|
+
var n = /* @__PURE__ */ ((e) => (e.Circles = "circles", e.Grid = "grid", e.Table = "table", e))(n || {});
|
|
21
|
+
function M(e, r = [350, 696, 1024]) {
|
|
22
|
+
const t = getComputedStyle(e), o = [
|
|
23
|
+
Number.parseFloat(t.getPropertyValue("--breakpoint-mobile").trim()),
|
|
24
|
+
Number.parseFloat(t.getPropertyValue("--breakpoint-tablet").trim()),
|
|
25
25
|
1 / 0
|
|
26
26
|
];
|
|
27
|
-
return Number.isNaN(
|
|
27
|
+
return Number.isNaN(o[0]) ? o[0] = r[0] : o[0]++, Number.isNaN(o[1]) ? o[1] = r[1] : o[1]++, o;
|
|
28
28
|
}
|
|
29
|
-
function
|
|
30
|
-
const
|
|
31
|
-
return
|
|
29
|
+
function G(e) {
|
|
30
|
+
const r = window.innerWidth;
|
|
31
|
+
return r > e[1] ? l.Desktop : r > e[0] && r <= e[1] ? l.Tablet : l.Mobile;
|
|
32
32
|
}
|
|
33
|
-
const y = 165,
|
|
33
|
+
const y = 165, I = ["HEX", "RGB", "CMYK", "PMS"], L = {
|
|
34
34
|
resizable: !1
|
|
35
|
-
},
|
|
35
|
+
}, _ = [
|
|
36
36
|
{
|
|
37
37
|
field: "hex",
|
|
38
38
|
formatter: (e) => {
|
|
39
|
-
const t = document.createElement("div");
|
|
40
|
-
t.style.display = "flex", t.style.alignItems = "center", t.style.justifyContent = "center", t.style.width = "100%", t.style.height = "100%", t.style.userSelect = "none";
|
|
41
39
|
const r = document.createElement("div");
|
|
42
|
-
|
|
40
|
+
r.style.display = "flex", r.style.alignItems = "center", r.style.justifyContent = "center", r.style.width = "100%", r.style.height = "100%", r.style.userSelect = "none";
|
|
41
|
+
const t = document.createElement("div");
|
|
42
|
+
return t.style.backgroundColor = e.getValue(), t.style.width = "64px", t.style.height = "32px", t.style.borderRadius = "var(--cx-border-radius-large)", t.style.padding = "0 var(--cx-spacing-medium)", r.appendChild(t), r;
|
|
43
43
|
},
|
|
44
44
|
headerHozAlign: "center",
|
|
45
45
|
headerSort: !1,
|
|
@@ -88,19 +88,19 @@ const y = 165, G = ["HEX", "RGB", "CMYK", "PMS"], I = {
|
|
|
88
88
|
widthGrow: 2
|
|
89
89
|
}
|
|
90
90
|
];
|
|
91
|
-
function u(e,
|
|
92
|
-
const
|
|
93
|
-
if (!
|
|
91
|
+
function u(e, r, t) {
|
|
92
|
+
const o = r.getValue() ?? "";
|
|
93
|
+
if (!o)
|
|
94
94
|
return null;
|
|
95
|
-
const
|
|
95
|
+
const s = h`
|
|
96
96
|
<cx-copy-button
|
|
97
97
|
copy-label=${e.term("clickToCopy")}
|
|
98
98
|
focus-copy-label=${e.term("pressEnterOrCtrlCToCopy")}
|
|
99
99
|
hoist
|
|
100
|
-
label=${`${
|
|
100
|
+
label=${`${t}, ${r.getField()} ${e.term("code")} ${o}. ${e.term("clickOrPressCtrlCToCopy")}`}
|
|
101
101
|
no-icon
|
|
102
102
|
tooltip-distance="0"
|
|
103
|
-
value=${
|
|
103
|
+
value=${o}
|
|
104
104
|
style=${f({
|
|
105
105
|
"--button-background-color": "transparent",
|
|
106
106
|
"--button-font-size": "var(--cx-font-size-large)",
|
|
@@ -118,17 +118,17 @@ function u(e, t, r) {
|
|
|
118
118
|
whiteSpace: "nowrap"
|
|
119
119
|
})}
|
|
120
120
|
>
|
|
121
|
-
${
|
|
121
|
+
${o}
|
|
122
122
|
</span>
|
|
123
123
|
</cx-copy-button>
|
|
124
|
-
`,
|
|
125
|
-
return
|
|
124
|
+
`, c = document.createDocumentFragment();
|
|
125
|
+
return k(s, c), c.firstElementChild;
|
|
126
126
|
}
|
|
127
|
-
const B = (e,
|
|
128
|
-
...
|
|
127
|
+
const B = (e, r) => [
|
|
128
|
+
..._.slice(0, 2),
|
|
129
129
|
{
|
|
130
130
|
field: "hex",
|
|
131
|
-
formatter: (
|
|
131
|
+
formatter: (t) => u(e, t, r),
|
|
132
132
|
headerHozAlign: "center",
|
|
133
133
|
headerSort: !1,
|
|
134
134
|
hozAlign: "center",
|
|
@@ -137,7 +137,7 @@ const B = (e, t) => [
|
|
|
137
137
|
},
|
|
138
138
|
{
|
|
139
139
|
field: "rgb",
|
|
140
|
-
formatter: (
|
|
140
|
+
formatter: (t) => u(e, t, r),
|
|
141
141
|
headerHozAlign: "center",
|
|
142
142
|
headerSort: !1,
|
|
143
143
|
hozAlign: "center",
|
|
@@ -146,7 +146,7 @@ const B = (e, t) => [
|
|
|
146
146
|
},
|
|
147
147
|
{
|
|
148
148
|
field: "cmyk",
|
|
149
|
-
formatter: (
|
|
149
|
+
formatter: (t) => u(e, t, r),
|
|
150
150
|
headerHozAlign: "center",
|
|
151
151
|
headerSort: !1,
|
|
152
152
|
hozAlign: "center",
|
|
@@ -155,14 +155,14 @@ const B = (e, t) => [
|
|
|
155
155
|
},
|
|
156
156
|
{
|
|
157
157
|
field: "pms",
|
|
158
|
-
formatter: (
|
|
158
|
+
formatter: (t) => u(e, t, r),
|
|
159
159
|
headerHozAlign: "center",
|
|
160
160
|
headerSort: !1,
|
|
161
161
|
hozAlign: "center",
|
|
162
162
|
title: "PMS",
|
|
163
163
|
widthGrow: 2
|
|
164
164
|
}
|
|
165
|
-
], K =
|
|
165
|
+
], K = A`
|
|
166
166
|
:host {
|
|
167
167
|
--grid-gap: var(--cx-spacing-medium);
|
|
168
168
|
--padding: 0;
|
|
@@ -254,17 +254,18 @@ const B = (e, t) => [
|
|
|
254
254
|
background-color: transparent;
|
|
255
255
|
}
|
|
256
256
|
`;
|
|
257
|
-
var
|
|
258
|
-
for (var
|
|
259
|
-
(g = e[
|
|
260
|
-
return
|
|
257
|
+
var U = Object.defineProperty, j = Object.getOwnPropertyDescriptor, i = (e, r, t, o) => {
|
|
258
|
+
for (var s = o > 1 ? void 0 : o ? j(r, t) : r, c = e.length - 1, g; c >= 0; c--)
|
|
259
|
+
(g = e[c]) && (s = (o ? g(r, t, s) : g(s)) || s);
|
|
260
|
+
return o && s && U(r, t, s), s;
|
|
261
261
|
};
|
|
262
|
-
|
|
262
|
+
const v = "unnamed";
|
|
263
|
+
let a = class extends S {
|
|
263
264
|
constructor() {
|
|
264
|
-
super(), this.localize = new
|
|
265
|
+
super(), this.localize = new N(this), this.variant = n.Table, this.data = [], this.maxCol = 4, this.canCopy = !1, this.showCodes = ["HEX", "RGB", "CMYK", "PMS"], this.multiLanguage = !1, this.breakpoints = [350, 696, 1024], this.deviceType = l.Desktop, this.currentCol = 0, this.isFocused = !1, this.canFocusContainer = !0, this.isContainerFocused = !1, this.handleWindowResize = this.handleWindowResize.bind(this);
|
|
265
266
|
}
|
|
266
267
|
runFirstUpdated() {
|
|
267
|
-
this.breakpoints =
|
|
268
|
+
this.breakpoints = M(this, this.breakpoints), this.handleResize();
|
|
268
269
|
}
|
|
269
270
|
runConnectedCallback() {
|
|
270
271
|
this.setAttribute("role", "region"), this.setAttribute("aria-label", this.localize.term("colorSwatches")), this.setAttribute(
|
|
@@ -281,23 +282,23 @@ let o = class extends A {
|
|
|
281
282
|
handleResize() {
|
|
282
283
|
const e = window.innerWidth;
|
|
283
284
|
switch (this.variant) {
|
|
284
|
-
case
|
|
285
|
-
const
|
|
285
|
+
case n.Grid: {
|
|
286
|
+
const r = Number.parseFloat(
|
|
286
287
|
getComputedStyle(this.containerEl).getPropertyValue("--grid-gap")
|
|
287
288
|
);
|
|
288
289
|
this.currentCol = Math.floor(
|
|
289
|
-
(e +
|
|
290
|
+
(e + r) / (y + r)
|
|
290
291
|
);
|
|
291
292
|
break;
|
|
292
293
|
}
|
|
293
|
-
case
|
|
294
|
-
this.deviceType =
|
|
294
|
+
case n.Circles: {
|
|
295
|
+
this.deviceType = G(this.breakpoints);
|
|
295
296
|
break;
|
|
296
297
|
}
|
|
297
298
|
}
|
|
298
299
|
}
|
|
299
300
|
handleKeyDown(e) {
|
|
300
|
-
!(e.target instanceof
|
|
301
|
+
!(e.target instanceof C) && !e.target?.closest(
|
|
301
302
|
"[data-table-container]"
|
|
302
303
|
) || (e.key === "Enter" || e.key === " ") && (this.isFocused = !0);
|
|
303
304
|
}
|
|
@@ -313,11 +314,11 @@ let o = class extends A {
|
|
|
313
314
|
* Filter out the columns that are not in the showCodes
|
|
314
315
|
*/
|
|
315
316
|
getTableColumns(e) {
|
|
316
|
-
const
|
|
317
|
+
const r = this.canCopy ? B(this.localize, e) : _;
|
|
317
318
|
return [
|
|
318
|
-
...
|
|
319
|
-
...
|
|
320
|
-
(
|
|
319
|
+
...r.slice(0, 2),
|
|
320
|
+
...r.slice(2).filter(
|
|
321
|
+
(t) => this.showCodes.includes(t.field.toUpperCase())
|
|
321
322
|
)
|
|
322
323
|
];
|
|
323
324
|
}
|
|
@@ -326,9 +327,9 @@ let o = class extends A {
|
|
|
326
327
|
*/
|
|
327
328
|
categorizeByPalette() {
|
|
328
329
|
return Object.values(
|
|
329
|
-
this.data.reduce((e,
|
|
330
|
-
const
|
|
331
|
-
return e[
|
|
330
|
+
this.data.reduce((e, r) => {
|
|
331
|
+
const t = r.palette?.trim() ? r.palette : v;
|
|
332
|
+
return e[t] || (e[t] = { colors: [], palette: t }), e[t].colors.push(r), e;
|
|
332
333
|
}, {})
|
|
333
334
|
);
|
|
334
335
|
}
|
|
@@ -345,26 +346,26 @@ let o = class extends A {
|
|
|
345
346
|
* Get current direction of the color swatch group
|
|
346
347
|
*/
|
|
347
348
|
get currentDirection() {
|
|
348
|
-
return this.variant ===
|
|
349
|
+
return this.variant === n.Circles && this.deviceType !== l.Desktop ? "vertical" : "horizontal";
|
|
349
350
|
}
|
|
350
351
|
/**
|
|
351
352
|
* Get the variant of the color swatch
|
|
352
353
|
*/
|
|
353
354
|
get swatchVariant() {
|
|
354
355
|
switch (this.variant) {
|
|
355
|
-
case
|
|
356
|
-
return this.deviceType ===
|
|
357
|
-
case
|
|
356
|
+
case n.Circles:
|
|
357
|
+
return this.deviceType === l.Tablet ? m.Oval : m.Circle;
|
|
358
|
+
case n.Grid:
|
|
358
359
|
return m.GridItem;
|
|
359
360
|
default:
|
|
360
361
|
return;
|
|
361
362
|
}
|
|
362
363
|
}
|
|
363
364
|
render() {
|
|
364
|
-
const e = this.currentDirection;
|
|
365
|
+
const e = this.currentDirection, r = this.localize.lang();
|
|
365
366
|
return h`
|
|
366
|
-
${
|
|
367
|
-
this.variant ===
|
|
367
|
+
${O(
|
|
368
|
+
this.variant === n.Table,
|
|
368
369
|
() => h`
|
|
369
370
|
<cx-space
|
|
370
371
|
class="color-swatch-group__swatches"
|
|
@@ -374,36 +375,42 @@ let o = class extends A {
|
|
|
374
375
|
${b(
|
|
375
376
|
[this.data, this.canCopy],
|
|
376
377
|
() => this.categorizeByPalette().map(
|
|
377
|
-
(t) =>
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
378
|
+
(t) => {
|
|
379
|
+
const o = this.multiLanguage && r ? t.colors.map((s) => ({
|
|
380
|
+
...s,
|
|
381
|
+
name: s[`name-${r.toLowerCase()}`] ?? s.name
|
|
382
|
+
})) : t.colors;
|
|
383
|
+
return h`
|
|
384
|
+
<div
|
|
385
|
+
tabindex=${H(
|
|
386
|
+
this.canFocusContainer ? "0" : void 0
|
|
387
|
+
)}
|
|
388
|
+
data-table-container
|
|
389
|
+
class="color-swatch-group__table-container"
|
|
390
|
+
@focusin=${this.handleFocusIn}
|
|
391
|
+
@focusout=${this.handleFocusOut}
|
|
392
|
+
@keydown=${this.handleKeyDown}
|
|
393
|
+
>
|
|
394
|
+
<cx-typography variant="h3">
|
|
395
|
+
${t.palette === v ? this.localize.term("noPalette") : this.localize.term("shadesPalette", t.palette)}
|
|
396
|
+
</cx-typography>
|
|
397
|
+
<cx-table
|
|
398
|
+
part="table"
|
|
399
|
+
tabindex=${this.isFocused ? void 0 : "-1"}
|
|
400
|
+
no-selectable
|
|
401
|
+
layout="fitColumns"
|
|
402
|
+
.columns=${b(
|
|
403
|
+
[this.showCodes, this.canCopy, this.localize],
|
|
404
|
+
() => this.getTableColumns(t.palette)
|
|
405
|
+
)}
|
|
406
|
+
.columnDefaults=${L}
|
|
407
|
+
.rowHeight=${48}
|
|
408
|
+
.data=${o}
|
|
409
|
+
class="color-swatch-group__table"
|
|
410
|
+
></cx-table>
|
|
411
|
+
</div>
|
|
412
|
+
`;
|
|
413
|
+
}
|
|
407
414
|
)
|
|
408
415
|
)}
|
|
409
416
|
</cx-space>
|
|
@@ -419,37 +426,37 @@ let o = class extends A {
|
|
|
419
426
|
wrap=${this.variant === "circles" ? "nowrap" : "wrap"}
|
|
420
427
|
class=${w({
|
|
421
428
|
"color-swatch-group__swatches": !0,
|
|
422
|
-
"color-swatch-group__swatches--grid": this.variant ===
|
|
423
|
-
[`color-swatch-group__swatches--circles--${e}`]: this.variant ===
|
|
429
|
+
"color-swatch-group__swatches--grid": this.variant === n.Grid,
|
|
430
|
+
[`color-swatch-group__swatches--circles--${e}`]: this.variant === n.Circles
|
|
424
431
|
})}
|
|
425
432
|
style=${f({
|
|
426
433
|
gridTemplateColumns: this.currentCol >= this.maxCol ? `repeat(${this.maxCol}, 1fr)` : `repeat(auto-fit, minmax(${y}px, 1fr))`
|
|
427
434
|
})}
|
|
428
435
|
>
|
|
429
|
-
${
|
|
436
|
+
${W(
|
|
430
437
|
this.data,
|
|
431
438
|
(t) => t.name,
|
|
432
|
-
(t,
|
|
439
|
+
(t, o) => h`<cx-color-swatch
|
|
433
440
|
part="color-swatch-item"
|
|
434
441
|
role="listitem"
|
|
435
442
|
aria-label=${this.localize.term(
|
|
436
443
|
"colorOfTotal",
|
|
437
|
-
|
|
444
|
+
o + 1,
|
|
438
445
|
this.data.length
|
|
439
446
|
)}
|
|
440
447
|
hex=${t.hex}
|
|
441
448
|
rgb=${t.rgb}
|
|
442
449
|
cmyk=${t.cmyk}
|
|
443
450
|
pms=${t.pms}
|
|
444
|
-
name=${t.name}
|
|
451
|
+
name=${this.multiLanguage && r ? t[`name-${r.toLowerCase()}`] ?? t.name : t.name}
|
|
445
452
|
variant=${this.swatchVariant}
|
|
446
453
|
?can-copy=${this.canCopy}
|
|
447
454
|
?can-focus-code-only=${this.isFocused}
|
|
448
455
|
.showCodes=${this.showCodes}
|
|
449
456
|
no-auto-convert
|
|
450
457
|
class=${w({
|
|
451
|
-
[`color-swatch-group__swatches--circles--${e}__item`]: this.variant ===
|
|
452
|
-
"color-swatch-group__swatches--circles--vertical__item--mobile": this.variant ===
|
|
458
|
+
[`color-swatch-group__swatches--circles--${e}__item`]: this.variant === n.Circles,
|
|
459
|
+
"color-swatch-group__swatches--circles--vertical__item--mobile": this.variant === n.Circles && this.deviceType === l.Mobile
|
|
453
460
|
})}
|
|
454
461
|
@keydown=${this.handleKeyDown}
|
|
455
462
|
@focusout=${this.handleFocusOut}
|
|
@@ -461,74 +468,77 @@ let o = class extends A {
|
|
|
461
468
|
`;
|
|
462
469
|
}
|
|
463
470
|
};
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
"cx-color-swatch":
|
|
467
|
-
"cx-space":
|
|
468
|
-
"cx-table":
|
|
469
|
-
"cx-typography":
|
|
471
|
+
a.styles = [E, K];
|
|
472
|
+
a.dependencies = {
|
|
473
|
+
"cx-color-swatch": C,
|
|
474
|
+
"cx-space": z,
|
|
475
|
+
"cx-table": $,
|
|
476
|
+
"cx-typography": F
|
|
470
477
|
};
|
|
471
478
|
i([
|
|
472
|
-
|
|
473
|
-
],
|
|
479
|
+
P(".color-swatch-group__swatches")
|
|
480
|
+
], a.prototype, "containerEl", 2);
|
|
474
481
|
i([
|
|
475
|
-
|
|
476
|
-
],
|
|
482
|
+
R("cx-table")
|
|
483
|
+
], a.prototype, "tableEls", 2);
|
|
477
484
|
i([
|
|
478
|
-
|
|
479
|
-
],
|
|
485
|
+
d({ reflect: !0, type: String })
|
|
486
|
+
], a.prototype, "variant", 2);
|
|
480
487
|
i([
|
|
481
|
-
|
|
482
|
-
],
|
|
488
|
+
d({ reflect: !0, type: Array })
|
|
489
|
+
], a.prototype, "data", 2);
|
|
483
490
|
i([
|
|
484
|
-
|
|
485
|
-
],
|
|
491
|
+
d({ attribute: "max-col", reflect: !0, type: Number })
|
|
492
|
+
], a.prototype, "maxCol", 2);
|
|
486
493
|
i([
|
|
487
|
-
|
|
488
|
-
],
|
|
494
|
+
d({ attribute: "can-copy", reflect: !0, type: Boolean })
|
|
495
|
+
], a.prototype, "canCopy", 2);
|
|
489
496
|
i([
|
|
490
|
-
|
|
497
|
+
d({
|
|
491
498
|
attribute: "show-codes",
|
|
492
499
|
converter: {
|
|
493
|
-
fromAttribute: (e) => (e?.split(" ") ?? []).filter((
|
|
500
|
+
fromAttribute: (e) => (e?.split(" ") ?? []).filter((t) => I.includes(t)),
|
|
494
501
|
toAttribute: (e) => e.join(" ")
|
|
495
502
|
},
|
|
496
503
|
reflect: !0
|
|
497
504
|
})
|
|
498
|
-
],
|
|
505
|
+
], a.prototype, "showCodes", 2);
|
|
506
|
+
i([
|
|
507
|
+
d({ attribute: "multi-language", reflect: !0, type: Boolean })
|
|
508
|
+
], a.prototype, "multiLanguage", 2);
|
|
499
509
|
i([
|
|
500
|
-
|
|
501
|
-
],
|
|
510
|
+
p()
|
|
511
|
+
], a.prototype, "breakpoints", 2);
|
|
502
512
|
i([
|
|
503
|
-
|
|
504
|
-
],
|
|
513
|
+
p()
|
|
514
|
+
], a.prototype, "deviceType", 2);
|
|
505
515
|
i([
|
|
506
|
-
|
|
507
|
-
],
|
|
516
|
+
p()
|
|
517
|
+
], a.prototype, "currentCol", 2);
|
|
508
518
|
i([
|
|
509
|
-
|
|
510
|
-
],
|
|
519
|
+
p()
|
|
520
|
+
], a.prototype, "isFocused", 2);
|
|
511
521
|
i([
|
|
512
|
-
|
|
513
|
-
],
|
|
522
|
+
p()
|
|
523
|
+
], a.prototype, "canFocusContainer", 2);
|
|
514
524
|
i([
|
|
515
|
-
|
|
516
|
-
],
|
|
525
|
+
p()
|
|
526
|
+
], a.prototype, "isContainerFocused", 2);
|
|
517
527
|
i([
|
|
518
|
-
|
|
519
|
-
],
|
|
528
|
+
D(100)
|
|
529
|
+
], a.prototype, "handleWindowResize", 1);
|
|
520
530
|
i([
|
|
521
|
-
|
|
522
|
-
],
|
|
531
|
+
x("variant", { waitUntilFirstUpdate: !0 })
|
|
532
|
+
], a.prototype, "handleResize", 1);
|
|
523
533
|
i([
|
|
524
|
-
|
|
525
|
-
],
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
],
|
|
534
|
+
x("isFocused", { waitUntilFirstUpdate: !0 })
|
|
535
|
+
], a.prototype, "handleIsFocusedChange", 1);
|
|
536
|
+
a = i([
|
|
537
|
+
T("cx-color-swatch-group")
|
|
538
|
+
], a);
|
|
529
539
|
export {
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
540
|
+
a as C,
|
|
541
|
+
G as a,
|
|
542
|
+
n as b,
|
|
543
|
+
M as g
|
|
534
544
|
};
|
|
@@ -6,8 +6,8 @@ import { C as G } from "./typography.BFpl0WMA.js";
|
|
|
6
6
|
import { i as M, n as l, C as S, x as C, c as U } from "./custom-element.vnXBMQxc.js";
|
|
7
7
|
import { c as W } from "./component.styles.CI-v8BZa.js";
|
|
8
8
|
import { T as v } from "./index.C1chwzNp.js";
|
|
9
|
-
import { d as H } from "./popup.
|
|
10
|
-
import { L as D } from "./i18n.
|
|
9
|
+
import { d as H } from "./popup.BE5MfEQJ.js";
|
|
10
|
+
import { L as D } from "./i18n.dCiJrmqj.js";
|
|
11
11
|
import { w as h } from "./watch.BCJD77bD.js";
|
|
12
12
|
import { r as d } from "./state.Cw55xXlb.js";
|
|
13
13
|
import { e as L } from "./query.BBf1UFkC.js";
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { C as _ } from "./button.
|
|
2
|
-
import { C as u, D as h } from "./dialog.
|
|
1
|
+
import { C as _ } from "./button.2-Io1Wm4.js";
|
|
2
|
+
import { C as u, D as h } from "./dialog.CIeu0rVD.js";
|
|
3
3
|
import g from "../components/dropdown.js";
|
|
4
4
|
import { C as x } from "./typography.BFpl0WMA.js";
|
|
5
5
|
import { i as b, n as e, C as y, x as d, c as w } from "./custom-element.vnXBMQxc.js";
|
|
6
6
|
import { c as $ } from "./component.styles.CI-v8BZa.js";
|
|
7
|
-
import { L as z } from "./i18n.
|
|
7
|
+
import { L as z } from "./i18n.dCiJrmqj.js";
|
|
8
8
|
import { e as m } from "./query.BBf1UFkC.js";
|
|
9
9
|
import { e as a } from "./class-map.CoZTSvbM.js";
|
|
10
10
|
var v = /* @__PURE__ */ ((t) => (t.Horizontal = "horizontal", t.HorizontalReverse = "horizontal-reverse", t.Vertical = "vertical", t.VerticalReverse = "vertical-reverse", t))(v || {}), f = /* @__PURE__ */ ((t) => (t.Center = "center", t.End = "end", t.Start = "start", t))(f || {});
|
|
@@ -18,7 +18,7 @@ const e = {
|
|
|
18
18
|
"tablet"
|
|
19
19
|
/* Tablet */
|
|
20
20
|
)
|
|
21
|
-
},
|
|
21
|
+
}, r = {
|
|
22
22
|
canvasWidth: "320px",
|
|
23
23
|
height: "",
|
|
24
24
|
id: "mobile",
|
|
@@ -27,15 +27,16 @@ const e = {
|
|
|
27
27
|
"mobile"
|
|
28
28
|
/* Mobile */
|
|
29
29
|
)
|
|
30
|
-
}, g = [e, l,
|
|
31
|
-
var
|
|
30
|
+
}, g = [e, l, r];
|
|
31
|
+
var d = /* @__PURE__ */ ((a) => (a.All = "ALL", a.CanDelete = "CanDelete", a.CanDownload = "CanDownload", a.CanFind = "CanFind", a.CanManageRights = "CanManageRights", a.CanMove = "CanMove", a.CanRead = "CanRead", a.CanReadAll = "CanReadAll", a.CanReadAndWrite = "CanReadAndWrite", a.CanReadLarge = "CanReadLarge", a.CanReadMedium = "CanReadMedium", a.CanReadOriginal = "CanReadOriginal", a.CanShare = "CanShare", a.CanUpload = "CanUpload", a.CanWrite = "CanWrite", a.None = "NONE", a))(d || {}), o = /* @__PURE__ */ ((a) => (a.All = "all", a.Audio = "audio", a.Image = "image", a.Other = "other", a.Video = "video", a))(o || {}), C = /* @__PURE__ */ ((a) => (a.Content = "content", a.Template = "template", a))(C || {}), i = /* @__PURE__ */ ((a) => (a.Administrator = "Administrator", a.Designer = "Designer", a.Editor = "Editor", a))(i || {}), h = /* @__PURE__ */ ((a) => (a.Accordion = "BlockAccordion", a.Analytics = "BlockAnalytics", a.Button = "BlockButton", a.Carousel = "BlockCarousel", a.ColorSwatches = "BlockColorSwatches", a.Column = "BlockCell", a.ColumnGroup = "BlockColumns", a.Divider = "BlockDivider", a.FontKit = "BlockFontKit", a.Gallery = "BlockGallery", a.Header = "BlockHeader", a.Image = "BlockImage", a.RichText = "BlockRichText", a.SearchBox = "BlockSearchBox", a.TabGroup = "BlockTabs", a.Text = "BlockText", a.Timeline = "BlockTimeline", a.Video = "BlockVideo", a))(h || {}), u = /* @__PURE__ */ ((a) => (a.Carousel = "carousel", a.Gallery = "gallery", a))(u || {}), A = /* @__PURE__ */ ((a) => (a.Templates = "TEMPLATES", a.TranslatableAttributes = "TRANSLATABLE_ATTRIBUTES", a.TranslatableTexts = "TRANSLATABLE_TEXTS", a))(A || {});
|
|
32
32
|
export {
|
|
33
33
|
o as A,
|
|
34
34
|
h as B,
|
|
35
35
|
n as D,
|
|
36
36
|
C as E,
|
|
37
|
-
|
|
37
|
+
d as P,
|
|
38
38
|
i as T,
|
|
39
39
|
u as a,
|
|
40
|
-
|
|
40
|
+
A as b,
|
|
41
|
+
g as c
|
|
41
42
|
};
|
|
@@ -3,7 +3,7 @@ import { c as L } from "./component.styles.CI-v8BZa.js";
|
|
|
3
3
|
import { O, C as P, H as $, z as H, o as E } from "./overlayscrollbars.aFuRG5Rs.js";
|
|
4
4
|
import { s as p, g as h, b as c, a as y } from "./animation-registry.DavRkTTr.js";
|
|
5
5
|
import { w as x } from "./event.mFzZi4sr.js";
|
|
6
|
-
import { L as R } from "./i18n.
|
|
6
|
+
import { L as R } from "./i18n.dCiJrmqj.js";
|
|
7
7
|
import { M as W } from "./modal.BqNLxgs1.js";
|
|
8
8
|
import { l as w, u as _ } from "./scroll.DwPiX2Ox.js";
|
|
9
9
|
import { H as q } from "./slot.DJLm4Dig.js";
|
|
@@ -16,7 +16,7 @@ import { o as A } from "./style-map.CZovMmo_.js";
|
|
|
16
16
|
import { n as g } from "./when.Dr1es41R.js";
|
|
17
17
|
import F from "../components/divider.js";
|
|
18
18
|
import I from "../components/icon-button.js";
|
|
19
|
-
import { C as T } from "./popup.
|
|
19
|
+
import { C as T } from "./popup.BE5MfEQJ.js";
|
|
20
20
|
var l = /* @__PURE__ */ ((e) => (e.Both = "both", e.Footer = "footer", e.Header = "header", e.None = "none", e))(l || {});
|
|
21
21
|
const U = z`
|
|
22
22
|
:host {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { i as P, n as a, C as F, x as y, c as z } from "./custom-element.vnXBMQxc.js";
|
|
2
2
|
import { c as S } from "./component.styles.CI-v8BZa.js";
|
|
3
3
|
import { O as C } from "./index.Cpamj0jB.js";
|
|
4
|
-
import { L as O } from "./i18n.
|
|
4
|
+
import { L as O } from "./i18n.dCiJrmqj.js";
|
|
5
5
|
import { w as h } from "./watch.BCJD77bD.js";
|
|
6
6
|
import { r as j } from "./state.Cw55xXlb.js";
|
|
7
7
|
import { e as H } from "./query.BBf1UFkC.js";
|