wj-elements 0.7.7 → 0.8.0

package/dist/wje-options.js.map

@@ -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.js';\nimport List from '../wje-list/list.js';\nimport Option from '../wje-option/option.js';\n\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Options` is a custom web component that represents a set of options. 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 * @tag wje-options\n */\n\nexport default class Options extends WJElement {\n\n\t#loadedOptions = [];\n\n\t#drawPreloadedElements = [];\n\n\tconstructor() {\n\t\tsuper();\n\t}\n\n\tdependencies = {\n\t\t'wje-option': Option,\n\t\t'wje-infinite-scroll': InfiniteScroll,\n\t\t'wje-list': List,\n\t}\n\n\t/**\n\t * Sets the option array path attribute.\n\t * @param {string} value The value to set for the option array path.\n\t */\n\tset optionArrayPath(value) {\n\t\tthis.setAttribute('option-array-path', value);\n\t}\n\n\t/**\n\t * Gets the option array path attribute.\n\t * @returns {string} The value of the option array path attribute or \"data\" if not set.\n\t */\n\tget optionArrayPath() {\n\t\treturn this.getAttribute('option-array-path');\n\t}\n\n\t/**\n\t * Checks if the option array path attribute is present.\n\t * @returns {boolean} True if the option array path attribute is present, false otherwise.\n\t */\n\tget hasOptionArrayPath() {\n\t\treturn this.hasAttribute('option-array-path');\n\t}\n\n\t/**\n\t * Gets the dropdown height attribute.\n\t * @returns {string} The value of the dropdown height attribute or \"100%\" if not set.\n\t */\n\tget dropdownHeight() {\n\t\treturn this.getAttribute('dropdown-height') || '100%';\n\t}\n\n\t/**\n\t * Sets the dropdown height attribute.\n\t * @param {string} value The value to set for the dropdown height.\n\t */\n\tset dropdownHeight(value) {\n\t\tthis.setAttribute('dropdown-height', value);\n\t}\n\n\t/**\n\t * Sets the item value attribute.\n\t * @param {string} value The value to set for the item value.\n\t */\n\tset itemValue(value) {\n\t\tthis.setAttribute('item-value', value);\n\t}\n\n\t/**\n\t * Gets the item value attribute.\n\t * @returns {string} The value of the item value attribute or \"value\" if not set.\n\t */\n\tget itemValue() {\n\t\treturn this.getAttribute('item-value') || 'value';\n\t}\n\n\t/**\n\t * Sets the item text attribute.\n\t * @param {string} value The value to set for the item text.\n\t */\n\tset itemText(value) {\n\t\tthis.setAttribute('item-text', value);\n\t}\n\n\t/**\n\t * Gets the item text attribute.\n\t * @returns {string} The value of the item text attribute or \"text\" if not set.\n\t */\n\tget itemText() {\n\t\treturn this.getAttribute('item-text') || 'text';\n\t}\n\n\t/**\n\t * Gets the lazy load size attribute.\n\t * @returns {number} The value of the lazy load size attribute or 10 if not set.\n\t */\n\tget lazyLoadSize() {\n\t\treturn this.getAttribute('lazy-load-size') || 10;\n\t}\n\n\t/**\n\t * Sets the lazy load size attribute.\n\t * @param {number} value The value to set for the lazy load size.\n\t */\n\tset lazyLoadSize(value) {\n\t\tthis.setAttribute('lazy-load-size', value);\n\t}\n\n\t/**\n\t * Sets the search attribute.\n\t * @param {string} value The value to set for the search.\n\t */\n\tset search(value) {\n\t\tthis.setAttribute('search', value);\n\t}\n\n\t/**\n\t * Gets the search attribute.\n\t * @returns {string} The value of the search attribute.\n\t */\n\tget search() {\n\t\treturn this.getAttribute('search');\n\t}\n\n\t/**\n\t * Checks if the search attribute is present.\n\t * @returns {boolean} True if the search attribute is present, false otherwise.\n\t */\n\tget hasSearch() {\n\t\treturn this.hasAttribute('search');\n\t}\n\n\t/**\n\t * Retrieves the value of the 'search-to-query-params' attribute from the current instance.\n\t * @returns {string | null} The value of the 'search-to-query-params' attribute, or null if the attribute is not set.\n\t */\n\tget searchToQueryParams() {\n\t\treturn this.getAttribute('search-to-query-params');\n\t}\n\n\t/**\n\t * Sets the value to define search-to-query params behavior.\n\t * @param {string} value The value to be set for the search-to-query-params attribute.\n\t */\n\tset searchToQueryParams(value) {\n\t\tthis.setAttribute('search-to-query-params', value);\n\t}\n\n\t/**\n\t * Determines whether the 'search-to-query-params' attribute is present on the element.\n\t * @returns {boolean} True if the 'search-to-query-params' attribute exists, otherwise false.\n\t */\n\tget hasSearchToQueryParams() {\n\t\treturn this.hasAttribute('search-to-query-params');\n\t}\n\n\t/**\n\t * Sets the value of the search parameter name attribute.\n\t * @param {string} value The string value to set as the search parameter name.\n\t */\n\tset searchParamName(value) {\n\t\tthis.setAttribute('search-param-name', value);\n\t}\n\n\t/**\n\t * Gets the search parameter name used in queries.\n\t * Retrieves the value of the 'search-param-name' attribute.\n\t * If the attribute is not set, it defaults to 'search'.\n\t * @returns {string} The search parameter name used for queries.\n\t */\n\tget searchParamName() {\n\t\treturn this.getAttribute('search-param-name') || 'search';\n\t}\n\n\t/**\n\t * Sets the queryParams attribute on the element.\n\t * @param {string} value The query parameters to set, represented as a string.\n\t */\n\tset queryParams(value) {\n\t\tthis.setAttribute('query-params', value);\n\t}\n\n\t/**\n\t * Retrieves the value of the 'query-params' attribute.\n\t * @returns {string | null} The value of the 'query-params' attribute, or null if the attribute is not set.\n\t */\n\tget queryParams() {\n\t\treturn this.getAttribute('query-params');\n\t}\n\n\t/**\n\t * Sets the lazy attribute.\n\t * @param {boolean} value The value to set for the lazy attribute.\n\t */\n\tset lazy(value) {\n\t\tthis.setAttribute('lazy', value);\n\t}\n\n\t/**\n\t * Checks if the lazy attribute is present.\n\t * @returns {boolean} True if the lazy attribute is present, false otherwise.\n\t */\n\tget lazy() {\n\t\treturn this.hasAttribute('lazy');\n\t}\n\n\t/**\n\t * Gets the loaded options.\n\t * @returns {Array} The loaded options.\n\t */\n\tget options() {\n\t\treturn this.loadedOptions?.flat();\n\t}\n\n\t/**\n\t * Gets the loaded options.\n\t * @type {Array}\n\t */\n\tget loadedOptions() {\n\t\treturn this.#loadedOptions;\n\t}\n\n\t/**\n\t * Sets the loaded options.\n\t * @type {Array}\n\t */\n\tset loadedOptions(loadedOptions) {\n\t\tthis.#loadedOptions = loadedOptions;\n\t}\n\n\t/**\n\t * Array of preloaded elements.\n\t * @type {Array}\n\t * @private\n\t */\n\tget drawPreloadedElements() {\n\t\treturn this.#drawPreloadedElements;\n\t}\n\n\t/**\n\t * Sets the elements that are preloaded and ready to be drawn.\n\t * @param {Array|object} elements The elements to be set for preloading. This can be an array or a specific object containing drawable elements.\n\t */\n\tset drawPreloadedElements(elements) {\n\t\tthis.#drawPreloadedElements = elements;\n\t}\n\n\tclassName = 'Options';\n\n\t/**\n\t * Returns the CSS styles for the component.\n\t * @static\n\t * @returns {CSSStyleSheet} The CSS styles for the component.\n\t */\n\tstatic get cssStyleSheet() {\n\t\treturn styles;\n\t}\n\n\t/**\n\t * Retrieves an array of attributes that should be observed for changes.\n\t * The method returns a list of attribute names that the browser will monitor for changes.\n\t * @returns {Array<string>} An array of attribute names to observe.\n\t */\n\tstatic get observedAttributes() {\n\t\treturn ['search', 'attached'];\n\t}\n\n\t/**\n\t * Sets up the attributes for the component.\n\t */\n\tsetupAttributes() {\n\t\tthis.isShadowRoot = 'open';\n\t\tthis.syncAria();\n\t}\n\n\t/**\n\t * Draws the component.\n\t * @returns {DocumentFragment}\n\t */\n\tasync draw() {\n\t\tlet fragment = document.createDocumentFragment();\n\n\t\tconst slot = document.createElement('slot');\n\t\tfragment.appendChild(slot);\n\t\tthis.syncAria();\n\n\t\tif (this.lazy) {\n\t\t\tif (this.contains(this.infiniteScroll)) {\n\t\t\t\tthis.drawPreloadedElements.forEach((el) => { el.remove() });\n\t\t\t\tthis.loadedOptions = [];\n\t\t\t\tthis.infiniteScroll.placementObj.innerHTML = '';\n\t\t\t\tthis.infiniteScroll.totalPages = 0;\n\t\t\t\tthis.infiniteScroll.refresh();\n\t\t\t}\n\n\t\t\tlet loader = document.createElement('div');\n\t\t\tloader.setAttribute('slot', 'loader');\n\t\t\tloader.append('Loading...');\n\t\t\tloader.classList.add('loader');\n\n\t\t\tconst infiniteScroll = document.createElement('wje-infinite-scroll');\n\t\t\tinfiniteScroll.setAttribute('placement', 'wje-list');\n\t\t\tinfiniteScroll.setAttribute('height', this.dropdownHeight);\n\t\t\tinfiniteScroll.setAttribute('object-name', this.optionArrayPath);\n\t\t\tinfiniteScroll.dataToHtml = this.htmlItem;\n\t\t\tinfiniteScroll.setCustomData = async (page, signal) => {\n\t\t\t\tlet processedUrl = `${this.url}${this.search ? `/${this.search}` : ''}?page=${page}&size=${this.lazyLoadSize}${this.queryParams ? `&${this.queryParams}` : ''}`;\n\n\t\t\t\tif (this.hasSearchToQueryParams) {\n\t\t\t\t\tprocessedUrl = `${this.url}?page=${page}&size=${this.lazyLoadSize}${this.queryParams ? `&${this.queryParams}` : ''}${this.search ? `&${this.searchParamName}=${this.search}` : ''}`;\n\t\t\t\t}\n\n\t\t\t\tlet res = await this.service.get(processedUrl, null, false, signal);\n\t\t\t\tconst filteredOptions = this.filterOutDrawnOptions(res);\n\t\t\t\tthis.loadedOptions.push(...this.processData(filteredOptions));\n\n\t\t\t\treturn filteredOptions;\n\t\t\t};\n\n\t\t\tconst list = document.createElement('wje-list');\n\n\t\t\tinfiniteScroll.append(list);\n\t\t\tinfiniteScroll.append(loader);\n\n\t\t\tif (this.hasAttribute('attached') && !this.hasSearch) {\n\t\t\t\tthis.appendChild(infiniteScroll);\n\t\t\t\tthis.drawPreloadedElements.forEach((el) => {\n\t\t\t\t\tlist.appendChild(el);\n\t\t\t\t});\n\t\t\t\tthis.infiniteScroll = infiniteScroll;\n\t\t\t}\n\t\t} else {\n\t\t\tthis.response = await this.getPages();\n\n\t\t\tlet optionsData = this.filterOutDrawnOptions(this.response);\n\t\t\toptionsData = this.processData(optionsData);\n\n\t\t\tthis.loadedOptions.push(...optionsData);\n\n\t\t\tthis.append(...optionsData.map(this.htmlItem));\n\n\t\t\tevent.dispatchCustomEvent(this, 'wje-options:load', {});\n\t\t}\n\n\t\treturn fragment;\n\t}\n\n\t/**\n\t * Syncs ARIA attributes on the host element.\n\t */\n\tsyncAria() {\n\t\tconst isMultiple = this.closest('wje-select')?.hasAttribute('multiple');\n\t\tthis.setAriaState({\n\t\t\trole: 'listbox',\n\t\t\tmultiselectable: isMultiple ? 'true' : undefined,\n\t\t});\n\t}\n\n\tafterDraw() {\n\t\tevent.addListener(this.infiniteScroll, 'wje-infinite-scroll:load', null, this.dispatchOptionsLoadEvent);\n\t}\n\n\tdispatchOptionsLoadEvent = (e) => {\n\t\t// Wait for next paint cycle to ensure options are in DOM\n\t\trequestAnimationFrame(() => {\n\t\t\trequestAnimationFrame(() => {\n\t\t\t\tevent.dispatchCustomEvent(this, 'wje-options:load', {});\n\t\t\t});\n\t\t});\n\t}\n\n\t/**\n\t * Processes the provided data based on the optional array path set in the instance.\n\t * @param {object} data The input data to be processed.\n\t * @returns {Array} The resolved options array from the data or an empty array if no match is found.\n\t */\n\tprocessData(data) {\n\t\tconst splittedOptionArrayPath = this.optionArrayPath ? this.optionArrayPath?.split('.') : null;\n\t\tlet options = data;\n\n\t\tsplittedOptionArrayPath?.forEach((path) => {\n\t\t\toptions = options[path];\n\t\t});\n\n\t\treturn options ?? [];\n\t}\n\n\t/**\n\t * Filters out options from the response object that have already been drawn, based on the specified option array path.\n\t * @param {object} response The response object containing data to process.\n\t * @returns {object} The filtered response object with drawn options removed.\n\t */\n\tfilterOutDrawnOptions(response) {\n\t\tconst splittedOptionArrayPath = this.optionArrayPath ? this.optionArrayPath?.split('.') : [];\n\t\tlet filteredResponse = structuredClone(response);\n\n\t\tfilteredResponse = this.recursiveUpdate(filteredResponse, splittedOptionArrayPath);\n\t\treturn filteredResponse;\n\t}\n\n\t/**\n\t * Recursively updates the object based on the provided path to the property.\n\t * @param {object | Array | null} object\n\t * @param {Array<string> | null} pathToProperty\n\t * @returns {object | Array | null}\n\t */\n\trecursiveUpdate = (object, pathToProperty) => {\n\t\tif (pathToProperty.length === 0) {\n\t\t\tif (Array.isArray(object)) {\n\t\t\t\treturn object.filter(\n\t\t\t\t\t(option) =>\n\t\t\t\t\t\t!this.loadedOptions.some(\n\t\t\t\t\t\t\t(loadedOption) => loadedOption[this.itemValue] === option[this.itemValue]\n\t\t\t\t\t\t)\n\t\t\t\t);\n\t\t\t} else {\n\t\t\t\tconsole.error('Expected an array but got:', object, pathToProperty);\n\t\t\t\treturn [];\n\t\t\t}\n\t\t}\n\n\t\tconst [currentPath, ...remainingPath] = pathToProperty;\n\t\tif (remainingPath.length > 0) {\n\t\t\tobject[currentPath] = this.recursiveUpdate(object[currentPath], remainingPath);\n\t\t} else {\n\t\t\tobject[currentPath] =\n\t\t\t\tobject[currentPath]?.filter(\n\t\t\t\t\t(option) =>\n\t\t\t\t\t\t!this.loadedOptions.some(\n\t\t\t\t\t\t\t(loadedOption) => loadedOption[this.itemValue] === option[this.itemValue]\n\t\t\t\t\t\t)\n\t\t\t\t) ?? [];\n\t\t}\n\t\treturn object;\n\t};\n\n\t/**\n\t * Generates an HTML option element based on the provided item.\n\t * @param {object} item The item to generate the option element for.\n\t * @returns {HTMLElement} The generated option element.\n\t */\n\thtmlItem = (item) => {\n\t\tlet option = document.createElement('wje-option');\n\n\t\tif (item[this.itemValue] === null || item[this.itemValue] === undefined) {\n\t\t\tconsole.warn(`The item ${JSON.stringify(item)} does not have the property ${this.itemValue}`);\n\t\t}\n\n\t\tif (item[this.itemText] === null || item[this.itemText] === undefined) {\n\t\t\tconsole.warn(`The item ${JSON.stringify(item)} does not have the property ${this.itemText}`);\n\t\t}\n\n\t\toption.setAttribute('value', item[this.itemValue] ?? '');\n\t\toption.innerText = item[this.itemText] ?? '';\n\n\t\treturn option;\n\t};\n\n\t/**\n\t * Fetches the pages from the provided URL.\n\t * @param {number} page The page number to fetch.\n\t * @returns {Promise<object>} The fetched data.\n\t * @throws Will throw an error if the response is not ok.\n\t */\n\tasync getPages(page) {\n\t\tconst response = await fetch(this.url);\n\t\tif (!response.ok) {\n\t\t\tthrow new Error(`An error occurred: ${response.status}`);\n\t\t}\n\t\treturn await response.json();\n\t}\n\n\t/**\n\t * Finds the selected option data based on the given selected option values.\n\t * @param {Array} selectedOptionValues The array of selected option values.\n\t * @returns {Array} - The array of option data that matches the selected option values.\n\t */\n\tfindSelectedOptionData(selectedOptionValues = []) {\n\t\treturn this.options.filter((option) => selectedOptionValues.includes(option[this.itemValue]));\n\t}\n\n\t/**\n\t * Adds an option to the element.\n\t * @param {object} optionData The data of the option to be added.\n\t */\n\taddOption(optionData) {\n\t\tif (this.loadedOptions.some((option) => option[this.itemValue] === optionData[this.itemValue])) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst item = this.htmlItem(optionData);\n\t\tconst lazyList = this.#getLazyList();\n\t\tthis.#drawPreloadedElements.push(item);\n\n\t\tif (lazyList) {\n\t\t\tlazyList.appendChild(item);\n\t\t} else {\n\t\t\tthis.prepend(item);\n\t\t}\n\n\t\tthis.loadedOptions.push(optionData);\n\t}\n\n\t#getLazyList() {\n\t\tif (!this.lazy) return null;\n\n\t\treturn this.infiniteScroll?.querySelector('wje-list') ?? this.querySelector(':scope > wje-infinite-scroll > wje-list');\n\t}\n\n\t/**\n\t * Adds options to the element.\n\t * @param {Array} optionsData The array of option data to be added.\n\t * @param {boolean} [silent] Whether to suppress events triggered by adding options.\n\t */\n\taddOptions(optionsData = [], silent = false) {\n\t\tif (Array.isArray(optionsData)) optionsData?.forEach((od) => this.addOption(od, silent));\n\t\telse this.addOption(optionsData, silent);\n\t}\n\n\tbeforeDisconnect() {\n\t\tevent.removeListener(this.infiniteScroll, 'wje-infinite-scroll:load', null, this.dispatchOptionsLoadEvent);\n\t}\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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"}
+{"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.js';\nimport List from '../wje-list/list.js';\nimport Option from '../wje-option/option.js';\n\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Options` is a custom web component that represents a set of options. 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 * @tag wje-options\n */\n\nexport default class Options extends WJElement {\n\n\t#loadedOptions = [];\n\n\t#drawPreloadedElements = [];\n\n\tconstructor() {\n\t\tsuper();\n\t}\n\n\tdependencies = {\n\t\t'wje-option': Option,\n\t\t'wje-infinite-scroll': InfiniteScroll,\n\t\t'wje-list': List,\n\t}\n\n\t/**\n\t * Sets the option array path attribute.\n\t * @param {string} value The value to set for the option array path.\n\t */\n\tset optionArrayPath(value) {\n\t\tthis.setAttribute('option-array-path', value);\n\t}\n\n\t/**\n\t * Gets the option array path attribute.\n\t * @returns {string} The value of the option array path attribute or \"data\" if not set.\n\t */\n\tget optionArrayPath() {\n\t\treturn this.getAttribute('option-array-path');\n\t}\n\n\t/**\n\t * Checks if the option array path attribute is present.\n\t * @returns {boolean} True if the option array path attribute is present, false otherwise.\n\t */\n\tget hasOptionArrayPath() {\n\t\treturn this.hasAttribute('option-array-path');\n\t}\n\n\t/**\n\t * Gets the dropdown height attribute.\n\t * @returns {string} The value of the dropdown height attribute or \"100%\" if not set.\n\t */\n\tget dropdownHeight() {\n\t\treturn this.getAttribute('dropdown-height') || '100%';\n\t}\n\n\t/**\n\t * Sets the dropdown height attribute.\n\t * @param {string} value The value to set for the dropdown height.\n\t */\n\tset dropdownHeight(value) {\n\t\tthis.setAttribute('dropdown-height', value);\n\t}\n\n\t/**\n\t * Sets the item value attribute.\n\t * @param {string} value The value to set for the item value.\n\t */\n\tset itemValue(value) {\n\t\tthis.setAttribute('item-value', value);\n\t}\n\n\t/**\n\t * Gets the item value attribute.\n\t * @returns {string} The value of the item value attribute or \"value\" if not set.\n\t */\n\tget itemValue() {\n\t\treturn this.getAttribute('item-value') || 'value';\n\t}\n\n\t/**\n\t * Sets the item text attribute.\n\t * @param {string} value The value to set for the item text.\n\t */\n\tset itemText(value) {\n\t\tthis.setAttribute('item-text', value);\n\t}\n\n\t/**\n\t * Gets the item text attribute.\n\t * @returns {string} The value of the item text attribute or \"text\" if not set.\n\t */\n\tget itemText() {\n\t\treturn this.getAttribute('item-text') || 'text';\n\t}\n\n\t/**\n\t * Gets the lazy load size attribute.\n\t * @returns {number} The value of the lazy load size attribute or 10 if not set.\n\t */\n\tget lazyLoadSize() {\n\t\treturn this.getAttribute('lazy-load-size') || 10;\n\t}\n\n\t/**\n\t * Sets the lazy load size attribute.\n\t * @param {number} value The value to set for the lazy load size.\n\t */\n\tset lazyLoadSize(value) {\n\t\tthis.setAttribute('lazy-load-size', value);\n\t}\n\n\t/**\n\t * Sets the search attribute.\n\t * @param {string} value The value to set for the search.\n\t */\n\tset search(value) {\n\t\tthis.setAttribute('search', value);\n\t}\n\n\t/**\n\t * Gets the search attribute.\n\t * @returns {string} The value of the search attribute.\n\t */\n\tget search() {\n\t\treturn this.getAttribute('search');\n\t}\n\n\t/**\n\t * Checks if the search attribute is present.\n\t * @returns {boolean} True if the search attribute is present, false otherwise.\n\t */\n\tget hasSearch() {\n\t\treturn this.hasAttribute('search');\n\t}\n\n\t/**\n\t * Retrieves the value of the 'search-to-query-params' attribute from the current instance.\n\t * @returns {string | null} The value of the 'search-to-query-params' attribute, or null if the attribute is not set.\n\t */\n\tget searchToQueryParams() {\n\t\treturn this.getAttribute('search-to-query-params');\n\t}\n\n\t/**\n\t * Sets the value to define search-to-query params behavior.\n\t * @param {string} value The value to be set for the search-to-query-params attribute.\n\t */\n\tset searchToQueryParams(value) {\n\t\tthis.setAttribute('search-to-query-params', value);\n\t}\n\n\t/**\n\t * Determines whether the 'search-to-query-params' attribute is present on the element.\n\t * @returns {boolean} True if the 'search-to-query-params' attribute exists, otherwise false.\n\t */\n\tget hasSearchToQueryParams() {\n\t\treturn this.hasAttribute('search-to-query-params');\n\t}\n\n\t/**\n\t * Sets the value of the search parameter name attribute.\n\t * @param {string} value The string value to set as the search parameter name.\n\t */\n\tset searchParamName(value) {\n\t\tthis.setAttribute('search-param-name', value);\n\t}\n\n\t/**\n\t * Gets the search parameter name used in queries.\n\t * Retrieves the value of the 'search-param-name' attribute.\n\t * If the attribute is not set, it defaults to 'search'.\n\t * @returns {string} The search parameter name used for queries.\n\t */\n\tget searchParamName() {\n\t\treturn this.getAttribute('search-param-name') || 'search';\n\t}\n\n\t/**\n\t * Sets the queryParams attribute on the element.\n\t * @param {string} value The query parameters to set, represented as a string.\n\t */\n\tset queryParams(value) {\n\t\tthis.setAttribute('query-params', value);\n\t}\n\n\t/**\n\t * Retrieves the value of the 'query-params' attribute.\n\t * @returns {string | null} The value of the 'query-params' attribute, or null if the attribute is not set.\n\t */\n\tget queryParams() {\n\t\treturn this.getAttribute('query-params');\n\t}\n\n\t/**\n\t * Sets the lazy attribute.\n\t * @param {boolean} value The value to set for the lazy attribute.\n\t */\n\tset lazy(value) {\n\t\tthis.setAttribute('lazy', value);\n\t}\n\n\t/**\n\t * Checks if the lazy attribute is present.\n\t * @returns {boolean} True if the lazy attribute is present, false otherwise.\n\t */\n\tget lazy() {\n\t\treturn this.hasAttribute('lazy');\n\t}\n\n\t/**\n\t * Gets the loaded options.\n\t * @returns {Array} The loaded options.\n\t */\n\tget options() {\n\t\treturn this.loadedOptions?.flat();\n\t}\n\n\t/**\n\t * Gets the loaded options.\n\t * @type {Array}\n\t */\n\tget loadedOptions() {\n\t\treturn this.#loadedOptions;\n\t}\n\n\t/**\n\t * Sets the loaded options.\n\t * @type {Array}\n\t */\n\tset loadedOptions(loadedOptions) {\n\t\tthis.#loadedOptions = loadedOptions;\n\t}\n\n\t/**\n\t * Array of preloaded elements.\n\t * @type {Array}\n\t * @private\n\t */\n\tget drawPreloadedElements() {\n\t\treturn this.#drawPreloadedElements;\n\t}\n\n\t/**\n\t * Sets the elements that are preloaded and ready to be drawn.\n\t * @param {Array|object} elements The elements to be set for preloading. This can be an array or a specific object containing drawable elements.\n\t */\n\tset drawPreloadedElements(elements) {\n\t\tthis.#drawPreloadedElements = elements;\n\t}\n\n\tclassName = 'Options';\n\n\t/**\n\t * Returns the CSS styles for the component.\n\t * @static\n\t * @returns {CSSStyleSheet} The CSS styles for the component.\n\t */\n\tstatic get cssStyleSheet() {\n\t\treturn styles;\n\t}\n\n\t/**\n\t * Retrieves an array of attributes that should be observed for changes.\n\t * The method returns a list of attribute names that the browser will monitor for changes.\n\t * @returns {Array<string>} An array of attribute names to observe.\n\t */\n\tstatic get observedAttributes() {\n\t\treturn ['search', 'attached'];\n\t}\n\n\t/**\n\t * Sets up the attributes for the component.\n\t */\n\tsetupAttributes() {\n\t\tthis.isShadowRoot = 'open';\n\t\tthis.syncAria();\n\t}\n\n\t/**\n\t * Draws the component.\n\t * @returns {DocumentFragment}\n\t */\n\tasync draw() {\n\t\tlet fragment = document.createDocumentFragment();\n\n\t\tconst slot = document.createElement('slot');\n\t\tfragment.appendChild(slot);\n\t\tthis.syncAria();\n\n\t\tif (this.lazy) {\n\t\t\tif (this.contains(this.infiniteScroll)) {\n\t\t\t\tthis.drawPreloadedElements.forEach((el) => { el.remove() });\n\t\t\t\tthis.loadedOptions = [];\n\t\t\t\tthis.infiniteScroll.placementObj.innerHTML = '';\n\t\t\t\tthis.infiniteScroll.totalPages = 0;\n\t\t\t\tthis.infiniteScroll.refresh();\n\t\t\t}\n\n\t\t\tlet loader = document.createElement('div');\n\t\t\tloader.setAttribute('slot', 'loader');\n\t\t\tloader.append('Loading...');\n\t\t\tloader.classList.add('loader');\n\n\t\t\tconst infiniteScroll = document.createElement('wje-infinite-scroll');\n\t\t\tinfiniteScroll.setAttribute('placement', 'wje-list');\n\t\t\tinfiniteScroll.setAttribute('height', this.dropdownHeight);\n\t\t\tinfiniteScroll.setAttribute('object-name', this.optionArrayPath);\n\t\t\tinfiniteScroll.dataToHtml = this.htmlItem;\n\t\t\tinfiniteScroll.setCustomData = async (page, signal) => {\n\t\t\t\tlet processedUrl = `${this.url}${this.search ? `/${this.search}` : ''}?page=${page}&size=${this.lazyLoadSize}${this.queryParams ? `&${this.queryParams}` : ''}`;\n\n\t\t\t\tif (this.hasSearchToQueryParams) {\n\t\t\t\t\tprocessedUrl = `${this.url}?page=${page}&size=${this.lazyLoadSize}${this.queryParams ? `&${this.queryParams}` : ''}${this.search ? `&${this.searchParamName}=${this.search}` : ''}`;\n\t\t\t\t}\n\n\t\t\t\tlet res = await this.service.get(processedUrl, null, false, signal);\n\t\t\t\tconst filteredOptions = this.filterOutDrawnOptions(res);\n\t\t\t\tthis.loadedOptions.push(...this.processData(filteredOptions));\n\n\t\t\t\treturn filteredOptions;\n\t\t\t};\n\n\t\t\tconst list = document.createElement('wje-list');\n\n\t\t\tinfiniteScroll.append(list);\n\t\t\tinfiniteScroll.append(loader);\n\n\t\t\tif (this.hasAttribute('attached') && !this.hasSearch) {\n\t\t\t\tthis.appendChild(infiniteScroll);\n\t\t\t\tthis.drawPreloadedElements.forEach((el) => {\n\t\t\t\t\tlist.appendChild(el);\n\t\t\t\t});\n\t\t\t\tthis.infiniteScroll = infiniteScroll;\n\t\t\t}\n\t\t} else {\n\t\t\tthis.response = await this.getPages();\n\n\t\t\tlet optionsData = this.filterOutDrawnOptions(this.response);\n\t\t\toptionsData = this.processData(optionsData);\n\n\t\t\tthis.loadedOptions.push(...optionsData);\n\n\t\t\tthis.append(...optionsData.map(this.htmlItem));\n\n\t\t\tevent.dispatchCustomEvent(this, 'wje-options:load', {});\n\t\t}\n\n\t\treturn fragment;\n\t}\n\n\t/**\n\t * Syncs ARIA attributes on the host element.\n\t */\n\tsyncAria() {\n\t\tconst isMultiple = this.closest('wje-select')?.hasAttribute('multiple');\n\t\tthis.setAriaState({\n\t\t\trole: 'listbox',\n\t\t\tmultiselectable: isMultiple ? 'true' : undefined,\n\t\t});\n\t}\n\n\tafterDraw() {\n\t\tevent.addListener(this.infiniteScroll, 'wje-infinite-scroll:load', null, this.dispatchOptionsLoadEvent);\n\t}\n\n\tdispatchOptionsLoadEvent = (e) => {\n\t\t// Wait for next paint cycle to ensure options are in DOM\n\t\trequestAnimationFrame(() => {\n\t\t\trequestAnimationFrame(() => {\n\t\t\t\tevent.dispatchCustomEvent(this, 'wje-options:load', {});\n\t\t\t});\n\t\t});\n\t}\n\n\t/**\n\t * Processes the provided data based on the optional array path set in the instance.\n\t * @param {object} data The input data to be processed.\n\t * @returns {Array} The resolved options array from the data or an empty array if no match is found.\n\t */\n\tprocessData(data) {\n\t\tconst splittedOptionArrayPath = this.optionArrayPath ? this.optionArrayPath?.split('.') : null;\n\t\tlet options = data;\n\n\t\tsplittedOptionArrayPath?.forEach((path) => {\n\t\t\toptions = options[path];\n\t\t});\n\n\t\treturn options ?? [];\n\t}\n\n\t/**\n\t * Filters out options from the response object that have already been drawn, based on the specified option array path.\n\t * @param {object} response The response object containing data to process.\n\t * @returns {object} The filtered response object with drawn options removed.\n\t */\n\tfilterOutDrawnOptions(response) {\n\t\tconst splittedOptionArrayPath = this.optionArrayPath ? this.optionArrayPath?.split('.') : [];\n\t\tlet filteredResponse = structuredClone(response);\n\n\t\tfilteredResponse = this.recursiveUpdate(filteredResponse, splittedOptionArrayPath);\n\t\treturn filteredResponse;\n\t}\n\n\t/**\n\t * Recursively updates the object based on the provided path to the property.\n\t * @param {object | Array | null} object\n\t * @param {Array<string> | null} pathToProperty\n\t * @returns {object | Array | null}\n\t */\n\trecursiveUpdate = (object, pathToProperty) => {\n\t\tif (pathToProperty.length === 0) {\n\t\t\tif (Array.isArray(object)) {\n\t\t\t\treturn object.filter(\n\t\t\t\t\t(option) =>\n\t\t\t\t\t\t!this.loadedOptions.some(\n\t\t\t\t\t\t\t(loadedOption) => loadedOption[this.itemValue] === option[this.itemValue]\n\t\t\t\t\t\t)\n\t\t\t\t);\n\t\t\t} else {\n\t\t\t\tconsole.error('Expected an array but got:', object, pathToProperty);\n\t\t\t\treturn [];\n\t\t\t}\n\t\t}\n\n\t\tconst [currentPath, ...remainingPath] = pathToProperty;\n\t\tif (remainingPath.length > 0) {\n\t\t\tobject[currentPath] = this.recursiveUpdate(object[currentPath], remainingPath);\n\t\t} else {\n\t\t\tobject[currentPath] =\n\t\t\t\tobject[currentPath]?.filter(\n\t\t\t\t\t(option) =>\n\t\t\t\t\t\t!this.loadedOptions.some(\n\t\t\t\t\t\t\t(loadedOption) => loadedOption[this.itemValue] === option[this.itemValue]\n\t\t\t\t\t\t)\n\t\t\t\t) ?? [];\n\t\t}\n\t\treturn object;\n\t};\n\n\t/**\n\t * Generates an HTML option element based on the provided item.\n\t * @param {object} item The item to generate the option element for.\n\t * @returns {HTMLElement} The generated option element.\n\t */\n\thtmlItem = (item) => {\n\t\tlet option = document.createElement('wje-option');\n\n\t\tif (item[this.itemValue] === null || item[this.itemValue] === undefined) {\n\t\t\tconsole.warn(`The item ${JSON.stringify(item)} does not have the property ${this.itemValue}`);\n\t\t}\n\n\t\tif (item[this.itemText] === null || item[this.itemText] === undefined) {\n\t\t\tconsole.warn(`The item ${JSON.stringify(item)} does not have the property ${this.itemText}`);\n\t\t}\n\n\t\toption.setAttribute('value', item[this.itemValue] ?? '');\n\t\toption.innerText = item[this.itemText] ?? '';\n\n\t\treturn option;\n\t};\n\n\t/**\n\t * Fetches the pages from the provided URL.\n\t * @param {number} page The page number to fetch.\n\t * @returns {Promise<object>} The fetched data.\n\t * @throws Will throw an error if the response is not ok.\n\t */\n\tasync getPages(page) {\n\t\tconst response = await fetch(this.url);\n\t\tif (!response.ok) {\n\t\t\tthrow new Error(`An error occurred: ${response.status}`);\n\t\t}\n\t\treturn await response.json();\n\t}\n\n\t/**\n\t * Finds the selected option data based on the given selected option values.\n\t * @param {Array} selectedOptionValues The array of selected option values.\n\t * @returns {Array} - The array of option data that matches the selected option values.\n\t */\n\tfindSelectedOptionData(selectedOptionValues = []) {\n\t\treturn this.options.filter((option) => selectedOptionValues.includes(option[this.itemValue]));\n\t}\n\n\t/**\n\t * Adds an option to the element.\n\t * @param {object} optionData The data of the option to be added.\n\t */\n\taddOption(optionData) {\n\t\tif (this.loadedOptions.some((option) => option[this.itemValue] === optionData[this.itemValue])) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst item = this.htmlItem(optionData);\n\t\tconst lazyList = this.#getLazyList();\n\t\tthis.#drawPreloadedElements.push(item);\n\n\t\tif (lazyList) {\n\t\t\tlazyList.appendChild(item);\n\t\t} else {\n\t\t\tthis.prepend(item);\n\t\t}\n\n\t\tthis.loadedOptions.push(optionData);\n\t}\n\n\t#getLazyList() {\n\t\tif (!this.lazy) return null;\n\n\t\treturn this.infiniteScroll?.querySelector('wje-list') ?? this.querySelector(':scope > wje-infinite-scroll > wje-list');\n\t}\n\n\t/**\n\t * Adds options to the element.\n\t * @param {Array} optionsData The array of option data to be added.\n\t * @param {boolean} [silent] Whether to suppress events triggered by adding options.\n\t */\n\taddOptions(optionsData = [], silent = false) {\n\t\tif (Array.isArray(optionsData)) optionsData?.forEach((od) => this.addOption(od, silent));\n\t\telse this.addOption(optionsData, silent);\n\t}\n\n\tbeforeDisconnect() {\n\t\tevent.removeListener(this.infiniteScroll, 'wje-infinite-scroll:load', null, this.dispatchOptionsLoadEvent);\n\t}\n}\n","import Options from './options.element.js';\n\nexport default Options;\n\nOptions.define('wje-options', Options);\n"],"names":["Options","WJElement","constructor","super","loadedOptions","drawPreloadedElements","dependencies","Option","InfiniteScroll","List","className","dispatchOptionsLoadEvent","e","requestAnimationFrame","event","dispatchCustomEvent","this","recursiveUpdate","object","pathToProperty","length","Array","isArray","filter","option","some","loadedOption","itemValue","console","error","currentPath","remainingPath","htmlItem","item","document","createElement","warn","JSON","stringify","itemText","setAttribute","innerText","value","optionArrayPath","getAttribute","hasOptionArrayPath","hasAttribute","search","hasSearchToQueryParams","searchParamName","queryParams","lazy","options","flat","elements","cssStyleSheet","isShadowRoot","syncAria","draw","fragment","createDocumentFragment","slot","appendChild","contains","infiniteScroll","forEach","el","remove","placementObj","innerHTML","totalPages","refresh","loader","append","classList","add","dropdownHeight","dataToHtml","setCustomData","async","page","signal","processedUrl","url","lazyLoadSize","res","service","get","filteredOptions","filterOutDrawnOptions","push","processData","list","hasSearch","response","getPages","optionsData","map","isMultiple","closest","setAriaState","role","multiselectable","undefined","afterDraw","addListener","data","splittedOptionArrayPath","split","path","filteredResponse","structuredClone","fetch","ok","Error","status","json","selectedOptionValues","includes","optionData","lazyList","prepend","silent","od","addOption","beforeDisconnect","removeListener","getLazyList","querySelector","define"],"mappings":"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"}

