wj-elements 0.1.172 → 0.1.174
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/img/icons/filled/aerial-lift.svg +11 -0
- package/dist/assets/img/icons/filled/air-balloon.svg +12 -0
- package/dist/assets/img/icons/filled/arrow-autofit-down.svg +12 -0
- package/dist/assets/img/icons/filled/arrow-autofit-height.svg +13 -0
- package/dist/assets/img/icons/filled/arrow-autofit-left.svg +12 -0
- package/dist/assets/img/icons/filled/arrow-autofit-right.svg +12 -0
- package/dist/assets/img/icons/filled/arrow-autofit-up.svg +12 -0
- package/dist/assets/img/icons/filled/arrow-autofit-width.svg +12 -0
- package/dist/assets/img/icons/filled/book.svg +1 -1
- package/dist/assets/img/icons/filled/brand-bitbucket.svg +11 -0
- package/dist/assets/img/icons/filled/bus.svg +11 -0
- package/dist/assets/img/icons/filled/calendar-month.svg +4 -6
- package/dist/assets/img/icons/filled/calendar-week.svg +6 -4
- package/dist/assets/img/icons/filled/car-crane.svg +11 -0
- package/dist/assets/img/icons/filled/car.svg +1 -1
- package/dist/assets/img/icons/filled/caravan.svg +11 -0
- package/dist/assets/img/icons/filled/chart-donut.svg +1 -2
- package/dist/assets/img/icons/filled/chart-dots-2.svg +11 -0
- package/dist/assets/img/icons/filled/chart-dots-3.svg +11 -0
- package/dist/assets/img/icons/filled/chart-funnel.svg +11 -0
- package/dist/assets/img/icons/filled/chart-pie-2.svg +11 -0
- package/dist/assets/img/icons/filled/chart-pie-3.svg +11 -0
- package/dist/assets/img/icons/filled/chart-pie-4.svg +11 -0
- package/dist/assets/img/icons/filled/chef-hat.svg +12 -0
- package/dist/assets/img/icons/filled/circle-caret-down.svg +11 -0
- package/dist/assets/img/icons/filled/circle-caret-left.svg +11 -0
- package/dist/assets/img/icons/filled/circle-caret-right.svg +11 -0
- package/dist/assets/img/icons/filled/circle-caret-up.svg +11 -0
- package/dist/assets/img/icons/filled/circle-chevron-down.svg +11 -0
- package/dist/assets/img/icons/filled/circle-chevron-left.svg +11 -0
- package/dist/assets/img/icons/filled/circle-chevron-right.svg +11 -0
- package/dist/assets/img/icons/filled/circle-chevron-up.svg +11 -0
- package/dist/assets/img/icons/filled/circle-chevrons-down.svg +11 -0
- package/dist/assets/img/icons/filled/circle-chevrons-left.svg +11 -0
- package/dist/assets/img/icons/filled/circle-chevrons-right.svg +11 -0
- package/dist/assets/img/icons/filled/circle-chevrons-up.svg +11 -0
- package/dist/assets/img/icons/filled/clipboard-check.svg +11 -0
- package/dist/assets/img/icons/filled/clipboard-data.svg +11 -0
- package/dist/assets/img/icons/filled/clipboard-list.svg +11 -0
- package/dist/assets/img/icons/filled/clipboard-plus.svg +11 -0
- package/dist/assets/img/icons/filled/clipboard-smile.svg +11 -0
- package/dist/assets/img/icons/filled/clipboard-text.svg +11 -0
- package/dist/assets/img/icons/filled/clipboard-typography.svg +11 -0
- package/dist/assets/img/icons/filled/clipboard-x.svg +11 -0
- package/dist/assets/img/icons/filled/clipboard.svg +11 -0
- package/dist/assets/img/icons/filled/cloud-computing.svg +11 -0
- package/dist/assets/img/icons/filled/cloud-data-connection.svg +11 -0
- package/dist/assets/img/icons/filled/current-location.svg +11 -0
- package/dist/assets/img/icons/filled/direction-arrows.svg +11 -0
- package/dist/assets/img/icons/filled/drop-circle.svg +11 -0
- package/dist/assets/img/icons/filled/droplets.svg +13 -0
- package/dist/assets/img/icons/filled/dual-screen.svg +11 -0
- package/dist/assets/img/icons/filled/dumpling.svg +11 -0
- package/dist/assets/img/icons/filled/ease-in-control-point.svg +11 -0
- package/dist/assets/img/icons/filled/ease-in-out-control-points.svg +12 -0
- package/dist/assets/img/icons/filled/ease-out-control-point.svg +12 -0
- package/dist/assets/img/icons/filled/egg-fried.svg +11 -0
- package/dist/assets/img/icons/filled/engine.svg +11 -0
- package/dist/assets/img/icons/filled/escalator-down.svg +12 -0
- package/dist/assets/img/icons/filled/escalator-up.svg +13 -0
- package/dist/assets/img/icons/filled/escalator.svg +11 -0
- package/dist/assets/img/icons/filled/exchange.svg +11 -0
- package/dist/assets/img/icons/filled/explicit.svg +11 -0
- package/dist/assets/img/icons/filled/exposure.svg +11 -0
- package/dist/assets/img/icons/filled/eye-table.svg +11 -0
- package/dist/assets/img/icons/filled/eyeglass-2.svg +11 -0
- package/dist/assets/img/icons/filled/eyeglass.svg +11 -0
- package/dist/assets/img/icons/filled/face-mask.svg +11 -0
- package/dist/assets/img/icons/filled/fence.svg +15 -0
- package/dist/assets/img/icons/filled/ferry.svg +11 -0
- package/dist/assets/img/icons/filled/fidget-spinner.svg +11 -0
- package/dist/assets/img/icons/filled/file-analytics.svg +12 -0
- package/dist/assets/img/icons/filled/file-check.svg +11 -0
- package/dist/assets/img/icons/filled/file-code-2.svg +11 -0
- package/dist/assets/img/icons/filled/file-code.svg +12 -0
- package/dist/assets/img/icons/filled/file-cv.svg +11 -0
- package/dist/assets/img/icons/filled/file-delta.svg +11 -0
- package/dist/assets/img/icons/filled/file-description.svg +12 -0
- package/dist/assets/img/icons/filled/file-diff.svg +12 -0
- package/dist/assets/img/icons/filled/file-digit.svg +12 -0
- package/dist/assets/img/icons/filled/file-dots.svg +12 -0
- package/dist/assets/img/icons/filled/file-download.svg +11 -0
- package/dist/assets/img/icons/filled/file-function.svg +12 -0
- package/dist/assets/img/icons/filled/file-horizontal.svg +12 -0
- package/dist/assets/img/icons/filled/file-info.svg +12 -0
- package/dist/assets/img/icons/filled/file-invoice.svg +12 -0
- package/dist/assets/img/icons/filled/file-lambda.svg +11 -0
- package/dist/assets/img/icons/filled/file-minus.svg +12 -0
- package/dist/assets/img/icons/filled/file-neutral.svg +12 -0
- package/dist/assets/img/icons/filled/file-percent.svg +11 -0
- package/dist/assets/img/icons/filled/file-phone.svg +11 -0
- package/dist/assets/img/icons/filled/file-power.svg +12 -0
- package/dist/assets/img/icons/filled/file-rss.svg +11 -0
- package/dist/assets/img/icons/filled/file-sad.svg +12 -0
- package/dist/assets/img/icons/filled/file-smile.svg +12 -0
- package/dist/assets/img/icons/filled/file-star.svg +12 -0
- package/dist/assets/img/icons/filled/file-text.svg +12 -0
- package/dist/assets/img/icons/filled/file-typography.svg +12 -0
- package/dist/assets/img/icons/filled/filters.svg +13 -0
- package/dist/assets/img/icons/filled/fish-bone.svg +11 -0
- package/dist/assets/img/icons/filled/flame.svg +11 -0
- package/dist/assets/img/icons/filled/flare.svg +11 -0
- package/dist/assets/img/icons/filled/folders.svg +11 -0
- package/dist/assets/img/icons/filled/garden-cart.svg +11 -0
- package/dist/assets/img/icons/filled/gas-station.svg +11 -0
- package/dist/assets/img/icons/filled/grid-pattern.svg +11 -0
- package/dist/assets/img/icons/filled/heart-broken.svg +11 -0
- package/dist/assets/img/icons/filled/helicopter-landing.svg +11 -0
- package/dist/assets/img/icons/filled/helicopter.svg +11 -0
- package/dist/assets/img/icons/filled/laurel-wreath-1.svg +11 -0
- package/dist/assets/img/icons/filled/laurel-wreath-2.svg +11 -0
- package/dist/assets/img/icons/filled/laurel-wreath-3.svg +11 -0
- package/dist/assets/img/icons/filled/laurel-wreath.svg +11 -0
- package/dist/assets/img/icons/filled/lemon-2.svg +11 -0
- package/dist/assets/img/icons/filled/lifebuoy.svg +11 -0
- package/dist/assets/img/icons/filled/microscope.svg +11 -0
- package/dist/assets/img/icons/filled/motorbike.svg +11 -0
- package/dist/assets/img/icons/filled/pig.svg +11 -0
- package/dist/assets/img/icons/filled/rollercoaster.svg +11 -0
- package/dist/assets/img/icons/filled/{seeding.svg → seedling.svg} +1 -1
- package/dist/assets/img/icons/filled/speedboat.svg +11 -0
- package/dist/assets/img/icons/filled/spider.svg +11 -0
- package/dist/assets/img/icons/filled/sun-high.svg +11 -0
- package/dist/assets/img/icons/filled/sun-low.svg +11 -0
- package/dist/assets/img/icons/filled/sunrise.svg +18 -0
- package/dist/assets/img/icons/filled/sunset-2.svg +19 -0
- package/dist/assets/img/icons/filled/sunset.svg +17 -0
- package/dist/assets/img/icons/filled/temperature-minus.svg +11 -0
- package/dist/assets/img/icons/filled/temperature-plus.svg +11 -0
- package/dist/assets/img/icons/filled/train.svg +11 -0
- package/dist/assets/img/icons/filled/trolley.svg +11 -0
- package/dist/assets/img/icons/filled/truck.svg +11 -0
- package/dist/assets/img/icons/filled/ufo.svg +11 -0
- package/dist/assets/img/icons/outline/arrow-bar-to-down-dashed.svg +18 -0
- package/dist/assets/img/icons/outline/arrow-bar-to-left-dashed.svg +18 -0
- package/dist/assets/img/icons/outline/arrow-bar-to-right-dashed.svg +18 -0
- package/dist/assets/img/icons/outline/arrow-bar-to-up-dashed.svg +18 -0
- package/dist/assets/img/icons/outline/cake-roll.svg +17 -0
- package/dist/assets/img/icons/outline/calendar-month.svg +3 -7
- package/dist/assets/img/icons/outline/calendar-week.svg +7 -3
- package/dist/assets/img/icons/outline/cash-banknote-edit.svg +18 -0
- package/dist/assets/img/icons/outline/cash-banknote-heart.svg +18 -0
- package/dist/assets/img/icons/outline/cash-banknote-minus.svg +19 -0
- package/dist/assets/img/icons/outline/cash-banknote-move-back.svg +20 -0
- package/dist/assets/img/icons/outline/cash-banknote-move.svg +20 -0
- package/dist/assets/img/icons/outline/cash-banknote-plus.svg +20 -0
- package/dist/assets/img/icons/outline/cash-banknote.svg +4 -4
- package/dist/assets/img/icons/outline/cash-edit.svg +17 -0
- package/dist/assets/img/icons/outline/cash-heart.svg +17 -0
- package/dist/assets/img/icons/outline/cash-minus.svg +18 -0
- package/dist/assets/img/icons/outline/cash-move-back.svg +19 -0
- package/dist/assets/img/icons/outline/cash-move.svg +19 -0
- package/dist/assets/img/icons/outline/cash-plus.svg +19 -0
- package/dist/assets/img/icons/outline/cash.svg +3 -3
- package/dist/assets/img/icons/outline/chalkboard-teacher.svg +17 -0
- package/dist/assets/img/icons/outline/error-404-off.svg +5 -5
- package/dist/assets/img/icons/outline/error-404.svg +5 -5
- package/dist/assets/img/icons/outline/exposure-off.svg +4 -4
- package/dist/assets/img/icons/outline/exposure.svg +4 -4
- package/dist/assets/img/icons/outline/ferry.svg +4 -4
- package/dist/assets/img/icons/outline/file-text-shield.svg +20 -0
- package/dist/assets/img/icons/outline/filter-2-bolt.svg +18 -0
- package/dist/assets/img/icons/outline/filter-2-cancel.svg +18 -0
- package/dist/assets/img/icons/outline/filter-2-check.svg +18 -0
- package/dist/assets/img/icons/outline/filter-2-code.svg +19 -0
- package/dist/assets/img/icons/outline/filter-2-cog.svg +18 -0
- package/dist/assets/img/icons/outline/filter-2-discount.svg +20 -0
- package/dist/assets/img/icons/outline/filter-2-dollar.svg +18 -0
- package/dist/assets/img/icons/outline/filter-2-down.svg +20 -0
- package/dist/assets/img/icons/outline/filter-2-edit.svg +18 -0
- package/dist/assets/img/icons/outline/filter-2-exclamation.svg +18 -0
- package/dist/assets/img/icons/outline/filter-2-minus.svg +18 -0
- package/dist/assets/img/icons/outline/filter-2-pause.svg +19 -0
- package/dist/assets/img/icons/outline/filter-2-pin.svg +18 -0
- package/dist/assets/img/icons/outline/filter-2-plus.svg +19 -0
- package/dist/assets/img/icons/outline/filter-2-question.svg +19 -0
- package/dist/assets/img/icons/outline/filter-2-search.svg +19 -0
- package/dist/assets/img/icons/outline/filter-2-share.svg +20 -0
- package/dist/assets/img/icons/outline/filter-2-spark.svg +18 -0
- package/dist/assets/img/icons/outline/filter-2-up.svg +18 -0
- package/dist/assets/img/icons/outline/filter-2-x.svg +18 -0
- package/dist/assets/img/icons/outline/filter-2.svg +17 -0
- package/dist/assets/img/icons/outline/filter-spark.svg +16 -0
- package/dist/assets/img/icons/outline/flame.svg +1 -1
- package/dist/assets/img/icons/outline/folders.svg +2 -2
- package/dist/assets/img/icons/outline/hand-click-off.svg +23 -0
- package/dist/assets/img/icons/outline/http-connect-off.svg +18 -0
- package/dist/assets/img/icons/outline/http-connect.svg +1 -1
- package/dist/assets/img/icons/outline/http-delete-off.svg +19 -0
- package/dist/assets/img/icons/outline/http-delete.svg +1 -1
- package/dist/assets/img/icons/outline/http-get-off.svg +20 -0
- package/dist/assets/img/icons/outline/http-head-off.svg +22 -0
- package/dist/assets/img/icons/outline/http-options-off.svg +19 -0
- package/dist/assets/img/icons/outline/http-options.svg +1 -1
- package/dist/assets/img/icons/outline/http-patch-off.svg +20 -0
- package/dist/assets/img/icons/outline/http-post-off.svg +18 -0
- package/dist/assets/img/icons/outline/http-post.svg +1 -1
- package/dist/assets/img/icons/outline/http-put-off.svg +19 -0
- package/dist/assets/img/icons/outline/http-que-off.svg +20 -0
- package/dist/assets/img/icons/outline/http-que.svg +1 -1
- package/dist/assets/img/icons/outline/http-trace-off.svg +21 -0
- package/dist/assets/img/icons/outline/http-trace.svg +2 -1
- package/dist/assets/img/icons/outline/matrix.svg +25 -0
- package/dist/assets/img/icons/outline/moneybag-edit.svg +17 -0
- package/dist/assets/img/icons/outline/moneybag-heart.svg +17 -0
- package/dist/assets/img/icons/outline/moneybag-minus.svg +17 -0
- package/dist/assets/img/icons/outline/moneybag-move-back.svg +18 -0
- package/dist/assets/img/icons/outline/moneybag-move.svg +18 -0
- package/dist/assets/img/icons/outline/moneybag-plus.svg +18 -0
- package/dist/assets/img/icons/outline/moneybag.svg +2 -2
- package/dist/assets/img/icons/outline/replace-user.svg +20 -0
- package/dist/assets/img/icons/outline/{seeding-off.svg → seedling-off.svg} +1 -1
- package/dist/assets/img/icons/outline/{seeding.svg → seedling.svg} +1 -1
- package/dist/assets/img/icons/outline/speedboat.svg +1 -1
- package/dist/assets/img/icons/outline/square-dashed.svg +15 -0
- package/dist/assets/img/icons/outline/table-dashed.svg +17 -0
- package/dist/assets/img/icons/outline/train.svg +4 -4
- package/dist/packages/wje-button/button.element.d.ts +12 -0
- package/dist/packages/wje-chip/chip.element.d.ts +34 -0
- package/dist/packages/wje-kanban/kanban.element.d.ts +1 -2
- package/dist/packages/wje-select/select.element.d.ts +55 -17
- package/dist/wje-button.js +20 -0
- package/dist/wje-button.js.map +1 -1
- package/dist/wje-chip.js +66 -3
- package/dist/wje-chip.js.map +1 -1
- package/dist/wje-kanban.js.map +1 -1
- package/dist/wje-menu-item.js.map +1 -1
- package/dist/wje-select.js +96 -30
- package/dist/wje-select.js.map +1 -1
- package/dist/wje-tree-item.js +1 -0
- package/dist/wje-tree-item.js.map +1 -1
- package/dist/wje-tree.js +2 -1
- package/dist/wje-tree.js.map +1 -1
- package/package.json +1 -1
package/dist/wje-tree.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"wje-tree.js","sources":["../packages/wje-tree/tree.element.js","../packages/wje-tree/tree.js"],"sourcesContent":["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 * 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) 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 * 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}\n","import Tree from './tree.element.js';\n\nexport default Tree;\n\nTree.define('wje-tree', Tree);\n"],"names":[],"mappings":";;;;;AAee,MAAM,aAAa,UAAU;AAAA;AAAA;AAAA;AAAA,EAIxC,cAAc;AACV,UAAO;AAwBX;AAAA;AAAA;AAAA;AAAA,qCAAY;AAuEZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uCAAc,CAAC,MAAM;AACjB,UAAI,eAAe,EAAE,OAAO,QAAQ,eAAe;AACnD,UAAI,gBAAgB,EAAE,aAAY,EAAG,KAAK,CAAC,OAAE;;AAAK,8CAAI,cAAJ,mBAAe,SAAS;AAAA,OAAS;AACnF,UAAI,cAAe;AAEnB,UAAI,KAAK,cAAc,UAAU;AAC7B,YAAI,cAAc;AACd,mBAAS,QAAQ,KAAK,eAAe;AACjC,iBAAK,WAAW,SAAS;AAAA,UAC7C;AAAA,QACA;AAAA,MACA,WAAmB,KAAK,cAAc,YAAY;AAEtC,qBAAa,WAAW,CAAC,aAAa;AAEtC,aAAK,oBAAoB,YAAY;AAAA,MACjD;AAAA,IACK;AAAA,EA/GL;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,UAAU,OAAO;AACjB,SAAK,aAAa,aAAa,KAAK;AAAA,EAC5C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,IAAI,YAAY;AACZ,WAAO,KAAK,aAAa,WAAW,KAAK;AAAA,EACjD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQI,aAAa;AACT,UAAM,QAAQ,KAAK,iBAAiB,eAAe;AACnD,mCAAO,QAAQ,CAAC,SAAS;AACrB,WAAK,YAAY,KAAK;AAEtB,WAAK,sBAAsB,MAAM,QAAQ;AACzC,WAAK,sBAAsB,MAAM,UAAU;AAAA,IACvD;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,UAAU,IAAI,aAAa;AAElC,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,WAAO,YAAY,IAAI;AAEvB,aAAS,YAAY,MAAM;AAE3B,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQI,YAAY;AACR,SAAK,iBAAiB,SAAS,KAAK,WAAW;AAAA,EACvD;AAAA;AAAA;AAAA;AAAA;AAAA,EAgCI,cAAc;AACV,WAAO,CAAC,GAAG,KAAK,iBAAiB,eAAe,CAAC;AAAA,EACzD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQI,sBAAsB,MAAM,QAAQ;AAChC,QAAI,OAAO,KAAK,cAAc,UAAU,MAAM,IAAI;AAClD,QAAI,CAAC,MAAM;AACP,cAAQ,KAAK,mBAAmB,MAAM,kBAAkB;AACxD;AAAA,IACZ;AAEQ,QAAI,YAAY,KAAK,UAAU,IAAI;AACnC,SAAK,YAAY,SAAS;AAAA,EAClC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASI,oBAAoB,aAAa,gBAAgB,OAAO;AACpD,SAAK,gBAAgB;AACrB,SAAK,wBAAwB,WAAW;AACxC,SAAK,sBAAsB,WAAW;AAAA,EAC9C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWI,kBAAkB,MAAM;;AACpB,UAAM,WAAW,KAAK,iBAAiB,EAAE,iBAAiB,MAAK,CAAE;AAEjE,QAAI,SAAS,QAAQ;AACjB,YAAM,wBAAwB,SAAS,MAAM,CAAC,UAAU,MAAM,QAAQ;AACtE,YAAM,yBAAyB,SAAS,KAAK,CAAC,UAAU,MAAM,QAAQ;AACtE,YAAM,+BAA+B,SAAS,KAAK,CAAC,UAAU,MAAM,aAAa;AAEjF,WAAK,WAAW;AAChB,WAAK,gBAAgB,gCAAiC,0BAA0B,CAAC;AAAA,IAC7F,OAAe;AACH,WAAK,gBAAgB;AAAA,IACjC;AAEQ,UAAM,UAAS,UAAK,kBAAL,mBAAoB,QAAQ;AAC3C,QAAI,QAAQ;AACR,WAAK,kBAAkB,MAAM;AAAA,IACzC;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQI,sBAAsB,MAAM;;AACxB,UAAM,UAAS,UAAK,kBAAL,mBAAoB,QAAQ;AAE3C,QAAI,QAAQ;AACR,WAAK,kBAAkB,MAAM;AAC7B,WAAK,sBAAsB,MAAM;AAAA,IAC7C;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASI,wBAAwB,MAAM;AAC1B,UAAM,YAAY,KAAK;AAEvB,SAAK,iBAAgB,EAAG,QAAQ,CAAC,UAAU;AACvC,YAAM,WAAW,KAAK,gBAAgB,aAAa,MAAM,WAAW,CAAC,MAAM,YAAY;AACvF,WAAK,wBAAwB,KAAK;AAAA,IAC9C,CAAS;AAED,QAAI,KAAK,eAAe;AACpB,WAAK,kBAAkB,IAAI;AAAA,IACvC;AAAA,EACA;AACA;ACvOA,KAAK,OAAO,YAAY,IAAI;"}
|
|
1
|
+
{"version":3,"file":"wje-tree.js","sources":["../packages/wje-tree/tree.element.js","../packages/wje-tree/tree.js"],"sourcesContent":["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 * 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) 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('template')?.content.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 * 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}\n","import Tree from './tree.element.js';\n\nexport default Tree;\n\nTree.define('wje-tree', Tree);\n"],"names":[],"mappings":";;;;;AAee,MAAM,aAAa,UAAU;AAAA;AAAA;AAAA;AAAA,EAIxC,cAAc;AACV,UAAO;AAwBX;AAAA;AAAA;AAAA;AAAA,qCAAY;AAuEZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uCAAc,CAAC,MAAM;AACjB,UAAI,eAAe,EAAE,OAAO,QAAQ,eAAe;AACnD,UAAI,gBAAgB,EAAE,aAAY,EAAG,KAAK,CAAC,OAAE;;AAAK,8CAAI,cAAJ,mBAAe,SAAS;AAAA,OAAS;AACnF,UAAI,cAAe;AAEnB,UAAI,KAAK,cAAc,UAAU;AAC7B,YAAI,cAAc;AACd,mBAAS,QAAQ,KAAK,eAAe;AACjC,iBAAK,WAAW,SAAS;AAAA,UAC7C;AAAA,QACA;AAAA,MACA,WAAmB,KAAK,cAAc,YAAY;AAEtC,qBAAa,WAAW,CAAC,aAAa;AAEtC,aAAK,oBAAoB,YAAY;AAAA,MACjD;AAAA,IACK;AAAA,EA/GL;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,UAAU,OAAO;AACjB,SAAK,aAAa,aAAa,KAAK;AAAA,EAC5C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,IAAI,YAAY;AACZ,WAAO,KAAK,aAAa,WAAW,KAAK;AAAA,EACjD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQI,aAAa;AACT,UAAM,QAAQ,KAAK,iBAAiB,eAAe;AACnD,mCAAO,QAAQ,CAAC,SAAS;AACrB,WAAK,YAAY,KAAK;AAEtB,WAAK,sBAAsB,MAAM,QAAQ;AACzC,WAAK,sBAAsB,MAAM,UAAU;AAAA,IACvD;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,UAAU,IAAI,aAAa;AAElC,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,WAAO,YAAY,IAAI;AAEvB,aAAS,YAAY,MAAM;AAE3B,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQI,YAAY;AACR,SAAK,iBAAiB,SAAS,KAAK,WAAW;AAAA,EACvD;AAAA;AAAA;AAAA;AAAA;AAAA,EAgCI,cAAc;AACV,WAAO,CAAC,GAAG,KAAK,iBAAiB,eAAe,CAAC;AAAA,EACzD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQI,sBAAsB,MAAM,QAAQ;;AAChC,QAAI,QAAO,UAAK,cAAc,UAAU,MAA7B,mBAAgC,QAAQ,cAAc,UAAU,MAAM;AACjF,QAAI,CAAC,MAAM;AACP,cAAQ,KAAK,mBAAmB,MAAM,kBAAkB;AACxD;AAAA,IACZ;AAEQ,QAAI,YAAY,KAAK,UAAU,IAAI;AACnC,SAAK,YAAY,SAAS;AAAA,EAClC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASI,oBAAoB,aAAa,gBAAgB,OAAO;AACpD,SAAK,gBAAgB;AACrB,SAAK,wBAAwB,WAAW;AACxC,SAAK,sBAAsB,WAAW;AAAA,EAC9C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWI,kBAAkB,MAAM;;AACpB,UAAM,WAAW,KAAK,iBAAiB,EAAE,iBAAiB,MAAK,CAAE;AAEjE,QAAI,SAAS,QAAQ;AACjB,YAAM,wBAAwB,SAAS,MAAM,CAAC,UAAU,MAAM,QAAQ;AACtE,YAAM,yBAAyB,SAAS,KAAK,CAAC,UAAU,MAAM,QAAQ;AACtE,YAAM,+BAA+B,SAAS,KAAK,CAAC,UAAU,MAAM,aAAa;AAEjF,WAAK,WAAW;AAChB,WAAK,gBAAgB,gCAAiC,0BAA0B,CAAC;AAAA,IAC7F,OAAe;AACH,WAAK,gBAAgB;AAAA,IACjC;AAEQ,UAAM,UAAS,UAAK,kBAAL,mBAAoB,QAAQ;AAC3C,QAAI,QAAQ;AACR,WAAK,kBAAkB,MAAM;AAAA,IACzC;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQI,sBAAsB,MAAM;;AACxB,UAAM,UAAS,UAAK,kBAAL,mBAAoB,QAAQ;AAE3C,QAAI,QAAQ;AACR,WAAK,kBAAkB,MAAM;AAC7B,WAAK,sBAAsB,MAAM;AAAA,IAC7C;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASI,wBAAwB,MAAM;AAC1B,UAAM,YAAY,KAAK;AAEvB,SAAK,iBAAgB,EAAG,QAAQ,CAAC,UAAU;AACvC,YAAM,WAAW,KAAK,gBAAgB,aAAa,MAAM,WAAW,CAAC,MAAM,YAAY;AACvF,WAAK,wBAAwB,KAAK;AAAA,IAC9C,CAAS;AAED,QAAI,KAAK,eAAe;AACpB,WAAK,kBAAkB,IAAI;AAAA,IACvC;AAAA,EACA;AACA;ACvOA,KAAK,OAAO,YAAY,IAAI;"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "wj-elements",
|
|
3
3
|
"description": "WebJET Elements is a modern set of user interface tools harnessing the power of web components designed to simplify web application development.",
|
|
4
|
-
"version": "0.1.
|
|
4
|
+
"version": "0.1.174",
|
|
5
5
|
"homepage": "https://github.com/lencys/wj-elements",
|
|
6
6
|
"author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
|
|
7
7
|
"license": "MIT",
|