wj-elements 0.4.5 → 0.4.6
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-breadcrumbs/breadcrumbs.element.d.ts +59 -0
- package/dist/packages/wje-toolbar/toolbar.element.d.ts +96 -0
- package/dist/packages/wje-toolbar-action/toolbar-action.element.d.ts +143 -0
- package/dist/wje-breadcrumb.js +2 -2
- package/dist/wje-breadcrumb.js.map +1 -1
- package/dist/wje-breadcrumbs.js +146 -17
- package/dist/wje-breadcrumbs.js.map +1 -1
- package/dist/wje-menu-item.js +3 -1
- package/dist/wje-menu-item.js.map +1 -1
- package/dist/wje-toolbar-action.js +367 -11
- package/dist/wje-toolbar-action.js.map +1 -1
- package/dist/wje-toolbar.js +259 -1
- package/dist/wje-toolbar.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"wje-breadcrumbs.js","sources":["../packages/wje-breadcrumbs/breadcrumbs.element.js","../packages/wje-breadcrumbs/breadcrumbs.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents a Breadcrumbs container, extending the WJElement class. It acts as a wrapper for individual breadcrumb elements and manages their behavior, such as collapsing and marking the last breadcrumb.\n * @documentation https://elements.webjet.sk/components/breadcrumbs\n * @status stable\n * @augments WJElement\n * @slot - The container for breadcrumb elements.\n * @csspart container - The component's container wrapper.\n * @attribute {number} max-items - The maximum number of visible breadcrumbs before collapsing.\n * @attribute {number} items-before-collapse - The number of breadcrumbs to show before the collapsed indicator.\n * @attribute {number} items-after-collapse - The number of breadcrumbs to show after the collapsed indicator.\n * @tag wje-breadcrumbs\n * @example\n * <!-- Example usage -->\n * <wje-breadcrumbs max-items=\"5\" items-before-collapse=\"2\" items-after-collapse=\"2\">\n * <wje-breadcrumb>Home</wje-breadcrumb>\n * <wje-breadcrumb>About</wje-breadcrumb>\n * <wje-breadcrumb>Services</wje-breadcrumb>\n * <wje-breadcrumb>Portfolio</wje-breadcrumb>\n * <wje-breadcrumb>Contact</wje-breadcrumb>\n * </wje-breadcrumbs>\n *\n * <!-- Output: Only the first two and last two breadcrumbs will be visible, with a collapsed indicator in the middle -->\n */\n\nexport default class Breadcrumbs extends WJElement {\n /**\n * Breadcrumbs constructor method.\n * @class\n */\n constructor() {\n super();\n\n /**\n * Last breadcrumb flag\n * @type {boolean}\n */\n this.last = false;\n }\n\n /**\n * Set variant attribute for the Breadcrumbs element.\n * @param value\n */\n set variant(value) {\n this.setAttribute('variant', value);\n }\n\n /**\n * Get variant attribute for the Breadcrumbs element.\n * @returns {string}\n */\n get variant() {\n return this.getAttribute('variant') || 'button';\n }\n\n /**\n * Get items before collapse attribute.\n * @param {string} value\n */\n set maxItems(value) {\n this.setAttribute('max-items', value || 0);\n }\n\n /**\n * Get items before collapse attribute.\n * @returns {number}\n */\n get maxItems() {\n return +this.getAttribute('max-items' || 0);\n }\n\n /**\n * Get items before collapse attribute.\n * @param value\n */\n set itemsBeforeCollapse(value) {\n this.setAttribute('items-before-collapse', value || 1);\n }\n\n /**\n * Get items before collapse attribute.\n * @returns {number}\n */\n get itemsBeforeCollapse() {\n return +this.getAttribute('items-before-collapse') || 1;\n }\n\n /**\n * Get items after collapse attribute.\n * @param value\n */\n set itemsAfterCollapse(value) {\n this.setAttribute('items-after-collapse', value || 1);\n }\n\n /**\n * Get items after collapse attribute.\n * @returns {number}\n */\n get itemsAfterCollapse() {\n return +this.getAttribute('items-after-collapse') || 1;\n }\n\n /**\n * Class name for the Breadcrumbs element.\n * @type {string}\n */\n className = 'Breadcrumbs';\n\n /**\n * Get CSS stylesheet for the Breadcrumbs element.\n * @static\n * @returns {object} styles - The CSS styles\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n /**\n * Get observed attributes for the Breadcrumb element.\n * @static\n * @returns {Array<string>} - The observed attributes array for the Breadcrumb element.\n */\n static get observedAttributes() {\n return [];\n }\n\n /**\n * Setup attributes for the Breadcrumbs element.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n this.setAriaState({ role: 'navigation' });\n }\n\n /**\n * Draw method for the Breadcrumbs element.\n * @returns {object} fragment - The document fragment\n */\n draw() {\n let fragment = document.createDocumentFragment();\n\n let element = document.createElement('slot');\n\n fragment.appendChild(element);\n\n return fragment;\n }\n\n /**\n * Updates the breadcrumb elements after they are drawn on the page.\n * It manages attributes on breadcrumb items and handles the logic for collapsing breadcrumbs\n * if the total exceeds the specified maximum items.\n * @returns {void} This method does not return a value.\n */\n afterDraw() {\n let breadcrumbs = this.getBreadcrumbs();\n\n if (breadcrumbs.length === 0) return;\n\n let breadcrumb = breadcrumbs.findLast((e) => e);\n\n breadcrumb.setAttribute('last', true);\n\n const shouldCollapse =\n this.maxItems !== undefined &&\n breadcrumbs.length > this.maxItems &&\n this.itemsBeforeCollapse + this.itemsAfterCollapse <= this.maxItems;\n\n if (shouldCollapse) {\n breadcrumbs.forEach((b, index) => {\n if (index === this.itemsBeforeCollapse) {\n b.setAttribute('show-collapsed-indicator', true);\n }\n\n if (index >= this.itemsBeforeCollapse && index < breadcrumbs.length - this.itemsAfterCollapse) {\n b.setAttribute('collapsed', true);\n }\n });\n }\n }\n\n /**\n * Retrieves all breadcrumb elements within the current instance.\n * @returns {Array<Element>} An array of breadcrumb elements (`wje-breadcrumb`) found within the instance. Returns an empty array if no breadcrumbs are found.\n */\n getBreadcrumbs() {\n return Array.from(this.querySelectorAll('wje-breadcrumb')) || [];\n }\n\n /**\n * Retrieves all breadcrumb elements that have the 'collapsed' attribute.\n * @returns {Array<Element>} An array of DOM elements representing breadcrumbs with the 'collapsed' attribute.\n */\n getBreadcrumbsCollapsed() {\n return Array.from(this.querySelectorAll('wje-breadcrumb[collapsed]')) || [];\n }\n}\n","import Breadcrumbs from './breadcrumbs.element.js';\n\nexport default Breadcrumbs;\n\nBreadcrumbs.define('wje-breadcrumbs', Breadcrumbs);\n"],"names":[],"mappings":";;;;;AA2Be,MAAM,oBAAoB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAK/C,cAAc;AACV,UAAK;AA6ET;AAAA;AAAA;AAAA;AAAA,qCAAY;AAvER,SAAK,OAAO;AAAA,EAChB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,QAAQ,OAAO;AACf,SAAK,aAAa,WAAW,KAAK;AAAA,EACtC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,UAAU;AACV,WAAO,KAAK,aAAa,SAAS,KAAK;AAAA,EAC3C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,SAAS,OAAO;AAChB,SAAK,aAAa,aAAa,SAAS,CAAC;AAAA,EAC7C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,WAAW;AACX,WAAO,CAAC,KAAK,aAAa,WAAgB;AAAA,EAC9C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,oBAAoB,OAAO;AAC3B,SAAK,aAAa,yBAAyB,SAAS,CAAC;AAAA,EACzD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,sBAAsB;AACtB,WAAO,CAAC,KAAK,aAAa,uBAAuB,KAAK;AAAA,EAC1D;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,mBAAmB,OAAO;AAC1B,SAAK,aAAa,wBAAwB,SAAS,CAAC;AAAA,EACxD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,qBAAqB;AACrB,WAAO,CAAC,KAAK,aAAa,sBAAsB,KAAK;AAAA,EACzD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaA,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,EAAE,MAAM,aAAY,CAAE;AAAA,EAC5C;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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,YAAY;AACR,QAAI,cAAc,KAAK,eAAc;AAErC,QAAI,YAAY,WAAW,EAAG;AAE9B,QAAI,aAAa,YAAY,SAAS,CAAC,MAAM,CAAC;AAE9C,eAAW,aAAa,QAAQ,IAAI;AAEpC,UAAM,iBACF,KAAK,aAAa,UAClB,YAAY,SAAS,KAAK,YAC1B,KAAK,sBAAsB,KAAK,sBAAsB,KAAK;AAE/D,QAAI,gBAAgB;AAChB,kBAAY,QAAQ,CAAC,GAAG,UAAU;AAC9B,YAAI,UAAU,KAAK,qBAAqB;AACpC,YAAE,aAAa,4BAA4B,IAAI;AAAA,QACnD;AAEA,YAAI,SAAS,KAAK,uBAAuB,QAAQ,YAAY,SAAS,KAAK,oBAAoB;AAC3F,YAAE,aAAa,aAAa,IAAI;AAAA,QACpC;AAAA,MACJ,CAAC;AAAA,IACL;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,iBAAiB;AACb,WAAO,MAAM,KAAK,KAAK,iBAAiB,gBAAgB,CAAC,KAAK,CAAA;AAAA,EAClE;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,0BAA0B;AACtB,WAAO,MAAM,KAAK,KAAK,iBAAiB,2BAA2B,CAAC,KAAK,CAAA;AAAA,EAC7E;AACJ;ACpMA,YAAY,OAAO,mBAAmB,WAAW;"}
|
|
1
|
+
{"version":3,"file":"wje-breadcrumbs.js","sources":["../packages/wje-breadcrumbs/breadcrumbs.element.js","../packages/wje-breadcrumbs/breadcrumbs.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents a Breadcrumbs container, extending the WJElement class. It acts as a wrapper for individual breadcrumb elements and manages their behavior, such as collapsing and marking the last breadcrumb.\n * @documentation https://elements.webjet.sk/components/breadcrumbs\n * @status stable\n * @augments WJElement\n * @slot - The container for breadcrumb elements.\n * @csspart container - The component's container wrapper.\n * @attribute {number} max-items - The maximum number of visible breadcrumbs before collapsing.\n * @attribute {number} items-before-collapse - The number of breadcrumbs to show before the collapsed indicator.\n * @attribute {number} items-after-collapse - The number of breadcrumbs to show after the collapsed indicator.\n * @tag wje-breadcrumbs\n * @example\n * <!-- Example usage -->\n * <wje-breadcrumbs max-items=\"5\" items-before-collapse=\"2\" items-after-collapse=\"2\">\n * <wje-breadcrumb>Home</wje-breadcrumb>\n * <wje-breadcrumb>About</wje-breadcrumb>\n * <wje-breadcrumb>Services</wje-breadcrumb>\n * <wje-breadcrumb>Portfolio</wje-breadcrumb>\n * <wje-breadcrumb>Contact</wje-breadcrumb>\n * </wje-breadcrumbs>\n *\n * <!-- Output: Only the first two and last two breadcrumbs will be visible, with a collapsed indicator in the middle -->\n */\n\nexport default class Breadcrumbs extends WJElement {\n static BREAKPOINTS = {\n sm: 576,\n md: 768,\n lg: 992,\n xl: 1200,\n '2xl': 1450,\n xxl: 1450,\n };\n\n /**\n * Breadcrumbs constructor method.\n * @class\n */\n constructor() {\n super();\n\n /**\n * Last breadcrumb flag\n * @type {boolean}\n */\n this.last = false;\n this._isCollapsedByBreakpoint = null;\n }\n\n /**\n * Set variant attribute for the Breadcrumbs element.\n * @param value\n */\n set variant(value) {\n this.setAttribute('variant', value);\n }\n\n /**\n * Get variant attribute for the Breadcrumbs element.\n * @returns {string}\n */\n get variant() {\n return this.getAttribute('variant') || 'button';\n }\n\n /**\n * Get the collapsed indicator variant.\n * @returns {string}\n */\n get collapsedVariant() {\n return this.getAttribute('collapsed-variant') || this.variant;\n }\n\n /**\n * Sets the collapse breakpoint token or value.\n * @param {string} value Breakpoint token or CSS size.\n */\n set breakpoint(value) {\n if (value) this.setAttribute('breakpoint', value);\n else this.removeAttribute('breakpoint');\n }\n\n /**\n * Gets the collapse breakpoint token or value.\n * @returns {string}\n */\n get breakpoint() {\n return this.getAttribute('breakpoint') || '';\n }\n\n /**\n * Get items before collapse attribute.\n * @param {string} value\n */\n set maxItems(value) {\n this.setAttribute('max-items', value || 0);\n }\n\n /**\n * Get items before collapse attribute.\n * @returns {number}\n */\n get maxItems() {\n return +this.getAttribute('max-items' || 0);\n }\n\n /**\n * Get items before collapse attribute.\n * @param value\n */\n set itemsBeforeCollapse(value) {\n this.setAttribute('items-before-collapse', value || 1);\n }\n\n /**\n * Get items before collapse attribute.\n * @returns {number}\n */\n get itemsBeforeCollapse() {\n return +this.getAttribute('items-before-collapse') || 1;\n }\n\n /**\n * Get items after collapse attribute.\n * @param value\n */\n set itemsAfterCollapse(value) {\n this.setAttribute('items-after-collapse', value || 1);\n }\n\n /**\n * Get items after collapse attribute.\n * @returns {number}\n */\n get itemsAfterCollapse() {\n if (this.hasAttribute('items-after-collapse')) {\n return +this.getAttribute('items-after-collapse') || 1;\n }\n\n const derivedItemsAfterCollapse = this.maxItems - this.itemsBeforeCollapse - 1;\n\n return derivedItemsAfterCollapse > 0 ? derivedItemsAfterCollapse : 1;\n }\n\n /**\n * Class name for the Breadcrumbs element.\n * @type {string}\n */\n className = 'Breadcrumbs';\n\n /**\n * Get CSS stylesheet for the Breadcrumbs element.\n * @static\n * @returns {object} styles - The CSS styles\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n /**\n * Get observed attributes for the Breadcrumb element.\n * @static\n * @returns {Array<string>} - The observed attributes array for the Breadcrumb element.\n */\n static get observedAttributes() {\n return ['breakpoint', 'max-items', 'items-before-collapse', 'items-after-collapse', 'collapsed-variant', 'variant'];\n }\n\n /**\n * Setup attributes for the Breadcrumbs element.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n this.setAriaState({ role: 'navigation' });\n }\n\n /**\n * Draw method for the Breadcrumbs element.\n * @returns {object} fragment - The document fragment\n */\n draw() {\n let fragment = document.createDocumentFragment();\n\n let element = document.createElement('slot');\n\n fragment.appendChild(element);\n this.defaultSlot = element;\n\n return fragment;\n }\n\n /**\n * Updates the breadcrumb elements after they are drawn on the page.\n * It manages attributes on breadcrumb items and handles the logic for collapsing breadcrumbs\n * if the total exceeds the specified maximum items.\n * @returns {void} This method does not return a value.\n */\n afterDraw() {\n this.onSlotChange = () => this.updateCollapse();\n this.defaultSlot?.addEventListener('slotchange', this.onSlotChange);\n this.handleResize = () => this.handleBreakpointResize();\n\n if (this.getBreakpointWidth()) {\n window.addEventListener('resize', this.handleResize);\n }\n\n this.updateCollapse();\n }\n\n /**\n * Removes listeners after disconnect.\n */\n afterDisconnect() {\n this.defaultSlot?.removeEventListener('slotchange', this.onSlotChange);\n window.removeEventListener('resize', this.handleResize);\n this._isCollapsedByBreakpoint = null;\n }\n\n /**\n * Reacts to viewport resize only when the breakpoint mode actually changes.\n * @returns {void}\n */\n handleBreakpointResize() {\n if (!this.getBreakpointWidth()) return;\n\n const nextState = this.shouldApplyBreakpointCollapse();\n\n if (this._isCollapsedByBreakpoint === nextState) return;\n\n this.updateCollapse();\n }\n\n /**\n * Recalculates breadcrumb collapse state.\n * @returns {void}\n */\n updateCollapse() {\n let breadcrumbs = this.getBreadcrumbs();\n\n if (breadcrumbs.length === 0) return;\n\n this._isCollapsedByBreakpoint = this.shouldApplyBreakpointCollapse();\n const effectiveItemsAfterCollapse = this.itemsAfterCollapse;\n const shouldCollapse =\n this._isCollapsedByBreakpoint &&\n this.maxItems > 0 &&\n breadcrumbs.length > this.maxItems &&\n this.itemsBeforeCollapse + effectiveItemsAfterCollapse + 1 <= this.maxItems;\n\n const lastIndex = breadcrumbs.length - 1;\n const indicatorIndex = shouldCollapse ? this.itemsBeforeCollapse : -1;\n const collapseStart = this.itemsBeforeCollapse;\n const collapseEnd = breadcrumbs.length - effectiveItemsAfterCollapse;\n\n breadcrumbs.forEach((breadcrumb, index) => {\n this.syncManagedAttribute(breadcrumb, 'last', index === lastIndex);\n this.syncManagedAttribute(breadcrumb, 'show-collapsed-indicator', index === indicatorIndex);\n\n const isCollapsed =\n shouldCollapse &&\n index >= collapseStart &&\n index < collapseEnd;\n\n this.syncManagedAttribute(breadcrumb, 'collapsed', isCollapsed);\n\n if (!isCollapsed && breadcrumb.classList.contains('collapsed')) {\n breadcrumb.classList.remove('collapsed');\n }\n });\n }\n\n /**\n * Clears attributes/classes managed by the collapse algorithm.\n * @param {Array<Element>} breadcrumbs Breadcrumb items.\n */\n resetCollapseState(breadcrumbs = this.getBreadcrumbs()) {\n breadcrumbs.forEach((breadcrumb) => {\n breadcrumb.removeAttribute('collapsed');\n breadcrumb.removeAttribute('show-collapsed-indicator');\n breadcrumb.removeAttribute('last');\n breadcrumb.classList.remove('collapsed');\n });\n }\n\n /**\n * Applies a managed boolean attribute only when its value truly changes.\n * @param {Element} element Breadcrumb item whose responsive state is being synchronized.\n * @param {string} name Managed state flag that should be synchronized on the breadcrumb item.\n * @param {boolean} isEnabled Whether the attribute should be present.\n */\n syncManagedAttribute(element, name, isEnabled) {\n if (!element) return;\n\n const hasAttribute = element.hasAttribute(name);\n\n if (isEnabled && !hasAttribute) {\n element.setAttribute(name, true);\n }\n\n if (!isEnabled && hasAttribute) {\n element.removeAttribute(name);\n }\n }\n\n /**\n * Returns whether collapse rules should currently be applied.\n * @returns {boolean}\n */\n shouldApplyBreakpointCollapse() {\n const breakpointWidth = this.getBreakpointWidth();\n\n if (!breakpointWidth) return true;\n\n return window.innerWidth < breakpointWidth;\n }\n\n /**\n * Resolves the configured breakpoint to a pixel width.\n * @returns {number|null}\n */\n getBreakpointWidth() {\n if (!this.breakpoint) return null;\n\n const token = this.breakpoint.trim().toLowerCase();\n const cssValue = getComputedStyle(this).getPropertyValue(`--wje-breadcrumbs-breakpoint-${token}`).trim();\n const namedBreakpoint = Breadcrumbs.BREAKPOINTS[token];\n\n if (cssValue) {\n const cssNumber = parseFloat(cssValue);\n if (Number.isFinite(cssNumber)) return cssNumber;\n }\n\n if (Number.isFinite(namedBreakpoint)) {\n return namedBreakpoint;\n }\n\n const directNumber = parseFloat(token);\n return Number.isFinite(directNumber) ? directNumber : null;\n }\n\n /**\n * Retrieves all breadcrumb elements within the current instance.\n * @returns {Array<Element>} An array of breadcrumb elements (`wje-breadcrumb`) found within the instance. Returns an empty array if no breadcrumbs are found.\n */\n getBreadcrumbs() {\n return Array.from(this.querySelectorAll('wje-breadcrumb')) || [];\n }\n\n /**\n * Retrieves all breadcrumb elements that have the 'collapsed' attribute.\n * @returns {Array<Element>} An array of DOM elements representing breadcrumbs with the 'collapsed' attribute.\n */\n getBreadcrumbsCollapsed() {\n return Array.from(this.querySelectorAll('wje-breadcrumb[collapsed]')) || [];\n }\n}\n","import Breadcrumbs from './breadcrumbs.element.js';\n\nexport default Breadcrumbs;\n\nBreadcrumbs.define('wje-breadcrumbs', Breadcrumbs);\n"],"names":[],"mappings":"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"}
|
package/dist/wje-menu-item.js
CHANGED
|
@@ -501,7 +501,9 @@ class MenuItem extends WJElement {
|
|
|
501
501
|
* Adds event listeners after drawing the MenuItem.
|
|
502
502
|
*/
|
|
503
503
|
afterDraw() {
|
|
504
|
-
|
|
504
|
+
if (this.parentElement) {
|
|
505
|
+
this.unbindRouterLinks = bindRouterLinks(this.parentElement, { selector: "[route]" });
|
|
506
|
+
}
|
|
505
507
|
document.addEventListener("wje-router:rebind", this.rebindRouterLinks);
|
|
506
508
|
this.addEventListener("mousemove", this.dispatchMove);
|
|
507
509
|
this.addEventListener("wje-popup:reposition", this.dispatchReposition);
|
|
@@ -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\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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"}
|
|
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 if (this.parentElement) {\n this.unbindRouterLinks = bindRouterLinks(this.parentElement, { selector: '[route]' });\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 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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"}
|