npm - wj-elements - Versions diffs - 0.1.204 → 0.1.206 - Mend

wj-elements 0.1.204 → 0.1.206

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.

Files changed (10) hide show

package/dist/packages/wje-menu-item/menu-item.element.d.ts +1 -0
package/dist/packages/wje-pagination/pagination.element.d.ts +12 -0
package/dist/wje-menu-item.js +19 -0
package/dist/wje-menu-item.js.map +1 -1
package/dist/wje-option.js +2 -1
package/dist/wje-option.js.map +1 -1
package/dist/wje-pagination.js +55 -4
package/dist/wje-pagination.js.map +1 -1
package/dist/wje-select.js +1 -1
package/package.json +1 -1

package/dist/packages/wje-menu-item/menu-item.element.d.ts CHANGED Viewed

@@ -154,5 +154,6 @@ export default class MenuItem extends WJElement {
      * @returns {string} The concatenated and trimmed text content from the element's text nodes.
      */
     getTextFromElement(element: HTMLElement): string;
+    handleActiveClick: (e: any) => void;
     #private;
 }

package/dist/packages/wje-pagination/pagination.element.d.ts CHANGED Viewed

@@ -123,6 +123,18 @@ export default class Pagination extends WJElement {
      * @returns {boolean} True if the 'show-info' attribute is present, otherwise false.
      */
     get showInfo(): boolean;
+    set showPageSizeOptions(value: boolean);
+    get showPageSizeOptions(): boolean;
+    set pageSizeOptions(value: Array<number>);
+    /**
+     * Retrieves the list of available page size options.
+     * This method is used to fetch the values representing the different page size options
+     * that can be provided or configured in a paginated component or system.
+     * @returns {Array<number>} An array of numbers representing the selectable page size options.
+     */
+    get pageSizeOptions(): Array<number>;
+    set hideEmpty(value: boolean);
+    get hideEmpty(): boolean;
     /**
      * Dependencies of the Button element.
      * @type {object}

package/dist/wje-menu-item.js CHANGED Viewed

@@ -271,6 +271,24 @@ class MenuItem extends WJElement {
       this.style.setProperty("--wje-menu-item-safe-triangle-submenu-end-x", `${left}px`);
       this.style.setProperty("--wje-menu-item-safe-triangle-submenu-end-y", `${top + height}px`);
     });
+    __publicField(this, "handleActiveClick", (e) => {
+      const target = e.target.closest("wje-menu-item");
+      if (!target) return;
+      document.querySelectorAll("wje-menu-item").forEach((item) => {
+        const activeClass = item.getAttribute("active-class");
+        if (activeClass) item.classList.remove(activeClass);
+      });
+      let current = target;
+      while (current && current.tagName === "WJE-MENU-ITEM") {
+        const activeClass = current.getAttribute("active-class");
+        if (activeClass) current.classList.add(activeClass);
+        const parentMenu = current.closest("wje-menu");
+        if (!parentMenu) break;
+        const candidate = parentMenu.closest("wje-menu-item");
+        if (!candidate) break;
+        current = candidate;
+      }
+    });
     this._collapsible = false;
   }
   /**
@@ -464,6 +482,7 @@ class MenuItem extends WJElement {
     if (this.hasAttribute("custom-event")) {
       event.addListener(this, "click", null, __privateMethod(this, _MenuItem_instances, populateCustomEvent_fn));
     }
+    this.addEventListener("click", this.handleActiveClick);
   }
   /**
    * Creates a tooltip for the MenuItem when it is collapsed.

package/dist/wje-menu-item.js.map CHANGED Viewed

	@@ -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._collapsible = false;\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.setAttribute('active-class', 'open');\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 return fragment;\n }\n\n /\n Adds event listeners after drawing the MenuItem.\n /\n afterDraw() {\n this.unbindRouterLinks = bindRouterLinks(this.parentElement, { selector: false });\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\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 // this.focus();\n }\n };\n\n /\n Handles the click event on the MenuItem.\n * @param {object} e\n /\n clickHandler = (e) => {\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 }\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 }\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 } else {\n if (this === e.target) submenuElements.removeAttribute('active');\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 }\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 }\n }\n }\n\n /\n Gets the text from the element and returns it.\n /\n beforeDisconnect() {\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 }\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","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._collapsible = false;\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.setAttribute('active-class', 'open');\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 return fragment;\n }\n\n /\n Adds event listeners after drawing the MenuItem.\n /\n afterDraw() {\n this.unbindRouterLinks = bindRouterLinks(this.parentElement, { selector: false });\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 this.addEventListener('click', this.handleActiveClick);\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 // this.focus();\n }\n };\n\n /\n Handles the click event on the MenuItem.\n * @param {object} e\n /\n clickHandler = (e) => {\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 }\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 }\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 } else {\n if (this === e.target) submenuElements.removeAttribute('active');\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 }\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 }\n }\n }\n\n /\n Gets the text from the element and returns it.\n /\n beforeDisconnect() {\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 }\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 // Odstráň všetky existujúce triedy z predchádzajúcich kliknutí\n document.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-option.js CHANGED Viewed

@@ -111,7 +111,8 @@ class Option extends WJElement {
    * @returns {boolean} True if the closest 'wje-select' element has a 'checkbox' attribute; otherwise, false.
    */
   get checkbox() {
-    return this.closest("wje-select").hasAttribute("checkbox");
+    var _a;
+    return (_a = this.closest("wje-select")) == null ? void 0 : _a.hasAttribute("checkbox");
   }
   /**
    * Determines whether the closest 'wje-select' element has the 'multiple' attribute.

package/dist/wje-option.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"wje-option.js","sources":["../packages/wje-option/option.element.js","../packages/wje-option/option.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport Icon from '../wje-icon/icon.js';\nimport Checkbox from '../wje-checkbox/checkbox.js';\nimport styles from './styles/styles.css?inline';\n\n/*\n `Option` is a custom web component that represents an option.\n * @summary This element represents an option.\n * @documentation https://elements.webjet.sk/components/option\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native part of the option.\n * @slot start - The slot for the start of the option.\n * @slot - The default slot for the option.\n * @slot end - The slot for the end of the option.\n * // @fires wje-option:change - Event fired when the option is clicked.\n * @tag wje-option\n /\nexport default class Option extends WJElement {\n\t/\n\t Creates an instance of Option.\n\t * @class\n\t /\n\tconstructor() {\n\t\tsuper();\n\t}\n\n\t/\n\t Dependencies of the Option component.\n\t /\n\tdependencies = {\n\t\t'wje-icon': Icon,\n\t\t'wje-checkbox': Checkbox,\n\t};\n\n\t/\n\t Sets the selected attribute of the option.\n\t * @param {boolean} value The value to set.\n\t /\n\tset selected(value) {\n\t\tif (value) {\n\t\t\tthis.setAttribute('selected', '');\n\t\t} else {\n\t\t\tthis.removeAttribute('selected');\n\t\t}\n\t}\n\n\t/\n\t Retrieves the 'selected' attribute status of the element.\n\t * @returns {boolean} Returns true if the 'selected' attribute is set on the element; otherwise, false.\n\t /\n\tget selected() {\n\t\treturn this.hasAttribute('selected');\n\t}\n\n\t/\n\t Retrieves the value indicating whether the closest 'wje-select' element has a 'checkbox' attribute.\n\t * @returns {boolean} True if the closest 'wje-select' element has a 'checkbox' attribute; otherwise, false.\n\t /\n\tget checkbox() {\n\t\treturn this.closest('wje-select').hasAttribute('checkbox');\n\t}\n\n\t/\n\t Determines whether the closest 'wje-select' element has the 'multiple' attribute.\n\t * @returns {boolean} Returns true if the 'wje-select' element has the 'multiple' attribute, otherwise false.\n\t /\n\tget multiple() {\n\t\treturn this.closest('wje-select').hasAttribute('multiple');\n\t}\n\n\t/\n\t Sets the value attribute of the option.\n\t * @param {string} value The value to set.\n\t /\n\tset value(value) {\n\t\tthis.setAttribute('value', value);\n\t}\n\n\tget value() {\n\t\treturn this.getAttribute('value');\n\t}\n\n\t/\n\t Sets the text content of the option.\n\t * @param {string} value The text to set.\n\t /\n\tset text(value) {\n\t\tthis.innerText = value;\n\t}\n\n\tclassName = 'Option';\n\n\t/\n\t Returns the CSS styles for the component.\n\t * @static\n\t * @returns {CSSStyleSheet}\n\t /\n\tstatic get cssStyleSheet() {\n\t\treturn styles;\n\t}\n\n\t/\n\t Returns the list of attributes to observe for changes.\n\t * @static\n\t * @returns {Array<string>}\n\t /\n\tstatic get observedAttributes() {\n\t\treturn ['selected'];\n\t}\n\n\t/\n\t This method is called whenever an observed attribute is added, removed, or changed.\n\t * @param {string} name The name of the attribute that was changed.\n\t * @param {} old The previous value of the attribute before the change.\n\t @param {} newName The new value of the attribute after the change.\n\t @returns {void} This method does not return a value.\n\t /\n\tattributeChangedCallback(name, old, newName) {\n\t\tif (this.checkbox) {\n\t\t\tif (name === 'selected' && newName !== null) {\n\t\t\t\tthis.#setCheckbox(true);\n\t\t\t} else {\n\t\t\t\tthis.#setCheckbox(false);\n\t\t\t}\n\t\t}\n\t}\n\n\t/\n\t Sets up the attributes for the component.\n\t /\n\tsetupAttributes() {\n\t\tthis.isShadowRoot = 'open';\n\t}\n\n\t/\n\t Draws the component for the option.\n\t * @returns {DocumentFragment}\n\t /\n\tdraw() {\n\t\tlet fragment = document.createDocumentFragment();\n\n\t\tlet native = document.createElement('div');\n\t\tnative.classList.add('native-option');\n\t\tnative.setAttribute('part', 'native');\n\n\t\tlet icon = document.createElement('wje-icon');\n\t\ticon.setAttribute('name', 'check');\n\t\ticon.setAttribute('slot', 'check');\n\n\t\tlet checkboxEl = document.createElement('wje-checkbox');\n\t\tcheckboxEl.setAttribute('slot', 'check');\n\n\t\tlet check = document.createElement('slot');\n\t\tcheck.setAttribute('name', 'check');\n\t\tcheck.setAttribute('part', 'check');\n\n\t\tlet start = document.createElement('slot');\n\t\tstart.setAttribute('name', 'start');\n\n\t\tlet slot = document.createElement('slot');\n\n\t\tlet end = document.createElement('slot');\n\t\tend.setAttribute('name', 'end');\n\n\t\tconst hasCheckSlot = this.querySelector('[slot=\"check\"]') !== null;\n\n\t\tif (!hasCheckSlot) {\n\t\t\tif (this.checkbox && this.multiple) {\n\t\t\t\tthis.append(checkboxEl);\n\t\t\t} else {\n\t\t\t\tthis.append(icon);\n\t\t\t}\n\t\t}\n\n\t\tnative.append(check);\n\t\tnative.append(start);\n\t\tnative.append(slot);\n\t\tnative.append(end);\n\n\t\tfragment.append(native);\n\n\t\tthis.check = check;\n\n\t\treturn fragment;\n\t}\n\n\t/\n\t Method executed after the drawing process is completed.\n\t * Sets up an event listener for 'click' events, linking them to the specified callback function.\n\t * @returns {void} Does not return a value.\n\t /\n\tafterDraw() {\n\t\tevent.addListener(this, 'click', null, this.optionClickCallback);\n\t}\n\n\t/\n\t Handles operations or cleanup tasks that need to occur before disconnecting.\n\t * Removes an event listener associated with the 'click' event and a specified callback function.\n\t * @returns {void} This method does not return a value.\n\t /\n\tbeforeDisconnect() {\n\t\tevent.removeListener(this, 'click', null, this.optionClickCallback);\n\t}\n\n\t/\n\t Handles the click event on an option element and dispatches a custom event when triggered.\n\t * @param {Event} e The click event object that triggered the callback.\n\t * @returns {void} No return value.\n\t /\n\toptionClickCallback(e) {\n\t\te.preventDefault();\n\t\te.stopPropagation();\n\t\te.stopImmediatePropagation();\n\n\t\tif (this.hasAttribute('disabled')) return;\n\n\t\tevent.dispatchCustomEvent(this, 'wje-option:change', {\n\t\t\tvalue: this.value,\n\t\t\ttext: this.textContent,\n\t\t\toption: this,\n\t\t});\n\t}\n\n\t/\n\t Checks if the given DOM node represents a checkbox element.\n\t * @param {Node} node The DOM node to be checked.\n\t * @returns {boolean} Returns true if the node is an element with a class name of 'Checkbox', otherwise false.\n\t /\n\t#isCheckbox(node) {\n\t\treturn node instanceof Element && node.className === 'Checkbox';\n\t}\n\n\t/\n\t Updates the checked status of the first checkbox element found within the assigned elements of the specified container.\n\t * @param {boolean} checked The desired checked state to be applied to the checkbox.\n\t * @returns {void}\n\t */\n\t#setCheckbox(checked) {\n\t\tlet arr = [...this.check?.assignedElements({ flatten: true })]?.filter(item=> this.#isCheckbox(item));\n\t\tif(arr.length > 0)\n\t\t\tarr[0].checked = checked;\n\t}\n}","import Option from './option.element.js';\n\nexport default Option;\n\nOption.define('wje-option', Option);\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"wje-option.js","sources":["../packages/wje-option/option.element.js","../packages/wje-option/option.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport Icon from '../wje-icon/icon.js';\nimport Checkbox from '../wje-checkbox/checkbox.js';\nimport styles from './styles/styles.css?inline';\n\n/*\n `Option` is a custom web component that represents an option.\n * @summary This element represents an option.\n * @documentation https://elements.webjet.sk/components/option\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native part of the option.\n * @slot start - The slot for the start of the option.\n * @slot - The default slot for the option.\n * @slot end - The slot for the end of the option.\n * // @fires wje-option:change - Event fired when the option is clicked.\n * @tag wje-option\n /\nexport default class Option extends WJElement {\n\t/\n\t Creates an instance of Option.\n\t * @class\n\t /\n\tconstructor() {\n\t\tsuper();\n\t}\n\n\t/\n\t Dependencies of the Option component.\n\t /\n\tdependencies = {\n\t\t'wje-icon': Icon,\n\t\t'wje-checkbox': Checkbox,\n\t};\n\n\t/\n\t Sets the selected attribute of the option.\n\t * @param {boolean} value The value to set.\n\t /\n\tset selected(value) {\n\t\tif (value) {\n\t\t\tthis.setAttribute('selected', '');\n\t\t} else {\n\t\t\tthis.removeAttribute('selected');\n\t\t}\n\t}\n\n\t/\n\t Retrieves the 'selected' attribute status of the element.\n\t * @returns {boolean} Returns true if the 'selected' attribute is set on the element; otherwise, false.\n\t /\n\tget selected() {\n\t\treturn this.hasAttribute('selected');\n\t}\n\n\t/\n\t Retrieves the value indicating whether the closest 'wje-select' element has a 'checkbox' attribute.\n\t * @returns {boolean} True if the closest 'wje-select' element has a 'checkbox' attribute; otherwise, false.\n\t /\n\tget checkbox() {\n\t\treturn this.closest('wje-select')?.hasAttribute('checkbox');\n\t}\n\n\t/\n\t Determines whether the closest 'wje-select' element has the 'multiple' attribute.\n\t * @returns {boolean} Returns true if the 'wje-select' element has the 'multiple' attribute, otherwise false.\n\t /\n\tget multiple() {\n\t\treturn this.closest('wje-select').hasAttribute('multiple');\n\t}\n\n\t/\n\t Sets the value attribute of the option.\n\t * @param {string} value The value to set.\n\t /\n\tset value(value) {\n\t\tthis.setAttribute('value', value);\n\t}\n\n\tget value() {\n\t\treturn this.getAttribute('value');\n\t}\n\n\t/\n\t Sets the text content of the option.\n\t * @param {string} value The text to set.\n\t /\n\tset text(value) {\n\t\tthis.innerText = value;\n\t}\n\n\tclassName = 'Option';\n\n\t/\n\t Returns the CSS styles for the component.\n\t * @static\n\t * @returns {CSSStyleSheet}\n\t /\n\tstatic get cssStyleSheet() {\n\t\treturn styles;\n\t}\n\n\t/\n\t Returns the list of attributes to observe for changes.\n\t * @static\n\t * @returns {Array<string>}\n\t /\n\tstatic get observedAttributes() {\n\t\treturn ['selected'];\n\t}\n\n\t/\n\t This method is called whenever an observed attribute is added, removed, or changed.\n\t * @param {string} name The name of the attribute that was changed.\n\t * @param {} old The previous value of the attribute before the change.\n\t @param {} newName The new value of the attribute after the change.\n\t @returns {void} This method does not return a value.\n\t /\n\tattributeChangedCallback(name, old, newName) {\n\t\tif (this.checkbox) {\n\t\t\tif (name === 'selected' && newName !== null) {\n\t\t\t\tthis.#setCheckbox(true);\n\t\t\t} else {\n\t\t\t\tthis.#setCheckbox(false);\n\t\t\t}\n\t\t}\n\t}\n\n\t/\n\t Sets up the attributes for the component.\n\t /\n\tsetupAttributes() {\n\t\tthis.isShadowRoot = 'open';\n\t}\n\n\t/\n\t Draws the component for the option.\n\t * @returns {DocumentFragment}\n\t /\n\tdraw() {\n\t\tlet fragment = document.createDocumentFragment();\n\n\t\tlet native = document.createElement('div');\n\t\tnative.classList.add('native-option');\n\t\tnative.setAttribute('part', 'native');\n\n\t\tlet icon = document.createElement('wje-icon');\n\t\ticon.setAttribute('name', 'check');\n\t\ticon.setAttribute('slot', 'check');\n\n\t\tlet checkboxEl = document.createElement('wje-checkbox');\n\t\tcheckboxEl.setAttribute('slot', 'check');\n\n\t\tlet check = document.createElement('slot');\n\t\tcheck.setAttribute('name', 'check');\n\t\tcheck.setAttribute('part', 'check');\n\n\t\tlet start = document.createElement('slot');\n\t\tstart.setAttribute('name', 'start');\n\n\t\tlet slot = document.createElement('slot');\n\n\t\tlet end = document.createElement('slot');\n\t\tend.setAttribute('name', 'end');\n\n\t\tconst hasCheckSlot = this.querySelector('[slot=\"check\"]') !== null;\n\n\t\tif (!hasCheckSlot) {\n\t\t\tif (this.checkbox && this.multiple) {\n\t\t\t\tthis.append(checkboxEl);\n\t\t\t} else {\n\t\t\t\tthis.append(icon);\n\t\t\t}\n\t\t}\n\n\t\tnative.append(check);\n\t\tnative.append(start);\n\t\tnative.append(slot);\n\t\tnative.append(end);\n\n\t\tfragment.append(native);\n\n\t\tthis.check = check;\n\n\t\treturn fragment;\n\t}\n\n\t/\n\t Method executed after the drawing process is completed.\n\t * Sets up an event listener for 'click' events, linking them to the specified callback function.\n\t * @returns {void} Does not return a value.\n\t /\n\tafterDraw() {\n\t\tevent.addListener(this, 'click', null, this.optionClickCallback);\n\t}\n\n\t/\n\t Handles operations or cleanup tasks that need to occur before disconnecting.\n\t * Removes an event listener associated with the 'click' event and a specified callback function.\n\t * @returns {void} This method does not return a value.\n\t /\n\tbeforeDisconnect() {\n\t\tevent.removeListener(this, 'click', null, this.optionClickCallback);\n\t}\n\n\t/\n\t Handles the click event on an option element and dispatches a custom event when triggered.\n\t * @param {Event} e The click event object that triggered the callback.\n\t * @returns {void} No return value.\n\t /\n\toptionClickCallback(e) {\n\t\te.preventDefault();\n\t\te.stopPropagation();\n\t\te.stopImmediatePropagation();\n\n\t\tif (this.hasAttribute('disabled')) return;\n\n\t\tevent.dispatchCustomEvent(this, 'wje-option:change', {\n\t\t\tvalue: this.value,\n\t\t\ttext: this.textContent,\n\t\t\toption: this,\n\t\t});\n\t}\n\n\t/\n\t Checks if the given DOM node represents a checkbox element.\n\t * @param {Node} node The DOM node to be checked.\n\t * @returns {boolean} Returns true if the node is an element with a class name of 'Checkbox', otherwise false.\n\t /\n\t#isCheckbox(node) {\n\t\treturn node instanceof Element && node.className === 'Checkbox';\n\t}\n\n\t/\n\t Updates the checked status of the first checkbox element found within the assigned elements of the specified container.\n\t * @param {boolean} checked The desired checked state to be applied to the checkbox.\n\t * @returns {void}\n\t */\n\t#setCheckbox(checked) {\n\t\tlet arr = [...this.check?.assignedElements({ flatten: true })]?.filter(item=> this.#isCheckbox(item));\n\t\tif(arr.length > 0)\n\t\t\tarr[0].checked = checked;\n\t}\n}","import Option from './option.element.js';\n\nexport default Option;\n\nOption.define('wje-option', Option);\n"],"names":[],"mappings":"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"}

package/dist/wje-pagination.js CHANGED Viewed

@@ -49,7 +49,7 @@ function paginate(totalItems, currentPage = 1, pageSize = 10, maxPages = 5) {
     totalItems
   };
 }
