wj-elements 0.1.141 → 0.1.142

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 (114) hide show
  1. package/dist/dark.css +6 -2
  2. package/dist/infinite-scroll.element-XVJukzjy.js.map +1 -1
  3. package/dist/light.css +14 -2
  4. package/dist/localize.js +2 -6
  5. package/dist/localize.js.map +1 -1
  6. package/dist/packages/index.d.ts +2 -0
  7. package/dist/packages/localize/localize.d.ts +1 -1
  8. package/dist/packages/translations/en-gb.d.ts +5 -0
  9. package/dist/packages/utils/permissions-api.d.ts +2 -2
  10. package/dist/packages/wje-accordion/accordion.element.d.ts +2 -2
  11. package/dist/packages/wje-accordion-item/accordion-item.element.d.ts +1 -1
  12. package/dist/packages/wje-animation/animation.element.d.ts +1 -1
  13. package/dist/packages/wje-aside/aside.element.d.ts +1 -1
  14. package/dist/packages/wje-badge/badge.element.d.ts +1 -1
  15. package/dist/packages/wje-breadcrumb/breadcrumb.element.d.ts +2 -2
  16. package/dist/packages/wje-breadcrumbs/breadcrumbs.element.d.ts +3 -3
  17. package/dist/packages/wje-button/button.element.d.ts +5 -5
  18. package/dist/packages/wje-button-group/button-group.element.d.ts +2 -2
  19. package/dist/packages/wje-card/card.element.d.ts +1 -1
  20. package/dist/packages/wje-card-content/card-content.element.d.ts +1 -1
  21. package/dist/packages/wje-card-controls/card-controls.element.d.ts +1 -1
  22. package/dist/packages/wje-card-header/card-header.element.d.ts +1 -1
  23. package/dist/packages/wje-card-subtitle/card-subtitle.element.d.ts +1 -1
  24. package/dist/packages/wje-card-title/card-title.element.d.ts +1 -1
  25. package/dist/packages/wje-carousel/carousel.element.d.ts +2 -2
  26. package/dist/packages/wje-chip/chip.element.d.ts +1 -0
  27. package/dist/packages/wje-color-picker/color-picker.element.d.ts +4 -4
  28. package/dist/packages/wje-color-picker/color-picker.test.d.ts +1 -0
  29. package/dist/packages/wje-container/container.element.d.ts +1 -1
  30. package/dist/packages/wje-dialog/dialog.element.d.ts +2 -2
  31. package/dist/packages/wje-dropdown/dropdown.element.d.ts +2 -2
  32. package/dist/packages/wje-element/element.d.ts +2 -2
  33. package/dist/packages/wje-file-upload/file-upload.element.d.ts +2 -2
  34. package/dist/packages/wje-file-upload-item/file-upload-item.element.d.ts +1 -1
  35. package/dist/packages/wje-footer/footer.element.d.ts +1 -1
  36. package/dist/packages/wje-format-digital/format-digital.element.d.ts +1 -1
  37. package/dist/packages/wje-header/header.element.d.ts +1 -1
  38. package/dist/packages/wje-icon/icon.element.d.ts +1 -1
  39. package/dist/packages/wje-icon-picker/icon-picker.element.d.ts +1 -1
  40. package/dist/packages/wje-img/img.element.d.ts +1 -1
  41. package/dist/packages/wje-img-comparer/img-comparer.element.d.ts +1 -1
  42. package/dist/packages/wje-infinite-scroll/infinite-scroll.element.d.ts +3 -3
  43. package/dist/packages/wje-input-file/input-file.element.d.ts +1 -1
  44. package/dist/packages/wje-item/item.element.d.ts +1 -1
  45. package/dist/packages/wje-kanban/kanban.element.d.ts +3 -3
  46. package/dist/packages/wje-label/label.element.d.ts +1 -1
  47. package/dist/packages/wje-level-indicator/level-indicator.d.ts +2 -0
  48. package/dist/packages/wje-level-indicator/level-indicator.element.d.ts +91 -0
  49. package/dist/packages/wje-main/main.element.d.ts +1 -1
  50. package/dist/packages/wje-menu/menu.element.d.ts +1 -1
  51. package/dist/packages/wje-menu-button/menu-button.element.d.ts +1 -1
  52. package/dist/packages/wje-menu-label/menu-label.element.d.ts +1 -1
  53. package/dist/packages/wje-option/option.element.d.ts +1 -1
  54. package/dist/packages/wje-options/options.element.d.ts +1 -1
  55. package/dist/packages/wje-pagination/pagination.d.ts +2 -0
  56. package/dist/packages/wje-pagination/pagination.element.d.ts +166 -0
  57. package/dist/packages/wje-pagination/pagination.test.d.ts +1 -0
  58. package/dist/packages/wje-pagination/service/service.d.ts +9 -0
  59. package/dist/packages/wje-popup/popup.element.d.ts +1 -1
  60. package/dist/packages/wje-progress-bar/progress-bar.element.d.ts +1 -1
  61. package/dist/packages/wje-radio/radio.element.d.ts +1 -1
  62. package/dist/packages/wje-rate/rate.element.d.ts +3 -3
  63. package/dist/packages/wje-relative-time/relative-time.element.d.ts +1 -1
  64. package/dist/packages/wje-reorder/reorder.element.d.ts +1 -1
  65. package/dist/packages/wje-route/route.element.d.ts +1 -1
  66. package/dist/packages/wje-router/router.element.d.ts +1 -1
  67. package/dist/packages/wje-router-link/router-link.element.d.ts +1 -1
  68. package/dist/packages/wje-select/select.element.d.ts +2 -2
  69. package/dist/packages/wje-slider/slider.element.d.ts +1 -1
  70. package/dist/packages/wje-split-view/split-view.element.d.ts +1 -1
  71. package/dist/packages/wje-textarea/textarea.element.d.ts +1 -1
  72. package/dist/packages/wje-tree/tree.test.d.ts +1 -0
  73. package/dist/packages/wje-tree-item/tree-item.element.d.ts +2 -2
  74. package/dist/packages/wje-tree-item/tree-item.test.d.ts +1 -0
  75. package/dist/wje-animation.js +3 -3
  76. package/dist/wje-animation.js.map +1 -1
  77. package/dist/wje-button.js +4 -2
  78. package/dist/wje-button.js.map +1 -1
  79. package/dist/wje-checkbox.js +1 -1
  80. package/dist/wje-checkbox.js.map +1 -1
  81. package/dist/wje-chip.js +7 -2
  82. package/dist/wje-chip.js.map +1 -1
  83. package/dist/wje-color-picker.js.map +1 -1
  84. package/dist/wje-dialog.js +1 -1
  85. package/dist/wje-dialog.js.map +1 -1
  86. package/dist/wje-element.js +4 -5
  87. package/dist/wje-element.js.map +1 -1
  88. package/dist/wje-fetchAndParseCSS.js.map +1 -1
  89. package/dist/wje-file-upload-item.js.map +1 -1
  90. package/dist/wje-file-upload.js.map +1 -1
  91. package/dist/wje-format-digital.js.map +1 -1
  92. package/dist/wje-icon-picker.js +6 -8
  93. package/dist/wje-icon-picker.js.map +1 -1
  94. package/dist/wje-level-indicator.js +160 -0
  95. package/dist/wje-level-indicator.js.map +1 -0
  96. package/dist/wje-master.js +190 -651
  97. package/dist/wje-master.js.map +1 -1
  98. package/dist/wje-options.js +1 -6
  99. package/dist/wje-options.js.map +1 -1
  100. package/dist/wje-pagination.js +355 -0
  101. package/dist/wje-pagination.js.map +1 -0
  102. package/dist/wje-slider.js +1 -1
  103. package/dist/wje-slider.js.map +1 -1
  104. package/dist/wje-split-view.js.map +1 -1
  105. package/dist/wje-store.js +5 -7
  106. package/dist/wje-store.js.map +1 -1
  107. package/dist/wje-textarea.js +1 -4
  108. package/dist/wje-textarea.js.map +1 -1
  109. package/dist/wje-tree-item.js +371 -0
  110. package/dist/wje-tree-item.js.map +1 -0
  111. package/dist/wje-tree.js +205 -0
  112. package/dist/wje-tree.js.map +1 -0
  113. package/package.json +6 -3
  114. /package/dist/packages/{bundle.d.ts → wje-accordion/accordion.test.d.ts} +0 -0
