wj-elements 0.3.3 → 0.3.5
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/packages/wje-button/button.element.d.ts +0 -11
- package/dist/packages/wje-menu-item/menu-item.element.d.ts +1 -2
- package/dist/packages/wje-router-link/router-link.element.d.ts +0 -1
- package/dist/packages/wje-tab/tab.element.d.ts +0 -1
- package/dist/wje-button.js +17 -42
- package/dist/wje-button.js.map +1 -1
- package/dist/wje-menu-item.js +2 -16
- package/dist/wje-menu-item.js.map +1 -1
- package/dist/wje-router-link.js +1 -11
- package/dist/wje-router-link.js.map +1 -1
- package/dist/wje-tab.js +1 -11
- package/dist/wje-tab.js.map +1 -1
- package/package.json +5 -5
- package/dist/packages/utils/router-links.d.ts +0 -8
|
@@ -190,7 +190,6 @@ export default class Button extends WJElement {
|
|
|
190
190
|
* After draw method for the Button element.
|
|
191
191
|
*/
|
|
192
192
|
afterDraw(): void;
|
|
193
|
-
bindRouterLinks(): void;
|
|
194
193
|
unbindRouterLinks: any;
|
|
195
194
|
/**
|
|
196
195
|
* Event dialog open method for the Button element.
|
|
@@ -201,16 +200,6 @@ export default class Button extends WJElement {
|
|
|
201
200
|
* Toggle states method for the Button element.
|
|
202
201
|
*/
|
|
203
202
|
toggleStates: () => void;
|
|
204
|
-
/**
|
|
205
|
-
* Returns assigned toggle elements.
|
|
206
|
-
* @returns {HTMLElement[]}
|
|
207
|
-
*/
|
|
208
|
-
getToggleNodes(): HTMLElement[];
|
|
209
|
-
/**
|
|
210
|
-
* Sets toggle state and updates slotted toggle visibility.
|
|
211
|
-
* @param {'on'|'off'|string} value
|
|
212
|
-
*/
|
|
213
|
-
setToggleState(value: "on" | "off" | string): void;
|
|
214
203
|
/**
|
|
215
204
|
* Syncs ARIA attributes on the host element.
|
|
216
205
|
*/
|
|
@@ -99,6 +99,7 @@ export default class MenuItem extends WJElement {
|
|
|
99
99
|
* Adds event listeners after drawing the MenuItem.
|
|
100
100
|
*/
|
|
101
101
|
afterDraw(): void;
|
|
102
|
+
unbindRouterLinks: any;
|
|
102
103
|
/**
|
|
103
104
|
* Syncs ARIA attributes based on menu item state.
|
|
104
105
|
*/
|
|
@@ -106,8 +107,6 @@ export default class MenuItem extends WJElement {
|
|
|
106
107
|
mouseenterHandler: (e: any) => void;
|
|
107
108
|
rebindRouterLinks: (e: any) => void;
|
|
108
109
|
unbindPortalRouterLinks: any;
|
|
109
|
-
bindRouterLinks(): void;
|
|
110
|
-
unbindRouterLinks: any;
|
|
111
110
|
/**
|
|
112
111
|
* Handles the click event on the MenuItem.
|
|
113
112
|
* @param {object} e
|
|
@@ -63,7 +63,6 @@ export default class Tab extends WJElement {
|
|
|
63
63
|
* // @fires wje-tab:change - Dispatched when the component is clicked, indicating a tab change.
|
|
64
64
|
*/
|
|
65
65
|
afterDraw(): void;
|
|
66
|
-
bindRouterLinks(): void;
|
|
67
66
|
unbindRouterLinks: any;
|
|
68
67
|
/**
|
|
69
68
|
* Sync aria-label on host based on slotted text when not provided.
|
package/dist/wje-button.js
CHANGED
|
@@ -46,8 +46,15 @@ class Button extends WJElement {
|
|
|
46
46
|
* Toggle states method for the Button element.
|
|
47
47
|
*/
|
|
48
48
|
__publicField(this, "toggleStates", () => {
|
|
49
|
-
const
|
|
50
|
-
|
|
49
|
+
const nodes = this.slotToggle.assignedNodes().filter((node) => node.nodeType === Node.ELEMENT_NODE);
|
|
50
|
+
nodes.forEach((node, index) => {
|
|
51
|
+
if (node.classList.contains("show")) {
|
|
52
|
+
node.classList.remove("show");
|
|
53
|
+
} else {
|
|
54
|
+
node.classList.add("show");
|
|
55
|
+
this.setAttribute("value", index === 0 ? "on" : "off");
|
|
56
|
+
}
|
|
57
|
+
});
|
|
51
58
|
this.syncAria();
|
|
52
59
|
});
|
|
53
60
|
}
|
|
@@ -358,14 +365,16 @@ class Button extends WJElement {
|
|
|
358
365
|
*/
|
|
359
366
|
afterDraw() {
|
|
360
367
|
if (this.hasAttribute("route")) {
|
|
361
|
-
this.bindRouterLinks();
|
|
362
|
-
if (!this.unbindRouterLinks) {
|
|
363
|
-
queueMicrotask(() => this.bindRouterLinks());
|
|
364
|
-
}
|
|
368
|
+
this.unbindRouterLinks = bindRouterLinks(this.parentElement, { selector: false });
|
|
365
369
|
}
|
|
366
370
|
if (this.hasToggle) {
|
|
367
|
-
|
|
368
|
-
|
|
371
|
+
if (this.toggle === "off") {
|
|
372
|
+
this.slotToggle.assignedNodes()[1].classList.add("show");
|
|
373
|
+
this.setAttribute("value", "off");
|
|
374
|
+
} else {
|
|
375
|
+
this.slotToggle.assignedNodes()[0].classList.add("show");
|
|
376
|
+
this.setAttribute("value", "on");
|
|
377
|
+
}
|
|
369
378
|
}
|
|
370
379
|
if (this.hasAttribute("custom-event")) {
|
|
371
380
|
event.addListener(this, "click", null, __privateMethod(this, _Button_instances, populateCustomEvent_fn));
|
|
@@ -393,13 +402,6 @@ class Button extends WJElement {
|
|
|
393
402
|
}
|
|
394
403
|
this.syncAria();
|
|
395
404
|
}
|
|
396
|
-
bindRouterLinks() {
|
|
397
|
-
var _a;
|
|
398
|
-
const parent = this.parentElement;
|
|
399
|
-
if (!parent) return;
|
|
400
|
-
(_a = this.unbindRouterLinks) == null ? void 0 : _a.call(this);
|
|
401
|
-
this.unbindRouterLinks = bindRouterLinks(parent, { selector: false });
|
|
402
|
-
}
|
|
403
405
|
/**
|
|
404
406
|
* Before disconnect method for the Button element.
|
|
405
407
|
*/
|
|
@@ -414,33 +416,6 @@ class Button extends WJElement {
|
|
|
414
416
|
this.removeEventListener("click", this.eventDialogOpen);
|
|
415
417
|
(_a = this.unbindRouterLinks) == null ? void 0 : _a.call(this);
|
|
416
418
|
}
|
|
417
|
-
/**
|
|
418
|
-
* Returns assigned toggle elements.
|
|
419
|
-
* @returns {HTMLElement[]}
|
|
420
|
-
*/
|
|
421
|
-
getToggleNodes() {
|
|
422
|
-
if (!this.slotToggle) return [];
|
|
423
|
-
if (typeof this.slotToggle.assignedElements === "function") {
|
|
424
|
-
return this.slotToggle.assignedElements({ flatten: true });
|
|
425
|
-
}
|
|
426
|
-
return this.slotToggle.assignedNodes().filter((node) => node.nodeType === Node.ELEMENT_NODE);
|
|
427
|
-
}
|
|
428
|
-
/**
|
|
429
|
-
* Sets toggle state and updates slotted toggle visibility.
|
|
430
|
-
* @param {'on'|'off'|string} value
|
|
431
|
-
*/
|
|
432
|
-
setToggleState(value) {
|
|
433
|
-
const nodes = this.getToggleNodes();
|
|
434
|
-
if (!nodes.length) return;
|
|
435
|
-
nodes.forEach((node) => node.classList.remove("show"));
|
|
436
|
-
const expectedState = value === "off" ? "off" : "on";
|
|
437
|
-
const targetNode = expectedState === "off" ? nodes[1] ?? nodes[0] : nodes[0];
|
|
438
|
-
targetNode == null ? void 0 : targetNode.classList.add("show");
|
|
439
|
-
const normalizedValue = expectedState === "off" && nodes[1] ? "off" : "on";
|
|
440
|
-
if (this.getAttribute("value") !== normalizedValue) {
|
|
441
|
-
this.setAttribute("value", normalizedValue);
|
|
442
|
-
}
|
|
443
|
-
}
|
|
444
419
|
/**
|
|
445
420
|
* Syncs ARIA attributes on the host element.
|
|
446
421
|
*/
|
package/dist/wje-button.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"wje-button.js","sources":["../packages/wje-button/button.element.js","../packages/wje-button/button.js"],"sourcesContent":["import { bindRouterLinks } from 'slick-router/middlewares/router-links.js';\n\nimport { bool } from '../utils/utils.js';\nimport { default as WJElement, event, WjElementUtils } from '../wje-element/element.js';\nimport Icon from '../wje-icon/icon.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents Button element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/button\n * @status stable\n * @augments WJElement\n * @dependency wje-icon\n * @slot - The button main content.\n * @slot icon - The button icon.\n * @slot caret - The button caret.\n * @slot start - The button start slot.\n * @slot end - The button end slot.\n * @slot toggle - The button toggle slot.\n * @csspart native - The component's native wrapper.\n * @cssproperty [--wje-button-background-color=transparent] - Background color of the component;\n * @cssproperty [--wje-button-border-color=--wje-color-contrast-4] - Border color of the component;\n * @cssproperty [--wje-button-color=--wje-color-contrast-11] - Color of the component;\n * @cssproperty [--wje-button-border-radius=--wje-border-radius-medium] - Border radius of the component;\n * @cssproperty [--wje-button-border-width=1px] - Border width of the component;\n * @cssproperty [--wje-button-border-style=solid] - Border style of the component;\n * @cssproperty [--wje-button-border-color=--wje-color-contrast-1] - Border color of the component;\n * @cssproperty [--wje-button-margin-inline=0] - Margin inline of the component;\n */\n\nexport default class Button extends WJElement {\n /**\n * Button constructor method.\n * @class\n */\n constructor() {\n super();\n }\n\n /**\n * Dependencies of the Button element.\n * @type {object}\n */\n dependencies = {\n 'wje-icon': Icon,\n };\n\n /**\n * Properties of the element Button.\n * @param value\n */\n set color(value) {\n this.setAttribute('color', value || 'default');\n }\n\n /**\n * Get color of the Button element.\n * @returns {string|string}\n */\n get color() {\n return this.getAttribute('color') || 'default';\n }\n\n /**\n * Set variant of the Button element.\n * @param value\n */\n set caret(value) {\n this.setAttribute('caret', value);\n }\n\n /**\n * Get variant of the Button element.\n * @returns {boolean}\n */\n get caret() {\n return this.hasAttribute('caret');\n }\n\n /**\n * Sets the 'round' attribute on the element. If the value is true, the attribute is added;\n * otherwise, it is removed from the element.\n * @param {boolean} value A boolean indicating whether to set or remove the 'round' attribute.\n */\n set round(value) {\n if (value) {\n this.setAttribute('round', '');\n } else {\n this.removeAttribute('round');\n }\n }\n\n /**\n * Retrieves the value of the 'round' attribute as a boolean.\n * Checks if the 'round' attribute is present on the element.\n * @returns {boolean} True if the 'round' attribute exists, otherwise false.\n */\n get round() {\n return this.hasAttribute('round');\n }\n\n /**\n * Set variant of the Button element.\n * @param value\n */\n set tooltip(value) {\n this.setAttribute('tooltip', value);\n }\n\n /**\n * Get variant of the Button element.\n * @returns {boolean}\n */\n get tooltip() {\n return this.hasAttribute('tooltip');\n }\n\n /**\n * Set variant of the Button element.\n * @param value\n */\n set dialog(value) {\n this.setAttribute('dialog', value);\n }\n\n /**\n * Get variant of the Button element.\n * @returns {string|object}\n */\n get dialog() {\n return this.getAttribute('dialog');\n }\n\n /**\n * Set active state of the Button element.\n * @param {boolean} value The value to set\n */\n set active(value) {\n this.setAttribute('active', '');\n }\n\n /**\n * Get active state of the Button element.\n * @returns {boolean} active - The active state\n */\n get active() {\n return this.hasAttribute('active');\n }\n\n /**\n * Set disabled state of the Button element.\n * @param {boolean} value The value to set\n */\n set disabled(value) {\n this.removeAttribute('disabled');\n\n if (value) {\n this.setAttribute('disabled', '');\n }\n }\n\n /**\n * Get disabled state of the Button element.\n * @returns {boolean} disabled - The disabled state\n */\n get disabled() {\n return this.hasAttribute('disabled');\n }\n\n /**\n * Set fill of the Button element.\n * @param {string} value The value to set\n */\n set fill(value) {\n this.setAttribute('fill', value);\n }\n\n /**\n * Get fill of the Button element.\n * @returns {string} fill - The fill value\n */\n get fill() {\n return this.getAttribute('fill') || 'solid';\n }\n\n /**\n * Set outline state of the Button element.\n * @param {boolean} value The value to set\n */\n set outline(value) {\n this.setAttribute('outline', '');\n }\n\n /**\n * Get outline state of the Button element.\n * @returns {boolean} outline - The outline state\n */\n get outline() {\n return this.hasAttribute('outline');\n }\n\n /**\n * Set stop propagation state of the Button element.\n * @param {boolean} value The value to set\n */\n set stopPropagation(value) {\n this.setAttribute('stop-propagation', bool(value));\n }\n\n /**\n * Get stop propagation state of the Button element.\n * @returns {boolean} stopPropagation - The stop propagation state\n */\n get stopPropagation() {\n return bool(this.getAttribute('stop-propagation'));\n }\n\n /**\n * Sets the value of the custom event attribute.\n * @param {string} value The value to be assigned to the custom event attribute.\n */\n set customEvent(value) {\n this.setAttribute('custom-event', value);\n }\n\n /**\n * Retrieves the value of the 'custom-event' attribute from the element.\n * @returns {string | null} The value of the 'custom-event' attribute, or null if the attribute is not set.\n */\n get customEvent() {\n return this.getAttribute('custom-event');\n }\n\n /**\n * Retrieves a mapped object containing custom event parameters extracted from the element's attributes.\n * Attributes considered are those that begin with 'custom-event-'.\n * The mapped object's keys are derived by removing the 'custom-event-' prefix from the attribute names,\n * and the values are the corresponding attribute values.\n * @returns {object} An object containing key-value pairs of custom event parameters.\n */\n get customEventParameters() {\n const attributes = Array.from(this.attributes).filter((attr) => attr.name.startsWith('custom-event-'));\n\n return attributes.reduce((acc, attr) => {\n const key = attr.name.replace('custom-event-', '');\n acc[key] = attr.value;\n\n return acc;\n }, {});\n }\n\n /**\n * Class name for the Button element\n * @type {string}\n */\n className = 'Button';\n\n /**\n * Get CSS stylesheet for the Button element.\n * @static\n * @returns {CSSStyleSheet} styles - The CSS stylesheet for the Button element.\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n /**\n * Get observed attributes for the Button element.\n * @static\n * @returns {Array<string>} observedAttributes - The observed attributes array for the Button element.\n */\n static get observedAttributes() {\n return ['disabled', 'color', 'value', 'active', 'href'];\n }\n\n attributeChangedCallback(name, oldValue, newValue) {\n super.attributeChangedCallback?.(name, oldValue, newValue);\n if (['disabled', 'value', 'active', 'href'].includes(name)) {\n this.syncAria?.();\n }\n }\n\n /**\n * @summary A static property that indicates whether the custom element is form-associated or not.\n * Form-associated custom elements are elements that can participate in form submission.\n * @type {boolean}\n */\n static formAssociated = true;\n\n /**\n * @summary Callback function that is called when the custom element is associated with a form.\n * This function sets the internal `_form` property to the associated form.\n * @param {HTMLFormElement} form The form the custom element is associated with.\n */\n formAssociatedCallback(form) {\n this._form = form;\n }\n\n /**\n * @summary Callback function that is called when the form-associated state of the custom element changes.\n * This function updates the 'disabled' attribute of the element based on the new state.\n * @param {boolean} disabled The new form-associated state.\n */\n formDisabledCallback(disabled) {\n if (disabled) {\n this.setAttribute('disabled', '');\n } else {\n this.removeAttribute('disabled');\n }\n }\n\n /**\n * Setup attributes for the Button element.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n this.syncAria();\n }\n\n /**\n * Draw method for the Button element.\n * @returns {object} fragment - The document fragment containing the drawn element.\n */\n draw() {\n let fragment = document.createDocumentFragment();\n\n let native = document.createElement(this.hasAttribute('href') ? 'a' : 'button');\n if (this.hasAttribute('href')) {\n native.setAttribute('href', this.getAttribute('href'));\n } else {\n if (this.type === 'submit') {\n native.setAttribute('type', 'submit');\n }\n }\n\n native.classList.add('native-button');\n native.setAttribute('part', 'native');\n\n this.classList.remove('wje-button-disabled');\n\n if (this.disabled) native.classList.add('wje-button-disabled');\n\n if (this.variant) native.classList.add('wje-button-' + this.variant);\n\n if (this.hasAttribute('round')) native.classList.add('wje-button-round');\n\n if (this.hasAttribute('circle')) native.classList.add('wje-button-circle');\n\n if (this.outline) native.classList.add('wje-outline');\n\n if (this.fill) native.classList.add('wje-button-' + this.fill);\n\n if (this.size) native.classList.add('wje-button-' + this.size);\n\n if (\n (this.querySelectorAll('[slot=caret]').length < 1 && this.hasAttribute('caret')) ||\n this.hasAttribute('only-caret')\n ) {\n let i = document.createElement('wje-icon');\n i.style.setProperty('--wje-icon-size', '14px');\n i.setAttribute('slot', 'caret');\n i.setAttribute('name', 'chevron-down');\n i.setAttribute('part', 'caret');\n\n this.appendChild(i);\n }\n\n if (this.active) {\n this.classList.add('wje-active');\n let i = document.createElement('wje-icon');\n i.setAttribute('name', 'check');\n\n this.appendChild(i);\n }\n\n native.classList.add('wje-color-' + this.color, 'wje-color');\n\n let span = document.createElement('span');\n span.setAttribute('part', 'inner');\n span.classList.add('button-inner');\n\n let slot = document.createElement('slot');\n slot.setAttribute('name', 'icon-only');\n span.appendChild(slot);\n\n slot = document.createElement('slot');\n slot.setAttribute('name', 'start');\n span.appendChild(slot);\n\n slot = document.createElement('slot');\n span.appendChild(slot);\n\n slot = document.createElement('slot');\n slot.setAttribute('name', 'end');\n span.appendChild(slot);\n\n slot = document.createElement('slot');\n slot.setAttribute('name', 'caret');\n span.appendChild(slot);\n\n this.hasToggle = WjElementUtils.hasSlot(this, 'toggle');\n\n if (this.hasToggle) {\n this.slotToggle = document.createElement('slot');\n this.slotToggle.setAttribute('name', 'toggle');\n\n span.appendChild(this.slotToggle);\n }\n\n native.appendChild(span);\n\n if (this.tooltip) {\n let tooltip = document.createElement('wje-tooltip');\n tooltip.setAttribute('content', this.getAttribute('tooltip'));\n tooltip.setAttribute('placement', this.getAttribute('tooltip-placement') || 'top');\n tooltip.appendChild(native);\n\n fragment.appendChild(tooltip);\n } else {\n fragment.appendChild(native);\n }\n\n return fragment;\n }\n\n /**\n * After draw method for the Button element.\n */\n afterDraw() {\n if (this.hasAttribute('route')) {\n this.bindRouterLinks();\n if (!this.unbindRouterLinks) {\n queueMicrotask(() => this.bindRouterLinks());\n }\n }\n\n // nastavenie toggle podla atributu, ak nie je nastaveny, tak sa zobrazi vzdy prvy element\n if (this.hasToggle) {\n const initialToggleValue = this.getAttribute('value') || (this.toggle === 'off' ? 'off' : 'on');\n this.setToggleState(initialToggleValue);\n }\n\n if (this.hasAttribute('custom-event')) {\n event.addListener(this, 'click', null, this.#populateCustomEvent);\n }\n\n if (this.hasAttribute('dialog')) {\n event.addListener(this, 'click', null, this.eventDialogOpen);\n } else {\n event.addListener(this, 'click', 'wje-button:click', null); // { stopPropagation: this.stopPropagation } - zrusene kvoli dropdown kde som nevedel odchytit event click\n }\n\n if (this.hasToggle)\n event.addListener(this, 'click', 'wje-button:toggle', this.toggleStates, {\n stopPropagation: this.stopPropagation,\n });\n\n if (this.type === 'submit') {\n event.addListener(this, 'click', 'wje-button:submit', () => {\n event.dispatchCustomEvent(this.internals?.form, 'submit', {});\n });\n }\n\n if (this.type === 'reset') {\n event.addListener(this, 'click', 'wje-button:reset', () => {\n this.internals?.form.reset();\n });\n }\n\n this.syncAria();\n }\n\n bindRouterLinks() {\n const parent = this.parentElement;\n if (!parent) return;\n\n this.unbindRouterLinks?.();\n this.unbindRouterLinks = bindRouterLinks(parent, { selector: false });\n }\n\n /**\n * Before disconnect method for the Button element.\n */\n beforeDisconnect() {\n // remove all events from the button\n event.removeListener(this, 'click', null, this.eventDialogOpen);\n event.removeListener(this, 'click', 'wje-button:click', null);\n event.removeListener(this, 'click', 'wje-button:toggle', this.toggleStates);\n event.removeListener(this, 'click', null, this.#populateCustomEvent);\n event.removeListener(this, 'click', 'wje-button:submit', null);\n event.removeListener(this, 'click', 'wje-button:reset', null);\n\n this.removeEventListener('click', this.eventDialogOpen);\n this.unbindRouterLinks?.();\n }\n\n /**\n * Event dialog open method for the Button element.\n * @param {Event} e The event object\n */\n eventDialogOpen = (e) => {\n event.dispatchCustomEvent(this, this.dialog);\n };\n\n /**\n * Toggle states method for the Button element.\n */\n toggleStates = () => {\n const nextValue = this.getAttribute('value') === 'off' ? 'on' : 'off';\n this.setToggleState(nextValue);\n\n this.syncAria();\n }\n\n /**\n * Returns assigned toggle elements.\n * @returns {HTMLElement[]}\n */\n getToggleNodes() {\n if (!this.slotToggle) return [];\n if (typeof this.slotToggle.assignedElements === 'function') {\n return this.slotToggle.assignedElements({ flatten: true });\n }\n\n return this.slotToggle.assignedNodes().filter((node) => node.nodeType === Node.ELEMENT_NODE);\n }\n\n /**\n * Sets toggle state and updates slotted toggle visibility.\n * @param {'on'|'off'|string} value\n */\n setToggleState(value) {\n const nodes = this.getToggleNodes();\n if (!nodes.length) return;\n\n nodes.forEach((node) => node.classList.remove('show'));\n\n const expectedState = value === 'off' ? 'off' : 'on';\n const targetNode = expectedState === 'off' ? (nodes[1] ?? nodes[0]) : nodes[0];\n targetNode?.classList.add('show');\n\n const normalizedValue = expectedState === 'off' && nodes[1] ? 'off' : 'on';\n if (this.getAttribute('value') !== normalizedValue) {\n this.setAttribute('value', normalizedValue);\n }\n }\n\n /**\n * Syncs ARIA attributes on the host element.\n */\n syncAria() {\n const isLink = this.hasAttribute('href');\n const isToggle = !!this.hasToggle;\n const pressed = isToggle && !isLink ? this.getAttribute('value') === 'on' : undefined;\n\n this.setAriaState({\n role: isLink ? 'link' : 'button',\n disabled: this.disabled,\n pressed,\n });\n }\n\n /**\n * Dispatches a custom event with specified parameters.\n * This method uses the `customEvent` and `customEventParameters` properties\n * to create and dispatch a `CustomEvent`. The event is configured to be\n * composed and bubbles up through the DOM.\n * @returns {void} This method does not return a value.\n */\n #populateCustomEvent() {\n this.dispatchEvent(\n new CustomEvent(this.customEvent, { detail: this.customEventParameters, composed: true, bubbles: true })\n );\n }\n}\n","import Button from './button.element.js';\n\nexport default Button;\n\nButton.define('wje-button', Button);\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"wje-button.js","sources":["../packages/wje-button/button.element.js","../packages/wje-button/button.js"],"sourcesContent":["import { bindRouterLinks } from 'slick-router/middlewares/router-links.js';\n\nimport { bool } from '../utils/utils.js';\nimport { default as WJElement, event, WjElementUtils } from '../wje-element/element.js';\nimport Icon from '../wje-icon/icon.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents Button element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/button\n * @status stable\n * @augments WJElement\n * @dependency wje-icon\n * @slot - The button main content.\n * @slot icon - The button icon.\n * @slot caret - The button caret.\n * @slot start - The button start slot.\n * @slot end - The button end slot.\n * @slot toggle - The button toggle slot.\n * @csspart native - The component's native wrapper.\n * @cssproperty [--wje-button-background-color=transparent] - Background color of the component;\n * @cssproperty [--wje-button-border-color=--wje-color-contrast-4] - Border color of the component;\n * @cssproperty [--wje-button-color=--wje-color-contrast-11] - Color of the component;\n * @cssproperty [--wje-button-border-radius=--wje-border-radius-medium] - Border radius of the component;\n * @cssproperty [--wje-button-border-width=1px] - Border width of the component;\n * @cssproperty [--wje-button-border-style=solid] - Border style of the component;\n * @cssproperty [--wje-button-border-color=--wje-color-contrast-1] - Border color of the component;\n * @cssproperty [--wje-button-margin-inline=0] - Margin inline of the component;\n */\n\nexport default class Button extends WJElement {\n /**\n * Button constructor method.\n * @class\n */\n constructor() {\n super();\n }\n\n /**\n * Dependencies of the Button element.\n * @type {object}\n */\n dependencies = {\n 'wje-icon': Icon,\n };\n\n /**\n * Properties of the element Button.\n * @param value\n */\n set color(value) {\n this.setAttribute('color', value || 'default');\n }\n\n /**\n * Get color of the Button element.\n * @returns {string|string}\n */\n get color() {\n return this.getAttribute('color') || 'default';\n }\n\n /**\n * Set variant of the Button element.\n * @param value\n */\n set caret(value) {\n this.setAttribute('caret', value);\n }\n\n /**\n * Get variant of the Button element.\n * @returns {boolean}\n */\n get caret() {\n return this.hasAttribute('caret');\n }\n\n /**\n * Sets the 'round' attribute on the element. If the value is true, the attribute is added;\n * otherwise, it is removed from the element.\n * @param {boolean} value A boolean indicating whether to set or remove the 'round' attribute.\n */\n set round(value) {\n if (value) {\n this.setAttribute('round', '');\n } else {\n this.removeAttribute('round');\n }\n }\n\n /**\n * Retrieves the value of the 'round' attribute as a boolean.\n * Checks if the 'round' attribute is present on the element.\n * @returns {boolean} True if the 'round' attribute exists, otherwise false.\n */\n get round() {\n return this.hasAttribute('round');\n }\n\n /**\n * Set variant of the Button element.\n * @param value\n */\n set tooltip(value) {\n this.setAttribute('tooltip', value);\n }\n\n /**\n * Get variant of the Button element.\n * @returns {boolean}\n */\n get tooltip() {\n return this.hasAttribute('tooltip');\n }\n\n /**\n * Set variant of the Button element.\n * @param value\n */\n set dialog(value) {\n this.setAttribute('dialog', value);\n }\n\n /**\n * Get variant of the Button element.\n * @returns {string|object}\n */\n get dialog() {\n return this.getAttribute('dialog');\n }\n\n /**\n * Set active state of the Button element.\n * @param {boolean} value The value to set\n */\n set active(value) {\n this.setAttribute('active', '');\n }\n\n /**\n * Get active state of the Button element.\n * @returns {boolean} active - The active state\n */\n get active() {\n return this.hasAttribute('active');\n }\n\n /**\n * Set disabled state of the Button element.\n * @param {boolean} value The value to set\n */\n set disabled(value) {\n this.removeAttribute('disabled');\n\n if (value) {\n this.setAttribute('disabled', '');\n }\n }\n\n /**\n * Get disabled state of the Button element.\n * @returns {boolean} disabled - The disabled state\n */\n get disabled() {\n return this.hasAttribute('disabled');\n }\n\n /**\n * Set fill of the Button element.\n * @param {string} value The value to set\n */\n set fill(value) {\n this.setAttribute('fill', value);\n }\n\n /**\n * Get fill of the Button element.\n * @returns {string} fill - The fill value\n */\n get fill() {\n return this.getAttribute('fill') || 'solid';\n }\n\n /**\n * Set outline state of the Button element.\n * @param {boolean} value The value to set\n */\n set outline(value) {\n this.setAttribute('outline', '');\n }\n\n /**\n * Get outline state of the Button element.\n * @returns {boolean} outline - The outline state\n */\n get outline() {\n return this.hasAttribute('outline');\n }\n\n /**\n * Set stop propagation state of the Button element.\n * @param {boolean} value The value to set\n */\n set stopPropagation(value) {\n this.setAttribute('stop-propagation', bool(value));\n }\n\n /**\n * Get stop propagation state of the Button element.\n * @returns {boolean} stopPropagation - The stop propagation state\n */\n get stopPropagation() {\n return bool(this.getAttribute('stop-propagation'));\n }\n\n /**\n * Sets the value of the custom event attribute.\n * @param {string} value The value to be assigned to the custom event attribute.\n */\n set customEvent(value) {\n this.setAttribute('custom-event', value);\n }\n\n /**\n * Retrieves the value of the 'custom-event' attribute from the element.\n * @returns {string | null} The value of the 'custom-event' attribute, or null if the attribute is not set.\n */\n get customEvent() {\n return this.getAttribute('custom-event');\n }\n\n /**\n * Retrieves a mapped object containing custom event parameters extracted from the element's attributes.\n * Attributes considered are those that begin with 'custom-event-'.\n * The mapped object's keys are derived by removing the 'custom-event-' prefix from the attribute names,\n * and the values are the corresponding attribute values.\n * @returns {object} An object containing key-value pairs of custom event parameters.\n */\n get customEventParameters() {\n const attributes = Array.from(this.attributes).filter((attr) => attr.name.startsWith('custom-event-'));\n\n return attributes.reduce((acc, attr) => {\n const key = attr.name.replace('custom-event-', '');\n acc[key] = attr.value;\n\n return acc;\n }, {});\n }\n\n /**\n * Class name for the Button element\n * @type {string}\n */\n className = 'Button';\n\n /**\n * Get CSS stylesheet for the Button element.\n * @static\n * @returns {CSSStyleSheet} styles - The CSS stylesheet for the Button element.\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n /**\n * Get observed attributes for the Button element.\n * @static\n * @returns {Array<string>} observedAttributes - The observed attributes array for the Button element.\n */\n static get observedAttributes() {\n return ['disabled', 'color', 'value', 'active', 'href'];\n }\n\n attributeChangedCallback(name, oldValue, newValue) {\n super.attributeChangedCallback?.(name, oldValue, newValue);\n if (['disabled', 'value', 'active', 'href'].includes(name)) {\n this.syncAria?.();\n }\n }\n\n /**\n * @summary A static property that indicates whether the custom element is form-associated or not.\n * Form-associated custom elements are elements that can participate in form submission.\n * @type {boolean}\n */\n static formAssociated = true;\n\n /**\n * @summary Callback function that is called when the custom element is associated with a form.\n * This function sets the internal `_form` property to the associated form.\n * @param {HTMLFormElement} form The form the custom element is associated with.\n */\n formAssociatedCallback(form) {\n this._form = form;\n }\n\n /**\n * @summary Callback function that is called when the form-associated state of the custom element changes.\n * This function updates the 'disabled' attribute of the element based on the new state.\n * @param {boolean} disabled The new form-associated state.\n */\n formDisabledCallback(disabled) {\n if (disabled) {\n this.setAttribute('disabled', '');\n } else {\n this.removeAttribute('disabled');\n }\n }\n\n /**\n * Setup attributes for the Button element.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n this.syncAria();\n }\n\n /**\n * Draw method for the Button element.\n * @returns {object} fragment - The document fragment containing the drawn element.\n */\n draw() {\n let fragment = document.createDocumentFragment();\n\n let native = document.createElement(this.hasAttribute('href') ? 'a' : 'button');\n if (this.hasAttribute('href')) {\n native.setAttribute('href', this.getAttribute('href'));\n } else {\n if (this.type === 'submit') {\n native.setAttribute('type', 'submit');\n }\n }\n\n native.classList.add('native-button');\n native.setAttribute('part', 'native');\n\n this.classList.remove('wje-button-disabled');\n\n if (this.disabled) native.classList.add('wje-button-disabled');\n\n if (this.variant) native.classList.add('wje-button-' + this.variant);\n\n if (this.hasAttribute('round')) native.classList.add('wje-button-round');\n\n if (this.hasAttribute('circle')) native.classList.add('wje-button-circle');\n\n if (this.outline) native.classList.add('wje-outline');\n\n if (this.fill) native.classList.add('wje-button-' + this.fill);\n\n if (this.size) native.classList.add('wje-button-' + this.size);\n\n if (\n (this.querySelectorAll('[slot=caret]').length < 1 && this.hasAttribute('caret')) ||\n this.hasAttribute('only-caret')\n ) {\n let i = document.createElement('wje-icon');\n i.style.setProperty('--wje-icon-size', '14px');\n i.setAttribute('slot', 'caret');\n i.setAttribute('name', 'chevron-down');\n i.setAttribute('part', 'caret');\n\n this.appendChild(i);\n }\n\n if (this.active) {\n this.classList.add('wje-active');\n let i = document.createElement('wje-icon');\n i.setAttribute('name', 'check');\n\n this.appendChild(i);\n }\n\n native.classList.add('wje-color-' + this.color, 'wje-color');\n\n let span = document.createElement('span');\n span.setAttribute('part', 'inner');\n span.classList.add('button-inner');\n\n let slot = document.createElement('slot');\n slot.setAttribute('name', 'icon-only');\n span.appendChild(slot);\n\n slot = document.createElement('slot');\n slot.setAttribute('name', 'start');\n span.appendChild(slot);\n\n slot = document.createElement('slot');\n span.appendChild(slot);\n\n slot = document.createElement('slot');\n slot.setAttribute('name', 'end');\n span.appendChild(slot);\n\n slot = document.createElement('slot');\n slot.setAttribute('name', 'caret');\n span.appendChild(slot);\n\n this.hasToggle = WjElementUtils.hasSlot(this, 'toggle');\n\n if (this.hasToggle) {\n this.slotToggle = document.createElement('slot');\n this.slotToggle.setAttribute('name', 'toggle');\n\n span.appendChild(this.slotToggle);\n }\n\n native.appendChild(span);\n\n if (this.tooltip) {\n let tooltip = document.createElement('wje-tooltip');\n tooltip.setAttribute('content', this.getAttribute('tooltip'));\n tooltip.setAttribute('placement', this.getAttribute('tooltip-placement') || 'top');\n tooltip.appendChild(native);\n\n fragment.appendChild(tooltip);\n } else {\n fragment.appendChild(native);\n }\n\n return fragment;\n }\n\n /**\n * After draw method for the Button element.\n */\n afterDraw() {\n if (this.hasAttribute('route')) {\n this.unbindRouterLinks = bindRouterLinks(this.parentElement, { selector: false });\n }\n\n // nastavenie toggle podla atributu, ak nie je nastaveny, tak sa zobrazi vzdy prvy element\n if (this.hasToggle) {\n if (this.toggle === 'off') {\n this.slotToggle.assignedNodes()[1].classList.add('show');\n this.setAttribute('value', 'off');\n } else {\n this.slotToggle.assignedNodes()[0].classList.add('show');\n this.setAttribute('value', 'on');\n }\n }\n\n if (this.hasAttribute('custom-event')) {\n event.addListener(this, 'click', null, this.#populateCustomEvent);\n }\n\n if (this.hasAttribute('dialog')) {\n event.addListener(this, 'click', null, this.eventDialogOpen);\n } else {\n event.addListener(this, 'click', 'wje-button:click', null); // { stopPropagation: this.stopPropagation } - zrusene kvoli dropdown kde som nevedel odchytit event click\n }\n\n if (this.hasToggle)\n event.addListener(this, 'click', 'wje-button:toggle', this.toggleStates, {\n stopPropagation: this.stopPropagation,\n });\n\n if (this.type === 'submit') {\n event.addListener(this, 'click', 'wje-button:submit', () => {\n event.dispatchCustomEvent(this.internals?.form, 'submit', {});\n });\n }\n\n if (this.type === 'reset') {\n event.addListener(this, 'click', 'wje-button:reset', () => {\n this.internals?.form.reset();\n });\n }\n\n this.syncAria();\n }\n\n /**\n * Before disconnect method for the Button element.\n */\n beforeDisconnect() {\n // remove all events from the button\n event.removeListener(this, 'click', null, this.eventDialogOpen);\n event.removeListener(this, 'click', 'wje-button:click', null);\n event.removeListener(this, 'click', 'wje-button:toggle', this.toggleStates);\n event.removeListener(this, 'click', null, this.#populateCustomEvent);\n event.removeListener(this, 'click', 'wje-button:submit', null);\n event.removeListener(this, 'click', 'wje-button:reset', null);\n\n this.removeEventListener('click', this.eventDialogOpen);\n this.unbindRouterLinks?.();\n }\n\n /**\n * Event dialog open method for the Button element.\n * @param {Event} e The event object\n */\n eventDialogOpen = (e) => {\n event.dispatchCustomEvent(this, this.dialog);\n };\n\n /**\n * Toggle states method for the Button element.\n */\n toggleStates = () => {\n const nodes = this.slotToggle.assignedNodes().filter((node) => node.nodeType === Node.ELEMENT_NODE);\n\n nodes.forEach((node, index) => {\n if (node.classList.contains('show')) {\n node.classList.remove('show');\n } else {\n node.classList.add('show');\n this.setAttribute('value', index === 0 ? 'on' : 'off');\n }\n });\n\n this.syncAria();\n }\n\n /**\n * Syncs ARIA attributes on the host element.\n */\n syncAria() {\n const isLink = this.hasAttribute('href');\n const isToggle = !!this.hasToggle;\n const pressed = isToggle && !isLink ? this.getAttribute('value') === 'on' : undefined;\n\n this.setAriaState({\n role: isLink ? 'link' : 'button',\n disabled: this.disabled,\n pressed,\n });\n }\n\n /**\n * Dispatches a custom event with specified parameters.\n * This method uses the `customEvent` and `customEventParameters` properties\n * to create and dispatch a `CustomEvent`. The event is configured to be\n * composed and bubbles up through the DOM.\n * @returns {void} This method does not return a value.\n */\n #populateCustomEvent() {\n this.dispatchEvent(\n new CustomEvent(this.customEvent, { detail: this.customEventParameters, composed: true, bubbles: true })\n );\n }\n}\n","import Button from './button.element.js';\n\nexport default Button;\n\nButton.define('wje-button', Button);\n"],"names":[],"mappings":"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"}
|
package/dist/wje-menu-item.js
CHANGED
|
@@ -209,11 +209,7 @@ class MenuItem extends WJElement {
|
|
|
209
209
|
}
|
|
210
210
|
});
|
|
211
211
|
__publicField(this, "rebindRouterLinks", (e) => {
|
|
212
|
-
|
|
213
|
-
const container = (_a = e == null ? void 0 : e.detail) == null ? void 0 : _a.container;
|
|
214
|
-
if (!container) return;
|
|
215
|
-
(_b = this.unbindPortalRouterLinks) == null ? void 0 : _b.call(this);
|
|
216
|
-
this.unbindPortalRouterLinks = bindRouterLinks(container, { selector: false });
|
|
212
|
+
this.unbindPortalRouterLinks = bindRouterLinks(e.detail.container, { selector: "[route]" });
|
|
217
213
|
});
|
|
218
214
|
/**
|
|
219
215
|
* Handles the click event on the MenuItem.
|
|
@@ -505,10 +501,7 @@ class MenuItem extends WJElement {
|
|
|
505
501
|
* Adds event listeners after drawing the MenuItem.
|
|
506
502
|
*/
|
|
507
503
|
afterDraw() {
|
|
508
|
-
this.bindRouterLinks();
|
|
509
|
-
if (!this.unbindRouterLinks) {
|
|
510
|
-
queueMicrotask(() => this.bindRouterLinks());
|
|
511
|
-
}
|
|
504
|
+
this.unbindRouterLinks = bindRouterLinks(this.parentElement, { selector: "[route]" });
|
|
512
505
|
document.addEventListener("wje-router:rebind", this.rebindRouterLinks);
|
|
513
506
|
this.addEventListener("mousemove", this.dispatchMove);
|
|
514
507
|
this.addEventListener("wje-popup:reposition", this.dispatchReposition);
|
|
@@ -538,13 +531,6 @@ class MenuItem extends WJElement {
|
|
|
538
531
|
expanded: hasSubmenu ? expanded : void 0
|
|
539
532
|
});
|
|
540
533
|
}
|
|
541
|
-
bindRouterLinks() {
|
|
542
|
-
var _a;
|
|
543
|
-
const parent = this.parentElement;
|
|
544
|
-
if (!parent) return;
|
|
545
|
-
(_a = this.unbindRouterLinks) == null ? void 0 : _a.call(this);
|
|
546
|
-
this.unbindRouterLinks = bindRouterLinks(parent, { selector: false });
|
|
547
|
-
}
|
|
548
534
|
/**
|
|
549
535
|
* Creates a tooltip for the MenuItem when it is collapsed.
|
|
550
536
|
* @param {HTMLElement} native The native MenuItem element.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"wje-menu-item.js","sources":["../packages/wje-menu-item/menu-item.element.js","../packages/wje-menu-item/menu-item.js"],"sourcesContent":["import { bindRouterLinks } from 'slick-router/middlewares/router-links.js';\n\nimport { default as WJElement, event, WjElementUtils } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `MenuItem` is a custom web component that represents a menu item.\n * @summary This element represents a menu item.\n * @documentation https://elements.webjet.sk/components/menu-item\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native part of the menu item.\n * @csspart submenu - The submenu part of the menu item.\n * @slot - The default slot for the menu item.\n * @slot start - The slot for the start of the menu item.\n * @slot end - The slot for the end of the menu item.\n * @slot submenu - The slot for the submenu of the menu item.\n * @cssproperty [--wje-menu-item-color=var(--wje-color)] - Sets the text color of a menu item. Accepts any valid CSS color value.\n * @cssproperty [--wje-menu-item-background=transparent] - Defines the background color of a menu item. Default is `transparent`. Accepts any valid CSS color value.\n * @cssproperty [--wje-menu-item-color-hover=var(--wje-color-contrast-8)] - Specifies the text color of a menu item when hovered. Accepts any valid CSS color value.\n * @cssproperty [--wje-menu-item-background-hover=var(--wje-border-color)] - Sets the background color of a menu item when hovered. Accepts any valid CSS color value.\n * @cssproperty [--wje-menu-item-color-focus=var(--wje-color-contrast-8)] - Defines the text color of a menu item when focused. Accepts any valid CSS color value.\n * @cssproperty [--wje-menu-item-background-focus=var(--wje-border-color)] - Specifies the background color of a menu item when focused. Accepts any valid CSS color value.\n * @cssproperty [--wje-menu-item-color-active=var(--wje-color-contrast-8)] - Sets the text color of a menu item when active. Accepts any valid CSS color value.\n * @cssproperty [--wje-menu-item-background-active=var(--wje-border-color)] - Specifies the background color of a menu item when active. Accepts any valid CSS color value.\n * @cssproperty [--wje-menu-item-padding-top=.5rem] - Specifies the top padding inside a menu item. Accepts any valid CSS length value (e.g., `px`, `rem`).\n * @cssproperty [--wje-menu-item-padding-bottom=.5rem] - Specifies the bottom padding inside a menu item. Accepts any valid CSS length value (e.g., `px`, `rem`).\n * @cssproperty [--wje-menu-item-line-height=1.8rem] - Sets the line height for the text within a menu item. Accepts any valid CSS length value.\n * @cssproperty [--wje-menu-submenu-offset=0] - Determines the horizontal offset of a submenu relative to its parent. Accepts any valid CSS length value.\n * @cssproperty [--wje-menu-item-icon-visibility=hidden] - Controls the visibility of the icon in a menu item. Accepts `visible`, `hidden`, or `collapse`.\n * @cssproperty [--wje-menu-item-safe-triangle-cursor-x] - Specifies the x-coordinate of the cursor for the safe triangle area. Used for managing hover or focus transitions between menu items and submenus.\n * @cssproperty [--wje-menu-item-safe-triangle-cursor-y] - Specifies the y-coordinate of the cursor for the safe triangle area.\n * @cssproperty [--wje-menu-item-safe-triangle-submenu-start-x] - Defines the x-coordinate where the submenu's safe triangle starts. Helps prevent accidental submenu closing when navigating.\n * @cssproperty [--wje-menu-item-safe-triangle-submenu-start-y] - Defines the y-coordinate where the submenu's safe triangle starts.\n * @cssproperty [--wje-menu-item-safe-triangle-submenu-end-x] - Specifies the x-coordinate where the submenu's safe triangle ends.\n * @cssproperty [--wje-menu-item-safe-triangle-submenu-end-y] - Specifies the y-coordinate where the submenu's safe triangle ends.\n * @tag wje-menu-item\n */\nexport default class MenuItem extends WJElement {\n /**\n * Constructor for MenuItem class.\n * @class\n */\n constructor() {\n super();\n\n this._bind = false;\n\n }\n\n /**\n * Getter for placement attribute.\n * @returns {string} The placement attribute of the menu or \"right-start\" if it doesn't exist.\n */\n get placement() {\n let menu = this.querySelector('wje-menu');\n\n if (menu?.hasAttribute('placement')) {\n return menu.getAttribute('placement');\n }\n return 'right-start';\n }\n\n /**\n * Getter for offset attribute.\n * @returns {string} The offset attribute of the menu or \"0\" if it doesn't exist.\n */\n get offset() {\n let menu = this.querySelector('wje-menu');\n\n if (menu?.hasAttribute('offset')) {\n return menu.getAttribute('offset');\n }\n return '0';\n }\n\n /**\n * Getter for variant attribute.\n * @returns {string} The variant attribute of the menu or \"CONTEXT\" if it doesn't exist.\n */\n get variant() {\n let menu = this.querySelector('wje-menu');\n\n if (menu?.hasAttribute('variant') && !this.collapse) {\n return menu.getAttribute('variant').toUpperCase();\n }\n\n return 'CONTEXT';\n }\n\n /**\n * Getter for collapse attribute.\n * @returns {boolean} True if the closest parent has the collapse attribute, false otherwise.\n */\n get collapse() {\n if (this.closest('[collapse]')) return true;\n\n return false;\n }\n\n /**\n * Sets the value of the custom event attribute.\n * @param {string} value The value to be assigned to the custom event attribute.\n */\n set customEvent(value) {\n this.setAttribute('custom-event', value);\n }\n\n /**\n * Retrieves the value of the 'custom-event' attribute from the element.\n * @returns {string | null} The value of the 'custom-event' attribute, or null if the attribute is not set.\n */\n get customEvent() {\n return this.getAttribute('custom-event');\n }\n\n /**\n * Retrieves a mapped object containing custom event parameters extracted from the element's attributes.\n * Attributes considered are those that begin with 'custom-event-'.\n * The mapped object's keys are derived by removing the 'custom-event-' prefix from the attribute names,\n * and the values are the corresponding attribute values.\n * @returns {object} An object containing key-value pairs of custom event parameters.\n */\n get customEventParameters() {\n const attributes = Array.from(this.attributes).filter((attr) => attr.name.startsWith('custom-event-'));\n\n return attributes.reduce((acc, attr) => {\n const key = attr.name.replace('custom-event-', '');\n acc[key] = attr.value;\n\n return acc;\n }, {});\n }\n\n className = 'MenuItem';\n\n /**\n * Getter for cssStyleSheet.\n * @returns {string} The styles imported from styles.css.\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n /**\n * Getter for observedAttributes.\n * @returns {Array} An empty array as no attributes are being observed.\n */\n static get observedAttributes() {\n return [];\n }\n\n /**\n * Sets up the attributes for the MenuItem element.\n */\n setupAttributes() {\n super.setupAttributes();\n this.isShadowRoot = 'open';\n this.syncAria();\n }\n\n /**\n * Removes the active attribute from the menu before drawing the MenuItem.\n */\n beforeDraw() {\n this.querySelector('wje-menu')?.removeAttribute('active');\n }\n\n /**\n * Draws the MenuItem element and sets the variant and collapse attributes.\n * @returns {DocumentFragment} The fragment to be appended to the MenuItem.\n */\n draw() {\n this.hasSubmenu = WjElementUtils.hasSlot(this, 'submenu');\n\n let fragment = document.createDocumentFragment();\n\n this.setAttribute('tabindex', '0');\n\n this.classList.forEach((className) => {\n // Ak trieda začína na \"wje-menu-variant-\", odstráňte ju\n if (className.startsWith('wje-menu-variant-')) {\n this.classList.remove(className);\n }\n });\n\n this.classList.remove('collapse');\n this.classList.add('wje-menu-variant-' + this.variant.toLowerCase());\n\n if (!this.collapse) {\n this.querySelector('wje-menu')?.setAttribute('variant', this.variant.toLowerCase());\n } else if (this.parentElement?.hasAttribute('collapse')) {\n this.classList.add('collapse');\n }\n\n let native = document.createElement('div');\n native.setAttribute('part', 'native');\n native.setAttribute('id', 'anchor');\n native.classList.add('native-menu-item');\n\n // CHECKED - Icon\n let checkedIcon = document.createElement('span');\n checkedIcon.setAttribute('part', 'check');\n checkedIcon.classList.add('check-icon');\n checkedIcon.innerHTML = `<wje-icon name=\"check\"></wje-icon>`;\n\n if (this.hasAttribute('checked')) checkedIcon.classList.add('checked');\n else checkedIcon.classList.remove('checked');\n\n // SLOT - Start\n let start = document.createElement('slot');\n start.name = 'start';\n\n // SLOT\n let slot = document.createElement('slot');\n slot.classList.add('label');\n\n // SLOT - End\n let end = document.createElement('slot');\n end.setAttribute('part', 'end');\n end.name = 'end';\n\n // SLOT - Submenu\n let submenu = document.createElement('slot');\n submenu.setAttribute('part', 'submenu');\n submenu.name = 'submenu';\n\n // SUBMENU - Icon\n let submenuIconClass = this.collapse ? 'collapse' : 'expand';\n let submenuIcon = document.createElement('span');\n submenuIcon.setAttribute('part', 'submenu-icon');\n submenuIcon.classList.add('submenu-icon', submenuIconClass);\n submenuIcon.innerHTML = this.collapse\n ? `<wje-icon name=\"chevron-down\"></wje-icon>`\n : `<wje-icon name=\"chevron-right\"></wje-icon>`;\n\n if (this.hasSubmenu) native.classList.add('has-submenu');\n else native.classList.remove('has-submenu');\n\n native.appendChild(checkedIcon);\n native.appendChild(start);\n native.appendChild(slot);\n native.appendChild(end);\n native.appendChild(submenuIcon);\n\n let isAppend = false;\n // ak je variant typu CONTEXT zobrazime submenu ako popup\n if (this.variant === 'CONTEXT' && this.hasSubmenu) {\n native.setAttribute('slot', 'anchor'); // pridame slot anchor pre popup\n\n let popup = document.createElement('wje-popup');\n popup.setAttribute('anchor', 'anchor');\n popup.setAttribute('placement', this.placement);\n popup.setAttribute('offset', this.offset);\n\n popup.appendChild(native);\n popup.appendChild(submenu);\n\n this.popup = popup;\n fragment.appendChild(popup);\n isAppend = true;\n }\n\n if (this.parentElement?.hasAttribute('collapse') && !this.hasSubmenu) {\n fragment.appendChild(this.collapseItem(native));\n } else if (!isAppend) {\n fragment.appendChild(native);\n }\n\n if ((!this.collapse && this.variant === 'NAV') || (this.variant === 'MEGAMENU' && this.hasSubmenu)) {\n fragment.appendChild(submenu);\n }\n\n this.native = native;\n this.submenu = submenu;\n\n this.syncAria();\n return fragment;\n }\n\n /**\n * Adds event listeners after drawing the MenuItem.\n */\n afterDraw() {\n this.bindRouterLinks();\n if (!this.unbindRouterLinks) {\n queueMicrotask(() => this.bindRouterLinks());\n }\n\n document.addEventListener('wje-router:rebind', this.rebindRouterLinks);\n\n this.addEventListener('mousemove', this.dispatchMove);\n this.addEventListener('wje-popup:reposition', this.dispatchReposition);\n\n // Event na zobrazenie submenu\n event.addListener(this, 'mouseenter', null, this.mouseenterHandler);\n // Event na zrusenie zobrazenia submenu ked sa klikne mimo\n event.addListener(this, 'mouseleave', null, this.shouldHideSubmenu);\n // Event na zrusenie zobrazenia submenu ked sa klikne mimo\n event.addListener(this, 'focusout', null, this.shouldHideSubmenu);\n event.addListener(this, 'click', null, this.clickHandler);\n\n if (this.hasAttribute('custom-event')) {\n event.addListener(this, 'click', null, this.#populateCustomEvent);\n }\n\n if(this.hasAttribute('active-class')) {\n this.addEventListener('click', this.handleActiveClick);\n }\n }\n\n /**\n * Syncs ARIA attributes based on menu item state.\n */\n syncAria() {\n const hasSubmenu = !!this.hasSubmenu;\n const expanded = this.classList.contains('expanded-submenu') || this.native?.classList?.contains('expanded-submenu');\n const disabled = this.hasAttribute('disabled');\n\n this.setAriaState({\n role: 'menuitem',\n disabled,\n haspopup: hasSubmenu ? 'menu' : undefined,\n expanded: hasSubmenu ? expanded : undefined,\n });\n }\n\n mouseenterHandler = (e) => {\n if (this.collapse || (this.variant === 'CONTEXT' && this.hasSubmenu)) {\n if (this.hasAttribute('manual') || (this.variant === 'NAV' && this.collapse)) return;\n\n this.activateSubmenu(e);\n\n e.stopPropagation();\n\n this.showSubmenu();\n }\n };\n\n rebindRouterLinks = (e) => {\n const container = e?.detail?.container;\n if (!container) return;\n\n this.unbindPortalRouterLinks?.();\n this.unbindPortalRouterLinks = bindRouterLinks(container, { selector: false });\n }\n\n bindRouterLinks() {\n const parent = this.parentElement;\n if (!parent) return;\n\n this.unbindRouterLinks?.();\n this.unbindRouterLinks = bindRouterLinks(parent, { selector: false });\n }\n\n /**\n * Handles the click event on the MenuItem.\n * @param {object} e\n */\n clickHandler = (e) => {\n if (this.hasAttribute('disabled')) return;\n switch (this.variant) {\n case 'NAV':\n if (!this.collapse && this.hasSubmenu) {\n this.submenuToggle(e);\n this.hideSubmenu();\n e.stopPropagation();\n } else {\n event.dispatchCustomEvent(this, 'wje-menu-item:click');\n event.dispatchCustomEvent(this, this.dialog);\n }\n break;\n case 'CONTEXT':\n if (!this.collapse && this.hasSubmenu) {\n let submenuElements = this.submenu.assignedElements({ flatten: true })[0];\n if (submenuElements?.hasAttribute('active')) {\n this.shouldHideSubmenu(e);\n } else {\n this.activateSubmenu(e);\n this.showSubmenu(e);\n }\n } else {\n event.dispatchCustomEvent(this, 'wje-menu-item:click');\n event.dispatchCustomEvent(this, this.dialog);\n }\n\n break;\n }\n }\n\n /**\n * Checks if the submenu should be hidden based on the event.\n * @param {Event} e The event object.\n */\n shouldHideSubmenu = (e) => {\n if (this.collapse || (this.variant === 'CONTEXT' && this.hasSubmenu)) {\n if ((e.relatedTarget && this.contains(e.relatedTarget)) || (this.variant === 'NAV' && !this.collapse)) {\n return;\n }\n\n this.deactivateSubmenu();\n this.hideSubmenu();\n }\n };\n\n /**\n * Creates a tooltip for the MenuItem when it is collapsed.\n * @param {HTMLElement} native The native MenuItem element.\n * @returns {HTMLElement} The tooltip element.\n */\n collapseItem(native) {\n let tooltipStart = document.createElement('slot');\n tooltipStart.setAttribute('slot', 'start');\n tooltipStart.setAttribute('name', 'tooltip-start');\n\n let tooltipEnd = document.createElement('slot');\n tooltipEnd.setAttribute('slot', 'end');\n tooltipEnd.setAttribute('name', 'tooltip-end');\n\n let tooltip = document.createElement('wje-tooltip');\n tooltip.setAttribute('content', this.getTextFromElement(this));\n tooltip.setAttribute('placement', 'right');\n tooltip.setAttribute('offset', this.offset || '0');\n\n tooltip.appendChild(tooltipStart);\n tooltip.appendChild(tooltipEnd);\n tooltip.appendChild(native);\n\n return tooltip;\n }\n\n /**\n * Dispatches a mousemove event.\n */\n dispatchMove = (e) => {\n this.style.setProperty('--wje-menu-item-safe-triangle-cursor-x', `${e.clientX}px`);\n this.style.setProperty('--wje-menu-item-safe-triangle-cursor-y', `${e.clientY}px`);\n };\n\n /**\n * Dispatches a reposition event.\n */\n dispatchReposition = (e) => {\n // ak nemame submenu tak to ukoncime\n if (this.submenu.assignedNodes().length === 0) return;\n\n let submenu = this.submenu.assignedNodes()[0];\n const { left, top, width, height } = submenu.getBoundingClientRect();\n\n this.style.setProperty('--wje-menu-item-safe-triangle-submenu-start-x', `${left}px`);\n this.style.setProperty('--wje-menu-item-safe-triangle-submenu-start-y', `${top}px`);\n this.style.setProperty('--wje-menu-item-safe-triangle-submenu-end-x', `${left}px`);\n this.style.setProperty('--wje-menu-item-safe-triangle-submenu-end-y', `${top + height}px`);\n };\n\n /**\n * Shows the submenu of the MenuItem.\n */\n showSubmenu() {\n this.tabIndex = -1;\n if (this.hasSubmenu) {\n this.popup?.show();\n this.classList.add('expanded-submenu');\n this.native.classList.add('expanded-submenu');\n this.syncAria();\n }\n }\n\n /**\n * Hides the submenu of the MenuItem.\n */\n hideSubmenu() {\n this.tabIndex = 0;\n if (this.hasSubmenu) {\n this.popup?.hide();\n this.classList.remove('expanded-submenu');\n this.native.classList.remove('expanded-submenu');\n this.syncAria();\n }\n }\n\n /**\n * Toggles the active state of the submenu element.\n * If the submenu is not active, it sets the \"active\" attribute.\n * If the submenu is already active, it removes the \"active\" attribute.\n * @param {Event} e The event object.\n */\n submenuToggle(e) {\n if (this.hasSubmenu) {\n let submenuElements = this.submenu.assignedElements({ flatten: true })[0];\n if (!submenuElements.hasAttribute('active')) {\n submenuElements.setAttribute('active', '');\n this.syncAria();\n } else {\n if (this === e.target) submenuElements.removeAttribute('active');\n this.syncAria();\n }\n }\n }\n\n /**\n * Deactivates the submenu by removing the \"active\" attribute.\n */\n deactivateSubmenu() {\n if (this.hasSubmenu) {\n let submenuElements = this.submenu.assignedElements({ flatten: true })[0];\n if (submenuElements?.hasAttribute('active')) {\n submenuElements?.removeAttribute('active');\n this.syncAria();\n }\n }\n }\n\n /**\n * Activates the submenu of the menu item.\n */\n activateSubmenu() {\n if (this.hasSubmenu) {\n let submenuElements = this.submenu.assignedElements({ flatten: true })[0];\n if (!submenuElements?.hasAttribute('active')) {\n submenuElements?.setAttribute('active', '');\n this.syncAria();\n }\n }\n }\n\n /**\n * Gets the text from the element and returns it.\n */\n beforeDisconnect() {\n document.removeEventListener('wje-router:rebind', this.rebindRouterLinks);\n\n this.removeEventListener('mousemove', this.dispatchMove);\n this.removeEventListener('wje-popup:reposition', this.dispatchReposition);\n\n event.removeListener(this, 'mouseenter', null, this.mouseenterHandler);\n event.removeListener(this, 'mouseleave', null, this.shouldHideSubmenu);\n event.removeListener(this, 'focusout', null, this.shouldHideSubmenu);\n event.removeListener(this, 'click', null, this.clickHandler);\n\n this.unbindRouterLinks?.();\n this.unbindPortalRouterLinks?.();\n }\n\n /**\n * Extracts and returns the concatenated text content from all text nodes within the specified element.\n * @param {HTMLElement} element The HTML element from which to extract text content.\n * @returns {string} The concatenated and trimmed text content from the element's text nodes.\n */\n getTextFromElement(element) {\n let text = '';\n for (let node of element.childNodes) {\n if (node.nodeType === Node.TEXT_NODE) {\n text += node.textContent;\n }\n }\n return text.trim();\n }\n\n /**\n * Dispatches a custom event with specified parameters.\n * This method uses the `customEvent` and `customEventParameters` properties\n * to create and dispatch a `CustomEvent`. The event is configured to be\n * composed and bubbles up through the DOM.\n * @returns {void} This method does not return a value.\n */\n #populateCustomEvent() {\n this.dispatchEvent(\n new CustomEvent(this.customEvent, { detail: this.customEventParameters, composed: true, bubbles: true })\n );\n }\n\n handleActiveClick = (e) => {\n const target = e.target.closest('wje-menu-item');\n if (!target) return;\n\n let rootMenu = target.closest('wje-menu');\n let currentMenu = rootMenu;\n\n // Nájdite najvyšší rodičovský wje-menu, ktorý obsahuje tento menu-item\n while (currentMenu?.parentElement) {\n const parent = currentMenu.parentElement.closest?.('wje-menu');\n if (!parent) break;\n rootMenu = parent;\n currentMenu = parent;\n }\n\n // Ak je item v portálovanom submenu, pôvodný closest nemusí nájsť root menu.\n // Skúsime ho získať z composedPath a vystúpiť na najvyšší <wje-menu>.\n if (!rootMenu) {\n const path = typeof e.composedPath === 'function' ? e.composedPath() : [];\n let firstMenuInPath = path.find(n => n && n.tagName === 'WJE-MENU');\n if (firstMenuInPath) {\n let top = firstMenuInPath;\n while (top && top.parentElement) {\n const parent = top.parentElement.closest?.('wje-menu');\n if (!parent) break;\n top = parent;\n }\n rootMenu = top;\n }\n }\n\n // Ak stále nemáme rootMenu, nevieme kde aplikovať active-class\n if (!rootMenu) return;\n\n // Odstráň všetky existujúce triedy z predchádzajúcich kliknutí\n rootMenu.querySelectorAll('wje-menu-item').forEach(item => {\n const activeClass = item.getAttribute('active-class');\n if (activeClass) item.classList.remove(activeClass);\n });\n\n // Pridaj active-class všetkým nadradeným menu-itemom vrátane targetu\n let current = target;\n while (current && current.tagName === 'WJE-MENU-ITEM') {\n const activeClass = current.getAttribute('active-class');\n if (activeClass) current.classList.add(activeClass);\n\n // nájdi najbližší parent wje-menu\n const parentMenu = current.closest('wje-menu');\n if (!parentMenu) break;\n\n // pokračuj na menu-item, ktorý má ako submenu tento parentMenu\n const candidate = parentMenu.closest('wje-menu-item');\n if (!candidate) break;\n\n current = candidate;\n }\n }\n}\n","import MenuItem from './menu-item.element.js';\n\nexport default MenuItem;\n\nMenuItem.define('wje-menu-item', MenuItem);\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"wje-menu-item.js","sources":["../packages/wje-menu-item/menu-item.element.js","../packages/wje-menu-item/menu-item.js"],"sourcesContent":["import { bindRouterLinks } from 'slick-router/middlewares/router-links.js';\n\nimport { default as WJElement, event, WjElementUtils } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `MenuItem` is a custom web component that represents a menu item.\n * @summary This element represents a menu item.\n * @documentation https://elements.webjet.sk/components/menu-item\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native part of the menu item.\n * @csspart submenu - The submenu part of the menu item.\n * @slot - The default slot for the menu item.\n * @slot start - The slot for the start of the menu item.\n * @slot end - The slot for the end of the menu item.\n * @slot submenu - The slot for the submenu of the menu item.\n * @cssproperty [--wje-menu-item-color=var(--wje-color)] - Sets the text color of a menu item. Accepts any valid CSS color value.\n * @cssproperty [--wje-menu-item-background=transparent] - Defines the background color of a menu item. Default is `transparent`. Accepts any valid CSS color value.\n * @cssproperty [--wje-menu-item-color-hover=var(--wje-color-contrast-8)] - Specifies the text color of a menu item when hovered. Accepts any valid CSS color value.\n * @cssproperty [--wje-menu-item-background-hover=var(--wje-border-color)] - Sets the background color of a menu item when hovered. Accepts any valid CSS color value.\n * @cssproperty [--wje-menu-item-color-focus=var(--wje-color-contrast-8)] - Defines the text color of a menu item when focused. Accepts any valid CSS color value.\n * @cssproperty [--wje-menu-item-background-focus=var(--wje-border-color)] - Specifies the background color of a menu item when focused. Accepts any valid CSS color value.\n * @cssproperty [--wje-menu-item-color-active=var(--wje-color-contrast-8)] - Sets the text color of a menu item when active. Accepts any valid CSS color value.\n * @cssproperty [--wje-menu-item-background-active=var(--wje-border-color)] - Specifies the background color of a menu item when active. Accepts any valid CSS color value.\n * @cssproperty [--wje-menu-item-padding-top=.5rem] - Specifies the top padding inside a menu item. Accepts any valid CSS length value (e.g., `px`, `rem`).\n * @cssproperty [--wje-menu-item-padding-bottom=.5rem] - Specifies the bottom padding inside a menu item. Accepts any valid CSS length value (e.g., `px`, `rem`).\n * @cssproperty [--wje-menu-item-line-height=1.8rem] - Sets the line height for the text within a menu item. Accepts any valid CSS length value.\n * @cssproperty [--wje-menu-submenu-offset=0] - Determines the horizontal offset of a submenu relative to its parent. Accepts any valid CSS length value.\n * @cssproperty [--wje-menu-item-icon-visibility=hidden] - Controls the visibility of the icon in a menu item. Accepts `visible`, `hidden`, or `collapse`.\n * @cssproperty [--wje-menu-item-safe-triangle-cursor-x] - Specifies the x-coordinate of the cursor for the safe triangle area. Used for managing hover or focus transitions between menu items and submenus.\n * @cssproperty [--wje-menu-item-safe-triangle-cursor-y] - Specifies the y-coordinate of the cursor for the safe triangle area.\n * @cssproperty [--wje-menu-item-safe-triangle-submenu-start-x] - Defines the x-coordinate where the submenu's safe triangle starts. Helps prevent accidental submenu closing when navigating.\n * @cssproperty [--wje-menu-item-safe-triangle-submenu-start-y] - Defines the y-coordinate where the submenu's safe triangle starts.\n * @cssproperty [--wje-menu-item-safe-triangle-submenu-end-x] - Specifies the x-coordinate where the submenu's safe triangle ends.\n * @cssproperty [--wje-menu-item-safe-triangle-submenu-end-y] - Specifies the y-coordinate where the submenu's safe triangle ends.\n * @tag wje-menu-item\n */\nexport default class MenuItem extends WJElement {\n /**\n * Constructor for MenuItem class.\n * @class\n */\n constructor() {\n super();\n\n this._bind = false;\n\n }\n\n /**\n * Getter for placement attribute.\n * @returns {string} The placement attribute of the menu or \"right-start\" if it doesn't exist.\n */\n get placement() {\n let menu = this.querySelector('wje-menu');\n\n if (menu?.hasAttribute('placement')) {\n return menu.getAttribute('placement');\n }\n return 'right-start';\n }\n\n /**\n * Getter for offset attribute.\n * @returns {string} The offset attribute of the menu or \"0\" if it doesn't exist.\n */\n get offset() {\n let menu = this.querySelector('wje-menu');\n\n if (menu?.hasAttribute('offset')) {\n return menu.getAttribute('offset');\n }\n return '0';\n }\n\n /**\n * Getter for variant attribute.\n * @returns {string} The variant attribute of the menu or \"CONTEXT\" if it doesn't exist.\n */\n get variant() {\n let menu = this.querySelector('wje-menu');\n\n if (menu?.hasAttribute('variant') && !this.collapse) {\n return menu.getAttribute('variant').toUpperCase();\n }\n\n return 'CONTEXT';\n }\n\n /**\n * Getter for collapse attribute.\n * @returns {boolean} True if the closest parent has the collapse attribute, false otherwise.\n */\n get collapse() {\n if (this.closest('[collapse]')) return true;\n\n return false;\n }\n\n /**\n * Sets the value of the custom event attribute.\n * @param {string} value The value to be assigned to the custom event attribute.\n */\n set customEvent(value) {\n this.setAttribute('custom-event', value);\n }\n\n /**\n * Retrieves the value of the 'custom-event' attribute from the element.\n * @returns {string | null} The value of the 'custom-event' attribute, or null if the attribute is not set.\n */\n get customEvent() {\n return this.getAttribute('custom-event');\n }\n\n /**\n * Retrieves a mapped object containing custom event parameters extracted from the element's attributes.\n * Attributes considered are those that begin with 'custom-event-'.\n * The mapped object's keys are derived by removing the 'custom-event-' prefix from the attribute names,\n * and the values are the corresponding attribute values.\n * @returns {object} An object containing key-value pairs of custom event parameters.\n */\n get customEventParameters() {\n const attributes = Array.from(this.attributes).filter((attr) => attr.name.startsWith('custom-event-'));\n\n return attributes.reduce((acc, attr) => {\n const key = attr.name.replace('custom-event-', '');\n acc[key] = attr.value;\n\n return acc;\n }, {});\n }\n\n className = 'MenuItem';\n\n /**\n * Getter for cssStyleSheet.\n * @returns {string} The styles imported from styles.css.\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n /**\n * Getter for observedAttributes.\n * @returns {Array} An empty array as no attributes are being observed.\n */\n static get observedAttributes() {\n return [];\n }\n\n /**\n * Sets up the attributes for the MenuItem element.\n */\n setupAttributes() {\n super.setupAttributes();\n this.isShadowRoot = 'open';\n this.syncAria();\n }\n\n /**\n * Removes the active attribute from the menu before drawing the MenuItem.\n */\n beforeDraw() {\n this.querySelector('wje-menu')?.removeAttribute('active');\n }\n\n /**\n * Draws the MenuItem element and sets the variant and collapse attributes.\n * @returns {DocumentFragment} The fragment to be appended to the MenuItem.\n */\n draw() {\n this.hasSubmenu = WjElementUtils.hasSlot(this, 'submenu');\n\n let fragment = document.createDocumentFragment();\n\n this.setAttribute('tabindex', '0');\n\n this.classList.forEach((className) => {\n // Ak trieda začína na \"wje-menu-variant-\", odstráňte ju\n if (className.startsWith('wje-menu-variant-')) {\n this.classList.remove(className);\n }\n });\n\n this.classList.remove('collapse');\n this.classList.add('wje-menu-variant-' + this.variant.toLowerCase());\n\n if (!this.collapse) {\n this.querySelector('wje-menu')?.setAttribute('variant', this.variant.toLowerCase());\n } else if (this.parentElement?.hasAttribute('collapse')) {\n this.classList.add('collapse');\n }\n\n let native = document.createElement('div');\n native.setAttribute('part', 'native');\n native.setAttribute('id', 'anchor');\n native.classList.add('native-menu-item');\n\n // CHECKED - Icon\n let checkedIcon = document.createElement('span');\n checkedIcon.setAttribute('part', 'check');\n checkedIcon.classList.add('check-icon');\n checkedIcon.innerHTML = `<wje-icon name=\"check\"></wje-icon>`;\n\n if (this.hasAttribute('checked')) checkedIcon.classList.add('checked');\n else checkedIcon.classList.remove('checked');\n\n // SLOT - Start\n let start = document.createElement('slot');\n start.name = 'start';\n\n // SLOT\n let slot = document.createElement('slot');\n slot.classList.add('label');\n\n // SLOT - End\n let end = document.createElement('slot');\n end.setAttribute('part', 'end');\n end.name = 'end';\n\n // SLOT - Submenu\n let submenu = document.createElement('slot');\n submenu.setAttribute('part', 'submenu');\n submenu.name = 'submenu';\n\n // SUBMENU - Icon\n let submenuIconClass = this.collapse ? 'collapse' : 'expand';\n let submenuIcon = document.createElement('span');\n submenuIcon.setAttribute('part', 'submenu-icon');\n submenuIcon.classList.add('submenu-icon', submenuIconClass);\n submenuIcon.innerHTML = this.collapse\n ? `<wje-icon name=\"chevron-down\"></wje-icon>`\n : `<wje-icon name=\"chevron-right\"></wje-icon>`;\n\n if (this.hasSubmenu) native.classList.add('has-submenu');\n else native.classList.remove('has-submenu');\n\n native.appendChild(checkedIcon);\n native.appendChild(start);\n native.appendChild(slot);\n native.appendChild(end);\n native.appendChild(submenuIcon);\n\n let isAppend = false;\n // ak je variant typu CONTEXT zobrazime submenu ako popup\n if (this.variant === 'CONTEXT' && this.hasSubmenu) {\n native.setAttribute('slot', 'anchor'); // pridame slot anchor pre popup\n\n let popup = document.createElement('wje-popup');\n popup.setAttribute('anchor', 'anchor');\n popup.setAttribute('placement', this.placement);\n popup.setAttribute('offset', this.offset);\n\n popup.appendChild(native);\n popup.appendChild(submenu);\n\n this.popup = popup;\n fragment.appendChild(popup);\n isAppend = true;\n }\n\n if (this.parentElement?.hasAttribute('collapse') && !this.hasSubmenu) {\n fragment.appendChild(this.collapseItem(native));\n } else if (!isAppend) {\n fragment.appendChild(native);\n }\n\n if ((!this.collapse && this.variant === 'NAV') || (this.variant === 'MEGAMENU' && this.hasSubmenu)) {\n fragment.appendChild(submenu);\n }\n\n this.native = native;\n this.submenu = submenu;\n\n this.syncAria();\n return fragment;\n }\n\n /**\n * Adds event listeners after drawing the MenuItem.\n */\n afterDraw() {\n\n this.unbindRouterLinks = bindRouterLinks(this.parentElement, { selector: '[route]' });\n\n document.addEventListener('wje-router:rebind', this.rebindRouterLinks);\n\n this.addEventListener('mousemove', this.dispatchMove);\n this.addEventListener('wje-popup:reposition', this.dispatchReposition);\n\n // Event na zobrazenie submenu\n event.addListener(this, 'mouseenter', null, this.mouseenterHandler);\n // Event na zrusenie zobrazenia submenu ked sa klikne mimo\n event.addListener(this, 'mouseleave', null, this.shouldHideSubmenu);\n // Event na zrusenie zobrazenia submenu ked sa klikne mimo\n event.addListener(this, 'focusout', null, this.shouldHideSubmenu);\n event.addListener(this, 'click', null, this.clickHandler);\n\n if (this.hasAttribute('custom-event')) {\n event.addListener(this, 'click', null, this.#populateCustomEvent);\n }\n\n if(this.hasAttribute('active-class')) {\n this.addEventListener('click', this.handleActiveClick);\n }\n }\n\n /**\n * Syncs ARIA attributes based on menu item state.\n */\n syncAria() {\n const hasSubmenu = !!this.hasSubmenu;\n const expanded = this.classList.contains('expanded-submenu') || this.native?.classList?.contains('expanded-submenu');\n const disabled = this.hasAttribute('disabled');\n\n this.setAriaState({\n role: 'menuitem',\n disabled,\n haspopup: hasSubmenu ? 'menu' : undefined,\n expanded: hasSubmenu ? expanded : undefined,\n });\n }\n\n mouseenterHandler = (e) => {\n if (this.collapse || (this.variant === 'CONTEXT' && this.hasSubmenu)) {\n if (this.hasAttribute('manual') || (this.variant === 'NAV' && this.collapse)) return;\n\n this.activateSubmenu(e);\n\n e.stopPropagation();\n\n this.showSubmenu();\n }\n };\n\n rebindRouterLinks = (e) => {\n this.unbindPortalRouterLinks = bindRouterLinks(e.detail.container, { selector: '[route]' });\n }\n\n /**\n * Handles the click event on the MenuItem.\n * @param {object} e\n */\n clickHandler = (e) => {\n if (this.hasAttribute('disabled')) return;\n switch (this.variant) {\n case 'NAV':\n if (!this.collapse && this.hasSubmenu) {\n this.submenuToggle(e);\n this.hideSubmenu();\n e.stopPropagation();\n } else {\n event.dispatchCustomEvent(this, 'wje-menu-item:click');\n event.dispatchCustomEvent(this, this.dialog);\n }\n break;\n case 'CONTEXT':\n if (!this.collapse && this.hasSubmenu) {\n let submenuElements = this.submenu.assignedElements({ flatten: true })[0];\n if (submenuElements?.hasAttribute('active')) {\n this.shouldHideSubmenu(e);\n } else {\n this.activateSubmenu(e);\n this.showSubmenu(e);\n }\n } else {\n event.dispatchCustomEvent(this, 'wje-menu-item:click');\n event.dispatchCustomEvent(this, this.dialog);\n }\n\n break;\n }\n }\n\n /**\n * Checks if the submenu should be hidden based on the event.\n * @param {Event} e The event object.\n */\n shouldHideSubmenu = (e) => {\n if (this.collapse || (this.variant === 'CONTEXT' && this.hasSubmenu)) {\n if ((e.relatedTarget && this.contains(e.relatedTarget)) || (this.variant === 'NAV' && !this.collapse)) {\n return;\n }\n\n this.deactivateSubmenu();\n this.hideSubmenu();\n }\n };\n\n /**\n * Creates a tooltip for the MenuItem when it is collapsed.\n * @param {HTMLElement} native The native MenuItem element.\n * @returns {HTMLElement} The tooltip element.\n */\n collapseItem(native) {\n let tooltipStart = document.createElement('slot');\n tooltipStart.setAttribute('slot', 'start');\n tooltipStart.setAttribute('name', 'tooltip-start');\n\n let tooltipEnd = document.createElement('slot');\n tooltipEnd.setAttribute('slot', 'end');\n tooltipEnd.setAttribute('name', 'tooltip-end');\n\n let tooltip = document.createElement('wje-tooltip');\n tooltip.setAttribute('content', this.getTextFromElement(this));\n tooltip.setAttribute('placement', 'right');\n tooltip.setAttribute('offset', this.offset || '0');\n\n tooltip.appendChild(tooltipStart);\n tooltip.appendChild(tooltipEnd);\n tooltip.appendChild(native);\n\n return tooltip;\n }\n\n /**\n * Dispatches a mousemove event.\n */\n dispatchMove = (e) => {\n this.style.setProperty('--wje-menu-item-safe-triangle-cursor-x', `${e.clientX}px`);\n this.style.setProperty('--wje-menu-item-safe-triangle-cursor-y', `${e.clientY}px`);\n };\n\n /**\n * Dispatches a reposition event.\n */\n dispatchReposition = (e) => {\n // ak nemame submenu tak to ukoncime\n if (this.submenu.assignedNodes().length === 0) return;\n\n let submenu = this.submenu.assignedNodes()[0];\n const { left, top, width, height } = submenu.getBoundingClientRect();\n\n this.style.setProperty('--wje-menu-item-safe-triangle-submenu-start-x', `${left}px`);\n this.style.setProperty('--wje-menu-item-safe-triangle-submenu-start-y', `${top}px`);\n this.style.setProperty('--wje-menu-item-safe-triangle-submenu-end-x', `${left}px`);\n this.style.setProperty('--wje-menu-item-safe-triangle-submenu-end-y', `${top + height}px`);\n };\n\n /**\n * Shows the submenu of the MenuItem.\n */\n showSubmenu() {\n this.tabIndex = -1;\n if (this.hasSubmenu) {\n this.popup?.show();\n this.classList.add('expanded-submenu');\n this.native.classList.add('expanded-submenu');\n this.syncAria();\n }\n }\n\n /**\n * Hides the submenu of the MenuItem.\n */\n hideSubmenu() {\n this.tabIndex = 0;\n if (this.hasSubmenu) {\n this.popup?.hide();\n this.classList.remove('expanded-submenu');\n this.native.classList.remove('expanded-submenu');\n this.syncAria();\n }\n }\n\n /**\n * Toggles the active state of the submenu element.\n * If the submenu is not active, it sets the \"active\" attribute.\n * If the submenu is already active, it removes the \"active\" attribute.\n * @param {Event} e The event object.\n */\n submenuToggle(e) {\n if (this.hasSubmenu) {\n let submenuElements = this.submenu.assignedElements({ flatten: true })[0];\n if (!submenuElements.hasAttribute('active')) {\n submenuElements.setAttribute('active', '');\n this.syncAria();\n } else {\n if (this === e.target) submenuElements.removeAttribute('active');\n this.syncAria();\n }\n }\n }\n\n /**\n * Deactivates the submenu by removing the \"active\" attribute.\n */\n deactivateSubmenu() {\n if (this.hasSubmenu) {\n let submenuElements = this.submenu.assignedElements({ flatten: true })[0];\n if (submenuElements?.hasAttribute('active')) {\n submenuElements?.removeAttribute('active');\n this.syncAria();\n }\n }\n }\n\n /**\n * Activates the submenu of the menu item.\n */\n activateSubmenu() {\n if (this.hasSubmenu) {\n let submenuElements = this.submenu.assignedElements({ flatten: true })[0];\n if (!submenuElements?.hasAttribute('active')) {\n submenuElements?.setAttribute('active', '');\n this.syncAria();\n }\n }\n }\n\n /**\n * Gets the text from the element and returns it.\n */\n beforeDisconnect() {\n document.removeEventListener('wje-router:rebind', this.rebindRouterLinks);\n\n this.removeEventListener('mousemove', this.dispatchMove);\n this.removeEventListener('wje-popup:reposition', this.dispatchReposition);\n\n event.removeListener(this, 'mouseenter', null, this.mouseenterHandler);\n event.removeListener(this, 'mouseleave', null, this.shouldHideSubmenu);\n event.removeListener(this, 'focusout', null, this.shouldHideSubmenu);\n event.removeListener(this, 'click', null, this.clickHandler);\n\n this.unbindRouterLinks?.();\n this.unbindPortalRouterLinks?.();\n }\n\n /**\n * Extracts and returns the concatenated text content from all text nodes within the specified element.\n * @param {HTMLElement} element The HTML element from which to extract text content.\n * @returns {string} The concatenated and trimmed text content from the element's text nodes.\n */\n getTextFromElement(element) {\n let text = '';\n for (let node of element.childNodes) {\n if (node.nodeType === Node.TEXT_NODE) {\n text += node.textContent;\n }\n }\n return text.trim();\n }\n\n /**\n * Dispatches a custom event with specified parameters.\n * This method uses the `customEvent` and `customEventParameters` properties\n * to create and dispatch a `CustomEvent`. The event is configured to be\n * composed and bubbles up through the DOM.\n * @returns {void} This method does not return a value.\n */\n #populateCustomEvent() {\n this.dispatchEvent(\n new CustomEvent(this.customEvent, { detail: this.customEventParameters, composed: true, bubbles: true })\n );\n }\n\n handleActiveClick = (e) => {\n const target = e.target.closest('wje-menu-item');\n if (!target) return;\n\n let rootMenu = target.closest('wje-menu');\n let currentMenu = rootMenu;\n\n // Nájdite najvyšší rodičovský wje-menu, ktorý obsahuje tento menu-item\n while (currentMenu?.parentElement) {\n const parent = currentMenu.parentElement.closest?.('wje-menu');\n if (!parent) break;\n rootMenu = parent;\n currentMenu = parent;\n }\n\n // Ak je item v portálovanom submenu, pôvodný closest nemusí nájsť root menu.\n // Skúsime ho získať z composedPath a vystúpiť na najvyšší <wje-menu>.\n if (!rootMenu) {\n const path = typeof e.composedPath === 'function' ? e.composedPath() : [];\n let firstMenuInPath = path.find(n => n && n.tagName === 'WJE-MENU');\n if (firstMenuInPath) {\n let top = firstMenuInPath;\n while (top && top.parentElement) {\n const parent = top.parentElement.closest?.('wje-menu');\n if (!parent) break;\n top = parent;\n }\n rootMenu = top;\n }\n }\n\n // Ak stále nemáme rootMenu, nevieme kde aplikovať active-class\n if (!rootMenu) return;\n\n // Odstráň všetky existujúce triedy z predchádzajúcich kliknutí\n rootMenu.querySelectorAll('wje-menu-item').forEach(item => {\n const activeClass = item.getAttribute('active-class');\n if (activeClass) item.classList.remove(activeClass);\n });\n\n // Pridaj active-class všetkým nadradeným menu-itemom vrátane targetu\n let current = target;\n while (current && current.tagName === 'WJE-MENU-ITEM') {\n const activeClass = current.getAttribute('active-class');\n if (activeClass) current.classList.add(activeClass);\n\n // nájdi najbližší parent wje-menu\n const parentMenu = current.closest('wje-menu');\n if (!parentMenu) break;\n\n // pokračuj na menu-item, ktorý má ako submenu tento parentMenu\n const candidate = parentMenu.closest('wje-menu-item');\n if (!candidate) break;\n\n current = candidate;\n }\n }\n}\n","import MenuItem from './menu-item.element.js';\n\nexport default MenuItem;\n\nMenuItem.define('wje-menu-item', MenuItem);\n"],"names":[],"mappings":"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"}
|
package/dist/wje-router-link.js
CHANGED
|
@@ -47,17 +47,7 @@ class RouterLink extends WJElement {
|
|
|
47
47
|
return fragment;
|
|
48
48
|
}
|
|
49
49
|
afterDraw(context, appStore, attributes) {
|
|
50
|
-
this.bindRouterLinks();
|
|
51
|
-
if (!this.unbindRouterLinks) {
|
|
52
|
-
queueMicrotask(() => this.bindRouterLinks());
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
bindRouterLinks() {
|
|
56
|
-
var _a;
|
|
57
|
-
const parent = this.parentElement;
|
|
58
|
-
if (!parent) return;
|
|
59
|
-
(_a = this.unbindRouterLinks) == null ? void 0 : _a.call(this);
|
|
60
|
-
this.unbindRouterLinks = bindRouterLinks(parent, { selector: false });
|
|
50
|
+
this.unbindRouterLinks = bindRouterLinks(this.parentElement, { selector: false });
|
|
61
51
|
}
|
|
62
52
|
/**
|
|
63
53
|
* Cleans up before the component is disconnected.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"wje-router-link.js","sources":["../packages/wje-router-link/router-link.element.js","../packages/wje-router-link/router-link.js"],"sourcesContent":["import { bindRouterLinks } from 'slick-router/middlewares/router-links.js';\n\nimport { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `RouterLink` is a custom web component that represents a router link in a routing system.\n * @summary This element represents a router link in a routing system.\n * @documentation https://elements.webjet.sk/components/router-link\n * @status stable\n * @augments {WJElement}\n * @slot - The default slot for the router link.\n * @tag wje-router-link\n */\nexport default class RouterLink extends WJElement {\n /**\n * Creates an instance of RouterLink.\n * @class\n */\n constructor() {\n super();\n }\n\n className = 'RouterLink';\n\n /**\n * Returns the CSS styles for the component.\n * @static\n * @returns {CSSStyleSheet}\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n /**\n * Returns the list of attributes to observe for changes.\n * @static\n * @returns {Array<string>}\n */\n static get observedAttributes() {\n return [];\n }\n\n /**\n * Sets up the attributes for the component.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n this.setAttribute('active-class', 'active');\n }\n\n /**\n * Draws the component for the router link.\n * @returns {DocumentFragment}\n */\n draw() {\n let fragment = document.createDocumentFragment();\n\n let element = document.createElement('slot');\n\n fragment.appendChild(element);\n\n return fragment;\n }\n\n afterDraw(context, appStore, attributes) {\n this.
|
|
1
|
+
{"version":3,"file":"wje-router-link.js","sources":["../packages/wje-router-link/router-link.element.js","../packages/wje-router-link/router-link.js"],"sourcesContent":["import { bindRouterLinks } from 'slick-router/middlewares/router-links.js';\n\nimport { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `RouterLink` is a custom web component that represents a router link in a routing system.\n * @summary This element represents a router link in a routing system.\n * @documentation https://elements.webjet.sk/components/router-link\n * @status stable\n * @augments {WJElement}\n * @slot - The default slot for the router link.\n * @tag wje-router-link\n */\nexport default class RouterLink extends WJElement {\n /**\n * Creates an instance of RouterLink.\n * @class\n */\n constructor() {\n super();\n }\n\n className = 'RouterLink';\n\n /**\n * Returns the CSS styles for the component.\n * @static\n * @returns {CSSStyleSheet}\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n /**\n * Returns the list of attributes to observe for changes.\n * @static\n * @returns {Array<string>}\n */\n static get observedAttributes() {\n return [];\n }\n\n /**\n * Sets up the attributes for the component.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n this.setAttribute('active-class', 'active');\n }\n\n /**\n * Draws the component for the router link.\n * @returns {DocumentFragment}\n */\n draw() {\n let fragment = document.createDocumentFragment();\n\n let element = document.createElement('slot');\n\n fragment.appendChild(element);\n\n return fragment;\n }\n\n afterDraw(context, appStore, attributes) {\n this.unbindRouterLinks = bindRouterLinks(this.parentElement, { selector: false });\n }\n\n /**\n * Cleans up before the component is disconnected.\n */\n beforeDisconnect() {\n this.unbindRouterLinks?.();\n }\n}\n","import RouterLink from './router-link.element.js';\n\nexport default RouterLink;\n\nRouterLink.define('wje-router-link', RouterLink);\n"],"names":[],"mappings":";;;;;;AAce,MAAM,mBAAmB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAK9C,cAAc;AACV,UAAK;AAGT,qCAAY;AAAA,EAFZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,WAAW,qBAAqB;AAC5B,WAAO,CAAA;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB;AACd,SAAK,eAAe;AACpB,SAAK,aAAa,gBAAgB,QAAQ;AAAA,EAC9C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO;AACH,QAAI,WAAW,SAAS,uBAAsB;AAE9C,QAAI,UAAU,SAAS,cAAc,MAAM;AAE3C,aAAS,YAAY,OAAO;AAE5B,WAAO;AAAA,EACX;AAAA,EAEA,UAAU,SAAS,UAAU,YAAY;AACrC,SAAK,oBAAoB,gBAAgB,KAAK,eAAe,EAAE,UAAU,OAAO;AAAA,EACpF;AAAA;AAAA;AAAA;AAAA,EAKA,mBAAmB;;AACf,eAAK,sBAAL;AAAA,EACJ;AACJ;ACvEA,WAAW,OAAO,mBAAmB,UAAU;"}
|
package/dist/wje-tab.js
CHANGED
|
@@ -195,21 +195,11 @@ class Tab extends WJElement {
|
|
|
195
195
|
*/
|
|
196
196
|
afterDraw() {
|
|
197
197
|
var _a;
|
|
198
|
-
this.bindRouterLinks();
|
|
199
|
-
if (!this.unbindRouterLinks) {
|
|
200
|
-
queueMicrotask(() => this.bindRouterLinks());
|
|
201
|
-
}
|
|
198
|
+
this.unbindRouterLinks = bindRouterLinks(this.parentElement, { selector: false });
|
|
202
199
|
event.addListener(this, "click", "wje-tab:change");
|
|
203
200
|
this.syncAriaLabel();
|
|
204
201
|
(_a = this.slotEl) == null ? void 0 : _a.addEventListener("slotchange", () => this.syncAriaLabel());
|
|
205
202
|
}
|
|
206
|
-
bindRouterLinks() {
|
|
207
|
-
var _a;
|
|
208
|
-
const parent = this.parentElement;
|
|
209
|
-
if (!parent) return;
|
|
210
|
-
(_a = this.unbindRouterLinks) == null ? void 0 : _a.call(this);
|
|
211
|
-
this.unbindRouterLinks = bindRouterLinks(parent, { selector: false });
|
|
212
|
-
}
|
|
213
203
|
/**
|
|
214
204
|
* Sync aria-label on host based on slotted text when not provided.
|
|
215
205
|
*/
|
package/dist/wje-tab.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"wje-tab.js","sources":["../packages/wje-tab/tab.element.js","../packages/wje-tab/tab.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport { bindRouterLinks } from 'slick-router/middlewares/router-links.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Tab` is a custom web component that represents a tab.\n * @summary This element represents a tab.\n * @documentation https://elements.webjet.sk/components/tab\n * @status stable\n * @augments {WJElement}\n * @param {string} panel The name of the tab panel. This is used to identify the corresponding tab panel.\n * @param {string} route The route to navigate to when the tab is clicked.\n * @cssproperty [--wje-tab-text-transform=uppercase] - The text transformation for the tab (e.g., uppercase, lowercase).\n * @cssproperty [--wje-tab-font-weight=500] - The font weight of the tab text.\n * @cssproperty [--wje-tab-letter-spacing=0.06em] - The letter spacing of the tab text.\n * @cssproperty [--wje-tab-padding-inline=1rem] - The horizontal padding of the tab.\n * @cssproperty [--wje-tab-padding-top=.75rem] - The top padding of the tab text.\n * @cssproperty [--wje-tab-padding-bottom=.75rem] - The bottom padding of the tab text.\n * @cssproperty [--wje-tab-color-active=var(--wje-color-primary-11)] - The text color of the active tab.\n * @cssproperty [--wje-tab-color-hover=var(--wje-color-primary-1)] - The text color of the tab when hovered.\n * //@fires wje-tab:change - Dispatched when the tab is changed.\n * @tag wje-tab\n */\nexport default class Tab extends WJElement {\n /**\n * Creates an instance of Tab.\n */\n constructor() {\n super();\n\n /**\n * Indicates whether this is the last tab.\n * @type {boolean}\n */\n this.last = false;\n this._hasPanel = false;\n }\n\n /**\n * Sets the panel attribute to the specified value.\n * @param {string} value The value to set for the panel attribute.\n */\n set panel(value) {\n this.setAttribute('panel', value);\n }\n\n /**\n * Retrieves the value of the 'panel' attribute of the element.\n * @returns {string|null} Returns the 'panel' attribute value if it exists; otherwise, returns null.\n */\n get panel() {\n return this.getAttribute('panel') || null;\n }\n\n /**\n * Sets the value of the 'route' attribute for the current object.\n * @param {string} value The new value to set for the 'route' attribute.\n */\n set route(value) {\n this.setAttribute('route', value);\n }\n\n /**\n * Retrieves the value of the 'route' attribute.\n * If the 'route' attribute is not set, it returns null.\n * @returns {string|null} The value of the 'route' attribute or null if not set.\n */\n get route() {\n return this.getAttribute('route') || null;\n }\n\n /**\n * The class name for the component.\n */\n className = 'Tab';\n\n /**\n * Returns the CSS styles for the component.\n * @static\n * @returns {CSSStyleSheet}\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n /**\n * Sets up the attributes for the component.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n this.setAttribute('active-class', 'active');\n\n this.setAriaState({\n role: 'tab',\n selected: false,\n disabled: this.hasAttribute('disabled'),\n });\n }\n /**\n * Draws the component for the tab.\n * @returns {DocumentFragment}\n */\n draw() {\n let fragment = document.createDocumentFragment();\n\n let slot = document.createElement('slot');\n\n let href = this.panel || this.route || \"#\";\n\n let a = document.createElement('a');\n a.setAttribute('href', (this.panel ? \"#\" : \"\") + href);\n a.setAttribute('part', 'native');\n a.classList.add('native-tab');\n a.appendChild(slot);\n\n fragment.appendChild(a);\n\n this.slotEl = slot;\n\n return fragment;\n }\n\n /**\n * Sets up event listeners after the component is rendered.\n * // @fires wje-tab:change - Dispatched when the component is clicked, indicating a tab change.\n */\n afterDraw() {\n this.bindRouterLinks(
|
|
1
|
+
{"version":3,"file":"wje-tab.js","sources":["../packages/wje-tab/tab.element.js","../packages/wje-tab/tab.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport { bindRouterLinks } from 'slick-router/middlewares/router-links.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Tab` is a custom web component that represents a tab.\n * @summary This element represents a tab.\n * @documentation https://elements.webjet.sk/components/tab\n * @status stable\n * @augments {WJElement}\n * @param {string} panel The name of the tab panel. This is used to identify the corresponding tab panel.\n * @param {string} route The route to navigate to when the tab is clicked.\n * @cssproperty [--wje-tab-text-transform=uppercase] - The text transformation for the tab (e.g., uppercase, lowercase).\n * @cssproperty [--wje-tab-font-weight=500] - The font weight of the tab text.\n * @cssproperty [--wje-tab-letter-spacing=0.06em] - The letter spacing of the tab text.\n * @cssproperty [--wje-tab-padding-inline=1rem] - The horizontal padding of the tab.\n * @cssproperty [--wje-tab-padding-top=.75rem] - The top padding of the tab text.\n * @cssproperty [--wje-tab-padding-bottom=.75rem] - The bottom padding of the tab text.\n * @cssproperty [--wje-tab-color-active=var(--wje-color-primary-11)] - The text color of the active tab.\n * @cssproperty [--wje-tab-color-hover=var(--wje-color-primary-1)] - The text color of the tab when hovered.\n * //@fires wje-tab:change - Dispatched when the tab is changed.\n * @tag wje-tab\n */\nexport default class Tab extends WJElement {\n /**\n * Creates an instance of Tab.\n */\n constructor() {\n super();\n\n /**\n * Indicates whether this is the last tab.\n * @type {boolean}\n */\n this.last = false;\n this._hasPanel = false;\n }\n\n /**\n * Sets the panel attribute to the specified value.\n * @param {string} value The value to set for the panel attribute.\n */\n set panel(value) {\n this.setAttribute('panel', value);\n }\n\n /**\n * Retrieves the value of the 'panel' attribute of the element.\n * @returns {string|null} Returns the 'panel' attribute value if it exists; otherwise, returns null.\n */\n get panel() {\n return this.getAttribute('panel') || null;\n }\n\n /**\n * Sets the value of the 'route' attribute for the current object.\n * @param {string} value The new value to set for the 'route' attribute.\n */\n set route(value) {\n this.setAttribute('route', value);\n }\n\n /**\n * Retrieves the value of the 'route' attribute.\n * If the 'route' attribute is not set, it returns null.\n * @returns {string|null} The value of the 'route' attribute or null if not set.\n */\n get route() {\n return this.getAttribute('route') || null;\n }\n\n /**\n * The class name for the component.\n */\n className = 'Tab';\n\n /**\n * Returns the CSS styles for the component.\n * @static\n * @returns {CSSStyleSheet}\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n /**\n * Sets up the attributes for the component.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n this.setAttribute('active-class', 'active');\n\n this.setAriaState({\n role: 'tab',\n selected: false,\n disabled: this.hasAttribute('disabled'),\n });\n }\n\n\n /**\n * Draws the component for the tab.\n * @returns {DocumentFragment}\n */\n draw() {\n let fragment = document.createDocumentFragment();\n\n let slot = document.createElement('slot');\n\n let href = this.panel || this.route || \"#\";\n\n let a = document.createElement('a');\n a.setAttribute('href', (this.panel ? \"#\" : \"\") + href);\n a.setAttribute('part', 'native');\n a.classList.add('native-tab');\n a.appendChild(slot);\n\n fragment.appendChild(a);\n\n this.slotEl = slot;\n\n return fragment;\n }\n\n /**\n * Sets up event listeners after the component is rendered.\n * // @fires wje-tab:change - Dispatched when the component is clicked, indicating a tab change.\n */\n afterDraw() {\n this.unbindRouterLinks = bindRouterLinks(this.parentElement, { selector: false });\n event.addListener(this, 'click', 'wje-tab:change');\n this.syncAriaLabel();\n this.slotEl?.addEventListener('slotchange', () => this.syncAriaLabel());\n }\n\n /**\n * Sync aria-label on host based on slotted text when not provided.\n */\n syncAriaLabel() {\n if (this.hasAttribute('aria-label') || this.hasAttribute('aria-labelledby')) return;\n const text = (this.slotEl?.assignedNodes({ flatten: true }) || [])\n .map((node) => node.textContent || '')\n .join('')\n .trim();\n if (text) {\n this.setAttribute('aria-label', text);\n }\n }\n\n /**\n * Sets the roving tabindex on the internal focusable anchor.\n * @param {number} value\n */\n setRovingTabIndex(value) {\n const anchor = this.context?.querySelector('a');\n if (!anchor) return;\n anchor.setAttribute('tabindex', String(value));\n }\n\n /**\n * Cleans up before the component is disconnected.\n */\n beforeDisconnect() {\n this.unbindRouterLinks?.();\n }\n}\n","import Tab from './tab.element.js';\n\nexport default Tab;\n\nTab.define('wje-tab', Tab);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBe,MAAM,YAAY,UAAU;AAAA;AAAA;AAAA;AAAA,EAIvC,cAAc;AACV,UAAK;AA8CT;AAAA;AAAA;AAAA,qCAAY;AAxCR,SAAK,OAAO;AACZ,SAAK,YAAY;AAAA,EACrB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,MAAM,OAAO;AACb,SAAK,aAAa,SAAS,KAAK;AAAA,EACpC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,QAAQ;AACR,WAAO,KAAK,aAAa,OAAO,KAAK;AAAA,EACzC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,MAAM,OAAO;AACb,SAAK,aAAa,SAAS,KAAK;AAAA,EACpC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,IAAI,QAAQ;AACR,WAAO,KAAK,aAAa,OAAO,KAAK;AAAA,EACzC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYA,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB;AACd,SAAK,eAAe;AACpB,SAAK,aAAa,gBAAgB,QAAQ;AAE1C,SAAK,aAAa;AAAA,MACd,MAAM;AAAA,MACN,UAAU;AAAA,MACV,UAAU,KAAK,aAAa,UAAU;AAAA,IAClD,CAAS;AAAA,EACL;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,OAAO;AACH,QAAI,WAAW,SAAS,uBAAsB;AAE9C,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,QAAI,OAAO,KAAK,SAAS,KAAK,SAAS;AAEvC,QAAI,IAAI,SAAS,cAAc,GAAG;AAClC,MAAE,aAAa,SAAS,KAAK,QAAQ,MAAM,MAAM,IAAI;AACrD,MAAE,aAAa,QAAQ,QAAQ;AAC/B,MAAE,UAAU,IAAI,YAAY;AAC5B,MAAE,YAAY,IAAI;AAElB,aAAS,YAAY,CAAC;AAEtB,SAAK,SAAS;AAEd,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,YAAY;;AACR,SAAK,oBAAoB,gBAAgB,KAAK,eAAe,EAAE,UAAU,OAAO;AAChF,UAAM,YAAY,MAAM,SAAS,gBAAgB;AACjD,SAAK,cAAa;AAClB,eAAK,WAAL,mBAAa,iBAAiB,cAAc,MAAM,KAAK;EAC3D;AAAA;AAAA;AAAA;AAAA,EAKA,gBAAgB;;AACZ,QAAI,KAAK,aAAa,YAAY,KAAK,KAAK,aAAa,iBAAiB,EAAG;AAC7E,UAAM,UAAQ,UAAK,WAAL,mBAAa,cAAc,EAAE,SAAS,KAAI,OAAO,CAAA,GAC1D,IAAI,CAAC,SAAS,KAAK,eAAe,EAAE,EACpC,KAAK,EAAE,EACP,KAAI;AACT,QAAI,MAAM;AACN,WAAK,aAAa,cAAc,IAAI;AAAA,IACxC;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,kBAAkB,OAAO;;AACrB,UAAM,UAAS,UAAK,YAAL,mBAAc,cAAc;AAC3C,QAAI,CAAC,OAAQ;AACb,WAAO,aAAa,YAAY,OAAO,KAAK,CAAC;AAAA,EACjD;AAAA;AAAA;AAAA;AAAA,EAKA,mBAAmB;;AACf,eAAK,sBAAL;AAAA,EACJ;AACJ;ACjKA,IAAI,OAAO,WAAW,GAAG;"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "wj-elements",
|
|
3
3
|
"description": "WebJET Elements is a modern set of user interface tools harnessing the power of web components designed to simplify web application development.",
|
|
4
|
-
"version": "0.3.
|
|
4
|
+
"version": "0.3.5",
|
|
5
5
|
"homepage": "https://github.com/lencys/wj-elements",
|
|
6
6
|
"author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
|
|
7
7
|
"license": "MIT",
|
|
@@ -104,11 +104,11 @@
|
|
|
104
104
|
},
|
|
105
105
|
"devDependencies": {
|
|
106
106
|
"@babel/eslint-parser": "^7.26.5",
|
|
107
|
-
"@crowdin/cli": "^
|
|
107
|
+
"@crowdin/cli": "^4.14.0",
|
|
108
108
|
"@custom-elements-manifest/analyzer": "^0.9.3",
|
|
109
|
-
"@docusaurus/core": "^3.
|
|
109
|
+
"@docusaurus/core": "^3.5.2",
|
|
110
110
|
"@docusaurus/mdx-loader": "^3.8.0",
|
|
111
|
-
"@docusaurus/plugin-client-redirects": "^3.
|
|
111
|
+
"@docusaurus/plugin-client-redirects": "^3.5.2",
|
|
112
112
|
"@eslint/js": "^9.13.0",
|
|
113
113
|
"@faker-js/faker": "^8.0.0",
|
|
114
114
|
"@open-wc/semantic-dom-diff": "^0.20.1",
|
|
@@ -132,7 +132,7 @@
|
|
|
132
132
|
"prettier": "^3.3.3",
|
|
133
133
|
"rollup-plugin-dts": "^6.1.1",
|
|
134
134
|
"sass": "^1.83.0",
|
|
135
|
-
"sinon": "^
|
|
135
|
+
"sinon": "^21.0.2",
|
|
136
136
|
"typescript": "^5.8.2",
|
|
137
137
|
"vite": "^6.4.1",
|
|
138
138
|
"vite-plugin-dts": "^4.5.0",
|