@orangelogic/design-system 2.151.0 → 2.152.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.Bctc22QM.js → asset-link-format.DzYh0_YS.js} +1127 -883
- package/library/chunks/{folder-select.TPHiDGrX.js → folder-select.BKAuh4GE.js} +1 -1
- package/library/chunks/{tree.BDAj1Xs2.js → tree.C2dPd6gt.js} +219 -245
- package/library/chunks/v4.CKZ6klMF.js +29 -0
- package/library/components/asset-link-format.js +1 -1
- package/library/components/atoms.js +1 -1
- package/library/components/file-on-demand.js +1 -1
- package/library/components/folder-select.js +2 -2
- package/library/components/molecules.js +1 -1
- package/library/components/organisms.js +1 -1
- package/library/components/tree-item.js +1 -1
- package/library/components/tree.js +6 -5
- package/library/components/types.js +16959 -17191
- package/library/package.json +1 -1
- package/library/packages/organisms/src/asset-link-format/asset-link-format.d.ts +7 -0
- package/package.json +1 -1
|
@@ -1,61 +1,36 @@
|
|
|
1
|
-
import { C as
|
|
2
|
-
import { c as
|
|
3
|
-
import { c as
|
|
4
|
-
import { L as
|
|
5
|
-
import { c as
|
|
6
|
-
import { w as
|
|
7
|
-
import { i as
|
|
8
|
-
import { r as
|
|
9
|
-
import { e as
|
|
10
|
-
import { s as
|
|
11
|
-
import { e as
|
|
12
|
-
import { o as
|
|
13
|
-
import { l as
|
|
14
|
-
import { n as
|
|
15
|
-
import { g as
|
|
16
|
-
import { C as
|
|
17
|
-
import { C as
|
|
18
|
-
import
|
|
19
|
-
import
|
|
20
|
-
import { i as
|
|
21
|
-
import { S as
|
|
22
|
-
|
|
1
|
+
import { C as F, n as l } from "./lib-cortex-element.CVMmyPMC.js";
|
|
2
|
+
import { c as O } from "./component.styles.CRO4Odto.js";
|
|
3
|
+
import { c as U } from "./custom-element.L4WJXn1j.js";
|
|
4
|
+
import { L as N } from "./i18n.Bchq8v1d.js";
|
|
5
|
+
import { c as X } from "./math.DuKzLacZ.js";
|
|
6
|
+
import { w as b } from "./watch.DOt4Mabe.js";
|
|
7
|
+
import { i as R, x as m, E as T } from "./lit-element.jLBm65_O.js";
|
|
8
|
+
import { r as g } from "./state.CSDxrqLd.js";
|
|
9
|
+
import { e as f } from "./query.BBf1UFkC.js";
|
|
10
|
+
import { s as L, a as D, b as z } from "./event.BeKOsirN.js";
|
|
11
|
+
import { e as E } from "./class-map.BiVq-cVR.js";
|
|
12
|
+
import { o as _ } from "./if-defined.BRoBj_Rp.js";
|
|
13
|
+
import { l as j } from "./live.DCegntDo.js";
|
|
14
|
+
import { n as y } from "./when.Dr1es41R.js";
|
|
15
|
+
import { g as $, s as G } from "./animation-registry.HmpwNuGH.js";
|
|
16
|
+
import { C as K } from "./checkbox.3i2j3PHc.js";
|
|
17
|
+
import { C as V } from "./icon.mxNZ85k0.js";
|
|
18
|
+
import W from "../components/line-clamp.js";
|
|
19
|
+
import Y from "../components/spinner.js";
|
|
20
|
+
import { i as J } from "./browser.BHOCIF_A.js";
|
|
21
|
+
import { S as Q } from "./sortable.esm.oSzf6C5Q.js";
|
|
22
|
+
import { v as ee } from "./v4.CKZ6klMF.js";
|
|
23
|
+
function te(e, t, i) {
|
|
23
24
|
let n;
|
|
24
25
|
return function(...s) {
|
|
25
|
-
const
|
|
26
|
-
n = null, e.apply(
|
|
26
|
+
const a = this, d = function() {
|
|
27
|
+
n = null, e.apply(a, s);
|
|
27
28
|
};
|
|
28
29
|
n && clearTimeout(n), n = window.setTimeout(d, t);
|
|
29
30
|
};
|
|
30
31
|
}
|
|
31
|
-
const
|
|
32
|
-
|
|
33
|
-
p.push((e + 256).toString(16).slice(1));
|
|
34
|
-
function oe(e, t = 0) {
|
|
35
|
-
return (p[e[t + 0]] + p[e[t + 1]] + p[e[t + 2]] + p[e[t + 3]] + "-" + p[e[t + 4]] + p[e[t + 5]] + "-" + p[e[t + 6]] + p[e[t + 7]] + "-" + p[e[t + 8]] + p[e[t + 9]] + "-" + p[e[t + 10]] + p[e[t + 11]] + p[e[t + 12]] + p[e[t + 13]] + p[e[t + 14]] + p[e[t + 15]]).toLowerCase();
|
|
36
|
-
}
|
|
37
|
-
let w;
|
|
38
|
-
const ae = new Uint8Array(16);
|
|
39
|
-
function se() {
|
|
40
|
-
if (!w) {
|
|
41
|
-
if (typeof crypto > "u" || !crypto.getRandomValues)
|
|
42
|
-
throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");
|
|
43
|
-
w = crypto.getRandomValues.bind(crypto);
|
|
44
|
-
}
|
|
45
|
-
return w(ae);
|
|
46
|
-
}
|
|
47
|
-
const re = typeof crypto < "u" && crypto.randomUUID && crypto.randomUUID.bind(crypto), F = { randomUUID: re };
|
|
48
|
-
function le(e, t, i) {
|
|
49
|
-
if (F.randomUUID && !e)
|
|
50
|
-
return F.randomUUID();
|
|
51
|
-
e = e || {};
|
|
52
|
-
const n = e.random ?? e.rng?.() ?? se();
|
|
53
|
-
if (n.length < 16)
|
|
54
|
-
throw new Error("Random bytes length must be >= 16");
|
|
55
|
-
return n[6] = n[6] & 15 | 64, n[8] = n[8] & 63 | 128, oe(n);
|
|
56
|
-
}
|
|
57
|
-
const de = H`:host{--selected-color:var(--cx-color-primary-600);--selected-background-color:var(--cx-color-primary-50);--hover-background-color:var(--cx-menu-item-background-color-hover);--active-background-color:var(--cx-color-neutral-200);--item-padding:var(--cx-spacing-2x-small) var(--cx-spacing-x-small);outline:0;display:block}:host(:focus-visible) .tree-item{outline:var(--cx-focus-ring);outline-offset:calc(-1 * var(--cx-focus-ring-width))}[hidden]{display:none!important}slot:not([name])::slotted(cx-icon){margin-inline-end:var(--cx-spacing-x-small)}.tree-item{color:var(--cx-color-neutral);cursor:pointer;-webkit-user-select:none;user-select:none;flex-direction:column;align-items:stretch;display:flex;position:relative}.tree-item__checkbox{margin-inline-end:var(--cx-spacing-x-small)}.tree-item__expand-button,.tree-item__checkbox,.tree-item__label{font-family:var(--cx-font-sans);font-size:var(--cx-tree-item-font-size,var(--cx-font-size-small));font-weight:var(--cx-tree-item-font-weight,var(--cx-font-weight-medium));line-height:var(--cx-tree-item-line-height,var(--cx-line-height-large));letter-spacing:var(--cx-tree-item-letter-spacing,var(--cx-letter-spacing-normal))}.tree-item__checkbox::part(base){align-items:center;display:flex}.tree-item__checkbox::part(label){margin-inline-start:0}.tree-item__indentation{flex-shrink:0;width:1em;display:block}.tree-item__expand-spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.tree-item__expand-button{box-sizing:content-box;color:var(--cx-color-neutral-500);cursor:pointer;min-width:max(1em,1rem);min-height:max(1em,1rem);transition:var(--cx-transition-medium) rotate ease;flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative}.tree-item--expanded .tree-item__expand-button{rotate:90deg}.tree-item--expanded.tree-item--rtl .tree-item__expand-button{rotate:-90deg}.tree-item--expanded slot[name=expand-icon],.tree-item:not(.tree-item--expanded) slot[name=collapse-icon]{display:none}:host(:not([aria-disabled=true])) .tree-item--selected .tree-item__item .tree-item__expand-icon-slot{color:var(--selected-color)}.tree-item:not(.tree-item--has-expand-button) .tree-item__expand-icon-slot{visibility:hidden;opacity:0;pointer-events:none}.tree-item__expand-button--visible{cursor:pointer}.tree-item__item{border-radius:var(--cx-border-radius-large);padding:var(--item-padding,var(--cx-spacing-x-small) var(--cx-spacing-small));transition:var(--cx-transition-x-fast) background-color ease;align-items:center;display:flex}.tree-item__item:hover{background-color:var(--hover-background-color)}.tree-item__item:active{background-color:var(--active-background-color)}.tree-item--disabled .tree-item__item{opacity:.5;cursor:default;outline:none}:host(:not([aria-disabled=true])) .tree-item--selected .tree-item__item{background-color:var(--selected-background-color);color:var(--selected-color)}:host(:not([aria-disabled=true])) .tree-item__expand-button{color:var(--cx-color-neutral)}:host(:not([aria-disabled=true])) .tree-item--selected,:host(:not([aria-disabled=true])) .tree-item--selected .tree-item__expand-button,:host(:not([aria-disabled=true])) .tree-item--selected .tree-item__actions::slotted(cx-icon-button){color:var(--cx-color-neutral-0)}:host(:not([aria-disabled=true])) .tree-item--selected .tree-item__actions::slotted(cx-icon-button){--hover-background-color:var(--cx-color-neutral-0)}.tree-item__label{align-items:center;display:flex}.tree-item__actions{font-size:var(--cx-font-size-medium);align-items:center;width:fit-content;margin-inline-start:auto;display:flex}.tree-item__actions::slotted(*){visibility:hidden;opacity:0;transition:var(--cx-transition-x-fast) visibility, var(--cx-transition-x-fast) opacity ease}.tree-item__item:hover .tree-item__actions::slotted(*){visibility:visible;opacity:1}@supports not (overlay:auto){.tree-item__actions::slotted(cx-dropdown[open]){visibility:visible;opacity:1}}.tree-item__children{font-size:calc(1em + var(--indent-size,var(--cx-spacing-medium)));gap:var(--children-gap,0);flex-direction:column;display:flex}@media (forced-colors:active){:host(:not([aria-disabled=true])) .tree-item--selected .tree-item__item{outline:1px dashed selecteditem}}::slotted(cx-tree-item){--hover-background-color:inherit;--active-background-color:inherit;--selected-background-color:inherit;--selected-color:inherit}:host([data-dragging]){position:relative}:host([data-dragging=inside]){background-color:var(--cx-color-primary-400)}:host([data-dragging=before]):before{content:"";border-top:var(--cx-spacing-2x-small) solid var(--cx-color-primary-400);width:100%;position:absolute;top:0;left:0}:host([data-dragging=after]):before{content:"";border-bottom:var(--cx-spacing-2x-small) solid var(--cx-color-primary-400);width:100%;position:absolute;bottom:0;left:0}`, k = "tree-sortable", I = 0.2, O = (e) => e == null;
|
|
58
|
-
function ce() {
|
|
32
|
+
const ie = R`:host{--selected-color:var(--cx-color-primary-600);--selected-background-color:var(--cx-color-primary-50);--hover-background-color:var(--cx-menu-item-background-color-hover);--active-background-color:var(--cx-color-neutral-200);--item-padding:var(--cx-spacing-2x-small) var(--cx-spacing-x-small);outline:0;display:block}:host(:focus-visible) .tree-item{outline:var(--cx-focus-ring);outline-offset:calc(-1 * var(--cx-focus-ring-width))}[hidden]{display:none!important}slot:not([name])::slotted(cx-icon){margin-inline-end:var(--cx-spacing-x-small)}.tree-item{color:var(--cx-color-neutral);cursor:pointer;-webkit-user-select:none;user-select:none;flex-direction:column;align-items:stretch;display:flex;position:relative}.tree-item__checkbox{margin-inline-end:var(--cx-spacing-x-small)}.tree-item__expand-button,.tree-item__checkbox,.tree-item__label{font-family:var(--cx-font-sans);font-size:var(--cx-tree-item-font-size,var(--cx-font-size-small));font-weight:var(--cx-tree-item-font-weight,var(--cx-font-weight-medium));line-height:var(--cx-tree-item-line-height,var(--cx-line-height-large));letter-spacing:var(--cx-tree-item-letter-spacing,var(--cx-letter-spacing-normal))}.tree-item__checkbox::part(base){align-items:center;display:flex}.tree-item__checkbox::part(label){margin-inline-start:0}.tree-item__indentation{flex-shrink:0;width:1em;display:block}.tree-item__expand-spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.tree-item__expand-button{box-sizing:content-box;color:var(--cx-color-neutral-500);cursor:pointer;min-width:max(1em,1rem);min-height:max(1em,1rem);transition:var(--cx-transition-medium) rotate ease;flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative}.tree-item--expanded .tree-item__expand-button{rotate:90deg}.tree-item--expanded.tree-item--rtl .tree-item__expand-button{rotate:-90deg}.tree-item--expanded slot[name=expand-icon],.tree-item:not(.tree-item--expanded) slot[name=collapse-icon]{display:none}:host(:not([aria-disabled=true])) .tree-item--selected .tree-item__item .tree-item__expand-icon-slot{color:var(--selected-color)}.tree-item:not(.tree-item--has-expand-button) .tree-item__expand-icon-slot{visibility:hidden;opacity:0;pointer-events:none}.tree-item__expand-button--visible{cursor:pointer}.tree-item__item{border-radius:var(--cx-border-radius-large);padding:var(--item-padding,var(--cx-spacing-x-small) var(--cx-spacing-small));transition:var(--cx-transition-x-fast) background-color ease;align-items:center;display:flex}.tree-item__item:hover{background-color:var(--hover-background-color)}.tree-item__item:active{background-color:var(--active-background-color)}.tree-item--disabled .tree-item__item{opacity:.5;cursor:default;outline:none}:host(:not([aria-disabled=true])) .tree-item--selected .tree-item__item{background-color:var(--selected-background-color);color:var(--selected-color)}:host(:not([aria-disabled=true])) .tree-item__expand-button{color:var(--cx-color-neutral)}:host(:not([aria-disabled=true])) .tree-item--selected,:host(:not([aria-disabled=true])) .tree-item--selected .tree-item__expand-button,:host(:not([aria-disabled=true])) .tree-item--selected .tree-item__actions::slotted(cx-icon-button){color:var(--cx-color-neutral-0)}:host(:not([aria-disabled=true])) .tree-item--selected .tree-item__actions::slotted(cx-icon-button){--hover-background-color:var(--cx-color-neutral-0)}.tree-item__label{align-items:center;display:flex}.tree-item__actions{font-size:var(--cx-font-size-medium);align-items:center;width:fit-content;margin-inline-start:auto;display:flex}.tree-item__actions::slotted(*){visibility:hidden;opacity:0;transition:var(--cx-transition-x-fast) visibility, var(--cx-transition-x-fast) opacity ease}.tree-item__item:hover .tree-item__actions::slotted(*){visibility:visible;opacity:1}@supports not (overlay:auto){.tree-item__actions::slotted(cx-dropdown[open]){visibility:visible;opacity:1}}.tree-item__children{font-size:calc(1em + var(--indent-size,var(--cx-spacing-medium)));gap:var(--children-gap,0);flex-direction:column;display:flex}@media (forced-colors:active){:host(:not([aria-disabled=true])) .tree-item--selected .tree-item__item{outline:1px dashed selecteditem}}::slotted(cx-tree-item){--hover-background-color:inherit;--active-background-color:inherit;--selected-background-color:inherit;--selected-color:inherit}:host([data-dragging]){position:relative}:host([data-dragging=inside]){background-color:var(--cx-color-primary-400)}:host([data-dragging=before]):before{content:"";border-top:var(--cx-spacing-2x-small) solid var(--cx-color-primary-400);width:100%;position:absolute;top:0;left:0}:host([data-dragging=after]):before{content:"";border-bottom:var(--cx-spacing-2x-small) solid var(--cx-color-primary-400);width:100%;position:absolute;bottom:0;left:0}`, w = "tree-sortable", C = 0.2, P = (e) => e == null;
|
|
33
|
+
function ne() {
|
|
59
34
|
function e() {
|
|
60
35
|
}
|
|
61
36
|
let t = null;
|
|
@@ -73,50 +48,50 @@ function ce() {
|
|
|
73
48
|
activeSortable: i,
|
|
74
49
|
cancel: n,
|
|
75
50
|
changed: s,
|
|
76
|
-
completed:
|
|
51
|
+
completed: a,
|
|
77
52
|
dragEl: d,
|
|
78
|
-
originalEvent:
|
|
79
|
-
putSortable:
|
|
80
|
-
target:
|
|
53
|
+
originalEvent: u,
|
|
54
|
+
putSortable: x,
|
|
55
|
+
target: p
|
|
81
56
|
}) {
|
|
82
|
-
if (t = null, !i || !i.options[
|
|
57
|
+
if (t = null, !i || !i.options[w] || !i.options.getDropZone || P(i.options.insertBeforeZonePercentage) || P(i.options.insertAfterZonePercentage) || !["CX-TREE-ITEM", "CX-TREE"].includes(p.tagName) || p.hasAttribute("no-drag")) {
|
|
83
58
|
n();
|
|
84
59
|
return;
|
|
85
60
|
}
|
|
86
|
-
const
|
|
87
|
-
if (!
|
|
61
|
+
const k = i.options.getDropZone(p);
|
|
62
|
+
if (!k) {
|
|
88
63
|
n();
|
|
89
64
|
return;
|
|
90
65
|
}
|
|
91
|
-
const
|
|
92
|
-
|
|
93
|
-
const
|
|
94
|
-
if (d &&
|
|
95
|
-
if (
|
|
66
|
+
const A = k.getBoundingClientRect(), B = (u.clientY - A.top) / A.height, v = x || this.sortable;
|
|
67
|
+
v.captureAnimationState(), v !== i && i.captureAnimationState();
|
|
68
|
+
const q = p.parentNode;
|
|
69
|
+
if (d && q)
|
|
70
|
+
if (B < i.options.insertBeforeZonePercentage)
|
|
96
71
|
t = {
|
|
97
72
|
dragEl: d,
|
|
98
|
-
el:
|
|
73
|
+
el: p,
|
|
99
74
|
position: -1
|
|
100
|
-
},
|
|
101
|
-
else if (
|
|
75
|
+
}, p.setAttribute("data-dragging", "before");
|
|
76
|
+
else if (B > i.options.insertAfterZonePercentage)
|
|
102
77
|
t = {
|
|
103
78
|
dragEl: d,
|
|
104
|
-
el:
|
|
79
|
+
el: p,
|
|
105
80
|
position: 1
|
|
106
|
-
},
|
|
81
|
+
}, p.setAttribute("data-dragging", "after");
|
|
107
82
|
else {
|
|
108
|
-
if (
|
|
109
|
-
s(),
|
|
83
|
+
if (p.hasAttribute("no-drag-inside")) {
|
|
84
|
+
s(), a(!0), n();
|
|
110
85
|
return;
|
|
111
86
|
}
|
|
112
87
|
t = {
|
|
113
88
|
dragEl: d,
|
|
114
|
-
el:
|
|
89
|
+
el: p,
|
|
115
90
|
position: 0
|
|
116
|
-
},
|
|
91
|
+
}, p.setAttribute("data-dragging", "inside");
|
|
117
92
|
}
|
|
118
|
-
if (
|
|
119
|
-
s(),
|
|
93
|
+
if (v.animateAll(), v !== i && i.animateAll(), t)
|
|
94
|
+
s(), a(!0), n();
|
|
120
95
|
else
|
|
121
96
|
return !0;
|
|
122
97
|
},
|
|
@@ -124,7 +99,7 @@ function ce() {
|
|
|
124
99
|
cancel: i,
|
|
125
100
|
dragEl: n
|
|
126
101
|
}) {
|
|
127
|
-
if (n && !
|
|
102
|
+
if (n && !o.isTreeItem(n)) {
|
|
128
103
|
i();
|
|
129
104
|
return;
|
|
130
105
|
}
|
|
@@ -136,28 +111,28 @@ function ce() {
|
|
|
136
111
|
}
|
|
137
112
|
}
|
|
138
113
|
}, Object.assign(e, {
|
|
139
|
-
pluginName:
|
|
114
|
+
pluginName: w
|
|
140
115
|
});
|
|
141
116
|
}
|
|
142
|
-
class
|
|
117
|
+
class S extends Q {
|
|
143
118
|
constructor(t, i) {
|
|
144
119
|
super(t, i);
|
|
145
120
|
}
|
|
146
121
|
static create(t, i = {}) {
|
|
147
|
-
return new
|
|
122
|
+
return new S(t, i);
|
|
148
123
|
}
|
|
149
124
|
}
|
|
150
|
-
|
|
151
|
-
const
|
|
125
|
+
S.mount(new ne());
|
|
126
|
+
const M = (e) => ({
|
|
152
127
|
...e,
|
|
153
128
|
animation: 100,
|
|
154
129
|
draggable: "cx-tree-item:not([no-drag])",
|
|
155
130
|
emptyInsertThreshold: 0,
|
|
156
131
|
fallbackOnBody: !0,
|
|
157
|
-
forceFallback:
|
|
132
|
+
forceFallback: J(),
|
|
158
133
|
getDropZone: (t) => t?.shadowRoot?.querySelector(".tree-item__item"),
|
|
159
|
-
insertAfterZonePercentage: 1 -
|
|
160
|
-
insertBeforeZonePercentage:
|
|
134
|
+
insertAfterZonePercentage: 1 - C,
|
|
135
|
+
insertBeforeZonePercentage: C,
|
|
161
136
|
invertSwap: !0,
|
|
162
137
|
onStart(t) {
|
|
163
138
|
if (e.onStart?.(t), t.item.tagName === "CX-TREE-ITEM") {
|
|
@@ -165,17 +140,17 @@ const j = (e) => ({
|
|
|
165
140
|
i.expanded = !1;
|
|
166
141
|
}
|
|
167
142
|
},
|
|
168
|
-
[
|
|
169
|
-
swapThreshold:
|
|
143
|
+
[w]: !0,
|
|
144
|
+
swapThreshold: C
|
|
170
145
|
});
|
|
171
|
-
var
|
|
172
|
-
for (var s = n > 1 ? void 0 : n ?
|
|
173
|
-
(d = e[
|
|
174
|
-
return n && s &&
|
|
146
|
+
var ae = Object.defineProperty, oe = Object.getOwnPropertyDescriptor, r = (e, t, i, n) => {
|
|
147
|
+
for (var s = n > 1 ? void 0 : n ? oe(t, i) : t, a = e.length - 1, d; a >= 0; a--)
|
|
148
|
+
(d = e[a]) && (s = (n ? d(t, i, s) : d(s)) || s);
|
|
149
|
+
return n && s && ae(t, i, s), s;
|
|
175
150
|
};
|
|
176
|
-
let
|
|
151
|
+
let o = class extends F {
|
|
177
152
|
constructor() {
|
|
178
|
-
super(), this.localize = new
|
|
153
|
+
super(), this.localize = new N(this), this.expanded = !1, this.selected = !1, this.disabled = !1, this.readonly = !1, this.lazy = !1, this.href = "", this.rel = "noreferrer noopener", this.itemId = "", this.sortable = !1, this.noDrag = !1, this.noSelect = !1, this.noDragInside = !1, this.sortableGroup = void 0, this.expandButtonPlacement = "start", this.noForwardExpandButtonPlacement = !1, this.disabledSyncCheckboxes = !1, this.partialSyncCheckboxes = !1, this.previouslySelected = !1, this.focusable = !1, this.maxLines = -1, this.indeterminate = !1, this.isLeaf = !1, this.loading = !1, this.selectable = !1, this.sortableInstance = null, this.onDragStart = (e) => {
|
|
179
154
|
if (e.dataTransfer) {
|
|
180
155
|
const t = this.cloneNode(!0);
|
|
181
156
|
t.style.backgroundColor = "red", t.style.display = "none", this.ownerDocument.body.appendChild(t), e.dataTransfer.setDragImage(t, 0, 0);
|
|
@@ -194,20 +169,20 @@ let a = class extends R {
|
|
|
194
169
|
), this.isLeaf = !this.lazy && this.getChildrenItems().length === 0, this.handleExpandedChange();
|
|
195
170
|
}
|
|
196
171
|
async animateCollapse() {
|
|
197
|
-
this.emit("cx-collapse"), await
|
|
198
|
-
const { keyframes: e, options: t } =
|
|
172
|
+
this.emit("cx-collapse"), await L(this.childrenContainer);
|
|
173
|
+
const { keyframes: e, options: t } = $(this, "tree-item.collapse", {
|
|
199
174
|
dir: this.localize.dir()
|
|
200
175
|
});
|
|
201
|
-
await
|
|
176
|
+
await D(
|
|
202
177
|
this.childrenContainer,
|
|
203
|
-
|
|
178
|
+
z(e, this.childrenContainer.scrollHeight),
|
|
204
179
|
t
|
|
205
180
|
), this.childrenContainer.hidden = !0, this.emit("cx-after-collapse");
|
|
206
181
|
}
|
|
207
182
|
// Checks whether the item is nested into an item
|
|
208
183
|
isNestedItem() {
|
|
209
184
|
const e = this.parentElement;
|
|
210
|
-
return !!e &&
|
|
185
|
+
return !!e && o.isTreeItem(e);
|
|
211
186
|
}
|
|
212
187
|
/**
|
|
213
188
|
* Wait for this item to be fully updated before processing the slot change.
|
|
@@ -222,13 +197,13 @@ let a = class extends R {
|
|
|
222
197
|
e.has("selected") && !e.has("indeterminate") && (this.indeterminate = !1);
|
|
223
198
|
}
|
|
224
199
|
async animateExpand() {
|
|
225
|
-
this.emit("cx-expand"), await
|
|
226
|
-
const { keyframes: e, options: t } =
|
|
200
|
+
this.emit("cx-expand"), await L(this.childrenContainer), this.childrenContainer.hidden = !1;
|
|
201
|
+
const { keyframes: e, options: t } = $(this, "tree-item.expand", {
|
|
227
202
|
dir: this.localize.dir()
|
|
228
203
|
});
|
|
229
|
-
await
|
|
204
|
+
await D(
|
|
230
205
|
this.childrenContainer,
|
|
231
|
-
|
|
206
|
+
z(e, this.childrenContainer.scrollHeight),
|
|
232
207
|
t
|
|
233
208
|
), this.childrenContainer.style.height = "auto", this.emit("cx-after-expand");
|
|
234
209
|
}
|
|
@@ -252,24 +227,24 @@ let a = class extends R {
|
|
|
252
227
|
this.expanded ? this.lazy ? (this.loading = !0, this.emit("cx-lazy-load")) : this.animateExpand() : this.animateCollapse();
|
|
253
228
|
}
|
|
254
229
|
async handleLazyChange() {
|
|
255
|
-
!this.lazy && this.loading && (this.loading = !1, this.handleChildrenSlotChange()), this.selected && (await this.updateComplete,
|
|
230
|
+
!this.lazy && this.loading && (this.loading = !1, this.handleChildrenSlotChange()), this.selected && (await this.updateComplete, I(this)), this.emit("cx-lazy-change");
|
|
256
231
|
}
|
|
257
232
|
/** Gets all the nested tree items in this node. */
|
|
258
233
|
getChildrenItems({
|
|
259
234
|
includeDisabled: e = !0
|
|
260
235
|
} = {}) {
|
|
261
236
|
return this.childrenSlot ? [...this.childrenSlot.assignedElements({ flatten: !0 })].filter(
|
|
262
|
-
(t) =>
|
|
237
|
+
(t) => o.isTreeItem(t) && (e || !t.disabled)
|
|
263
238
|
) : [];
|
|
264
239
|
}
|
|
265
240
|
renderExpandButton() {
|
|
266
241
|
const e = this.localize.dir() === "rtl", t = this.showExpandButton;
|
|
267
|
-
return
|
|
242
|
+
return m`<div part="expand-button" class=${E({
|
|
268
243
|
"tree-item__expand-button": !0,
|
|
269
244
|
"tree-item__expand-button--visible": t
|
|
270
|
-
})} aria-hidden="true">${
|
|
245
|
+
})} aria-hidden="true">${y(
|
|
271
246
|
this.loading,
|
|
272
|
-
() =>
|
|
247
|
+
() => m`<cx-spinner part="spinner" class="tree-item__expand-spinner" exportparts="base:spinner__base"></cx-spinner>`
|
|
273
248
|
)}<slot class="tree-item__expand-icon-slot" name="expand-icon"><cx-icon name=${e ? "chevron_left" : "chevron_right"}></cx-icon></slot><slot class="tree-item__expand-icon-slot" name="collapse-icon"><cx-icon name=${e ? "chevron_left" : "chevron_right"}></cx-icon></slot></div>`;
|
|
274
249
|
}
|
|
275
250
|
handleSortableUpdate(e) {
|
|
@@ -296,8 +271,8 @@ let a = class extends R {
|
|
|
296
271
|
this.removeEventListener("dragstart", this.onDragStart), this.sortableInstance && (this.sortableInstance.destroy(), this.sortableInstance = null);
|
|
297
272
|
}
|
|
298
273
|
initSortable() {
|
|
299
|
-
this.addEventListener("dragstart", this.onDragStart), this.focusable || this.setAttribute("tabindex", "-1"), this.sortableInstance =
|
|
300
|
-
...
|
|
274
|
+
this.addEventListener("dragstart", this.onDragStart), this.focusable || this.setAttribute("tabindex", "-1"), this.sortableInstance = S.create(this, {
|
|
275
|
+
...M({
|
|
301
276
|
group: this.sortableGroup,
|
|
302
277
|
onAdd: this.handleSortableUpdate,
|
|
303
278
|
onEnd: this.handleSortableEnd,
|
|
@@ -312,7 +287,7 @@ let a = class extends R {
|
|
|
312
287
|
}
|
|
313
288
|
renderBase(e) {
|
|
314
289
|
const t = this.showExpandButton;
|
|
315
|
-
return this.href ?
|
|
290
|
+
return this.href ? m`<a id="anchor" part="base" class=${E({
|
|
316
291
|
"tree-item": !0,
|
|
317
292
|
"tree-item--disabled": this.disabled,
|
|
318
293
|
"tree-item--expanded": this.expanded,
|
|
@@ -320,7 +295,7 @@ let a = class extends R {
|
|
|
320
295
|
"tree-item--leaf": this.isLeaf,
|
|
321
296
|
"tree-item--rtl": this.localize.dir() === "rtl",
|
|
322
297
|
"tree-item--selected": this.selected
|
|
323
|
-
})} href=${
|
|
298
|
+
})} href=${_(this.href)} target=${_(this.target)} download=${_(this.download)} rel=${_(this.rel)} ?inert=${this.disabled}>${e}</a>` : m`<div part="base" class=${E({
|
|
324
299
|
"tree-item": !0,
|
|
325
300
|
"tree-item--disabled": this.disabled,
|
|
326
301
|
"tree-item--expanded": this.expanded,
|
|
@@ -331,20 +306,20 @@ let a = class extends R {
|
|
|
331
306
|
})}>${e}</div>`;
|
|
332
307
|
}
|
|
333
308
|
render() {
|
|
334
|
-
return this.renderBase(
|
|
309
|
+
return this.renderBase(m`<div class="tree-item__item" part="
|
|
335
310
|
item
|
|
336
311
|
${this.disabled ? "item--disabled" : ""}
|
|
337
312
|
${this.expanded ? "item--expanded" : ""}
|
|
338
313
|
${this.indeterminate ? "item--indeterminate" : ""}
|
|
339
314
|
${this.selected ? "item--selected" : ""}
|
|
340
|
-
"><div class="tree-item__indentation" part="indentation"></div>${
|
|
315
|
+
"><div class="tree-item__indentation" part="indentation"></div>${y(
|
|
341
316
|
this.expandButtonPlacement === "start",
|
|
342
317
|
this.renderExpandButton,
|
|
343
|
-
() =>
|
|
318
|
+
() => T
|
|
344
319
|
)}
|
|
345
|
-
${
|
|
320
|
+
${y(
|
|
346
321
|
this.selectable,
|
|
347
|
-
() =>
|
|
322
|
+
() => m`<cx-checkbox part="checkbox" aria-label=${this.localize.term("checkbox")} exportparts="
|
|
348
323
|
base:checkbox__base,
|
|
349
324
|
control:checkbox__control,
|
|
350
325
|
control--checked:checkbox__control--checked,
|
|
@@ -352,210 +327,210 @@ let a = class extends R {
|
|
|
352
327
|
checked-icon:checkbox__checked-icon,
|
|
353
328
|
indeterminate-icon:checkbox__indeterminate-icon,
|
|
354
329
|
label:checkbox__label
|
|
355
|
-
" class="tree-item__checkbox" ?disabled=${this.disabled} ?checked=${
|
|
330
|
+
" class="tree-item__checkbox" ?disabled=${this.disabled} ?checked=${j(this.selected)} ?indeterminate=${this.indeterminate} tabindex="-1"></cx-checkbox>`
|
|
356
331
|
)}
|
|
357
332
|
|
|
358
|
-
${
|
|
333
|
+
${y(
|
|
359
334
|
this.maxLines > 0,
|
|
360
|
-
() =>
|
|
361
|
-
() =>
|
|
362
|
-
)}<slot class="tree-item__actions" part="actions" name="actions"></slot>${
|
|
335
|
+
() => m`<cx-line-clamp class="tree-item__label" part="label" lines=${this.maxLines}><slot></slot></cx-line-clamp>`,
|
|
336
|
+
() => m`<slot class="tree-item__label" part="label"></slot>`
|
|
337
|
+
)}<slot class="tree-item__actions" part="actions" name="actions"></slot>${y(
|
|
363
338
|
this.expandButtonPlacement === "end",
|
|
364
339
|
this.renderExpandButton,
|
|
365
|
-
() =>
|
|
340
|
+
() => T
|
|
366
341
|
)}</div><div class="tree-item__children" part="children" role="group"><slot name="children" @slotchange=${this.handleChildrenSlotChange}></slot></div>`);
|
|
367
342
|
}
|
|
368
343
|
};
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
"cx-checkbox":
|
|
372
|
-
"cx-icon":
|
|
373
|
-
"cx-line-clamp":
|
|
374
|
-
"cx-spinner":
|
|
344
|
+
o.styles = [O, ie];
|
|
345
|
+
o.dependencies = {
|
|
346
|
+
"cx-checkbox": K,
|
|
347
|
+
"cx-icon": V,
|
|
348
|
+
"cx-line-clamp": W,
|
|
349
|
+
"cx-spinner": Y
|
|
375
350
|
};
|
|
376
351
|
r([
|
|
377
|
-
|
|
378
|
-
],
|
|
352
|
+
f("slot:not([name])")
|
|
353
|
+
], o.prototype, "defaultSlot", 2);
|
|
379
354
|
r([
|
|
380
|
-
|
|
381
|
-
],
|
|
355
|
+
f("slot[name=children]")
|
|
356
|
+
], o.prototype, "childrenSlot", 2);
|
|
382
357
|
r([
|
|
383
|
-
|
|
384
|
-
],
|
|
358
|
+
f(".tree-item__item")
|
|
359
|
+
], o.prototype, "itemElement", 2);
|
|
385
360
|
r([
|
|
386
|
-
|
|
387
|
-
],
|
|
361
|
+
f(".tree-item__children")
|
|
362
|
+
], o.prototype, "childrenContainer", 2);
|
|
388
363
|
r([
|
|
389
|
-
|
|
390
|
-
],
|
|
364
|
+
f(".tree-item__expand-button slot")
|
|
365
|
+
], o.prototype, "expandButtonSlot", 2);
|
|
391
366
|
r([
|
|
392
367
|
l({ reflect: !0, type: Boolean })
|
|
393
|
-
],
|
|
368
|
+
], o.prototype, "expanded", 2);
|
|
394
369
|
r([
|
|
395
370
|
l({ reflect: !0, type: Boolean })
|
|
396
|
-
],
|
|
371
|
+
], o.prototype, "selected", 2);
|
|
397
372
|
r([
|
|
398
373
|
l({ reflect: !0, type: Boolean })
|
|
399
|
-
],
|
|
374
|
+
], o.prototype, "disabled", 2);
|
|
400
375
|
r([
|
|
401
376
|
l({ reflect: !0, type: Boolean })
|
|
402
|
-
],
|
|
377
|
+
], o.prototype, "readonly", 2);
|
|
403
378
|
r([
|
|
404
379
|
l({ reflect: !0, type: Boolean })
|
|
405
|
-
],
|
|
380
|
+
], o.prototype, "lazy", 2);
|
|
406
381
|
r([
|
|
407
382
|
l()
|
|
408
|
-
],
|
|
383
|
+
], o.prototype, "href", 2);
|
|
409
384
|
r([
|
|
410
385
|
l()
|
|
411
|
-
],
|
|
386
|
+
], o.prototype, "target", 2);
|
|
412
387
|
r([
|
|
413
388
|
l()
|
|
414
|
-
],
|
|
389
|
+
], o.prototype, "rel", 2);
|
|
415
390
|
r([
|
|
416
391
|
l()
|
|
417
|
-
],
|
|
392
|
+
], o.prototype, "download", 2);
|
|
418
393
|
r([
|
|
419
394
|
l({ attribute: "itemid", reflect: !0, type: String })
|
|
420
|
-
],
|
|
395
|
+
], o.prototype, "itemId", 2);
|
|
421
396
|
r([
|
|
422
397
|
l({ reflect: !0, type: Boolean })
|
|
423
|
-
],
|
|
398
|
+
], o.prototype, "sortable", 2);
|
|
424
399
|
r([
|
|
425
400
|
l({ attribute: "no-drag", reflect: !0, type: Boolean })
|
|
426
|
-
],
|
|
401
|
+
], o.prototype, "noDrag", 2);
|
|
427
402
|
r([
|
|
428
403
|
l({ attribute: "no-select", reflect: !0, type: Boolean })
|
|
429
|
-
],
|
|
404
|
+
], o.prototype, "noSelect", 2);
|
|
430
405
|
r([
|
|
431
406
|
l({ attribute: "no-drag-inside", reflect: !0, type: Boolean })
|
|
432
|
-
],
|
|
407
|
+
], o.prototype, "noDragInside", 2);
|
|
433
408
|
r([
|
|
434
409
|
l({ attribute: "sortable-group", type: String })
|
|
435
|
-
],
|
|
410
|
+
], o.prototype, "sortableGroup", 2);
|
|
436
411
|
r([
|
|
437
412
|
l({
|
|
438
413
|
attribute: "expand-button-placement",
|
|
439
414
|
reflect: !0,
|
|
440
415
|
type: String
|
|
441
416
|
})
|
|
442
|
-
],
|
|
417
|
+
], o.prototype, "expandButtonPlacement", 2);
|
|
443
418
|
r([
|
|
444
419
|
l({ attribute: "no-forward-expand-button-placement", type: Boolean })
|
|
445
|
-
],
|
|
420
|
+
], o.prototype, "noForwardExpandButtonPlacement", 2);
|
|
446
421
|
r([
|
|
447
422
|
l({
|
|
448
423
|
attribute: "disabled-sync-checkboxes",
|
|
449
424
|
reflect: !0,
|
|
450
425
|
type: Boolean
|
|
451
426
|
})
|
|
452
|
-
],
|
|
427
|
+
], o.prototype, "disabledSyncCheckboxes", 2);
|
|
453
428
|
r([
|
|
454
429
|
l({
|
|
455
430
|
attribute: "partial-sync-checkboxes",
|
|
456
431
|
reflect: !0,
|
|
457
432
|
type: Boolean
|
|
458
433
|
})
|
|
459
|
-
],
|
|
434
|
+
], o.prototype, "partialSyncCheckboxes", 2);
|
|
460
435
|
r([
|
|
461
436
|
l({ attribute: "previously-selected", reflect: !0, type: Boolean })
|
|
462
|
-
],
|
|
437
|
+
], o.prototype, "previouslySelected", 2);
|
|
463
438
|
r([
|
|
464
439
|
l({ reflect: !0, type: Boolean })
|
|
465
|
-
],
|
|
440
|
+
], o.prototype, "focusable", 2);
|
|
466
441
|
r([
|
|
467
442
|
l({ attribute: "max-lines", type: Number })
|
|
468
|
-
],
|
|
443
|
+
], o.prototype, "maxLines", 2);
|
|
469
444
|
r([
|
|
470
|
-
|
|
471
|
-
],
|
|
445
|
+
g()
|
|
446
|
+
], o.prototype, "indeterminate", 2);
|
|
472
447
|
r([
|
|
473
|
-
|
|
474
|
-
],
|
|
448
|
+
g()
|
|
449
|
+
], o.prototype, "isLeaf", 2);
|
|
475
450
|
r([
|
|
476
|
-
|
|
477
|
-
],
|
|
451
|
+
g()
|
|
452
|
+
], o.prototype, "loading", 2);
|
|
478
453
|
r([
|
|
479
|
-
|
|
480
|
-
],
|
|
454
|
+
g()
|
|
455
|
+
], o.prototype, "selectable", 2);
|
|
481
456
|
r([
|
|
482
|
-
|
|
483
|
-
],
|
|
457
|
+
g()
|
|
458
|
+
], o.prototype, "sortableInstance", 2);
|
|
484
459
|
r([
|
|
485
|
-
|
|
486
|
-
],
|
|
460
|
+
b("loading", { waitUntilFirstUpdate: !0 })
|
|
461
|
+
], o.prototype, "handleLoadingChange", 1);
|
|
487
462
|
r([
|
|
488
|
-
|
|
489
|
-
],
|
|
463
|
+
b("disabled")
|
|
464
|
+
], o.prototype, "handleDisabledChange", 1);
|
|
490
465
|
r([
|
|
491
|
-
|
|
492
|
-
],
|
|
466
|
+
b("selected")
|
|
467
|
+
], o.prototype, "handleSelectedChange", 1);
|
|
493
468
|
r([
|
|
494
|
-
|
|
495
|
-
],
|
|
469
|
+
b("expanded", { waitUntilFirstUpdate: !0 })
|
|
470
|
+
], o.prototype, "handleExpandedChange", 1);
|
|
496
471
|
r([
|
|
497
|
-
|
|
498
|
-
],
|
|
472
|
+
b("expanded", { waitUntilFirstUpdate: !0 })
|
|
473
|
+
], o.prototype, "handleExpandAnimation", 1);
|
|
499
474
|
r([
|
|
500
|
-
|
|
501
|
-
],
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
],
|
|
505
|
-
|
|
475
|
+
b("lazy", { waitUntilFirstUpdate: !0 })
|
|
476
|
+
], o.prototype, "handleLazyChange", 1);
|
|
477
|
+
o = r([
|
|
478
|
+
U("cx-tree-item")
|
|
479
|
+
], o);
|
|
480
|
+
G("tree-item.expand", {
|
|
506
481
|
keyframes: [
|
|
507
482
|
{ height: "0", opacity: "0", overflow: "hidden" },
|
|
508
483
|
{ height: "auto", opacity: "1", overflow: "hidden" }
|
|
509
484
|
],
|
|
510
485
|
options: { duration: 250, easing: "cubic-bezier(0.4, 0.0, 0.2, 1)" }
|
|
511
486
|
});
|
|
512
|
-
|
|
487
|
+
G("tree-item.collapse", {
|
|
513
488
|
keyframes: [
|
|
514
489
|
{ height: "auto", opacity: "1", overflow: "hidden" },
|
|
515
490
|
{ height: "0", opacity: "0", overflow: "hidden" }
|
|
516
491
|
],
|
|
517
492
|
options: { duration: 200, easing: "cubic-bezier(0.4, 0.0, 0.2, 1)" }
|
|
518
493
|
});
|
|
519
|
-
const
|
|
520
|
-
var
|
|
521
|
-
for (var s = n > 1 ? void 0 : n ?
|
|
522
|
-
(d = e[
|
|
523
|
-
return n && s &&
|
|
494
|
+
const se = R`:host{--indent-guide-color:var(--cx-color-neutral-200);--indent-guide-offset:0;--indent-guide-style:solid;--indent-guide-width:0;--indent-size:var(--cx-spacing-large);font-size:0;display:block}:host::part(children){gap:var(--children-gap,0);flex-direction:column;display:flex}:host([dragging]) ::slotted(cx-tree-item){--hover-background-color:transparent!important;--active-background-color:transparent!important;--selected-background-color:transparent!important}`;
|
|
495
|
+
var re = Object.defineProperty, le = Object.getOwnPropertyDescriptor, h = (e, t, i, n) => {
|
|
496
|
+
for (var s = n > 1 ? void 0 : n ? le(t, i) : t, a = e.length - 1, d; a >= 0; a--)
|
|
497
|
+
(d = e[a]) && (s = (n ? d(t, i, s) : d(s)) || s);
|
|
498
|
+
return n && s && re(t, i, s), s;
|
|
524
499
|
};
|
|
525
|
-
function
|
|
500
|
+
function H(e) {
|
|
526
501
|
const t = e.getChildrenItems({ includeDisabled: !1 });
|
|
527
502
|
if (t.length) {
|
|
528
503
|
const i = t.every((d) => d.selected), n = t.every(
|
|
529
504
|
(d) => !d.selected && !d.indeterminate
|
|
530
505
|
);
|
|
531
|
-
let s = !1,
|
|
532
|
-
(!i && !n || e.partialSyncCheckboxes && (i || n && e.previouslySelected)) && (s = !0), e.partialSyncCheckboxes ?
|
|
506
|
+
let s = !1, a = !1;
|
|
507
|
+
(!i && !n || e.partialSyncCheckboxes && (i || n && e.previouslySelected)) && (s = !0), e.partialSyncCheckboxes ? a = i && !s : a = i, e.indeterminate = s, e.selected = a;
|
|
533
508
|
}
|
|
534
509
|
}
|
|
535
|
-
function
|
|
510
|
+
function Z(e, t = "single") {
|
|
536
511
|
const i = e.parentElement;
|
|
537
|
-
|
|
512
|
+
o.isTreeItem(i) && !i.disabledSyncCheckboxes && t === "multiple" && (H(i), Z(i, t));
|
|
538
513
|
}
|
|
539
|
-
function
|
|
514
|
+
function I(e, t = !1, i = "single") {
|
|
540
515
|
function n(s) {
|
|
541
|
-
if (!(!(s instanceof
|
|
542
|
-
for (const
|
|
543
|
-
|
|
544
|
-
t &&
|
|
516
|
+
if (!(!(s instanceof o) && s.getAttribute("role") !== "treeitem")) {
|
|
517
|
+
for (const a of s.getChildrenItems())
|
|
518
|
+
a.selected = t ? s.selected || a.selected : !a.disabled && !a.readonly && s.selected, n(a);
|
|
519
|
+
t && H(s);
|
|
545
520
|
}
|
|
546
521
|
}
|
|
547
|
-
!e.disabledSyncCheckboxes && i === "multiple" && (e.partialSyncCheckboxes && (e.selected ? e.previouslySelected = !0 : e.previouslySelected = !1), n(e)),
|
|
522
|
+
!e.disabledSyncCheckboxes && i === "multiple" && (e.partialSyncCheckboxes && (e.selected ? e.previouslySelected = !0 : e.previouslySelected = !1), n(e)), Z(e, i);
|
|
548
523
|
}
|
|
549
|
-
let c = class extends
|
|
524
|
+
let c = class extends F {
|
|
550
525
|
constructor() {
|
|
551
|
-
super(), this.sortable = !1, this.sortableGroup = null, this.disabledSortableGroup = !1, this.selection = "single", this.disabledAutoExpand = !1, this.autoExpandToSelected = !1, this.expandButtonPlacement = "start", this.noForwardExpandButtonPlacement = !1, this.forceOnChange = !1, this.labelSelectSingle = !1, this.noDragInside = !1, this.focusable = !1, this.clickTarget = null, this.localize = new
|
|
526
|
+
super(), this.sortable = !1, this.sortableGroup = null, this.disabledSortableGroup = !1, this.selection = "single", this.disabledAutoExpand = !1, this.autoExpandToSelected = !1, this.expandButtonPlacement = "start", this.noForwardExpandButtonPlacement = !1, this.forceOnChange = !1, this.labelSelectSingle = !1, this.noDragInside = !1, this.focusable = !1, this.clickTarget = null, this.localize = new N(this), this.sortableInstance = null, this.handleSortableUpdate = this.handleSortableUpdate.bind(this), this.handleSortableStart = this.handleSortableStart.bind(this), this.handleSortableEnd = this.handleSortableEnd.bind(this), this.handleFocusIn = this.handleFocusIn.bind(this), this.handleFocusOut = this.handleFocusOut.bind(this), this.handleHostMouseDown = this.handleHostMouseDown.bind(this), this.handleSlotChange = this.handleSlotChange.bind(this), this.handleTreeChanged = this.handleTreeChanged.bind(this), this.initTreeItem = this.initTreeItem.bind(this);
|
|
552
527
|
}
|
|
553
528
|
runFirstUpdated() {
|
|
554
529
|
this.setAttribute("role", "tree"), this.setAttribute("tabindex", "0");
|
|
555
530
|
}
|
|
556
531
|
runConnectedCallback() {
|
|
557
532
|
if (this.addEventListener("focusin", this.handleFocusIn), this.addEventListener("focusout", this.handleFocusOut), this.addEventListener("mousedown", this.handleHostMouseDown), this.addEventListener("cx-lazy-change", this.handleSlotChange), this.mutationObserver = new MutationObserver(this.handleTreeChanged), this.mutationObserver.observe(this, { childList: !0, subtree: !0 }), this.autoExpandToSelected) {
|
|
558
|
-
const e =
|
|
533
|
+
const e = te(() => {
|
|
559
534
|
customElements.whenDefined("cx-tree-item").then(() => {
|
|
560
535
|
this.selectedItems.forEach((t) => {
|
|
561
536
|
this.expandToItem(t);
|
|
@@ -602,9 +577,9 @@ let c = class extends R {
|
|
|
602
577
|
handleTreeChanged(e) {
|
|
603
578
|
for (const t of e) {
|
|
604
579
|
const i = [...t.addedNodes].filter(
|
|
605
|
-
|
|
580
|
+
o.isTreeItem
|
|
606
581
|
), n = [...t.removedNodes].filter(
|
|
607
|
-
|
|
582
|
+
o.isTreeItem
|
|
608
583
|
);
|
|
609
584
|
i.forEach(this.initTreeItem), this.lastFocusedItem && n.includes(this.lastFocusedItem) && (this.lastFocusedItem = null);
|
|
610
585
|
}
|
|
@@ -619,18 +594,18 @@ let c = class extends R {
|
|
|
619
594
|
const i = [...this.selectedItems], n = this.getAllTreeItems();
|
|
620
595
|
if (this.selection === "multiple")
|
|
621
596
|
t && await Promise.all(
|
|
622
|
-
n.map(async (
|
|
623
|
-
|
|
597
|
+
n.map(async (a) => {
|
|
598
|
+
a.selected = !1, a.indeterminate = !1, a.previouslySelected = !1, await a.updateComplete;
|
|
624
599
|
})
|
|
625
|
-
), e.selected = t || !e.selected, e.lazy && !this.disabledAutoExpand && (e.expanded = !0),
|
|
600
|
+
), e.selected = t || !e.selected, e.lazy && !this.disabledAutoExpand && (e.expanded = !0), I(e, !1, this.selection);
|
|
626
601
|
else if ((this.selection === "single" || e.isLeaf) && !e.noSelect)
|
|
627
|
-
for (const
|
|
628
|
-
|
|
602
|
+
for (const a of n)
|
|
603
|
+
a.selected = a === e;
|
|
629
604
|
else (this.selection === "leaf" || e.noSelect) && (e.expanded = !e.expanded);
|
|
630
605
|
if (e.noSelect)
|
|
631
606
|
return;
|
|
632
607
|
const s = this.selectedItems;
|
|
633
|
-
(i.length !== s.length || s.some((
|
|
608
|
+
(i.length !== s.length || s.some((a) => !i.includes(a)) || this.forceOnChange || t) && Promise.all(s.map((a) => a.updateComplete)).then(() => {
|
|
634
609
|
this.emit("cx-selection-change", {
|
|
635
610
|
/**
|
|
636
611
|
* Use this.selectedItems instead of nextSelection because
|
|
@@ -668,27 +643,27 @@ let c = class extends R {
|
|
|
668
643
|
const t = this.getFocusableItems(), i = this.localize.dir() === "ltr", n = this.localize.dir() === "rtl";
|
|
669
644
|
if (t.length > 0) {
|
|
670
645
|
e.preventDefault();
|
|
671
|
-
const s = t.findIndex((
|
|
672
|
-
const
|
|
673
|
-
this.focusItem(
|
|
674
|
-
},
|
|
675
|
-
|
|
646
|
+
const s = t.findIndex((x) => x.matches(":focus")), a = t[s], d = (x) => {
|
|
647
|
+
const p = t[X(x, 0, t.length - 1)];
|
|
648
|
+
this.focusItem(p);
|
|
649
|
+
}, u = (x) => {
|
|
650
|
+
a.expanded = x;
|
|
676
651
|
};
|
|
677
|
-
e.key === "ArrowDown" ? d(s + 1) : e.key === "ArrowUp" ? d(s - 1) : i && e.key === "ArrowRight" || n && e.key === "ArrowLeft" ? !
|
|
652
|
+
e.key === "ArrowDown" ? d(s + 1) : e.key === "ArrowUp" ? d(s - 1) : i && e.key === "ArrowRight" || n && e.key === "ArrowLeft" ? !a || a.disabled || a.readonly || a.expanded || a.isLeaf && !a.lazy ? d(s + 1) : u(!0) : i && e.key === "ArrowLeft" || n && e.key === "ArrowRight" ? !a || a.disabled || a.readonly || a.isLeaf || !a.expanded ? d(s - 1) : u(!1) : e.key === "Home" ? d(0) : e.key === "End" ? d(t.length - 1) : (e.key === "Enter" || e.key === " ") && !a.disabled && !a.readonly && this.selectItem(a);
|
|
678
653
|
}
|
|
679
654
|
}
|
|
680
655
|
handleClick(e) {
|
|
681
656
|
const t = e.composedPath(), i = e.target, n = i.closest("cx-tree-item"), s = e.composedPath().some(
|
|
682
|
-
(
|
|
683
|
-
),
|
|
684
|
-
(
|
|
657
|
+
(u) => u?.classList?.contains("tree-item__expand-button")
|
|
658
|
+
), a = e.composedPath().some(
|
|
659
|
+
(u) => u?.classList?.contains("tree-item__actions")
|
|
685
660
|
);
|
|
686
661
|
if (!n || n.disabled || n.readonly || i !== this.clickTarget)
|
|
687
662
|
return;
|
|
688
663
|
const d = !t.find(
|
|
689
|
-
(
|
|
664
|
+
(u) => u.tagName?.toLowerCase() === "cx-checkbox"
|
|
690
665
|
);
|
|
691
|
-
s && n.showExpandButton ? n.expanded = !n.expanded :
|
|
666
|
+
s && n.showExpandButton ? n.expanded = !n.expanded : a || this.selectItem(
|
|
692
667
|
n,
|
|
693
668
|
d && this.labelSelectSingle && this.selection === "multiple"
|
|
694
669
|
);
|
|
@@ -719,7 +694,7 @@ let c = class extends R {
|
|
|
719
694
|
const t = e.target;
|
|
720
695
|
e.target === this && this.focusItem(this.lastFocusedItem || this.getAllTreeItems()[0], {
|
|
721
696
|
preventScroll: !0
|
|
722
|
-
}),
|
|
697
|
+
}), o.isTreeItem(t) && !t.disabled && !t.readonly && (this.lastFocusedItem && !this.focusable && (this.lastFocusedItem.tabIndex = -1), this.lastFocusedItem = t, this.tabIndex = -1, t.tabIndex = 0);
|
|
723
698
|
}
|
|
724
699
|
expandToItem(e) {
|
|
725
700
|
const t = e.parentElement?.closest("cx-tree-item");
|
|
@@ -747,7 +722,7 @@ let c = class extends R {
|
|
|
747
722
|
}
|
|
748
723
|
getSortableGroup() {
|
|
749
724
|
if (!this.disabledSortableGroup)
|
|
750
|
-
return this.sortableGroup || (this.sortableGroup =
|
|
725
|
+
return this.sortableGroup || (this.sortableGroup = ee()), this.sortableGroup;
|
|
751
726
|
}
|
|
752
727
|
handleSortableStart() {
|
|
753
728
|
this.setAttribute("dragging", "");
|
|
@@ -756,8 +731,8 @@ let c = class extends R {
|
|
|
756
731
|
this.removeAttribute("dragging");
|
|
757
732
|
}
|
|
758
733
|
initSortable() {
|
|
759
|
-
this.addEventListener("cx-drag-start", this.handleSortableStart), this.addEventListener("cx-drag-end", this.handleSortableEnd), this.sortableInstance =
|
|
760
|
-
...
|
|
734
|
+
this.addEventListener("cx-drag-start", this.handleSortableStart), this.addEventListener("cx-drag-end", this.handleSortableEnd), this.sortableInstance = S.create(this, {
|
|
735
|
+
...M({
|
|
761
736
|
group: this.getSortableGroup(),
|
|
762
737
|
onAdd: this.handleSortableUpdate,
|
|
763
738
|
onEnd: this.handleSortableEnd,
|
|
@@ -776,7 +751,7 @@ let c = class extends R {
|
|
|
776
751
|
for (const i of t)
|
|
777
752
|
i.selectable = e;
|
|
778
753
|
e ? (await this.updateComplete, [...this.querySelectorAll(":scope > cx-tree-item")].forEach(
|
|
779
|
-
(i) =>
|
|
754
|
+
(i) => I(i, !0, this.selection)
|
|
780
755
|
)) : this.autoExpandToSelected || t.forEach((i) => {
|
|
781
756
|
i.selected = !1, i.indeterminate = !1;
|
|
782
757
|
});
|
|
@@ -804,22 +779,22 @@ let c = class extends R {
|
|
|
804
779
|
if (i.disabled || i.readonly)
|
|
805
780
|
return !1;
|
|
806
781
|
const n = i.parentElement?.closest("[role=treeitem]");
|
|
807
|
-
return n instanceof
|
|
782
|
+
return n instanceof o ? (n && (!n.expanded || n.loading || t.has(n)) && t.add(i), !t.has(i)) : !0;
|
|
808
783
|
});
|
|
809
784
|
}
|
|
810
785
|
render() {
|
|
811
|
-
return
|
|
786
|
+
return m`<div part="base" class="tree" @click=${this.handleClick} @keydown=${this.handleKeyDown} @mousedown=${this.handleMouseDown}><slot part="children" @slotchange=${this.handleSlotChange}></slot><span hidden aria-hidden="true"><slot name="expand-icon"></slot></span><span hidden aria-hidden="true"><slot name="collapse-icon"></slot></span></div>`;
|
|
812
787
|
}
|
|
813
788
|
};
|
|
814
|
-
c.styles = [
|
|
789
|
+
c.styles = [O, se];
|
|
815
790
|
h([
|
|
816
|
-
|
|
791
|
+
f("slot:not([name])")
|
|
817
792
|
], c.prototype, "defaultSlot", 2);
|
|
818
793
|
h([
|
|
819
|
-
|
|
794
|
+
f("slot[name=expand-icon]")
|
|
820
795
|
], c.prototype, "expandedIconSlot", 2);
|
|
821
796
|
h([
|
|
822
|
-
|
|
797
|
+
f("slot[name=collapse-icon]")
|
|
823
798
|
], c.prototype, "collapsedIconSlot", 2);
|
|
824
799
|
h([
|
|
825
800
|
l({ reflect: !0, type: Boolean })
|
|
@@ -862,23 +837,22 @@ h([
|
|
|
862
837
|
l({ reflect: !0, type: Boolean })
|
|
863
838
|
], c.prototype, "focusable", 2);
|
|
864
839
|
h([
|
|
865
|
-
|
|
840
|
+
g()
|
|
866
841
|
], c.prototype, "sortableInstance", 2);
|
|
867
842
|
h([
|
|
868
|
-
|
|
843
|
+
b("sortable")
|
|
869
844
|
], c.prototype, "initTreeItems", 1);
|
|
870
845
|
h([
|
|
871
|
-
|
|
846
|
+
b("selection")
|
|
872
847
|
], c.prototype, "handleSelectionChange", 1);
|
|
873
848
|
c = h([
|
|
874
|
-
|
|
849
|
+
U("cx-tree")
|
|
875
850
|
], c);
|
|
876
851
|
export {
|
|
877
|
-
|
|
852
|
+
o as C,
|
|
878
853
|
c as a,
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
le as v
|
|
854
|
+
Z as b,
|
|
855
|
+
H as c,
|
|
856
|
+
te as d,
|
|
857
|
+
I as s
|
|
884
858
|
};
|