-const styles = ":host {\n    .native-pagination {\n        display: flex;\n        align-items: center;\n\n        .info {\n            font-size: var(--wje-font-size-small);\n        }\n\n        .pages {\n            display: flex;\n\n            .dots {\n                display: flex;\n                justify-content: center;\n                align-items: center;\n                margin-inline: 0.25rem;\n                width: 32px;\n                &::before {\n                    content: '...';\n                }\n            }\n            wje-button {\n                width: 32px;\n                margin-inline: 0.25rem;\n                &[disabled] {\n                    cursor: default;\n                }\n            }\n        }\n    }\n}\n";
+const styles = ":host {\n    .native-pagination {\n        display: flex;\n        align-items: center;\n        gap: 1rem;\n\n        wje-select {\n            width: 68px;\n            margin-block: 0;\n            wje-option {\n                &::part(native) {\n                    padding-inline: var(--wje-spacing-x-small);\n                }\n                &[selected]{\n                    background: var(--wje-option-highlighted);\n                }\n            }\n            wje-option::part(check) {\n                display: none;\n            }\n        }\n\n        .info {\n            font-size: var(--wje-font-size-small);\n        }\n\n        .pages {\n            display: flex;\n\n            .dots {\n                display: flex;\n                justify-content: center;\n                align-items: center;\n                margin-inline: 0.25rem;\n                width: 32px;\n                &::before {\n                    content: '...';\n                }\n            }\n            wje-button {\n                width: 32px;\n                margin-inline: 0.25rem;\n                &[disabled] {\n                    cursor: default;\n                }\n            }\n        }\n    }\n}\n";
 class Pagination extends WJElement {
   /**
    * Creates an instance of Pagination.
@@ -76,7 +76,7 @@ class Pagination extends WJElement {
     __publicField(this, "pageClickAction", (e, page) => {
       if (+page === this.page || this.page > this.paginateObj.totalPages) return;
       this.page = page;
-      event.dispatchCustomEvent(this, "wje-pagination:page-change", { page });
+      event.dispatchCustomEvent(this, "wje-pagination:page-change", { page: this.page, pageSize: this.pageSize });
     });
     this.localizer = new Localizer(this);
     this._paginateObj = null;
@@ -110,7 +110,7 @@ class Pagination extends WJElement {
    * @returns {number} The maximum number of pages as a numeric value.
    */
   get maxPages() {
-    return +this.getAttribute("max-pages") || 3;
+    return +this.getAttribute("max-pages") || 10;
   }
   /**
    * Sets the `pageSize` attribute to the specified value.
@@ -230,6 +230,35 @@ class Pagination extends WJElement {
   get showInfo() {
     return this.hasAttribute("show-info");
   }
+  set showPageSizeOptions(value) {
+    if (!value) return;
+    this.setAttribute("show-page-size-options", value);
+  }
+  get showPageSizeOptions() {
+    return this.hasAttribute("show-page-size-options");
+  }
+  set pageSizeOptions(value) {
+    if (!value) return;
+    this.setAttribute("page-size-options", value);
+  }
+  /**
+   * Retrieves the list of available page size options.
+   * This method is used to fetch the values representing the different page size options
+   * that can be provided or configured in a paginated component or system.
+   * @returns {Array<number>} An array of numbers representing the selectable page size options.
+   */
+  get pageSizeOptions() {
+    let options = this.getAttribute("page-size-options");
+    if (!options) return [6, 10, 50, 100, 500];
+    return options.split(",").map((o) => +o).filter((o) => !isNaN(o));
+  }
+  set hideEmpty(value) {
+    if (!value) return;
+    this.setAttribute("hide-empty", value);
+  }
+  get hideEmpty() {
+    return this.hasAttribute("hide-empty");
+  }
   /**
    * Returns the CSS styles for the component.
    * @static
@@ -243,7 +272,7 @@ class Pagination extends WJElement {
    * @returns {Array} The attributes to observe for changes.
    */
   static get observedAttributes() {
-    return ["page", "total-items"];
+    return ["page", "total-items", "page-size"];
   }
   /**
    * Sets up the attributes for the component.
@@ -252,6 +281,12 @@ class Pagination extends WJElement {
     this.isShadowRoot = "open";
   }
   async beforeDraw() {
+    if (!this.totalItems || this.totalItems === 0) {
+      this.classList.add("empty");
+      if (this.hideEmpty)
+        this.setAttribute("hidden", "");
+      return;
+    }
     this.paginateObj = await paginate(this.totalItems, this.page, this.pageSize, this.maxPages);
   }
   /**
@@ -274,6 +309,20 @@ class Pagination extends WJElement {
    */
   htmlPagination() {
     let fragment = document.createDocumentFragment();
+    let select = document.createElement("wje-select");
+    select.setAttribute("size", "small");
+    select.setAttribute("variant", "standard");
+    select.setAttribute("value", this.pageSize);
+    select.addEventListener("wje-select:change", (e) => {
+      this.pageSize = e.detail.context.value[0];
+      event.dispatchCustomEvent(this, "wje-pagination:page-change", { page: this.page, pageSize: this.pageSize });
+    });
+    let options = this.pageSizeOptions.map((o) => {
+      let option = document.createElement("wje-option");
+      option.value = o;
+      option.textContent = o;
+      return option;
+    });
     let info = document.createElement("div");
     info.classList.add("info");
     info.innerHTML = `${this.paginateObj.startIndex + 1} - ${this.paginateObj.endIndex + 1} ${this.localizer.translate("wj.pagination.of")} ${this.totalItems}`;
@@ -304,11 +353,13 @@ class Pagination extends WJElement {
       "wje-button:click",
       (e) => this.pageClickAction(e, this.paginateObj.totalPages - 1)
     );
+    select.append(...options);
     if (this.showFirstButton) pagination.appendChild(firstButton);
     pagination.appendChild(prevButton);
     pagination.appendChild(this.htmlStackButtons(this.paginateObj));
     pagination.appendChild(nextButton);
     if (this.showLastButton) pagination.appendChild(lastButton);
+    if (this.showPageSizeOptions) fragment.append(select);
     if (this.showInfo) fragment.appendChild(info);
     fragment.appendChild(pagination);
     return fragment;

package/dist/wje-pagination.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"wje-pagination.js","sources":["../packages/wje-pagination/service/service.js","../packages/wje-pagination/pagination.element.js","../packages/wje-pagination/pagination.js"],"sourcesContent":["/*\n Paginates items based on the total number of items, current page, page size, and maximum number of pages to display.\n * @param {number} totalItems The total number of items to paginate.\n * @param {number} [currentPage] The current page number (default is 1).\n * @param {number} [pageSize] The number of items per page (default is 10).\n * @param {number} [maxPages] The maximum number of pages to display in the pagination control (default is 5).\n * @returns {object} An object containing pagination details including total items, current page, page size, total pages, start/end page, start/end index, and the pages array.\n /\nexport function paginate(totalItems, currentPage = 1, pageSize = 10, maxPages = 5) {\n // Calculate total pages\n const totalPages = Math.ceil(totalItems / pageSize);\n\n // Ensure current page is within valid range\n if (currentPage < 1) {\n currentPage = 1;\n } else if (currentPage > totalPages) {\n currentPage = totalPages;\n }\n\n let startPage;\n let endPage;\n\n const pagesNearEnd = maxPages + 1; // Define how close to the end we switch back to 5 pages 4\n\n const boundary = pagesNearEnd + 3;\n\n if (totalPages > boundary) {\n if (currentPage < pagesNearEnd) {\n // If in the first 4 pages, show up to 5 pages\n startPage = 1;\n endPage = Math.min(pagesNearEnd + 1, totalPages); //5\n } else if (currentPage >= totalPages - pagesNearEnd) {\n // If within 4 pages from the end, show last 5 pages\n startPage = Math.max(totalPages - pagesNearEnd, 1); //4\n endPage = totalPages;\n } else {\n const halfPages = Math.floor(maxPages / 2);\n // Otherwise, only show 3 pages (current, previous, next)\n startPage = currentPage - halfPages + 1;\n endPage = maxPages % 2 === 1 ? currentPage + halfPages + 1 : currentPage + halfPages - 1;\n }\n } else {\n startPage = 1;\n endPage = totalPages;\n }\n\n // Calculate start and end item indexes\n const startIndex = (currentPage - 1) pageSize;\n const endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1);\n\n // Create an array of pages to display\n const pages = Array.from({ length: endPage - startPage + 1 }, (_, i) => startPage + i);\n\n // Return object with all pager properties (preserving original format)\n return {\n boundary: boundary,\n currentPage: currentPage,\n endIndex: endIndex,\n endPage: endPage,\n totalPages: totalPages,\n pages: pages,\n pageSize: pageSize,\n startIndex: startIndex,\n startPage: startPage,\n totalItems: totalItems,\n };\n}\n","import { Localizer } from '../utils/localize.js';\nimport { default as WJElement, event } from '../wje-element/element.js';\nimport { paginate } from './service/service.js';\nimport Icon from '../wje-icon/icon.js';\nimport Button from '../wje-button/button.js';\nimport styles from './styles/styles.css?inline';\n\n/*\n @summary This class represents the Pagination component for navigating through paginated content and dynamically updating navigation elements based on attributes like the number of items, page size, etc. Extends the WJElement class.\n * @documentation https://elements.webjet.sk/components/pagination\n * @status stable\n * @augments WJElement\n * @dependency wje-icon, wje-button\n * @csspart native - The wrapper element for the pagination component.\n /\nexport default class Pagination extends WJElement {\n /\n Creates an instance of Pagination.\n /\n constructor() {\n super();\n this.localizer = new Localizer(this);\n\n this._paginateObj = null;\n }\n\n /\n Sets the value of the 'page' attribute for the object.\n * @param {string} value The value to set for the 'page' attribute.\n /\n set page(value) {\n this.setAttribute('page', value);\n }\n\n /\n Retrieves the current page number as a numeric value.\n * @returns {number} The current page number. Returns 0 if the attribute 'page' is not set or is not a numeric value.\n /\n get page() {\n return +this.getAttribute('page') \|\| 0;\n }\n\n /\n Sets the maximum number of pages.\n * Updates the 'max-pages' attribute with the provided value.\n * @param {number\|string} value The maximum number of pages to set. Can be a number or a parsable string representing a number.\n /\n set maxPages(value) {\n this.setAttribute('max-pages', value);\n }\n\n /\n Gets the maximum number of pages.\n * This getter retrieves the value of the \"max-pages\" attribute from the element.\n * If the attribute is not set or is invalid, it defaults to 3.\n * @returns {number} The maximum number of pages as a numeric value.\n /\n get maxPages() {\n return +this.getAttribute('max-pages') \|\| 3;\n }\n\n /\n Sets the `pageSize` attribute to the specified value.\n * @param {number\|string} value The desired page size value. This can be a number or a string representation of the size.\n /\n set pageSize(value) {\n this.setAttribute('page-size', value);\n }\n\n /\n Retrieves the value of the 'page-size' attribute and converts it to a number.\n * If the attribute is not set or is invalid, returns the default value of 3.\n * @returns {number} The numeric value of the 'page-size' attribute or the default value of 3.\n /\n get pageSize() {\n return +this.getAttribute('page-size') \|\| 3;\n }\n\n /\n Sets the total number of items.\n * @param {number} value The new total number of items to set.\n /\n set totalItems(value) {\n this.setAttribute('total-items', value);\n }\n\n /\n Retrieves the total number of items represented by the 'total-items' attribute.\n * @returns {number} The total number of items. Defaults to 0 if the attribute is not set or is invalid.\n /\n get totalItems() {\n return +this.getAttribute('total-items') \|\| 0;\n }\n\n /\n Sets the visibility of the first button based on the provided value.\n * Adds the 'show-first-button' attribute when the value is truthy, and removes it otherwise.\n * @param {boolean} value Determines whether to show the first button. If true, the 'show-first-button' attribute is added; if false, it is removed.\n /\n set showFirstButton(value) {\n this.removeAttribute('show-first-button');\n\n if (value) {\n this.setAttribute('show-first-button', '');\n }\n }\n\n /\n Determines whether the 'show-first-button' attribute is present on the element.\n * @returns {boolean} True if the 'show-first-button' attribute is set; otherwise, false.\n /\n get showFirstButton() {\n return this.hasAttribute('show-first-button');\n }\n\n /\n Sets the visibility of the \"last\" button. This method controls the presence\n * or absence of the \"show-last-button\" attribute based on the provided value.\n * @param {boolean} value A boolean value indicating whether to show the \"last\" button.\n * If true, the \"show-last-button\" attribute is added;\n * if false, the attribute is removed.\n /\n set showLastButton(value) {\n this.removeAttribute('show-last-button');\n\n if (value) {\n this.setAttribute('show-last-button', '');\n }\n }\n\n /\n Determines if the 'show-last-button' attribute is present on the element.\n * @returns {boolean} True if the 'show-last-button' attribute is present, otherwise false.\n /\n get showLastButton() {\n return this.hasAttribute('show-last-button');\n }\n\n /\n Sets the pagination object by calculating the pagination details\n * based on the total items, current page, page size, and maximum pages.\n * @param {object} value The value to set the pagination object. The pagination details are computed internally.\n /\n set paginateObj(value) {\n this._paginateObj = value;\n }\n\n /\n Retrieves the pagination object used for managing paginated data.\n * @returns {object} The pagination object containing details and functionality for paginating data.\n /\n get paginateObj() {\n return this._paginateObj;\n }\n\n /\n Sets the 'round' attribute on the element. If the provided value is truthy,\n * the 'round' attribute is added. If the value is falsy, the attribute is removed.\n * @param {boolean} value A boolean value determining whether to add or remove the 'round' attribute.\n /\n set round(value) {\n this.removeAttribute('round');\n\n if (value) {\n this.setAttribute('round', '');\n }\n }\n\n /\n Retrieves the value of the 'round' attribute for the current element.\n * @returns {boolean} A boolean indicating whether the 'round' attribute is present on the element.\n /\n get round() {\n return this.hasAttribute('round');\n }\n\n /\n Sets the `show-info` attribute on the element based on the provided value.\n * @param {boolean} value A boolean indicating whether to add or remove the `show-info` attribute.\n /\n set showInfo(value) {\n this.removeAttribute('show-info');\n\n if (value) {\n this.setAttribute('show-info', '');\n }\n }\n\n /\n Retrieves the value of the 'show-info' attribute.\n * Checks if the 'show-info' attribute is present on the element.\n * @returns {boolean} True if the 'show-info' attribute is present, otherwise false.\n /\n get showInfo() {\n return this.hasAttribute('show-info');\n }\n\n /\n Dependencies of the Button element.\n * @type {object}\n /\n dependencies = {\n 'wje-icon': Icon,\n 'wje-button': Button,\n };\n\n className = 'Pagination';\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 Getter for the observedAttributes attribute of the input element.\n * @returns {Array} The attributes to observe for changes.\n /\n static get observedAttributes() {\n return ['page', 'total-items'];\n }\n\n /\n Sets up the attributes for the component.\n /\n setupAttributes() {\n this.isShadowRoot = 'open';\n }\n\n async beforeDraw() {\n this.paginateObj = await paginate(this.totalItems, this.page, this.pageSize, this.maxPages);\n }\n\n /\n Creates a document fragment, appends a new slot element to it, and returns the fragment.\n * @returns {DocumentFragment} A document fragment containing a slot element.\n /\n draw() {\n let fragment = document.createDocumentFragment();\n\n let native = document.createElement('div');\n native.setAttribute('part', 'native');\n native.classList.add('native-pagination');\n\n native.append(this.htmlPagination());\n\n fragment.append(native);\n\n return fragment;\n }\n\n /\n Creates a pagination control for navigating between pages of content.\n * This method generates and returns a document fragment containing pagination controls, including buttons for navigating to the first, previous, next, and last pages, as well as optional informational text about the current set of displayed items and total number of items.\n * @returns {DocumentFragment} A document fragment containing the pagination controls.\n /\n htmlPagination() {\n let fragment = document.createDocumentFragment();\n\n let info = document.createElement('div');\n info.classList.add('info');\n info.innerHTML = `${this.paginateObj.startIndex + 1} - ${this.paginateObj.endIndex + 1} ${this.localizer.translate('wj.pagination.of')} ${this.totalItems}`;\n\n let pagination = document.createElement('div');\n pagination.classList.add('pages');\n\n const button = document.createElement('wje-button');\n button.setAttribute('fill', 'link');\n if (this.round) button.setAttribute('round', '');\n\n // First button\n let firstButton = button.cloneNode(true);\n firstButton.title = this.localizer.translate('wj.pagination.first');\n firstButton.innerHTML = `<wje-icon name=\"chevron-left-pipe\" slot=\"icon-only\"></wje-icon>`;\n firstButton.addEventListener('wje-button:click', (e) => this.pageClickAction(e, 0));\n\n // Previous button\n const prevButton = button.cloneNode(true);\n prevButton.title = this.localizer.translate('wj.pagination.prev');\n prevButton.innerHTML = `<wje-icon name=\"chevron-left\" slot=\"icon-only\"></wje-icon>`;\n if (this.page === 0) prevButton.disabled = true;\n prevButton.addEventListener('wje-button:click', (e) => this.pageClickAction(e, this.page - 1));\n\n // Next button\n const nextButton = button.cloneNode(true);\n nextButton.title = this.localizer.translate('wj.pagination.next');\n nextButton.innerHTML = `<wje-icon name=\"chevron-right\" slot=\"icon-only\"></wje-icon>`;\n if (this.page + 1 >= this.paginateObj.totalPages) nextButton.disabled = true;\n nextButton.addEventListener('wje-button:click', (e) => this.pageClickAction(e, this.page + 1));\n\n // Last button\n let lastButton = button.cloneNode(true);\n lastButton.title = this.localizer.translate('wj.pagination.last');\n lastButton.innerHTML = `<wje-icon name=\"chevron-right-pipe\" slot=\"icon-only\"></wje-icon>`;\n lastButton.disabled = this.paginateObj.endIndex + 1 >= this.totalItems;\n lastButton.addEventListener('wje-button:click', (e) =>\n this.pageClickAction(e, this.paginateObj.totalPages - 1)\n );\n\n if (this.showFirstButton) pagination.appendChild(firstButton);\n pagination.appendChild(prevButton);\n pagination.appendChild(this.htmlStackButtons(this.paginateObj));\n pagination.appendChild(nextButton);\n if (this.showLastButton) pagination.appendChild(lastButton);\n\n if (this.showInfo) fragment.appendChild(info);\n fragment.appendChild(pagination);\n\n return fragment;\n }\n\n /\n Creates and returns a DocumentFragment containing a series of buttons for pagination purposes,\n * based on the provided pagination object.\n * @param {object} paginateObj An object containing pagination details.\n * @param {number} paginateObj.currentPage The current active page index (1-based).\n * @param {Array<number>} paginateObj.pages An array of page numbers to display in the pagination.\n * @param {number} paginateObj.totalPages Total number of pages available for pagination.\n * @returns {DocumentFragment} A DocumentFragment containing the buttons and additional pagination elements.\n /\n htmlStackButtons(paginateObj) {\n let fragment = document.createDocumentFragment();\n\n const button = document.createElement('wje-button');\n button.setAttribute('fill', 'link');\n if (this.round) button.setAttribute('round', '');\n\n let dots = document.createElement('span');\n dots.classList.add('dots');\n\n const first = button.cloneNode(true);\n first.textContent = '1';\n first.addEventListener('wje-button:click', (e) => this.pageClickAction(e, 0));\n\n const last = button.cloneNode(true);\n last.textContent = paginateObj.totalPages;\n last.addEventListener('wje-button:click', (e) => this.pageClickAction(e, paginateObj.totalPages - 1));\n\n if (paginateObj.currentPage >= this.maxPages + 1 && paginateObj.boundary < paginateObj.totalPages) {\n fragment.appendChild(first);\n fragment.appendChild(dots);\n }\n\n paginateObj.pages.forEach((page) => {\n let newButton = button.cloneNode(true);\n newButton.textContent = page;\n\n if (page - 1 === this.page) {\n newButton.removeAttribute('fill');\n } else {\n newButton.addEventListener('wje-button:click', (e) => this.pageClickAction(e, page - 1));\n }\n\n fragment.appendChild(newButton);\n });\n\n if (\n (paginateObj.pages.length === this.maxPages \|\| paginateObj.currentPage < this.maxPages + 1) &&\n paginateObj.boundary < paginateObj.totalPages\n ) {\n fragment.appendChild(dots.cloneNode(true));\n fragment.appendChild(last);\n }\n\n return fragment;\n }\n\n /\n Handles the click action for pagination and updates the current page.\n * If the clicked page number is the same as the current page, no action is performed.\n * Otherwise, the current page is updated to the new page number, and a custom event\n * 'wje-pagination:page-change' is dispatched with the pagination object.\n * @param {Event} e The event triggered by the page click.\n * @param {number} page The page number that was clicked.\n */\n pageClickAction = (e, page) => {\n if (+page === this.page \|\| this.page > this.paginateObj.totalPages) return;\n this.page = page;\n event.dispatchCustomEvent(this, 'wje-pagination:page-change', { page: page });\n };\n}\n\nPagination.define('wje-pagination', Pagination);\n","import Pagination from './pagination.element.js';\n\nexport default Pagination;\n\nPagination.define('wje-pagination', Pagination);\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"wje-pagination.js","sources":["../packages/wje-pagination/service/service.js","../packages/wje-pagination/pagination.element.js","../packages/wje-pagination/pagination.js"],"sourcesContent":["/*\n Paginates items based on the total number of items, current page, page size, and maximum number of pages to display.\n * @param {number} totalItems The total number of items to paginate.\n * @param {number} [currentPage] The current page number (default is 1).\n * @param {number} [pageSize] The number of items per page (default is 10).\n * @param {number} [maxPages] The maximum number of pages to display in the pagination control (default is 5).\n * @returns {object} An object containing pagination details including total items, current page, page size, total pages, start/end page, start/end index, and the pages array.\n /\nexport function paginate(totalItems, currentPage = 1, pageSize = 10, maxPages = 5) {\n // Calculate total pages\n const totalPages = Math.ceil(totalItems / pageSize);\n\n // Ensure current page is within valid range\n if (currentPage < 1) {\n currentPage = 1;\n } else if (currentPage > totalPages) {\n currentPage = totalPages;\n }\n\n let startPage;\n let endPage;\n\n const pagesNearEnd = maxPages + 1; // Define how close to the end we switch back to 5 pages 4\n\n const boundary = pagesNearEnd + 3;\n\n if (totalPages > boundary) {\n if (currentPage < pagesNearEnd) {\n // If in the first 4 pages, show up to 5 pages\n startPage = 1;\n endPage = Math.min(pagesNearEnd + 1, totalPages); //5\n } else if (currentPage >= totalPages - pagesNearEnd) {\n // If within 4 pages from the end, show last 5 pages\n startPage = Math.max(totalPages - pagesNearEnd, 1); //4\n endPage = totalPages;\n } else {\n const halfPages = Math.floor(maxPages / 2);\n // Otherwise, only show 3 pages (current, previous, next)\n startPage = currentPage - halfPages + 1;\n endPage = maxPages % 2 === 1 ? currentPage + halfPages + 1 : currentPage + halfPages - 1;\n }\n } else {\n startPage = 1;\n endPage = totalPages;\n }\n\n // Calculate start and end item indexes\n const startIndex = (currentPage - 1) pageSize;\n const endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1);\n\n // Create an array of pages to display\n const pages = Array.from({ length: endPage - startPage + 1 }, (_, i) => startPage + i);\n\n // Return object with all pager properties (preserving original format)\n return {\n boundary: boundary,\n currentPage: currentPage,\n endIndex: endIndex,\n endPage: endPage,\n totalPages: totalPages,\n pages: pages,\n pageSize: pageSize,\n startIndex: startIndex,\n startPage: startPage,\n totalItems: totalItems,\n };\n}\n","import { Localizer } from '../utils/localize.js';\nimport { default as WJElement, event } from '../wje-element/element.js';\nimport { paginate } from './service/service.js';\nimport Icon from '../wje-icon/icon.js';\nimport Button from '../wje-button/button.js';\nimport styles from './styles/styles.css?inline';\n\n/*\n @summary This class represents the Pagination component for navigating through paginated content and dynamically updating navigation elements based on attributes like the number of items, page size, etc. Extends the WJElement class.\n * @documentation https://elements.webjet.sk/components/pagination\n * @status stable\n * @augments WJElement\n * @dependency wje-icon, wje-button\n * @csspart native - The wrapper element for the pagination component.\n /\nexport default class Pagination extends WJElement {\n /\n Creates an instance of Pagination.\n /\n constructor() {\n super();\n this.localizer = new Localizer(this);\n\n this._paginateObj = null;\n }\n\n /\n Sets the value of the 'page' attribute for the object.\n * @param {string} value The value to set for the 'page' attribute.\n /\n set page(value) {\n this.setAttribute('page', value);\n }\n\n /\n Retrieves the current page number as a numeric value.\n * @returns {number} The current page number. Returns 0 if the attribute 'page' is not set or is not a numeric value.\n /\n get page() {\n return +this.getAttribute('page') \|\| 0;\n }\n\n /\n Sets the maximum number of pages.\n * Updates the 'max-pages' attribute with the provided value.\n * @param {number\|string} value The maximum number of pages to set. Can be a number or a parsable string representing a number.\n /\n set maxPages(value) {\n this.setAttribute('max-pages', value);\n }\n\n /\n Gets the maximum number of pages.\n * This getter retrieves the value of the \"max-pages\" attribute from the element.\n * If the attribute is not set or is invalid, it defaults to 3.\n * @returns {number} The maximum number of pages as a numeric value.\n /\n get maxPages() {\n return +this.getAttribute('max-pages') \|\| 10;\n }\n\n /\n Sets the `pageSize` attribute to the specified value.\n * @param {number\|string} value The desired page size value. This can be a number or a string representation of the size.\n /\n set pageSize(value) {\n this.setAttribute('page-size', value);\n }\n\n /\n Retrieves the value of the 'page-size' attribute and converts it to a number.\n * If the attribute is not set or is invalid, returns the default value of 3.\n * @returns {number} The numeric value of the 'page-size' attribute or the default value of 3.\n /\n get pageSize() {\n return +this.getAttribute('page-size') \|\| 3;\n }\n\n /\n Sets the total number of items.\n * @param {number} value The new total number of items to set.\n /\n set totalItems(value) {\n this.setAttribute('total-items', value);\n }\n\n /\n Retrieves the total number of items represented by the 'total-items' attribute.\n * @returns {number} The total number of items. Defaults to 0 if the attribute is not set or is invalid.\n /\n get totalItems() {\n return +this.getAttribute('total-items') \|\| 0;\n }\n\n /\n Sets the visibility of the first button based on the provided value.\n * Adds the 'show-first-button' attribute when the value is truthy, and removes it otherwise.\n * @param {boolean} value Determines whether to show the first button. If true, the 'show-first-button' attribute is added; if false, it is removed.\n /\n set showFirstButton(value) {\n this.removeAttribute('show-first-button');\n\n if (value) {\n this.setAttribute('show-first-button', '');\n }\n }\n\n /\n Determines whether the 'show-first-button' attribute is present on the element.\n * @returns {boolean} True if the 'show-first-button' attribute is set; otherwise, false.\n /\n get showFirstButton() {\n return this.hasAttribute('show-first-button');\n }\n\n /\n Sets the visibility of the \"last\" button. This method controls the presence\n * or absence of the \"show-last-button\" attribute based on the provided value.\n * @param {boolean} value A boolean value indicating whether to show the \"last\" button.\n * If true, the \"show-last-button\" attribute is added;\n * if false, the attribute is removed.\n /\n set showLastButton(value) {\n this.removeAttribute('show-last-button');\n\n if (value) {\n this.setAttribute('show-last-button', '');\n }\n }\n\n /\n Determines if the 'show-last-button' attribute is present on the element.\n * @returns {boolean} True if the 'show-last-button' attribute is present, otherwise false.\n /\n get showLastButton() {\n return this.hasAttribute('show-last-button');\n }\n\n /\n Sets the pagination object by calculating the pagination details\n * based on the total items, current page, page size, and maximum pages.\n * @param {object} value The value to set the pagination object. The pagination details are computed internally.\n /\n set paginateObj(value) {\n this._paginateObj = value;\n }\n\n /\n Retrieves the pagination object used for managing paginated data.\n * @returns {object} The pagination object containing details and functionality for paginating data.\n /\n get paginateObj() {\n return this._paginateObj;\n }\n\n /\n Sets the 'round' attribute on the element. If the provided value is truthy,\n * the 'round' attribute is added. If the value is falsy, the attribute is removed.\n * @param {boolean} value A boolean value determining whether to add or remove the 'round' attribute.\n /\n set round(value) {\n this.removeAttribute('round');\n\n if (value) {\n this.setAttribute('round', '');\n }\n }\n\n /\n Retrieves the value of the 'round' attribute for the current element.\n * @returns {boolean} A boolean indicating whether the 'round' attribute is present on the element.\n /\n get round() {\n return this.hasAttribute('round');\n }\n\n /\n Sets the `show-info` attribute on the element based on the provided value.\n * @param {boolean} value A boolean indicating whether to add or remove the `show-info` attribute.\n /\n set showInfo(value) {\n this.removeAttribute('show-info');\n\n if (value) {\n this.setAttribute('show-info', '');\n }\n }\n\n /\n Retrieves the value of the 'show-info' attribute.\n * Checks if the 'show-info' attribute is present on the element.\n * @returns {boolean} True if the 'show-info' attribute is present, otherwise false.\n /\n get showInfo() {\n return this.hasAttribute('show-info');\n }\n\n set showPageSizeOptions(value) {\n if (!value) return;\n this.setAttribute('show-page-size-options', value);\n }\n\n get showPageSizeOptions() {\n return this.hasAttribute('show-page-size-options');\n }\n\n set pageSizeOptions(value) {\n if (!value) return;\n this.setAttribute('page-size-options', value);\n }\n\n /\n Retrieves the list of available page size options.\n * This method is used to fetch the values representing the different page size options\n * that can be provided or configured in a paginated component or system.\n * @returns {Array<number>} An array of numbers representing the selectable page size options.\n /\n get pageSizeOptions() {\n let options = this.getAttribute('page-size-options');\n if (!options) return [6, 10, 50, 100, 500];\n return options.split(',').map((o) => +o).filter((o) => !isNaN(o));\n }\n\n set hideEmpty(value) {\n if (!value) return;\n this.setAttribute('hide-empty', value);\n }\n\n get hideEmpty() {\n return this.hasAttribute('hide-empty');\n }\n\n /\n Dependencies of the Button element.\n * @type {object}\n /\n dependencies = {\n 'wje-icon': Icon,\n 'wje-button': Button,\n };\n\n className = 'Pagination';\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 Getter for the observedAttributes attribute of the input element.\n * @returns {Array} The attributes to observe for changes.\n /\n static get observedAttributes() {\n return ['page', 'total-items', 'page-size'];\n }\n\n /\n Sets up the attributes for the component.\n /\n setupAttributes() {\n this.isShadowRoot = 'open';\n }\n\n async beforeDraw() {\n if (!this.totalItems \|\| this.totalItems === 0) {\n this.classList.add('empty');\n if (this.hideEmpty)\n this.setAttribute(\"hidden\", \"\");\n\n return;\n }\n this.paginateObj = await paginate(this.totalItems, this.page, this.pageSize, this.maxPages);\n }\n\n /\n Creates a document fragment, appends a new slot element to it, and returns the fragment.\n * @returns {DocumentFragment} A document fragment containing a slot element.\n /\n draw() {\n let fragment = document.createDocumentFragment();\n\n let native = document.createElement('div');\n native.setAttribute('part', 'native');\n native.classList.add('native-pagination');\n\n native.append(this.htmlPagination());\n\n fragment.append(native);\n\n return fragment;\n }\n\n /\n Creates a pagination control for navigating between pages of content.\n * This method generates and returns a document fragment containing pagination controls, including buttons for navigating to the first, previous, next, and last pages, as well as optional informational text about the current set of displayed items and total number of items.\n * @returns {DocumentFragment} A document fragment containing the pagination controls.\n /\n htmlPagination() {\n let fragment = document.createDocumentFragment();\n\n let select = document.createElement('wje-select');\n select.setAttribute('size', 'small');\n select.setAttribute('variant', 'standard');\n select.setAttribute('value', this.pageSize);\n select.addEventListener('wje-select:change', (e) => {\n this.pageSize = e.detail.context.value[0];\n event.dispatchCustomEvent(this, 'wje-pagination:page-change', { page: this.page, pageSize: this.pageSize });\n });\n\n let options = this.pageSizeOptions.map((o) => {\n let option = document.createElement('wje-option');\n option.value = o;\n option.textContent = o;\n return option;\n });\n\n let info = document.createElement('div');\n info.classList.add('info');\n info.innerHTML = `${this.paginateObj.startIndex + 1} - ${this.paginateObj.endIndex + 1} ${this.localizer.translate('wj.pagination.of')} ${this.totalItems}`;\n\n let pagination = document.createElement('div');\n pagination.classList.add('pages');\n\n const button = document.createElement('wje-button');\n button.setAttribute('fill', 'link');\n if (this.round) button.setAttribute('round', '');\n\n // First button\n let firstButton = button.cloneNode(true);\n firstButton.title = this.localizer.translate('wj.pagination.first');\n firstButton.innerHTML = `<wje-icon name=\"chevron-left-pipe\" slot=\"icon-only\"></wje-icon>`;\n firstButton.addEventListener('wje-button:click', (e) => this.pageClickAction(e, 0));\n\n // Previous button\n const prevButton = button.cloneNode(true);\n prevButton.title = this.localizer.translate('wj.pagination.prev');\n prevButton.innerHTML = `<wje-icon name=\"chevron-left\" slot=\"icon-only\"></wje-icon>`;\n if (this.page === 0) prevButton.disabled = true;\n prevButton.addEventListener('wje-button:click', (e) => this.pageClickAction(e, this.page - 1));\n\n // Next button\n const nextButton = button.cloneNode(true);\n nextButton.title = this.localizer.translate('wj.pagination.next');\n nextButton.innerHTML = `<wje-icon name=\"chevron-right\" slot=\"icon-only\"></wje-icon>`;\n if (this.page + 1 >= this.paginateObj.totalPages) nextButton.disabled = true;\n nextButton.addEventListener('wje-button:click', (e) => this.pageClickAction(e, this.page + 1));\n\n // Last button\n let lastButton = button.cloneNode(true);\n lastButton.title = this.localizer.translate('wj.pagination.last');\n lastButton.innerHTML = `<wje-icon name=\"chevron-right-pipe\" slot=\"icon-only\"></wje-icon>`;\n lastButton.disabled = this.paginateObj.endIndex + 1 >= this.totalItems;\n lastButton.addEventListener('wje-button:click', (e) =>\n this.pageClickAction(e, this.paginateObj.totalPages - 1)\n );\n\n select.append(...options);\n\n if (this.showFirstButton) pagination.appendChild(firstButton);\n pagination.appendChild(prevButton);\n pagination.appendChild(this.htmlStackButtons(this.paginateObj));\n pagination.appendChild(nextButton);\n if (this.showLastButton) pagination.appendChild(lastButton);\n\n if (this.showPageSizeOptions) fragment.append(select);\n if (this.showInfo) fragment.appendChild(info);\n fragment.appendChild(pagination);\n\n return fragment;\n }\n\n /\n Creates and returns a DocumentFragment containing a series of buttons for pagination purposes,\n * based on the provided pagination object.\n * @param {object} paginateObj An object containing pagination details.\n * @param {number} paginateObj.currentPage The current active page index (1-based).\n * @param {Array<number>} paginateObj.pages An array of page numbers to display in the pagination.\n * @param {number} paginateObj.totalPages Total number of pages available for pagination.\n * @returns {DocumentFragment} A DocumentFragment containing the buttons and additional pagination elements.\n /\n htmlStackButtons(paginateObj) {\n let fragment = document.createDocumentFragment();\n\n const button = document.createElement('wje-button');\n button.setAttribute('fill', 'link');\n if (this.round) button.setAttribute('round', '');\n\n let dots = document.createElement('span');\n dots.classList.add('dots');\n\n const first = button.cloneNode(true);\n first.textContent = '1';\n first.addEventListener('wje-button:click', (e) => this.pageClickAction(e, 0));\n\n const last = button.cloneNode(true);\n last.textContent = paginateObj.totalPages;\n last.addEventListener('wje-button:click', (e) => this.pageClickAction(e, paginateObj.totalPages - 1));\n\n if (paginateObj.currentPage >= this.maxPages + 1 && paginateObj.boundary < paginateObj.totalPages) {\n fragment.appendChild(first);\n fragment.appendChild(dots);\n }\n\n paginateObj.pages.forEach((page) => {\n let newButton = button.cloneNode(true);\n newButton.textContent = page;\n\n if (page - 1 === this.page) {\n newButton.removeAttribute('fill');\n } else {\n newButton.addEventListener('wje-button:click', (e) => this.pageClickAction(e, page - 1));\n }\n\n fragment.appendChild(newButton);\n });\n\n if (\n (paginateObj.pages.length === this.maxPages \|\| paginateObj.currentPage < this.maxPages + 1) &&\n paginateObj.boundary < paginateObj.totalPages\n ) {\n fragment.appendChild(dots.cloneNode(true));\n fragment.appendChild(last);\n }\n\n return fragment;\n }\n\n /\n Handles the click action for pagination and updates the current page.\n * If the clicked page number is the same as the current page, no action is performed.\n * Otherwise, the current page is updated to the new page number, and a custom event\n * 'wje-pagination:page-change' is dispatched with the pagination object.\n * @param {Event} e The event triggered by the page click.\n * @param {number} page The page number that was clicked.\n */\n pageClickAction = (e, page) => {\n if (+page === this.page \|\| this.page > this.paginateObj.totalPages) return;\n this.page = page;\n event.dispatchCustomEvent(this, 'wje-pagination:page-change', { page: this.page, pageSize: this.pageSize });\n };\n}\n\nPagination.define('wje-pagination', Pagination);\n","import Pagination from './pagination.element.js';\n\nexport default Pagination;\n\nPagination.define('wje-pagination', Pagination);\n"],"names":[],"mappings":"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"}

package/dist/wje-select.js CHANGED Viewed

@@ -22,7 +22,7 @@ import Option from "./wje-option.js";
 import Options from "./wje-options.js";
 import Checkbox from "./wje-checkbox.js";
 import { P as Popup } from "./popup.element-ZX3dWrG0.js";
-const styles = "/*\n[ WJ Select ]\n*/\n\n:host {\n    margin-bottom: var(--wje-select-margin-bottom);\n    width: 100%;\n    display: block;\n    [slot='arrow'] {\n        transform: rotate(0deg);\n        transition: all 0.2s ease-in;\n    }\n}\n\n.native-select {\n    position: relative;\n    &.default {\n        .wrapper {\n            display: block;\n						background-color: var(--wje-select-background);\n            border-width: var(--wje-select-border-width);\n            border-style: var(--wje-select-border-style);\n            border-color: var(--wje-select-border-color);\n            border-radius: var(--wje-select-border-radius);\n            padding-inline: 0.5rem;\n            padding-top: 0.125rem;\n            padding-bottom: 0.125rem;\n        }\n        .input-wrapper {\n            padding: 0;\n            min-height: 28px;\n            margin-top: -4px;\n        }\n        &.focused {\n            wje-label {\n                opacity: 0.67;\n                font-size: 12px;\n                letter-spacing: normal;\n            }\n        }\n        wje-label {\n            margin: 0;\n            display: block;\n            opacity: 1;\n            cursor: text;\n            transition: opacity 0.2s ease 0s;\n            line-height: var(--wje-select-line-height);\n            &.fade {\n                opacity: 0.5;\n                font-size: 12px;\n                letter-spacing: normal;\n            }\n        }\n    }\n    &.standard {\n        .wrapper {\n            background-color: var(--wje-select-background);\n            border-width: var(--wje-select-border-width);\n            border-style: var(--wje-select-border-style);\n            border-color: var(--wje-select-border-color);\n            border-radius: var(--wje-select-border-radius);\n        }\n        wje-label {\n            line-height: var(--wje-line-height-normal);\n        }\n        .input-wrapper {\n            background: transparent;\n            width: 100%;\n        }\n        slot[name='error'] {\n            position: static;\n\n            background: transparent;\n            padding: 0.25rem 0;\n            left: auto;\n            transform: none;\n            color: var(--wje-input-color-invalid);\n            font-size: 12px;\n            line-height: normal;\n        }\n    }\n}\n\n.wrapper {\n    display: flex;\n    width: 100%;\n}\n\n.input-wrapper {\n    display: grid;\n    grid-template-columns: auto 1fr auto auto auto;\n    align-items: center;\n    background-color: var(--wje-select-background);\n    min-height: 28px;\n    color: var(--wje-select-color);\n    line-height: var(--wje-select-line-height);\n    appearance: none;\n    padding: 2px 0.5rem;\n    font-size: 14px !important;\n    font-weight: normal;\n    vertical-align: middle;\n    input[readonly] {\n        pointer-events: none;\n        caret-color: transparent;\n    }\n}\n\ninput {\n    color: var(--wje-select-color);\n    line-height: var(--wje-select-line-height);\n    font-size: 14px !important;\n    font-weight: 400;\n    letter-spacing: 0.01em;\n    border: medium;\n    height: 25px;\n    min-height: 25px;\n    padding: 0;\n    background: none;\n    box-shadow: none;\n    width: 100%;\n    outline: 0;\n    font-size: 14px !important;\n}\n\n::placeholder {\n    opacity: 1;\n}\n\n:host [active] {\n    .wrapper {\n        border-radius: var(--wje-select-border-radius);\n    }\n    [slot='arrow'] {\n        transform: rotate(180deg);\n        transition: all 0.2s ease-in;\n    }\n}\n\n.options-wrapper {\n    border-width: var(--wje-select-options-border-width);\n    border-style: var(--wje-select-options-border-style);\n    border-color: var(--wje-select-options-border-color);\n    border-radius: var(--wje-select-options-border-radius);\n    margin-top: calc(0px - var(--wje-select-border-width));\n    background: var(--wje-select-background);\n    overflow: hidden;\n}\n\n.find {\n    margin-block: var(--wje-select-find-margin-block);\n    margin-inline: var(--wje-select-find-margin-inline);\n    width: var(--wje-select-find-width);\n}\n\n.list {\n    overflow: auto;\n    height: 100%;\n}\n\n.options-wrapper:has(.find) .list {\n    height: calc(100% - 32px - 2 * var(--wje-select-find-margin-block));\n}\n\n:host([multiple]) input {\n    position: absolute;\n    z-index: -1;\n    top: 0;\n    left: 0;\n    width: 0;\n    height: 0;\n    opacity: 0;\n}\n\n:host([multiple]) .chips {\n    display: flex;\n    flex: 1;\n    align-items: center;\n    flex-wrap: wrap;\n    gap: var(--wje-spacing-3x-small);\n}\n\n:host([disabled]) .input-wrapper {\n    opacity: 0.5;\n    pointer-events: none;\n    cursor: not-allowed;\n}\n\n.counter {\n    padding-inline: 0.5rem;\n}\n\nwje-chip {\n    --wje-chip-margin: 0 0.25rem 0 0;\n}\n\nwje-button {\n    --wje-padding-top: 0.25rem;\n    --wje-padding-start: 0.25rem;\n    --wje-padding-end: 0.25rem;\n    --wje-padding-bottom: 0.25rem;\n    --wje-button-margin-inline: 0 0.25rem;\n}\n\n.slot-start,\n.slot-end {\n    &:not(:empty) {\n        margin-right: 0.5rem;\n    }\n}\n\nslot[name='error'] {\n    display: none;\n}\n\n:host([invalid]) slot[name='error'] {\n    display: block;\n}\n\nslot[name='error'] {\n    display: none;\n    position: absolute;\n    max-width: 100%;\n    min-width: auto;\n    border-radius: 50px;\n    background: black;\n    padding: 0.25rem 0.5rem;\n    top: 0;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    color: white;\n    font-size: var(--wje-font-size-small);\n    width: max-content;\n    line-height: normal;\n}\n\n.input-hidden{\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    padding: 0;\n    margin: 0;\n    opacity: 0;\n    z-index: -1;\n}\n\n:host([required]) .wrapper::after {\n    color: var(--wje-input-color-invalid);\n    content: var(--wje-input-required-symbol);\n    font-size: 24px;\n    position: absolute;\n    right: 12px;\n    top: 0;\n}\n\n:host([required]) .standard .input-wrapper::after {\n    right: 13px;\n    top: -20px;\n}";
+const styles = "/*\n[ WJ Select ]\n*/\n\n:host {\n    margin-bottom: var(--wje-select-margin-bottom);\n    width: 100%;\n    display: block;\n    [slot='arrow'] {\n        transform: rotate(0deg);\n        transition: all 0.2s ease-in;\n    }\n}\n\n.native-select {\n    position: relative;\n    &.default {\n        .wrapper {\n            display: block;\n						background-color: var(--wje-select-background);\n            border-width: var(--wje-select-border-width);\n            border-style: var(--wje-select-border-style);\n            border-color: var(--wje-select-border-color);\n            border-radius: var(--wje-select-border-radius);\n            padding-inline: 0.5rem;\n            padding-top: 0.125rem;\n            padding-bottom: 0.125rem;\n        }\n        .input-wrapper {\n            padding: 0;\n            min-height: 28px;\n            margin-top: -4px;\n        }\n        &.focused {\n            wje-label {\n                opacity: 0.67;\n                font-size: 12px;\n                letter-spacing: normal;\n            }\n        }\n        wje-label {\n            margin: 0;\n            display: block;\n            opacity: 1;\n            cursor: text;\n            transition: opacity 0.2s ease 0s;\n            line-height: var(--wje-select-line-height);\n            &.fade {\n                opacity: 0.5;\n                font-size: 12px;\n                letter-spacing: normal;\n            }\n        }\n    }\n    &.standard {\n        .wrapper {\n            height: 32px;\n            box-sizing: border-box;\n            background-color: var(--wje-select-background);\n            border-width: var(--wje-select-border-width);\n            border-style: var(--wje-select-border-style);\n            border-color: var(--wje-select-border-color);\n            border-radius: var(--wje-select-border-radius);\n        }\n        wje-label {\n            line-height: var(--wje-line-height-normal);\n        }\n        .input-wrapper {\n            background: transparent;\n            width: 100%;\n        }\n        slot[name='error'] {\n            position: static;\n\n            background: transparent;\n            padding: 0.25rem 0;\n            left: auto;\n            transform: none;\n            color: var(--wje-input-color-invalid);\n            font-size: 12px;\n            line-height: normal;\n        }\n    }\n}\n\n.wrapper {\n    display: flex;\n    width: 100%;\n}\n\n.input-wrapper {\n    display: grid;\n    grid-template-columns: auto 1fr auto auto auto;\n    align-items: center;\n    background-color: var(--wje-select-background);\n    min-height: 28px;\n    color: var(--wje-select-color);\n    line-height: var(--wje-select-line-height);\n    appearance: none;\n    padding: 2px 0.5rem;\n    font-size: 14px !important;\n    font-weight: normal;\n    vertical-align: middle;\n    input[readonly] {\n        pointer-events: none;\n        caret-color: transparent;\n    }\n}\n\ninput {\n    color: var(--wje-select-color);\n    line-height: var(--wje-select-line-height);\n    font-size: 14px !important;\n    font-weight: 400;\n    letter-spacing: 0.01em;\n    border: medium;\n    height: 25px;\n    min-height: 25px;\n    padding: 0;\n    background: none;\n    box-shadow: none;\n    width: 100%;\n    outline: 0;\n    font-size: 14px !important;\n}\n\n::placeholder {\n    opacity: 1;\n}\n\n:host [active] {\n    .wrapper {\n        border-radius: var(--wje-select-border-radius);\n    }\n    [slot='arrow'] {\n        transform: rotate(180deg);\n        transition: all 0.2s ease-in;\n    }\n}\n\n.options-wrapper {\n    border-width: var(--wje-select-options-border-width);\n    border-style: var(--wje-select-options-border-style);\n    border-color: var(--wje-select-options-border-color);\n    border-radius: var(--wje-select-options-border-radius);\n    margin-top: calc(0px - var(--wje-select-border-width));\n    background: var(--wje-select-background);\n    overflow: hidden;\n}\n\n.find {\n    margin-block: var(--wje-select-find-margin-block);\n    margin-inline: var(--wje-select-find-margin-inline);\n    width: var(--wje-select-find-width);\n}\n\n.list {\n    overflow: auto;\n    height: 100%;\n}\n\n.options-wrapper:has(.find) .list {\n    height: calc(100% - 32px - 2 * var(--wje-select-find-margin-block));\n}\n\n:host([multiple]) input {\n    position: absolute;\n    z-index: -1;\n    top: 0;\n    left: 0;\n    width: 0;\n    height: 0;\n    opacity: 0;\n}\n\n:host([multiple]) .chips {\n    display: flex;\n    flex: 1;\n    align-items: center;\n    flex-wrap: wrap;\n    gap: var(--wje-spacing-3x-small);\n}\n\n:host([disabled]) .input-wrapper {\n    opacity: 0.5;\n    pointer-events: none;\n    cursor: not-allowed;\n}\n\n.counter {\n    padding-inline: 0.5rem;\n}\n\nwje-chip {\n    --wje-chip-margin: 0 0.25rem 0 0;\n}\n\nwje-button {\n    --wje-padding-top: 0.25rem;\n    --wje-padding-start: 0.25rem;\n    --wje-padding-end: 0.25rem;\n    --wje-padding-bottom: 0.25rem;\n    --wje-button-margin-inline: 0 0.25rem;\n}\n\n.slot-start,\n.slot-end {\n    &:not(:empty) {\n        margin-right: 0.5rem;\n    }\n}\n\nslot[name='error'] {\n    display: none;\n}\n\n:host([invalid]) slot[name='error'] {\n    display: block;\n}\n\nslot[name='error'] {\n    display: none;\n    position: absolute;\n    max-width: 100%;\n    min-width: auto;\n    border-radius: 50px;\n    background: black;\n    padding: 0.25rem 0.5rem;\n    top: 0;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    color: white;\n    font-size: var(--wje-font-size-small);\n    width: max-content;\n    line-height: normal;\n}\n\n.input-hidden{\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    padding: 0;\n    margin: 0;\n    opacity: 0;\n    z-index: -1;\n}\n\n:host([required]) .wrapper::after {\n    color: var(--wje-input-color-invalid);\n    content: var(--wje-input-required-symbol);\n    font-size: 24px;\n    position: absolute;\n    right: 12px;\n    top: 0;\n}\n\n:host([required]) .standard .input-wrapper::after {\n    right: 13px;\n    top: -20px;\n}";
 class Select extends FormAssociatedElement {
   constructor() {
     super();

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "wj-elements",
   "description": "WebJET Elements is a modern set of user interface tools harnessing the power of web components designed to simplify web application development.",
-  "version": "0.1.204",
+  "version": "0.1.206",
   "homepage": "https://github.com/lencys/wj-elements",
   "author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
   "license": "MIT",