@orangelogic/design-system 2.198.0 → 2.199.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/{folder-select.CIqVGGFl.js → folder-select.B-_hk2eW.js} +1 -1
- package/library/chunks/{tree.CmEdKtzK.js → tree-item.Dtrk65zS.js} +601 -601
- 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/tree-item.js +1 -1
- package/library/components/tree.js +1 -1
- package/library/components/types.js +23334 -22658
- package/library/package.json +1 -1
- package/library/packages/organisms/src/content-builder/plugins/rich-text-editor/extensions/index.d.ts +13 -2
- package/library/packages/tools/src/tiptap/extensions/google/index.d.ts +4 -0
- package/library/packages/tools/src/tiptap/extensions/paste-inline-filter/index.d.ts +28 -0
- package/library/packages/tools/src/tiptap/utils/flatten-spans.d.ts +5 -0
- package/library/packages/tools/src/tiptap/utils/normalize-tabs.d.ts +7 -0
- package/package.json +1 -1
|
@@ -1,22 +1,22 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { n as l, C as F } from "./lib-cortex-element.CVMmyPMC.js";
|
|
2
2
|
import { c as O } from "./component.styles.CRO4Odto.js";
|
|
3
|
+
import { s as L, a as D, b as $ } from "./event.BeKOsirN.js";
|
|
3
4
|
import { c as U } from "./custom-element.L4WJXn1j.js";
|
|
4
5
|
import { L as N } from "./i18n.DbXTTLXx.js";
|
|
5
|
-
import { c as X } from "./math.DuKzLacZ.js";
|
|
6
6
|
import { w as b } from "./watch.DJF5K-8U.js";
|
|
7
7
|
import { i as R, x as m, E } from "./lit-element.jLBm65_O.js";
|
|
8
8
|
import { r as g } from "./state.CSDxrqLd.js";
|
|
9
9
|
import { e as f } from "./query.BBf1UFkC.js";
|
|
10
|
-
import { s as L, a as D, b as $ } from "./event.BeKOsirN.js";
|
|
11
10
|
import { e as C } from "./class-map.BiVq-cVR.js";
|
|
12
11
|
import { o as _ } from "./if-defined.BRoBj_Rp.js";
|
|
13
|
-
import { l as
|
|
12
|
+
import { l as X } from "./live.DCegntDo.js";
|
|
14
13
|
import { n as y } from "./when.Dr1es41R.js";
|
|
15
14
|
import { g as z, s as G } from "./animation-registry.HmpwNuGH.js";
|
|
16
|
-
import
|
|
17
|
-
import { C as
|
|
18
|
-
import
|
|
19
|
-
import
|
|
15
|
+
import j from "../components/checkbox.js";
|
|
16
|
+
import { C as K } from "./icon.CpHbi8tH.js";
|
|
17
|
+
import V from "../components/line-clamp.js";
|
|
18
|
+
import W from "../components/spinner.js";
|
|
19
|
+
import { c as Y } from "./math.DuKzLacZ.js";
|
|
20
20
|
import { i as J } from "./browser.BHOCIF_A.js";
|
|
21
21
|
import { S as Q } from "./sortable.esm.oSzf6C5Q.js";
|
|
22
22
|
import { v as ee } from "./v4.CKZ6klMF.js";
|
|
@@ -29,8 +29,8 @@ function te(e, t, i) {
|
|
|
29
29
|
a && clearTimeout(a), a = window.setTimeout(d, t);
|
|
30
30
|
};
|
|
31
31
|
}
|
|
32
|
-
const
|
|
33
|
-
function
|
|
32
|
+
const I = "tree-sortable", w = 0.2, P = (e) => e == null;
|
|
33
|
+
function ie() {
|
|
34
34
|
function e() {
|
|
35
35
|
}
|
|
36
36
|
let t = null;
|
|
@@ -122,7 +122,7 @@ class v extends Q {
|
|
|
122
122
|
return new v(t, i);
|
|
123
123
|
}
|
|
124
124
|
}
|
|
125
|
-
v.mount(new
|
|
125
|
+
v.mount(new ie());
|
|
126
126
|
const M = (e) => ({
|
|
127
127
|
...e,
|
|
128
128
|
animation: 100,
|
|
@@ -142,138 +142,249 @@ const M = (e) => ({
|
|
|
142
142
|
},
|
|
143
143
|
[I]: !0,
|
|
144
144
|
swapThreshold: w
|
|
145
|
-
});
|
|
146
|
-
var ne = Object.defineProperty, oe = Object.getOwnPropertyDescriptor,
|
|
145
|
+
}), ae = 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}`;
|
|
146
|
+
var ne = Object.defineProperty, oe = Object.getOwnPropertyDescriptor, h = (e, t, i, a) => {
|
|
147
147
|
for (var r = a > 1 ? void 0 : a ? oe(t, i) : t, n = e.length - 1, d; n >= 0; n--)
|
|
148
148
|
(d = e[n]) && (r = (a ? d(t, i, r) : d(r)) || r);
|
|
149
149
|
return a && r && ne(t, i, r), r;
|
|
150
150
|
};
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
151
|
+
function H(e) {
|
|
152
|
+
const t = e.getChildrenItems({ includeDisabled: !1 });
|
|
153
|
+
if (t.length) {
|
|
154
|
+
const i = t.every((d) => d.selected), a = t.every(
|
|
155
|
+
(d) => !d.selected && !d.indeterminate
|
|
156
|
+
);
|
|
157
|
+
let r = !1, n = !1;
|
|
158
|
+
(!i && !a || e.partialSyncCheckboxes && (i || a && e.previouslySelected)) && (r = !0), e.partialSyncCheckboxes ? n = i && !r : n = i, e.indeterminate = r, e.selected = n;
|
|
159
159
|
}
|
|
160
|
-
|
|
161
|
-
|
|
160
|
+
}
|
|
161
|
+
function Z(e, t = "single") {
|
|
162
|
+
const i = e.parentElement;
|
|
163
|
+
o.isTreeItem(i) && !i.disabledSyncCheckboxes && t === "multiple" && (H(i), Z(i, t));
|
|
164
|
+
}
|
|
165
|
+
function k(e, t = !1, i = "single") {
|
|
166
|
+
function a(r) {
|
|
167
|
+
if (!(!(r instanceof o) && r.getAttribute("role") !== "treeitem")) {
|
|
168
|
+
for (const n of r.getChildrenItems())
|
|
169
|
+
n.selected = t ? r.selected || n.selected : !n.disabled && !n.readonly && r.selected, a(n);
|
|
170
|
+
t && H(r);
|
|
171
|
+
}
|
|
162
172
|
}
|
|
163
|
-
|
|
164
|
-
|
|
173
|
+
!e.disabledSyncCheckboxes && i === "multiple" && (e.partialSyncCheckboxes && (e.selected ? e.previouslySelected = !0 : e.previouslySelected = !1), a(e)), Z(e, i);
|
|
174
|
+
}
|
|
175
|
+
let c = class extends F {
|
|
176
|
+
constructor() {
|
|
177
|
+
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);
|
|
165
178
|
}
|
|
166
179
|
runFirstUpdated() {
|
|
167
|
-
this.
|
|
168
|
-
(e) => e.expandButtonPlacement = this.expandButtonPlacement
|
|
169
|
-
), this.isLeaf = !this.lazy && this.getChildrenItems().length === 0, this.handleExpandedChange();
|
|
180
|
+
this.setAttribute("role", "tree"), this.setAttribute("tabindex", "0");
|
|
170
181
|
}
|
|
171
|
-
|
|
172
|
-
this.
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
182
|
+
runConnectedCallback() {
|
|
183
|
+
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) {
|
|
184
|
+
const e = te(() => {
|
|
185
|
+
customElements.whenDefined("cx-tree-item").then(() => {
|
|
186
|
+
this.selectedItems.forEach((t) => {
|
|
187
|
+
this.expandToItem(t);
|
|
188
|
+
});
|
|
189
|
+
});
|
|
190
|
+
}, 500);
|
|
191
|
+
this.autoExpandObserver = new MutationObserver(e), this.autoExpandObserver.observe(this, {
|
|
192
|
+
attributeFilter: ["selected"],
|
|
193
|
+
attributes: !0,
|
|
194
|
+
childList: !0,
|
|
195
|
+
subtree: !0
|
|
196
|
+
});
|
|
197
|
+
}
|
|
198
|
+
this.hasUpdated && this.sortable && this.initSortable();
|
|
181
199
|
}
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
const e = this.parentElement;
|
|
185
|
-
return !!e && o.isTreeItem(e);
|
|
200
|
+
disconnectedCallback() {
|
|
201
|
+
super.disconnectedCallback(), this.removeEventListener("focusin", this.handleFocusIn), this.removeEventListener("focusout", this.handleFocusOut), this.removeEventListener("mousedown", this.handleHostMouseDown), this.removeEventListener("cx-lazy-change", this.handleSlotChange), this.mutationObserver?.disconnect(), this.autoExpandObserver?.disconnect(), this.destroySortable();
|
|
186
202
|
}
|
|
187
203
|
/**
|
|
188
|
-
*
|
|
189
|
-
* Since children items may not be fully updated yet.
|
|
204
|
+
* Generates a clone of the expand icon element to use for each tree item
|
|
190
205
|
*/
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
206
|
+
getExpandButtonIcon(e) {
|
|
207
|
+
const i = (e === "expand" ? this.expandedIconSlot : this.collapsedIconSlot)?.assignedElements({ flatten: !0 })[0];
|
|
208
|
+
if (i) {
|
|
209
|
+
const a = i.cloneNode(!0);
|
|
210
|
+
return [a, ...a.querySelectorAll("[id]")].forEach(
|
|
211
|
+
(r) => r.removeAttribute("id")
|
|
212
|
+
), a.setAttribute("data-default", ""), a.slot = `${e}-icon`, a;
|
|
213
|
+
}
|
|
214
|
+
return null;
|
|
198
215
|
}
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
})
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
t
|
|
208
|
-
), this.childrenContainer.style.height = "auto", this.emit("cx-after-expand");
|
|
216
|
+
/**
|
|
217
|
+
* Initializes new items by setting the `selectable` property and the expanded/collapsed icons if any
|
|
218
|
+
*/
|
|
219
|
+
initTreeItem(e) {
|
|
220
|
+
this.noForwardExpandButtonPlacement || (e.expandButtonPlacement = this.expandButtonPlacement), e.variant = this.variant, e.selectable = this.selection === "multiple", e.focusable = this.focusable, ["expand", "collapse"].filter((t) => !!this.querySelector(`[slot="${t}-icon"]`)).forEach((t) => {
|
|
221
|
+
const i = e.querySelector(`[slot="${t}-icon"]`), a = this.getExpandButtonIcon(t);
|
|
222
|
+
a && (i === null ? e.append(a) : i.hasAttribute("data-default") && i.replaceWith(a));
|
|
223
|
+
}), this.sortable ? (e.sortable = !0, e.sortableGroup = this.getSortableGroup(), this.noDragInside && (e.noDragInside = !0)) : e.sortable = !1;
|
|
209
224
|
}
|
|
210
|
-
|
|
211
|
-
this.
|
|
225
|
+
initTreeItems() {
|
|
226
|
+
this.getAllTreeItems().forEach(this.initTreeItem);
|
|
212
227
|
}
|
|
213
|
-
|
|
214
|
-
|
|
228
|
+
handleTreeChanged(e) {
|
|
229
|
+
for (const t of e) {
|
|
230
|
+
const i = [...t.addedNodes].filter(
|
|
231
|
+
o.isTreeItem
|
|
232
|
+
), a = [...t.removedNodes].filter(
|
|
233
|
+
o.isTreeItem
|
|
234
|
+
);
|
|
235
|
+
i.forEach(this.initTreeItem), this.lastFocusedItem && a.includes(this.lastFocusedItem) && (this.lastFocusedItem = null);
|
|
236
|
+
}
|
|
215
237
|
}
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
238
|
+
/**
|
|
239
|
+
* Handles the selection of a tree item based on the current selection mode.
|
|
240
|
+
*
|
|
241
|
+
* @param selectedItem - The tree item that is being selected or toggled.
|
|
242
|
+
* @param isSingleSelect - Optional flag to force the item to be selected and unselect all other items.
|
|
243
|
+
*/
|
|
244
|
+
async selectItem(e, t = !1) {
|
|
245
|
+
const i = [...this.selectedItems], a = this.getAllTreeItems();
|
|
246
|
+
if (this.selection === "multiple")
|
|
247
|
+
t && await Promise.all(
|
|
248
|
+
a.map(async (n) => {
|
|
249
|
+
n.selected = !1, n.indeterminate = !1, n.previouslySelected = !1, await n.updateComplete;
|
|
250
|
+
})
|
|
251
|
+
), e.selected = t || !e.selected, e.lazy && !this.disabledAutoExpand && (e.expanded = !0), k(e, !1, this.selection);
|
|
252
|
+
else if ((this.selection === "single" || e.isLeaf) && !e.noSelect)
|
|
253
|
+
for (const n of a)
|
|
254
|
+
n.selected = n === e;
|
|
255
|
+
else (this.selection === "leaf" || e.noSelect) && (e.expanded = !e.expanded);
|
|
256
|
+
if (e.noSelect)
|
|
257
|
+
return;
|
|
258
|
+
const r = this.selectedItems;
|
|
259
|
+
(i.length !== r.length || r.some((n) => !i.includes(n)) || this.forceOnChange || t) && Promise.all(r.map((n) => n.updateComplete)).then(() => {
|
|
260
|
+
this.emit("cx-selection-change", {
|
|
261
|
+
/**
|
|
262
|
+
* Use this.selectedItems instead of nextSelection because
|
|
263
|
+
* this.selectedItems may have changed since the last updateComplete
|
|
264
|
+
*/
|
|
265
|
+
detail: { selection: this.selectedItems }
|
|
266
|
+
});
|
|
221
267
|
});
|
|
222
268
|
}
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
}
|
|
226
|
-
handleExpandAnimation() {
|
|
227
|
-
this.expanded ? this.lazy ? (this.loading = !0, this.emit("cx-lazy-load")) : this.animateExpand() : this.animateCollapse();
|
|
228
|
-
}
|
|
229
|
-
async handleLazyChange() {
|
|
230
|
-
!this.lazy && this.loading && (this.loading = !1, this.handleChildrenSlotChange()), this.selected && (await this.updateComplete, k(this)), this.emit("cx-lazy-change");
|
|
231
|
-
}
|
|
232
|
-
/** Gets all the nested tree items in this node. */
|
|
233
|
-
getChildrenItems({
|
|
234
|
-
includeDisabled: e = !0
|
|
235
|
-
} = {}) {
|
|
236
|
-
return this.childrenSlot ? [...this.childrenSlot.assignedElements({ flatten: !0 })].filter(
|
|
237
|
-
(t) => o.isTreeItem(t) && (e || !t.disabled)
|
|
238
|
-
) : [];
|
|
269
|
+
getAllTreeItems() {
|
|
270
|
+
return [...this.querySelectorAll("cx-tree-item")];
|
|
239
271
|
}
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
return m`<div part="expand-button" class=${C({
|
|
243
|
-
"tree-item__expand-button": !0,
|
|
244
|
-
"tree-item__expand-button--visible": t
|
|
245
|
-
})} aria-hidden="true">${y(
|
|
246
|
-
this.loading,
|
|
247
|
-
() => m`<cx-spinner part="spinner" class="tree-item__expand-spinner" exportparts="base:spinner__base"></cx-spinner>`
|
|
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>`;
|
|
272
|
+
getAllDirectTreeItems() {
|
|
273
|
+
return [...this.querySelectorAll(":scope > cx-tree-item")];
|
|
249
274
|
}
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
this.emit("cx-reorder", {
|
|
253
|
-
detail: {
|
|
254
|
-
from: e.from,
|
|
255
|
-
item: e.item,
|
|
256
|
-
items: t,
|
|
257
|
-
newIndex: e.newIndex,
|
|
258
|
-
oldIndex: e.oldIndex,
|
|
259
|
-
to: e.to,
|
|
260
|
-
type: e.type
|
|
261
|
-
}
|
|
262
|
-
});
|
|
275
|
+
focusItem(e, t) {
|
|
276
|
+
e?.focus(t);
|
|
263
277
|
}
|
|
264
|
-
|
|
265
|
-
|
|
278
|
+
handleKeyDown(e) {
|
|
279
|
+
if (![
|
|
280
|
+
"ArrowDown",
|
|
281
|
+
"ArrowUp",
|
|
282
|
+
"ArrowRight",
|
|
283
|
+
"ArrowLeft",
|
|
284
|
+
"Home",
|
|
285
|
+
"End",
|
|
286
|
+
"Enter",
|
|
287
|
+
" "
|
|
288
|
+
].includes(e.key) || e.composedPath().some(
|
|
289
|
+
(r) => ["input", "textarea"].includes(
|
|
290
|
+
r?.tagName?.toLowerCase()
|
|
291
|
+
)
|
|
292
|
+
))
|
|
293
|
+
return;
|
|
294
|
+
const t = this.getFocusableItems(), i = this.localize.dir() === "ltr", a = this.localize.dir() === "rtl";
|
|
295
|
+
if (t.length > 0) {
|
|
296
|
+
e.preventDefault();
|
|
297
|
+
const r = t.findIndex((x) => x.matches(":focus")), n = t[r], d = (x) => {
|
|
298
|
+
const p = t[Y(x, 0, t.length - 1)];
|
|
299
|
+
this.focusItem(p);
|
|
300
|
+
}, u = (x) => {
|
|
301
|
+
n.expanded = x;
|
|
302
|
+
};
|
|
303
|
+
e.key === "ArrowDown" ? d(r + 1) : e.key === "ArrowUp" ? d(r - 1) : i && e.key === "ArrowRight" || a && e.key === "ArrowLeft" ? !n || n.disabled || n.readonly || n.expanded || n.isLeaf && !n.lazy ? d(r + 1) : u(!0) : i && e.key === "ArrowLeft" || a && e.key === "ArrowRight" ? !n || n.disabled || n.readonly || n.isLeaf || !n.expanded ? d(r - 1) : u(!1) : e.key === "Home" ? d(0) : e.key === "End" ? d(t.length - 1) : (e.key === "Enter" || e.key === " ") && !n.disabled && !n.readonly && this.selectItem(n);
|
|
304
|
+
}
|
|
266
305
|
}
|
|
267
|
-
|
|
268
|
-
|
|
306
|
+
handleClick(e) {
|
|
307
|
+
const t = e.composedPath(), i = e.target, a = i.closest("cx-tree-item"), r = e.composedPath().some(
|
|
308
|
+
(u) => u?.classList?.contains("tree-item__expand-button")
|
|
309
|
+
), n = e.composedPath().some(
|
|
310
|
+
(u) => u?.classList?.contains("tree-item__actions")
|
|
311
|
+
);
|
|
312
|
+
if (!a || a.disabled || a.readonly || i !== this.clickTarget)
|
|
313
|
+
return;
|
|
314
|
+
const d = !t.find(
|
|
315
|
+
(u) => u.tagName?.toLowerCase() === "cx-checkbox"
|
|
316
|
+
);
|
|
317
|
+
r && a.showExpandButton ? a.expanded = !a.expanded : n || this.selectItem(
|
|
318
|
+
a,
|
|
319
|
+
d && this.labelSelectSingle && this.selection === "multiple"
|
|
320
|
+
);
|
|
269
321
|
}
|
|
270
|
-
|
|
271
|
-
this.
|
|
322
|
+
handleMouseDown(e) {
|
|
323
|
+
this.clickTarget = e.target;
|
|
324
|
+
}
|
|
325
|
+
/**
|
|
326
|
+
* A `mousedown` whose real, non-retargeted origin (`composedPath()[0]`) is
|
|
327
|
+
* the tree host itself is only reachable by clicking the host's own
|
|
328
|
+
* scrollbar/gutter — shadow content otherwise fills the box, so a content
|
|
329
|
+
* click's real origin is always a descendant. The browser's default action
|
|
330
|
+
* for that mousedown focuses the host, and since the host is itself the
|
|
331
|
+
* scrollable element (`overflow: auto`), focusing it resets its own
|
|
332
|
+
* scrollTop natively — before any of our JS runs, so `preventScroll` on a
|
|
333
|
+
* later `this.focusItem(...)` call can't undo it. Cancel that default
|
|
334
|
+
* action outright; it doesn't affect the scrollbar's own drag/track
|
|
335
|
+
* behavior, only whether the mousedown also focuses the element.
|
|
336
|
+
*/
|
|
337
|
+
handleHostMouseDown(e) {
|
|
338
|
+
e.composedPath()[0] === this && e.preventDefault();
|
|
339
|
+
}
|
|
340
|
+
handleFocusOut(e) {
|
|
341
|
+
const t = e.relatedTarget;
|
|
342
|
+
(!t || !this.contains(t)) && (this.tabIndex = 0);
|
|
343
|
+
}
|
|
344
|
+
handleFocusIn(e) {
|
|
345
|
+
const t = e.target;
|
|
346
|
+
e.target === this && this.focusItem(this.lastFocusedItem || this.getAllTreeItems()[0], {
|
|
347
|
+
preventScroll: !0
|
|
348
|
+
}), o.isTreeItem(t) && !t.disabled && !t.readonly && (this.lastFocusedItem && !this.focusable && (this.lastFocusedItem.tabIndex = -1), this.lastFocusedItem = t, this.tabIndex = -1, t.tabIndex = 0);
|
|
349
|
+
}
|
|
350
|
+
expandToItem(e) {
|
|
351
|
+
const t = e.parentElement?.closest("cx-tree-item");
|
|
352
|
+
t && !t.expanded && !t.lazy && (t.expanded = !0, this.expandToItem(t));
|
|
353
|
+
}
|
|
354
|
+
handleSlotChange() {
|
|
355
|
+
this.initTreeItems();
|
|
356
|
+
}
|
|
357
|
+
handleSortableUpdate(e) {
|
|
358
|
+
const t = this.getAllDirectTreeItems();
|
|
359
|
+
this.emit("cx-reorder", {
|
|
360
|
+
detail: {
|
|
361
|
+
from: e.from,
|
|
362
|
+
item: e.item,
|
|
363
|
+
items: t,
|
|
364
|
+
newIndex: e.newIndex,
|
|
365
|
+
oldIndex: e.oldIndex,
|
|
366
|
+
to: e.to,
|
|
367
|
+
type: e.type
|
|
368
|
+
}
|
|
369
|
+
});
|
|
370
|
+
}
|
|
371
|
+
destroySortable() {
|
|
372
|
+
this.removeEventListener("cx-drag-start", this.handleSortableStart), this.removeEventListener("cx-drag-end", this.handleSortableEnd), this.sortableInstance && (this.sortableInstance.destroy(), this.sortableInstance = null);
|
|
373
|
+
}
|
|
374
|
+
getSortableGroup() {
|
|
375
|
+
if (!this.disabledSortableGroup)
|
|
376
|
+
return this.sortableGroup || (this.sortableGroup = ee()), this.sortableGroup;
|
|
377
|
+
}
|
|
378
|
+
handleSortableStart() {
|
|
379
|
+
this.setAttribute("dragging", "");
|
|
380
|
+
}
|
|
381
|
+
handleSortableEnd() {
|
|
382
|
+
this.removeAttribute("dragging");
|
|
272
383
|
}
|
|
273
384
|
initSortable() {
|
|
274
|
-
this.addEventListener("
|
|
385
|
+
this.addEventListener("cx-drag-start", this.handleSortableStart), this.addEventListener("cx-drag-end", this.handleSortableEnd), this.sortableInstance = v.create(this, {
|
|
275
386
|
...M({
|
|
276
|
-
group: this.
|
|
387
|
+
group: this.getSortableGroup(),
|
|
277
388
|
onAdd: this.handleSortableUpdate,
|
|
278
389
|
onEnd: this.handleSortableEnd,
|
|
279
390
|
onRemove: this.handleSortableUpdate,
|
|
@@ -282,432 +393,222 @@ let o = class extends F {
|
|
|
282
393
|
})
|
|
283
394
|
});
|
|
284
395
|
}
|
|
396
|
+
async handleSelectionChange() {
|
|
397
|
+
const e = this.selection === "multiple", t = this.getAllTreeItems();
|
|
398
|
+
this.setAttribute(
|
|
399
|
+
"aria-multiselectable",
|
|
400
|
+
e ? "true" : "false"
|
|
401
|
+
);
|
|
402
|
+
for (const i of t)
|
|
403
|
+
i.selectable = e;
|
|
404
|
+
e ? (await this.updateComplete, [...this.querySelectorAll(":scope > cx-tree-item")].forEach(
|
|
405
|
+
(i) => k(i, !0, this.selection)
|
|
406
|
+
)) : this.autoExpandToSelected || t.forEach((i) => {
|
|
407
|
+
i.selected = !1, i.indeterminate = !1;
|
|
408
|
+
});
|
|
409
|
+
}
|
|
285
410
|
updated(e) {
|
|
286
|
-
super.updated(e),
|
|
411
|
+
super.updated(e), e.has("sortable") && (this.destroySortable(), this.sortable && this.initSortable());
|
|
287
412
|
}
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
413
|
+
/**
|
|
414
|
+
* Returns the list of tree items that are selected in the tree.
|
|
415
|
+
*
|
|
416
|
+
* @internal
|
|
417
|
+
*/
|
|
418
|
+
get selectedItems() {
|
|
419
|
+
const e = this.getAllTreeItems(), t = (i) => i.partialSyncCheckboxes ? i.selected || i.indeterminate && i.previouslySelected : i.selected;
|
|
420
|
+
return e.filter(t);
|
|
421
|
+
}
|
|
422
|
+
/**
|
|
423
|
+
* Gets focusable tree items in the tree.
|
|
424
|
+
*
|
|
425
|
+
* @internal
|
|
426
|
+
*/
|
|
427
|
+
getFocusableItems() {
|
|
428
|
+
const e = this.getAllTreeItems(), t = /* @__PURE__ */ new Set();
|
|
429
|
+
return e.filter((i) => {
|
|
430
|
+
if (i.disabled || i.readonly)
|
|
431
|
+
return !1;
|
|
432
|
+
const a = i.parentElement?.closest("[role=treeitem]");
|
|
433
|
+
return a instanceof o ? (a && (!a.expanded || a.loading || t.has(a)) && t.add(i), !t.has(i)) : !0;
|
|
434
|
+
});
|
|
307
435
|
}
|
|
308
436
|
render() {
|
|
309
|
-
return
|
|
310
|
-
item
|
|
311
|
-
${this.disabled ? "item--disabled" : ""}
|
|
312
|
-
${this.expanded ? "item--expanded" : ""}
|
|
313
|
-
${this.indeterminate ? "item--indeterminate" : ""}
|
|
314
|
-
${this.selected ? "item--selected" : ""}
|
|
315
|
-
"><div class="tree-item__indentation" part="indentation"></div>${y(
|
|
316
|
-
this.expandButtonPlacement === "start",
|
|
317
|
-
this.renderExpandButton,
|
|
318
|
-
() => E
|
|
319
|
-
)}
|
|
320
|
-
${y(
|
|
321
|
-
this.selectable,
|
|
322
|
-
() => m`<cx-checkbox part="checkbox" aria-label=${this.localize.term("checkbox")} exportparts="
|
|
323
|
-
base:checkbox__base,
|
|
324
|
-
control:checkbox__control,
|
|
325
|
-
control--checked:checkbox__control--checked,
|
|
326
|
-
control--indeterminate:checkbox__control--indeterminate,
|
|
327
|
-
checked-icon:checkbox__checked-icon,
|
|
328
|
-
indeterminate-icon:checkbox__indeterminate-icon,
|
|
329
|
-
label:checkbox__label
|
|
330
|
-
" class="tree-item__checkbox" ?disabled=${this.disabled} ?checked=${j(this.selected)} ?indeterminate=${this.indeterminate} tabindex="-1"></cx-checkbox>`
|
|
331
|
-
)}
|
|
332
|
-
|
|
333
|
-
${y(
|
|
334
|
-
this.maxLines > 0,
|
|
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(
|
|
338
|
-
this.expandButtonPlacement === "end",
|
|
339
|
-
this.renderExpandButton,
|
|
340
|
-
() => E
|
|
341
|
-
)}</div><div class="tree-item__children" part="children" role="group"><slot name="children" @slotchange=${this.handleChildrenSlotChange}></slot></div>`);
|
|
437
|
+
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>`;
|
|
342
438
|
}
|
|
343
439
|
};
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
"cx-checkbox": K,
|
|
347
|
-
"cx-icon": V,
|
|
348
|
-
"cx-line-clamp": W,
|
|
349
|
-
"cx-spinner": Y
|
|
350
|
-
};
|
|
351
|
-
s([
|
|
440
|
+
c.styles = [O, ae];
|
|
441
|
+
h([
|
|
352
442
|
f("slot:not([name])")
|
|
353
|
-
],
|
|
354
|
-
|
|
355
|
-
f("slot[name=
|
|
356
|
-
],
|
|
357
|
-
|
|
358
|
-
f("
|
|
359
|
-
],
|
|
360
|
-
|
|
361
|
-
f(".tree-item__children")
|
|
362
|
-
], o.prototype, "childrenContainer", 2);
|
|
363
|
-
s([
|
|
364
|
-
f(".tree-item__expand-button slot")
|
|
365
|
-
], o.prototype, "expandButtonSlot", 2);
|
|
366
|
-
s([
|
|
367
|
-
l({ reflect: !0, type: Boolean })
|
|
368
|
-
], o.prototype, "expanded", 2);
|
|
369
|
-
s([
|
|
370
|
-
l({ reflect: !0, type: Boolean })
|
|
371
|
-
], o.prototype, "selected", 2);
|
|
372
|
-
s([
|
|
373
|
-
l({ reflect: !0, type: Boolean })
|
|
374
|
-
], o.prototype, "disabled", 2);
|
|
375
|
-
s([
|
|
376
|
-
l({ reflect: !0, type: Boolean })
|
|
377
|
-
], o.prototype, "readonly", 2);
|
|
378
|
-
s([
|
|
379
|
-
l({ reflect: !0, type: Boolean })
|
|
380
|
-
], o.prototype, "lazy", 2);
|
|
381
|
-
s([
|
|
382
|
-
l()
|
|
383
|
-
], o.prototype, "href", 2);
|
|
384
|
-
s([
|
|
385
|
-
l()
|
|
386
|
-
], o.prototype, "target", 2);
|
|
387
|
-
s([
|
|
388
|
-
l()
|
|
389
|
-
], o.prototype, "rel", 2);
|
|
390
|
-
s([
|
|
391
|
-
l()
|
|
392
|
-
], o.prototype, "download", 2);
|
|
393
|
-
s([
|
|
394
|
-
l({ attribute: "itemid", reflect: !0, type: String })
|
|
395
|
-
], o.prototype, "itemId", 2);
|
|
396
|
-
s([
|
|
443
|
+
], c.prototype, "defaultSlot", 2);
|
|
444
|
+
h([
|
|
445
|
+
f("slot[name=expand-icon]")
|
|
446
|
+
], c.prototype, "expandedIconSlot", 2);
|
|
447
|
+
h([
|
|
448
|
+
f("slot[name=collapse-icon]")
|
|
449
|
+
], c.prototype, "collapsedIconSlot", 2);
|
|
450
|
+
h([
|
|
397
451
|
l({ reflect: !0, type: Boolean })
|
|
398
|
-
],
|
|
399
|
-
|
|
400
|
-
l({ attribute: "no-drag", reflect: !0, type: Boolean })
|
|
401
|
-
], o.prototype, "noDrag", 2);
|
|
402
|
-
s([
|
|
403
|
-
l({ attribute: "no-select", reflect: !0, type: Boolean })
|
|
404
|
-
], o.prototype, "noSelect", 2);
|
|
405
|
-
s([
|
|
406
|
-
l({ attribute: "no-drag-inside", reflect: !0, type: Boolean })
|
|
407
|
-
], o.prototype, "noDragInside", 2);
|
|
408
|
-
s([
|
|
452
|
+
], c.prototype, "sortable", 2);
|
|
453
|
+
h([
|
|
409
454
|
l({ attribute: "sortable-group", type: String })
|
|
410
|
-
],
|
|
411
|
-
|
|
455
|
+
], c.prototype, "sortableGroup", 2);
|
|
456
|
+
h([
|
|
457
|
+
l({ attribute: "disabled-sortable-group", type: Boolean })
|
|
458
|
+
], c.prototype, "disabledSortableGroup", 2);
|
|
459
|
+
h([
|
|
460
|
+
l()
|
|
461
|
+
], c.prototype, "selection", 2);
|
|
462
|
+
h([
|
|
463
|
+
l({ attribute: "disabled-auto-expand", type: Boolean })
|
|
464
|
+
], c.prototype, "disabledAutoExpand", 2);
|
|
465
|
+
h([
|
|
466
|
+
l({ attribute: "auto-expand-to-selected", type: Boolean })
|
|
467
|
+
], c.prototype, "autoExpandToSelected", 2);
|
|
468
|
+
h([
|
|
412
469
|
l({
|
|
413
470
|
attribute: "expand-button-placement",
|
|
414
471
|
reflect: !0,
|
|
415
472
|
type: String
|
|
416
473
|
})
|
|
417
|
-
],
|
|
418
|
-
|
|
474
|
+
], c.prototype, "expandButtonPlacement", 2);
|
|
475
|
+
h([
|
|
419
476
|
l({ attribute: "no-forward-expand-button-placement", type: Boolean })
|
|
420
|
-
],
|
|
421
|
-
|
|
477
|
+
], c.prototype, "noForwardExpandButtonPlacement", 2);
|
|
478
|
+
h([
|
|
422
479
|
l({ reflect: !0, type: String })
|
|
423
|
-
],
|
|
424
|
-
|
|
425
|
-
l({
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
reflect: !0,
|
|
435
|
-
type: Boolean
|
|
436
|
-
})
|
|
437
|
-
], o.prototype, "partialSyncCheckboxes", 2);
|
|
438
|
-
s([
|
|
439
|
-
l({ attribute: "previously-selected", reflect: !0, type: Boolean })
|
|
440
|
-
], o.prototype, "previouslySelected", 2);
|
|
441
|
-
s([
|
|
480
|
+
], c.prototype, "variant", 2);
|
|
481
|
+
h([
|
|
482
|
+
l({ attribute: "force-on-change", type: Boolean })
|
|
483
|
+
], c.prototype, "forceOnChange", 2);
|
|
484
|
+
h([
|
|
485
|
+
l({ attribute: "label-select-single", reflect: !0, type: Boolean })
|
|
486
|
+
], c.prototype, "labelSelectSingle", 2);
|
|
487
|
+
h([
|
|
488
|
+
l({ attribute: "no-drag-inside", reflect: !0, type: Boolean })
|
|
489
|
+
], c.prototype, "noDragInside", 2);
|
|
490
|
+
h([
|
|
442
491
|
l({ reflect: !0, type: Boolean })
|
|
443
|
-
],
|
|
444
|
-
|
|
445
|
-
l({ attribute: "max-lines", type: Number })
|
|
446
|
-
], o.prototype, "maxLines", 2);
|
|
447
|
-
s([
|
|
448
|
-
g()
|
|
449
|
-
], o.prototype, "indeterminate", 2);
|
|
450
|
-
s([
|
|
451
|
-
g()
|
|
452
|
-
], o.prototype, "isLeaf", 2);
|
|
453
|
-
s([
|
|
454
|
-
g()
|
|
455
|
-
], o.prototype, "loading", 2);
|
|
456
|
-
s([
|
|
457
|
-
g()
|
|
458
|
-
], o.prototype, "selectable", 2);
|
|
459
|
-
s([
|
|
492
|
+
], c.prototype, "focusable", 2);
|
|
493
|
+
h([
|
|
460
494
|
g()
|
|
461
|
-
],
|
|
462
|
-
|
|
463
|
-
b("
|
|
464
|
-
],
|
|
465
|
-
|
|
466
|
-
b("
|
|
467
|
-
],
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
],
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
], o.prototype, "handleExpandedChange", 1);
|
|
474
|
-
s([
|
|
475
|
-
b("expanded", { waitUntilFirstUpdate: !0 })
|
|
476
|
-
], o.prototype, "handleExpandAnimation", 1);
|
|
477
|
-
s([
|
|
478
|
-
b("lazy", { waitUntilFirstUpdate: !0 })
|
|
479
|
-
], o.prototype, "handleLazyChange", 1);
|
|
480
|
-
o = s([
|
|
481
|
-
U("cx-tree-item")
|
|
482
|
-
], o);
|
|
483
|
-
G("tree-item.expand", {
|
|
484
|
-
keyframes: [
|
|
485
|
-
{ height: "0", opacity: "0", overflow: "hidden" },
|
|
486
|
-
{ height: "auto", opacity: "1", overflow: "hidden" }
|
|
487
|
-
],
|
|
488
|
-
options: { duration: 250, easing: "cubic-bezier(0.4, 0.0, 0.2, 1)" }
|
|
489
|
-
});
|
|
490
|
-
G("tree-item.collapse", {
|
|
491
|
-
keyframes: [
|
|
492
|
-
{ height: "auto", opacity: "1", overflow: "hidden" },
|
|
493
|
-
{ height: "0", opacity: "0", overflow: "hidden" }
|
|
494
|
-
],
|
|
495
|
-
options: { duration: 200, easing: "cubic-bezier(0.4, 0.0, 0.2, 1)" }
|
|
496
|
-
});
|
|
497
|
-
const re = 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}`;
|
|
498
|
-
var se = Object.defineProperty, le = Object.getOwnPropertyDescriptor, h = (e, t, i, a) => {
|
|
495
|
+
], c.prototype, "sortableInstance", 2);
|
|
496
|
+
h([
|
|
497
|
+
b(["sortable", "variant"])
|
|
498
|
+
], c.prototype, "initTreeItems", 1);
|
|
499
|
+
h([
|
|
500
|
+
b("selection")
|
|
501
|
+
], c.prototype, "handleSelectionChange", 1);
|
|
502
|
+
c = h([
|
|
503
|
+
U("cx-tree")
|
|
504
|
+
], c);
|
|
505
|
+
const re = 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-900);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]):not([variant=text])) .tree-item--selected,:host(:not([aria-disabled=true]):not([variant=text])) .tree-item--selected .tree-item__expand-button,:host(:not([aria-disabled=true]):not([variant=text])) .tree-item--selected .tree-item__actions::slotted(cx-icon-button){color:var(--cx-color-neutral-0)}:host(:not([aria-disabled=true]):not([variant=text])) .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([variant=text]){--selected-background-color:transparent;--selected-color:inherit;--hover-background-color:transparent;--active-background-color:transparent;--hover-color:var(--cx-color-primary)}:host([variant=text]:not([aria-disabled=true])) .tree-item__item:hover{color:var(--hover-color)}: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}`;
|
|
506
|
+
var se = Object.defineProperty, le = Object.getOwnPropertyDescriptor, s = (e, t, i, a) => {
|
|
499
507
|
for (var r = a > 1 ? void 0 : a ? le(t, i) : t, n = e.length - 1, d; n >= 0; n--)
|
|
500
508
|
(d = e[n]) && (r = (a ? d(t, i, r) : d(r)) || r);
|
|
501
509
|
return a && r && se(t, i, r), r;
|
|
502
510
|
};
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
+
let o = class extends F {
|
|
512
|
+
constructor() {
|
|
513
|
+
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) => {
|
|
514
|
+
if (e.dataTransfer) {
|
|
515
|
+
const t = this.cloneNode(!0);
|
|
516
|
+
t.style.backgroundColor = "red", t.style.display = "none", this.ownerDocument.body.appendChild(t), e.dataTransfer.setDragImage(t, 0, 0);
|
|
517
|
+
}
|
|
518
|
+
}, this.onDragStart = this.onDragStart.bind(this), this.renderExpandButton = this.renderExpandButton.bind(this), this.handleSortableUpdate = this.handleSortableUpdate.bind(this), this.handleSortableEnd = this.handleSortableEnd.bind(this), this.handleSortableStart = this.handleSortableStart.bind(this);
|
|
511
519
|
}
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
const i = e.parentElement;
|
|
515
|
-
o.isTreeItem(i) && !i.disabledSyncCheckboxes && t === "multiple" && (H(i), Z(i, t));
|
|
516
|
-
}
|
|
517
|
-
function k(e, t = !1, i = "single") {
|
|
518
|
-
function a(r) {
|
|
519
|
-
if (!(!(r instanceof o) && r.getAttribute("role") !== "treeitem")) {
|
|
520
|
-
for (const n of r.getChildrenItems())
|
|
521
|
-
n.selected = t ? r.selected || n.selected : !n.disabled && !n.readonly && r.selected, a(n);
|
|
522
|
-
t && H(r);
|
|
523
|
-
}
|
|
520
|
+
static isTreeItem(e) {
|
|
521
|
+
return e instanceof Element && e.getAttribute("role") === "treeitem";
|
|
524
522
|
}
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
let c = class extends F {
|
|
528
|
-
constructor() {
|
|
529
|
-
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);
|
|
523
|
+
get showExpandButton() {
|
|
524
|
+
return !this.loading && (!this.isLeaf || this.lazy);
|
|
530
525
|
}
|
|
531
526
|
runFirstUpdated() {
|
|
532
|
-
this.setAttribute("role", "
|
|
527
|
+
this.hasAttribute("role") || this.setAttribute("role", "treeitem"), this.setAttribute("tabindex", this.focusable ? "0" : "-1"), this.isNestedItem() && (this.slot = "children"), this.childrenContainer.hidden = !this.expanded, this.childrenContainer.style.height = this.expanded ? "auto" : "0", this.noForwardExpandButtonPlacement || this.getChildrenItems().forEach(
|
|
528
|
+
(e) => e.expandButtonPlacement = this.expandButtonPlacement
|
|
529
|
+
), this.isLeaf = !this.lazy && this.getChildrenItems().length === 0, this.handleExpandedChange();
|
|
533
530
|
}
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
attributeFilter: ["selected"],
|
|
545
|
-
attributes: !0,
|
|
546
|
-
childList: !0,
|
|
547
|
-
subtree: !0
|
|
548
|
-
});
|
|
549
|
-
}
|
|
550
|
-
this.hasUpdated && this.sortable && this.initSortable();
|
|
531
|
+
async animateCollapse() {
|
|
532
|
+
this.emit("cx-collapse"), await L(this.childrenContainer);
|
|
533
|
+
const { keyframes: e, options: t } = z(this, "tree-item.collapse", {
|
|
534
|
+
dir: this.localize.dir()
|
|
535
|
+
});
|
|
536
|
+
await D(
|
|
537
|
+
this.childrenContainer,
|
|
538
|
+
$(e, this.childrenContainer.scrollHeight),
|
|
539
|
+
t
|
|
540
|
+
), this.childrenContainer.hidden = !0, this.emit("cx-after-collapse");
|
|
551
541
|
}
|
|
552
|
-
|
|
553
|
-
|
|
542
|
+
// Checks whether the item is nested into an item
|
|
543
|
+
isNestedItem() {
|
|
544
|
+
const e = this.parentElement;
|
|
545
|
+
return !!e && o.isTreeItem(e);
|
|
554
546
|
}
|
|
555
547
|
/**
|
|
556
|
-
*
|
|
548
|
+
* Wait for this item to be fully updated before processing the slot change.
|
|
549
|
+
* Since children items may not be fully updated yet.
|
|
557
550
|
*/
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
return [a, ...a.querySelectorAll("[id]")].forEach(
|
|
563
|
-
(r) => r.removeAttribute("id")
|
|
564
|
-
), a.setAttribute("data-default", ""), a.slot = `${e}-icon`, a;
|
|
565
|
-
}
|
|
566
|
-
return null;
|
|
551
|
+
async handleChildrenSlotChange() {
|
|
552
|
+
await this.updateComplete, this.loading = !1, this.noForwardExpandButtonPlacement || this.getChildrenItems().forEach(
|
|
553
|
+
(e) => e.expandButtonPlacement = this.expandButtonPlacement
|
|
554
|
+
), this.isLeaf = !this.lazy && this.getChildrenItems().length === 0;
|
|
567
555
|
}
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
*/
|
|
571
|
-
initTreeItem(e) {
|
|
572
|
-
this.noForwardExpandButtonPlacement || (e.expandButtonPlacement = this.expandButtonPlacement), e.variant = this.variant, e.selectable = this.selection === "multiple", e.focusable = this.focusable, ["expand", "collapse"].filter((t) => !!this.querySelector(`[slot="${t}-icon"]`)).forEach((t) => {
|
|
573
|
-
const i = e.querySelector(`[slot="${t}-icon"]`), a = this.getExpandButtonIcon(t);
|
|
574
|
-
a && (i === null ? e.append(a) : i.hasAttribute("data-default") && i.replaceWith(a));
|
|
575
|
-
}), this.sortable ? (e.sortable = !0, e.sortableGroup = this.getSortableGroup(), this.noDragInside && (e.noDragInside = !0)) : e.sortable = !1;
|
|
556
|
+
willUpdate(e) {
|
|
557
|
+
e.has("selected") && !e.has("indeterminate") && (this.indeterminate = !1);
|
|
576
558
|
}
|
|
577
|
-
|
|
578
|
-
this.
|
|
559
|
+
async animateExpand() {
|
|
560
|
+
this.emit("cx-expand"), await L(this.childrenContainer), this.childrenContainer.hidden = !1;
|
|
561
|
+
const { keyframes: e, options: t } = z(this, "tree-item.expand", {
|
|
562
|
+
dir: this.localize.dir()
|
|
563
|
+
});
|
|
564
|
+
await D(
|
|
565
|
+
this.childrenContainer,
|
|
566
|
+
$(e, this.childrenContainer.scrollHeight),
|
|
567
|
+
t
|
|
568
|
+
), this.childrenContainer.style.height = "auto", this.emit("cx-after-expand");
|
|
579
569
|
}
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
const i = [...t.addedNodes].filter(
|
|
583
|
-
o.isTreeItem
|
|
584
|
-
), a = [...t.removedNodes].filter(
|
|
585
|
-
o.isTreeItem
|
|
586
|
-
);
|
|
587
|
-
i.forEach(this.initTreeItem), this.lastFocusedItem && a.includes(this.lastFocusedItem) && (this.lastFocusedItem = null);
|
|
588
|
-
}
|
|
570
|
+
handleLoadingChange() {
|
|
571
|
+
this.setAttribute("aria-busy", this.loading ? "true" : "false"), this.loading || this.animateExpand();
|
|
589
572
|
}
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
*
|
|
593
|
-
* @param selectedItem - The tree item that is being selected or toggled.
|
|
594
|
-
* @param isSingleSelect - Optional flag to force the item to be selected and unselect all other items.
|
|
595
|
-
*/
|
|
596
|
-
async selectItem(e, t = !1) {
|
|
597
|
-
const i = [...this.selectedItems], a = this.getAllTreeItems();
|
|
598
|
-
if (this.selection === "multiple")
|
|
599
|
-
t && await Promise.all(
|
|
600
|
-
a.map(async (n) => {
|
|
601
|
-
n.selected = !1, n.indeterminate = !1, n.previouslySelected = !1, await n.updateComplete;
|
|
602
|
-
})
|
|
603
|
-
), e.selected = t || !e.selected, e.lazy && !this.disabledAutoExpand && (e.expanded = !0), k(e, !1, this.selection);
|
|
604
|
-
else if ((this.selection === "single" || e.isLeaf) && !e.noSelect)
|
|
605
|
-
for (const n of a)
|
|
606
|
-
n.selected = n === e;
|
|
607
|
-
else (this.selection === "leaf" || e.noSelect) && (e.expanded = !e.expanded);
|
|
608
|
-
if (e.noSelect)
|
|
609
|
-
return;
|
|
610
|
-
const r = this.selectedItems;
|
|
611
|
-
(i.length !== r.length || r.some((n) => !i.includes(n)) || this.forceOnChange || t) && Promise.all(r.map((n) => n.updateComplete)).then(() => {
|
|
612
|
-
this.emit("cx-selection-change", {
|
|
613
|
-
/**
|
|
614
|
-
* Use this.selectedItems instead of nextSelection because
|
|
615
|
-
* this.selectedItems may have changed since the last updateComplete
|
|
616
|
-
*/
|
|
617
|
-
detail: { selection: this.selectedItems }
|
|
618
|
-
});
|
|
619
|
-
});
|
|
573
|
+
handleDisabledChange() {
|
|
574
|
+
this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
|
|
620
575
|
}
|
|
621
|
-
|
|
622
|
-
|
|
576
|
+
handleSelectedChange() {
|
|
577
|
+
this.setAttribute("aria-selected", this.selected ? "true" : "false"), this.hasUpdated && this.emit("cx-selected-change", {
|
|
578
|
+
detail: {
|
|
579
|
+
selected: this.selected
|
|
580
|
+
}
|
|
581
|
+
});
|
|
623
582
|
}
|
|
624
|
-
|
|
625
|
-
|
|
583
|
+
handleExpandedChange() {
|
|
584
|
+
this.isLeaf ? this.removeAttribute("aria-expanded") : this.setAttribute("aria-expanded", this.expanded ? "true" : "false");
|
|
626
585
|
}
|
|
627
|
-
|
|
628
|
-
|
|
586
|
+
handleExpandAnimation() {
|
|
587
|
+
this.expanded ? this.lazy ? (this.loading = !0, this.emit("cx-lazy-load")) : this.animateExpand() : this.animateCollapse();
|
|
629
588
|
}
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
"ArrowDown",
|
|
633
|
-
"ArrowUp",
|
|
634
|
-
"ArrowRight",
|
|
635
|
-
"ArrowLeft",
|
|
636
|
-
"Home",
|
|
637
|
-
"End",
|
|
638
|
-
"Enter",
|
|
639
|
-
" "
|
|
640
|
-
].includes(e.key) || e.composedPath().some(
|
|
641
|
-
(r) => ["input", "textarea"].includes(
|
|
642
|
-
r?.tagName?.toLowerCase()
|
|
643
|
-
)
|
|
644
|
-
))
|
|
645
|
-
return;
|
|
646
|
-
const t = this.getFocusableItems(), i = this.localize.dir() === "ltr", a = this.localize.dir() === "rtl";
|
|
647
|
-
if (t.length > 0) {
|
|
648
|
-
e.preventDefault();
|
|
649
|
-
const r = t.findIndex((x) => x.matches(":focus")), n = t[r], d = (x) => {
|
|
650
|
-
const p = t[X(x, 0, t.length - 1)];
|
|
651
|
-
this.focusItem(p);
|
|
652
|
-
}, u = (x) => {
|
|
653
|
-
n.expanded = x;
|
|
654
|
-
};
|
|
655
|
-
e.key === "ArrowDown" ? d(r + 1) : e.key === "ArrowUp" ? d(r - 1) : i && e.key === "ArrowRight" || a && e.key === "ArrowLeft" ? !n || n.disabled || n.readonly || n.expanded || n.isLeaf && !n.lazy ? d(r + 1) : u(!0) : i && e.key === "ArrowLeft" || a && e.key === "ArrowRight" ? !n || n.disabled || n.readonly || n.isLeaf || !n.expanded ? d(r - 1) : u(!1) : e.key === "Home" ? d(0) : e.key === "End" ? d(t.length - 1) : (e.key === "Enter" || e.key === " ") && !n.disabled && !n.readonly && this.selectItem(n);
|
|
656
|
-
}
|
|
657
|
-
}
|
|
658
|
-
handleClick(e) {
|
|
659
|
-
const t = e.composedPath(), i = e.target, a = i.closest("cx-tree-item"), r = e.composedPath().some(
|
|
660
|
-
(u) => u?.classList?.contains("tree-item__expand-button")
|
|
661
|
-
), n = e.composedPath().some(
|
|
662
|
-
(u) => u?.classList?.contains("tree-item__actions")
|
|
663
|
-
);
|
|
664
|
-
if (!a || a.disabled || a.readonly || i !== this.clickTarget)
|
|
665
|
-
return;
|
|
666
|
-
const d = !t.find(
|
|
667
|
-
(u) => u.tagName?.toLowerCase() === "cx-checkbox"
|
|
668
|
-
);
|
|
669
|
-
r && a.showExpandButton ? a.expanded = !a.expanded : n || this.selectItem(
|
|
670
|
-
a,
|
|
671
|
-
d && this.labelSelectSingle && this.selection === "multiple"
|
|
672
|
-
);
|
|
673
|
-
}
|
|
674
|
-
handleMouseDown(e) {
|
|
675
|
-
this.clickTarget = e.target;
|
|
676
|
-
}
|
|
677
|
-
/**
|
|
678
|
-
* A `mousedown` whose real, non-retargeted origin (`composedPath()[0]`) is
|
|
679
|
-
* the tree host itself is only reachable by clicking the host's own
|
|
680
|
-
* scrollbar/gutter — shadow content otherwise fills the box, so a content
|
|
681
|
-
* click's real origin is always a descendant. The browser's default action
|
|
682
|
-
* for that mousedown focuses the host, and since the host is itself the
|
|
683
|
-
* scrollable element (`overflow: auto`), focusing it resets its own
|
|
684
|
-
* scrollTop natively — before any of our JS runs, so `preventScroll` on a
|
|
685
|
-
* later `this.focusItem(...)` call can't undo it. Cancel that default
|
|
686
|
-
* action outright; it doesn't affect the scrollbar's own drag/track
|
|
687
|
-
* behavior, only whether the mousedown also focuses the element.
|
|
688
|
-
*/
|
|
689
|
-
handleHostMouseDown(e) {
|
|
690
|
-
e.composedPath()[0] === this && e.preventDefault();
|
|
691
|
-
}
|
|
692
|
-
handleFocusOut(e) {
|
|
693
|
-
const t = e.relatedTarget;
|
|
694
|
-
(!t || !this.contains(t)) && (this.tabIndex = 0);
|
|
695
|
-
}
|
|
696
|
-
handleFocusIn(e) {
|
|
697
|
-
const t = e.target;
|
|
698
|
-
e.target === this && this.focusItem(this.lastFocusedItem || this.getAllTreeItems()[0], {
|
|
699
|
-
preventScroll: !0
|
|
700
|
-
}), o.isTreeItem(t) && !t.disabled && !t.readonly && (this.lastFocusedItem && !this.focusable && (this.lastFocusedItem.tabIndex = -1), this.lastFocusedItem = t, this.tabIndex = -1, t.tabIndex = 0);
|
|
589
|
+
async handleLazyChange() {
|
|
590
|
+
!this.lazy && this.loading && (this.loading = !1, this.handleChildrenSlotChange()), this.selected && (await this.updateComplete, k(this)), this.emit("cx-lazy-change");
|
|
701
591
|
}
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
592
|
+
/** Gets all the nested tree items in this node. */
|
|
593
|
+
getChildrenItems({
|
|
594
|
+
includeDisabled: e = !0
|
|
595
|
+
} = {}) {
|
|
596
|
+
return this.childrenSlot ? [...this.childrenSlot.assignedElements({ flatten: !0 })].filter(
|
|
597
|
+
(t) => o.isTreeItem(t) && (e || !t.disabled)
|
|
598
|
+
) : [];
|
|
705
599
|
}
|
|
706
|
-
|
|
707
|
-
this.
|
|
600
|
+
renderExpandButton() {
|
|
601
|
+
const e = this.localize.dir() === "rtl", t = this.showExpandButton;
|
|
602
|
+
return m`<div part="expand-button" class=${C({
|
|
603
|
+
"tree-item__expand-button": !0,
|
|
604
|
+
"tree-item__expand-button--visible": t
|
|
605
|
+
})} aria-hidden="true">${y(
|
|
606
|
+
this.loading,
|
|
607
|
+
() => m`<cx-spinner part="spinner" class="tree-item__expand-spinner" exportparts="base:spinner__base"></cx-spinner>`
|
|
608
|
+
)}<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>`;
|
|
708
609
|
}
|
|
709
610
|
handleSortableUpdate(e) {
|
|
710
|
-
const t = this.
|
|
611
|
+
const t = this.getChildrenItems({ includeDisabled: !0 });
|
|
711
612
|
this.emit("cx-reorder", {
|
|
712
613
|
detail: {
|
|
713
614
|
from: e.from,
|
|
@@ -720,23 +621,19 @@ let c = class extends F {
|
|
|
720
621
|
}
|
|
721
622
|
});
|
|
722
623
|
}
|
|
723
|
-
destroySortable() {
|
|
724
|
-
this.removeEventListener("cx-drag-start", this.handleSortableStart), this.removeEventListener("cx-drag-end", this.handleSortableEnd), this.sortableInstance && (this.sortableInstance.destroy(), this.sortableInstance = null);
|
|
725
|
-
}
|
|
726
|
-
getSortableGroup() {
|
|
727
|
-
if (!this.disabledSortableGroup)
|
|
728
|
-
return this.sortableGroup || (this.sortableGroup = ee()), this.sortableGroup;
|
|
729
|
-
}
|
|
730
624
|
handleSortableStart() {
|
|
731
|
-
this.
|
|
625
|
+
this.emit("cx-drag-start");
|
|
732
626
|
}
|
|
733
627
|
handleSortableEnd() {
|
|
734
|
-
this.
|
|
628
|
+
this.emit("cx-drag-end");
|
|
629
|
+
}
|
|
630
|
+
destroySortable() {
|
|
631
|
+
this.removeEventListener("dragstart", this.onDragStart), this.sortableInstance && (this.sortableInstance.destroy(), this.sortableInstance = null);
|
|
735
632
|
}
|
|
736
633
|
initSortable() {
|
|
737
|
-
this.addEventListener("
|
|
634
|
+
this.addEventListener("dragstart", this.onDragStart), this.focusable || this.setAttribute("tabindex", "-1"), this.sortableInstance = v.create(this, {
|
|
738
635
|
...M({
|
|
739
|
-
group: this.
|
|
636
|
+
group: this.sortableGroup,
|
|
740
637
|
onAdd: this.handleSortableUpdate,
|
|
741
638
|
onEnd: this.handleSortableEnd,
|
|
742
639
|
onRemove: this.handleSortableUpdate,
|
|
@@ -745,115 +642,218 @@ let c = class extends F {
|
|
|
745
642
|
})
|
|
746
643
|
});
|
|
747
644
|
}
|
|
748
|
-
async handleSelectionChange() {
|
|
749
|
-
const e = this.selection === "multiple", t = this.getAllTreeItems();
|
|
750
|
-
this.setAttribute(
|
|
751
|
-
"aria-multiselectable",
|
|
752
|
-
e ? "true" : "false"
|
|
753
|
-
);
|
|
754
|
-
for (const i of t)
|
|
755
|
-
i.selectable = e;
|
|
756
|
-
e ? (await this.updateComplete, [...this.querySelectorAll(":scope > cx-tree-item")].forEach(
|
|
757
|
-
(i) => k(i, !0, this.selection)
|
|
758
|
-
)) : this.autoExpandToSelected || t.forEach((i) => {
|
|
759
|
-
i.selected = !1, i.indeterminate = !1;
|
|
760
|
-
});
|
|
761
|
-
}
|
|
762
645
|
updated(e) {
|
|
763
|
-
super.updated(e), e.has("sortable") && (this.destroySortable(), this.sortable && this.initSortable());
|
|
764
|
-
}
|
|
765
|
-
/**
|
|
766
|
-
* Returns the list of tree items that are selected in the tree.
|
|
767
|
-
*
|
|
768
|
-
* @internal
|
|
769
|
-
*/
|
|
770
|
-
get selectedItems() {
|
|
771
|
-
const e = this.getAllTreeItems(), t = (i) => i.partialSyncCheckboxes ? i.selected || i.indeterminate && i.previouslySelected : i.selected;
|
|
772
|
-
return e.filter(t);
|
|
646
|
+
super.updated(e), (e.has("sortable") || e.has("sortableGroup")) && (this.destroySortable(), this.sortable && this.initSortable());
|
|
773
647
|
}
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
648
|
+
renderBase(e) {
|
|
649
|
+
const t = this.showExpandButton;
|
|
650
|
+
return this.href ? m`<a id="anchor" part="base" class=${C({
|
|
651
|
+
"tree-item": !0,
|
|
652
|
+
"tree-item--disabled": this.disabled,
|
|
653
|
+
"tree-item--expanded": this.expanded,
|
|
654
|
+
"tree-item--has-expand-button": t,
|
|
655
|
+
"tree-item--leaf": this.isLeaf,
|
|
656
|
+
"tree-item--rtl": this.localize.dir() === "rtl",
|
|
657
|
+
"tree-item--selected": this.selected
|
|
658
|
+
})} href=${_(this.href)} target=${_(this.target)} download=${_(this.download)} rel=${_(this.rel)} draggable=${this.sortable ? "false" : E} ?inert=${this.disabled}>${e}</a>` : m`<div part="base" class=${C({
|
|
659
|
+
"tree-item": !0,
|
|
660
|
+
"tree-item--disabled": this.disabled,
|
|
661
|
+
"tree-item--expanded": this.expanded,
|
|
662
|
+
"tree-item--has-expand-button": t,
|
|
663
|
+
"tree-item--leaf": this.isLeaf,
|
|
664
|
+
"tree-item--rtl": this.localize.dir() === "rtl",
|
|
665
|
+
"tree-item--selected": this.selected
|
|
666
|
+
})}>${e}</div>`;
|
|
787
667
|
}
|
|
788
668
|
render() {
|
|
789
|
-
return m`<div
|
|
669
|
+
return this.renderBase(m`<div class="tree-item__item" part="
|
|
670
|
+
item
|
|
671
|
+
${this.disabled ? "item--disabled" : ""}
|
|
672
|
+
${this.expanded ? "item--expanded" : ""}
|
|
673
|
+
${this.indeterminate ? "item--indeterminate" : ""}
|
|
674
|
+
${this.selected ? "item--selected" : ""}
|
|
675
|
+
"><div class="tree-item__indentation" part="indentation"></div>${y(
|
|
676
|
+
this.expandButtonPlacement === "start",
|
|
677
|
+
this.renderExpandButton,
|
|
678
|
+
() => E
|
|
679
|
+
)}
|
|
680
|
+
${y(
|
|
681
|
+
this.selectable,
|
|
682
|
+
() => m`<cx-checkbox part="checkbox" aria-label=${this.localize.term("checkbox")} exportparts="
|
|
683
|
+
base:checkbox__base,
|
|
684
|
+
control:checkbox__control,
|
|
685
|
+
control--checked:checkbox__control--checked,
|
|
686
|
+
control--indeterminate:checkbox__control--indeterminate,
|
|
687
|
+
checked-icon:checkbox__checked-icon,
|
|
688
|
+
indeterminate-icon:checkbox__indeterminate-icon,
|
|
689
|
+
label:checkbox__label
|
|
690
|
+
" class="tree-item__checkbox" ?disabled=${this.disabled} ?checked=${X(this.selected)} ?indeterminate=${this.indeterminate} tabindex="-1"></cx-checkbox>`
|
|
691
|
+
)}
|
|
692
|
+
|
|
693
|
+
${y(
|
|
694
|
+
this.maxLines > 0,
|
|
695
|
+
() => m`<cx-line-clamp class="tree-item__label" part="label" lines=${this.maxLines}><slot></slot></cx-line-clamp>`,
|
|
696
|
+
() => m`<slot class="tree-item__label" part="label"></slot>`
|
|
697
|
+
)}<slot class="tree-item__actions" part="actions" name="actions"></slot>${y(
|
|
698
|
+
this.expandButtonPlacement === "end",
|
|
699
|
+
this.renderExpandButton,
|
|
700
|
+
() => E
|
|
701
|
+
)}</div><div class="tree-item__children" part="children" role="group"><slot name="children" @slotchange=${this.handleChildrenSlotChange}></slot></div>`);
|
|
790
702
|
}
|
|
791
703
|
};
|
|
792
|
-
|
|
793
|
-
|
|
704
|
+
o.styles = [O, re];
|
|
705
|
+
o.dependencies = {
|
|
706
|
+
"cx-checkbox": j,
|
|
707
|
+
"cx-icon": K,
|
|
708
|
+
"cx-line-clamp": V,
|
|
709
|
+
"cx-spinner": W
|
|
710
|
+
};
|
|
711
|
+
s([
|
|
794
712
|
f("slot:not([name])")
|
|
795
|
-
],
|
|
796
|
-
|
|
797
|
-
f("slot[name=
|
|
798
|
-
],
|
|
799
|
-
|
|
800
|
-
f("
|
|
801
|
-
],
|
|
802
|
-
|
|
713
|
+
], o.prototype, "defaultSlot", 2);
|
|
714
|
+
s([
|
|
715
|
+
f("slot[name=children]")
|
|
716
|
+
], o.prototype, "childrenSlot", 2);
|
|
717
|
+
s([
|
|
718
|
+
f(".tree-item__item")
|
|
719
|
+
], o.prototype, "itemElement", 2);
|
|
720
|
+
s([
|
|
721
|
+
f(".tree-item__children")
|
|
722
|
+
], o.prototype, "childrenContainer", 2);
|
|
723
|
+
s([
|
|
724
|
+
f(".tree-item__expand-button slot")
|
|
725
|
+
], o.prototype, "expandButtonSlot", 2);
|
|
726
|
+
s([
|
|
803
727
|
l({ reflect: !0, type: Boolean })
|
|
804
|
-
],
|
|
805
|
-
|
|
806
|
-
l({
|
|
807
|
-
],
|
|
808
|
-
|
|
809
|
-
l({
|
|
810
|
-
],
|
|
811
|
-
|
|
728
|
+
], o.prototype, "expanded", 2);
|
|
729
|
+
s([
|
|
730
|
+
l({ reflect: !0, type: Boolean })
|
|
731
|
+
], o.prototype, "selected", 2);
|
|
732
|
+
s([
|
|
733
|
+
l({ reflect: !0, type: Boolean })
|
|
734
|
+
], o.prototype, "disabled", 2);
|
|
735
|
+
s([
|
|
736
|
+
l({ reflect: !0, type: Boolean })
|
|
737
|
+
], o.prototype, "readonly", 2);
|
|
738
|
+
s([
|
|
739
|
+
l({ reflect: !0, type: Boolean })
|
|
740
|
+
], o.prototype, "lazy", 2);
|
|
741
|
+
s([
|
|
812
742
|
l()
|
|
813
|
-
],
|
|
814
|
-
|
|
815
|
-
l(
|
|
816
|
-
],
|
|
817
|
-
|
|
818
|
-
l(
|
|
819
|
-
],
|
|
820
|
-
|
|
743
|
+
], o.prototype, "href", 2);
|
|
744
|
+
s([
|
|
745
|
+
l()
|
|
746
|
+
], o.prototype, "target", 2);
|
|
747
|
+
s([
|
|
748
|
+
l()
|
|
749
|
+
], o.prototype, "rel", 2);
|
|
750
|
+
s([
|
|
751
|
+
l()
|
|
752
|
+
], o.prototype, "download", 2);
|
|
753
|
+
s([
|
|
754
|
+
l({ attribute: "itemid", reflect: !0, type: String })
|
|
755
|
+
], o.prototype, "itemId", 2);
|
|
756
|
+
s([
|
|
757
|
+
l({ reflect: !0, type: Boolean })
|
|
758
|
+
], o.prototype, "sortable", 2);
|
|
759
|
+
s([
|
|
760
|
+
l({ attribute: "no-drag", reflect: !0, type: Boolean })
|
|
761
|
+
], o.prototype, "noDrag", 2);
|
|
762
|
+
s([
|
|
763
|
+
l({ attribute: "no-select", reflect: !0, type: Boolean })
|
|
764
|
+
], o.prototype, "noSelect", 2);
|
|
765
|
+
s([
|
|
766
|
+
l({ attribute: "no-drag-inside", reflect: !0, type: Boolean })
|
|
767
|
+
], o.prototype, "noDragInside", 2);
|
|
768
|
+
s([
|
|
769
|
+
l({ attribute: "sortable-group", type: String })
|
|
770
|
+
], o.prototype, "sortableGroup", 2);
|
|
771
|
+
s([
|
|
821
772
|
l({
|
|
822
773
|
attribute: "expand-button-placement",
|
|
823
774
|
reflect: !0,
|
|
824
775
|
type: String
|
|
825
776
|
})
|
|
826
|
-
],
|
|
827
|
-
|
|
777
|
+
], o.prototype, "expandButtonPlacement", 2);
|
|
778
|
+
s([
|
|
828
779
|
l({ attribute: "no-forward-expand-button-placement", type: Boolean })
|
|
829
|
-
],
|
|
830
|
-
|
|
780
|
+
], o.prototype, "noForwardExpandButtonPlacement", 2);
|
|
781
|
+
s([
|
|
831
782
|
l({ reflect: !0, type: String })
|
|
832
|
-
],
|
|
833
|
-
|
|
834
|
-
l({
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
783
|
+
], o.prototype, "variant", 2);
|
|
784
|
+
s([
|
|
785
|
+
l({
|
|
786
|
+
attribute: "disabled-sync-checkboxes",
|
|
787
|
+
reflect: !0,
|
|
788
|
+
type: Boolean
|
|
789
|
+
})
|
|
790
|
+
], o.prototype, "disabledSyncCheckboxes", 2);
|
|
791
|
+
s([
|
|
792
|
+
l({
|
|
793
|
+
attribute: "partial-sync-checkboxes",
|
|
794
|
+
reflect: !0,
|
|
795
|
+
type: Boolean
|
|
796
|
+
})
|
|
797
|
+
], o.prototype, "partialSyncCheckboxes", 2);
|
|
798
|
+
s([
|
|
799
|
+
l({ attribute: "previously-selected", reflect: !0, type: Boolean })
|
|
800
|
+
], o.prototype, "previouslySelected", 2);
|
|
801
|
+
s([
|
|
843
802
|
l({ reflect: !0, type: Boolean })
|
|
844
|
-
],
|
|
845
|
-
|
|
803
|
+
], o.prototype, "focusable", 2);
|
|
804
|
+
s([
|
|
805
|
+
l({ attribute: "max-lines", type: Number })
|
|
806
|
+
], o.prototype, "maxLines", 2);
|
|
807
|
+
s([
|
|
846
808
|
g()
|
|
847
|
-
],
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
],
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
],
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
],
|
|
809
|
+
], o.prototype, "indeterminate", 2);
|
|
810
|
+
s([
|
|
811
|
+
g()
|
|
812
|
+
], o.prototype, "isLeaf", 2);
|
|
813
|
+
s([
|
|
814
|
+
g()
|
|
815
|
+
], o.prototype, "loading", 2);
|
|
816
|
+
s([
|
|
817
|
+
g()
|
|
818
|
+
], o.prototype, "selectable", 2);
|
|
819
|
+
s([
|
|
820
|
+
g()
|
|
821
|
+
], o.prototype, "sortableInstance", 2);
|
|
822
|
+
s([
|
|
823
|
+
b("loading", { waitUntilFirstUpdate: !0 })
|
|
824
|
+
], o.prototype, "handleLoadingChange", 1);
|
|
825
|
+
s([
|
|
826
|
+
b("disabled")
|
|
827
|
+
], o.prototype, "handleDisabledChange", 1);
|
|
828
|
+
s([
|
|
829
|
+
b("selected")
|
|
830
|
+
], o.prototype, "handleSelectedChange", 1);
|
|
831
|
+
s([
|
|
832
|
+
b("expanded", { waitUntilFirstUpdate: !0 })
|
|
833
|
+
], o.prototype, "handleExpandedChange", 1);
|
|
834
|
+
s([
|
|
835
|
+
b("expanded", { waitUntilFirstUpdate: !0 })
|
|
836
|
+
], o.prototype, "handleExpandAnimation", 1);
|
|
837
|
+
s([
|
|
838
|
+
b("lazy", { waitUntilFirstUpdate: !0 })
|
|
839
|
+
], o.prototype, "handleLazyChange", 1);
|
|
840
|
+
o = s([
|
|
841
|
+
U("cx-tree-item")
|
|
842
|
+
], o);
|
|
843
|
+
G("tree-item.expand", {
|
|
844
|
+
keyframes: [
|
|
845
|
+
{ height: "0", opacity: "0", overflow: "hidden" },
|
|
846
|
+
{ height: "auto", opacity: "1", overflow: "hidden" }
|
|
847
|
+
],
|
|
848
|
+
options: { duration: 250, easing: "cubic-bezier(0.4, 0.0, 0.2, 1)" }
|
|
849
|
+
});
|
|
850
|
+
G("tree-item.collapse", {
|
|
851
|
+
keyframes: [
|
|
852
|
+
{ height: "auto", opacity: "1", overflow: "hidden" },
|
|
853
|
+
{ height: "0", opacity: "0", overflow: "hidden" }
|
|
854
|
+
],
|
|
855
|
+
options: { duration: 200, easing: "cubic-bezier(0.4, 0.0, 0.2, 1)" }
|
|
856
|
+
});
|
|
857
857
|
export {
|
|
858
858
|
o as C,
|
|
859
859
|
c as a,
|