@@ -1 +1 @@
1
- {"version":3,"file":"wje-master.js","sources":["../packages/utils/date.js","../packages/translations/sk-sk.js","../packages/translations/en-gb.js","../packages/wje-timeline/timeline.element.js","../packages/wje-timeline/timeline.js","../packages/wje-timeline-item/timeline-item.element.js","../packages/wje-timeline-item/timeline-item.js","../packages/wje-tree/tree.element.js","../packages/wje-tree/tree.js","../packages/wje-tree-item/tree-item.element.js","../packages/wje-tree-item/tree-item.js"],"sourcesContent":["export function formatDate(input, format) {\n let date;\n\n // Rozpoznanie typu vstupu a jeho konverzia na objekt Date\n if (typeof input === 'string') {\n date = new Date(input); // Predpokladáme, že je to ISO reťazec\n } else if (typeof input === 'number') {\n date = new Date(input); // Predpokladáme, že je to timestamp\n } else if (input instanceof Date) {\n date = input; // Je to objekt Date\n } else {\n throw new Error('Invalid date input');\n }\n\n const map = {\n yyyy: date.getFullYear(),\n MM: String(date.getMonth() + 1).padStart(2, '0'), // Mesiace sú indexované od 0\n dd: String(date.getDate()).padStart(2, '0'),\n HH: String(date.getHours()).padStart(2, '0'),\n mm: String(date.getMinutes()).padStart(2, '0'),\n ss: String(date.getSeconds()).padStart(2, '0'),\n MMMM: date.toLocaleString('en-US', { month: 'long' }), // Full month name\n MMM: date.toLocaleString('en-US', { month: 'short' }), // Short month name\n };\n\n return format.replace(/yyyy|MM|dd|HH|mm|ss|MMMM|MMM/g, (matched) => map[matched]);\n}\n","import { Localizer } from '../utils/localize.js';\n\nexport const skSk = {\n code: 'sk-sk',\n name: 'Slovak',\n dir: 'ltr',\n\n welcome: 'Vitajte',\n 'wj.file.upload.button': 'Vybrať súbor',\n 'wj.file.upload.uploaded': 'Nahraných: ',\n 'wj.file.upload.from': 'z',\n 'wj.stepper.button.next': 'Ďalej',\n 'wj.stepper.button.finish': 'Dokončiť',\n 'wj.stepper.button.previous': 'Späť',\n 'wj.stepper.step': 'Krok',\n};\n\nLocalizer.registerTranslation(skSk);\n","import { Localizer } from '../utils/localize.js';\n\nexport const enGb = {\n code: 'en-gb',\n name: 'English',\n dir: 'ltr',\n\n welcome: 'Welcome',\n 'wj.file.upload.button': 'Browse files',\n 'wj.file.upload.uploaded': 'Uploaded: ',\n 'wj.file.upload.from': 'from',\n 'wj.stepper.button.next': 'Next',\n 'wj.stepper.button.finish': 'Finish',\n 'wj.stepper.button.previous': 'Previous',\n 'wj.stepper.step': 'Step',\n};\n\nLocalizer.registerTranslation(enGb);\n","import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Timeline` is a custom web component that represents a timeline.\n * @summary This element represents a timeline.\n * @documentation https://elements.webjet.sk/components/timeline\n * @status stable\n * @augments WJElement\n * @slot - Slot for the timeline items.\n * @csspart native - The native part of the rating component.\n * @csspart vertical-line - The vertical line part of the rating component.\n * @tag wje-timeline\n */\nexport default class Timeline extends WJElement {\n /**\n * Creates an instance of Timeline.\n */\n constructor() {\n super();\n }\n\n /**\n * The class name for the component.\n */\n className = 'Timeline';\n\n /**\n * Returns the CSS stylesheet for the component.\n * @static\n * @returns {CSSStyleSheet} The CSS stylesheet\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n /**\n * Sets up the attributes for the component.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n }\n\n /**\n * Draws the component for the timeline.\n * @returns {DocumentFragment}\n */\n draw() {\n let fragment = document.createDocumentFragment();\n\n const native = document.createElement('div');\n native.setAttribute('part', 'native');\n native.classList.add('native-timeline');\n\n const verticalLine = document.createElement('div');\n verticalLine.setAttribute('part', 'vertical-line');\n verticalLine.classList.add('vertical-line');\n\n const slot = document.createElement('slot');\n\n native.appendChild(verticalLine);\n native.appendChild(slot);\n\n fragment.appendChild(native);\n\n return fragment;\n }\n}\n","import Timeline from './timeline.element.js';\n\nexport default Timeline;\n\nTimeline.define('wje-timeline', Timeline);\n","import { formatDate } from '../utils/date.js';\nimport { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * The TimelineItem component.\n * @summary This element represents a timeline item.\n * @documentation https://elements.webjet.sk/components/timeline-item\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native part of the timeline item.\n * @csspart content-container - The content container part of the timeline item.\n * @csspart default-icon - The default icon part of the timeline item.\n * @slot - Slot for the content of the timeline item.\n * @slot status - Slot for the status of the timeline item.\n * @tag wje-timeline-item\n */\nexport default class TimelineItem extends WJElement {\n constructor() {\n super();\n }\n\n /**\n * Returns the class name of the tab.\n * @returns {string} The class name of the tab.\n */\n className = 'TimelineItem';\n\n /**\n * Returns the CSS styles for the component.\n * @static\n * @returns {CSSStyleSheet}\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n /**\n * Sets up the attributes for the component.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n this.setAttribute('relative-time', '');\n }\n\n /**\n * Draws the component for the timeline item.\n * @returns {DocumentFragment}\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-timeline-item');\n\n let contentContainer = document.createElement('div');\n contentContainer.setAttribute('part', 'content-container');\n contentContainer.classList.add('content-container');\n\n let tooltip = document.createElement('wje-tooltip');\n tooltip.setAttribute('text', this.getAttribute('tooltip') || '');\n tooltip.setAttribute('position', 'top');\n tooltip.setAttribute('content', formatDate(this.datetime, 'dd.MM.yyyy HH:mm'));\n\n let relativeTime = document.createElement('wje-relative-time');\n relativeTime.setAttribute('date', this.datetime || '');\n relativeTime.setAttribute('format', this.getAttribute('format') || '');\n\n tooltip.appendChild(relativeTime);\n\n let event = document.createElement('h3');\n event.classList.add('event');\n event.textContent = this.getAttribute('event') || '';\n\n // additional text content\n let slot = document.createElement('slot');\n\n // status slot\n let slotStatus = document.createElement('wje-icon');\n slotStatus.setAttribute('name', 'circle-dot');\n slotStatus.setAttribute('filled', '');\n slotStatus.setAttribute('part', 'default-icon');\n\n // if status slot is present\n if (this.querySelector('[slot=\"status\"]')) {\n slotStatus = document.createElement('slot');\n slotStatus.setAttribute('name', 'status');\n }\n\n contentContainer.appendChild(tooltip);\n contentContainer.appendChild(event);\n contentContainer.appendChild(slot);\n\n native.appendChild(slotStatus);\n native.appendChild(contentContainer);\n\n fragment.appendChild(native);\n\n return fragment;\n }\n}\n","import TimelineItem from './timeline-item.element.js';\n\nexport default TimelineItem;\n\nTimelineItem.define('wje-timeline-item', TimelineItem);\n","import { default as WJElement } from \"../wje-element/element.js\";\nimport styles from \"./styles/styles.css?inline\";\n\n/**\n * `Tree` is a custom web component that represents a hierarchical tree structure.\n * It extends from `WJElement`.\n * @summary This element visually represents a tree structure, supporting single or multiple selection modes and hierarchy management.\n * @documentation https://elements.webjet.sk/components/tree\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native container part of the tree.\n * @slot - The default slot to place `wje-tree-item` child components.\n * @tag wje-tree\n */\n\nexport default class Tree extends WJElement {\n /**\n * Creates an instance of Toast.\n */\n constructor() {\n super();\n }\n\n /**\n * Sets the selection attribute for the element.\n * @param {string} value The value to set as the selection attribute.\n */\n set selection(value) {\n this.setAttribute('selection', value);\n }\n\n /**\n * Gets the current selection mode for the element.\n * If no selection is explicitly set, it defaults to 'single'.\n * @returns {string} The current selection mode, either set by the element's attribute or the default value 'single'.\n */\n get selection() {\n return this.getAttribute('selection') || 'single';\n }\n\n /**\n * The class name for the component.\n * @type {string}\n */\n className = 'Tree';\n\n /**\n * Returns the CSS stylesheet for the component.\n * @static\n * @returns {CSSStyleSheet} The CSS stylesheet\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n /**\n * Setup attributes for the Button element.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n }\n\n /**\n * A method called before the drawing or rendering process of tree items.\n * It iterates through all `wje-tree-item` elements, updating their selection state\n * and managing their expand/collapse icons accordingly.\n * @returns {void} This method does not return a value.\n */\n beforeDraw() {\n const items = this.querySelectorAll('wje-tree-item');\n items?.forEach(item => {\n item.selection = this.selection;\n\n this.getExpandCollapseIcon(item,'expand');\n this.getExpandCollapseIcon(item,'collapse');\n\n });\n }\n\n /**\n * Draw method for the toast notification.\n * @returns {object} Document fragment\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-tree');\n\n let slot = document.createElement('slot');\n\n native.appendChild(slot);\n\n fragment.appendChild(native);\n\n return fragment;\n }\n\n /**\n * Called after the draw process of the component is completed.\n * Typically used to add event listeners or perform operations\n * that are dependent on the component's drawn state.\n * @returns {void} This method does not return a value.\n */\n afterDraw() {\n this.addEventListener('click', this.handleClick);\n }\n\n /**\n * Handles the click event triggered by the user interaction.\n * Identifies the closest tree item element to the event target and sets it\n * as the selected item. Ensures that only one item is selected at a time, resetting\n * the selection state for all other items.\n * @param {Event} e The click event object.\n */\n handleClick = (e) => {\n let selectedItem = e.target.closest('wje-tree-item');\n let isClickButton = e.composedPath().some((el) => el?.classList?.contains('toggle'));\n if(isClickButton)\n return;\n\n if (this.selection === 'single') {\n if (selectedItem) {\n for (let item of this.getAllItems()) {\n item.selected = item === selectedItem;\n }\n }\n } else if (this.selection === 'multiple') {\n // let children = selectedItem.getAllChildrenFlat();\n selectedItem.selected = !selectedItem.selected;\n\n this.updateCheckboxState(selectedItem);\n }\n }\n\n /**\n * Retrieves all items that match the selector 'wje-tree-item' within the current context.\n * @returns {Array<Element>} An array of all matching DOM elements.\n */\n getAllItems() {\n return [...this.querySelectorAll('wje-tree-item')];\n }\n\n /**\n * Retrieves and appends an expand/collapse icon to a given item based on the provided status.\n * @param {HTMLElement} item The DOM element to which the icon will be appended.\n * @param {string} status The status indicating which icon to retrieve (e.g., \"expand\" or \"collapse\").\n * @returns {void} This method does not return a value. If the icon matching the given status is not found, a warning is logged.\n */\n getExpandCollapseIcon(item, status) {\n let icon = this.querySelector(`[slot=\"${status}\"]`);\n if (!icon) {\n console.warn(`Icon with slot \"${status}\" was not found.`);\n return;\n }\n\n let iconClone = icon.cloneNode(true);\n item.appendChild(iconClone);\n }\n\n\n /**\n * Updates the state of a checkbox, syncing the state both upwards to parent elements\n * and downwards to child elements as necessary.\n * @param {object} changedItem The specific item whose checkbox state has changed.\n * @param {boolean} [isInitialSync] Indicates whether the state update is part of the initial synchronization process.\n * @returns {void} This method does not return a value.\n */\n updateCheckboxState(changedItem, isInitialSync = false) {\n this.isInitialSync = isInitialSync;\n this.propagateStateDownwards(changedItem);\n this.propagateStateUpwards(changedItem);\n }\n\n /**\n * Updates the state of the parent item based on the state of its child items.\n * Recursively propagates changes up to all parent items to reflect the selection\n * or indeterminate state accurately.\n * @param {object} item The current tree item whose parent state needs to be updated.\n * It is expected to have properties `selected`, `indeterminate`,\n * and a method `getChildrenItems({ includeDisabled: boolean })`.\n * @returns {void} This method does not return a value.\n */\n updateParentState(item) {\n const children = item.getChildrenItems({ includeDisabled: false });\n\n if (children.length) {\n const areAllChildrenChecked = children.every(child => child.selected);\n const areSomeChildrenChecked = children.some(child => child.selected);\n const areSomeChildrenIndeterminate = children.some(child => child.indeterminate);\n\n item.selected = areAllChildrenChecked;\n item.indeterminate = areSomeChildrenIndeterminate || (areSomeChildrenChecked && !areAllChildrenChecked);\n } else {\n item.indeterminate = false;\n }\n\n const parent = item.parentElement?.closest('wje-tree-item');\n if (parent) {\n this.updateParentState(parent);\n }\n }\n\n /**\n * Propagates the state changes of an item upwards through its ancestors in the hierarchy.\n * Calls the `updateParentState` method for each parent element until no parent exists.\n * @param {HTMLElement} item The current item whose state to propagate to its parent.\n * @returns {void} This method does not return a value.\n */\n propagateStateUpwards(item) {\n const parent = item.parentElement?.closest('wje-tree-item');\n\n if (parent) {\n this.updateParentState(parent);\n this.propagateStateUpwards(parent);\n }\n }\n\n /**\n * Propagates the selected state of an item to its children recursively. Depending on the `isInitialSync` flag,\n * it also determines how the state should be applied to the child items and updates the parent state if needed.\n * @param {object} item The item whose state is being propagated to its child items. The item must have properties\n * such as `selected` and methods like `getChildrenItems` to retrieve its child elements.\n * @returns {void} This method does not return a value.\n */\n propagateStateDownwards(item) {\n const isChecked = item.selected;\n\n item.getChildrenItems().forEach(child => {\n child.selected = this.isInitialSync ? (isChecked || child.selected) : (!child.disabled && isChecked);\n this.propagateStateDownwards(child);\n });\n\n if (this.isInitialSync) {\n this.updateParentState(item);\n }\n }\n}","import Tree from './tree.element.js';\n\nexport default Tree;\n\nTree.define('wje-tree', Tree);\n","import { default as WJElement, WjElementUtils, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `wje-tree-item` is a custom web component used as a child of the `wje-tree`.\n * It represents a node within a tree structure, capable of nesting other items.\n * @summary Represents a single item in a tree structure.\n * @documentation https://elements.webjet.sk/components/tree-item\n * @status stable\n * @augments {HTMLElement}\n * @slot - Default slot for rendering the tree item's content (e.g., text or custom elements).\n * @csspart native - The native container of the tree item.\n * @cssproperty [--wje-tree-item-indent=var(--wje-spacing-large)] - Defines the indentation for nested tree items.\n * @cssproperty [--wje-tree-item-indent-guid-width=0px] - Specifies the width of the guide element shown next to a tree item.\n * @cssproperty [--wje-tree-item-border-radius=var(--wje-border-radius-medium)] - Sets the border radius of the tree item’s container.\n * @tag wje-tree-item\n */\n\nexport default class TreeItem extends WJElement {\n /**\n * Creates an instance of Toast.\n */\n constructor() {\n super();\n\n this._selection = 'single';\n }\n\n /**\n * Sets the expanded state of the element. When set to a truthy value,\n * the 'expanded' attribute will be added to the element. When set to a falsy\n * value, the 'expanded' attribute will be removed.\n * @param {boolean} value A boolean value indicating whether the\n * element should be expanded (true) or collapsed (false).\n */\n set expanded(value) {\n if (value) {\n this.setAttribute('expanded', '');\n } else {\n this.removeAttribute('expanded');\n }\n }\n\n /**\n * Retrieves the value of the 'expanded' state for the current element.\n * This getter checks whether the 'expanded' attribute is present on the element.\n * If the attribute exists, it returns true, representing that the element is expanded.\n * Otherwise, it returns false, indicating that the element is not expanded.\n * @returns {boolean} True if the 'expanded' attribute is present, false otherwise.\n */\n get expanded() {\n return this.hasAttribute('expanded');\n }\n\n /**\n * Sets the 'selected' attribute of the element. Removes the attribute if the provided value is falsy; otherwise, sets it.\n * @param {boolean} value The value indicating whether the element should have the 'selected' attribute.\n */\n set selected(value) {\n this.removeAttribute('selected');\n\n if(value)\n this.setAttribute('selected', '');\n }\n\n /**\n * Getter method for determining if the 'selected' attribute is present on the element.\n * @returns {boolean} Returns true if the 'selected' attribute is present, otherwise false.\n */\n get selected() {\n return this.hasAttribute('selected');\n }\n\n /**\n * Sets the selection mode for the component.\n * @param {string} value The selection mode to apply. Defaults to 'single'\n * if no value is provided. Possible options may be\n * specific to the implementation of the component\n * (e.g., 'single', 'multiple').\n */\n set selection(value) {\n this._selection = value || 'single';\n }\n\n /**\n * Retrieves the current selection.\n * @returns {*} The value of the current selection.\n */\n get selection() {\n return this._selection;\n }\n\n /**\n * Sets or removes the 'indeterminate' attribute based on the provided value.\n * This can be used to visually indicate an indeterminate state for elements like checkboxes.\n * @param {boolean} value A boolean indicating whether to set the element to an indeterminate state.\n * If true, the 'indeterminate' attribute is added to the element; if false, the attribute is removed.\n */\n set indeterminate(value) {\n this.removeAttribute('indeterminate');\n\n if(value)\n this.setAttribute('indeterminate', '');\n }\n\n /**\n * Retrieves the state of the indeterminate attribute.\n * @returns {boolean} True if the indeterminate attribute is present, otherwise false.\n */\n get indeterminate() {\n return this.hasAttribute('indeterminate');\n }\n\n /**\n * The class name for the component.\n * @type {string}\n */\n className = 'TreeItem';\n\n /**\n * Returns the CSS stylesheet for the component.\n * @static\n * @returns {CSSStyleSheet} The CSS stylesheet\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n /**\n * Setup attributes for the Button element.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n }\n\n /**\n * Returns the list of attributes to observe for changes.\n * @static\n * @returns {Array<string>}\n */\n static get observedAttributes() {\n return ['selected', 'indeterminate'];\n }\n\n /**\n * Handles updates when observed attributes of the element are changed.\n * Updates the checkbox state based on changes to the \"selected\" or \"indeterminate\" attributes.\n * @param {string} name The name of the attribute that was changed.\n * @param {string|null} oldValue The previous value of the attribute before the change.\n * @param {string|null} newValue The new value of the attribute after the change.\n * @returns {void}\n */\n attributeChangedCallback(name, oldValue, newValue) {\n if (name === 'selected') {\n this.checkbox.removeAttribute('indeterminate');\n if (this.selected) {\n this.checkbox.setAttribute('checked', '');\n } else {\n this.checkbox.removeAttribute('checked');\n }\n }\n\n if (name === 'indeterminate' && !this.selected) {\n this.checkbox.removeAttribute('indeterminate');\n this.checkbox.removeAttribute('checked');\n\n if (this.indeterminate)\n this.checkbox.setAttribute('indeterminate', '');\n }\n }\n\n /**\n * Custom logic executed before the draw process begins.\n * Determines and sets the appropriate slot if the current item is nested.\n * @returns {void} No return value.\n */\n beforeDraw() {\n if (this.isNestedItem())\n this.slot = 'children';\n }\n \n /**\n * Creates and returns a document fragment representing the structure of a tree item component.\n * The method constructs the DOM elements including the native container, indentation, toggle button,\n * selection checkbox, label, and children container, along with their respective slots and attributes.\n * It dynamically handles the creation of expand and collapse icons, as well as appending slots for\n * child components.\n * @returns {DocumentFragment} A fragment containing the complete tree item structure to be rendered.\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-tree-item', this.selection === 'multiple' ? 'multiple' : 'single');\n\n let item = document.createElement('div');\n item.classList.add('item');\n\n let indent = document.createElement('div');\n indent.classList.add('indent');\n\n let button = document.createElement('div');\n button.classList.add('toggle');\n\n let checkbox = document.createElement('wje-checkbox');\n if(this.selected)\n checkbox.setAttribute('checked', '');\n\n let label = document.createElement('div');\n label.classList.add('content');\n\n let slotElement = document.createElement('slot');\n\n let children = document.createElement('div');\n children.classList.add('children');\n\n let slot = document.createElement('slot');\n slot.setAttribute('name', 'children');\n children.appendChild(slot);\n\n item.appendChild(indent);\n\n if(this.querySelectorAll(':scope > wje-tree-item').length > 0) {\n if(this.querySelectorAll('[slot=\"expand\"]').length < 1) {\n let expandIcon = document.createElement('wje-icon');\n expandIcon.setAttribute('name', 'chevron-right');\n expandIcon.setAttribute('slot', 'expand');\n\n this.appendChild(expandIcon);\n }\n\n if(this.querySelectorAll('[slot=\"collapse\"]').length < 1) {\n let collapseIcon = document.createElement('wje-icon');\n collapseIcon.setAttribute('name', 'chevron-down');\n collapseIcon.setAttribute('slot', 'collapse');\n\n this.appendChild(collapseIcon);\n }\n\n let expandSlot = document.createElement('slot');\n expandSlot.setAttribute('name', 'expand');\n\n let collapseSlot = document.createElement('slot');\n collapseSlot.setAttribute('name', 'collapse');\n\n button.appendChild(expandSlot);\n button.appendChild(collapseSlot);\n }\n\n item.appendChild(button);\n\n if(this.selection === 'multiple')\n item.appendChild(checkbox);\n\n label.appendChild(slotElement);\n item.appendChild(label);\n\n native.appendChild(item);\n native.appendChild(children);\n\n fragment.appendChild(native);\n\n this.checkbox = checkbox;\n this.native = native;\n this.button = button;\n this.childrenElement = children;\n this.childrenSlot = slot;\n\n return fragment;\n }\n\n /**\n * Executes operations to be performed after the draw action is completed.\n * If the state indicates it is expanded, toggles its children.\n * Additionally, sets up an event listener on the button element to handle toggling children upon click.\n * @returns {void} Does not return a value.\n */\n afterDraw() {\n if(this.expanded)\n this.toggleChildren();\n\n this.button.addEventListener('click', this.toggleChildren.bind(this));\n }\n\n /**\n * Determines if the current item is a nested item within a tree structure.\n * Checks if the item's parent element exists and is also a tree item.\n * @returns {boolean} Returns true if the current item is a nested tree item; otherwise, false.\n */\n isNestedItem() {\n const parent = this.parentElement;\n return !!parent && this.isTreeItem(parent);\n }\n\n /**\n * Checks whether the given node is a tree item.\n * @param {object} node The node to check.\n * @returns {boolean} Returns true if the node is an Element and has a class name of 'TreeItem', otherwise false.\n */\n isTreeItem(node) {\n return node instanceof Element && node.className === 'TreeItem';\n }\n\n /**\n * Toggles the visibility state of the children element and updates the class of the parent element.\n * The method toggles the 'open' class on the children elements and the 'expanded' class on the parent element,\n * effectively showing or hiding the children and indicating the expanded state.\n * @returns {void} Does not return a value.\n */\n toggleChildren() {\n this.childrenElement.classList.toggle('open');\n this.native.classList.toggle('expanded');\n }\n\n /**\n * Retrieves the child items from the `childrenSlot` that match specific criteria.\n * @param {object} [options] Configuration options.\n * @param {boolean} [options.includeDisabled] Determines whether disabled items should be included in the result. Defaults to true.\n * @returns {Array} An array of child items that are valid tree items and meet the criteria specified in the options.\n */\n getChildrenItems(options = {}) {\n const includeDisabled = options.includeDisabled ?? true; // Ak nie je zadané, predvolená hodnota je true\n\n if (!this.childrenSlot) {\n return []; // Ak `childrenSlot` neexistuje, vráti prázdne pole\n }\n\n return [...this.childrenSlot.assignedElements({ flatten: true })]\n .filter(item => this.isTreeItem(item) && (includeDisabled || !item.disabled));\n }\n\n /**\n * Retrieves all descendant children of the current object in a flattened array structure.\n * @param {object} [options] An optional object specifying filters or configurations for retrieving children.\n * @returns {Array} An array containing all children and their descendants in a flat structure.\n */\n getAllChildrenFlat(options = {}) {\n const directChildren = this.getChildrenItems(options);\n return directChildren.flatMap(child =>\n [child, ...child.getAllChildrenFlat(options)]\n );\n }\n}","import TreeItem from './tree-item.element.js';\n\nexport default TreeItem;\n\nTreeItem.define('wje-tree-item', TreeItem);\n"],"names":["styles","event"],"mappings":"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"}
1
+ {"version":3,"file":"wje-master.js","sources":["../packages/utils/date.js","../packages/translations/sk-sk.js","../packages/translations/en-gb.js","../packages/wje-timeline/timeline.element.js","../packages/wje-timeline/timeline.js","../packages/wje-timeline-item/timeline-item.element.js","../packages/wje-timeline-item/timeline-item.js"],"sourcesContent":["export function formatDate(input, format) {\n let date;\n\n // Rozpoznanie typu vstupu a jeho konverzia na objekt Date\n if (typeof input === 'string') {\n date = new Date(input); // Predpokladáme, že je to ISO reťazec\n } else if (typeof input === 'number') {\n date = new Date(input); // Predpokladáme, že je to timestamp\n } else if (input instanceof Date) {\n date = input; // Je to objekt Date\n } else {\n throw new Error('Invalid date input');\n }\n\n const map = {\n yyyy: date.getFullYear(),\n MM: String(date.getMonth() + 1).padStart(2, '0'), // Mesiace sú indexované od 0\n dd: String(date.getDate()).padStart(2, '0'),\n HH: String(date.getHours()).padStart(2, '0'),\n mm: String(date.getMinutes()).padStart(2, '0'),\n ss: String(date.getSeconds()).padStart(2, '0'),\n MMMM: date.toLocaleString('en-US', { month: 'long' }), // Full month name\n MMM: date.toLocaleString('en-US', { month: 'short' }), // Short month name\n };\n\n return format.replace(/yyyy|MM|dd|HH|mm|ss|MMMM|MMM/g, (matched) => map[matched]);\n}\n","import { Localizer } from '../utils/localize.js';\n\nexport const skSk = {\n code: 'sk-sk',\n name: 'Slovak',\n dir: 'ltr',\n\n welcome: 'Vitajte',\n 'wj.file.upload.button': 'Vybrať súbor',\n 'wj.file.upload.uploaded': 'Nahraných: ',\n 'wj.file.upload.from': 'z',\n 'wj.stepper.button.next': 'Ďalej',\n 'wj.stepper.button.finish': 'Dokončiť',\n 'wj.stepper.button.previous': 'Späť',\n 'wj.stepper.step': 'Krok',\n};\n\nLocalizer.registerTranslation(skSk);\n","import { Localizer } from '../utils/localize.js';\n\nexport const enGb = {\n code: 'en-gb',\n name: 'English',\n dir: 'ltr',\n\n welcome: 'Welcome',\n 'wj.file.upload.button': 'Browse files',\n 'wj.file.upload.uploaded': 'Uploaded: ',\n 'wj.file.upload.from': 'from',\n 'wj.stepper.button.next': 'Next',\n 'wj.stepper.button.finish': 'Finish',\n 'wj.stepper.button.previous': 'Previous',\n 'wj.stepper.step': 'Step',\n 'wj.pagination.of': 'of',\n 'wj.pagination.first': 'First page',\n 'wj.pagination.prev': 'Previous',\n 'wj.pagination.next': 'Next',\n 'wj.pagination.last': 'Last page',\n};\n\nLocalizer.registerTranslation(enGb);\n","import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Timeline` is a custom web component that represents a timeline.\n * @summary This element represents a timeline.\n * @documentation https://elements.webjet.sk/components/timeline\n * @status stable\n * @augments WJElement\n * @slot - Slot for the timeline items.\n * @csspart native - The native part of the rating component.\n * @csspart vertical-line - The vertical line part of the rating component.\n * @tag wje-timeline\n */\nexport default class Timeline extends WJElement {\n /**\n * Creates an instance of Timeline.\n */\n constructor() {\n super();\n }\n\n /**\n * The class name for the component.\n */\n className = 'Timeline';\n\n /**\n * Returns the CSS stylesheet for the component.\n * @static\n * @returns {CSSStyleSheet} The CSS stylesheet\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n /**\n * Sets up the attributes for the component.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n }\n\n /**\n * Draws the component for the timeline.\n * @returns {DocumentFragment}\n */\n draw() {\n let fragment = document.createDocumentFragment();\n\n const native = document.createElement('div');\n native.setAttribute('part', 'native');\n native.classList.add('native-timeline');\n\n const verticalLine = document.createElement('div');\n verticalLine.setAttribute('part', 'vertical-line');\n verticalLine.classList.add('vertical-line');\n\n const slot = document.createElement('slot');\n\n native.appendChild(verticalLine);\n native.appendChild(slot);\n\n fragment.appendChild(native);\n\n return fragment;\n }\n}\n","import Timeline from './timeline.element.js';\n\nexport default Timeline;\n\nTimeline.define('wje-timeline', Timeline);\n","import { formatDate } from '../utils/date.js';\nimport { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * The TimelineItem component.\n * @summary This element represents a timeline item.\n * @documentation https://elements.webjet.sk/components/timeline-item\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native part of the timeline item.\n * @csspart content-container - The content container part of the timeline item.\n * @csspart default-icon - The default icon part of the timeline item.\n * @slot - Slot for the content of the timeline item.\n * @slot status - Slot for the status of the timeline item.\n * @tag wje-timeline-item\n */\nexport default class TimelineItem extends WJElement {\n constructor() {\n super();\n }\n\n /**\n * Returns the class name of the tab.\n * @returns {string} The class name of the tab.\n */\n className = 'TimelineItem';\n\n /**\n * Returns the CSS styles for the component.\n * @static\n * @returns {CSSStyleSheet}\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n /**\n * Sets up the attributes for the component.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n this.setAttribute('relative-time', '');\n }\n\n /**\n * Draws the component for the timeline item.\n * @returns {DocumentFragment}\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-timeline-item');\n\n let contentContainer = document.createElement('div');\n contentContainer.setAttribute('part', 'content-container');\n contentContainer.classList.add('content-container');\n\n let tooltip = document.createElement('wje-tooltip');\n tooltip.setAttribute('text', this.getAttribute('tooltip') || '');\n tooltip.setAttribute('position', 'top');\n tooltip.setAttribute('content', formatDate(this.datetime, 'dd.MM.yyyy HH:mm'));\n\n let relativeTime = document.createElement('wje-relative-time');\n relativeTime.setAttribute('date', this.datetime || '');\n relativeTime.setAttribute('format', this.getAttribute('format') || '');\n\n tooltip.appendChild(relativeTime);\n\n let event = document.createElement('h3');\n event.classList.add('event');\n event.textContent = this.getAttribute('event') || '';\n\n // additional text content\n let slot = document.createElement('slot');\n\n // status slot\n let slotStatus = document.createElement('wje-icon');\n slotStatus.setAttribute('name', 'circle-dot');\n slotStatus.setAttribute('filled', '');\n slotStatus.setAttribute('part', 'default-icon');\n\n // if status slot is present\n if (this.querySelector('[slot=\"status\"]')) {\n slotStatus = document.createElement('slot');\n slotStatus.setAttribute('name', 'status');\n }\n\n contentContainer.appendChild(tooltip);\n contentContainer.appendChild(event);\n contentContainer.appendChild(slot);\n\n native.appendChild(slotStatus);\n native.appendChild(contentContainer);\n\n fragment.appendChild(native);\n\n return fragment;\n }\n}\n","import TimelineItem from './timeline-item.element.js';\n\nexport default TimelineItem;\n\nTimelineItem.define('wje-timeline-item', TimelineItem);\n"],"names":["styles","event"],"mappings":"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"}
@@ -256,12 +256,7 @@ class Options extends WJElement {
256
256
  if (this.hasSearchToQueryParams) {
257
257
  processedUrl = `${this.url}?page=${page}&size=${this.lazyLoadSize}${this.search ? `&search=${this.search}` : ""}`;
258
258
  }
259
- let res = await this.service.get(
260
- processedUrl,
261
- null,
262
- false,
263
- signal
264
- );
259
+ let res = await this.service.get(processedUrl, null, false, signal);
265
260
  const filteredOptions = this.filterOutDrawnOptions(res);
266
261
  this.loadedOptions.push(...this.processData(filteredOptions));
267
262
  return filteredOptions;
@@ -1 +1 @@
1
- {"version":3,"file":"wje-options.js","sources":["../packages/wje-options/options.element.js","../packages/wje-options/options.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport InfiniteScroll from '../wje-infinite-scroll/infinite-scroll.element.js';\nimport List from '../wje-list/list.element.js';\nimport Option from '../wje-option/option.js';\n\n/**\n * `Options` is a custom web component that represents a set of options.\n * It extends from `WJElement`.\n * @summary This element represents a set of options.\n * @documentation https://elements.webjet.sk/components/options\n * @status stable\n * @augments {WJElement}\n * // @fires wje-options:load - Event fired when the options are loaded.\n * @tag wje-options\n */\nexport default class Options extends WJElement {\n /**\n * Creates an instance of Options.\n * @class\n */\n constructor() {\n super();\n\n this._loadedOptions = [];\n }\n\n dependencies = {\n 'wje-option': Option,\n 'wje-infinite-scroll': InfiniteScroll,\n 'wje-list': List,\n };\n\n className = 'Options';\n\n /**\n * Returns the list of attributes to observe for changes.\n * @static\n * @returns {Array<string>}\n */\n static get observedAttributes() {\n return ['search'];\n }\n\n /**\n * Sets the option array path attribute.\n * @param {string} value The value to set for the option array path.\n */\n set optionArrayPath(value) {\n this.setAttribute('option-array-path', value);\n }\n\n /**\n * Gets the option array path attribute.\n * @returns {string} The value of the option array path attribute or \"data\" if not set.\n */\n get optionArrayPath() {\n return this.getAttribute('option-array-path');\n }\n\n /**\n * Checks if the option array path attribute is present.\n * @returns {boolean} True if the option array path attribute is present, false otherwise.\n */\n get hasOptionArrayPath() {\n return this.hasAttribute('option-array-path');\n }\n\n /**\n * Gets the dropdown height attribute.\n * @returns {string} The value of the dropdown height attribute or \"100%\" if not set.\n */\n get dropdownHeight() {\n return this.getAttribute('dropdown-height') || '100%';\n }\n\n /**\n * Sets the dropdown height attribute.\n * @param {string} value The value to set for the dropdown height.\n */\n set dropdownHeight(value) {\n this.setAttribute('dropdown-height', value);\n }\n\n /**\n * Sets the item value attribute.\n * @param {string} value The value to set for the item value.\n */\n set itemValue(value) {\n this.setAttribute('item-value', value);\n }\n\n /**\n * Gets the item value attribute.\n * @returns {string} The value of the item value attribute or \"value\" if not set.\n */\n get itemValue() {\n return this.getAttribute('item-value') || 'value';\n }\n\n /**\n * Sets the item text attribute.\n * @param {string} value The value to set for the item text.\n */\n set itemText(value) {\n this.setAttribute('item-text', value);\n }\n\n /**\n * Gets the item text attribute.\n * @returns {string} The value of the item text attribute or \"text\" if not set.\n */\n get itemText() {\n return this.getAttribute('item-text') || 'text';\n }\n\n /**\n * Gets the lazy load size attribute.\n * @returns {number} The value of the lazy load size attribute or 10 if not set.\n */\n get lazyLoadSize() {\n return this.getAttribute('lazy-load-size') || 10;\n }\n\n /**\n * Sets the lazy load size attribute.\n * @param {number} value The value to set for the lazy load size.\n */\n set lazyLoadSize(value) {\n this.setAttribute('lazy-load-size', value);\n }\n\n /**\n * Sets the search attribute.\n * @param {string} value The value to set for the search.\n */\n set search(value) {\n this.setAttribute('search', value);\n }\n\n /**\n * Gets the search attribute.\n * @returns {string} The value of the search attribute.\n */\n get search() {\n return this.getAttribute('search');\n }\n\n /**\n * Checks if the search attribute is present.\n * @returns {boolean} True if the search attribute is present, false otherwise.\n */\n get hasSearch() {\n return this.hasAttribute('search');\n }\n\n get searchToQueryParams() {\n return this.getAttribute('search-to-query-params');\n }\n\n set searchToQueryParams(value) {\n this.setAttribute('search-to-query-params', value);\n }\n\n get hasSearchToQueryParams() {\n return this.hasAttribute('search-to-query-params');\n }\n\n /**\n * Checks if the lazy attribute is present.\n * @returns {boolean} True if the lazy attribute is present, false otherwise.\n */\n get lazy() {\n return this.hasAttribute('lazy');\n }\n\n /**\n * Sets the lazy attribute.\n * @param {boolean} value The value to set for the lazy attribute.\n */\n set lazy(value) {\n this.setAttribute('lazy', value);\n }\n\n /**\n * Gets the loaded options.\n * @returns {Array} The loaded options.\n */\n get options() {\n return this.loadedOptions?.flat();\n }\n\n get loadedOptions() {\n return this._loadedOptions;\n }\n\n set loadedOptions(loadedOptions) {\n this._loadedOptions = loadedOptions;\n }\n\n /**\n * Lifecycle method, called whenever an observed property changes.\n */\n attributeChangedCallback(name, oldValue, newValue) {\n if (this.infiniteScroll && name === 'search' && oldValue !== newValue) {\n this.loadedOptions = [];\n this.infiniteScroll.placementObj.innerHTML = '';\n this.infiniteScroll.totalPages = 0;\n this.infiniteScroll.refresh();\n }\n }\n\n /**\n * Sets up the attributes for the component.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n }\n\n /**\n * Prepares the component before drawing.\n * Fetches the pages and creates the options elements.\n */\n afterDraw() {\n event.dispatchCustomEvent(this, 'wje-options:load', {}); // nepomohlo to, v ff stale je scroll hore\n }\n\n /**\n * Draws the component.\n * @returns {DocumentFragment}\n */\n async draw() {\n let fragment = document.createDocumentFragment();\n\n const slot = document.createElement('slot');\n\n if (this.hasAttribute('lazy')) {\n const list = document.createElement('wje-list');\n\n const infiniteScroll = document.createElement('wje-infinite-scroll');\n infiniteScroll.setAttribute('placement', 'wje-list');\n infiniteScroll.setAttribute('height', this.dropdownHeight);\n infiniteScroll.setAttribute('object-name', this.optionArrayPath);\n infiniteScroll.append(list);\n\n infiniteScroll.dataToHtml = this.htmlItem;\n\n infiniteScroll.setCustomData = async (page, signal) => {\n let processedUrl = `${this.url}${this.search ? `/${this.search}` : ''}?page=${page}&size=${this.lazyLoadSize}`\n\n if (this.hasSearchToQueryParams) {\n processedUrl = `${this.url}?page=${page}&size=${this.lazyLoadSize}${this.search ? `&search=${this.search}` : ''}`;\n }\n\n let res = await this.service.get(processedUrl,\n null,\n false,\n signal\n );\n const filteredOptions = this.filterOutDrawnOptions(res);\n this.loadedOptions.push(...this.processData(filteredOptions));\n\n return filteredOptions;\n };\n\n if (!this.contains(infiniteScroll)) {\n this.appendChild(infiniteScroll);\n }\n\n this.infiniteScroll = infiniteScroll;\n } else {\n this.response = await this.getPages();\n let optionsData = this.filterOutDrawnOptions(this.response);\n optionsData = this.processData(optionsData);\n\n this.loadedOptions.push(...optionsData);\n\n this.append(...optionsData.map(this.htmlItem));\n }\n\n fragment.appendChild(slot);\n\n return fragment;\n }\n\n /**\n * Processes the given data and returns the options based on the option array path.\n * @param {any} data The data to be processed.\n * @returns {any} - The options based on the option array path.\n */\n processData(data) {\n const splittedOptionArrayPath = this.optionArrayPath ? this.optionArrayPath?.split('.') : null;\n let options = data;\n\n splittedOptionArrayPath?.forEach((path) => {\n options = options[path];\n });\n\n return options ?? [];\n }\n\n /**\n * Filters out drawn options from the response.\n * @param {object | null} response The response to filter.\n * @returns {object} The filtered response.\n */\n filterOutDrawnOptions(response) {\n const splittedOptionArrayPath = this.optionArrayPath ? this.optionArrayPath?.split('.') : [];\n let filteredResponse = structuredClone(response);\n\n filteredResponse = this.recursiveUpdate(filteredResponse, splittedOptionArrayPath);\n return filteredResponse;\n }\n\n /**\n * Recursively updates the object based on the provided path to the property.\n * @param {object | Array | null} object\n * @param {Array<string> | null} pathToProperty\n * @returns {object | Array | null}\n */\n recursiveUpdate = (object, pathToProperty) => {\n if (pathToProperty.length === 0) {\n if (Array.isArray(object)) {\n return object.filter(\n (option) =>\n !this.loadedOptions.some(\n (loadedOption) => loadedOption[this.itemValue] === option[this.itemValue]\n )\n );\n } else {\n console.error('Expected an array but got:', object, pathToProperty);\n return [];\n }\n }\n\n const [currentPath, ...remainingPath] = pathToProperty;\n if (remainingPath.length > 0) {\n object[currentPath] = this.recursiveUpdate(object[currentPath], remainingPath);\n } else {\n object[currentPath] =\n object[currentPath]?.filter(\n (option) =>\n !this.loadedOptions.some(\n (loadedOption) => loadedOption[this.itemValue] === option[this.itemValue]\n )\n ) ?? [];\n }\n return object;\n };\n\n /**\n * Generates an HTML option element based on the provided item.\n * @param {object} item The item to generate the option element for.\n * @returns {HTMLElement} The generated option element.\n */\n htmlItem = (item) => {\n let option = document.createElement('wje-option');\n\n if (item[this.itemValue] === null || item[this.itemValue] === undefined) {\n console.warn(`The item ${JSON.stringify(item)} does not have the property ${this.itemValue}`);\n }\n\n if (item[this.itemText] === null || item[this.itemText] === undefined) {\n console.warn(`The item ${JSON.stringify(item)} does not have the property ${this.itemText}`);\n }\n\n option.setAttribute('value', item[this.itemValue] ?? '');\n option.innerText = item[this.itemText] ?? '';\n\n return option;\n };\n\n /**\n * Fetches the pages from the provided URL.\n * @param {number} page The page number to fetch.\n * @returns {Promise<object>} The fetched data.\n * @throws Will throw an error if the response is not ok.\n */\n async getPages(page) {\n const response = await fetch(this.url);\n if (!response.ok) {\n throw new Error(`An error occurred: ${response.status}`);\n }\n return await response.json();\n }\n\n /**\n * Finds the selected option data based on the given selected option values.\n * @param {Array} selectedOptionValues The array of selected option values.\n * @returns {Array} - The array of option data that matches the selected option values.\n */\n findSelectedOptionData(selectedOptionValues = []) {\n return this.options.filter((option) => selectedOptionValues.includes(option[this.itemValue]));\n }\n\n /**\n * Adds an option to the element.\n * @param {object} optionData The data of the option to be added.\n */\n addOption(optionData) {\n if (this.loadedOptions.some((option) => option[this.itemValue] === optionData[this.itemValue])) {\n return;\n }\n\n this.prepend(this.htmlItem(optionData));\n this.loadedOptions.push(optionData);\n }\n\n /**\n * Adds options to the element.\n * @param {Array} optionsData The array of option data to be added.\n * @param {boolean} [silent] Whether to suppress events triggered by adding options.\n */\n addOptions(optionsData = [], silent = false) {\n if (Array.isArray(optionsData)) optionsData?.forEach((od) => this.addOption(od, silent));\n else this.addOption(optionsData, silent);\n }\n}\n","import Options from './options.element.js';\n\nexport default Options;\n\nOptions.define('wje-options', Options);\n"],"names":[],"mappings":";;;;;;;AAee,MAAM,gBAAgB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAK3C,cAAc;AACV,UAAO;AAKX,wCAAe;AAAA,MACX,cAAc;AAAA,MACd,uBAAuB;AAAA,MACvB,YAAY;AAAA,IACf;AAED,qCAAY;AA+RZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2CAAkB,CAAC,QAAQ,mBAAmB;;AAC1C,UAAI,eAAe,WAAW,GAAG;AAC7B,YAAI,MAAM,QAAQ,MAAM,GAAG;AACvB,iBAAO,OAAO;AAAA,YACV,CAAC,WACG,CAAC,KAAK,cAAc;AAAA,cAChB,CAAC,iBAAiB,aAAa,KAAK,SAAS,MAAM,OAAO,KAAK,SAAS;AAAA,YACpG;AAAA,UACiB;AAAA,QACjB,OAAmB;AACH,kBAAQ,MAAM,8BAA8B,QAAQ,cAAc;AAClE,iBAAO,CAAE;AAAA,QACzB;AAAA,MACA;AAEQ,YAAM,CAAC,aAAa,GAAG,aAAa,IAAI;AACxC,UAAI,cAAc,SAAS,GAAG;AAC1B,eAAO,WAAW,IAAI,KAAK,gBAAgB,OAAO,WAAW,GAAG,aAAa;AAAA,MACzF,OAAe;AACH,eAAO,WAAW,MACd,YAAO,WAAW,MAAlB,mBAAqB;AAAA,UACjB,CAAC,WACG,CAAC,KAAK,cAAc;AAAA,YAChB,CAAC,iBAAiB,aAAa,KAAK,SAAS,MAAM,OAAO,KAAK,SAAS;AAAA,UACpG;AAAA,cACqB,CAAE;AAAA,MACvB;AACQ,aAAO;AAAA,IACV;AAOD;AAAA;AAAA;AAAA;AAAA;AAAA,oCAAW,CAAC,SAAS;AACjB,UAAI,SAAS,SAAS,cAAc,YAAY;AAEhD,UAAI,KAAK,KAAK,SAAS,MAAM,QAAQ,KAAK,KAAK,SAAS,MAAM,QAAW;AACrE,gBAAQ,KAAK,YAAY,KAAK,UAAU,IAAI,CAAC,+BAA+B,KAAK,SAAS,EAAE;AAAA,MACxG;AAEQ,UAAI,KAAK,KAAK,QAAQ,MAAM,QAAQ,KAAK,KAAK,QAAQ,MAAM,QAAW;AACnE,gBAAQ,KAAK,YAAY,KAAK,UAAU,IAAI,CAAC,+BAA+B,KAAK,QAAQ,EAAE;AAAA,MACvG;AAEQ,aAAO,aAAa,SAAS,KAAK,KAAK,SAAS,KAAK,EAAE;AACvD,aAAO,YAAY,KAAK,KAAK,QAAQ,KAAK;AAE1C,aAAO;AAAA,IACV;AA1VG,SAAK,iBAAiB,CAAE;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAeI,WAAW,qBAAqB;AAC5B,WAAO,CAAC,QAAQ;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,gBAAgB,OAAO;AACvB,SAAK,aAAa,qBAAqB,KAAK;AAAA,EACpD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,kBAAkB;AAClB,WAAO,KAAK,aAAa,mBAAmB;AAAA,EACpD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,qBAAqB;AACrB,WAAO,KAAK,aAAa,mBAAmB;AAAA,EACpD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,iBAAiB;AACjB,WAAO,KAAK,aAAa,iBAAiB,KAAK;AAAA,EACvD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,eAAe,OAAO;AACtB,SAAK,aAAa,mBAAmB,KAAK;AAAA,EAClD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,UAAU,OAAO;AACjB,SAAK,aAAa,cAAc,KAAK;AAAA,EAC7C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,YAAY;AACZ,WAAO,KAAK,aAAa,YAAY,KAAK;AAAA,EAClD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,SAAS,OAAO;AAChB,SAAK,aAAa,aAAa,KAAK;AAAA,EAC5C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,WAAW;AACX,WAAO,KAAK,aAAa,WAAW,KAAK;AAAA,EACjD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,eAAe;AACf,WAAO,KAAK,aAAa,gBAAgB,KAAK;AAAA,EACtD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,aAAa,OAAO;AACpB,SAAK,aAAa,kBAAkB,KAAK;AAAA,EACjD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,OAAO,OAAO;AACd,SAAK,aAAa,UAAU,KAAK;AAAA,EACzC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,SAAS;AACT,WAAO,KAAK,aAAa,QAAQ;AAAA,EACzC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,YAAY;AACZ,WAAO,KAAK,aAAa,QAAQ;AAAA,EACzC;AAAA,EAEI,IAAI,sBAAsB;AACtB,WAAO,KAAK,aAAa,wBAAwB;AAAA,EACzD;AAAA,EAEI,IAAI,oBAAoB,OAAO;AAC3B,SAAK,aAAa,0BAA0B,KAAK;AAAA,EACzD;AAAA,EAEI,IAAI,yBAAyB;AACzB,WAAO,KAAK,aAAa,wBAAwB;AAAA,EACzD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,OAAO;AACP,WAAO,KAAK,aAAa,MAAM;AAAA,EACvC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,KAAK,OAAO;AACZ,SAAK,aAAa,QAAQ,KAAK;AAAA,EACvC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,UAAU;;AACV,YAAO,UAAK,kBAAL,mBAAoB;AAAA,EACnC;AAAA,EAEI,IAAI,gBAAgB;AAChB,WAAO,KAAK;AAAA,EACpB;AAAA,EAEI,IAAI,cAAc,eAAe;AAC7B,SAAK,iBAAiB;AAAA,EAC9B;AAAA;AAAA;AAAA;AAAA,EAKI,yBAAyB,MAAM,UAAU,UAAU;AAC/C,QAAI,KAAK,kBAAkB,SAAS,YAAY,aAAa,UAAU;AACnE,WAAK,gBAAgB,CAAE;AACvB,WAAK,eAAe,aAAa,YAAY;AAC7C,WAAK,eAAe,aAAa;AACjC,WAAK,eAAe,QAAS;AAAA,IACzC;AAAA,EACA;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,YAAY;AACR,UAAM,oBAAoB,MAAM,oBAAoB,CAAE,CAAA;AAAA,EAC9D;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,MAAM,OAAO;AACT,QAAI,WAAW,SAAS,uBAAwB;AAEhD,UAAM,OAAO,SAAS,cAAc,MAAM;AAE1C,QAAI,KAAK,aAAa,MAAM,GAAG;AAC3B,YAAM,OAAO,SAAS,cAAc,UAAU;AAE9C,YAAM,iBAAiB,SAAS,cAAc,qBAAqB;AACnE,qBAAe,aAAa,aAAa,UAAU;AACnD,qBAAe,aAAa,UAAU,KAAK,cAAc;AACzD,qBAAe,aAAa,eAAe,KAAK,eAAe;AAC/D,qBAAe,OAAO,IAAI;AAE1B,qBAAe,aAAa,KAAK;AAEjC,qBAAe,gBAAgB,OAAO,MAAM,WAAW;AACnD,YAAI,eAAe,GAAG,KAAK,GAAG,GAAG,KAAK,SAAS,IAAI,KAAK,MAAM,KAAK,EAAE,SAAS,IAAI,SAAS,KAAK,YAAY;AAE5G,YAAI,KAAK,wBAAwB;AAC7B,yBAAe,GAAG,KAAK,GAAG,SAAS,IAAI,SAAS,KAAK,YAAY,GAAG,KAAK,SAAS,WAAW,KAAK,MAAM,KAAK,EAAE;AAAA,QACnI;AAEgB,YAAI,MAAM,MAAM,KAAK,QAAQ;AAAA,UAAI;AAAA,UAC7B;AAAA,UACA;AAAA,UACA;AAAA,QACH;AACD,cAAM,kBAAkB,KAAK,sBAAsB,GAAG;AACtD,aAAK,cAAc,KAAK,GAAG,KAAK,YAAY,eAAe,CAAC;AAE5D,eAAO;AAAA,MACV;AAED,UAAI,CAAC,KAAK,SAAS,cAAc,GAAG;AAChC,aAAK,YAAY,cAAc;AAAA,MAC/C;AAEY,WAAK,iBAAiB;AAAA,IAClC,OAAe;AACH,WAAK,WAAW,MAAM,KAAK,SAAU;AACrC,UAAI,cAAc,KAAK,sBAAsB,KAAK,QAAQ;AAC1D,oBAAc,KAAK,YAAY,WAAW;AAE1C,WAAK,cAAc,KAAK,GAAG,WAAW;AAEtC,WAAK,OAAO,GAAG,YAAY,IAAI,KAAK,QAAQ,CAAC;AAAA,IACzD;AAEQ,aAAS,YAAY,IAAI;AAEzB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,YAAY,MAAM;;AACd,UAAM,0BAA0B,KAAK,mBAAkB,UAAK,oBAAL,mBAAsB,MAAM,OAAO;AAC1F,QAAI,UAAU;AAEd,uEAAyB,QAAQ,CAAC,SAAS;AACvC,gBAAU,QAAQ,IAAI;AAAA,IAClC;AAEQ,WAAO,WAAW,CAAE;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,sBAAsB,UAAU;;AAC5B,UAAM,0BAA0B,KAAK,mBAAkB,UAAK,oBAAL,mBAAsB,MAAM,OAAO,CAAE;AAC5F,QAAI,mBAAmB,gBAAgB,QAAQ;AAE/C,uBAAmB,KAAK,gBAAgB,kBAAkB,uBAAuB;AACjF,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAkEI,MAAM,SAAS,MAAM;AACjB,UAAM,WAAW,MAAM,MAAM,KAAK,GAAG;AACrC,QAAI,CAAC,SAAS,IAAI;AACd,YAAM,IAAI,MAAM,sBAAsB,SAAS,MAAM,EAAE;AAAA,IACnE;AACQ,WAAO,MAAM,SAAS,KAAM;AAAA,EACpC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,uBAAuB,uBAAuB,IAAI;AAC9C,WAAO,KAAK,QAAQ,OAAO,CAAC,WAAW,qBAAqB,SAAS,OAAO,KAAK,SAAS,CAAC,CAAC;AAAA,EACpG;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,UAAU,YAAY;AAClB,QAAI,KAAK,cAAc,KAAK,CAAC,WAAW,OAAO,KAAK,SAAS,MAAM,WAAW,KAAK,SAAS,CAAC,GAAG;AAC5F;AAAA,IACZ;AAEQ,SAAK,QAAQ,KAAK,SAAS,UAAU,CAAC;AACtC,SAAK,cAAc,KAAK,UAAU;AAAA,EAC1C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,WAAW,cAAc,IAAI,SAAS,OAAO;AACzC,QAAI,MAAM,QAAQ,WAAW,EAAG,4CAAa,QAAQ,CAAC,OAAO,KAAK,UAAU,IAAI,MAAM;AAAA,QACjF,MAAK,UAAU,aAAa,MAAM;AAAA,EAC/C;AACA;AC5ZA,QAAQ,OAAO,eAAe,OAAO;"}
1
+ {"version":3,"file":"wje-options.js","sources":["../packages/wje-options/options.element.js","../packages/wje-options/options.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport InfiniteScroll from '../wje-infinite-scroll/infinite-scroll.element.js';\nimport List from '../wje-list/list.element.js';\nimport Option from '../wje-option/option.js';\n\n/**\n * `Options` is a custom web component that represents a set of options.\n * It extends from `WJElement`.\n * @summary This element represents a set of options.\n * @documentation https://elements.webjet.sk/components/options\n * @status stable\n * @augments {WJElement}\n * // @fires wje-options:load - Event fired when the options are loaded.\n * @tag wje-options\n */\nexport default class Options extends WJElement {\n /**\n * Creates an instance of Options.\n * @class\n */\n constructor() {\n super();\n\n this._loadedOptions = [];\n }\n\n dependencies = {\n 'wje-option': Option,\n 'wje-infinite-scroll': InfiniteScroll,\n 'wje-list': List,\n };\n\n className = 'Options';\n\n /**\n * Returns the list of attributes to observe for changes.\n * @static\n * @returns {Array<string>}\n */\n static get observedAttributes() {\n return ['search'];\n }\n\n /**\n * Sets the option array path attribute.\n * @param {string} value The value to set for the option array path.\n */\n set optionArrayPath(value) {\n this.setAttribute('option-array-path', value);\n }\n\n /**\n * Gets the option array path attribute.\n * @returns {string} The value of the option array path attribute or \"data\" if not set.\n */\n get optionArrayPath() {\n return this.getAttribute('option-array-path');\n }\n\n /**\n * Checks if the option array path attribute is present.\n * @returns {boolean} True if the option array path attribute is present, false otherwise.\n */\n get hasOptionArrayPath() {\n return this.hasAttribute('option-array-path');\n }\n\n /**\n * Gets the dropdown height attribute.\n * @returns {string} The value of the dropdown height attribute or \"100%\" if not set.\n */\n get dropdownHeight() {\n return this.getAttribute('dropdown-height') || '100%';\n }\n\n /**\n * Sets the dropdown height attribute.\n * @param {string} value The value to set for the dropdown height.\n */\n set dropdownHeight(value) {\n this.setAttribute('dropdown-height', value);\n }\n\n /**\n * Sets the item value attribute.\n * @param {string} value The value to set for the item value.\n */\n set itemValue(value) {\n this.setAttribute('item-value', value);\n }\n\n /**\n * Gets the item value attribute.\n * @returns {string} The value of the item value attribute or \"value\" if not set.\n */\n get itemValue() {\n return this.getAttribute('item-value') || 'value';\n }\n\n /**\n * Sets the item text attribute.\n * @param {string} value The value to set for the item text.\n */\n set itemText(value) {\n this.setAttribute('item-text', value);\n }\n\n /**\n * Gets the item text attribute.\n * @returns {string} The value of the item text attribute or \"text\" if not set.\n */\n get itemText() {\n return this.getAttribute('item-text') || 'text';\n }\n\n /**\n * Gets the lazy load size attribute.\n * @returns {number} The value of the lazy load size attribute or 10 if not set.\n */\n get lazyLoadSize() {\n return this.getAttribute('lazy-load-size') || 10;\n }\n\n /**\n * Sets the lazy load size attribute.\n * @param {number} value The value to set for the lazy load size.\n */\n set lazyLoadSize(value) {\n this.setAttribute('lazy-load-size', value);\n }\n\n /**\n * Sets the search attribute.\n * @param {string} value The value to set for the search.\n */\n set search(value) {\n this.setAttribute('search', value);\n }\n\n /**\n * Gets the search attribute.\n * @returns {string} The value of the search attribute.\n */\n get search() {\n return this.getAttribute('search');\n }\n\n /**\n * Checks if the search attribute is present.\n * @returns {boolean} True if the search attribute is present, false otherwise.\n */\n get hasSearch() {\n return this.hasAttribute('search');\n }\n\n get searchToQueryParams() {\n return this.getAttribute('search-to-query-params');\n }\n\n set searchToQueryParams(value) {\n this.setAttribute('search-to-query-params', value);\n }\n\n get hasSearchToQueryParams() {\n return this.hasAttribute('search-to-query-params');\n }\n\n /**\n * Checks if the lazy attribute is present.\n * @returns {boolean} True if the lazy attribute is present, false otherwise.\n */\n get lazy() {\n return this.hasAttribute('lazy');\n }\n\n /**\n * Sets the lazy attribute.\n * @param {boolean} value The value to set for the lazy attribute.\n */\n set lazy(value) {\n this.setAttribute('lazy', value);\n }\n\n /**\n * Gets the loaded options.\n * @returns {Array} The loaded options.\n */\n get options() {\n return this.loadedOptions?.flat();\n }\n\n get loadedOptions() {\n return this._loadedOptions;\n }\n\n set loadedOptions(loadedOptions) {\n this._loadedOptions = loadedOptions;\n }\n\n /**\n * Lifecycle method, called whenever an observed property changes.\n */\n attributeChangedCallback(name, oldValue, newValue) {\n if (this.infiniteScroll && name === 'search' && oldValue !== newValue) {\n this.loadedOptions = [];\n this.infiniteScroll.placementObj.innerHTML = '';\n this.infiniteScroll.totalPages = 0;\n this.infiniteScroll.refresh();\n }\n }\n\n /**\n * Sets up the attributes for the component.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n }\n\n /**\n * Prepares the component before drawing.\n * Fetches the pages and creates the options elements.\n */\n afterDraw() {\n event.dispatchCustomEvent(this, 'wje-options:load', {}); // nepomohlo to, v ff stale je scroll hore\n }\n\n /**\n * Draws the component.\n * @returns {DocumentFragment}\n */\n async draw() {\n let fragment = document.createDocumentFragment();\n\n const slot = document.createElement('slot');\n\n if (this.hasAttribute('lazy')) {\n const list = document.createElement('wje-list');\n\n const infiniteScroll = document.createElement('wje-infinite-scroll');\n infiniteScroll.setAttribute('placement', 'wje-list');\n infiniteScroll.setAttribute('height', this.dropdownHeight);\n infiniteScroll.setAttribute('object-name', this.optionArrayPath);\n infiniteScroll.append(list);\n\n infiniteScroll.dataToHtml = this.htmlItem;\n\n infiniteScroll.setCustomData = async (page, signal) => {\n let processedUrl = `${this.url}${this.search ? `/${this.search}` : ''}?page=${page}&size=${this.lazyLoadSize}`;\n\n if (this.hasSearchToQueryParams) {\n processedUrl = `${this.url}?page=${page}&size=${this.lazyLoadSize}${this.search ? `&search=${this.search}` : ''}`;\n }\n\n let res = await this.service.get(processedUrl, null, false, signal);\n const filteredOptions = this.filterOutDrawnOptions(res);\n this.loadedOptions.push(...this.processData(filteredOptions));\n\n return filteredOptions;\n };\n\n if (!this.contains(infiniteScroll)) {\n this.appendChild(infiniteScroll);\n }\n\n this.infiniteScroll = infiniteScroll;\n } else {\n this.response = await this.getPages();\n let optionsData = this.filterOutDrawnOptions(this.response);\n optionsData = this.processData(optionsData);\n\n this.loadedOptions.push(...optionsData);\n\n this.append(...optionsData.map(this.htmlItem));\n }\n\n fragment.appendChild(slot);\n\n return fragment;\n }\n\n /**\n * Processes the given data and returns the options based on the option array path.\n * @param {any} data The data to be processed.\n * @returns {any} - The options based on the option array path.\n */\n processData(data) {\n const splittedOptionArrayPath = this.optionArrayPath ? this.optionArrayPath?.split('.') : null;\n let options = data;\n\n splittedOptionArrayPath?.forEach((path) => {\n options = options[path];\n });\n\n return options ?? [];\n }\n\n /**\n * Filters out drawn options from the response.\n * @param {object | null} response The response to filter.\n * @returns {object} The filtered response.\n */\n filterOutDrawnOptions(response) {\n const splittedOptionArrayPath = this.optionArrayPath ? this.optionArrayPath?.split('.') : [];\n let filteredResponse = structuredClone(response);\n\n filteredResponse = this.recursiveUpdate(filteredResponse, splittedOptionArrayPath);\n return filteredResponse;\n }\n\n /**\n * Recursively updates the object based on the provided path to the property.\n * @param {object | Array | null} object\n * @param {Array<string> | null} pathToProperty\n * @returns {object | Array | null}\n */\n recursiveUpdate = (object, pathToProperty) => {\n if (pathToProperty.length === 0) {\n if (Array.isArray(object)) {\n return object.filter(\n (option) =>\n !this.loadedOptions.some(\n (loadedOption) => loadedOption[this.itemValue] === option[this.itemValue]\n )\n );\n } else {\n console.error('Expected an array but got:', object, pathToProperty);\n return [];\n }\n }\n\n const [currentPath, ...remainingPath] = pathToProperty;\n if (remainingPath.length > 0) {\n object[currentPath] = this.recursiveUpdate(object[currentPath], remainingPath);\n } else {\n object[currentPath] =\n object[currentPath]?.filter(\n (option) =>\n !this.loadedOptions.some(\n (loadedOption) => loadedOption[this.itemValue] === option[this.itemValue]\n )\n ) ?? [];\n }\n return object;\n };\n\n /**\n * Generates an HTML option element based on the provided item.\n * @param {object} item The item to generate the option element for.\n * @returns {HTMLElement} The generated option element.\n */\n htmlItem = (item) => {\n let option = document.createElement('wje-option');\n\n if (item[this.itemValue] === null || item[this.itemValue] === undefined) {\n console.warn(`The item ${JSON.stringify(item)} does not have the property ${this.itemValue}`);\n }\n\n if (item[this.itemText] === null || item[this.itemText] === undefined) {\n console.warn(`The item ${JSON.stringify(item)} does not have the property ${this.itemText}`);\n }\n\n option.setAttribute('value', item[this.itemValue] ?? '');\n option.innerText = item[this.itemText] ?? '';\n\n return option;\n };\n\n /**\n * Fetches the pages from the provided URL.\n * @param {number} page The page number to fetch.\n * @returns {Promise<object>} The fetched data.\n * @throws Will throw an error if the response is not ok.\n */\n async getPages(page) {\n const response = await fetch(this.url);\n if (!response.ok) {\n throw new Error(`An error occurred: ${response.status}`);\n }\n return await response.json();\n }\n\n /**\n * Finds the selected option data based on the given selected option values.\n * @param {Array} selectedOptionValues The array of selected option values.\n * @returns {Array} - The array of option data that matches the selected option values.\n */\n findSelectedOptionData(selectedOptionValues = []) {\n return this.options.filter((option) => selectedOptionValues.includes(option[this.itemValue]));\n }\n\n /**\n * Adds an option to the element.\n * @param {object} optionData The data of the option to be added.\n */\n addOption(optionData) {\n if (this.loadedOptions.some((option) => option[this.itemValue] === optionData[this.itemValue])) {\n return;\n }\n\n this.prepend(this.htmlItem(optionData));\n this.loadedOptions.push(optionData);\n }\n\n /**\n * Adds options to the element.\n * @param {Array} optionsData The array of option data to be added.\n * @param {boolean} [silent] Whether to suppress events triggered by adding options.\n */\n addOptions(optionsData = [], silent = false) {\n if (Array.isArray(optionsData)) optionsData?.forEach((od) => this.addOption(od, silent));\n else this.addOption(optionsData, silent);\n }\n}\n","import Options from './options.element.js';\n\nexport default Options;\n\nOptions.define('wje-options', Options);\n"],"names":[],"mappings":"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"}
@@ -0,0 +1,355 @@
1
+ var __defProp = Object.defineProperty;
2
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
3
+ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
4
+ import { Localizer } from "./localize.js";
5
+ import WJElement, { event } from "./wje-element.js";
6
+ import Icon from "./wje-icon.js";
7
+ import Button from "./wje-button.js";
8
+ function paginate(totalItems, currentPage = 1, pageSize = 10, maxPages = 5) {
9
+ const totalPages = Math.ceil(totalItems / pageSize);
10
+ if (currentPage < 1) {
11
+ currentPage = 1;
12
+ } else if (currentPage > totalPages) {
13
+ currentPage = totalPages;
14
+ }
15
+ let startPage;
16
+ let endPage;
17
+ const pagesNearEnd = maxPages + 1;
18
+ if (currentPage <= pagesNearEnd) {
19
+ startPage = 1;
20
+ endPage = Math.min(pagesNearEnd + 1, totalPages);
21
+ } else if (currentPage > totalPages - pagesNearEnd + 1) {
22
+ startPage = Math.max(totalPages - pagesNearEnd, 1);
23
+ endPage = totalPages;
24
+ } else {
25
+ const halfPages = Math.floor(maxPages / 2);
26
+ startPage = currentPage - halfPages;
27
+ endPage = maxPages % 2 === 1 ? currentPage + halfPages : currentPage + halfPages - 1;
28
+ }
29
+ const startIndex = (currentPage - 1) * pageSize;
30
+ const endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1);
31
+ const pages = Array.from({ length: endPage - startPage + 1 }, (_, i) => startPage + i);
32
+ return {
33
+ totalItems,
34
+ currentPage,
35
+ pageSize,
36
+ totalPages,
37
+ startPage,
38
+ endPage,
39
+ startIndex,
40
+ endIndex,
41
+ pages
42
+ };
43
+ }
44
+ 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";
45
+ class Pagination extends WJElement {
46
+ /**
47
+ * Creates an instance of Pagination.
48
+ */
49
+ constructor() {
50
+ super();
51
+ /**
52
+ * Dependencies of the Button element.
53
+ * @type {object}
54
+ */
55
+ __publicField(this, "dependencies", {
56
+ "wje-icon": Icon,
57
+ "wje-button": Button
58
+ });
59
+ __publicField(this, "className", "Pagination");
60
+ /**
61
+ * Handles the click action for pagination and updates the current page.
62
+ * If the clicked page number is the same as the current page, no action is performed.
63
+ * Otherwise, the current page is updated to the new page number, and a custom event
64
+ * 'wje-pagination:page-change' is dispatched with the pagination object.
65
+ * @param {Event} e The event triggered by the page click.
66
+ * @param {number} page The page number that was clicked.
67
+ */
68
+ __publicField(this, "pageClickAction", (e, page) => {
69
+ if (+page === this.page) return;
70
+ this.page = page;
71
+ event.dispatchCustomEvent(this, "wje-pagination:page-change", this.paginateObj);
72
+ });
73
+ this.localizer = new Localizer(this);
74
+ this._paginateObj = null;
75
+ }
76
+ /**
77
+ * Sets the value of the 'page' attribute for the object.
78
+ * @param {string} value The value to set for the 'page' attribute.
79
+ */
80
+ set page(value) {
81
+ this.setAttribute("page", value);
82
+ }
83
+ /**
84
+ * Retrieves the current page number as a numeric value.
85
+ * @returns {number} The current page number. Returns 0 if the attribute 'page' is not set or is not a numeric value.
86
+ */
87
+ get page() {
88
+ return +this.getAttribute("page") || 0;
89
+ }
90
+ /**
91
+ * Sets the maximum number of pages.
92
+ * Updates the 'max-pages' attribute with the provided value.
93
+ * @param {number|string} value The maximum number of pages to set. Can be a number or a parsable string representing a number.
94
+ */
95
+ set maxPages(value) {
96
+ this.setAttribute("max-pages", value);
97
+ }
98
+ /**
99
+ * Gets the maximum number of pages.
100
+ * This getter retrieves the value of the "max-pages" attribute from the element.
101
+ * If the attribute is not set or is invalid, it defaults to 3.
102
+ * @returns {number} The maximum number of pages as a numeric value.
103
+ */
104
+ get maxPages() {
105
+ return +this.getAttribute("max-pages") || 3;
106
+ }
107
+ /**
108
+ * Sets the `pageSize` attribute to the specified value.
109
+ * @param {number|string} value The desired page size value. This can be a number or a string representation of the size.
110
+ */
111
+ set pageSize(value) {
112
+ this.setAttribute("page-size", value);
113
+ }
114
+ /**
115
+ * Retrieves the value of the 'page-size' attribute and converts it to a number.
116
+ * If the attribute is not set or is invalid, returns the default value of 3.
117
+ * @returns {number} The numeric value of the 'page-size' attribute or the default value of 3.
118
+ */
119
+ get pageSize() {
120
+ return +this.getAttribute("page-size") || 3;
121
+ }
122
+ /**
123
+ * Sets the total number of items.
124
+ * @param {number} value The new total number of items to set.
125
+ */
126
+ set totalItems(value) {
127
+ this.setAttribute("total-items", value);
128
+ }
129
+ /**
130
+ * Retrieves the total number of items represented by the 'total-items' attribute.
131
+ * @returns {number} The total number of items. Defaults to 0 if the attribute is not set or is invalid.
132
+ */
133
+ get totalItems() {
134
+ return +this.getAttribute("total-items") || 0;
135
+ }
136
+ /**
137
+ * Sets the visibility of the first button based on the provided value.
138
+ * Adds the 'show-first-button' attribute when the value is truthy, and removes it otherwise.
139
+ * @param {boolean} value Determines whether to show the first button. If true, the 'show-first-button' attribute is added; if false, it is removed.
140
+ */
141
+ set showFirstButton(value) {
142
+ this.removeAttribute("show-first-button");
143
+ if (value) {
144
+ this.setAttribute("show-first-button", "");
145
+ }
146
+ }
147
+ /**
148
+ * Determines whether the 'show-first-button' attribute is present on the element.
149
+ * @returns {boolean} True if the 'show-first-button' attribute is set; otherwise, false.
150
+ */
151
+ get showFirstButton() {
152
+ return this.hasAttribute("show-first-button");
153
+ }
154
+ /**
155
+ * Sets the visibility of the "last" button. This method controls the presence
156
+ * or absence of the "show-last-button" attribute based on the provided value.
157
+ * @param {boolean} value A boolean value indicating whether to show the "last" button.
158
+ * If true, the "show-last-button" attribute is added;
159
+ * if false, the attribute is removed.
160
+ */
161
+ set showLastButton(value) {
162
+ this.removeAttribute("show-last-button");
163
+ if (value) {
164
+ this.setAttribute("show-last-button", "");
165
+ }
166
+ }
167
+ /**
168
+ * Determines if the 'show-last-button' attribute is present on the element.
169
+ * @returns {boolean} True if the 'show-last-button' attribute is present, otherwise false.
170
+ */
171
+ get showLastButton() {
172
+ return this.hasAttribute("show-last-button");
173
+ }
174
+ /**
175
+ * Sets the pagination object by calculating the pagination details
176
+ * based on the total items, current page, page size, and maximum pages.
177
+ * @param {object} value The value to set the pagination object. The pagination details are computed internally.
178
+ */
179
+ set paginateObj(value) {
180
+ this._paginateObj = value;
181
+ }
182
+ /**
183
+ * Retrieves the pagination object used for managing paginated data.
184
+ * @returns {object} The pagination object containing details and functionality for paginating data.
185
+ */
186
+ get paginateObj() {
187
+ return this._paginateObj;
188
+ }
189
+ /**
190
+ * Sets the 'round' attribute on the element. If the provided value is truthy,
191
+ * the 'round' attribute is added. If the value is falsy, the attribute is removed.
192
+ * @param {boolean} value A boolean value determining whether to add or remove the 'round' attribute.
193
+ */
194
+ set round(value) {
195
+ this.removeAttribute("round");
196
+ if (value) {
197
+ this.setAttribute("round", "");
198
+ }
199
+ }
200
+ /**
201
+ * Retrieves the value of the 'round' attribute for the current element.
202
+ * @returns {boolean} A boolean indicating whether the 'round' attribute is present on the element.
203
+ */
204
+ get round() {
205
+ return this.hasAttribute("round");
206
+ }
207
+ /**
208
+ * Sets the `show-info` attribute on the element based on the provided value.
209
+ * @param {boolean} value A boolean indicating whether to add or remove the `show-info` attribute.
210
+ */
211
+ set showInfo(value) {
212
+ this.removeAttribute("show-info");
213
+ if (value) {
214
+ this.setAttribute("show-info", "");
215
+ }
216
+ }
217
+ /**
218
+ * Retrieves the value of the 'show-info' attribute.
219
+ * Checks if the 'show-info' attribute is present on the element.
220
+ * @returns {boolean} True if the 'show-info' attribute is present, otherwise false.
221
+ */
222
+ get showInfo() {
223
+ return this.hasAttribute("show-info");
224
+ }
225
+ /**
226
+ * Returns the CSS styles for the component.
227
+ * @static
228
+ * @returns {CSSStyleSheet}
229
+ */
230
+ static get cssStyleSheet() {
231
+ return styles;
232
+ }
233
+ /**
234
+ * Getter for the observedAttributes attribute of the input element.
235
+ * @returns {Array} The attributes to observe for changes.
236
+ */
237
+ static get observedAttributes() {
238
+ return ["page"];
239
+ }
240
+ /**
241
+ * Sets up the attributes for the component.
242
+ */
243
+ setupAttributes() {
244
+ this.isShadowRoot = "open";
245
+ }
246
+ async beforeDraw() {
247
+ this.paginateObj = await paginate(this.totalItems, this.page + 1, this.pageSize, this.maxPages);
248
+ }
249
+ /**
250
+ * Creates a document fragment, appends a new slot element to it, and returns the fragment.
251
+ * @returns {DocumentFragment} A document fragment containing a slot element.
252
+ */
253
+ draw() {
254
+ let fragment = document.createDocumentFragment();
255
+ let native = document.createElement("div");
256
+ native.setAttribute("part", "native");
257
+ native.classList.add("native-pagination");
258
+ native.append(this.htmlPagination());
259
+ fragment.append(native);
260
+ return fragment;
261
+ }
262
+ /**
263
+ * Creates a pagination control for navigating between pages of content.
264
+ * 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.
265
+ * @returns {DocumentFragment} A document fragment containing the pagination controls.
266
+ */
267
+ htmlPagination() {
268
+ let fragment = document.createDocumentFragment();
269
+ let info = document.createElement("div");
270
+ info.classList.add("info");
271
+ info.innerHTML = `${this.paginateObj.startIndex + 1} - ${this.paginateObj.endIndex + 1} ${this.localizer.translate("wj.pagination.of")} ${this.totalItems}`;
272
+ let pagination = document.createElement("div");
273
+ pagination.classList.add("pages");
274
+ const button = document.createElement("wje-button");
275
+ button.setAttribute("fill", "link");
276
+ if (this.round) button.setAttribute("round", "");
277
+ let firstButton = button.cloneNode(true);
278
+ firstButton.title = this.localizer.translate("wj.pagination.first");
279
+ firstButton.innerHTML = `<wje-icon name="chevron-left-pipe" slot="icon-only"></wje-icon>`;
280
+ firstButton.addEventListener("wje-button:click", (e) => this.pageClickAction(e, 0));
281
+ const prevButton = button.cloneNode(true);
282
+ prevButton.title = this.localizer.translate("wj.pagination.prev");
283
+ prevButton.innerHTML = `<wje-icon name="chevron-left" slot="icon-only"></wje-icon>`;
284
+ if (this.page === 0)
285
+ prevButton.disabled = true;
286
+ prevButton.addEventListener("wje-button:click", (e) => this.pageClickAction(e, this.page - 1));
287
+ const nextButton = button.cloneNode(true);
288
+ nextButton.title = this.localizer.translate("wj.pagination.next");
289
+ nextButton.innerHTML = `<wje-icon name="chevron-right" slot="icon-only"></wje-icon>`;
290
+ if (this.paginateObj.endIndex + 1 >= this.totalItems)
291
+ nextButton.disabled = true;
292
+ nextButton.addEventListener("wje-button:click", (e) => this.pageClickAction(e, this.page + 1));
293
+ let lastButton = button.cloneNode(true);
294
+ lastButton.title = this.localizer.translate("wj.pagination.last");
295
+ lastButton.innerHTML = `<wje-icon name="chevron-right-pipe" slot="icon-only"></wje-icon>`;
296
+ lastButton.disabled = this.paginateObj.endIndex + 1 >= this.totalItems;
297
+ lastButton.addEventListener(
298
+ "wje-button:click",
299
+ (e) => this.pageClickAction(e, this.paginateObj.totalPages - 1)
300
+ );
301
+ if (this.showFirstButton) pagination.appendChild(firstButton);
302
+ pagination.appendChild(prevButton);
303
+ pagination.appendChild(this.htmlStackButtons(this.paginateObj));
304
+ pagination.appendChild(nextButton);
305
+ if (this.showLastButton) pagination.appendChild(lastButton);
306
+ if (this.showInfo) fragment.appendChild(info);
307
+ fragment.appendChild(pagination);
308
+ return fragment;
309
+ }
310
+ /**
311
+ * Creates and returns a DocumentFragment containing a series of buttons for pagination purposes,
312
+ * based on the provided pagination object.
313
+ * @param {object} paginateObj An object containing pagination details.
314
+ * @param {number} paginateObj.currentPage The current active page index (1-based).
315
+ * @param {Array<number>} paginateObj.pages An array of page numbers to display in the pagination.
316
+ * @param {number} paginateObj.totalPages Total number of pages available for pagination.
317
+ * @returns {DocumentFragment} A DocumentFragment containing the buttons and additional pagination elements.
318
+ */
319
+ htmlStackButtons(paginateObj) {
320
+ let fragment = document.createDocumentFragment();
321
+ const button = document.createElement("wje-button");
322
+ button.setAttribute("fill", "link");
323
+ if (this.round) button.setAttribute("round", "");
324
+ let dots = document.createElement("span");
325
+ dots.classList.add("dots");
326
+ const first = button.cloneNode(true);
327
+ first.textContent = "1";
328
+ first.addEventListener("wje-button:click", (e) => this.pageClickAction(e, 0));
329
+ const last = button.cloneNode(true);
330
+ last.textContent = paginateObj.totalPages;
331
+ last.addEventListener("wje-button:click", (e) => this.pageClickAction(e, paginateObj.totalPages - 1));
332
+ if (paginateObj.currentPage > this.maxPages + 1) {
333
+ fragment.appendChild(first);
334
+ fragment.appendChild(dots);
335
+ }
336
+ paginateObj.pages.forEach((page) => {
337
+ let newButton = button.cloneNode(true);
338
+ newButton.textContent = page;
339
+ newButton.addEventListener("wje-button:click", (e) => this.pageClickAction(e, page - 1));
340
+ if (page - 1 === this.page) newButton.removeAttribute("fill");
341
+ fragment.appendChild(newButton);
342
+ });
343
+ if (paginateObj.pages.length === this.maxPages || paginateObj.currentPage <= this.maxPages + 1) {
344
+ fragment.appendChild(dots.cloneNode(true));
345
+ fragment.appendChild(last);
346
+ }
347
+ return fragment;
348
+ }
349
+ }
350
+ Pagination.define("wje-pagination", Pagination);
351
+ Pagination.define("wje-pagination", Pagination);
352
+ export {
353
+ Pagination as default
354
+ };
355
+ //# sourceMappingURL=wje-pagination.js.map