wj-elements 0.4.8 → 0.5.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/light.css +8 -0
- package/dist/packages/wje-breadcrumb/breadcrumb.element.d.ts +91 -0
- package/dist/packages/wje-breadcrumbs/breadcrumbs.element.d.ts +160 -0
- package/dist/packages/wje-img/img.element.d.ts +11 -0
- package/dist/packages/wje-select/select.element.d.ts +5 -0
- package/dist/packages/wje-toolbar/toolbar.element.d.ts +2 -0
- package/dist/wje-breadcrumb.js +243 -22
- package/dist/wje-breadcrumb.js.map +1 -1
- package/dist/wje-breadcrumbs.js +404 -2
- package/dist/wje-breadcrumbs.js.map +1 -1
- package/dist/wje-img.js +24 -2
- package/dist/wje-img.js.map +1 -1
- package/dist/wje-input.js +1 -1
- package/dist/wje-menu-item.js +1 -1
- package/dist/wje-option.js +20 -6
- package/dist/wje-option.js.map +1 -1
- package/dist/wje-select.js +18 -3
- package/dist/wje-select.js.map +1 -1
- package/dist/wje-toolbar.js +1 -1
- package/dist/wje-toolbar.js.map +1 -1
- package/package.json +2 -2
package/dist/wje-breadcrumbs.js
CHANGED
|
@@ -3,6 +3,7 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
|
|
|
3
3
|
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
4
4
|
import WJElement from "./wje-element.js";
|
|
5
5
|
const styles = "/*\n[ WJ Breadcrumbs ]\n*/\n\n:host {\n --wje-breadcrumbs-breakpoint-sm: 576px;\n --wje-breadcrumbs-breakpoint-md: 768px;\n --wje-breadcrumbs-breakpoint-lg: 992px;\n --wje-breadcrumbs-breakpoint-xl: 1200px;\n --wje-breadcrumbs-breakpoint-2xl: 1450px;\n --wje-breadcrumbs-breakpoint-xxl: 1450px;\n\n display: flex;\n flex-wrap: nowrap;\n align-items: center;\n min-width: 0;\n overflow: hidden;\n}\n";
|
|
6
|
+
const MANAGED_ITEM_ATTRIBUTE = "data-wje-breadcrumbs-item";
|
|
6
7
|
const _Breadcrumbs = class _Breadcrumbs extends WJElement {
|
|
7
8
|
/**
|
|
8
9
|
* Breadcrumbs constructor method.
|
|
@@ -17,6 +18,28 @@ const _Breadcrumbs = class _Breadcrumbs extends WJElement {
|
|
|
17
18
|
__publicField(this, "className", "Breadcrumbs");
|
|
18
19
|
this.last = false;
|
|
19
20
|
this._isCollapsedByBreakpoint = null;
|
|
21
|
+
this._items = [];
|
|
22
|
+
this._itemRecords = [];
|
|
23
|
+
this._hasItemsValue = false;
|
|
24
|
+
this.handleManagedItemClick = (e) => this.dispatchManagedItemClick(e);
|
|
25
|
+
}
|
|
26
|
+
/**
|
|
27
|
+
* Sets data-driven breadcrumb items.
|
|
28
|
+
* @param {Array|string|null|undefined} value Breadcrumb items or a JSON string.
|
|
29
|
+
*/
|
|
30
|
+
set items(value) {
|
|
31
|
+
const records = this.normalizeItems(value);
|
|
32
|
+
this._hasItemsValue = true;
|
|
33
|
+
this._items = records.map((record) => record.item);
|
|
34
|
+
this._itemRecords = records;
|
|
35
|
+
this.syncItems(records);
|
|
36
|
+
}
|
|
37
|
+
/**
|
|
38
|
+
* Gets data-driven breadcrumb items.
|
|
39
|
+
* @returns {Array}
|
|
40
|
+
*/
|
|
41
|
+
get items() {
|
|
42
|
+
return this._items;
|
|
20
43
|
}
|
|
21
44
|
/**
|
|
22
45
|
* Set variant attribute for the Breadcrumbs element.
|
|
@@ -32,6 +55,14 @@ const _Breadcrumbs = class _Breadcrumbs extends WJElement {
|
|
|
32
55
|
get variant() {
|
|
33
56
|
return this.getAttribute("variant") || "button";
|
|
34
57
|
}
|
|
58
|
+
/**
|
|
59
|
+
* Get the collapsed indicator variant.
|
|
60
|
+
* @param {string} value Collapsed indicator variant.
|
|
61
|
+
*/
|
|
62
|
+
set collapsedVariant(value) {
|
|
63
|
+
if (value) this.setAttribute("collapsed-variant", value);
|
|
64
|
+
else this.removeAttribute("collapsed-variant");
|
|
65
|
+
}
|
|
35
66
|
/**
|
|
36
67
|
* Get the collapsed indicator variant.
|
|
37
68
|
* @returns {string}
|
|
@@ -54,6 +85,36 @@ const _Breadcrumbs = class _Breadcrumbs extends WJElement {
|
|
|
54
85
|
get breakpoint() {
|
|
55
86
|
return this.getAttribute("breakpoint") || "";
|
|
56
87
|
}
|
|
88
|
+
/**
|
|
89
|
+
* Sets the collapse behavior used below the configured breakpoint.
|
|
90
|
+
* @param {string} value Collapse behavior.
|
|
91
|
+
*/
|
|
92
|
+
set breakpointCollapse(value) {
|
|
93
|
+
if (value) this.setAttribute("breakpoint-collapse", value);
|
|
94
|
+
else this.removeAttribute("breakpoint-collapse");
|
|
95
|
+
}
|
|
96
|
+
/**
|
|
97
|
+
* Gets the collapse behavior used below the configured breakpoint.
|
|
98
|
+
* @returns {string}
|
|
99
|
+
*/
|
|
100
|
+
get breakpointCollapse() {
|
|
101
|
+
return (this.getAttribute("breakpoint-collapse") || "items").toLowerCase();
|
|
102
|
+
}
|
|
103
|
+
/**
|
|
104
|
+
* Sets the icon used by the default breakpoint menu trigger.
|
|
105
|
+
* @param {string} value Icon name.
|
|
106
|
+
*/
|
|
107
|
+
set breakpointCollapseIcon(value) {
|
|
108
|
+
if (value) this.setAttribute("breakpoint-collapse-icon", value);
|
|
109
|
+
else this.removeAttribute("breakpoint-collapse-icon");
|
|
110
|
+
}
|
|
111
|
+
/**
|
|
112
|
+
* Gets the icon used by the default breakpoint menu trigger.
|
|
113
|
+
* @returns {string}
|
|
114
|
+
*/
|
|
115
|
+
get breakpointCollapseIcon() {
|
|
116
|
+
return this.getAttribute("breakpoint-collapse-icon") || "";
|
|
117
|
+
}
|
|
57
118
|
/**
|
|
58
119
|
* Get items before collapse attribute.
|
|
59
120
|
* @param {string} value
|
|
@@ -114,7 +175,16 @@ const _Breadcrumbs = class _Breadcrumbs extends WJElement {
|
|
|
114
175
|
* @returns {Array<string>} - The observed attributes array for the Breadcrumb element.
|
|
115
176
|
*/
|
|
116
177
|
static get observedAttributes() {
|
|
117
|
-
return [
|
|
178
|
+
return [
|
|
179
|
+
"breakpoint",
|
|
180
|
+
"breakpoint-collapse",
|
|
181
|
+
"max-items",
|
|
182
|
+
"items-before-collapse",
|
|
183
|
+
"items-after-collapse",
|
|
184
|
+
"collapsed-variant",
|
|
185
|
+
"breakpoint-collapse-icon",
|
|
186
|
+
"variant"
|
|
187
|
+
];
|
|
118
188
|
}
|
|
119
189
|
/**
|
|
120
190
|
* Setup attributes for the Breadcrumbs element.
|
|
@@ -122,6 +192,24 @@ const _Breadcrumbs = class _Breadcrumbs extends WJElement {
|
|
|
122
192
|
setupAttributes() {
|
|
123
193
|
this.isShadowRoot = "open";
|
|
124
194
|
this.setAriaState({ role: "navigation" });
|
|
195
|
+
this.upgradeProperty("items");
|
|
196
|
+
if (!this._hasItemsValue && this.hasAttribute("items")) {
|
|
197
|
+
this.items = this.getAttribute("items");
|
|
198
|
+
}
|
|
199
|
+
}
|
|
200
|
+
/**
|
|
201
|
+
* Handles attribute changes that affect light-DOM breadcrumb indicators.
|
|
202
|
+
* @param {string} name Updated attribute.
|
|
203
|
+
* @param {string|null} oldValue Previous value.
|
|
204
|
+
* @param {string|null} newValue Next value.
|
|
205
|
+
*/
|
|
206
|
+
attributeChangedCallback(name, oldValue, newValue) {
|
|
207
|
+
var _a;
|
|
208
|
+
if (oldValue === newValue) return;
|
|
209
|
+
(_a = super.attributeChangedCallback) == null ? void 0 : _a.call(this, name, oldValue, newValue);
|
|
210
|
+
if (name === "collapsed-variant" || name === "variant" || name === "breakpoint-collapse" || name === "breakpoint-collapse-icon") {
|
|
211
|
+
this.refreshCollapsedIndicators();
|
|
212
|
+
}
|
|
125
213
|
}
|
|
126
214
|
/**
|
|
127
215
|
* Draw method for the Breadcrumbs element.
|
|
@@ -144,10 +232,14 @@ const _Breadcrumbs = class _Breadcrumbs extends WJElement {
|
|
|
144
232
|
var _a;
|
|
145
233
|
this.onSlotChange = () => this.updateCollapse();
|
|
146
234
|
(_a = this.defaultSlot) == null ? void 0 : _a.addEventListener("slotchange", this.onSlotChange);
|
|
235
|
+
this.addEventListener("click", this.handleManagedItemClick);
|
|
147
236
|
this.handleResize = () => this.handleBreakpointResize();
|
|
148
237
|
if (this.getBreakpointWidth()) {
|
|
149
238
|
window.addEventListener("resize", this.handleResize);
|
|
150
239
|
}
|
|
240
|
+
if (this._itemRecords.length > 0 && this.getManagedBreadcrumbs().length === 0) {
|
|
241
|
+
this.syncItems(this._itemRecords);
|
|
242
|
+
}
|
|
151
243
|
this.updateCollapse();
|
|
152
244
|
}
|
|
153
245
|
/**
|
|
@@ -156,9 +248,262 @@ const _Breadcrumbs = class _Breadcrumbs extends WJElement {
|
|
|
156
248
|
afterDisconnect() {
|
|
157
249
|
var _a;
|
|
158
250
|
(_a = this.defaultSlot) == null ? void 0 : _a.removeEventListener("slotchange", this.onSlotChange);
|
|
251
|
+
this.removeEventListener("click", this.handleManagedItemClick);
|
|
159
252
|
window.removeEventListener("resize", this.handleResize);
|
|
160
253
|
this._isCollapsedByBreakpoint = null;
|
|
161
254
|
}
|
|
255
|
+
/**
|
|
256
|
+
* Upgrades properties set before the custom element definition was loaded.
|
|
257
|
+
* @param {string} property Property name.
|
|
258
|
+
*/
|
|
259
|
+
upgradeProperty(property) {
|
|
260
|
+
if (!Object.prototype.hasOwnProperty.call(this, property)) return;
|
|
261
|
+
const value = this[property];
|
|
262
|
+
delete this[property];
|
|
263
|
+
this[property] = value;
|
|
264
|
+
}
|
|
265
|
+
/**
|
|
266
|
+
* Normalizes incoming item data for keyed DOM diffing.
|
|
267
|
+
* @param {Array|string|null|undefined} value Breadcrumb item data.
|
|
268
|
+
* @returns {Array<object>}
|
|
269
|
+
*/
|
|
270
|
+
normalizeItems(value) {
|
|
271
|
+
let items = value;
|
|
272
|
+
if (typeof items === "string") {
|
|
273
|
+
try {
|
|
274
|
+
items = JSON.parse(items);
|
|
275
|
+
} catch (e) {
|
|
276
|
+
console.warn("Invalid JSON passed to wje-breadcrumbs.items", e);
|
|
277
|
+
items = [];
|
|
278
|
+
}
|
|
279
|
+
}
|
|
280
|
+
if (items === null || items === void 0) return [];
|
|
281
|
+
if (!Array.isArray(items)) {
|
|
282
|
+
console.warn("wje-breadcrumbs.items expects an array.");
|
|
283
|
+
return [];
|
|
284
|
+
}
|
|
285
|
+
const usedKeys = /* @__PURE__ */ new Set();
|
|
286
|
+
return items.map((item, index) => this.normalizeItem(item, index, usedKeys));
|
|
287
|
+
}
|
|
288
|
+
/**
|
|
289
|
+
* Normalizes a single item while preserving the original object for events.
|
|
290
|
+
* @param {object|string|number} item Source value for a breadcrumb entry.
|
|
291
|
+
* @param {number} index Position of the value in the current items array.
|
|
292
|
+
* @param {Set<string>} usedKeys Keys that have already been assigned during this update.
|
|
293
|
+
* @returns {object}
|
|
294
|
+
*/
|
|
295
|
+
normalizeItem(item, index, usedKeys) {
|
|
296
|
+
const isObject = item !== null && typeof item === "object";
|
|
297
|
+
const source = isObject ? item : {
|
|
298
|
+
id: index,
|
|
299
|
+
label: item === null || item === void 0 ? "" : String(item)
|
|
300
|
+
};
|
|
301
|
+
return {
|
|
302
|
+
item: source,
|
|
303
|
+
key: this.getItemKey(source, index, usedKeys),
|
|
304
|
+
index,
|
|
305
|
+
label: source.label === null || source.label === void 0 ? "" : String(source.label),
|
|
306
|
+
href: source.href === null || source.href === void 0 ? null : String(source.href),
|
|
307
|
+
icon: source.icon === null || source.icon === void 0 || source.icon === "" ? null : String(source.icon),
|
|
308
|
+
disabled: source.disabled === true || source.disabled === "" || source.disabled === "true" || source.disabled === 1 || source.disabled === "1"
|
|
309
|
+
};
|
|
310
|
+
}
|
|
311
|
+
/**
|
|
312
|
+
* Resolves a stable key for an item.
|
|
313
|
+
* @param {object} item Normalized source object used to resolve the key.
|
|
314
|
+
* @param {number} index Fallback position used when the item has no id.
|
|
315
|
+
* @param {Set<string>} usedKeys Keys that have already been assigned during this update.
|
|
316
|
+
* @returns {string}
|
|
317
|
+
*/
|
|
318
|
+
getItemKey(item, index, usedKeys) {
|
|
319
|
+
const baseKey = item.id === null || item.id === void 0 ? String(index) : String(item.id);
|
|
320
|
+
let key = baseKey;
|
|
321
|
+
let suffix = 1;
|
|
322
|
+
while (usedKeys.has(key)) {
|
|
323
|
+
key = `${baseKey}:${suffix}`;
|
|
324
|
+
suffix += 1;
|
|
325
|
+
}
|
|
326
|
+
usedKeys.add(key);
|
|
327
|
+
return key;
|
|
328
|
+
}
|
|
329
|
+
/**
|
|
330
|
+
* Incrementally synchronizes data-driven items into light DOM breadcrumbs.
|
|
331
|
+
* @param {Array<object>} records Normalized records for the next breadcrumb trail.
|
|
332
|
+
*/
|
|
333
|
+
syncItems(records) {
|
|
334
|
+
const managed = this.getManagedBreadcrumbs();
|
|
335
|
+
const managedByKey = new Map(managed.map((breadcrumb) => [breadcrumb.__wjeBreadcrumbKey || breadcrumb.getAttribute(MANAGED_ITEM_ATTRIBUTE), breadcrumb]));
|
|
336
|
+
const nextKeys = new Set(records.map((record) => record.key));
|
|
337
|
+
managed.forEach((breadcrumb) => {
|
|
338
|
+
const key = breadcrumb.__wjeBreadcrumbKey || breadcrumb.getAttribute(MANAGED_ITEM_ATTRIBUTE);
|
|
339
|
+
if (!nextKeys.has(key)) {
|
|
340
|
+
breadcrumb.remove();
|
|
341
|
+
}
|
|
342
|
+
});
|
|
343
|
+
let referenceNode = this.firstChild;
|
|
344
|
+
records.forEach((record, index) => {
|
|
345
|
+
let breadcrumb = managedByKey.get(record.key);
|
|
346
|
+
const signature = this.getItemStructureSignature(record);
|
|
347
|
+
if (breadcrumb && breadcrumb.__wjeBreadcrumbSignature !== signature) {
|
|
348
|
+
const previousBreadcrumb = breadcrumb;
|
|
349
|
+
const replacement = this.createItemElement(record, index);
|
|
350
|
+
breadcrumb.replaceWith(replacement);
|
|
351
|
+
breadcrumb = replacement;
|
|
352
|
+
if (referenceNode === previousBreadcrumb) referenceNode = breadcrumb;
|
|
353
|
+
} else if (!breadcrumb) {
|
|
354
|
+
breadcrumb = this.createItemElement(record, index);
|
|
355
|
+
} else {
|
|
356
|
+
this.updateItemElement(breadcrumb, record, index);
|
|
357
|
+
}
|
|
358
|
+
if (breadcrumb !== referenceNode) {
|
|
359
|
+
this.insertBefore(breadcrumb, referenceNode);
|
|
360
|
+
}
|
|
361
|
+
referenceNode = breadcrumb.nextSibling;
|
|
362
|
+
});
|
|
363
|
+
this.updateCollapse();
|
|
364
|
+
}
|
|
365
|
+
/**
|
|
366
|
+
* Creates a managed breadcrumb element.
|
|
367
|
+
* @param {object} record Normalized data used to create the breadcrumb.
|
|
368
|
+
* @param {number} index Position assigned to the created breadcrumb.
|
|
369
|
+
* @returns {HTMLElement}
|
|
370
|
+
*/
|
|
371
|
+
createItemElement(record, index) {
|
|
372
|
+
const breadcrumb = document.createElement("wje-breadcrumb");
|
|
373
|
+
this.updateItemElement(breadcrumb, record, index);
|
|
374
|
+
return breadcrumb;
|
|
375
|
+
}
|
|
376
|
+
/**
|
|
377
|
+
* Updates a managed breadcrumb element only where values changed.
|
|
378
|
+
* @param {HTMLElement} breadcrumb Existing managed element to update.
|
|
379
|
+
* @param {object} record Normalized data used for the next rendered state.
|
|
380
|
+
* @param {number} index Position assigned to the managed breadcrumb.
|
|
381
|
+
*/
|
|
382
|
+
updateItemElement(breadcrumb, record, index) {
|
|
383
|
+
breadcrumb.__wjeBreadcrumbManaged = true;
|
|
384
|
+
breadcrumb.__wjeBreadcrumbItem = record.item;
|
|
385
|
+
breadcrumb.__wjeBreadcrumbIndex = index;
|
|
386
|
+
breadcrumb.__wjeBreadcrumbKey = record.key;
|
|
387
|
+
breadcrumb.__wjeBreadcrumbSignature = this.getItemStructureSignature(record);
|
|
388
|
+
if (breadcrumb.getAttribute(MANAGED_ITEM_ATTRIBUTE) !== record.key) {
|
|
389
|
+
breadcrumb.setAttribute(MANAGED_ITEM_ATTRIBUTE, record.key);
|
|
390
|
+
}
|
|
391
|
+
this.syncItemAttribute(breadcrumb, "href", record.href);
|
|
392
|
+
this.syncItemAttribute(breadcrumb, "aria-label", record.label || null);
|
|
393
|
+
this.syncBooleanItemAttribute(breadcrumb, "disabled", record.disabled);
|
|
394
|
+
this.syncItemContent(breadcrumb, record);
|
|
395
|
+
}
|
|
396
|
+
/**
|
|
397
|
+
* Synchronizes an attribute when its value changed.
|
|
398
|
+
* @param {HTMLElement} element Element receiving the synchronized attribute.
|
|
399
|
+
* @param {string} name Attribute to add, update, or remove.
|
|
400
|
+
* @param {string|null|undefined} value Next serialized value for the attribute.
|
|
401
|
+
*/
|
|
402
|
+
syncItemAttribute(element, name, value) {
|
|
403
|
+
if (value === null || value === void 0 || value === false) {
|
|
404
|
+
if (element.hasAttribute(name)) element.removeAttribute(name);
|
|
405
|
+
return;
|
|
406
|
+
}
|
|
407
|
+
const normalizedValue = String(value);
|
|
408
|
+
if (element.getAttribute(name) !== normalizedValue) {
|
|
409
|
+
element.setAttribute(name, normalizedValue);
|
|
410
|
+
}
|
|
411
|
+
}
|
|
412
|
+
/**
|
|
413
|
+
* Synchronizes a boolean attribute.
|
|
414
|
+
* @param {HTMLElement} element Element receiving the boolean attribute.
|
|
415
|
+
* @param {string} name Boolean attribute to toggle.
|
|
416
|
+
* @param {boolean} isEnabled Whether the attribute should be present.
|
|
417
|
+
*/
|
|
418
|
+
syncBooleanItemAttribute(element, name, isEnabled) {
|
|
419
|
+
if (isEnabled && !element.hasAttribute(name)) {
|
|
420
|
+
element.setAttribute(name, "");
|
|
421
|
+
}
|
|
422
|
+
if (!isEnabled && element.hasAttribute(name)) {
|
|
423
|
+
element.removeAttribute(name);
|
|
424
|
+
}
|
|
425
|
+
}
|
|
426
|
+
/**
|
|
427
|
+
* Synchronizes slotted icon and text nodes for a managed breadcrumb.
|
|
428
|
+
* @param {HTMLElement} breadcrumb Breadcrumb element.
|
|
429
|
+
* @param {object} record Normalized item record.
|
|
430
|
+
*/
|
|
431
|
+
syncItemContent(breadcrumb, record) {
|
|
432
|
+
let icon = breadcrumb.__wjeBreadcrumbIcon;
|
|
433
|
+
if (record.icon) {
|
|
434
|
+
if (!icon || icon.parentElement !== breadcrumb) {
|
|
435
|
+
icon = document.createElement("wje-icon");
|
|
436
|
+
icon.setAttribute("slot", "start");
|
|
437
|
+
breadcrumb.insertBefore(icon, breadcrumb.firstChild);
|
|
438
|
+
breadcrumb.__wjeBreadcrumbIcon = icon;
|
|
439
|
+
}
|
|
440
|
+
if (icon.getAttribute("name") !== record.icon) {
|
|
441
|
+
icon.setAttribute("name", record.icon);
|
|
442
|
+
}
|
|
443
|
+
} else if (icon) {
|
|
444
|
+
icon.remove();
|
|
445
|
+
breadcrumb.__wjeBreadcrumbIcon = null;
|
|
446
|
+
}
|
|
447
|
+
let labelNode = breadcrumb.__wjeBreadcrumbLabelNode;
|
|
448
|
+
if (!labelNode || labelNode.parentNode !== breadcrumb) {
|
|
449
|
+
labelNode = document.createTextNode("");
|
|
450
|
+
breadcrumb.appendChild(labelNode);
|
|
451
|
+
breadcrumb.__wjeBreadcrumbLabelNode = labelNode;
|
|
452
|
+
}
|
|
453
|
+
if (labelNode.textContent !== record.label) {
|
|
454
|
+
labelNode.textContent = record.label;
|
|
455
|
+
}
|
|
456
|
+
}
|
|
457
|
+
/**
|
|
458
|
+
* Returns a small signature for structural changes that need item replacement.
|
|
459
|
+
* @param {object} record Normalized item record.
|
|
460
|
+
* @returns {string}
|
|
461
|
+
*/
|
|
462
|
+
getItemStructureSignature(record) {
|
|
463
|
+
return `icon:${record.icon ? "1" : "0"}`;
|
|
464
|
+
}
|
|
465
|
+
/**
|
|
466
|
+
* Dispatches the data-driven item click event.
|
|
467
|
+
* @param {MouseEvent} e Original click event.
|
|
468
|
+
*/
|
|
469
|
+
dispatchManagedItemClick(e) {
|
|
470
|
+
var _a;
|
|
471
|
+
const breadcrumb = this.getManagedBreadcrumbFromEvent(e);
|
|
472
|
+
if (!breadcrumb) return;
|
|
473
|
+
const item = breadcrumb.__wjeBreadcrumbItem;
|
|
474
|
+
if ((item == null ? void 0 : item.disabled) || breadcrumb.hasAttribute("disabled")) {
|
|
475
|
+
e.preventDefault();
|
|
476
|
+
e.stopPropagation();
|
|
477
|
+
(_a = e.stopImmediatePropagation) == null ? void 0 : _a.call(e);
|
|
478
|
+
return;
|
|
479
|
+
}
|
|
480
|
+
const itemClickEvent = new CustomEvent("wje-breadcrumbs:item-click", {
|
|
481
|
+
detail: {
|
|
482
|
+
item,
|
|
483
|
+
index: breadcrumb.__wjeBreadcrumbIndex,
|
|
484
|
+
originalEvent: e
|
|
485
|
+
},
|
|
486
|
+
bubbles: true,
|
|
487
|
+
composed: true,
|
|
488
|
+
cancelable: true
|
|
489
|
+
});
|
|
490
|
+
const shouldContinue = this.dispatchEvent(itemClickEvent);
|
|
491
|
+
if (!shouldContinue) {
|
|
492
|
+
e.preventDefault();
|
|
493
|
+
}
|
|
494
|
+
}
|
|
495
|
+
/**
|
|
496
|
+
* Finds the managed breadcrumb that originated an event.
|
|
497
|
+
* @param {Event} e Event whose composed path should be inspected.
|
|
498
|
+
* @returns {HTMLElement|null}
|
|
499
|
+
*/
|
|
500
|
+
getManagedBreadcrumbFromEvent(e) {
|
|
501
|
+
const path = typeof e.composedPath === "function" ? e.composedPath() : [];
|
|
502
|
+
return path.find((node) => {
|
|
503
|
+
var _a;
|
|
504
|
+
return (node == null ? void 0 : node.nodeType) === Node.ELEMENT_NODE && ((_a = node.tagName) == null ? void 0 : _a.toLowerCase()) === "wje-breadcrumb" && node.parentElement === this && node.hasAttribute(MANAGED_ITEM_ATTRIBUTE);
|
|
505
|
+
}) || null;
|
|
506
|
+
}
|
|
162
507
|
/**
|
|
163
508
|
* Reacts to viewport resize only when the breakpoint mode actually changes.
|
|
164
509
|
* @returns {void}
|
|
@@ -177,8 +522,14 @@ const _Breadcrumbs = class _Breadcrumbs extends WJElement {
|
|
|
177
522
|
let breadcrumbs = this.getBreadcrumbs();
|
|
178
523
|
if (breadcrumbs.length === 0) return;
|
|
179
524
|
this._isCollapsedByBreakpoint = this.shouldApplyBreakpointCollapse();
|
|
525
|
+
const shouldCollapseToMenu = this.isBreakpointMenuCollapseActive() && breadcrumbs.length > 1;
|
|
526
|
+
if (shouldCollapseToMenu) {
|
|
527
|
+
this.applyMenuCollapse(breadcrumbs);
|
|
528
|
+
return;
|
|
529
|
+
}
|
|
180
530
|
const effectiveItemsAfterCollapse = this.itemsAfterCollapse;
|
|
181
|
-
const
|
|
531
|
+
const shouldUseItemCollapse = this.breakpointCollapse === "menu" || this._isCollapsedByBreakpoint;
|
|
532
|
+
const shouldCollapse = shouldUseItemCollapse && this.maxItems > 0 && breadcrumbs.length > this.maxItems && this.itemsBeforeCollapse + effectiveItemsAfterCollapse + 1 <= this.maxItems;
|
|
182
533
|
const lastIndex = breadcrumbs.length - 1;
|
|
183
534
|
const indicatorIndex = shouldCollapse ? this.itemsBeforeCollapse : -1;
|
|
184
535
|
const collapseStart = this.itemsBeforeCollapse;
|
|
@@ -193,6 +544,31 @@ const _Breadcrumbs = class _Breadcrumbs extends WJElement {
|
|
|
193
544
|
}
|
|
194
545
|
});
|
|
195
546
|
}
|
|
547
|
+
/**
|
|
548
|
+
* Collapses the whole breadcrumb trail into a single menu indicator.
|
|
549
|
+
* @param {Array<Element>} breadcrumbs Breadcrumb items.
|
|
550
|
+
*/
|
|
551
|
+
applyMenuCollapse(breadcrumbs) {
|
|
552
|
+
const lastIndex = breadcrumbs.length - 1;
|
|
553
|
+
breadcrumbs.forEach((breadcrumb, index) => {
|
|
554
|
+
const isIndicator = index === 0;
|
|
555
|
+
this.syncManagedAttribute(breadcrumb, "last", index === lastIndex);
|
|
556
|
+
this.syncManagedAttribute(breadcrumb, "show-collapsed-indicator", isIndicator);
|
|
557
|
+
this.syncManagedAttribute(breadcrumb, "collapsed", true);
|
|
558
|
+
if (isIndicator) {
|
|
559
|
+
breadcrumb.classList.remove("collapsed");
|
|
560
|
+
}
|
|
561
|
+
});
|
|
562
|
+
}
|
|
563
|
+
/**
|
|
564
|
+
* Returns whether the active breakpoint mode should move the full trail into one menu.
|
|
565
|
+
* @returns {boolean}
|
|
566
|
+
*/
|
|
567
|
+
isBreakpointMenuCollapseActive() {
|
|
568
|
+
return Boolean(
|
|
569
|
+
this.getBreakpointWidth() && this._isCollapsedByBreakpoint && this.breakpointCollapse === "menu"
|
|
570
|
+
);
|
|
571
|
+
}
|
|
196
572
|
/**
|
|
197
573
|
* Clears attributes/classes managed by the collapse algorithm.
|
|
198
574
|
* @param {Array<Element>} breadcrumbs Breadcrumb items.
|
|
@@ -221,6 +597,15 @@ const _Breadcrumbs = class _Breadcrumbs extends WJElement {
|
|
|
221
597
|
element.removeAttribute(name);
|
|
222
598
|
}
|
|
223
599
|
}
|
|
600
|
+
/**
|
|
601
|
+
* Redraws active collapsed indicators when parent-only rendering inputs change.
|
|
602
|
+
*/
|
|
603
|
+
refreshCollapsedIndicators() {
|
|
604
|
+
this.getBreadcrumbs().filter((breadcrumb) => breadcrumb.hasAttribute("show-collapsed-indicator")).forEach((breadcrumb) => {
|
|
605
|
+
var _a;
|
|
606
|
+
return (_a = breadcrumb.refresh) == null ? void 0 : _a.call(breadcrumb);
|
|
607
|
+
});
|
|
608
|
+
}
|
|
224
609
|
/**
|
|
225
610
|
* Returns whether collapse rules should currently be applied.
|
|
226
611
|
* @returns {boolean}
|
|
@@ -249,6 +634,16 @@ const _Breadcrumbs = class _Breadcrumbs extends WJElement {
|
|
|
249
634
|
const directNumber = parseFloat(token);
|
|
250
635
|
return Number.isFinite(directNumber) ? directNumber : null;
|
|
251
636
|
}
|
|
637
|
+
/**
|
|
638
|
+
* Returns the custom trigger element configured for breakpoint menu collapse.
|
|
639
|
+
* @returns {Element|null}
|
|
640
|
+
*/
|
|
641
|
+
getBreakpointCollapseTrigger() {
|
|
642
|
+
return Array.from(this.children).find((child) => {
|
|
643
|
+
var _a;
|
|
644
|
+
return ((_a = child.getAttribute) == null ? void 0 : _a.call(child, "slot")) === "breakpoint-collapse-trigger";
|
|
645
|
+
}) || null;
|
|
646
|
+
}
|
|
252
647
|
/**
|
|
253
648
|
* Retrieves all breadcrumb elements within the current instance.
|
|
254
649
|
* @returns {Array<Element>} An array of breadcrumb elements (`wje-breadcrumb`) found within the instance. Returns an empty array if no breadcrumbs are found.
|
|
@@ -256,6 +651,13 @@ const _Breadcrumbs = class _Breadcrumbs extends WJElement {
|
|
|
256
651
|
getBreadcrumbs() {
|
|
257
652
|
return Array.from(this.querySelectorAll("wje-breadcrumb")) || [];
|
|
258
653
|
}
|
|
654
|
+
/**
|
|
655
|
+
* Retrieves breadcrumbs managed by the items property.
|
|
656
|
+
* @returns {Array<Element>}
|
|
657
|
+
*/
|
|
658
|
+
getManagedBreadcrumbs() {
|
|
659
|
+
return Array.from(this.querySelectorAll(`wje-breadcrumb[${MANAGED_ITEM_ATTRIBUTE}]`)) || [];
|
|
660
|
+
}
|
|
259
661
|
/**
|
|
260
662
|
* Retrieves all breadcrumb elements that have the 'collapsed' attribute.
|
|
261
663
|
* @returns {Array<Element>} An array of DOM elements representing breadcrumbs with the 'collapsed' attribute.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"wje-breadcrumbs.js","sources":["../packages/wje-breadcrumbs/breadcrumbs.element.js","../packages/wje-breadcrumbs/breadcrumbs.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents a Breadcrumbs container, extending the WJElement class. It acts as a wrapper for individual breadcrumb elements and manages their behavior, such as collapsing and marking the last breadcrumb.\n * @documentation https://elements.webjet.sk/components/breadcrumbs\n * @status stable\n * @augments WJElement\n * @slot - The container for breadcrumb elements.\n * @csspart container - The component's container wrapper.\n * @attribute {number} max-items - The maximum number of visible breadcrumbs before collapsing.\n * @attribute {number} items-before-collapse - The number of breadcrumbs to show before the collapsed indicator.\n * @attribute {number} items-after-collapse - The number of breadcrumbs to show after the collapsed indicator.\n * @tag wje-breadcrumbs\n * @example\n * <!-- Example usage -->\n * <wje-breadcrumbs max-items=\"5\" items-before-collapse=\"2\" items-after-collapse=\"2\">\n * <wje-breadcrumb>Home</wje-breadcrumb>\n * <wje-breadcrumb>About</wje-breadcrumb>\n * <wje-breadcrumb>Services</wje-breadcrumb>\n * <wje-breadcrumb>Portfolio</wje-breadcrumb>\n * <wje-breadcrumb>Contact</wje-breadcrumb>\n * </wje-breadcrumbs>\n *\n * <!-- Output: Only the first two and last two breadcrumbs will be visible, with a collapsed indicator in the middle -->\n */\n\nexport default class Breadcrumbs extends WJElement {\n static BREAKPOINTS = {\n sm: 576,\n md: 768,\n lg: 992,\n xl: 1200,\n '2xl': 1450,\n xxl: 1450,\n };\n\n /**\n * Breadcrumbs constructor method.\n * @class\n */\n constructor() {\n super();\n\n /**\n * Last breadcrumb flag\n * @type {boolean}\n */\n this.last = false;\n this._isCollapsedByBreakpoint = null;\n }\n\n /**\n * Set variant attribute for the Breadcrumbs element.\n * @param value\n */\n set variant(value) {\n this.setAttribute('variant', value);\n }\n\n /**\n * Get variant attribute for the Breadcrumbs element.\n * @returns {string}\n */\n get variant() {\n return this.getAttribute('variant') || 'button';\n }\n\n /**\n * Get the collapsed indicator variant.\n * @returns {string}\n */\n get collapsedVariant() {\n return this.getAttribute('collapsed-variant') || this.variant;\n }\n\n /**\n * Sets the collapse breakpoint token or value.\n * @param {string} value Breakpoint token or CSS size.\n */\n set breakpoint(value) {\n if (value) this.setAttribute('breakpoint', value);\n else this.removeAttribute('breakpoint');\n }\n\n /**\n * Gets the collapse breakpoint token or value.\n * @returns {string}\n */\n get breakpoint() {\n return this.getAttribute('breakpoint') || '';\n }\n\n /**\n * Get items before collapse attribute.\n * @param {string} value\n */\n set maxItems(value) {\n this.setAttribute('max-items', value || 0);\n }\n\n /**\n * Get items before collapse attribute.\n * @returns {number}\n */\n get maxItems() {\n return +this.getAttribute('max-items' || 0);\n }\n\n /**\n * Get items before collapse attribute.\n * @param value\n */\n set itemsBeforeCollapse(value) {\n this.setAttribute('items-before-collapse', value || 1);\n }\n\n /**\n * Get items before collapse attribute.\n * @returns {number}\n */\n get itemsBeforeCollapse() {\n return +this.getAttribute('items-before-collapse') || 1;\n }\n\n /**\n * Get items after collapse attribute.\n * @param value\n */\n set itemsAfterCollapse(value) {\n this.setAttribute('items-after-collapse', value || 1);\n }\n\n /**\n * Get items after collapse attribute.\n * @returns {number}\n */\n get itemsAfterCollapse() {\n if (this.hasAttribute('items-after-collapse')) {\n return +this.getAttribute('items-after-collapse') || 1;\n }\n\n const derivedItemsAfterCollapse = this.maxItems - this.itemsBeforeCollapse - 1;\n\n return derivedItemsAfterCollapse > 0 ? derivedItemsAfterCollapse : 1;\n }\n\n /**\n * Class name for the Breadcrumbs element.\n * @type {string}\n */\n className = 'Breadcrumbs';\n\n /**\n * Get CSS stylesheet for the Breadcrumbs element.\n * @static\n * @returns {object} styles - The CSS styles\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n /**\n * Get observed attributes for the Breadcrumb element.\n * @static\n * @returns {Array<string>} - The observed attributes array for the Breadcrumb element.\n */\n static get observedAttributes() {\n return ['breakpoint', 'max-items', 'items-before-collapse', 'items-after-collapse', 'collapsed-variant', 'variant'];\n }\n\n /**\n * Setup attributes for the Breadcrumbs element.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n this.setAriaState({ role: 'navigation' });\n }\n\n /**\n * Draw method for the Breadcrumbs element.\n * @returns {object} fragment - The document fragment\n */\n draw() {\n let fragment = document.createDocumentFragment();\n\n let element = document.createElement('slot');\n\n fragment.appendChild(element);\n this.defaultSlot = element;\n\n return fragment;\n }\n\n /**\n * Updates the breadcrumb elements after they are drawn on the page.\n * It manages attributes on breadcrumb items and handles the logic for collapsing breadcrumbs\n * if the total exceeds the specified maximum items.\n * @returns {void} This method does not return a value.\n */\n afterDraw() {\n this.onSlotChange = () => this.updateCollapse();\n this.defaultSlot?.addEventListener('slotchange', this.onSlotChange);\n this.handleResize = () => this.handleBreakpointResize();\n\n if (this.getBreakpointWidth()) {\n window.addEventListener('resize', this.handleResize);\n }\n\n this.updateCollapse();\n }\n\n /**\n * Removes listeners after disconnect.\n */\n afterDisconnect() {\n this.defaultSlot?.removeEventListener('slotchange', this.onSlotChange);\n window.removeEventListener('resize', this.handleResize);\n this._isCollapsedByBreakpoint = null;\n }\n\n /**\n * Reacts to viewport resize only when the breakpoint mode actually changes.\n * @returns {void}\n */\n handleBreakpointResize() {\n if (!this.getBreakpointWidth()) return;\n\n const nextState = this.shouldApplyBreakpointCollapse();\n\n if (this._isCollapsedByBreakpoint === nextState) return;\n\n this.updateCollapse();\n }\n\n /**\n * Recalculates breadcrumb collapse state.\n * @returns {void}\n */\n updateCollapse() {\n let breadcrumbs = this.getBreadcrumbs();\n\n if (breadcrumbs.length === 0) return;\n\n this._isCollapsedByBreakpoint = this.shouldApplyBreakpointCollapse();\n const effectiveItemsAfterCollapse = this.itemsAfterCollapse;\n const shouldCollapse =\n this._isCollapsedByBreakpoint &&\n this.maxItems > 0 &&\n breadcrumbs.length > this.maxItems &&\n this.itemsBeforeCollapse + effectiveItemsAfterCollapse + 1 <= this.maxItems;\n\n const lastIndex = breadcrumbs.length - 1;\n const indicatorIndex = shouldCollapse ? this.itemsBeforeCollapse : -1;\n const collapseStart = this.itemsBeforeCollapse;\n const collapseEnd = breadcrumbs.length - effectiveItemsAfterCollapse;\n\n breadcrumbs.forEach((breadcrumb, index) => {\n this.syncManagedAttribute(breadcrumb, 'last', index === lastIndex);\n this.syncManagedAttribute(breadcrumb, 'show-collapsed-indicator', index === indicatorIndex);\n\n const isCollapsed =\n shouldCollapse &&\n index >= collapseStart &&\n index < collapseEnd;\n\n this.syncManagedAttribute(breadcrumb, 'collapsed', isCollapsed);\n\n if (!isCollapsed && breadcrumb.classList.contains('collapsed')) {\n breadcrumb.classList.remove('collapsed');\n }\n });\n }\n\n /**\n * Clears attributes/classes managed by the collapse algorithm.\n * @param {Array<Element>} breadcrumbs Breadcrumb items.\n */\n resetCollapseState(breadcrumbs = this.getBreadcrumbs()) {\n breadcrumbs.forEach((breadcrumb) => {\n breadcrumb.removeAttribute('collapsed');\n breadcrumb.removeAttribute('show-collapsed-indicator');\n breadcrumb.removeAttribute('last');\n breadcrumb.classList.remove('collapsed');\n });\n }\n\n /**\n * Applies a managed boolean attribute only when its value truly changes.\n * @param {Element} element Breadcrumb item whose responsive state is being synchronized.\n * @param {string} name Managed state flag that should be synchronized on the breadcrumb item.\n * @param {boolean} isEnabled Whether the attribute should be present.\n */\n syncManagedAttribute(element, name, isEnabled) {\n if (!element) return;\n\n const hasAttribute = element.hasAttribute(name);\n\n if (isEnabled && !hasAttribute) {\n element.setAttribute(name, true);\n }\n\n if (!isEnabled && hasAttribute) {\n element.removeAttribute(name);\n }\n }\n\n /**\n * Returns whether collapse rules should currently be applied.\n * @returns {boolean}\n */\n shouldApplyBreakpointCollapse() {\n const breakpointWidth = this.getBreakpointWidth();\n\n if (!breakpointWidth) return true;\n\n return window.innerWidth < breakpointWidth;\n }\n\n /**\n * Resolves the configured breakpoint to a pixel width.\n * @returns {number|null}\n */\n getBreakpointWidth() {\n if (!this.breakpoint) return null;\n\n const token = this.breakpoint.trim().toLowerCase();\n const cssValue = getComputedStyle(this).getPropertyValue(`--wje-breadcrumbs-breakpoint-${token}`).trim();\n const namedBreakpoint = Breadcrumbs.BREAKPOINTS[token];\n\n if (cssValue) {\n const cssNumber = parseFloat(cssValue);\n if (Number.isFinite(cssNumber)) return cssNumber;\n }\n\n if (Number.isFinite(namedBreakpoint)) {\n return namedBreakpoint;\n }\n\n const directNumber = parseFloat(token);\n return Number.isFinite(directNumber) ? directNumber : null;\n }\n\n /**\n * Retrieves all breadcrumb elements within the current instance.\n * @returns {Array<Element>} An array of breadcrumb elements (`wje-breadcrumb`) found within the instance. Returns an empty array if no breadcrumbs are found.\n */\n getBreadcrumbs() {\n return Array.from(this.querySelectorAll('wje-breadcrumb')) || [];\n }\n\n /**\n * Retrieves all breadcrumb elements that have the 'collapsed' attribute.\n * @returns {Array<Element>} An array of DOM elements representing breadcrumbs with the 'collapsed' attribute.\n */\n getBreadcrumbsCollapsed() {\n return Array.from(this.querySelectorAll('wje-breadcrumb[collapsed]')) || [];\n }\n}\n","import Breadcrumbs from './breadcrumbs.element.js';\n\nexport default Breadcrumbs;\n\nBreadcrumbs.define('wje-breadcrumbs', Breadcrumbs);\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"wje-breadcrumbs.js","sources":["../packages/wje-breadcrumbs/breadcrumbs.element.js","../packages/wje-breadcrumbs/breadcrumbs.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\nconst MANAGED_ITEM_ATTRIBUTE = 'data-wje-breadcrumbs-item';\n\n/**\n * @summary This class represents a Breadcrumbs container, extending the WJElement class. It acts as a wrapper for individual breadcrumb elements and manages their behavior, such as collapsing and marking the last breadcrumb.\n * @documentation https://elements.webjet.sk/components/breadcrumbs\n * @status stable\n * @augments WJElement\n * @slot - The container for breadcrumb elements.\n * @slot breakpoint-collapse-trigger - Custom trigger used when breakpoint-collapse=\"menu\" moves the full trail into a dropdown.\n * @csspart container - The component's container wrapper.\n * @property {Array<{id: string|number, label: string, href?: string, icon?: string, disabled?: boolean, data?: any}>} items - Data-driven breadcrumb items.\n * @attribute {number} max-items - The maximum number of visible breadcrumbs before collapsing.\n * @attribute {number} items-before-collapse - The number of breadcrumbs to show before the collapsed indicator.\n * @attribute {number} items-after-collapse - The number of breadcrumbs to show after the collapsed indicator.\n * @attribute {string} collapsed-variant - The UI used for collapsed breadcrumbs. Use \"dropdown\" to render a menu.\n * @attribute {string} breakpoint - The viewport breakpoint where collapsing starts.\n * @attribute {string} breakpoint-collapse - The collapse behavior used below the breakpoint. Use \"menu\" to put the whole trail into one menu.\n * @attribute {string} breakpoint-collapse-icon - Icon used by the default breakpoint menu trigger.\n * // @fires wje-breadcrumbs:item-click - Dispatched when a data-driven breadcrumb item is clicked.\n * @tag wje-breadcrumbs\n * @example\n * <!-- Example usage -->\n * <wje-breadcrumbs max-items=\"5\" items-before-collapse=\"2\" items-after-collapse=\"2\">\n * <wje-breadcrumb>Home</wje-breadcrumb>\n * <wje-breadcrumb>About</wje-breadcrumb>\n * <wje-breadcrumb>Services</wje-breadcrumb>\n * <wje-breadcrumb>Portfolio</wje-breadcrumb>\n * <wje-breadcrumb>Contact</wje-breadcrumb>\n * </wje-breadcrumbs>\n *\n * <!-- Output: Only the first two and last two breadcrumbs will be visible, with a collapsed indicator in the middle -->\n */\n\nexport default class Breadcrumbs extends WJElement {\n static BREAKPOINTS = {\n sm: 576,\n md: 768,\n lg: 992,\n xl: 1200,\n '2xl': 1450,\n xxl: 1450,\n };\n\n /**\n * Breadcrumbs constructor method.\n * @class\n */\n constructor() {\n super();\n\n /**\n * Last breadcrumb flag\n * @type {boolean}\n */\n this.last = false;\n this._isCollapsedByBreakpoint = null;\n this._items = [];\n this._itemRecords = [];\n this._hasItemsValue = false;\n this.handleManagedItemClick = (e) => this.dispatchManagedItemClick(e);\n }\n\n /**\n * Sets data-driven breadcrumb items.\n * @param {Array|string|null|undefined} value Breadcrumb items or a JSON string.\n */\n set items(value) {\n const records = this.normalizeItems(value);\n\n this._hasItemsValue = true;\n this._items = records.map((record) => record.item);\n this._itemRecords = records;\n\n this.syncItems(records);\n }\n\n /**\n * Gets data-driven breadcrumb items.\n * @returns {Array}\n */\n get items() {\n return this._items;\n }\n\n /**\n * Set variant attribute for the Breadcrumbs element.\n * @param value\n */\n set variant(value) {\n this.setAttribute('variant', value);\n }\n\n /**\n * Get variant attribute for the Breadcrumbs element.\n * @returns {string}\n */\n get variant() {\n return this.getAttribute('variant') || 'button';\n }\n\n /**\n * Get the collapsed indicator variant.\n * @param {string} value Collapsed indicator variant.\n */\n set collapsedVariant(value) {\n if (value) this.setAttribute('collapsed-variant', value);\n else this.removeAttribute('collapsed-variant');\n }\n\n /**\n * Get the collapsed indicator variant.\n * @returns {string}\n */\n get collapsedVariant() {\n return this.getAttribute('collapsed-variant') || this.variant;\n }\n\n /**\n * Sets the collapse breakpoint token or value.\n * @param {string} value Breakpoint token or CSS size.\n */\n set breakpoint(value) {\n if (value) this.setAttribute('breakpoint', value);\n else this.removeAttribute('breakpoint');\n }\n\n /**\n * Gets the collapse breakpoint token or value.\n * @returns {string}\n */\n get breakpoint() {\n return this.getAttribute('breakpoint') || '';\n }\n\n /**\n * Sets the collapse behavior used below the configured breakpoint.\n * @param {string} value Collapse behavior.\n */\n set breakpointCollapse(value) {\n if (value) this.setAttribute('breakpoint-collapse', value);\n else this.removeAttribute('breakpoint-collapse');\n }\n\n /**\n * Gets the collapse behavior used below the configured breakpoint.\n * @returns {string}\n */\n get breakpointCollapse() {\n return (this.getAttribute('breakpoint-collapse') || 'items').toLowerCase();\n }\n\n /**\n * Sets the icon used by the default breakpoint menu trigger.\n * @param {string} value Icon name.\n */\n set breakpointCollapseIcon(value) {\n if (value) this.setAttribute('breakpoint-collapse-icon', value);\n else this.removeAttribute('breakpoint-collapse-icon');\n }\n\n /**\n * Gets the icon used by the default breakpoint menu trigger.\n * @returns {string}\n */\n get breakpointCollapseIcon() {\n return this.getAttribute('breakpoint-collapse-icon') || '';\n }\n\n /**\n * Get items before collapse attribute.\n * @param {string} value\n */\n set maxItems(value) {\n this.setAttribute('max-items', value || 0);\n }\n\n /**\n * Get items before collapse attribute.\n * @returns {number}\n */\n get maxItems() {\n return +this.getAttribute('max-items' || 0);\n }\n\n /**\n * Get items before collapse attribute.\n * @param value\n */\n set itemsBeforeCollapse(value) {\n this.setAttribute('items-before-collapse', value || 1);\n }\n\n /**\n * Get items before collapse attribute.\n * @returns {number}\n */\n get itemsBeforeCollapse() {\n return +this.getAttribute('items-before-collapse') || 1;\n }\n\n /**\n * Get items after collapse attribute.\n * @param value\n */\n set itemsAfterCollapse(value) {\n this.setAttribute('items-after-collapse', value || 1);\n }\n\n /**\n * Get items after collapse attribute.\n * @returns {number}\n */\n get itemsAfterCollapse() {\n if (this.hasAttribute('items-after-collapse')) {\n return +this.getAttribute('items-after-collapse') || 1;\n }\n\n const derivedItemsAfterCollapse = this.maxItems - this.itemsBeforeCollapse - 1;\n\n return derivedItemsAfterCollapse > 0 ? derivedItemsAfterCollapse : 1;\n }\n\n /**\n * Class name for the Breadcrumbs element.\n * @type {string}\n */\n className = 'Breadcrumbs';\n\n /**\n * Get CSS stylesheet for the Breadcrumbs element.\n * @static\n * @returns {object} styles - The CSS styles\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n /**\n * Get observed attributes for the Breadcrumb element.\n * @static\n * @returns {Array<string>} - The observed attributes array for the Breadcrumb element.\n */\n static get observedAttributes() {\n return [\n 'breakpoint',\n 'breakpoint-collapse',\n 'max-items',\n 'items-before-collapse',\n 'items-after-collapse',\n 'collapsed-variant',\n 'breakpoint-collapse-icon',\n 'variant',\n ];\n }\n\n /**\n * Setup attributes for the Breadcrumbs element.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n this.setAriaState({ role: 'navigation' });\n this.upgradeProperty('items');\n\n if (!this._hasItemsValue && this.hasAttribute('items')) {\n this.items = this.getAttribute('items');\n }\n }\n\n /**\n * Handles attribute changes that affect light-DOM breadcrumb indicators.\n * @param {string} name Updated attribute.\n * @param {string|null} oldValue Previous value.\n * @param {string|null} newValue Next value.\n */\n attributeChangedCallback(name, oldValue, newValue) {\n if (oldValue === newValue) return;\n\n super.attributeChangedCallback?.(name, oldValue, newValue);\n\n if (name === 'collapsed-variant' || name === 'variant' || name === 'breakpoint-collapse' || name === 'breakpoint-collapse-icon') {\n this.refreshCollapsedIndicators();\n }\n }\n\n /**\n * Draw method for the Breadcrumbs element.\n * @returns {object} fragment - The document fragment\n */\n draw() {\n let fragment = document.createDocumentFragment();\n\n let element = document.createElement('slot');\n\n fragment.appendChild(element);\n this.defaultSlot = element;\n\n return fragment;\n }\n\n /**\n * Updates the breadcrumb elements after they are drawn on the page.\n * It manages attributes on breadcrumb items and handles the logic for collapsing breadcrumbs\n * if the total exceeds the specified maximum items.\n * @returns {void} This method does not return a value.\n */\n afterDraw() {\n this.onSlotChange = () => this.updateCollapse();\n this.defaultSlot?.addEventListener('slotchange', this.onSlotChange);\n this.addEventListener('click', this.handleManagedItemClick);\n this.handleResize = () => this.handleBreakpointResize();\n\n if (this.getBreakpointWidth()) {\n window.addEventListener('resize', this.handleResize);\n }\n\n if (this._itemRecords.length > 0 && this.getManagedBreadcrumbs().length === 0) {\n this.syncItems(this._itemRecords);\n }\n\n this.updateCollapse();\n }\n\n /**\n * Removes listeners after disconnect.\n */\n afterDisconnect() {\n this.defaultSlot?.removeEventListener('slotchange', this.onSlotChange);\n this.removeEventListener('click', this.handleManagedItemClick);\n window.removeEventListener('resize', this.handleResize);\n this._isCollapsedByBreakpoint = null;\n }\n\n /**\n * Upgrades properties set before the custom element definition was loaded.\n * @param {string} property Property name.\n */\n upgradeProperty(property) {\n if (!Object.prototype.hasOwnProperty.call(this, property)) return;\n\n const value = this[property];\n delete this[property];\n this[property] = value;\n }\n\n /**\n * Normalizes incoming item data for keyed DOM diffing.\n * @param {Array|string|null|undefined} value Breadcrumb item data.\n * @returns {Array<object>}\n */\n normalizeItems(value) {\n let items = value;\n\n if (typeof items === 'string') {\n try {\n items = JSON.parse(items);\n } catch (e) {\n console.warn('Invalid JSON passed to wje-breadcrumbs.items', e);\n items = [];\n }\n }\n\n if (items === null || items === undefined) return [];\n\n if (!Array.isArray(items)) {\n console.warn('wje-breadcrumbs.items expects an array.');\n return [];\n }\n\n const usedKeys = new Set();\n\n return items.map((item, index) => this.normalizeItem(item, index, usedKeys));\n }\n\n /**\n * Normalizes a single item while preserving the original object for events.\n * @param {object|string|number} item Source value for a breadcrumb entry.\n * @param {number} index Position of the value in the current items array.\n * @param {Set<string>} usedKeys Keys that have already been assigned during this update.\n * @returns {object}\n */\n normalizeItem(item, index, usedKeys) {\n const isObject = item !== null && typeof item === 'object';\n const source = isObject\n ? item\n : {\n id: index,\n label: item === null || item === undefined ? '' : String(item),\n };\n\n return {\n item: source,\n key: this.getItemKey(source, index, usedKeys),\n index,\n label: source.label === null || source.label === undefined ? '' : String(source.label),\n href: source.href === null || source.href === undefined ? null : String(source.href),\n icon: source.icon === null || source.icon === undefined || source.icon === '' ? null : String(source.icon),\n disabled: source.disabled === true || source.disabled === '' || source.disabled === 'true' || source.disabled === 1 || source.disabled === '1',\n };\n }\n\n /**\n * Resolves a stable key for an item.\n * @param {object} item Normalized source object used to resolve the key.\n * @param {number} index Fallback position used when the item has no id.\n * @param {Set<string>} usedKeys Keys that have already been assigned during this update.\n * @returns {string}\n */\n getItemKey(item, index, usedKeys) {\n const baseKey = item.id === null || item.id === undefined\n ? String(index)\n : String(item.id);\n let key = baseKey;\n let suffix = 1;\n\n while (usedKeys.has(key)) {\n key = `${baseKey}:${suffix}`;\n suffix += 1;\n }\n\n usedKeys.add(key);\n return key;\n }\n\n /**\n * Incrementally synchronizes data-driven items into light DOM breadcrumbs.\n * @param {Array<object>} records Normalized records for the next breadcrumb trail.\n */\n syncItems(records) {\n const managed = this.getManagedBreadcrumbs();\n const managedByKey = new Map(managed.map((breadcrumb) => [breadcrumb.__wjeBreadcrumbKey || breadcrumb.getAttribute(MANAGED_ITEM_ATTRIBUTE), breadcrumb]));\n const nextKeys = new Set(records.map((record) => record.key));\n\n managed.forEach((breadcrumb) => {\n const key = breadcrumb.__wjeBreadcrumbKey || breadcrumb.getAttribute(MANAGED_ITEM_ATTRIBUTE);\n\n if (!nextKeys.has(key)) {\n breadcrumb.remove();\n }\n });\n\n let referenceNode = this.firstChild;\n\n records.forEach((record, index) => {\n let breadcrumb = managedByKey.get(record.key);\n const signature = this.getItemStructureSignature(record);\n\n if (breadcrumb && breadcrumb.__wjeBreadcrumbSignature !== signature) {\n const previousBreadcrumb = breadcrumb;\n const replacement = this.createItemElement(record, index);\n breadcrumb.replaceWith(replacement);\n breadcrumb = replacement;\n if (referenceNode === previousBreadcrumb) referenceNode = breadcrumb;\n } else if (!breadcrumb) {\n breadcrumb = this.createItemElement(record, index);\n } else {\n this.updateItemElement(breadcrumb, record, index);\n }\n\n if (breadcrumb !== referenceNode) {\n this.insertBefore(breadcrumb, referenceNode);\n }\n\n referenceNode = breadcrumb.nextSibling;\n });\n\n this.updateCollapse();\n }\n\n /**\n * Creates a managed breadcrumb element.\n * @param {object} record Normalized data used to create the breadcrumb.\n * @param {number} index Position assigned to the created breadcrumb.\n * @returns {HTMLElement}\n */\n createItemElement(record, index) {\n const breadcrumb = document.createElement('wje-breadcrumb');\n this.updateItemElement(breadcrumb, record, index);\n\n return breadcrumb;\n }\n\n /**\n * Updates a managed breadcrumb element only where values changed.\n * @param {HTMLElement} breadcrumb Existing managed element to update.\n * @param {object} record Normalized data used for the next rendered state.\n * @param {number} index Position assigned to the managed breadcrumb.\n */\n updateItemElement(breadcrumb, record, index) {\n breadcrumb.__wjeBreadcrumbManaged = true;\n breadcrumb.__wjeBreadcrumbItem = record.item;\n breadcrumb.__wjeBreadcrumbIndex = index;\n breadcrumb.__wjeBreadcrumbKey = record.key;\n breadcrumb.__wjeBreadcrumbSignature = this.getItemStructureSignature(record);\n\n if (breadcrumb.getAttribute(MANAGED_ITEM_ATTRIBUTE) !== record.key) {\n breadcrumb.setAttribute(MANAGED_ITEM_ATTRIBUTE, record.key);\n }\n\n this.syncItemAttribute(breadcrumb, 'href', record.href);\n this.syncItemAttribute(breadcrumb, 'aria-label', record.label || null);\n this.syncBooleanItemAttribute(breadcrumb, 'disabled', record.disabled);\n this.syncItemContent(breadcrumb, record);\n }\n\n /**\n * Synchronizes an attribute when its value changed.\n * @param {HTMLElement} element Element receiving the synchronized attribute.\n * @param {string} name Attribute to add, update, or remove.\n * @param {string|null|undefined} value Next serialized value for the attribute.\n */\n syncItemAttribute(element, name, value) {\n if (value === null || value === undefined || value === false) {\n if (element.hasAttribute(name)) element.removeAttribute(name);\n return;\n }\n\n const normalizedValue = String(value);\n\n if (element.getAttribute(name) !== normalizedValue) {\n element.setAttribute(name, normalizedValue);\n }\n }\n\n /**\n * Synchronizes a boolean attribute.\n * @param {HTMLElement} element Element receiving the boolean attribute.\n * @param {string} name Boolean attribute to toggle.\n * @param {boolean} isEnabled Whether the attribute should be present.\n */\n syncBooleanItemAttribute(element, name, isEnabled) {\n if (isEnabled && !element.hasAttribute(name)) {\n element.setAttribute(name, '');\n }\n\n if (!isEnabled && element.hasAttribute(name)) {\n element.removeAttribute(name);\n }\n }\n\n /**\n * Synchronizes slotted icon and text nodes for a managed breadcrumb.\n * @param {HTMLElement} breadcrumb Breadcrumb element.\n * @param {object} record Normalized item record.\n */\n syncItemContent(breadcrumb, record) {\n let icon = breadcrumb.__wjeBreadcrumbIcon;\n\n if (record.icon) {\n if (!icon || icon.parentElement !== breadcrumb) {\n icon = document.createElement('wje-icon');\n icon.setAttribute('slot', 'start');\n breadcrumb.insertBefore(icon, breadcrumb.firstChild);\n breadcrumb.__wjeBreadcrumbIcon = icon;\n }\n\n if (icon.getAttribute('name') !== record.icon) {\n icon.setAttribute('name', record.icon);\n }\n } else if (icon) {\n icon.remove();\n breadcrumb.__wjeBreadcrumbIcon = null;\n }\n\n let labelNode = breadcrumb.__wjeBreadcrumbLabelNode;\n\n if (!labelNode || labelNode.parentNode !== breadcrumb) {\n labelNode = document.createTextNode('');\n breadcrumb.appendChild(labelNode);\n breadcrumb.__wjeBreadcrumbLabelNode = labelNode;\n }\n\n if (labelNode.textContent !== record.label) {\n labelNode.textContent = record.label;\n }\n }\n\n /**\n * Returns a small signature for structural changes that need item replacement.\n * @param {object} record Normalized item record.\n * @returns {string}\n */\n getItemStructureSignature(record) {\n return `icon:${record.icon ? '1' : '0'}`;\n }\n\n /**\n * Dispatches the data-driven item click event.\n * @param {MouseEvent} e Original click event.\n */\n dispatchManagedItemClick(e) {\n const breadcrumb = this.getManagedBreadcrumbFromEvent(e);\n if (!breadcrumb) return;\n\n const item = breadcrumb.__wjeBreadcrumbItem;\n\n if (item?.disabled || breadcrumb.hasAttribute('disabled')) {\n e.preventDefault();\n e.stopPropagation();\n e.stopImmediatePropagation?.();\n return;\n }\n\n const itemClickEvent = new CustomEvent('wje-breadcrumbs:item-click', {\n detail: {\n item,\n index: breadcrumb.__wjeBreadcrumbIndex,\n originalEvent: e,\n },\n bubbles: true,\n composed: true,\n cancelable: true,\n });\n\n const shouldContinue = this.dispatchEvent(itemClickEvent);\n\n if (!shouldContinue) {\n e.preventDefault();\n }\n }\n\n /**\n * Finds the managed breadcrumb that originated an event.\n * @param {Event} e Event whose composed path should be inspected.\n * @returns {HTMLElement|null}\n */\n getManagedBreadcrumbFromEvent(e) {\n const path = typeof e.composedPath === 'function' ? e.composedPath() : [];\n\n return path.find((node) => (\n node?.nodeType === Node.ELEMENT_NODE &&\n node.tagName?.toLowerCase() === 'wje-breadcrumb' &&\n node.parentElement === this &&\n node.hasAttribute(MANAGED_ITEM_ATTRIBUTE)\n )) || null;\n }\n\n /**\n * Reacts to viewport resize only when the breakpoint mode actually changes.\n * @returns {void}\n */\n handleBreakpointResize() {\n if (!this.getBreakpointWidth()) return;\n\n const nextState = this.shouldApplyBreakpointCollapse();\n\n if (this._isCollapsedByBreakpoint === nextState) return;\n\n this.updateCollapse();\n }\n\n /**\n * Recalculates breadcrumb collapse state.\n * @returns {void}\n */\n updateCollapse() {\n let breadcrumbs = this.getBreadcrumbs();\n\n if (breadcrumbs.length === 0) return;\n\n this._isCollapsedByBreakpoint = this.shouldApplyBreakpointCollapse();\n const shouldCollapseToMenu = this.isBreakpointMenuCollapseActive() && breadcrumbs.length > 1;\n\n if (shouldCollapseToMenu) {\n this.applyMenuCollapse(breadcrumbs);\n return;\n }\n\n const effectiveItemsAfterCollapse = this.itemsAfterCollapse;\n const shouldUseItemCollapse = this.breakpointCollapse === 'menu' || this._isCollapsedByBreakpoint;\n const shouldCollapse =\n shouldUseItemCollapse &&\n this.maxItems > 0 &&\n breadcrumbs.length > this.maxItems &&\n this.itemsBeforeCollapse + effectiveItemsAfterCollapse + 1 <= this.maxItems;\n\n const lastIndex = breadcrumbs.length - 1;\n const indicatorIndex = shouldCollapse ? this.itemsBeforeCollapse : -1;\n const collapseStart = this.itemsBeforeCollapse;\n const collapseEnd = breadcrumbs.length - effectiveItemsAfterCollapse;\n\n breadcrumbs.forEach((breadcrumb, index) => {\n this.syncManagedAttribute(breadcrumb, 'last', index === lastIndex);\n this.syncManagedAttribute(breadcrumb, 'show-collapsed-indicator', index === indicatorIndex);\n\n const isCollapsed =\n shouldCollapse &&\n index >= collapseStart &&\n index < collapseEnd;\n\n this.syncManagedAttribute(breadcrumb, 'collapsed', isCollapsed);\n\n if (!isCollapsed && breadcrumb.classList.contains('collapsed')) {\n breadcrumb.classList.remove('collapsed');\n }\n });\n }\n\n /**\n * Collapses the whole breadcrumb trail into a single menu indicator.\n * @param {Array<Element>} breadcrumbs Breadcrumb items.\n */\n applyMenuCollapse(breadcrumbs) {\n const lastIndex = breadcrumbs.length - 1;\n\n breadcrumbs.forEach((breadcrumb, index) => {\n const isIndicator = index === 0;\n\n this.syncManagedAttribute(breadcrumb, 'last', index === lastIndex);\n this.syncManagedAttribute(breadcrumb, 'show-collapsed-indicator', isIndicator);\n this.syncManagedAttribute(breadcrumb, 'collapsed', true);\n\n if (isIndicator) {\n breadcrumb.classList.remove('collapsed');\n }\n });\n }\n\n /**\n * Returns whether the active breakpoint mode should move the full trail into one menu.\n * @returns {boolean}\n */\n isBreakpointMenuCollapseActive() {\n return Boolean(\n this.getBreakpointWidth() &&\n this._isCollapsedByBreakpoint &&\n this.breakpointCollapse === 'menu'\n );\n }\n\n /**\n * Clears attributes/classes managed by the collapse algorithm.\n * @param {Array<Element>} breadcrumbs Breadcrumb items.\n */\n resetCollapseState(breadcrumbs = this.getBreadcrumbs()) {\n breadcrumbs.forEach((breadcrumb) => {\n breadcrumb.removeAttribute('collapsed');\n breadcrumb.removeAttribute('show-collapsed-indicator');\n breadcrumb.removeAttribute('last');\n breadcrumb.classList.remove('collapsed');\n });\n }\n\n /**\n * Applies a managed boolean attribute only when its value truly changes.\n * @param {Element} element Breadcrumb item whose responsive state is being synchronized.\n * @param {string} name Managed state flag that should be synchronized on the breadcrumb item.\n * @param {boolean} isEnabled Whether the attribute should be present.\n */\n syncManagedAttribute(element, name, isEnabled) {\n if (!element) return;\n\n const hasAttribute = element.hasAttribute(name);\n\n if (isEnabled && !hasAttribute) {\n element.setAttribute(name, true);\n }\n\n if (!isEnabled && hasAttribute) {\n element.removeAttribute(name);\n }\n }\n\n /**\n * Redraws active collapsed indicators when parent-only rendering inputs change.\n */\n refreshCollapsedIndicators() {\n this.getBreadcrumbs()\n .filter((breadcrumb) => breadcrumb.hasAttribute('show-collapsed-indicator'))\n .forEach((breadcrumb) => breadcrumb.refresh?.());\n }\n\n /**\n * Returns whether collapse rules should currently be applied.\n * @returns {boolean}\n */\n shouldApplyBreakpointCollapse() {\n const breakpointWidth = this.getBreakpointWidth();\n\n if (!breakpointWidth) return true;\n\n return window.innerWidth < breakpointWidth;\n }\n\n /**\n * Resolves the configured breakpoint to a pixel width.\n * @returns {number|null}\n */\n getBreakpointWidth() {\n if (!this.breakpoint) return null;\n\n const token = this.breakpoint.trim().toLowerCase();\n const cssValue = getComputedStyle(this).getPropertyValue(`--wje-breadcrumbs-breakpoint-${token}`).trim();\n const namedBreakpoint = Breadcrumbs.BREAKPOINTS[token];\n\n if (cssValue) {\n const cssNumber = parseFloat(cssValue);\n if (Number.isFinite(cssNumber)) return cssNumber;\n }\n\n if (Number.isFinite(namedBreakpoint)) {\n return namedBreakpoint;\n }\n\n const directNumber = parseFloat(token);\n return Number.isFinite(directNumber) ? directNumber : null;\n }\n\n /**\n * Returns the custom trigger element configured for breakpoint menu collapse.\n * @returns {Element|null}\n */\n getBreakpointCollapseTrigger() {\n return Array.from(this.children)\n .find((child) => child.getAttribute?.('slot') === 'breakpoint-collapse-trigger') || null;\n }\n\n /**\n * Retrieves all breadcrumb elements within the current instance.\n * @returns {Array<Element>} An array of breadcrumb elements (`wje-breadcrumb`) found within the instance. Returns an empty array if no breadcrumbs are found.\n */\n getBreadcrumbs() {\n return Array.from(this.querySelectorAll('wje-breadcrumb')) || [];\n }\n\n /**\n * Retrieves breadcrumbs managed by the items property.\n * @returns {Array<Element>}\n */\n getManagedBreadcrumbs() {\n return Array.from(this.querySelectorAll(`wje-breadcrumb[${MANAGED_ITEM_ATTRIBUTE}]`)) || [];\n }\n\n /**\n * Retrieves all breadcrumb elements that have the 'collapsed' attribute.\n * @returns {Array<Element>} An array of DOM elements representing breadcrumbs with the 'collapsed' attribute.\n */\n getBreadcrumbsCollapsed() {\n return Array.from(this.querySelectorAll('wje-breadcrumb[collapsed]')) || [];\n }\n}\n","import Breadcrumbs from './breadcrumbs.element.js';\n\nexport default Breadcrumbs;\n\nBreadcrumbs.define('wje-breadcrumbs', Breadcrumbs);\n"],"names":[],"mappings":"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"}
|