package/dist/wje-orgchart-group.js

@@ -1,73 +1,37 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import WJElement from "./wje-element.js";
-import { event } from "./event.js";
-const styles = ":host {\n    text-align: center;\n    list-style-type: none;\n    position: relative;\n    padding: var(--wje-orgchart-group-height-line) 0 0 0;\n    transition: all 0.5s;\n\n    &::before,\n    &::after {\n        content: '';\n        position: absolute;\n        top: 0;\n        right: 50%;\n        border-top: 1px solid var(--wje-border-color);\n        width: 50%;\n        height: var(--wje-orgchart-group-height-line);\n    }\n\n    &::after {\n        right: auto;\n        left: 50%;\n        border-left: 1px solid var(--wje-border-color);\n    }\n\n    wje-card::part(native) {\n        box-sizing: border-box;\n        padding: var(--wje-orgchart-group-padding);\n    }\n\n    wje-card h4 {\n        margin: 0;\n    }\n    wje-card .items {\n        display: flex;\n    }\n\n    .orgchart-group {\n        display: flex;\n        flex-direction: column;\n        wje-card {\n            margin: 0 auto;\n            width: var(--wje-orgchart-group-width);\n        }\n    }\n}\n\n:host(:only-child)::after,\n:host(:only-child)::before {\n    display: none;\n}\n\n:host(:only-child) {\n    padding-top: 0;\n}\n\n:host(:first-child)::before,\n:host(:last-child)::after {\n    border: 0 none;\n}\n\n:host(:last-child)::before {\n    border-right: 1px solid var(--wje-border-color);\n    border-radius: 0;\n}\n\n:host(:first-child)::after {\n    border-radius: 0;\n}\n\n:host(.flat-child:only-child) {\n    padding-top: var(--wje-orgchart-group-height-line);\n}\n\n:host(.flat-child:only-child)::before {\n    display: none;\n}\n\n:host(.flat-child:only-child)::after {\n    display: block;\n    right: auto;\n    left: 50%;\n    width: 0;\n    height: var(--wje-orgchart-group-height-line);\n    border-top: 0 none;\n    border-left: 1px solid var(--wje-border-color);\n    border-radius: 0;\n}\n";
-class OrgchartGroup extends WJElement {
-  /**
-   * Creates an instance of OrgchartGroup.
-   * @class
-   */
+import t from "./wje-element.js";
+import { event as e } from "./event.js";
+class r extends t {
   constructor() {
     super();
-    /**
-     * The class name for the component.
-     * @type {string}
-     */
     __publicField(this, "className", "OrgchartGroup");
   }
-  /**
-   * Returns the CSS styles for the component.
-   * @static
-   * @returns {CSSStyleSheet}
-   */
   static get cssStyleSheet() {
-    return styles;
+    return ':host{text-align:center;list-style-type:none;position:relative;padding:var(--wje-orgchart-group-height-line) 0 0 0;transition:all .5s}:host:before,:host:after{content:"";position:absolute;top:0;right:50%;border-top:1px solid var(--wje-border-color);width:50%;height:var(--wje-orgchart-group-height-line)}:host:after{right:auto;left:50%;border-left:1px solid var(--wje-border-color)}:host wje-card::part(native){box-sizing:border-box;padding:var(--wje-orgchart-group-padding)}:host wje-card h4{margin:0}:host wje-card .items{display:flex}:host .orgchart-group{display:flex;flex-direction:column}:host .orgchart-group wje-card{margin:0 auto;width:var(--wje-orgchart-group-width)}:host(:only-child):after,:host(:only-child):before{display:none}:host(:only-child){padding-top:0}:host(:first-child):before,:host(:last-child):after{border:0 none}:host(:last-child):before{border-right:1px solid var(--wje-border-color);border-radius:0}:host(:first-child):after{border-radius:0}:host(.flat-child:only-child){padding-top:var(--wje-orgchart-group-height-line)}:host(.flat-child:only-child):before{display:none}:host(.flat-child:only-child):after{display:block;right:auto;left:50%;width:0;height:var(--wje-orgchart-group-height-line);border-top:0 none;border-left:1px solid var(--wje-border-color);border-radius:0}';
   }
-  /**
-   * Sets up the attributes for the component.
-   */
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  /**
-   * Draws the component for the org chart group.
-   * @returns {DocumentFragment}
-   */
   draw() {
-    let fragment = document.createDocumentFragment();
-    let native = document.createElement("div");
-    native.setAttribute("part", "native");
-    native.classList.add("orgchart-group");
-    let card = document.createElement("wje-card");
-    let title = document.createElement("h4");
-    title.setAttribute("part", "title");
-    title.innerHTML = this.getAttribute("title") || "";
-    let items = document.createElement("div");
-    items.setAttribute("part", "items");
-    items.classList.add("items");
-    let slot = document.createElement("slot");
-    items.appendChild(slot);
-    card.appendChild(title);
-    card.appendChild(items);
-    native.appendChild(card);
-    fragment.appendChild(native);
-    this.card = card;
-    return fragment;
+    let t2 = document.createDocumentFragment(), e2 = document.createElement("div");
+    e2.setAttribute("part", "native"), e2.classList.add("orgchart-group");
+    let r2 = document.createElement("wje-card"), o = document.createElement("h4");
+    o.setAttribute("part", "title"), o.innerHTML = this.getAttribute("title") || "";
+    let i = document.createElement("div");
+    i.setAttribute("part", "items"), i.classList.add("items");
+    let a = document.createElement("slot");
+    return i.appendChild(a), r2.appendChild(o), r2.appendChild(i), e2.appendChild(r2), t2.appendChild(e2), this.card = r2, t2;
   }
-  /**
-   * After Draws the component for the org chart group.
-   */
   afterDraw() {
-    this.card.addEventListener("click", (e) => {
-      e.stopPropagation();
-      event.dispatchCustomEvent(this.card, "wje-orgchart-group:click", { target: this });
+    this.card.addEventListener("click", (t2) => {
+      t2.stopPropagation(), e.dispatchCustomEvent(this.card, "wje-orgchart-group:click", { target: this });
     });
   }
 }
-OrgchartGroup.define("wje-orgchart-group", OrgchartGroup);
+r.define("wje-orgchart-group", r);
 export {
-  OrgchartGroup as default
+  r as default
 };
 //# sourceMappingURL=wje-orgchart-group.js.map

package/dist/wje-orgchart-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-orgchart-group.js","sources":["../packages/wje-orgchart-group/orgchart-group.element.js","../packages/wje-orgchart-group/orgchart-group.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary OrgchartItem is a custom web component that extends WJElement.\n * @documentation https://elements.webjet.sk/components/OrgchartItem\n * @status stable\n * @augments WJElement\n * @csspart - Styles the element.\n * @tag wje-orgchart-item\n * @example\n */\nexport default class OrgchartGroup extends WJElement {\n    /**\n     * Creates an instance of OrgchartGroup.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'OrgchartGroup';\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    }\n\n    /**\n     * Draws the component for the org chart group.\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('orgchart-group');\n\n        let card = document.createElement('wje-card');\n\n        let title = document.createElement('h4');\n        title.setAttribute('part', 'title');\n        title.innerHTML = this.getAttribute('title') || '';\n\n        let items = document.createElement('div');\n        items.setAttribute('part', 'items');\n        items.classList.add('items');\n\n        let slot = document.createElement('slot');\n\n        items.appendChild(slot);\n\n        card.appendChild(title);\n        card.appendChild(items);\n\n        native.appendChild(card);\n\n        fragment.appendChild(native);\n\n        this.card = card;\n\n        return fragment;\n    }\n\n    /**\n     * After Draws the component for the org chart group.\n     */\n    afterDraw() {\n        this.card.addEventListener('click', (e) => {\n            e.stopPropagation();\n            event.dispatchCustomEvent(this.card, 'wje-orgchart-group:click', { target: this });\n        });\n    }\n}\n","import OrgchartGroup from './orgchart-group.element.js';\n\nexport default OrgchartGroup;\n\nOrgchartGroup.define('wje-orgchart-group', OrgchartGroup);\n"],"names":[],"mappings":";;;;;;AAYe,MAAM,sBAAsB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAKjD,cAAc;AACV,UAAK;AAOT;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,EANZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaA,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB;AACd,SAAK,eAAe;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO;AACH,QAAI,WAAW,SAAS,uBAAsB;AAE9C,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,UAAU,IAAI,gBAAgB;AAErC,QAAI,OAAO,SAAS,cAAc,UAAU;AAE5C,QAAI,QAAQ,SAAS,cAAc,IAAI;AACvC,UAAM,aAAa,QAAQ,OAAO;AAClC,UAAM,YAAY,KAAK,aAAa,OAAO,KAAK;AAEhD,QAAI,QAAQ,SAAS,cAAc,KAAK;AACxC,UAAM,aAAa,QAAQ,OAAO;AAClC,UAAM,UAAU,IAAI,OAAO;AAE3B,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,UAAM,YAAY,IAAI;AAEtB,SAAK,YAAY,KAAK;AACtB,SAAK,YAAY,KAAK;AAEtB,WAAO,YAAY,IAAI;AAEvB,aAAS,YAAY,MAAM;AAE3B,SAAK,OAAO;AAEZ,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,YAAY;AACR,SAAK,KAAK,iBAAiB,SAAS,CAAC,MAAM;AACvC,QAAE,gBAAe;AACjB,YAAM,oBAAoB,KAAK,MAAM,4BAA4B,EAAE,QAAQ,MAAM;AAAA,IACrF,CAAC;AAAA,EACL;AACJ;ACrFA,cAAc,OAAO,sBAAsB,aAAa;"}
+{"version":3,"file":"wje-orgchart-group.js","sources":["../packages/wje-orgchart-group/orgchart-group.element.js","../packages/wje-orgchart-group/orgchart-group.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary OrgchartItem is a custom web component that extends WJElement.\n * @documentation https://elements.webjet.sk/components/OrgchartItem\n * @status stable\n * @augments WJElement\n * @csspart - Styles the element.\n * @tag wje-orgchart-item\n * @example\n */\nexport default class OrgchartGroup extends WJElement {\n    /**\n     * Creates an instance of OrgchartGroup.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'OrgchartGroup';\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    }\n\n    /**\n     * Draws the component for the org chart group.\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('orgchart-group');\n\n        let card = document.createElement('wje-card');\n\n        let title = document.createElement('h4');\n        title.setAttribute('part', 'title');\n        title.innerHTML = this.getAttribute('title') || '';\n\n        let items = document.createElement('div');\n        items.setAttribute('part', 'items');\n        items.classList.add('items');\n\n        let slot = document.createElement('slot');\n\n        items.appendChild(slot);\n\n        card.appendChild(title);\n        card.appendChild(items);\n\n        native.appendChild(card);\n\n        fragment.appendChild(native);\n\n        this.card = card;\n\n        return fragment;\n    }\n\n    /**\n     * After Draws the component for the org chart group.\n     */\n    afterDraw() {\n        this.card.addEventListener('click', (e) => {\n            e.stopPropagation();\n            event.dispatchCustomEvent(this.card, 'wje-orgchart-group:click', { target: this });\n        });\n    }\n}\n","import OrgchartGroup from './orgchart-group.element.js';\n\nexport default OrgchartGroup;\n\nOrgchartGroup.define('wje-orgchart-group', OrgchartGroup);\n"],"names":["OrgchartGroup","WJElement","constructor","super","className","cssStyleSheet","setupAttributes","this","isShadowRoot","draw","fragment","document","createDocumentFragment","native","createElement","setAttribute","classList","add","card","title","innerHTML","getAttribute","items","slot","appendChild","afterDraw","addEventListener","e","stopPropagation","event","dispatchCustomEvent","target","define"],"mappings":";;;;;AAYe,MAAMA,UAAsBC,EAAAA;AAAAA,EAKvC,cAAAC;AACIC,UAAAA;AAOJC,qCAAY;AAAA,EANZ;AAAA,EAaA,WAAA,gBAAWC;AACP;EACJ;AAAA,EAKA,kBAAAC;AACIC,SAAKC,eAAe;AAAA,EACxB;AAAA,EAMA,OAAAC;AACI,QAAIC,KAAWC,SAASC,uBAAAA,GAEpBC,KAASF,SAASG,cAAc,KAAA;AACpCD,IAAAA,GAAOE,aAAa,QAAQ,QAAA,GAC5BF,GAAOG,UAAUC,IAAI,gBAAA;AAErB,QAAIC,KAAOP,SAASG,cAAc,UAAA,GAE9BK,IAAQR,SAASG,cAAc,IAAA;AACnCK,MAAMJ,aAAa,QAAQ,OAAA,GAC3BI,EAAMC,YAAYb,KAAKc,aAAa,OAAA,KAAY;AAEhD,QAAIC,IAAQX,SAASG,cAAc,KAAA;AACnCQ,MAAMP,aAAa,QAAQ,OAAA,GAC3BO,EAAMN,UAAUC,IAAI,OAAA;AAEpB,QAAIM,IAAOZ,SAASG,cAAc,MAAA;AAalC,WAXAQ,EAAME,YAAYD,CAAAA,GAElBL,GAAKM,YAAYL,CAAAA,GACjBD,GAAKM,YAAYF,CAAAA,GAEjBT,GAAOW,YAAYN,EAAAA,GAEnBR,GAASc,YAAYX,EAAAA,GAErBN,KAAKW,OAAOA,IAELR;AAAAA,EACX;AAAA,EAKA,YAAAe;AACIlB,SAAKW,KAAKQ,iBAAiB,SAAUC,CAAAA,OAAAA;AACjCA,MAAAA,GAAEC,gBAAAA,GACFC,EAAMC,oBAAoBvB,KAAKW,MAAM,4BAA4B,EAAEa,QAAQxB,KAAAA,CAAAA;AAAAA,IAAAA,CAAAA;AAAAA,EAEnF;AAAA;ACpFJP,EAAcgC,OAAO,sBAAsBhC,CAAAA;"}

package/dist/wje-orgchart-item.js

@@ -1,128 +1,59 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import WJElement from "./wje-element.js";
-import { event } from "./event.js";
-const styles = ":host {\n    width: var(--wje-orgchart-item-width);\n    box-sizing: border-box;\n\n    .orgchart-item {\n        display: flex;\n        flex-direction: column;\n\n        wje-card {\n            margin: 0 auto;\n            padding-inline: 0.25rem;\n            width: var(--wje-orgchart-item-width);\n            box-sizing: border-box;\n            &::part(native) {\n                border-radius: var(--wje-orgchart-border-radius) !important;\n                box-sizing: border-box;\n                overflow: visible;\n                padding-block: 0.125rem;\n                background: var(--wje-orgchart-item-background);\n            }\n        }\n    }\n\n    .expander {\n        position: absolute;\n        left: calc(50% + 1px / 2);\n        border: 1px solid var(--wje-border-color);\n        border-radius: 50%;\n        width: var(--wje-orgchart-item-expander-size);\n        height: var(--wje-orgchart-item-expander-size);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background: var(--wje-color-contrast-0);\n        font-size: 8px;\n        line-height: 1;\n        box-sizing: border-box;\n        transform: translate(-50%, calc(var(--wje-orgchart-item-expander-size) / 2));\n        padding-bottom: 1px;\n        cursor: pointer;\n        z-index: 999;\n        bottom: 0;\n        &.collapse {\n            content: '+';\n            wje-orgchart {\n                display: none;\n            }\n        }\n        &:hover {\n            background: var(--wje-color-contrast-1);\n        }\n    }\n}\n\n:host(.collapse) {\n    .expander {\n        content: '+';\n    }\n    slot[name='child'] {\n        display: none;\n    }\n}\n/* ak nie je parent-group */\n:host(:not(.parent-group)) {\n    text-align: center;\n    list-style-type: none;\n    position: relative;\n    padding: var(--wje-orgchart-item-height-line) 0 0 0;\n    transition: all 0.5s;\n    width: auto;\n    box-sizing: border-box;\n\n    &::before,\n    &::after {\n        content: '';\n        position: absolute;\n        top: 0;\n        right: 50%;\n        border-top: 1px solid var(--wje-border-color);\n        width: 50%;\n        height: calc(var(--wje-orgchart-item-height-line) - 1px);\n    }\n\n    &::after {\n        right: auto;\n        left: 50%;\n        border-left: 1px solid var(--wje-border-color);\n    }\n\n    wje-card::part(native) {\n        box-sizing: border-box;\n    }\n}\n\n:host([virtual]:not(.parent-group)) {\n    padding-top: 0;\n}\n\n:host([boss]) {\n    wje-card::part(native) {\n        background: var(--wje-orgchart-item-boss-background);\n        border: var(--wje-orgchart-item-boss-border);\n    }\n}\n\n:host {\n    .orgchart-item:hover {\n        wje-card::part(native) {\n            background: var(--wje-orgchart-item-hover-background);\n            border: var(--wje-orgchart-item-hover-border);\n        }\n    }\n}\n\n:host(.highlight) {\n    wje-card::part(native) {\n        background: var(--wje-orgchart-item-highlight-background);\n        border: var(--wje-orgchart-item-highlight-border);\n    }\n}\n\n:host(:only-child)::after,\n:host(:only-child)::before {\n    display: none;\n}\n\n:host(:only-child) {\n    padding-top: 0;\n}\n\n:host(:first-child)::before,\n:host(:last-child)::after {\n    border: 0 none;\n}\n\n:host(:last-child)::before {\n    border-right: 1px solid var(--wje-border-color);\n    border-radius: 0;\n}\n\n:host(:first-child)::after {\n    border-radius: 0;\n}\n\n:host([virtual]:not(.parent-group))::before {\n    border-right: 0 none;\n    border-radius: 0;\n}\n\n:host([virtual]:not(.parent-group))::after {\n    border-left: 0 none;\n    border-radius: 0;\n}\n\n:host(.flat-child:only-child) {\n    padding-top: var(--wje-orgchart-item-height-line);\n}\n\n:host(.flat-child:only-child)::before {\n    display: none;\n}\n\n:host(.flat-child:only-child)::after {\n    display: block;\n    right: auto;\n    left: 50%;\n    width: 0;\n    height: calc(var(--wje-orgchart-item-height-line) - 1px);\n    border-top: 0 none;\n    border-left: 1px solid var(--wje-border-color);\n    border-radius: 0;\n}\n";
-class OrgchartItem extends WJElement {
-  /**
-   * Creates an instance of OrgchartItem.
-   * @class
-   */
+import t from "./wje-element.js";
+import { event as e } from "./event.js";
+class r extends t {
   constructor() {
     super();
     __publicField(this, "className", "OrgchartItem");
-    __publicField(this, "handleItemClick", (e) => {
-      if (e.composedPath().includes(this.expander)) return;
-      e.stopPropagation();
-      event.dispatchCustomEvent(this, "wje-orgchart-item:click", {
-        target: this,
-        originalEvent: e
-      });
+    __publicField(this, "handleItemClick", (t2) => {
+      t2.composedPath().includes(this.expander) || (t2.stopPropagation(), e.dispatchCustomEvent(this, "wje-orgchart-item:click", { target: this, originalEvent: t2 }));
     });
-    /**
-     * Toggles the children of the orgchart item.
-     * @param e The event object.
-     */
-    __publicField(this, "toggleChildren", (e) => {
-      e.stopPropagation();
-      this.classList.toggle("collapse");
-      if (this.classList.contains("collapse")) e.target.innerHTML = "+";
-      else e.target.innerHTML = "-";
+    __publicField(this, "toggleChildren", (t2) => {
+      t2.stopPropagation(), this.classList.toggle("collapse"), this.classList.contains("collapse") ? t2.target.innerHTML = "+" : t2.target.innerHTML = "-";
     });
   }
-  /**
-   * Sets the boss of the orgchart item.
-   * @param value
-   */
-  set boss(value) {
-    if (value) this.setAttribute("boss", value);
+  set boss(t2) {
+    t2 && this.setAttribute("boss", t2);
   }
-  /**
-   * Gets the boss of the orgchart item.
-   * @returns {boolean}
-   */
   get boss() {
     return this.hasAttribute("boss");
   }
-  /**
-   * Sets whether the item should render only as a structural connector.
-   * @param {boolean} value True when the item should not render its own card.
-   */
-  set virtual(value) {
-    this.toggleAttribute("virtual", Boolean(value));
+  set virtual(t2) {
+    this.toggleAttribute("virtual", Boolean(t2));
   }
-  /**
-   * Gets whether the item renders only as a structural connector.
-   * @returns {boolean} True when the item has the virtual attribute.
-   */
   get virtual() {
     return this.hasAttribute("virtual");
   }
-  /**
-   * Returns the CSS styles for the component.
-   * @static
-   * @returns {CSSStyleSheet}
-   */
   static get cssStyleSheet() {
-    return styles;
+    return ':host{width:var(--wje-orgchart-item-width);box-sizing:border-box}:host .orgchart-item{display:flex;flex-direction:column}:host .orgchart-item wje-card{margin:0 auto;padding-inline:.25rem;width:var(--wje-orgchart-item-width);box-sizing:border-box}:host .orgchart-item wje-card::part(native){border-radius:var(--wje-orgchart-border-radius)!important;box-sizing:border-box;overflow:visible;padding-block:.125rem;background:var(--wje-orgchart-item-background)}:host .expander{position:absolute;left:calc(50% + .5px);border:1px solid var(--wje-border-color);border-radius:50%;width:var(--wje-orgchart-item-expander-size);height:var(--wje-orgchart-item-expander-size);display:flex;align-items:center;justify-content:center;background:var(--wje-color-contrast-0);font-size:8px;line-height:1;box-sizing:border-box;transform:translate(-50%,calc(var(--wje-orgchart-item-expander-size) / 2));padding-bottom:1px;cursor:pointer;z-index:999;bottom:0}:host .expander.collapse{content:"+"}:host .expander.collapse wje-orgchart{display:none}:host .expander:hover{background:var(--wje-color-contrast-1)}:host(.collapse) .expander{content:"+"}:host(.collapse) slot[name=child]{display:none}:host(:not(.parent-group)){text-align:center;list-style-type:none;position:relative;padding:var(--wje-orgchart-item-height-line) 0 0 0;transition:all .5s;width:auto;box-sizing:border-box}:host(:not(.parent-group)):before,:host(:not(.parent-group)):after{content:"";position:absolute;top:0;right:50%;border-top:1px solid var(--wje-border-color);width:50%;height:calc(var(--wje-orgchart-item-height-line) - 1px)}:host(:not(.parent-group)):after{right:auto;left:50%;border-left:1px solid var(--wje-border-color)}:host(:not(.parent-group)) wje-card::part(native){box-sizing:border-box}:host([virtual]:not(.parent-group)){padding-top:0}:host([boss]) wje-card::part(native){background:var(--wje-orgchart-item-boss-background);border:var(--wje-orgchart-item-boss-border)}:host .orgchart-item:hover wje-card::part(native){background:var(--wje-orgchart-item-hover-background);border:var(--wje-orgchart-item-hover-border)}:host(.highlight) wje-card::part(native){background:var(--wje-orgchart-item-highlight-background);border:var(--wje-orgchart-item-highlight-border)}:host(:only-child):after,:host(:only-child):before{display:none}:host(:only-child){padding-top:0}:host(:first-child):before,:host(:last-child):after{border:0 none}:host(:last-child):before{border-right:1px solid var(--wje-border-color);border-radius:0}:host(:first-child):after{border-radius:0}:host([virtual]:not(.parent-group)):before{border-right:0 none;border-radius:0}:host([virtual]:not(.parent-group)):after{border-left:0 none;border-radius:0}:host(.flat-child:only-child){padding-top:var(--wje-orgchart-item-height-line)}:host(.flat-child:only-child):before{display:none}:host(.flat-child:only-child):after{display:block;right:auto;left:50%;width:0;height:calc(var(--wje-orgchart-item-height-line) - 1px);border-top:0 none;border-left:1px solid var(--wje-border-color);border-radius:0}';
   }
-  /**
-   * Returns attributes that trigger a redraw when they change.
-   * @returns {Array<string>} Attribute names that require a new template render.
-   */
   static get observedAttributes() {
     return ["virtual"];
   }
-  /**
-   * Sets up the attributes for the component.
-   */
   setupAttributes() {
     this.isShadowRoot = "open";
   }
   beforeDraw() {
-    if (this.parentElement && this.parentElement.tagName === "WJE-ORGCHART-GROUP") {
-      this.classList.add("parent-group");
-    }
+    this.parentElement && "WJE-ORGCHART-GROUP" === this.parentElement.tagName && this.classList.add("parent-group");
   }
-  /**
-   * Draws the component for the org chart item.
-   * @returns {DocumentFragment}
-   */
   draw() {
-    let fragment = document.createDocumentFragment();
-    let native = document.createElement("div");
-    native.setAttribute("part", "native");
-    native.classList.add("orgchart-item");
-    let card = document.createElement("wje-card");
-    card.setAttribute("part", "card");
-    let slot = document.createElement("slot");
-    let child = document.createElement("slot");
-    child.setAttribute("name", "child");
-    let expander = document.createElement("div");
-    expander.setAttribute("part", "expander");
-    expander.classList.add("expander");
-    expander.innerHTML = "-";
-    card.appendChild(slot);
-    if (!this.virtual && this.children.length > 0 && Array.from(this.children).some((el) => el.tagName === "WJE-ORGCHART"))
-      card.appendChild(expander);
-    if (!this.virtual) native.appendChild(card);
-    native.appendChild(child);
-    fragment.appendChild(native);
-    this.expander = expander;
-    this.card = card;
-    return fragment;
+    let t2 = document.createDocumentFragment(), e2 = document.createElement("div");
+    e2.setAttribute("part", "native"), e2.classList.add("orgchart-item");
+    let r2 = document.createElement("wje-card");
+    r2.setAttribute("part", "card");
+    let o = document.createElement("slot"), a = document.createElement("slot");
+    a.setAttribute("name", "child");
+    let i = document.createElement("div");
+    return i.setAttribute("part", "expander"), i.classList.add("expander"), i.innerHTML = "-", r2.appendChild(o), !this.virtual && this.children.length > 0 && Array.from(this.children).some((t3) => "WJE-ORGCHART" === t3.tagName) && r2.appendChild(i), this.virtual || e2.appendChild(r2), e2.appendChild(a), t2.appendChild(e2), this.expander = i, this.card = r2, t2;
   }
-  /**
-   * After Draws the component for the org chart item.
-   */
   afterDraw() {
-    if (!this.virtual) this.card.addEventListener("click", this.handleItemClick);
-    this.expander.addEventListener("click", this.toggleChildren);
+    this.virtual || this.card.addEventListener("click", this.handleItemClick), this.expander.addEventListener("click", this.toggleChildren);
   }
 }
-OrgchartItem.define("wje-orgchart-item", OrgchartItem);
+r.define("wje-orgchart-item", r);
 export {
-  OrgchartItem as default
+  r as default
 };
 //# sourceMappingURL=wje-orgchart-item.js.map

package/dist/wje-orgchart-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-orgchart-item.js","sources":["../packages/wje-orgchart-item/orgchart-item.element.js","../packages/wje-orgchart-item/orgchart-item.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary OrgchartItem is a custom web component that extends WJElement.\n * @documentation https://elements.webjet.sk/components/OrgchartItem\n * @status stable\n * @augments WJElement\n * @attribute {boolean} boss - The boss of the orgchart item (default: false).\n * @attribute {boolean} virtual - Renders the item as a structural connector without its own card or expander.\n * @slot - The default slot for the orgchart item.\n * @slot child - The child slot for the orgchart item.\n * @csspart - Styles the element.\n * @csspart native - Styles the native element.\n * @csspart expander - Styles the expander element.\n * // @fires wje-orgchart-item:click - Emitted when the item card is clicked.\n * @tag wje-orgchart-item\n */\nexport default class OrgchartItem extends WJElement {\n    /**\n     * Creates an instance of OrgchartItem.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Sets the boss of the orgchart item.\n     * @param value\n     */\n\n    set boss(value) {\n        if (value) this.setAttribute('boss', value);\n    }\n\n    /**\n     * Gets the boss of the orgchart item.\n     * @returns {boolean}\n     */\n\n    get boss() {\n        return this.hasAttribute('boss');\n    }\n\n    /**\n     * Sets whether the item should render only as a structural connector.\n     * @param {boolean} value True when the item should not render its own card.\n     */\n    set virtual(value) {\n        this.toggleAttribute('virtual', Boolean(value));\n    }\n\n    /**\n     * Gets whether the item renders only as a structural connector.\n     * @returns {boolean} True when the item has the virtual attribute.\n     */\n    get virtual() {\n        return this.hasAttribute('virtual');\n    }\n\n    className = 'OrgchartItem';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns attributes that trigger a redraw when they change.\n     * @returns {Array<string>} Attribute names that require a new template render.\n     */\n    static get observedAttributes() {\n        return ['virtual'];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    beforeDraw() {\n        if (this.parentElement && this.parentElement.tagName === 'WJE-ORGCHART-GROUP') {\n            this.classList.add('parent-group');\n        }\n    }\n\n    /**\n     * Draws the component for the org chart 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('orgchart-item');\n\n        let card = document.createElement('wje-card');\n        card.setAttribute('part', 'card');\n\n        let slot = document.createElement('slot');\n\n        let child = document.createElement('slot');\n        child.setAttribute('name', 'child');\n\n        let expander = document.createElement('div');\n        expander.setAttribute('part', 'expander');\n        expander.classList.add('expander');\n        expander.innerHTML = '-';\n\n        card.appendChild(slot);\n        if (!this.virtual && this.children.length > 0 && Array.from(this.children).some((el) => el.tagName === 'WJE-ORGCHART'))\n            card.appendChild(expander); // if the orgchart item has children and\n\n        if (!this.virtual) native.appendChild(card);\n        native.appendChild(child);\n\n        fragment.appendChild(native);\n\n        this.expander = expander;\n        this.card = card;\n\n        return fragment;\n    }\n\n    /**\n     * After Draws the component for the org chart item.\n     */\n    afterDraw() {\n        if (!this.virtual) this.card.addEventListener('click', this.handleItemClick);\n        this.expander.addEventListener('click', this.toggleChildren);\n    }\n\n    handleItemClick = (e) => {\n        if (e.composedPath().includes(this.expander)) return;\n\n        e.stopPropagation();\n        event.dispatchCustomEvent(this, 'wje-orgchart-item:click', {\n            target: this,\n            originalEvent: e,\n        });\n    };\n\n    /**\n     * Toggles the children of the orgchart item.\n     * @param e The event object.\n     */\n    toggleChildren = (e) => {\n        e.stopPropagation();\n        this.classList.toggle('collapse');\n        if (this.classList.contains('collapse')) e.target.innerHTML = '+';\n        else e.target.innerHTML = '-';\n    };\n}\n","import OrgchartItem from './orgchart-item.element.js';\n\nexport default OrgchartItem;\n\nOrgchartItem.define('wje-orgchart-item', OrgchartItem);\n"],"names":[],"mappings":";;;;;;AAkBe,MAAM,qBAAqB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAKhD,cAAc;AACV,UAAK;AAqCT,qCAAY;AA+EZ,2CAAkB,CAAC,MAAM;AACrB,UAAI,EAAE,aAAY,EAAG,SAAS,KAAK,QAAQ,EAAG;AAE9C,QAAE,gBAAe;AACjB,YAAM,oBAAoB,MAAM,2BAA2B;AAAA,QACvD,QAAQ;AAAA,QACR,eAAe;AAAA,MAC3B,CAAS;AAAA,IACL;AAMA;AAAA;AAAA;AAAA;AAAA,0CAAiB,CAAC,MAAM;AACpB,QAAE,gBAAe;AACjB,WAAK,UAAU,OAAO,UAAU;AAChC,UAAI,KAAK,UAAU,SAAS,UAAU,EAAG,GAAE,OAAO,YAAY;AAAA,UACzD,GAAE,OAAO,YAAY;AAAA,IAC9B;AAAA,EAtIA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,IAAI,KAAK,OAAO;AACZ,QAAI,MAAO,MAAK,aAAa,QAAQ,KAAK;AAAA,EAC9C;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,IAAI,OAAO;AACP,WAAO,KAAK,aAAa,MAAM;AAAA,EACnC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,QAAQ,OAAO;AACf,SAAK,gBAAgB,WAAW,QAAQ,KAAK,CAAC;AAAA,EAClD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,UAAU;AACV,WAAO,KAAK,aAAa,SAAS;AAAA,EACtC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,WAAW,qBAAqB;AAC5B,WAAO,CAAC,SAAS;AAAA,EACrB;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB;AACd,SAAK,eAAe;AAAA,EACxB;AAAA,EAEA,aAAa;AACT,QAAI,KAAK,iBAAiB,KAAK,cAAc,YAAY,sBAAsB;AAC3E,WAAK,UAAU,IAAI,cAAc;AAAA,IACrC;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO;AACH,QAAI,WAAW,SAAS,uBAAsB;AAE9C,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,UAAU,IAAI,eAAe;AAEpC,QAAI,OAAO,SAAS,cAAc,UAAU;AAC5C,SAAK,aAAa,QAAQ,MAAM;AAEhC,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,QAAI,QAAQ,SAAS,cAAc,MAAM;AACzC,UAAM,aAAa,QAAQ,OAAO;AAElC,QAAI,WAAW,SAAS,cAAc,KAAK;AAC3C,aAAS,aAAa,QAAQ,UAAU;AACxC,aAAS,UAAU,IAAI,UAAU;AACjC,aAAS,YAAY;AAErB,SAAK,YAAY,IAAI;AACrB,QAAI,CAAC,KAAK,WAAW,KAAK,SAAS,SAAS,KAAK,MAAM,KAAK,KAAK,QAAQ,EAAE,KAAK,CAAC,OAAO,GAAG,YAAY,cAAc;AACjH,WAAK,YAAY,QAAQ;AAE7B,QAAI,CAAC,KAAK,QAAS,QAAO,YAAY,IAAI;AAC1C,WAAO,YAAY,KAAK;AAExB,aAAS,YAAY,MAAM;AAE3B,SAAK,WAAW;AAChB,SAAK,OAAO;AAEZ,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,YAAY;AACR,QAAI,CAAC,KAAK,QAAS,MAAK,KAAK,iBAAiB,SAAS,KAAK,eAAe;AAC3E,SAAK,SAAS,iBAAiB,SAAS,KAAK,cAAc;AAAA,EAC/D;AAsBJ;AC5JA,aAAa,OAAO,qBAAqB,YAAY;"}
+{"version":3,"file":"wje-orgchart-item.js","sources":["../packages/wje-orgchart-item/orgchart-item.element.js","../packages/wje-orgchart-item/orgchart-item.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary OrgchartItem is a custom web component that extends WJElement.\n * @documentation https://elements.webjet.sk/components/OrgchartItem\n * @status stable\n * @augments WJElement\n * @attribute {boolean} boss - The boss of the orgchart item (default: false).\n * @attribute {boolean} virtual - Renders the item as a structural connector without its own card or expander.\n * @slot - The default slot for the orgchart item.\n * @slot child - The child slot for the orgchart item.\n * @csspart - Styles the element.\n * @csspart native - Styles the native element.\n * @csspart expander - Styles the expander element.\n * // @fires wje-orgchart-item:click - Emitted when the item card is clicked.\n * @tag wje-orgchart-item\n */\nexport default class OrgchartItem extends WJElement {\n    /**\n     * Creates an instance of OrgchartItem.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Sets the boss of the orgchart item.\n     * @param value\n     */\n\n    set boss(value) {\n        if (value) this.setAttribute('boss', value);\n    }\n\n    /**\n     * Gets the boss of the orgchart item.\n     * @returns {boolean}\n     */\n\n    get boss() {\n        return this.hasAttribute('boss');\n    }\n\n    /**\n     * Sets whether the item should render only as a structural connector.\n     * @param {boolean} value True when the item should not render its own card.\n     */\n    set virtual(value) {\n        this.toggleAttribute('virtual', Boolean(value));\n    }\n\n    /**\n     * Gets whether the item renders only as a structural connector.\n     * @returns {boolean} True when the item has the virtual attribute.\n     */\n    get virtual() {\n        return this.hasAttribute('virtual');\n    }\n\n    className = 'OrgchartItem';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns attributes that trigger a redraw when they change.\n     * @returns {Array<string>} Attribute names that require a new template render.\n     */\n    static get observedAttributes() {\n        return ['virtual'];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    beforeDraw() {\n        if (this.parentElement && this.parentElement.tagName === 'WJE-ORGCHART-GROUP') {\n            this.classList.add('parent-group');\n        }\n    }\n\n    /**\n     * Draws the component for the org chart 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('orgchart-item');\n\n        let card = document.createElement('wje-card');\n        card.setAttribute('part', 'card');\n\n        let slot = document.createElement('slot');\n\n        let child = document.createElement('slot');\n        child.setAttribute('name', 'child');\n\n        let expander = document.createElement('div');\n        expander.setAttribute('part', 'expander');\n        expander.classList.add('expander');\n        expander.innerHTML = '-';\n\n        card.appendChild(slot);\n        if (!this.virtual && this.children.length > 0 && Array.from(this.children).some((el) => el.tagName === 'WJE-ORGCHART'))\n            card.appendChild(expander); // if the orgchart item has children and\n\n        if (!this.virtual) native.appendChild(card);\n        native.appendChild(child);\n\n        fragment.appendChild(native);\n\n        this.expander = expander;\n        this.card = card;\n\n        return fragment;\n    }\n\n    /**\n     * After Draws the component for the org chart item.\n     */\n    afterDraw() {\n        if (!this.virtual) this.card.addEventListener('click', this.handleItemClick);\n        this.expander.addEventListener('click', this.toggleChildren);\n    }\n\n    handleItemClick = (e) => {\n        if (e.composedPath().includes(this.expander)) return;\n\n        e.stopPropagation();\n        event.dispatchCustomEvent(this, 'wje-orgchart-item:click', {\n            target: this,\n            originalEvent: e,\n        });\n    };\n\n    /**\n     * Toggles the children of the orgchart item.\n     * @param e The event object.\n     */\n    toggleChildren = (e) => {\n        e.stopPropagation();\n        this.classList.toggle('collapse');\n        if (this.classList.contains('collapse')) e.target.innerHTML = '+';\n        else e.target.innerHTML = '-';\n    };\n}\n","import OrgchartItem from './orgchart-item.element.js';\n\nexport default OrgchartItem;\n\nOrgchartItem.define('wje-orgchart-item', OrgchartItem);\n"],"names":["OrgchartItem","WJElement","constructor","super","className","handleItemClick","e","composedPath","includes","this","expander","stopPropagation","event","dispatchCustomEvent","target","originalEvent","toggleChildren","classList","toggle","contains","innerHTML","value","setAttribute","boss","hasAttribute","toggleAttribute","Boolean","virtual","cssStyleSheet","observedAttributes","isShadowRoot","beforeDraw","parentElement","tagName","add","draw","fragment","document","createDocumentFragment","native","createElement","card","slot","child","appendChild","children","length","Array","from","some","el","addEventListener","define"],"mappings":";;;;;AAkBe,MAAMA,UAAqBC;EAKtC,cAAAC;AACIC,UAAAA;AAqCJC,qCAAY;AA+EZC,2CAAmBC,CAAAA,OAAAA;AACXA,MAAAA,GAAEC,aAAAA,EAAeC,SAASC,KAAKC,QAAAA,MAEnCJ,GAAEK,gBAAAA,GACFC,EAAMC,oBAAoBJ,MAAM,2BAA2B,EACvDK,QAAQL,MACRM,eAAeT,GAAAA,CAAAA;AAAAA,IAAAA;AAQvBU,0CAAkBV,CAAAA,OAAAA;AACdA,MAAAA,GAAEK,gBAAAA,GACFF,KAAKQ,UAAUC,OAAO,UAAA,GAClBT,KAAKQ,UAAUE,SAAS,UAAA,IAAab,GAAEQ,OAAOM,YAAY,MACzDd,GAAEQ,OAAOM,YAAY;AAAA,IAAA;AAAA,EArI9B;AAAA,EAOA,IAAA,KAASC;AACDA,IAAAA,MAAOZ,KAAKa,aAAa,QAAQD,EAAAA;AAAAA,EACzC;AAAA,EAOA,IAAA,OAAIE;AACA,WAAOd,KAAKe,aAAa,MAAA;AAAA,EAC7B;AAAA,EAMA,IAAA,QAAYH,IAAAA;AACRZ,SAAKgB,gBAAgB,WAAWC,QAAQL,EAAAA,CAAAA;AAAAA,EAC5C;AAAA,EAMA,IAAA,UAAIM;AACA,WAAOlB,KAAKe,aAAa,SAAA;AAAA,EAC7B;AAAA,EASA,WAAA,gBAAWI;AACP;EACJ;AAAA,EAMA,WAAA,qBAAWC;AACP,WAAO,CAAC,SAAA;AAAA,EACZ;AAAA,EAKA;AACIpB,SAAKqB,eAAe;AAAA,EACxB;AAAA,EAEA,aAAAC;AACQtB,SAAKuB,iBAAgD,yBAA/BvB,KAAKuB,cAAcC,WACzCxB,KAAKQ,UAAUiB,IAAI,cAAA;AAAA,EAE3B;AAAA,EAMA,OAAAC;AACI,QAAIC,KAAWC,SAASC,uBAAAA,GAEpBC,KAASF,SAASG,cAAc,KAAA;AACpCD,IAAAA,GAAOjB,aAAa,QAAQ,QAAA,GAC5BiB,GAAOtB,UAAUiB,IAAI,eAAA;AAErB,QAAIO,KAAOJ,SAASG,cAAc,UAAA;AAClCC,IAAAA,GAAKnB,aAAa,QAAQ,MAAA;AAE1B,QAAIoB,IAAOL,SAASG,cAAc,MAAA,GAE9BG,IAAQN,SAASG,cAAc,MAAA;AACnCG,MAAMrB,aAAa,QAAQ,OAAA;AAE3B,QAAIZ,IAAW2B,SAASG,cAAc,KAAA;AAiBtC,WAhBA9B,EAASY,aAAa,QAAQ,UAAA,GAC9BZ,EAASO,UAAUiB,IAAI,UAAA,GACvBxB,EAASU,YAAY,KAErBqB,GAAKG,YAAYF,CAAAA,GAAAA,CACZjC,KAAKkB,WAAWlB,KAAKoC,SAASC,SAAS,KAAKC,MAAMC,KAAKvC,KAAKoC,UAAUI,KAAMC,CAAAA,OAAsB,mBAAfA,GAAGjB,OAAAA,KACvFQ,GAAKG,YAAYlC,CAAAA,GAEhBD,KAAKkB,WAASY,GAAOK,YAAYH,EAAAA,GACtCF,GAAOK,YAAYD,CAAAA,GAEnBP,GAASQ,YAAYL,EAAAA,GAErB9B,KAAKC,WAAWA,GAChBD,KAAKgC,OAAOA,IAELL;AAAAA,EACX;AAAA,EAKA;AACS3B,SAAKkB,WAASlB,KAAKgC,KAAKU,iBAAiB,SAAS1C,KAAKJ,eAAAA,GAC5DI,KAAKC,SAASyC,iBAAiB,SAAS1C,KAAKO;EACjD;AAoB8B;AC1JlChB,EAAaoD,OAAO,qBAAqBpD,CAAAA;"}

package/dist/wje-orgchart.js

@@ -1,99 +1,49 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import WJElement from "./wje-element.js";
-const styles = "* {\n    margin: 0;\n    padding: 0;\n}\n\n:host {\n    position: relative;\n    .native-orgchart {\n        padding-top: var(--wje-orgchart-height-line);\n        display: flex;\n        justify-content: center;\n    }\n\n    &::before {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: 50%;\n        border-left: 1px solid var(--wje-border-color);\n        width: 0;\n        height: var(--wje-orgchart-height-line);\n    }\n}\n\n:host([flat]) {\n    .native-orgchart {\n        padding-top: 0;\n    }\n\n    &::before {\n        display: none;\n    }\n}\n";
-class Orgchart extends WJElement {
-  /**
-   * Creates an instance of Orgchart.
-   * @class
-   */
+import t from "./wje-element.js";
+class e extends t {
   constructor() {
     super();
     __publicField(this, "className", "Orgchart");
-    /**
-     * Marks direct children that are rendered inside a flat chart.
-     */
     __publicField(this, "syncFlatChildren", () => {
       var _a, _b;
-      let children = new Set(((_a = this.defaultSlot) == null ? void 0 : _a.assignedElements({ flatten: true })) || []);
-      (_b = this.flatChildren) == null ? void 0 : _b.forEach((child) => {
-        if (!children.has(child)) child.classList.remove("flat-child");
-      });
-      children.forEach((child) => child.classList.toggle("flat-child", this.flat));
-      this.flatChildren = children;
+      let t2 = new Set(((_a = this.defaultSlot) == null ? void 0 : _a.assignedElements({ flatten: true })) || []);
+      (_b = this.flatChildren) == null ? void 0 : _b.forEach((e2) => {
+        t2.has(e2) || e2.classList.remove("flat-child");
+      }), t2.forEach((t3) => t3.classList.toggle("flat-child", this.flat)), this.flatChildren = t2;
     });
   }
-  /**
-   * Sets whether the chart should omit its incoming connector spacing.
-   * @param {boolean} value True when the chart should render without top connector spacing.
-   */
-  set flat(value) {
-    this.toggleAttribute("flat", Boolean(value));
+  set flat(t2) {
+    this.toggleAttribute("flat", Boolean(t2));
   }
-  /**
-   * Gets whether the chart omits its incoming connector spacing.
-   * @returns {boolean} True when the chart has the flat attribute.
-   */
   get flat() {
     return this.hasAttribute("flat");
   }
-  /**
-   * Returns the CSS styles for the component.
-   * @static
-   * @returns {CSSStyleSheet}
-   */
   static get cssStyleSheet() {
-    return styles;
+    return '*{margin:0;padding:0}:host{position:relative}:host .native-orgchart{padding-top:var(--wje-orgchart-height-line);display:flex;justify-content:center}:host:before{content:"";position:absolute;top:0;left:50%;border-left:1px solid var(--wje-border-color);width:0;height:var(--wje-orgchart-height-line)}:host([flat]) .native-orgchart{padding-top:0}:host([flat]):before{display:none}';
   }
-  /**
-   * Returns attributes that trigger a redraw when they change.
-   * @returns {Array<string>} Attribute names that require a new template render.
-   */
   static get observedAttributes() {
     return ["flat"];
   }
-  /**
-   * Sets up the attributes for the component.
-   */
   setupAttributes() {
-    this.isShadowRoot = "open";
-    this.syncAria();
+    this.isShadowRoot = "open", this.syncAria();
   }
-  /**
-   * Draws the component for the org chart.
-   * @returns {DocumentFragment}
-   */
   draw() {
-    let fragment = document.createDocumentFragment();
-    let native = document.createElement("div");
-    native.setAttribute("part", "native");
-    native.classList.add("native-orgchart");
-    let slot = document.createElement("slot");
-    native.appendChild(slot);
-    fragment.appendChild(native);
-    this.native = native;
-    this.defaultSlot = slot;
-    return fragment;
+    let t2 = document.createDocumentFragment(), e2 = document.createElement("div");
+    e2.setAttribute("part", "native"), e2.classList.add("native-orgchart");
+    let a = document.createElement("slot");
+    return e2.appendChild(a), t2.appendChild(e2), this.native = e2, this.defaultSlot = a, t2;
   }
-  /**
-   * Syncs flat chart state to direct slotted children.
-   */
   afterDraw() {
-    this.defaultSlot.addEventListener("slotchange", this.syncFlatChildren);
-    this.syncFlatChildren();
+    this.defaultSlot.addEventListener("slotchange", this.syncFlatChildren), this.syncFlatChildren();
   }
-  /**
-   * Sync ARIA attributes on host.
-   */
   syncAria() {
-    if (!this.hasAttribute("role")) {
-      this.setAriaState({ role: "tree" });
-    }
+    this.hasAttribute("role") || this.setAriaState({ role: "tree" });
   }
 }
-Orgchart.define("wje-orgchart", Orgchart);
+e.define("wje-orgchart", e);
 export {
-  Orgchart as default
+  e as default
 };
 //# sourceMappingURL=wje-orgchart.js.map