wj-elements 0.4.1 → 0.4.3

package/dist/wje-options.js

@@ -8,7 +8,8 @@ var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot
 var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
-var _loadedOptions, _drawPreloadedElements;
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+var _loadedOptions, _drawPreloadedElements, _Options_instances, getLazyList_fn;
 import WJElement from "./wje-element.js";
 import InfiniteScroll from "./wje-infinite-scroll.js";
 import List from "./wje-list.js";
@@ -18,6 +19,7 @@ const styles = "/*\n[ WJ OPTIONS ]\n*/\n\n:host {\n  display: block;\n  height:
 class Options extends WJElement {
   constructor() {
     super();
+    __privateAdd(this, _Options_instances);
     __privateAdd(this, _loadedOptions, []);
     __privateAdd(this, _drawPreloadedElements, []);
     __publicField(this, "dependencies", {
@@ -434,8 +436,13 @@ class Options extends WJElement {
       return;
     }
     const item = this.htmlItem(optionData);
+    const lazyList = __privateMethod(this, _Options_instances, getLazyList_fn).call(this);
     __privateGet(this, _drawPreloadedElements).push(item);
-    this.prepend(item);
+    if (lazyList) {
+      lazyList.appendChild(item);
+    } else {
+      this.prepend(item);
+    }
     this.loadedOptions.push(optionData);
   }
   /**
@@ -453,6 +460,12 @@ class Options extends WJElement {
 }
 _loadedOptions = new WeakMap();
 _drawPreloadedElements = new WeakMap();
+_Options_instances = new WeakSet();
+getLazyList_fn = function() {
+  var _a;
+  if (!this.lazy) return null;
+  return ((_a = this.infiniteScroll) == null ? void 0 : _a.querySelector("wje-list")) ?? this.querySelector(":scope > wje-infinite-scroll > wje-list");
+};
 Options.define("wje-options", Options);
 export {
   Options as default

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\tthis.#drawPreloadedElements.push(item);\n\t\tthis.prepend(item);\n\t\tthis.loadedOptions.push(optionData);\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":[],"mappings":";;;;;;;;;;;;;;;;;;AAee,MAAM,gBAAgB,UAAU;AAAA,EAM9C,cAAc;AACb,UAAK;AAPQ;AAEd,uCAAiB,CAAA;AAEjB,+CAAyB,CAAA;AAMzB,wCAAe;AAAA,MACd,cAAc;AAAA,MACd,uBAAuB;AAAA,MACvB,YAAY;AAAA,IACd;AAqOC,qCAAY;AAmHZ,oDAA2B,CAAC,MAAM;AAEjC,4BAAsB,MAAM;AAC3B,8BAAsB,MAAM;AAC3B,gBAAM,oBAAoB,MAAM,oBAAoB,CAAA,CAAE;AAAA,QACvD,CAAC;AAAA,MACF,CAAC;AAAA,IACF;AAqCA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2CAAkB,CAAC,QAAQ,mBAAmB;;AAC7C,UAAI,eAAe,WAAW,GAAG;AAChC,YAAI,MAAM,QAAQ,MAAM,GAAG;AAC1B,iBAAO,OAAO;AAAA,YACb,CAAC,WACA,CAAC,KAAK,cAAc;AAAA,cACnB,CAAC,iBAAiB,aAAa,KAAK,SAAS,MAAM,OAAO,KAAK,SAAS;AAAA,YAC/E;AAAA,UACA;AAAA,QACG,OAAO;AACN,kBAAQ,MAAM,8BAA8B,QAAQ,cAAc;AAClE,iBAAO,CAAA;AAAA,QACR;AAAA,MACD;AAEA,YAAM,CAAC,aAAa,GAAG,aAAa,IAAI;AACxC,UAAI,cAAc,SAAS,GAAG;AAC7B,eAAO,WAAW,IAAI,KAAK,gBAAgB,OAAO,WAAW,GAAG,aAAa;AAAA,MAC9E,OAAO;AACN,eAAO,WAAW,MACjB,YAAO,WAAW,MAAlB,mBAAqB;AAAA,UACpB,CAAC,WACA,CAAC,KAAK,cAAc;AAAA,YACnB,CAAC,iBAAiB,aAAa,KAAK,SAAS,MAAM,OAAO,KAAK,SAAS;AAAA,UAC/E;AAAA,cACS,CAAA;AAAA,MACP;AACA,aAAO;AAAA,IACR;AAOA;AAAA;AAAA;AAAA;AAAA;AAAA,oCAAW,CAAC,SAAS;AACpB,UAAI,SAAS,SAAS,cAAc,YAAY;AAEhD,UAAI,KAAK,KAAK,SAAS,MAAM,QAAQ,KAAK,KAAK,SAAS,MAAM,QAAW;AACxE,gBAAQ,KAAK,YAAY,KAAK,UAAU,IAAI,CAAC,+BAA+B,KAAK,SAAS,EAAE;AAAA,MAC7F;AAEA,UAAI,KAAK,KAAK,QAAQ,MAAM,QAAQ,KAAK,KAAK,QAAQ,MAAM,QAAW;AACtE,gBAAQ,KAAK,YAAY,KAAK,UAAU,IAAI,CAAC,+BAA+B,KAAK,QAAQ,EAAE;AAAA,MAC5F;AAEA,aAAO,aAAa,SAAS,KAAK,KAAK,SAAS,KAAK,EAAE;AACvD,aAAO,YAAY,KAAK,KAAK,QAAQ,KAAK;AAE1C,aAAO;AAAA,IACR;AAAA,EA5bA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYA,IAAI,gBAAgB,OAAO;AAC1B,SAAK,aAAa,qBAAqB,KAAK;AAAA,EAC7C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,kBAAkB;AACrB,WAAO,KAAK,aAAa,mBAAmB;AAAA,EAC7C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,qBAAqB;AACxB,WAAO,KAAK,aAAa,mBAAmB;AAAA,EAC7C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,iBAAiB;AACpB,WAAO,KAAK,aAAa,iBAAiB,KAAK;AAAA,EAChD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,eAAe,OAAO;AACzB,SAAK,aAAa,mBAAmB,KAAK;AAAA,EAC3C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,UAAU,OAAO;AACpB,SAAK,aAAa,cAAc,KAAK;AAAA,EACtC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,YAAY;AACf,WAAO,KAAK,aAAa,YAAY,KAAK;AAAA,EAC3C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,SAAS,OAAO;AACnB,SAAK,aAAa,aAAa,KAAK;AAAA,EACrC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,WAAW;AACd,WAAO,KAAK,aAAa,WAAW,KAAK;AAAA,EAC1C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,eAAe;AAClB,WAAO,KAAK,aAAa,gBAAgB,KAAK;AAAA,EAC/C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,aAAa,OAAO;AACvB,SAAK,aAAa,kBAAkB,KAAK;AAAA,EAC1C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,OAAO,OAAO;AACjB,SAAK,aAAa,UAAU,KAAK;AAAA,EAClC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,SAAS;AACZ,WAAO,KAAK,aAAa,QAAQ;AAAA,EAClC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,YAAY;AACf,WAAO,KAAK,aAAa,QAAQ;AAAA,EAClC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,sBAAsB;AACzB,WAAO,KAAK,aAAa,wBAAwB;AAAA,EAClD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,oBAAoB,OAAO;AAC9B,SAAK,aAAa,0BAA0B,KAAK;AAAA,EAClD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,yBAAyB;AAC5B,WAAO,KAAK,aAAa,wBAAwB;AAAA,EAClD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,gBAAgB,OAAO;AAC1B,SAAK,aAAa,qBAAqB,KAAK;AAAA,EAC7C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,IAAI,kBAAkB;AACrB,WAAO,KAAK,aAAa,mBAAmB,KAAK;AAAA,EAClD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,YAAY,OAAO;AACtB,SAAK,aAAa,gBAAgB,KAAK;AAAA,EACxC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,cAAc;AACjB,WAAO,KAAK,aAAa,cAAc;AAAA,EACxC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,KAAK,OAAO;AACf,SAAK,aAAa,QAAQ,KAAK;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,OAAO;AACV,WAAO,KAAK,aAAa,MAAM;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,UAAU;;AACb,YAAO,UAAK,kBAAL,mBAAoB;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,gBAAgB;AACnB,WAAO,mBAAK;AAAA,EACb;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,cAAc,eAAe;AAChC,uBAAK,gBAAiB;AAAA,EACvB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,IAAI,wBAAwB;AAC3B,WAAO,mBAAK;AAAA,EACb;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,sBAAsB,UAAU;AACnC,uBAAK,wBAAyB;AAAA,EAC/B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,WAAW,gBAAgB;AAC1B,WAAO;AAAA,EACR;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,WAAW,qBAAqB;AAC/B,WAAO,CAAC,UAAU,UAAU;AAAA,EAC7B;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB;AACjB,SAAK,eAAe;AACpB,SAAK,SAAQ;AAAA,EACd;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,MAAM,OAAO;AACZ,QAAI,WAAW,SAAS,uBAAsB;AAE9C,UAAM,OAAO,SAAS,cAAc,MAAM;AAC1C,aAAS,YAAY,IAAI;AACzB,SAAK,SAAQ;AAEb,QAAI,KAAK,MAAM;AACd,UAAI,KAAK,SAAS,KAAK,cAAc,GAAG;AACvC,aAAK,sBAAsB,QAAQ,CAAC,OAAO;AAAE,aAAG,OAAM;AAAA,QAAG,CAAC;AAC1D,aAAK,gBAAgB,CAAA;AACrB,aAAK,eAAe,aAAa,YAAY;AAC7C,aAAK,eAAe,aAAa;AACjC,aAAK,eAAe,QAAO;AAAA,MAC5B;AAEA,UAAI,SAAS,SAAS,cAAc,KAAK;AACzC,aAAO,aAAa,QAAQ,QAAQ;AACpC,aAAO,OAAO,YAAY;AAC1B,aAAO,UAAU,IAAI,QAAQ;AAE7B,YAAM,iBAAiB,SAAS,cAAc,qBAAqB;AACnE,qBAAe,aAAa,aAAa,UAAU;AACnD,qBAAe,aAAa,UAAU,KAAK,cAAc;AACzD,qBAAe,aAAa,eAAe,KAAK,eAAe;AAC/D,qBAAe,aAAa,KAAK;AACjC,qBAAe,gBAAgB,OAAO,MAAM,WAAW;AACtD,YAAI,eAAe,GAAG,KAAK,GAAG,GAAG,KAAK,SAAS,IAAI,KAAK,MAAM,KAAK,EAAE,SAAS,IAAI,SAAS,KAAK,YAAY,GAAG,KAAK,cAAc,IAAI,KAAK,WAAW,KAAK,EAAE;AAE7J,YAAI,KAAK,wBAAwB;AAChC,yBAAe,GAAG,KAAK,GAAG,SAAS,IAAI,SAAS,KAAK,YAAY,GAAG,KAAK,cAAc,IAAI,KAAK,WAAW,KAAK,EAAE,GAAG,KAAK,SAAS,IAAI,KAAK,eAAe,IAAI,KAAK,MAAM,KAAK,EAAE;AAAA,QAClL;AAEA,YAAI,MAAM,MAAM,KAAK,QAAQ,IAAI,cAAc,MAAM,OAAO,MAAM;AAClE,cAAM,kBAAkB,KAAK,sBAAsB,GAAG;AACtD,aAAK,cAAc,KAAK,GAAG,KAAK,YAAY,eAAe,CAAC;AAE5D,eAAO;AAAA,MACR;AAEA,YAAM,OAAO,SAAS,cAAc,UAAU;AAE9C,qBAAe,OAAO,IAAI;AAC1B,qBAAe,OAAO,MAAM;AAE5B,UAAI,KAAK,aAAa,UAAU,KAAK,CAAC,KAAK,WAAW;AACrD,aAAK,YAAY,cAAc;AAC/B,aAAK,sBAAsB,QAAQ,CAAC,OAAO;AAC1C,eAAK,YAAY,EAAE;AAAA,QACpB,CAAC;AACD,aAAK,iBAAiB;AAAA,MACvB;AAAA,IACD,OAAO;AACN,WAAK,WAAW,MAAM,KAAK,SAAQ;AAEnC,UAAI,cAAc,KAAK,sBAAsB,KAAK,QAAQ;AAC1D,oBAAc,KAAK,YAAY,WAAW;AAE1C,WAAK,cAAc,KAAK,GAAG,WAAW;AAEtC,WAAK,OAAO,GAAG,YAAY,IAAI,KAAK,QAAQ,CAAC;AAE7C,YAAM,oBAAoB,MAAM,oBAAoB,CAAA,CAAE;AAAA,IACvD;AAEA,WAAO;AAAA,EACR;AAAA;AAAA;AAAA;AAAA,EAKA,WAAW;;AACV,UAAM,cAAa,UAAK,QAAQ,YAAY,MAAzB,mBAA4B,aAAa;AAC5D,SAAK,aAAa;AAAA,MACjB,MAAM;AAAA,MACN,iBAAiB,aAAa,SAAS;AAAA,IAC1C,CAAG;AAAA,EACF;AAAA,EAEA,YAAY;AACX,UAAM,YAAY,KAAK,gBAAgB,4BAA4B,MAAM,KAAK,wBAAwB;AAAA,EACvG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAgBA,YAAY,MAAM;;AACjB,UAAM,0BAA0B,KAAK,mBAAkB,UAAK,oBAAL,mBAAsB,MAAM,OAAO;AAC1F,QAAI,UAAU;AAEd,uEAAyB,QAAQ,CAAC,SAAS;AAC1C,gBAAU,QAAQ,IAAI;AAAA,IACvB;AAEA,WAAO,WAAW,CAAA;AAAA,EACnB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,sBAAsB,UAAU;;AAC/B,UAAM,0BAA0B,KAAK,mBAAkB,UAAK,oBAAL,mBAAsB,MAAM,OAAO,CAAA;AAC1F,QAAI,mBAAmB,gBAAgB,QAAQ;AAE/C,uBAAmB,KAAK,gBAAgB,kBAAkB,uBAAuB;AACjF,WAAO;AAAA,EACR;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAkEA,MAAM,SAAS,MAAM;AACpB,UAAM,WAAW,MAAM,MAAM,KAAK,GAAG;AACrC,QAAI,CAAC,SAAS,IAAI;AACjB,YAAM,IAAI,MAAM,sBAAsB,SAAS,MAAM,EAAE;AAAA,IACxD;AACA,WAAO,MAAM,SAAS,KAAI;AAAA,EAC3B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,uBAAuB,uBAAuB,IAAI;AACjD,WAAO,KAAK,QAAQ,OAAO,CAAC,WAAW,qBAAqB,SAAS,OAAO,KAAK,SAAS,CAAC,CAAC;AAAA,EAC7F;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,UAAU,YAAY;AACrB,QAAI,KAAK,cAAc,KAAK,CAAC,WAAW,OAAO,KAAK,SAAS,MAAM,WAAW,KAAK,SAAS,CAAC,GAAG;AAC/F;AAAA,IACD;AAEA,UAAM,OAAO,KAAK,SAAS,UAAU;AACrC,UAAM,WAAW,sBAAK,oCAAL;AACjB,uBAAK,wBAAuB,KAAK,IAAI;AAErC,QAAI,UAAU;AACb,eAAS,YAAY,IAAI;AAAA,IAC1B,OAAO;AACN,WAAK,QAAQ,IAAI;AAAA,IAClB;AAEA,SAAK,cAAc,KAAK,UAAU;AAAA,EACnC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaA,WAAW,cAAc,IAAI,SAAS,OAAO;AAC5C,QAAI,MAAM,QAAQ,WAAW,EAAG,4CAAa,QAAQ,CAAC,OAAO,KAAK,UAAU,IAAI,MAAM;AAAA,QACjF,MAAK,UAAU,aAAa,MAAM;AAAA,EACxC;AAAA,EAEA,mBAAmB;AAClB,UAAM,eAAe,KAAK,gBAAgB,4BAA4B,MAAM,KAAK,wBAAwB;AAAA,EAC1G;AACD;AApgBC;AAEA;AAJc;AAmfd,iBAAY,WAAG;;AACd,MAAI,CAAC,KAAK,KAAM,QAAO;AAEvB,WAAO,UAAK,mBAAL,mBAAqB,cAAc,gBAAe,KAAK,cAAc,yCAAyC;AACtH;AClgBD,QAAQ,OAAO,eAAe,OAAO;"}

package/dist/wje-popup.js

@@ -1,4 +1,4 @@
-import { P as Popup } from "./popup.element-DklicGea.js";
+import { P as Popup } from "./popup.element-C8-g3WLs.js";
 Popup.define("wje-popup", Popup);
 export {
   Popup as default

package/dist/wje-select.js

@@ -9,7 +9,7 @@ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read fr
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _addedOptions, _htmlOptions, _Select_instances, htmlSelectedItem_fn, getSelectedOptions_fn, hasVisibleOptions_fn, updateEmptyState_fn, _applySearchFilter, _onMenuItemClickCapture, syncOptionCheckbox_fn;
+var _addedOptions, _htmlOptions, _portaledOptionRecords, _Select_instances, htmlSelectedItem_fn, getSelectedOptions_fn, hasVisibleOptions_fn, updateEmptyState_fn, _applySearchFilter, _handleOptionsLoad, _onMenuItemClickCapture, _syncPortalStyles, copyPortalCustomProperties_fn, syncOptionOwners_fn, portalOptions_fn, _restorePortaledOptions, focusFindInput_fn, syncOptionCheckbox_fn;
 import { F as FormAssociatedElement } from "./form-associated-element-DEQ4y-jn.js";
 import { event } from "./event.js";
 import { Localizer } from "./localize.js";
@@ -22,7 +22,7 @@ import Input from "./wje-input.js";
 import Option from "./wje-option.js";
 import Options from "./wje-options.js";
 import Checkbox from "./wje-checkbox.js";
-import { P as Popup } from "./popup.element-DklicGea.js";
+import { P as Popup } from "./popup.element-C8-g3WLs.js";
 const styles = "/*\n[ WJ Select ]\n*/\n\n:host {\n    margin-bottom: var(--wje-select-margin-bottom);\n    width: 100%;\n    display: block;\n    [slot='arrow'] {\n        transform: rotate(0deg);\n        transition: all 0.2s ease-in;\n    }\n    label {\n        margin: var(--wje-select-label-margin);\n        padding: var(--wje-select-label-padding);\n        display: var(--wje-select-label-display);\n        opacity: 1;\n        cursor: text;\n        transition: opacity 0.2s ease;\n        line-height: var(--wje-select-label-line-height);\n        font-size: var(--wje-select-label-font-size);\n    }\n}\n\n.native-select {\n    position: relative;\n    &.default {\n        .wrapper {\n            display: block;\n						background-color: var(--wje-select-background);\n            border-width: var(--wje-select-border-width);\n            border-style: var(--wje-select-border-style);\n            border-color: var(--wje-select-border-color);\n            border-radius: var(--wje-select-border-radius);\n            padding-inline: 0.5rem;\n            padding-top: 0.125rem;\n            padding-bottom: 0.125rem;\n        }\n        .input-wrapper {\n            padding: 0;\n            min-height: 28px;\n            margin-top: -4px;\n        }\n        &.focused {\n            wje-label {\n                opacity: 0.67;\n                font-size: 12px;\n                letter-spacing: normal;\n            }\n        }\n        label {\n            &.fade {\n                opacity: 0.5;\n                font-size: 12px;\n                letter-spacing: normal;\n            }\n        }\n    }\n    &.standard {\n        .wrapper {\n            height: var(--wje-select-height);\n            box-sizing: border-box;\n            background-color: var(--wje-select-background);\n            border-width: var(--wje-select-border-width);\n            border-style: var(--wje-select-border-style);\n            border-color: var(--wje-select-border-color);\n            border-radius: var(--wje-select-border-radius);\n        }\n        .input-wrapper {\n            background: transparent;\n            width: 100%;\n        }\n        slot[name='error'] {\n            position: static;\n\n            background: transparent;\n            padding: 0.25rem 0;\n            left: auto;\n            transform: none;\n            color: var(--wje-input-color-invalid);\n            font-size: 12px;\n            line-height: normal;\n        }\n    }\n}\n\n.wrapper {\n    display: flex;\n    width: 100%;\n}\n\n.input-wrapper {\n    display: grid;\n    grid-template-columns: auto 1fr auto auto auto;\n    align-items: center;\n    background-color: var(--wje-select-background);\n    /*min-height: 28px;*/\n    color: var(--wje-select-color);\n    line-height: var(--wje-select-line-height);\n    appearance: none;\n    padding: 2px 0.5rem;\n    font-size: 14px !important;\n    font-weight: normal;\n    vertical-align: middle;\n    input[readonly] {\n        pointer-events: none;\n        caret-color: transparent;\n    }\n}\n\ninput {\n    color: var(--wje-select-color);\n    line-height: var(--wje-select-line-height);\n    font-size: 14px !important;\n    font-weight: 400;\n    letter-spacing: 0.01em;\n    border: medium;\n    height: 25px;\n    min-height: 25px;\n    padding: 0;\n    background: none;\n    box-shadow: none;\n    width: 100%;\n    outline: 0;\n    font-size: 14px !important;\n}\n\n::placeholder {\n    opacity: 1;\n}\n\n:host [active] {\n    .wrapper {\n        border-radius: var(--wje-select-border-radius);\n    }\n    [slot='arrow'] {\n        transform: rotate(180deg);\n        transition: all 0.2s ease-in;\n    }\n}\n\n.options-wrapper {\n    border-width: var(--wje-select-options-border-width);\n    border-style: var(--wje-select-options-border-style);\n    border-color: var(--wje-select-options-border-color);\n    border-radius: var(--wje-select-options-border-radius);\n    margin-top: calc(0px - var(--wje-select-border-width));\n    background-color: var(--wje-select-options-background-color);\n    overflow: hidden;\n}\n\n.find {\n    margin-block: var(--wje-select-find-margin-block);\n    margin-inline: var(--wje-select-find-margin-inline);\n    width: var(--wje-select-find-width);\n}\n\n.list {\n    overflow: auto;\n    height: 100%;\n    position: relative;\n}\n\n.list:has(.empty:not([hidden])) {\n    min-height: 44px;\n}\n\n.empty {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: var(--wje-spacing-small);\n    color: var(--wje-select-color);\n    text-align: center;\n    background-color: var(--wje-select-options-background-color);\n    pointer-events: none;\n}\n\n.empty[hidden] {\n    display: none;\n}\n\n.options-wrapper:has(.find) .list {\n    height: calc(100% - 32px - 2 * var(--wje-select-find-margin-block));\n}\n\n:host([multiple]) input {\n    position: absolute;\n    z-index: -1;\n    top: 0;\n    left: 0;\n    width: 0;\n    height: 0;\n    opacity: 0;\n}\n\n:host([multiple]) .chips {\n    display: flex;\n    flex: 1;\n    align-items: center;\n    flex-wrap: wrap;\n    gap: var(--wje-spacing-3x-small);\n}\n\n:host([disabled]) .input-wrapper {\n    opacity: 0.5;\n    pointer-events: none;\n    cursor: not-allowed;\n}\n\n.counter {\n    padding-inline: 0.5rem;\n}\n\nwje-chip {\n    --wje-chip-margin: 0 0.25rem 0 0;\n}\n\nwje-button {\n    --wje-padding-top: 0.25rem;\n    --wje-padding-start: 0.25rem;\n    --wje-padding-end: 0.25rem;\n    --wje-padding-bottom: 0.25rem;\n    --wje-button-margin-inline: 0 0.25rem;\n}\n\n.slot-start,\n.slot-end {\n    &:not(:empty) {\n        margin-right: 0.5rem;\n    }\n}\n\nslot[name='error'] {\n    display: none;\n}\n\n:host([invalid]) slot[name='error'] {\n    display: block;\n}\n\nslot[name='error'] {\n    display: none;\n    position: absolute;\n    max-width: 100%;\n    min-width: auto;\n    border-radius: 50px;\n    background-color: var(--wje-select-error-background-color, var(--wje-tooltip-background));\n    padding: 0.25rem 0.5rem;\n    top: 0;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    color: var(--wje-select-error-color, var(--wje-tooltip-color));\n    font-size: var(--wje-font-size-small);\n    width: max-content;\n    line-height: normal;\n}\n\n.input-hidden{\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    padding: 0;\n    margin: 0;\n    opacity: 0;\n    z-index: -1;\n}\n\n:host([required]) .wrapper::after {\n    color: var(--wje-input-color-invalid);\n    content: var(--wje-input-required-symbol);\n    font-size: 24px;\n    position: absolute;\n    right: 12px;\n    top: 0;\n}\n\n:host([required]) .standard .input-wrapper::after {\n    right: 13px;\n    top: -20px;\n}\n";
 const _Select = class _Select extends FormAssociatedElement {
   constructor() {
@@ -30,6 +30,7 @@ const _Select = class _Select extends FormAssociatedElement {
     __privateAdd(this, _Select_instances);
     __privateAdd(this, _addedOptions, []);
     __privateAdd(this, _htmlOptions, []);
+    __privateAdd(this, _portaledOptionRecords, []);
     /**
      * An object representing component dependencies with their respective classes.
      * Each property in the object maps a custom component name (as a string key)
@@ -146,6 +147,30 @@ const _Select = class _Select extends FormAssociatedElement {
         __privateMethod(this, _Select_instances, updateEmptyState_fn).call(this);
       }
     });
+    __privateAdd(this, _handleOptionsLoad, (e) => {
+      var _a;
+      this.selectedOptions.forEach((option) => {
+        this.getAllOptions().forEach((el) => {
+          if (el.value === option.value) {
+            el.selected = true;
+          }
+        });
+      });
+      const attrValue = ((_a = this.getAttribute("value")) == null ? void 0 : _a.split(" ")) || [];
+      attrValue.forEach((val) => {
+        const existingOption = Array.from(this.getAllOptions()).find((el) => el.value === val);
+        if (existingOption) {
+          existingOption.selected = true;
+        }
+      });
+      this.selectedOptions = __privateMethod(this, _Select_instances, getSelectedOptions_fn).call(this);
+      this.selections(true);
+      __privateMethod(this, _Select_instances, updateEmptyState_fn).call(this);
+      __privateMethod(this, _Select_instances, syncOptionOwners_fn).call(this);
+      __privateMethod(this, _Select_instances, portalOptions_fn).call(this);
+      this.list.scrollTo(0, 0);
+      event.dispatchCustomEvent(this.popup, "wje-popup:content-ready");
+    });
     /**
      * Prevent closing the parent <wje-select>'s popup when a nested <wje-dropdown>
      * menu item is clicked. Closes only the dropdown that owns the clicked item.
@@ -163,6 +188,31 @@ const _Select = class _Select extends FormAssociatedElement {
       }
       e.stopPropagation();
     });
+    __privateAdd(this, _syncPortalStyles, (e) => {
+      var _a;
+      const container = (_a = e.detail) == null ? void 0 : _a.container;
+      if (!(container instanceof HTMLElement)) return;
+      container.setAttribute("data-wje-select-portal", "");
+      __privateMethod(this, _Select_instances, copyPortalCustomProperties_fn).call(this, container);
+      __privateMethod(this, _Select_instances, portalOptions_fn).call(this, container);
+      if (container.querySelector("style[data-wje-select-portal-style]")) return;
+      const style = document.createElement("style");
+      style.setAttribute("data-wje-select-portal-style", "");
+      style.textContent = _Select.portalStyles;
+      container.prepend(style);
+    });
+    __privateAdd(this, _restorePortaledOptions, () => {
+      if (__privateGet(this, _portaledOptionRecords).length === 0) return;
+      __privateGet(this, _portaledOptionRecords).forEach(({ option, placeholder }) => {
+        option.removeEventListener("wje-option:change", this.optionChange);
+        option.removeAttribute("data-wje-select-portaled-option");
+        if (placeholder.parentNode) {
+          placeholder.parentNode.insertBefore(option, placeholder);
+          placeholder.remove();
+        }
+      });
+      __privateSet(this, _portaledOptionRecords, []);
+    });
     this.localizer = new Localizer(this);
     this.counterEl = null;
     this._wasOppened = false;
@@ -258,6 +308,32 @@ const _Select = class _Select extends FormAssociatedElement {
   get defaultValue() {
     return this.getAttribute("value") ?? "";
   }
+  /**
+   * Sets or removes the `portaled` attribute on the select.
+   * Mirrors the dropdown API so popup content can be rendered in a portal root.
+   * @param {boolean|string} value Determines whether and where the popup should be portaled.
+   */
+  set portaled(value) {
+    if (value) {
+      this.setAttribute("portaled", value);
+    } else {
+      this.removeAttribute("portaled");
+    }
+  }
+  /**
+   * Getter for the `portaled` attribute value.
+   * @returns {string} The configured portal target or an empty string for the default body portal.
+   */
+  get portaled() {
+    return this.getAttribute("portaled") || "";
+  }
+  /**
+   * Checks whether popup content should be portaled.
+   * @returns {boolean} True when the `portaled` attribute is present.
+   */
+  get isPortaled() {
+    return this.hasAttribute("portaled");
+  }
   /**
    * Sets the trigger value.
    * @param {string} value The trigger value to set.
@@ -452,7 +528,7 @@ const _Select = class _Select extends FormAssociatedElement {
    * @returns {Array<string>}
    */
   static get observedAttributes() {
-    return ["active", "disabled", "readonly"];
+    return ["active", "disabled", "readonly", "portaled"];
   }
   /**
    * Sets up the attributes for the component.
@@ -558,6 +634,9 @@ const _Select = class _Select extends FormAssociatedElement {
       popup.setAttribute("size", "");
     popup.setAttribute("part", "popup");
     popup.setAttribute("offset", this.offset);
+    if (this.isPortaled) {
+      popup.setAttribute("portal", this.portaled);
+    }
     if ((this.lazy || this.querySelector("wje-options")) && !this._wasOppened) {
       popup.setAttribute("loader", "");
     } else {
@@ -589,7 +668,7 @@ const _Select = class _Select extends FormAssociatedElement {
       find.setAttribute("part", "find");
       find.clearable = true;
       find.classList.add("find");
-      optionsWrapper.appendChild(find);
+      optionsWrapper.append(find);
       this.findEl = find;
     }
     let slotFooter = document.createElement("slot");
@@ -634,8 +713,11 @@ const _Select = class _Select extends FormAssociatedElement {
     }
     this.syncAria();
     (_a = this.getAllOptions()) == null ? void 0 : _a.forEach((option) => {
+      option.ownerSelect = this;
       this.optionCheckSlot(option);
     });
+    event.addListener(this.popup, "wje-router:rebind", null, __privateGet(this, _syncPortalStyles));
+    event.addListener(this.popup, "wje-portal:restored", null, __privateGet(this, _restorePortaledOptions));
     this.selectedOptions = __privateMethod(this, _Select_instances, getSelectedOptions_fn).call(this);
     this.selectOptions(this.value, true);
     if (this.lazy) {
@@ -663,6 +745,7 @@ const _Select = class _Select extends FormAssociatedElement {
         let subtractHeight = rect.height + totalHeight;
         this.list.style.height = `calc(100% - ${subtractHeight}px)`;
       }
+      __privateMethod(this, _Select_instances, focusFindInput_fn).call(this);
     });
     __privateSet(this, _htmlOptions, Array.from(this.querySelectorAll(":scope > wje-option")).map((option) => {
       return {
@@ -700,28 +783,8 @@ const _Select = class _Select extends FormAssociatedElement {
       e.stopPropagation();
       this.clearSelections();
     });
-    this.list.addEventListener("wje-options:load", (e) => {
-      var _a2;
-      this.selectedOptions.forEach((option) => {
-        this.getAllOptions().forEach((el) => {
-          if (el.value === option.value) {
-            el.selected = true;
-          }
-        });
-      });
-      const attrValue = ((_a2 = this.getAttribute("value")) == null ? void 0 : _a2.split(" ")) || [];
-      attrValue.forEach((val) => {
-        const existingOption = Array.from(this.getAllOptions()).find((el) => el.value === val);
-        if (existingOption) {
-          existingOption.selected = true;
-        }
-      });
-      this.selectedOptions = __privateMethod(this, _Select_instances, getSelectedOptions_fn).call(this);
-      this.selections(true);
-      __privateMethod(this, _Select_instances, updateEmptyState_fn).call(this);
-      this.list.scrollTo(0, 0);
-      event.dispatchCustomEvent(this.popup, "wje-popup:content-ready");
-    });
+    this.list.addEventListener("wje-options:load", __privateGet(this, _handleOptionsLoad));
+    this.addEventListener("wje-options:load", __privateGet(this, _handleOptionsLoad));
     if (this.hasAttribute("find") && this.findEl instanceof HTMLElement) {
       event.addListener(this.findEl, "keyup", "", __privateGet(this, _applySearchFilter));
       event.addListener(this.findEl, "wje-input:clear", "", __privateGet(this, _applySearchFilter));
@@ -733,7 +796,9 @@ const _Select = class _Select extends FormAssociatedElement {
    * @returns {NodeList} The options as HTML.
    */
   getAllOptions() {
-    return this.querySelectorAll("wje-option");
+    const localOptions = Array.from(this.querySelectorAll("wje-option"));
+    const portaledOptions = __privateGet(this, _portaledOptionRecords).map(({ option }) => option);
+    return Array.from(/* @__PURE__ */ new Set([...localOptions, ...portaledOptions]));
   }
   /**
    * Handles changes in the selection for a component, updating internal values, input fields,
@@ -993,6 +1058,7 @@ const _Select = class _Select extends FormAssociatedElement {
     }
   }
   disconnectedCallback() {
+    __privateGet(this, _restorePortaledOptions).call(this);
     document.removeEventListener("mousedown", __privateGet(this, _onMenuItemClickCapture), true);
   }
   /**
@@ -1014,6 +1080,7 @@ const _Select = class _Select extends FormAssociatedElement {
 };
 _addedOptions = new WeakMap();
 _htmlOptions = new WeakMap();
+_portaledOptionRecords = new WeakMap();
 _Select_instances = new WeakSet();
 /**
  * Processes the given item and retrieves the corresponding value from the selected options.
@@ -1032,7 +1099,7 @@ htmlSelectedItem_fn = function(item) {
  * @returns {Array<Element>} An array of elements representing the options that are currently selected.
  */
 getSelectedOptions_fn = function() {
-  return Array.from(this.querySelectorAll("wje-option[selected]"));
+  return this.getAllOptions().filter((option) => option.hasAttribute("selected"));
 };
 /**
  * Determines whether the select currently contains at least one visible option.
@@ -1055,7 +1122,51 @@ updateEmptyState_fn = function() {
   this.emptyState.hidden = __privateMethod(this, _Select_instances, hasVisibleOptions_fn).call(this);
 };
 _applySearchFilter = new WeakMap();
+_handleOptionsLoad = new WeakMap();
 _onMenuItemClickCapture = new WeakMap();
+_syncPortalStyles = new WeakMap();
+copyPortalCustomProperties_fn = function(container) {
+  const style = getComputedStyle(this);
+  for (let i = 0; i < style.length; i++) {
+    const prop = style[i];
+    if (prop.startsWith("--")) {
+      container.style.setProperty(prop, style.getPropertyValue(prop));
+    }
+  }
+};
+syncOptionOwners_fn = function() {
+  this.getAllOptions().forEach((option) => {
+    option.ownerSelect = this;
+  });
+};
+portalOptions_fn = function(container = ((_a) => (_a = this.popup) == null ? void 0 : _a._portalContainer)()) {
+  if (!(container instanceof HTMLElement)) return;
+  const list = container.querySelector(".list");
+  if (!(list instanceof HTMLElement)) return;
+  const options = this.getAllOptions();
+  options.forEach((option) => {
+    if (__privateGet(this, _portaledOptionRecords).some((record) => record.option === option)) return;
+    if (!option.parentNode) return;
+    const placeholder = document.createComment("wje-select-portaled-option");
+    option.parentNode.insertBefore(placeholder, option);
+    option.ownerSelect = this;
+    option.setAttribute("data-wje-select-portaled-option", "");
+    option.addEventListener("wje-option:change", this.optionChange);
+    __privateGet(this, _portaledOptionRecords).push({ option, placeholder });
+    list.insertBefore(option, this.emptyState);
+  });
+};
+_restorePortaledOptions = new WeakMap();
+focusFindInput_fn = function() {
+  if (!this.hasAttribute("find") || !(this.findEl instanceof HTMLElement)) return;
+  requestAnimationFrame(() => {
+    var _a;
+    const input = this.findEl.input || ((_a = this.findEl.shadowRoot) == null ? void 0 : _a.querySelector("input"));
+    if (input instanceof HTMLElement) {
+      input.focus();
+    }
+  });
+};
 syncOptionCheckbox_fn = function(option) {
   const checkbox = option.querySelector('wje-checkbox[slot="check"]');
   if (!checkbox) return;
@@ -1068,6 +1179,54 @@ syncOptionCheckbox_fn = function(option) {
   }
 };
 __publicField(_Select, "_instanceId", 0);
+__publicField(_Select, "portalStyles", `
+		[data-wje-select-portal] .options-wrapper {
+			border-width: var(--wje-select-options-border-width, 1px);
+			border-style: var(--wje-select-options-border-style, solid);
+			border-color: var(--wje-select-options-border-color, var(--wje-border-color, #dcdfe3));
+			border-radius: var(--wje-select-options-border-radius, var(--wje-border-radius, 4px));
+			margin-top: calc(0px - var(--wje-select-border-width, 1px));
+			background-color: var(--wje-select-options-background-color, var(--wje-color-contrast-0, #fff));
+			overflow: hidden;
+		}
+
+		[data-wje-select-portal] .find {
+			margin-block: var(--wje-select-find-margin-block, .5rem);
+			margin-inline: var(--wje-select-find-margin-inline, .5rem);
+			width: var(--wje-select-find-width, calc(100% - 1rem));
+		}
+
+		[data-wje-select-portal] .list {
+			overflow: auto;
+			height: 100%;
+			position: relative;
+		}
+
+		[data-wje-select-portal] .list:has(.empty:not([hidden])) {
+			min-height: 44px;
+		}
+
+		[data-wje-select-portal] .empty {
+			position: absolute;
+			inset: 0;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			padding: var(--wje-spacing-small, 1rem);
+			color: var(--wje-select-color, inherit);
+			text-align: center;
+			background-color: var(--wje-select-options-background-color, var(--wje-color-contrast-0, #fff));
+			pointer-events: none;
+		}
+
+		[data-wje-select-portal] .empty[hidden] {
+			display: none;
+		}
+
+		[data-wje-select-portal] .options-wrapper:has(.find) .list {
+			height: calc(100% - 32px - 2 * var(--wje-select-find-margin-block, .5rem));
+		}
+	`);
 let Select = _Select;
 Select.define("wje-select", Select);
 export {