wj-elements 0.1.176 → 0.1.178

package/dist/wje-select.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-select.js","sources":["../packages/wje-select/select.element.js","../packages/wje-select/select.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport Button from '../wje-button/button.js';\nimport Popup from '../wje-popup/popup.js';\nimport Icon from '../wje-icon/icon.js';\nimport Label from '../wje-label/label.js';\nimport Chip from '../wje-chip/chip.js';\nimport Input from '../wje-input/input.js';\nimport Option from '../wje-option/option.js';\nimport Options from '../wje-options/options.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Select` is a custom web component that represents a select input.\n * @summary This element represents a select input.\n * @documentation https://elements.webjet.sk/components/select\n * @status stable\n * @augments {WJElement}\n * @slot - The default slot for the select.\n * @slot anchor - The slot for the anchor.\n * @slot arrow - The slot for the arrow.\n * @csspart native - The native select wrapper.\n * @csspart input - The input field.\n * @csspart clear - The clear button.\n * @property {Array} _selected - An array to store selected items.\n * @property {HTMLElement|null} counterEl - A reference to the counter element, initially null.\n * @property {ElementInternals} internals - The internal element API for managing state and attributes.\n * @property {number} maxOptions - The maximum number of options allowed.\n * @property {boolean} _wasOppened - Tracks whether the select element was previously opened, initially false.\n * @cssproperty [--wje-select-border-width=1px] - Specifies the width of the border around the select component. Accepts any valid CSS length unit (e.g., `px`, `rem`, `em`).\n * @cssproperty [--wje-select-border-style=solid] - Defines the style of the border for the select component. Accepts standard CSS border styles, such as `solid`, `dashed`, or `dotted`.\n * @cssproperty [--wje-select-border-color=var(--wje-border-color)] - Sets the color of the border for the select component. Accepts any valid CSS color value, including color variables, named colors, and hex values.\n * @cssproperty [--wje-select-options-border-width=1px] - Specifies the width of the border for the select options dropdown. Accepts any valid CSS length unit.\n * @cssproperty [--wje-select-options-border-style=var(--wje-border-style)] - Defines the border style for the select options dropdown. Inherits from a defined CSS variable for consistency.\n * @cssproperty [--wje-select-options-border-color=var(--wje-border-color)] - Sets the border color for the select options dropdown. Accepts any valid CSS color value.\n * @cssproperty [--wje-select-background=var(--wje-background)] - Specifies the background color of the select component. Accepts any valid CSS color value.\n * @cssproperty [--wje-select-line-height=20px] - Defines the line height for the text within the select component. Accepts any valid CSS length value, ensuring consistent vertical alignment.\n * @cssproperty [--wje-select-color=var(--wje-color)] - Sets the text color for the select component. Accepts any valid CSS color value.\n * @cssproperty [--wje-select-border-radius=var(--wje-border-radius-medium)] - Specifies the border radius for the select component.Determines the roundness of the corners and accepts any valid CSS length unit or variable.\n * @tag wje-select\n */\n\nexport default class Select extends WJElement {\n\t#addedOptions = []\n\t#htmlOptions = []\n\t/**\n\t * Constructor for the Select class.\n\t * @class\n\t * @description Initializes the Select component.\n\t * This constructor sets up the initial state of the component, including selected items, counter element, and internal element API.\n\t * It also tracks whether the select element was previously opened.\n\t * @class\n\t * @augments {WJElement}\n\t * @memberof Select\n\t */\n\tconstructor() {\n\t\tsuper();\n\n\t\t/**\n\t\t * @type {Array}\n\t\t * @description An array to store selected items.\n\t\t */\n\t\tthis._selected = [];\n\n\t\t/**\n\t\t * @type {HTMLElement|null}\n\t\t * @description A reference to the counter element, initially null.\n\t\t * @private\n\t\t */\n\t\tthis.counterEl = null;\n\n\t\t/**\n\t\t * @type {ElementInternals}\n\t\t * @description The internal element API for managing state and attributes.\n\t\t * @private\n\t\t * @readonly\n\t\t * @constant\n\t\t * @default {ElementInternals} this.attachInternals()\n\t\t * @description Attaches the internals to the element.\n\t\t */\n\t\tthis.internals = this.attachInternals();\n\n\t\t/**\n\t\t * @type {boolean}\n\t\t * @description Tracks whether the select element was previously opened, initially false.\n\t\t * @private\n\t\t * @default {boolean} false\n\t\t */\n\t\tthis._wasOppened = false;\n\n\t\t/**\n\t\t * @type {HTMLElement|null}\n\t\t * @description A reference to the native select element, initially null.\n\t\t */\n\t\tthis.native = null;\n\n\t\t/**\n\t\t * @type {HTMLElement|null}\n\t\t * @description A reference to the popup element, initially null.\n\t\t */\n\t\tthis.popup = null;\n\n\t\t/**\n\t\t * @type {HTMLElement|null}\n\t\t * @description A reference to the label element, initially null.\n\t\t */\n\t\tthis.labelElement = null;\n\n\t\t/**\n\t\t * @type {HTMLElement|null}\n\t\t * @description A reference to the slot start element, initially null.\n\t\t */\n\t\tthis.slotStart = null;\n\n\t\t/**\n\t\t * @type {HTMLElement|null}\n\t\t * @description A reference to the slot end element, initially null.\n\t\t */\n\t\tthis.slotEnd = null;\n\n\t\t/**\n\t\t * @type {HTMLElement|null}\n\t\t * @description A reference to the input element, initially null.\n\t\t */\n\t\tthis.input = null;\n\n\t\t/**\n\t\t * @type {HTMLElement|null}\n\t\t * @description A reference to the options wrapper element, initially null.\n\t\t */\n\t\tthis.optionsWrapper = null;\n\n\t\t/**\n\t\t * @type {HTMLElement|null}\n\t\t * @description A reference to the chips element, initially null.\n\t\t */\n\t\tthis.chips = null;\n\n\t\t/**\n\t\t * @type {HTMLElement|null}\n\t\t * @description A reference to the clear button element, initially null.\n\t\t */\n\t\tthis.clear = null;\n\n\t\t/**\n\t\t * @type {HTMLElement|null}\n\t\t * @description A reference to the list element, initially null.\n\t\t */\n\t\tthis.list = null;\n\n\t\tthis.selectedOptions = []\n\t}\n\n\t/**\n\t * An object representing component dependencies with their respective classes.\n\t * Each property in the object maps a custom component name (as a string key)\n\t * to its corresponding class or constructor.\n\t * @typedef {{[key: string]: Function}} Dependencies\n\t * @property {Function} 'wje-button' Represents the Button component class.\n\t * @property {Function} 'wje-popup' Represents the Popup component class.\n\t * @property {Function} 'wje-icon' Represents the Icon component class.\n\t * @property {Function} 'wje-label' Represents the Label component class.\n\t * @property {Function} 'wje-chip' Represents the Chip component class.\n\t * @property {Function} 'wje-input' Represents the Input component class.\n\t * @property {Function} 'wje-option' Represents the Option component class.\n\t * @property {Function} 'wje-options' Represents the Options component class.\n\t */\n\tdependencies = {\n\t\t'wje-button': Button,\n\t\t'wje-popup': Popup,\n\t\t'wje-icon': Icon,\n\t\t'wje-label': Label,\n\t\t'wje-chip': Chip,\n\t\t'wje-input': Input,\n\t\t'wje-option': Option,\n\t\t'wje-options': Options,\n\t};\n\n\t/**\n\t * Setter for the value attribute.\n\t * @param {string} value The value to set.\n\t */\n\tset value(value) {\n\t\tif (this.hasAttribute('multiple')) {\n\t\t\tconst formData = new FormData();\n\t\t\tvalue.forEach(v => formData.append(this.name, v));\n\t\t\tthis.internals.setFormValue(formData);\n\t\t} else {\n\t\t\tthis.internals.setFormValue(value);\n\t\t}\n\t}\n\n\t/**\n\t * Getter for the value attribute.\n\t * @returns {object} The value of the attribute.\n\t */\n\tget value() {\n\t\treturn this.selected;\n\t}\n\n\t/**\n\t * Getter for the customErrorDisplay attribute.\n\t * @returns {boolean} Whether the attribute is present.\n\t */\n\tget customErrorDisplay() {\n\t\treturn this.hasAttribute('custom-error-display');\n\t}\n\n\t/**\n\t * Getter for the validateOnChange attribute.\n\t * @returns {boolean} Whether the attribute is present.\n\t */\n\tget validateOnChange() {\n\t\treturn this.hasAttribute('validate-on-change');\n\t}\n\n\t/**\n\t * Getter for the invalid attribute.\n\t * @returns {boolean} Whether the attribute is present.\n\t */\n\tget invalid() {\n\t\treturn this.hasAttribute('invalid');\n\t}\n\n\t/**\n\t * Setter for the invalid attribute.\n\t * @param {boolean} isInvalid Whether the input is invalid.\n\t */\n\tset invalid(isInvalid) {\n\t\tif (isInvalid) this.setAttribute('invalid', '');\n\t\telse this.removeAttribute('invalid');\n\t}\n\n\t/**\n\t * Sets the maximum number of options allowed.\n\t * @param {string | number | null} value The value to set as the maximum number of options.\n\t * If null, the 'max-options' attribute will be removed.\n\t */\n\tset maxOptions(value) {\n\t\tif (value) {\n\t\t\tthis.setAttribute('max-options', value);\n\t\t} else {\n\t\t\tthis.removeAttribute('max-options');\n\t\t}\n\t}\n\n\t/**\n\t * Retrieves the maximum number of options allowed.\n\t * Parses the value of the 'max-options' attribute from the element and converts it to a number.\n\t * If the attribute is not present or cannot be converted to a valid number, defaults to 1.\n\t * @returns {number} The maximum number of options, or 0 if the attribute is not set or invalid.\n\t */\n\tget maxOptions() {\n\t\treturn +this.getAttribute('max-options') || 1;\n\t}\n\n\t/**\n\t * Getter for the form attribute.\n\t * @returns {HTMLFormElement} The form the input is associated with.\n\t */\n\tget form() {\n\t\treturn this.internals.form;\n\t}\n\n\t/**\n\t * Getter for the name attribute.\n\t * @returns {string} The name of the input.\n\t */\n\tget name() {\n\t\treturn this.getAttribute('name');\n\t}\n\n\t/**\n\t * Getter for the type attribute.\n\t * @returns {string} The type of the input.\n\t */\n\tget type() {\n\t\treturn this.localName;\n\t}\n\n\t/**\n\t * Getter for the validity attribute.\n\t * @returns {ValidityState} The validity state of the input.\n\t */\n\tget validity() {\n\t\treturn this.internals.validity;\n\t}\n\n\t/**\n\t * Getter for the validationMessage attribute.\n\t * @returns {string} The validation message of the input.\n\t */\n\tget validationMessage() {\n\t\treturn this.internals.validationMessage;\n\t}\n\n\t/**\n\t * Getter for the willValidate attribute.\n\t * @returns {boolean} Whether the input will be validated.\n\t */\n\tget willValidate() {\n\t\treturn this.internals.willValidate;\n\t}\n\n\t/**\n\t * @summary Getter for the defaultValue attribute.\n\t * This method retrieves the 'value' attribute of the custom input element.\n\t * The 'value' attribute represents the default value of the input element.\n\t * If the 'value' attribute is not set, it returns an empty string.\n\t * @returns {string} The default value of the input element.\n\t */\n\tget defaultValue() {\n\t\treturn this.getAttribute('value') ?? '';\n\t}\n\n\t/**\n\t * @summary Setter for the defaultValue attribute.\n\t * This method sets the 'value' attribute of the custom input element to the provided value.\n\t * The 'value' attribute represents the default value of the input element.\n\t * @param {string} value The value to set as the default value.\n\t */\n\tset defaultValue(value) {\n\t\tthis.setAttribute('value', value);\n\t}\n\n\t/**\n\t * Sets the label value.\n\t * @param {Array} value The selected value to set.\n\t */\n\tset selected(value) {\n\t\tthis._selected = value;\n\t}\n\n\t/**\n\t * Returns the selected value.\n\t * @returns {Array} The selected value.\n\t */\n\tget selected() {\n\t\treturn this.getSelected();\n\t}\n\n\tget options() {\n\t\tif (this.querySelector('wje-options')) {\n\t\t\tconst allOptions = [...this.querySelector('wje-options').loadedOptions, ...this.#addedOptions, ...this.#htmlOptions]\n\n\t\t\treturn allOptions\n\t\t} else {\n\t\t\tconst allOptions = [...this.#addedOptions, ...this.#htmlOptions]\n\n\t\t\treturn Array.from(\n\t\t\t\tnew Map(allOptions.reverse().map(obj => [obj.value, obj])).values()\n\t\t\t).reverse();\n\t\t}\n\t}\n\n\t/**\n\t * Sets the trigger value.\n\t * @param {string} value The trigger value to set.\n\t */\n\tset trigger(value) {\n\t\tthis.setAttribute('trigger', value);\n\t}\n\n\t/**\n\t * Returns the trigger value.\n\t * @returns {string} The trigger value.\n\t */\n\tget trigger() {\n\t\treturn this.getAttribute('trigger') || 'click';\n\t}\n\n\tclassName = 'Select';\n\n\t/**\n\t * Returns the CSS styles for the component.\n\t * @static\n\t * @returns {CSSStyleSheet}\n\t */\n\tstatic get cssStyleSheet() {\n\t\treturn styles;\n\t}\n\n\t/**\n\t * Returns the list of attributes to observe for changes.\n\t * @static\n\t * @returns {Array<string>}\n\t */\n\tstatic get observedAttributes() {\n\t\treturn ['active', 'value', 'disabled', 'multiple', 'label', 'placeholder', 'max-height', 'max-options', 'variant', 'placement'];\n\t}\n\n\t/**\n\t * Whether the input is associated with a form.\n\t * @type {boolean}\n\t */\n\tstatic formAssociated = true;\n\n\t/**\n\t * Sets up the attributes for the component.\n\t */\n\tsetupAttributes() {\n\t\tthis.isShadowRoot = 'open';\n\t}\n\n\t/**\n\t * Draws the component for the select.\n\t * @returns {DocumentFragment}\n\t */\n\tdraw() {\n\t\tlet fragment = document.createDocumentFragment();\n\n\t\tthis.classList.add('wje-placement', this.placement ? 'wje-' + this.placement : 'wje-start');\n\n\t\t// zakladny obalovac\n\t\tlet native = document.createElement('div');\n\t\tnative.setAttribute('part', 'native');\n\t\tnative.classList.add('native-select', this.variant || 'default');\n\n\t\t// wrapper pre label a inputWrapper\n\t\tlet wrapper = document.createElement('div');\n\t\twrapper.classList.add('wrapper');\n\t\twrapper.setAttribute('slot', 'anchor');\n\n\t\t// label\n\t\tlet label = document.createElement('wje-label');\n\t\tlabel.setAttribute('part', 'label');\n\t\tlabel.innerText = this.label || '';\n\n\t\t// obalovac pre input\n\t\tlet inputWrapper = document.createElement('div');\n\t\tinputWrapper.setAttribute('part', 'input-wrapper');\n\t\tinputWrapper.classList.add('input-wrapper');\n\n\t\tlet slotStart = document.createElement('div');\n\t\tslotStart.classList.add('slot-start');\n\n\t\tlet input = document.createElement('input');\n\t\tinput.setAttribute('type', 'text');\n\t\tinput.setAttribute('part', 'input');\n\t\tinput.setAttribute('autocomplete', 'off');\n\t\tinput.setAttribute('readonly', '');\n\t\tinput.setAttribute('placeholder', this.placeholder || '');\n\n\t\tlet slotEnd = document.createElement('div');\n\t\tslotEnd.classList.add('slot-end');\n\n\t\tlet arrow = document.createElement('wje-icon');\n\t\tarrow.setAttribute('name', 'chevron-down');\n\t\tarrow.setAttribute('slot', 'arrow');\n\n\t\tlet chips = document.createElement('div');\n\t\tchips.classList.add('chips');\n\t\tchips.innerText = this.placeholder || '';\n\n\t\t// obalovac pre option a find\n\t\tlet optionsWrapper = document.createElement('div');\n\t\toptionsWrapper.setAttribute('part', 'options-wrapper');\n\t\toptionsWrapper.classList.add('options-wrapper');\n\t\toptionsWrapper.style.setProperty('height', this.maxHeight || 'auto');\n\n\t\tlet list = document.createElement('div');\n\t\tlist.classList.add('list');\n\n\t\tlet slot = document.createElement('slot');\n\n\t\tlet clear = document.createElement('wje-button');\n\t\tclear.setAttribute('fill', 'link');\n\t\tclear.setAttribute('part', 'clear');\n\t\tclear.setAttribute('stop-propagation', '');\n\n\t\tlet clearIcon = document.createElement('wje-icon');\n\t\tclearIcon.setAttribute('name', 'x');\n\n\t\tclear.appendChild(clearIcon);\n\n\t\t// vytvorime popup\n\t\tlet popup = document.createElement('wje-popup');\n\t\tpopup.setAttribute('placement', 'bottom-start');\n\t\tpopup.setAttribute('manual', '');\n\t\tpopup.setAttribute('size', '');\n\t\tpopup.setAttribute('part', 'popup');\n\n\t\tif (this.hasAttribute('disabled')) popup.setAttribute('disabled', '');\n\n\t\tif (this.variant === 'standard') {\n\t\t\tif (this.hasAttribute('label')) native.appendChild(label);\n\t\t} else {\n\t\t\twrapper.appendChild(label);\n\t\t}\n\n\t\tinputWrapper.appendChild(slotStart);\n\t\tinputWrapper.appendChild(input);\n\t\tif (this.hasAttribute('multiple')) inputWrapper.appendChild(chips);\n\n\t\tif (this.hasAttribute('clearable')) inputWrapper.appendChild(clear);\n\n\t\tinputWrapper.appendChild(slotEnd);\n\t\tinputWrapper.appendChild(arrow);\n\n\t\tlist.appendChild(slot);\n\n\t\tif (this.hasAttribute('find')) {\n\t\t\tlet find = document.createElement('wje-input');\n\t\t\tfind.setAttribute('variant', 'standard');\n\t\t\tfind.setAttribute('placeholder', 'Hľadať');\n\t\t\tfind.setAttribute('part', 'find');\n\t\t\tfind.classList.add('find');\n\n\t\t\toptionsWrapper.appendChild(find);\n\n\t\t\tthis.findEl = find;\n\t\t}\n\n\t\tif (this.hasAttribute('lazy')) {\n\t\t\tevent.addListener(popup, 'wje-popup:show', null, (e) => {\n\t\t\t\tif (this._wasOppened) return;\n\t\t\t\tthis._wasOppened = true;\n\n\t\t\t\tconst optionsElement = this.querySelector('wje-options');\n\t\t\t\toptionsElement.setAttribute('lazy', '');\n\t\t\t\toptionsElement.setAttribute('attached', '');\n\t\t\t});\n\t\t} else {\n\t\t\tconst optionsElement = this.querySelector('wje-options');\n\t\t\toptionsElement?.setAttribute('attached', '');\n\t\t}\n\n\t\toptionsWrapper.appendChild(list);\n\n\t\twrapper.appendChild(inputWrapper);\n\t\tpopup.appendChild(optionsWrapper);\n\t\tpopup.appendChild(wrapper);\n\n\t\tif (this.trigger === 'click') popup.setAttribute('manual', '');\n\n\t\tnative.appendChild(popup);\n\n\t\tthis.native = native;\n\t\tthis.popup = popup;\n\t\tthis.labelElement = label;\n\t\tthis.slotStart = slotStart;\n\t\tthis.slotEnd = slotEnd;\n\t\tthis.input = input;\n\t\tthis.optionsWrapper = optionsWrapper;\n\t\tthis.chips = chips;\n\t\tthis.clear = clear;\n\t\tthis.list = list;\n\n\t\tfragment.appendChild(native);\n\n\t\treturn fragment;\n\t}\n\n\t/**\n\t * Sets up the event listeners after the component is drawn.\n\t */\n\tafterDraw() {\n\t\tthis.#htmlOptions = Array.from(this.querySelectorAll(':scope > wje-option')).map((option) => {\n\t\t\treturn {\n\t\t\t\tvalue: option.value,\n\t\t\t\ttext: option.textContent.trim(),\n\t\t\t};\n\t\t})\n\n\t\tthis.input.addEventListener('focus', (e) => {\n\t\t\tthis.labelElement?.classList.add('fade');\n\t\t\tthis.native.classList.add('focused');\n\t\t});\n\n\t\tthis.input.addEventListener('blur', (e) => {\n\t\t\tthis.native.classList.remove('focused');\n\t\t\tif (!e.target.value) this.labelElement?.classList.remove('fade');\n\t\t});\n\n\t\tthis.addEventListener('wje-option:change', this.optionChange);\n\n\t\tthis.clear?.addEventListener('wje-button:click', (e) => {\n\t\t\te.preventDefault();\n\t\t\te.stopPropagation();\n\t\t\tthis.selectedOptions = [];\n\n\t\t\tthis.getAllOptions().forEach((option) => {\n\t\t\t\toption.selected = false;\n\t\t\t\toption.removeAttribute('selected');\n\t\t\t});\n\t\t\tthis.selections();\n\n\t\t\te.stopPropagation();\n\t\t});\n\n\t\tthis.selectedOptions = this.getSelectedOptions();\n\t\tthis.selections(true);\n\n\t\tthis.list.addEventListener('wje-options:load', (e) => {\n\t\t\t// todo select options from this.selectedOptions\n\t\t\tthis.selectedOptions.forEach((option) => {\n\t\t\t\tthis.getAllOptions().forEach((el) => {\n\t\t\t\t\tif (el.value === option.value) {\n\t\t\t\t\t\tel.selected = true;\n\t\t\t\t\t\tel.setAttribute('selected', '');\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t})\n\n\t\t\tthis.list.scrollTo(0, 0);\n\t\t});\n\n\t\t// skontrolujeme ci ma select atribut find\n\t\tif (this.hasAttribute('find') && this.findEl instanceof HTMLElement) {\n\t\t\tevent.addListener(this.findEl, 'keyup', '', (e) => {\n\t\t\t\t// contains wj-options element with options\n\t\t\t\tconst optionsElement = this.querySelector('wje-options');\n\t\t\t\tif (optionsElement && optionsElement.hasAttribute('lazy')) {\n\t\t\t\t\t// pass search value to wj-options element and infinite scroll will handle the rest\n\t\t\t\t\toptionsElement.setAttribute('search', e.target.value);\n\t\t\t\t} else {\n\t\t\t\t\tlet value = e.target.value.trim().toLowerCase();\n\n\t\t\t\t\tthis.getAllOptions().forEach((option) => {\n\t\t\t\t\t\tif (option.textContent.trim().toLowerCase().includes(value)) option.style.display = 'block';\n\t\t\t\t\t\telse option.style.display = 'none';\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\t}\n\n\t/**\n\t * Handles the option change event.\n\t * @param {Event} e The event.\n\t */\n\toptionChange = (e) => {\n\t\te.stopPropagation()\n\t\te.stopImmediatePropagation()\n\n\t\tlet allOptions = this.getAllOptions();\n\n\t\tif (!this.hasAttribute('multiple')) {\n\t\t\tallOptions.forEach((option) => {\n\t\t\t\tif (option.value === e.target.value) {\n\t\t\t\t\tthis.processClickedOption(option);\n\t\t\t\t} else {\n\t\t\t\t\toption.selected = false;\n\t\t\t\t\toption.removeAttribute('selected');\n\t\t\t\t}\n\t\t\t});\n\t\t\tthis.popup.hide(false);\n\t\t} else {\n\t\t\tthis.processClickedOption(e.target, true);\n\t\t}\n\n\t\tthis.selections();\n\t};\n\n\t/**\n\t * Handles the selection and deselection of an option element.\n\t * @param {HTMLElement} option The option element that was clicked.\n\t * @param {boolean} [multiple] Indicates whether multiple selection is allowed.\n\t */\n\tprocessClickedOption = (option, multiple = false) => {\n\t\tconst isSelected = option.hasAttribute(\"selected\")\n\t\toption.selected = !isSelected;\n\n\t\tif (isSelected) {\n\t\t\toption.removeAttribute('selected');\n\t\t\tthis.filterOutOption(option);\n\t\t} else {\n\t\t\toption.setAttribute('selected', '');\n\t\t\tthis.selectedOptions = multiple ? [...this.selectedOptions, option] : [option];\n\t\t}\n\t}\n\n\t/**\n\t * Filters out a specified option from the `selectedOptions` array.\n\t * This function removes an option from the `selectedOptions` array if its value\n\t * matches the value of the option provided as an argument. It allows for dynamically\n\t * updating the selected options by excluding the specified option.\n\t * @param {object} option The option to be removed from the `selectedOptions` array.\n\t * Should be an object containing a `value` property that is compared to the\n\t * `value` property of objects in the `selectedOptions` array.\n\t */\n\tfilterOutOption = (option) => {\n\t\tthis.selectedOptions = this.selectedOptions.filter((sOption) => {\n\t\t\treturn sOption.value !== option.value;\n\t\t});\n\t}\n\n\t/**\n\t * Returns all the options as HTML.\n\t * @returns {NodeList} The options as HTML.\n\t */\n\tgetAllOptions() {\n\t\treturn this.querySelectorAll('wje-option');\n\t}\n\n\t/**\n\t * Returns the selected options as HTML.\n\t * @returns {NodeList} The selected options as HTML.\n\t */\n\tgetSelectedOptions() {\n\t\treturn Array.from(this.querySelectorAll('wje-option[selected]'));\n\t}\n\n\t/**\n\t * Returns the selected options.\n\t * @returns {Array} The selected options.\n\t */\n\tgetSelected() {\n\t\treturn this.selectedOptions.map((option) => {\n\t\t\treturn {\n\t\t\t\tvalue: option.value,\n\t\t\t\ttext: this.#htmlSelectedItem(option.value) // option.textContent.trim(),\n\t\t\t};\n\t\t});\n\t}\n\n\t/**\n\t * Handles the selection change.\n\t * @param {Element[]} options The option that changed.\n\t * @param {number} length The length of the selected options.\n\t */\n\tselectionChanged(options = null, length = 0) {\n\t\tif (this.hasAttribute('multiple')) {\n\n\t\t\tthis.value = this.selectedOptions.map((el) => el.value).reverse();\n\n\t\t\tif (this.placeholder && length === 0) {\n\t\t\t\tthis.chips.innerHTML = this.placeholder;\n\t\t\t\tthis.input.value = '';\n\t\t\t} else {\n\t\t\t\tif (options !== null) Array.from(options).slice(0, +this.maxOptions).forEach(option => this.chips.appendChild(this.getChip(option)));\n\t\t\t\tif (this.counterEl instanceof HTMLElement || !this.maxOptions || length > +this.maxOptions) {\n\t\t\t\t\tthis.counter();\n\t\t\t\t}\n\t\t\t}\n\t\t} else {\n\t\t\tlet option = options?.at(0);\n\t\t\tlet value = (option && this.#htmlSelectedItem(option.value)) ?? \"\"  // option?.textContent.trim() || '';\n\t\t\tthis.value = this.selectedOptions?.map((el) => el.value)?.at(0);\n\t\t\tthis.input.value = value;\n\n\t\t\tif (option && option instanceof HTMLElement) {\n\t\t\t\tthis.slotStart.innerHTML = '';\n\n\t\t\t\tlet optionSlotStart = option?.querySelector('wje-option > [slot=start]');\n\t\t\t\tif (optionSlotStart) {\n\t\t\t\t\tthis.slotStart.appendChild(optionSlotStart.cloneNode(true));\n\t\t\t\t}\n\n\t\t\t\tthis.slotEnd.innerHTML = '';\n\n\t\t\t\tlet optionSlotEnd = option?.querySelector('wje-option > [slot=end]');\n\t\t\t\tif (optionSlotEnd) {\n\t\t\t\t\tthis.slotEnd.appendChild(optionSlotEnd.cloneNode(true));\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Updates the selected options and their corresponding chips.\n\t * @param {boolean} [silence] Determines whether to suppress the \"wje-select:change\" event.\n\t * @returns {void}\n\t * @description\n\t * This method fetches the currently selected options and updates the `selectedOptions` array.\n\t * It clears and rebuilds the chips representing the selected items in the UI.\n\t * If the number of selected options reaches the maximum allowed (`maxOptions`), it stops updating the counter.\n\t * Optionally, it dispatches a custom event when the selection changes unless `silence` is set to `true`.\n\t * //@fires wje-select:change - Dispatched when the selection changes, unless `silence` is `true`.\n\t * @example\n\t * // Call the method and allow event dispatch\n\t * selections();\n\t * @example\n\t * // Call the method without dispatching the event\n\t * selections(true);\n\t */\n\tselections(silence = false) {\n\t\tif (this.selectedOptions.length >= +this.maxOptions) {\n\t\t\tthis.counterEl = null;\n\t\t}\n\n\t\tif (this.chips) {\n\t\t\tthis.chips.innerHTML = '';\n\t\t}\n\n\t\tif (this.selectedOptions.length > 0) {\n\t\t\tthis.selectionChanged(this.selectedOptions, this.selectedOptions.length);\n\n\t\t} else {\n\t\t\tthis.selectionChanged();\n\t\t}\n\n\t\tif (silence) return;\n\t\tevent.dispatchCustomEvent(this, 'wje-select:change');\n\t}\n\n\t/**\n\t * Manages the display of a counter element to indicate the number of items exceeding the maximum allowed options.\n\t * - If the number of selected items equals the maximum allowed, the counter element is removed.\n\t * - If the counter element doesn't exist and the number of items exceeds the maximum, it is created and updated.\n\t */\n\tcounter() {\n\t\t// zmazanie counter (span)\n\t\tif (this.counterEl && this.value.length === +this.maxOptions) {\n\t\t\tthis.counterEl.remove();\n\t\t\tthis.counterEl = null;\n\t\t\treturn;\n\t\t}\n\n\t\t// ak counter nie je, tak ho vytvorime\n\t\tif (!this.counterEl) {\n\t\t\tthis.counterEl = document.createElement('span');\n\t\t\tthis.counterEl.classList.add('counter');\n\n\t\t\tthis.chips.appendChild(this.counterEl);\n\t\t}\n\n\t\t// nastavime hodnotu counter\n\t\tthis.counterEl.innerText = `+${this.value.length - +this.maxOptions}`;\n\t}\n\n\t/**\n\t * Returns a chip element.\n\t * @param {Element} option The option to get the chip for.\n\t * @returns {Element} The chip element.\n\t */\n\tgetChip(option) {\n\t\tlet chip = document.createElement('wje-chip');\n\t\tchip.size = 'small';\n\t\tchip.removable = true;\n\t\tchip.round = true;\n\t\tchip.addEventListener('wje:chip-remove', this.removeChip);\n\t\tchip.option = option;\n\n\t\tlet label = document.createElement('wje-label');\n\t\tlabel.innerHTML = this.#htmlSelectedItem(option.value) // option.textContent.trim();\n\n\t\tchip.appendChild(label);\n\n\t\treturn chip;\n\t}\n\n\t/**\n\t * Handles the chip remove event.\n\t * @param {Event} e The event.\n\t */\n\tremoveChip = (e) => {\n\t\te.target.parentNode.removeChild(e.target);\n\t\tthis.processClickedOption(e.target.option, true);\n\t\tthis.selections();\n\t};\n\n\t/**\n\t * Generates an HTML option element based on the provided item and mapping.\n\t * @param {object} item The item to generate the option for.\n\t * @param {object} [map] The mapping object that specifies the properties of the item to use for the option's value and text.\n\t * @param {string} [map.value] The property of the item to use for the option's value.\n\t * @param {string} [map.text] The property of the item to use for the option's text.\n\t * @returns {HTMLElement} The generated HTML option element.\n\t */\n\thtmlOption(item, map = { value: 'value', text: 'text' }) {\n\t\tlet option = document.createElement('wje-option');\n\n\t\tif (item[map.value] === null) {\n\t\t\tconsole.warn(`The item ${JSON.stringify(item)} does not have the property ${map.value}`);\n\t\t}\n\n\t\tif (item[map.text] === null) {\n\t\t\tconsole.warn(`The item ${JSON.stringify(item)} does not have the property ${map.text}`);\n\t\t}\n\n\t\toption.setAttribute('value', item[map.value] ?? '');\n\t\toption.innerText = item[map.text] ?? '';\n\n\t\tthis.#addedOptions.push({ [map.value]: item[map.value], [map.text]: item[map.text] });\n\t\treturn option;\n\t}\n\n\t/**\n\t * Adds an option to the select element.\n\t * @param {any} optionData The data for the option to be added.\n\t * @param {boolean} [silent] Whether to suppress any events triggered by the addition of the option.\n\t * @param {object} [map] The mapping object specifying the properties of the option data to be used for the value and text of the option.\n\t */\n\taddOption(optionData, silent = false, map = { value: 'value', text: 'text' }) {\n\t\tif (!optionData) return;\n\n\t\tconst optionsElement = this.querySelector('wje-options');\n\t\tif (optionsElement) {\n\t\t\toptionsElement.addOption(optionData, silent, map);\n\t\t\treturn;\n\t\t}\n\t\tlet option = this.htmlOption(optionData, map);\n\t\tthis.appendChild(option);\n\t}\n\n\t/**\n\t * Adds options to the select element.\n\t * @param {Array | object} optionsData The options data to be added. Can be an array of objects or a single object.\n\t * @param {boolean} [silent] Indicates whether to trigger events when adding options. Default is false.\n\t * @param {object} [map] The mapping object that specifies the properties of the options data object. Default is { value: \"value\", text: \"text\" }.\n\t */\n\taddOptions(optionsData, silent = false, map = { value: 'value', text: 'text' }) {\n\t\tif (!Array.isArray(optionsData)) {\n\t\t\tthis.addOption(optionsData, silent, map);\n\t\t} else {\n\t\t\tconst optionsElement = this.querySelector('wje-options');\n\t\t\tif (optionsElement) {\n\t\t\t\toptionsElement.addOptions(optionsData, silent, map);\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\toptionsData.forEach((item) => {\n\t\t\t\tthis.addOption(item, silent, map);\n\t\t\t});\n\t\t}\n\t}\n\n\t/**\n\t * Selects an option with the specified value.\n\t * @param {string} value The value of the option to be selected.\n\t * @param {boolean} [silent] Whether to suppress firing events.\n\t */\n\tselectOption(value, silent = false) {\n\t\tif (!value) return;\n\n\t\tlet option = this.querySelector(`wje-option[value=\"${value}\"]`);\n\n\t\tif (option) {\n\t\t\tthis.processClickedOption(option, this.hasAttribute('multiple'));\n\t\t}\n\n\t\tif (this.drawingStatus > this.drawingStatuses.START) this.selections(silent);\n\t}\n\n\t/**\n\t * Selects one or multiple options in the select element.\n\t * @param {Array|any} values The value(s) of the option(s) to be selected.\n\t * @param {boolean} [silent] Whether to trigger the change event or not.\n\t */\n\tselectOptions(values, silent = false) {\n\t\tif (!Array.isArray(values)) {\n\t\t\tthis.selectOption(values, silent);\n\t\t} else {\n\t\t\tvalues.forEach((value) => {\n\t\t\t\tthis.selectOption(value, silent);\n\t\t\t});\n\t\t}\n\t}\n\n\t#htmlSelectedItem(item) {\n\t\tconst keyValue = this.querySelector(\"wje-options\")?.itemValue ?? \"value\"\n\n\t\tconst value = this.options\n\t\t\t.find((option) => option[keyValue] === item)\n\n\t\treturn this.htmlSelectedItem(value);\n\t}\n\n\thtmlSelectedItem(item) {\n\t\tconst textValue = this.querySelector(\"wje-options\")?.itemText ?? \"text\"\n\n\t\treturn item?.[textValue] ?? \"\";\n\t}\n\n\t/**\n\t * @summary Callback function that is called when the custom element is associated with a form.\n\t * This function adds an event listener to the form's submit event, which validates the input and propagates the validation.\n\t * @param {HTMLFormElement} form The form the custom element is associated with.\n\t */\n\tformAssociatedCallback(form) {\n\t\tif (form) {\n\t\t\tthis.internals.setFormValue(this.value);\n\t\t}\n\t}\n\n\t/**\n\t * The formResetCallback method is a built-in lifecycle callback that gets called when a form gets reset.\n\t * This method is responsible for resetting the value of the custom input element to its default value.\n\t * It also resets the form value and validity state in the form internals.\n\t * @function\n\t */\n\tformResetCallback() {\n\t\t// Set the value of the custom input element to its default value\n\t\tthis.value = this.defaultValue;\n\t\t// Reset the form value in the form internals to the default value\n\t\tthis.internals.setFormValue(this.defaultValue);\n\t\t// Reset the validity state in the form internals\n\t\tthis.internals.setValidity({});\n\t}\n\n\t/**\n\t * The formStateRestoreCallback method is a built-in lifecycle callback that gets called when the state of a form-associated custom element is restored.\n\t * This method is responsible for restoring the value of the custom input element to its saved state.\n\t * It also restores the form value and validity state in the form internals to their saved states.\n\t * @param {object} state The saved state of the custom input element.\n\t * @function\n\t */\n\tformStateRestoreCallback(state) {\n\t\t// Set the value of the custom input element to its saved value\n\t\tthis.value = state.value;\n\t\t// Restore the form value in the form internals to the saved value\n\t\tthis.internals.setFormValue(state.value);\n\t\t// Restore the validity state in the form internals to the saved state\n\t\tthis.internals.setValidity({});\n\t}\n\n\t/**\n\t * The formStateSaveCallback method is a built-in lifecycle callback that gets called when the state of a form-associated custom element is saved.\n\t * This method is responsible for saving the value of the custom input element.\n\t * @returns {object} The saved state of the custom input element.\n\t * @function\n\t */\n\tformStateSaveCallback() {\n\t\treturn {\n\t\t\tvalue: this.value,\n\t\t};\n\t}\n\n\t/**\n\t * The formDisabledCallback method is a built-in lifecycle callback that gets called when the disabled state of a form-associated custom element changes.\n\t * This method is not implemented yet.\n\t * @param {boolean} disabled The new disabled state of the custom input element.\n\t * @function\n\t */\n\tformDisabledCallback(disabled) {\n\t\tconsole.warn('formDisabledCallback not implemented yet');\n\t\tthis.native?.classList.toggle('disabled', disabled);\n\t\tthis.toggleAttribute('disabled', disabled);\n\t}\n\n\t/**\n\t * Checks if all elements in the `elements` array are present in the `options` array based on their `option` property.\n\t * @param {Array} elements The array of elements to check. Each element should have an `option` property.\n\t * @param {Array} options The array of options to verify against.\n\t * @returns {boolean} Returns true if all elements in the `elements` array are found within the `options` array, otherwise returns false.\n\t */\n\tareAllElementsInOptions(elements, options) {\n\t\tif (elements.length === 0) return false;\n\n\t\treturn elements.every(el =>\n\t\t\toptions.some(opt => JSON.stringify(opt) === JSON.stringify(el.option))\n\t\t);\n\t}\n}\n","import Select from './select.element.js';\n\nexport default Select;\n\nSelect.define('wje-select', Select);\n"],"names":["_a"],"mappings":"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"}
+{"version":3,"file":"wje-select.js","sources":["../packages/wje-select/select.element.js","../packages/wje-select/select.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport Button from '../wje-button/button.js';\nimport Popup from '../wje-popup/popup.js';\nimport Icon from '../wje-icon/icon.js';\nimport Label from '../wje-label/label.js';\nimport Chip from '../wje-chip/chip.js';\nimport Input from '../wje-input/input.js';\nimport Option from '../wje-option/option.js';\nimport Options from '../wje-options/options.js';\nimport Checkbox from '../wje-checkbox/checkbox.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Select` is a custom web component that represents a select input.\n * @summary This element represents a select input.\n * @documentation https://elements.webjet.sk/components/select\n * @status stable\n * @augments {WJElement}\n * @slot - The default slot for the select.\n * @slot anchor - The slot for the anchor.\n * @slot arrow - The slot for the arrow.\n * @csspart native - The native select wrapper.\n * @csspart input - The input field.\n * @csspart clear - The clear button.\n * @property {Array} _selected - An array to store selected items.\n * @property {HTMLElement|null} counterEl - A reference to the counter element, initially null.\n * @property {ElementInternals} internals - The internal element API for managing state and attributes.\n * @property {number} maxOptions - The maximum number of options allowed.\n * @property {boolean} _wasOppened - Tracks whether the select element was previously opened, initially false.\n * @cssproperty [--wje-select-border-width=1px] - Specifies the width of the border around the select component. Accepts any valid CSS length unit (e.g., `px`, `rem`, `em`).\n * @cssproperty [--wje-select-border-style=solid] - Defines the style of the border for the select component. Accepts standard CSS border styles, such as `solid`, `dashed`, or `dotted`.\n * @cssproperty [--wje-select-border-color=var(--wje-border-color)] - Sets the color of the border for the select component. Accepts any valid CSS color value, including color variables, named colors, and hex values.\n * @cssproperty [--wje-select-options-border-width=1px] - Specifies the width of the border for the select options dropdown. Accepts any valid CSS length unit.\n * @cssproperty [--wje-select-options-border-style=var(--wje-border-style)] - Defines the border style for the select options dropdown. Inherits from a defined CSS variable for consistency.\n * @cssproperty [--wje-select-options-border-color=var(--wje-border-color)] - Sets the border color for the select options dropdown. Accepts any valid CSS color value.\n * @cssproperty [--wje-select-background=var(--wje-background)] - Specifies the background color of the select component. Accepts any valid CSS color value.\n * @cssproperty [--wje-select-line-height=20px] - Defines the line height for the text within the select component. Accepts any valid CSS length value, ensuring consistent vertical alignment.\n * @cssproperty [--wje-select-color=var(--wje-color)] - Sets the text color for the select component. Accepts any valid CSS color value.\n * @cssproperty [--wje-select-border-radius=var(--wje-border-radius-medium)] - Specifies the border radius for the select component.Determines the roundness of the corners and accepts any valid CSS length unit or variable.\n * @tag wje-select\n */\n\nexport default class Select extends WJElement {\n\t#addedOptions = []\n\t#htmlOptions = []\n\t/**\n\t * Constructor for the Select class.\n\t * @class\n\t * @description Initializes the Select component.\n\t * This constructor sets up the initial state of the component, including selected items, counter element, and internal element API.\n\t * It also tracks whether the select element was previously opened.\n\t * @class\n\t * @augments {WJElement}\n\t * @memberof Select\n\t */\n\tconstructor() {\n\t\tsuper();\n\n\t\t/**\n\t\t * @type {Array}\n\t\t * @description An array to store selected items.\n\t\t */\n\t\tthis._selected = [];\n\n\t\t/**\n\t\t * @type {HTMLElement|null}\n\t\t * @description A reference to the counter element, initially null.\n\t\t * @private\n\t\t */\n\t\tthis.counterEl = null;\n\n\t\t/**\n\t\t * @type {ElementInternals}\n\t\t * @description The internal element API for managing state and attributes.\n\t\t * @private\n\t\t * @readonly\n\t\t * @constant\n\t\t * @default {ElementInternals} this.attachInternals()\n\t\t * @description Attaches the internals to the element.\n\t\t */\n\t\tthis.internals = this.attachInternals();\n\n\t\t/**\n\t\t * @type {boolean}\n\t\t * @description Tracks whether the select element was previously opened, initially false.\n\t\t * @private\n\t\t * @default {boolean} false\n\t\t */\n\t\tthis._wasOppened = false;\n\n\t\t/**\n\t\t * @type {HTMLElement|null}\n\t\t * @description A reference to the native select element, initially null.\n\t\t */\n\t\tthis.native = null;\n\n\t\t/**\n\t\t * @type {HTMLElement|null}\n\t\t * @description A reference to the popup element, initially null.\n\t\t */\n\t\tthis.popup = null;\n\n\t\t/**\n\t\t * @type {HTMLElement|null}\n\t\t * @description A reference to the label element, initially null.\n\t\t */\n\t\tthis.labelElement = null;\n\n\t\t/**\n\t\t * @type {HTMLElement|null}\n\t\t * @description A reference to the slot start element, initially null.\n\t\t */\n\t\tthis.slotStart = null;\n\n\t\t/**\n\t\t * @type {HTMLElement|null}\n\t\t * @description A reference to the slot end element, initially null.\n\t\t */\n\t\tthis.slotEnd = null;\n\n\t\t/**\n\t\t * @type {HTMLElement|null}\n\t\t * @description A reference to the input element, initially null.\n\t\t */\n\t\tthis.input = null;\n\n\t\t/**\n\t\t * @type {HTMLElement|null}\n\t\t * @description A reference to the options wrapper element, initially null.\n\t\t */\n\t\tthis.optionsWrapper = null;\n\n\t\t/**\n\t\t * @type {HTMLElement|null}\n\t\t * @description A reference to the chips element, initially null.\n\t\t */\n\t\tthis.chips = null;\n\n\t\t/**\n\t\t * @type {HTMLElement|null}\n\t\t * @description A reference to the clear button element, initially null.\n\t\t */\n\t\tthis.clear = null;\n\n\t\t/**\n\t\t * @type {HTMLElement|null}\n\t\t * @description A reference to the list element, initially null.\n\t\t */\n\t\tthis.list = null;\n\n\t\tthis.selectedOptions = []\n\t}\n\n\t/**\n\t * An object representing component dependencies with their respective classes.\n\t * Each property in the object maps a custom component name (as a string key)\n\t * to its corresponding class or constructor.\n\t * @typedef {{[key: string]: Function}} Dependencies\n\t * @property {Function} 'wje-button' Represents the Button component class.\n\t * @property {Function} 'wje-popup' Represents the Popup component class.\n\t * @property {Function} 'wje-icon' Represents the Icon component class.\n\t * @property {Function} 'wje-label' Represents the Label component class.\n\t * @property {Function} 'wje-chip' Represents the Chip component class.\n\t * @property {Function} 'wje-input' Represents the Input component class.\n\t * @property {Function} 'wje-option' Represents the Option component class.\n\t * @property {Function} 'wje-options' Represents the Options component class.\n\t * @property {Function} 'wje-checkbox' Represents the Checkbox component class.\n\t */\n\tdependencies = {\n\t\t'wje-button': Button,\n\t\t'wje-popup': Popup,\n\t\t'wje-icon': Icon,\n\t\t'wje-label': Label,\n\t\t'wje-chip': Chip,\n\t\t'wje-input': Input,\n\t\t'wje-option': Option,\n\t\t'wje-options': Options,\n\t\t'wje-checkbox': Checkbox,\n\t};\n\n\t/**\n\t * Setter for the value attribute.\n\t * @param {string} value The value to set.\n\t */\n\tset value(value) {\n\t\tif (this.hasAttribute('multiple')) {\n\t\t\tconst formData = new FormData();\n\t\t\tvalue.forEach(v => formData.append(this.name, v));\n\t\t\tthis.internals.setFormValue(formData);\n\t\t} else {\n\t\t\tthis.internals.setFormValue(value);\n\t\t}\n\t}\n\n\t/**\n\t * Getter for the value attribute.\n\t * @returns {object} The value of the attribute.\n\t */\n\tget value() {\n\t\treturn this.selected;\n\t}\n\n\t/**\n\t * Getter for the customErrorDisplay attribute.\n\t * @returns {boolean} Whether the attribute is present.\n\t */\n\tget customErrorDisplay() {\n\t\treturn this.hasAttribute('custom-error-display');\n\t}\n\n\t/**\n\t * Getter for the validateOnChange attribute.\n\t * @returns {boolean} Whether the attribute is present.\n\t */\n\tget validateOnChange() {\n\t\treturn this.hasAttribute('validate-on-change');\n\t}\n\n\t/**\n\t * Getter for the invalid attribute.\n\t * @returns {boolean} Whether the attribute is present.\n\t */\n\tget invalid() {\n\t\treturn this.hasAttribute('invalid');\n\t}\n\n\t/**\n\t * Setter for the invalid attribute.\n\t * @param {boolean} isInvalid Whether the input is invalid.\n\t */\n\tset invalid(isInvalid) {\n\t\tif (isInvalid) this.setAttribute('invalid', '');\n\t\telse this.removeAttribute('invalid');\n\t}\n\n\t/**\n\t * Sets the maximum number of options allowed.\n\t * @param {string | number | null} value The value to set as the maximum number of options.\n\t * If null, the 'max-options' attribute will be removed.\n\t */\n\tset maxOptions(value) {\n\t\tif (value) {\n\t\t\tthis.setAttribute('max-options', value);\n\t\t} else {\n\t\t\tthis.removeAttribute('max-options');\n\t\t}\n\t}\n\n\t/**\n\t * Retrieves the maximum number of options allowed.\n\t * Parses the value of the 'max-options' attribute from the element and converts it to a number.\n\t * If the attribute is not present or cannot be converted to a valid number, defaults to 1.\n\t * @returns {number} The maximum number of options, or 0 if the attribute is not set or invalid.\n\t */\n\tget maxOptions() {\n\t\treturn +this.getAttribute('max-options') || 1;\n\t}\n\n\t/**\n\t * Getter for the form attribute.\n\t * @returns {HTMLFormElement} The form the input is associated with.\n\t */\n\tget form() {\n\t\treturn this.internals.form;\n\t}\n\n\t/**\n\t * Getter for the name attribute.\n\t * @returns {string} The name of the input.\n\t */\n\tget name() {\n\t\treturn this.getAttribute('name');\n\t}\n\n\t/**\n\t * Getter for the type attribute.\n\t * @returns {string} The type of the input.\n\t */\n\tget type() {\n\t\treturn this.localName;\n\t}\n\n\t/**\n\t * Getter for the validity attribute.\n\t * @returns {ValidityState} The validity state of the input.\n\t */\n\tget validity() {\n\t\treturn this.internals.validity;\n\t}\n\n\t/**\n\t * Getter for the validationMessage attribute.\n\t * @returns {string} The validation message of the input.\n\t */\n\tget validationMessage() {\n\t\treturn this.internals.validationMessage;\n\t}\n\n\t/**\n\t * Getter for the willValidate attribute.\n\t * @returns {boolean} Whether the input will be validated.\n\t */\n\tget willValidate() {\n\t\treturn this.internals.willValidate;\n\t}\n\n\t/**\n\t * @summary Getter for the defaultValue attribute.\n\t * This method retrieves the 'value' attribute of the custom input element.\n\t * The 'value' attribute represents the default value of the input element.\n\t * If the 'value' attribute is not set, it returns an empty string.\n\t * @returns {string} The default value of the input element.\n\t */\n\tget defaultValue() {\n\t\treturn this.getAttribute('value') ?? '';\n\t}\n\n\t/**\n\t * @summary Setter for the defaultValue attribute.\n\t * This method sets the 'value' attribute of the custom input element to the provided value.\n\t * The 'value' attribute represents the default value of the input element.\n\t * @param {string} value The value to set as the default value.\n\t */\n\tset defaultValue(value) {\n\t\tthis.setAttribute('value', value);\n\t}\n\n\t/**\n\t * Sets the label value.\n\t * @param {Array} value The selected value to set.\n\t */\n\tset selected(value) {\n\t\tthis._selected = value;\n\t}\n\n\t/**\n\t * Returns the selected value.\n\t * @returns {Array} The selected value.\n\t */\n\tget selected() {\n\t\treturn this.getSelected();\n\t}\n\n\t/**\n\t * Retrieves the complete list of options available for the component.\n\t * The options are determined by combining elements from various sources, including loaded options, added options, and HTML-sourced options.\n\t * If a `wje-options` element is present within the component, its loaded options are included in the merged list.\n\t * In the absence of a `wje-options` element, duplicates among the added and HTML options are removed, retaining their order.\n\t * @returns {Array<Object>} An array containing all the available options, combining the loaded, added, and HTML-based options, with duplicates removed where applicable.\n\t */\n\tget options() {\n\t\tif (this.querySelector('wje-options')) {\n\t\t\tconst allOptions = [...this.querySelector('wje-options').loadedOptions, ...this.#addedOptions, ...this.#htmlOptions]\n\n\t\t\treturn allOptions\n\t\t} else {\n\t\t\tconst allOptions = [...this.#addedOptions, ...this.#htmlOptions]\n\n\t\t\treturn Array.from(\n\t\t\t\tnew Map(allOptions.reverse().map(obj => [obj.value, obj])).values()\n\t\t\t).reverse();\n\t\t}\n\t}\n\n\t/**\n\t * Sets the trigger value.\n\t * @param {string} value The trigger value to set.\n\t */\n\tset trigger(value) {\n\t\tthis.setAttribute('trigger', value);\n\t}\n\n\t/**\n\t * Returns the trigger value.\n\t * @returns {string} The trigger value.\n\t */\n\tget trigger() {\n\t\treturn this.getAttribute('trigger') || 'click';\n\t}\n\n\tclassName = 'Select';\n\n\t/**\n\t * Returns the CSS styles for the component.\n\t * @static\n\t * @returns {CSSStyleSheet}\n\t */\n\tstatic get cssStyleSheet() {\n\t\treturn styles;\n\t}\n\n\t/**\n\t * Returns the list of attributes to observe for changes.\n\t * @static\n\t * @returns {Array<string>}\n\t */\n\tstatic get observedAttributes() {\n\t\treturn ['active', 'value', 'disabled', 'multiple', 'label', 'placeholder', 'max-height', 'max-options', 'variant', 'placement'];\n\t}\n\n\t/**\n\t * Whether the input is associated with a form.\n\t * @type {boolean}\n\t */\n\tstatic formAssociated = true;\n\n\t/**\n\t * Sets up the attributes for the component.\n\t */\n\tsetupAttributes() {\n\t\tthis.isShadowRoot = 'open';\n\t}\n\n\t/**\n\t * Draws the component for the select.\n\t * @returns {DocumentFragment}\n\t */\n\tdraw() {\n\t\tlet fragment = document.createDocumentFragment();\n\n\t\tthis.classList.add('wje-placement', this.placement ? 'wje-' + this.placement : 'wje-start');\n\n\t\t// zakladny obalovac\n\t\tlet native = document.createElement('div');\n\t\tnative.setAttribute('part', 'native');\n\t\tnative.classList.add('native-select', this.variant || 'default');\n\n\t\t// wrapper pre label a inputWrapper\n\t\tlet wrapper = document.createElement('div');\n\t\twrapper.classList.add('wrapper');\n\t\twrapper.setAttribute('slot', 'anchor');\n\n\t\t// label\n\t\tlet label = document.createElement('wje-label');\n\t\tlabel.setAttribute('part', 'label');\n\t\tlabel.innerText = this.label || '';\n\n\t\t// obalovac pre input\n\t\tlet inputWrapper = document.createElement('div');\n\t\tinputWrapper.setAttribute('part', 'input-wrapper');\n\t\tinputWrapper.classList.add('input-wrapper');\n\n\t\tlet slotStart = document.createElement('div');\n\t\tslotStart.classList.add('slot-start');\n\n\t\tlet input = document.createElement('input');\n\t\tinput.setAttribute('type', 'text');\n\t\tinput.setAttribute('part', 'input');\n\t\tinput.setAttribute('autocomplete', 'off');\n\t\tinput.setAttribute('readonly', '');\n\t\tinput.setAttribute('placeholder', this.placeholder || '');\n\n\t\tlet slotEnd = document.createElement('div');\n\t\tslotEnd.classList.add('slot-end');\n\n\t\tlet arrow = document.createElement('wje-icon');\n\t\tarrow.setAttribute('name', 'chevron-down');\n\t\tarrow.setAttribute('slot', 'arrow');\n\n\t\tlet chips = document.createElement('div');\n\t\tchips.classList.add('chips');\n\t\tchips.innerText = this.placeholder || '';\n\n\t\t// obalovac pre option a find\n\t\tlet optionsWrapper = document.createElement('div');\n\t\toptionsWrapper.setAttribute('part', 'options-wrapper');\n\t\toptionsWrapper.classList.add('options-wrapper');\n\t\toptionsWrapper.style.setProperty('height', this.maxHeight || 'auto');\n\n\t\tlet list = document.createElement('div');\n\t\tlist.classList.add('list');\n\n\t\tlet slot = document.createElement('slot');\n\n\t\tlet clear = document.createElement('wje-button');\n\t\tclear.setAttribute('fill', 'link');\n\t\tclear.setAttribute('part', 'clear');\n\t\tclear.setAttribute('stop-propagation', '');\n\n\t\tlet clearIcon = document.createElement('wje-icon');\n\t\tclearIcon.setAttribute('name', 'x');\n\n\t\tclear.appendChild(clearIcon);\n\n\t\t// vytvorime popup\n\t\tlet popup = document.createElement('wje-popup');\n\t\tpopup.setAttribute('placement', 'bottom-start');\n\t\tpopup.setAttribute('manual', '');\n\t\tpopup.setAttribute('size', '');\n\t\tpopup.setAttribute('part', 'popup');\n\n\t\tif (this.hasAttribute('disabled')) popup.setAttribute('disabled', '');\n\n\t\tif (this.variant === 'standard') {\n\t\t\tif (this.hasAttribute('label')) native.appendChild(label);\n\t\t} else {\n\t\t\twrapper.appendChild(label);\n\t\t}\n\n\t\tinputWrapper.appendChild(slotStart);\n\t\tinputWrapper.appendChild(input);\n\t\tif (this.hasAttribute('multiple')) inputWrapper.appendChild(chips);\n\n\t\tif (this.hasAttribute('clearable')) inputWrapper.appendChild(clear);\n\n\t\tinputWrapper.appendChild(slotEnd);\n\t\tinputWrapper.appendChild(arrow);\n\n\t\tlist.appendChild(slot);\n\n\t\tif (this.hasAttribute('find')) {\n\t\t\tlet find = document.createElement('wje-input');\n\t\t\tfind.setAttribute('variant', 'standard');\n\t\t\tfind.setAttribute('placeholder', 'Hľadať');\n\t\t\tfind.setAttribute('part', 'find');\n\t\t\tfind.classList.add('find');\n\n\t\t\toptionsWrapper.appendChild(find);\n\n\t\t\tthis.findEl = find;\n\t\t}\n\n\t\tif (this.hasAttribute('lazy')) {\n\t\t\tevent.addListener(popup, 'wje-popup:show', null, (e) => {\n\t\t\t\tif (this._wasOppened) return;\n\t\t\t\tthis._wasOppened = true;\n\n\t\t\t\tconst optionsElement = this.querySelector('wje-options');\n\t\t\t\toptionsElement.setAttribute('lazy', '');\n\t\t\t\toptionsElement.setAttribute('attached', '');\n\t\t\t});\n\t\t} else {\n\t\t\tconst optionsElement = this.querySelector('wje-options');\n\t\t\toptionsElement?.setAttribute('attached', '');\n\t\t}\n\n\t\toptionsWrapper.appendChild(list);\n\n\t\twrapper.appendChild(inputWrapper);\n\n\t\tpopup.appendChild(wrapper);\n\t\tpopup.appendChild(optionsWrapper);\n\n\t\tif (this.trigger === 'click') popup.setAttribute('manual', '');\n\n\t\tnative.appendChild(popup);\n\n\t\tthis.native = native;\n\t\tthis.popup = popup;\n\t\tthis.labelElement = label;\n\t\tthis.slotStart = slotStart;\n\t\tthis.slotEnd = slotEnd;\n\t\tthis.input = input;\n\t\tthis.optionsWrapper = optionsWrapper;\n\t\tthis.chips = chips;\n\t\tthis.clear = clear;\n\t\tthis.list = list;\n\n\t\tfragment.appendChild(native);\n\n\t\treturn fragment;\n\t}\n\n\t/**\n\t * Performs actions and binds events after the component's markup and state are initialized.\n\t * Actions include setting up event listeners, managing option elements, handling focus and blur behaviors,\n\t * synchronizing the selected options, and managing a find functionality for filtering options.\n\t * @returns {void} Does not return a value. The method operates by updating the state and behavior of the component.\n\t */\n\tafterDraw() {\n\t\tthis.getAllOptions()?.forEach((option) => {\n\t\t\tthis.optionCheckSlot(option);\n\t\t});\n\n\t\tthis.#htmlOptions = Array.from(this.querySelectorAll(':scope > wje-option')).map((option) => {\n\t\t\treturn {\n\t\t\t\tvalue: option.value,\n\t\t\t\ttext: option.textContent.trim(),\n\t\t\t};\n\t\t})\n\n\t\tthis.input.addEventListener('focus', (e) => {\n\t\t\tthis.labelElement?.classList.add('fade');\n\t\t\tthis.native.classList.add('focused');\n\t\t});\n\n\t\tthis.input.addEventListener('blur', (e) => {\n\t\t\tthis.native.classList.remove('focused');\n\t\t\tif (!e.target.value) this.labelElement?.classList.remove('fade');\n\t\t});\n\n\t\tthis.addEventListener('wje-option:change', this.optionChange);\n\n\t\t// pridame event listener na kliknutie na button clear\n\t\tthis.clear?.addEventListener('wje-button:click', (e) => {\n\t\t\te.preventDefault();\n\t\t\te.stopPropagation();\n\t\t\tthis.selectedOptions = [];\n\n\t\t\tthis.getAllOptions().forEach((option) => {\n\t\t\t\toption.selected = false;\n\t\t\t});\n\t\t\tthis.selections();\n\n\t\t\te.stopPropagation();\n\t\t});\n\n\t\tthis.selectedOptions = this.getSelectedOptions();\n\t\tthis.selections(true);\n\n\t\tthis.list.addEventListener('wje-options:load', (e) => {\n\t\t\t// todo select options from this.selectedOptions\n\t\t\tthis.selectedOptions.forEach((option) => {\n\t\t\t\tthis.getAllOptions().forEach((el) => {\n\t\t\t\t\tif (el.value === option.value) {\n\t\t\t\t\t\tel.selected = true;\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t})\n\n\t\t\tthis.list.scrollTo(0, 0);\n\t\t});\n\n\t\t// skontrolujeme ci ma select atribut find\n\t\tif (this.hasAttribute('find') && this.findEl instanceof HTMLElement) {\n\t\t\tevent.addListener(this.findEl, 'keyup', '', (e) => {\n\t\t\t\t// contains wj-options element with options\n\t\t\t\tconst optionsElement = this.querySelector('wje-options');\n\t\t\t\tif (optionsElement && optionsElement.hasAttribute('lazy')) {\n\t\t\t\t\t// pass search value to wj-options element and infinite scroll will handle the rest\n\t\t\t\t\toptionsElement.setAttribute('search', e.target.value);\n\t\t\t\t} else {\n\t\t\t\t\tlet value = e.target.value.trim().toLowerCase();\n\n\t\t\t\t\tthis.getAllOptions().forEach((option) => {\n\t\t\t\t\t\tif (option.textContent.trim().toLowerCase().includes(value)) option.style.display = 'block';\n\t\t\t\t\t\telse option.style.display = 'none';\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\t}\n\n\t/**\n\t * Handles the option change event.\n\t * @param {Event} e The event.\n\t */\n\toptionChange = (e) => {\n\t\te.preventDefault();\n\t\te.stopPropagation();\n\t\te.stopImmediatePropagation();\n\n\t\tlet allOptions = this.getAllOptions();\n\n\t\tif (!this.hasAttribute('multiple')) {\n\t\t\tallOptions.forEach((option) => {\n\t\t\t\tif (option.value === e.target.value) {\n\t\t\t\t\tthis.processClickedOption(option);\n\t\t\t\t} else {\n\t\t\t\t\toption.selected = false;\n\t\t\t\t}\n\t\t\t});\n\t\t\tthis.popup.hide(false);\n\t\t} else {\n\t\t\tthis.processClickedOption(e.target, true);\n\t\t}\n\n\t\tthis.selections();\n\t};\n\n\t/**\n\t * Handles the selection and deselection of an option element.\n\t * @param {HTMLElement} option The option element that was clicked.\n\t * @param {boolean} [multiple] Indicates whether multiple selection is allowed.\n\t */\n\tprocessClickedOption = (option, multiple = false) => {\n\t\tconst isSelected = option.hasAttribute('selected');\n\t\toption.selected = !isSelected;\n\n\t\tif (isSelected) {\n\t\t\tthis.filterOutOption(option);\n\t\t} else {\n\t\t\tthis.selectedOptions = multiple ? [...this.selectedOptions, option] : [option];\n\t\t}\n\t}\n\n\t/**\n\t * Filters out a specified option from the `selectedOptions` array.\n\t * This function removes an option from the `selectedOptions` array if its value\n\t * matches the value of the option provided as an argument. It allows for dynamically\n\t * updating the selected options by excluding the specified option.\n\t * @param {object} option The option to be removed from the `selectedOptions` array.\n\t * Should be an object containing a `value` property that is compared to the\n\t * `value` property of objects in the `selectedOptions` array.\n\t */\n\tfilterOutOption = (option) => {\n\t\tthis.selectedOptions = this.selectedOptions.filter((sOption) => {\n\t\t\treturn sOption.value !== option.value;\n\t\t});\n\t}\n\n\t/**\n\t * Returns all the options as HTML.\n\t * @returns {NodeList} The options as HTML.\n\t */\n\tgetAllOptions() {\n\t\treturn this.querySelectorAll('wje-option');\n\t}\n\n\t/**\n\t * Returns the selected options as HTML.\n\t * @returns {NodeList} The selected options as HTML.\n\t */\n\tgetSelectedOptions() {\n\t\treturn Array.from(this.querySelectorAll('wje-option[selected]'));\n\t}\n\n\t/**\n\t * Returns the selected options.\n\t * @returns {Array} The selected options.\n\t */\n\tgetSelected() {\n\t\treturn this.selectedOptions.map((option) => {\n\t\t\treturn {\n\t\t\t\tvalue: option.value,\n\t\t\t\ttext: this.#htmlSelectedItem(option.value) // option.textContent.trim(),\n\t\t\t};\n\t\t});\n\t}\n\n\t/**\n\t * Handles the selection change.\n\t * @param {Element[]} options The option that changed.\n\t * @param {number} length The length of the selected options.\n\t */\n\tselectionChanged(options = null, length = 0) {\n\t\tif (this.hasAttribute('multiple')) {\n\n\t\t\tthis.value = this.selectedOptions.map((el) => el.value).reverse();\n\n\t\t\tif (this.placeholder && length === 0) {\n\t\t\t\tthis.chips.innerHTML = this.placeholder;\n\t\t\t\tthis.input.value = '';\n\t\t\t} else {\n\t\t\t\tif (options !== null) Array.from(options).slice(0, +this.maxOptions).forEach(option => this.chips.appendChild(this.getChip(option)));\n\t\t\t\tif (this.counterEl instanceof HTMLElement || !this.maxOptions || length > +this.maxOptions) {\n\t\t\t\t\tthis.counter();\n\t\t\t\t}\n\t\t\t}\n\t\t} else {\n\t\t\tlet option = options?.at(0);\n\t\t\tlet value = (option && this.#htmlSelectedItem(option.value)) ?? \"\"  // option?.textContent.trim() || '';\n\t\t\tthis.value = this.selectedOptions?.map((el) => el.value)?.at(0);\n\t\t\tthis.input.value = value;\n\n\t\t\tif (option && option instanceof HTMLElement) {\n\t\t\t\tthis.slotStart.innerHTML = '';\n\n\t\t\t\tlet optionSlotStart = option?.querySelector('wje-option > [slot=start]');\n\t\t\t\tif (optionSlotStart) {\n\t\t\t\t\tthis.slotStart.appendChild(optionSlotStart.cloneNode(true));\n\t\t\t\t}\n\n\t\t\t\tthis.slotEnd.innerHTML = '';\n\n\t\t\t\tlet optionSlotEnd = option?.querySelector('wje-option > [slot=end]');\n\t\t\t\tif (optionSlotEnd) {\n\t\t\t\t\tthis.slotEnd.appendChild(optionSlotEnd.cloneNode(true));\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Updates the selected options and their corresponding chips.\n\t * @param {boolean} [silence] Determines whether to suppress the \"wje-select:change\" event.\n\t * @returns {void}\n\t * @description\n\t * This method fetches the currently selected options and updates the `selectedOptions` array.\n\t * It clears and rebuilds the chips representing the selected items in the UI.\n\t * If the number of selected options reaches the maximum allowed (`maxOptions`), it stops updating the counter.\n\t * Optionally, it dispatches a custom event when the selection changes unless `silence` is set to `true`.\n\t * //@fires wje-select:change - Dispatched when the selection changes, unless `silence` is `true`.\n\t * @example\n\t * // Call the method and allow event dispatch\n\t * selections();\n\t * @example\n\t * // Call the method without dispatching the event\n\t * selections(true);\n\t */\n\tselections(silence = false) {\n\t\tif (this.selectedOptions.length >= +this.maxOptions) {\n\t\t\tthis.counterEl = null;\n\t\t}\n\n\t\tif (this.chips) {\n\t\t\tthis.chips.innerHTML = '';\n\t\t}\n\n\t\tif (this.selectedOptions.length > 0) {\n\t\t\tthis.selectionChanged(this.selectedOptions, this.selectedOptions.length);\n\n\t\t} else {\n\t\t\tthis.selectionChanged();\n\t\t}\n\n\t\tif (silence) return;\n\t\tevent.dispatchCustomEvent(this, 'wje-select:change');\n\t}\n\n\t/**\n\t * Manages the display of a counter element to indicate the number of items exceeding the maximum allowed options.\n\t * - If the number of selected items equals the maximum allowed, the counter element is removed.\n\t * - If the counter element doesn't exist and the number of items exceeds the maximum, it is created and updated.\n\t */\n\tcounter() {\n\t\t// zmazanie counter (span)\n\t\tif (this.counterEl && this.value.length === +this.maxOptions) {\n\t\t\tthis.counterEl.remove();\n\t\t\tthis.counterEl = null;\n\t\t\treturn;\n\t\t}\n\n\t\t// ak counter nie je, tak ho vytvorime\n\t\tif (!this.counterEl) {\n\t\t\tthis.counterEl = document.createElement('span');\n\t\t\tthis.counterEl.classList.add('counter');\n\n\t\t\tthis.chips.appendChild(this.counterEl);\n\t\t}\n\n\t\t// nastavime hodnotu counter\n\t\tthis.counterEl.innerText = `+${this.value.length - +this.maxOptions}`;\n\t}\n\n\t/**\n\t * Returns a chip element.\n\t * @param {Element} option The option to get the chip for.\n\t * @returns {Element} The chip element.\n\t */\n\tgetChip(option) {\n\t\tlet chip = document.createElement('wje-chip');\n\t\tchip.size = 'small';\n\t\tchip.removable = true;\n\t\tchip.round = true;\n\t\tchip.addEventListener('wje:chip-remove', this.removeChip);\n\t\tchip.option = option;\n\n\t\tlet label = document.createElement('wje-label');\n\t\tlabel.innerText = this.#htmlSelectedItem(option.value) // option.textContent.trim();\n\n\t\tchip.appendChild(label);\n\n\t\treturn chip;\n\t}\n\n\t/**\n\t * Handles the chip remove event.\n\t * @param {Event} e The event.\n\t */\n\tremoveChip = (e) => {\n\t\te.target.parentNode.removeChild(e.target);\n\t\tthis.processClickedOption(e.target.option, true);\n\t\tthis.selections();\n\t};\n\n\t/**\n\t * Generates an HTML option element based on the provided item and mapping.\n\t * @param {object} item The item to generate the option for.\n\t * @param {object} [map] The mapping object that specifies the properties of the item to use for the option's value and text.\n\t * @param {string} [map.value] The property of the item to use for the option's value.\n\t * @param {string} [map.text] The property of the item to use for the option's text.\n\t * @returns {HTMLElement} The generated HTML option element.\n\t */\n\thtmlOption(item, map = { value: 'value', text: 'text' }) {\n\t\tlet option = document.createElement('wje-option');\n\n\t\tif (item[map.value] === null) {\n\t\t\tconsole.warn(`The item ${JSON.stringify(item)} does not have the property ${map.value}`);\n\t\t}\n\n\t\tif (item[map.text] === null) {\n\t\t\tconsole.warn(`The item ${JSON.stringify(item)} does not have the property ${map.text}`);\n\t\t}\n\n\t\toption.setAttribute('value', item[map.value] ?? '');\n\t\toption.innerText = item[map.text] ?? '';\n\n\t\tthis.#addedOptions.push({ [map.value]: item[map.value], [map.text]: item[map.text] });\n\t\treturn option;\n\t}\n\n\t/**\n\t * Adds an option to the select element.\n\t * @param {any} optionData The data for the option to be added.\n\t * @param {boolean} [silent] Whether to suppress any events triggered by the addition of the option.\n\t * @param {object} [map] The mapping object specifying the properties of the option data to be used for the value and text of the option.\n\t */\n\taddOption(optionData, silent = false, map = { value: 'value', text: 'text' }) {\n\t\tif (!optionData) return;\n\n\t\tconst optionsElement = this.querySelector('wje-options');\n\t\tif (optionsElement) {\n\t\t\toptionsElement.addOption(optionData, silent, map);\n\t\t\treturn;\n\t\t}\n\t\tlet option = this.htmlOption(optionData, map);\n\t\tthis.appendChild(option);\n\t}\n\n\t/**\n\t * Adds options to the select element.\n\t * @param {Array | object} optionsData The options data to be added. Can be an array of objects or a single object.\n\t * @param {boolean} [silent] Indicates whether to trigger events when adding options. Default is false.\n\t * @param {object} [map] The mapping object that specifies the properties of the options data object. Default is { value: \"value\", text: \"text\" }.\n\t */\n\taddOptions(optionsData, silent = false, map = { value: 'value', text: 'text' }) {\n\t\tif (!Array.isArray(optionsData)) {\n\t\t\tthis.addOption(optionsData, silent, map);\n\t\t} else {\n\t\t\tconst optionsElement = this.querySelector('wje-options');\n\t\t\tif (optionsElement) {\n\t\t\t\toptionsElement.addOptions(optionsData, silent, map);\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\toptionsData.forEach((item) => {\n\t\t\t\tthis.addOption(item, silent, map);\n\t\t\t});\n\t\t}\n\t}\n\n\t/**\n\t * Selects an option with the specified value.\n\t * @param {string} value The value of the option to be selected.\n\t * @param {boolean} [silent] Whether to suppress firing events.\n\t */\n\tselectOption(value, silent = false) {\n\t\tif (!value) return;\n\n\t\tlet option = this.querySelector(`wje-option[value=\"${value}\"]`);\n\n\t\tif (option) {\n\t\t\tthis.processClickedOption(option, this.hasAttribute('multiple'));\n\t\t}\n\n\t\tif (this.drawingStatus > this.drawingStatuses.START) this.selections(silent);\n\t}\n\n\t/**\n\t * Selects one or multiple options in the select element.\n\t * @param {Array|any} values The value(s) of the option(s) to be selected.\n\t * @param {boolean} [silent] Whether to trigger the change event or not.\n\t */\n\tselectOptions(values, silent = false) {\n\t\tif (!Array.isArray(values)) {\n\t\t\tthis.selectOption(values, silent);\n\t\t} else {\n\t\t\tvalues.forEach((value) => {\n\t\t\t\tthis.selectOption(value, silent);\n\t\t\t});\n\t\t}\n\t}\n\n\t/**\n\t * Processes the provided item to retrieve its corresponding value and text\n\t * based on the configuration of `wje-options`, then updates and returns\n\t * the selected item's HTML representation.\n\t * @param {any} item The input item for which the value and text are determined.\n\t * @returns {string} The HTML representation of the selected item's value.\n\t */\n\t#htmlSelectedItem(item) {\n\t\tconst keyValue = this.querySelector(\"wje-options\")?.itemValue ?? \"value\"\n\t\tconst textValue = this.querySelector(\"wje-options\")?.itemText ?? \"text\"\n\n\t\tconst value = this.options\n\t\t\t.find((option) => option[keyValue] === item)?.[textValue] ?? \"\";\n\n\t\treturn this.htmlSelectedItem(value);\n\t}\n\n\t/**\n\t * Returns the provided item.\n\t * @param {any} item The item to be returned.\n\t * @returns {any} The same item that was passed as input.\n\t */\n\thtmlSelectedItem(item) {\n\t\treturn item;\n\t}\n\n\t/**\n\t * @summary Callback function that is called when the custom element is associated with a form.\n\t * This function adds an event listener to the form's submit event, which validates the input and propagates the validation.\n\t * @param {HTMLFormElement} form The form the custom element is associated with.\n\t */\n\tformAssociatedCallback(form) {\n\t\tif (form) {\n\t\t\tthis.internals.setFormValue(this.value);\n\t\t}\n\t}\n\n\t/**\n\t * The formResetCallback method is a built-in lifecycle callback that gets called when a form gets reset.\n\t * This method is responsible for resetting the value of the custom input element to its default value.\n\t * It also resets the form value and validity state in the form internals.\n\t * @function\n\t */\n\tformResetCallback() {\n\t\t// Set the value of the custom input element to its default value\n\t\tthis.value = this.defaultValue;\n\t\t// Reset the form value in the form internals to the default value\n\t\tthis.internals.setFormValue(this.defaultValue);\n\t\t// Reset the validity state in the form internals\n\t\tthis.internals.setValidity({});\n\t}\n\n\t/**\n\t * The formStateRestoreCallback method is a built-in lifecycle callback that gets called when the state of a form-associated custom element is restored.\n\t * This method is responsible for restoring the value of the custom input element to its saved state.\n\t * It also restores the form value and validity state in the form internals to their saved states.\n\t * @param {object} state The saved state of the custom input element.\n\t * @function\n\t */\n\tformStateRestoreCallback(state) {\n\t\t// Set the value of the custom input element to its saved value\n\t\tthis.value = state.value;\n\t\t// Restore the form value in the form internals to the saved value\n\t\tthis.internals.setFormValue(state.value);\n\t\t// Restore the validity state in the form internals to the saved state\n\t\tthis.internals.setValidity({});\n\t}\n\n\t/**\n\t * The formStateSaveCallback method is a built-in lifecycle callback that gets called when the state of a form-associated custom element is saved.\n\t * This method is responsible for saving the value of the custom input element.\n\t * @returns {object} The saved state of the custom input element.\n\t * @function\n\t */\n\tformStateSaveCallback() {\n\t\treturn {\n\t\t\tvalue: this.value,\n\t\t};\n\t}\n\n\t/**\n\t * The formDisabledCallback method is a built-in lifecycle callback that gets called when the disabled state of a form-associated custom element changes.\n\t * This method is not implemented yet.\n\t * @param {boolean} disabled The new disabled state of the custom input element.\n\t * @function\n\t */\n\tformDisabledCallback(disabled) {\n\t\tconsole.warn('formDisabledCallback not implemented yet');\n\t\tthis.native?.classList.toggle('disabled', disabled);\n\t\tthis.toggleAttribute('disabled', disabled);\n\t}\n\n\t/**\n\t * Checks if all elements in the `elements` array are present in the `options` array based on their `option` property.\n\t * @param {Array} elements The array of elements to check. Each element should have an `option` property.\n\t * @param {Array} options The array of options to verify against.\n\t * @returns {boolean} Returns true if all elements in the `elements` array are found within the `options` array, otherwise returns false.\n\t */\n\tareAllElementsInOptions(elements, options) {\n\t\tif (elements.length === 0) return false;\n\n\t\treturn elements.every(el =>\n\t\t\toptions.some(opt => JSON.stringify(opt) === JSON.stringify(el.option))\n\t\t);\n\t}\n\n\t/**\n\t * Clones and appends an icon from a template with slot \"check\" to the given option element.\n\t * @param {HTMLElement} option The target option element where the \"check\" icon will be added.\n\t * @returns {void}\n\t */\n\toptionCheckSlot(option) {\n\t\tlet icon = this.querySelector('template')?.content.querySelector(`[slot=\"check\"]`);\n\t\tif (!icon) {\n\t\t\tconsole.warn(`Icon with slot \"check\" was not found.`);\n\t\t\treturn;\n\t\t}\n\n\t\tlet iconClone = icon.cloneNode(true);\n\t\toption.append(iconClone);\n\t}\n}\n","import Select from './select.element.js';\n\nexport default Select;\n\nSelect.define('wje-select', Select);\n"],"names":["_a"],"mappings":"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"}

package/dist/wje-split-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-split-view.js","sources":["../packages/wje-split-view/service/service.js","../packages/wje-split-view/split-view.element.js","../packages/wje-split-view/split-view.js"],"sourcesContent":["export function drag(container, options) {\n    function move(pointerEvent) {\n        const dims = container.getBoundingClientRect();\n        const defaultView = container.ownerDocument.defaultView;\n        const offsetX = dims.left + defaultView.pageXOffset;\n        const offsetY = dims.top + defaultView.pageYOffset;\n        const x = pointerEvent.pageX - offsetX;\n        const y = pointerEvent.pageY - offsetY;\n        if (options?.onMove) {\n            options.onMove(x, y);\n        }\n    }\n\n    function stop() {\n        document.removeEventListener('pointermove', move);\n        document.removeEventListener('pointerup', stop);\n\n        if (options?.onStop) {\n            options.onStop();\n        }\n    }\n\n    document.addEventListener('pointermove', move, { passive: true });\n    document.addEventListener('pointerup', stop);\n\n    if (options?.initialEvent instanceof PointerEvent) {\n        move(options.initialEvent);\n    }\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport { drag } from './service/service.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `SplitView` is a custom web component that represents a split view.\n * @summary This element represents a split view.\n * @documentation https://elements.webjet.sk/components/split-view\n * @status stable\n * @augments WJElement\n * @slot start - Slot for the start view.\n * @slot end - Slot for the end view.\n * @slot divider - Slot for the divider.\n * @csspart native-split-view - The native split view wrapper.\n * @csspart wje-divider - The divider of the split view.\n * @cssproperty [--wje-split-view-divider-area=12px] - Defines the interactive area (hitbox) of the divider for resizing. Accepts any valid CSS length unit (e.g., `px`, `rem`, `%`).\n * @cssproperty [--wje-split-view-divider-width=4px] - Specifies the visual width of the divider. Controls how thick the divider appears.\n * @cssproperty [--wje-split-view-min=0%] - Sets the minimum size limit for the split views. Ensures that a view cannot be resized below this value.\n * @cssproperty [--wje-split-view-max=100%] - Sets the maximum size limit for the split views. Ensures that a view cannot be resized beyond this value.\n * @cssproperty [--wje-split-view-calc-a=50%] - Represents the calculated size of the first view. This is used to dynamically set the size of the first view.\n * @cssproperty [--wje-split-view-calc-b=50%] - Represents the calculated size of the second view. This is used to dynamically set the size of the second view.\n * @cssproperty [--wje-split-view-clamp-a=clamp(var(--wje-split-view-min), var(--wje-split-view-calc-a), var(--wje-split-view-max))] - Clamps the size of the first view between minimum and maximum limits. Ensures the calculated size stays within the defined range.\n * @cssproperty [--wje-split-view-clamp-b=clamp(var(--wje-split-view-min), var(--wje-split-view-calc-b), var(--wje-split-view-max))] - Clamps the size of the second view between minimum and maximum limits. Ensures the calculated size stays within the defined range.\n * @cssproperty [--wje-split-view-divider-background=var(--wje-border-color)] - Sets the background color of the divider. Accepts any valid CSS color value (e.g., hex, RGB, or CSS variable).\n * @cssproperty [--wje-split-view-divider-size=4px] - Defines the overall size of the divider, affecting both its visual and interactive dimensions. Accepts any valid CSS length unit.\n * @tag wje-split-view\n */\n\nexport default class SplitView extends WJElement {\n    /**\n     * Creates an instance of SplitView.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    set initial(value) {\n        this.setAttribute('initial', value);\n    }\n\n    get initial() {\n        return +this.getAttribute('initial') || 50;\n    }\n\n    className = 'SplitView';\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 the list of attributes to observe for changes.\n     * @static\n     * @returns {Array<string>}\n     */\n    static get observedAttributes() {\n        return [];\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 split view.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native-split-view');\n\n        let start = document.createElement('slot');\n        start.setAttribute('name', 'start');\n\n        let end = document.createElement('slot');\n        end.setAttribute('name', 'end');\n\n        let divider = document.createElement('slot');\n        divider.setAttribute('name', 'divider');\n\n        let dividerElement = document.createElement('div');\n        dividerElement.classList.add('wje-divider');\n        dividerElement.setAttribute('part', 'divider');\n        dividerElement.appendChild(divider);\n        dividerElement.addEventListener('mousedown', this.handleDrag, false);\n\n        native.appendChild(start);\n        native.appendChild(dividerElement);\n        native.appendChild(end);\n\n        fragment.appendChild(native);\n\n        return fragment;\n    }\n\n    /**\n     * Sets up the event listeners after the component is drawn.\n     */\n    afterDraw() {\n        this.detectSize();\n\n        if (this.min) this.style.setProperty('--wje-split-view-min', this.pixelsToPercentage(this.min) + '%');\n\n        if (this.max) this.style.setProperty('--wje-split-view-max', 100 - this.pixelsToPercentage(this.max) + '%');\n\n        if (this.initial) {\n            this.style.setProperty('--wje-split-view-calc-a', this.pixelsToPercentage(this.initial) + '%');\n            this.style.setProperty('--wje-split-view-calc-b', 100 - this.pixelsToPercentage(this.initial) + '%');\n        }\n\n        this.resizeObserver = new ResizeObserver((entries) => this.handleResize(entries));\n    }\n\n    /**\n     * Handles the drag event.\n     * @param {Event} e The event object.\n     */\n    handleDrag = (e) => {\n        if (this.hasAttribute('disabled')) return;\n\n        drag(this, {\n            onMove: (x, y) => {\n                let newPositionInPixels = this.hasAttribute('vertical') ? y : x;\n                let sizeA = this.pixelsToPercentage(newPositionInPixels);\n                let sizeB = 100 - this.pixelsToPercentage(newPositionInPixels);\n\n                this.style.setProperty('--wje-split-view-calc-a', sizeA + '%');\n                this.style.setProperty('--wje-split-view-calc-b', sizeB + '%');\n            },\n            initialEvent: e,\n        });\n    };\n\n    /**\n     * Detects the size of the split view.\n     */\n    detectSize() {\n        const { width, height } = this.getBoundingClientRect();\n\n        this.size = this.hasAttribute('vertical') ? height : width;\n    }\n\n    /**\n     * Converts pixels to a percentage.\n     * @param {number} value The pixel value.\n     * @returns {number} The percentage value.\n     */\n    pixelsToPercentage(value) {\n        return (value / this.size) * 100;\n    }\n}\n","import SplitView from './split-view.element.js';\n\nexport default SplitView;\n\nSplitView.define('wje-split-view', SplitView);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-split-view.js","sources":["../packages/wje-split-view/service/service.js","../packages/wje-split-view/split-view.element.js","../packages/wje-split-view/split-view.js"],"sourcesContent":["export function drag(container, options) {\n    function move(pointerEvent) {\n        const dims = container.getBoundingClientRect();\n        const defaultView = container.ownerDocument.defaultView;\n        const offsetX = dims.left + defaultView.pageXOffset;\n        const offsetY = dims.top + defaultView.pageYOffset;\n        const x = pointerEvent.pageX - offsetX;\n        const y = pointerEvent.pageY - offsetY;\n        if (options?.onMove) {\n            options.onMove(x, y);\n        }\n    }\n\n    function stop() {\n        document.removeEventListener('pointermove', move);\n        document.removeEventListener('pointerup', stop);\n\n        if (options?.onStop) {\n            options.onStop();\n        }\n    }\n\n    document.addEventListener('pointermove', move, { passive: true });\n    document.addEventListener('pointerup', stop);\n\n    if (options?.initialEvent instanceof PointerEvent) {\n        move(options.initialEvent);\n    }\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport { drag } from './service/service.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `SplitView` is a custom web component that represents a split view.\n * @summary This element represents a split view.\n * @documentation https://elements.webjet.sk/components/split-view\n * @status stable\n * @augments WJElement\n * @slot start - Slot for the start view.\n * @slot end - Slot for the end view.\n * @slot divider - Slot for the divider.\n * @csspart wje-divider - The divider of the split view.\n * @cssproperty [--wje-split-view-divider-area=12px] - Defines the interactive area (hitbox) of the divider for resizing. Accepts any valid CSS length unit (e.g., `px`, `rem`, `%`).\n * @cssproperty [--wje-split-view-divider-width=4px] - Specifies the visual width of the divider. Controls how thick the divider appears.\n * @cssproperty [--wje-split-view-min=0%] - Sets the minimum size limit for the split views. Ensures that a view cannot be resized below this value.\n * @cssproperty [--wje-split-view-max=100%] - Sets the maximum size limit for the split views. Ensures that a view cannot be resized beyond this value.\n * @cssproperty [--wje-split-view-calc-a=50%] - Represents the calculated size of the first view. This is used to dynamically set the size of the first view.\n * @cssproperty [--wje-split-view-calc-b=50%] - Represents the calculated size of the second view. This is used to dynamically set the size of the second view.\n * @cssproperty [--wje-split-view-clamp-a=clamp(var(--wje-split-view-min), var(--wje-split-view-calc-a), var(--wje-split-view-max))] - Clamps the size of the first view between minimum and maximum limits. Ensures the calculated size stays within the defined range.\n * @cssproperty [--wje-split-view-clamp-b=clamp(var(--wje-split-view-min), var(--wje-split-view-calc-b), var(--wje-split-view-max))] - Clamps the size of the second view between minimum and maximum limits. Ensures the calculated size stays within the defined range.\n * @cssproperty [--wje-split-view-divider-background=var(--wje-border-color)] - Sets the background color of the divider. Accepts any valid CSS color value (e.g., hex, RGB, or CSS variable).\n * @cssproperty [--wje-split-view-divider-size=4px] - Defines the overall size of the divider, affecting both its visual and interactive dimensions. Accepts any valid CSS length unit.\n * @tag wje-split-view\n */\n\nexport default class SplitView extends WJElement {\n    /**\n     * Creates an instance of SplitView.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    set initial(value) {\n        this.setAttribute('initial', value);\n    }\n\n    get initial() {\n        return +this.getAttribute('initial') || 50;\n    }\n\n    className = 'SplitView';\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 the list of attributes to observe for changes.\n     * @static\n     * @returns {Array<string>}\n     */\n    static get observedAttributes() {\n        return [];\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 split view.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native-split-view');\n\n        let start = document.createElement('slot');\n        start.setAttribute('name', 'start');\n\n        let end = document.createElement('slot');\n        end.setAttribute('name', 'end');\n\n        let divider = document.createElement('slot');\n        divider.setAttribute('name', 'divider');\n\n        let dividerElement = document.createElement('div');\n        dividerElement.classList.add('wje-divider');\n        dividerElement.setAttribute('part', 'divider');\n        dividerElement.appendChild(divider);\n        dividerElement.addEventListener('mousedown', this.handleDrag, false);\n\n        native.appendChild(start);\n        native.appendChild(dividerElement);\n        native.appendChild(end);\n\n        fragment.appendChild(native);\n\n        return fragment;\n    }\n\n    /**\n     * Sets up the event listeners after the component is drawn.\n     */\n    afterDraw() {\n        this.detectSize();\n\n        if (this.min) this.style.setProperty('--wje-split-view-min', this.pixelsToPercentage(this.min) + '%');\n\n        if (this.max) this.style.setProperty('--wje-split-view-max', 100 - this.pixelsToPercentage(this.max) + '%');\n\n        if (this.initial) {\n            this.style.setProperty('--wje-split-view-calc-a', this.pixelsToPercentage(this.initial) + '%');\n            this.style.setProperty('--wje-split-view-calc-b', 100 - this.pixelsToPercentage(this.initial) + '%');\n        }\n\n        this.resizeObserver = new ResizeObserver((entries) => this.handleResize(entries));\n    }\n\n    /**\n     * Handles the drag event.\n     * @param {Event} e The event object.\n     */\n    handleDrag = (e) => {\n        if (this.hasAttribute('disabled')) return;\n\n        drag(this, {\n            onMove: (x, y) => {\n                let newPositionInPixels = this.hasAttribute('vertical') ? y : x;\n                let sizeA = this.pixelsToPercentage(newPositionInPixels);\n                let sizeB = 100 - this.pixelsToPercentage(newPositionInPixels);\n\n                this.style.setProperty('--wje-split-view-calc-a', sizeA + '%');\n                this.style.setProperty('--wje-split-view-calc-b', sizeB + '%');\n            },\n            initialEvent: e,\n        });\n    };\n\n    /**\n     * Detects the size of the split view.\n     */\n    detectSize() {\n        const { width, height } = this.getBoundingClientRect();\n\n        this.size = this.hasAttribute('vertical') ? height : width;\n    }\n\n    /**\n     * Converts pixels to a percentage.\n     * @param {number} value The pixel value.\n     * @returns {number} The percentage value.\n     */\n    pixelsToPercentage(value) {\n        return (value / this.size) * 100;\n    }\n}\n","import SplitView from './split-view.element.js';\n\nexport default SplitView;\n\nSplitView.define('wje-split-view', SplitView);\n"],"names":[],"mappings":"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"}

package/dist/wje-textarea.js

@@ -218,8 +218,8 @@ class Textarea extends WJElement {
   afterDraw() {
     this.resizeObserver = new ResizeObserver(() => this.setTextareaHeight);
     if (!this.hasAttribute("disabled")) {
-      event.addListener(this, "click", "wje:textarea:change");
-      event.addListener(this, "click", "wje:textarea:input");
+      event.addListener(this, "click", "wje-textarea:change");
+      event.addListener(this, "click", "wje-textarea:input");
     }
     this.input.addEventListener("focus", (e) => {
       this.labelElement.classList.add("fade");

package/dist/wje-textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-textarea.js","sources":["../packages/wje-textarea/textarea.element.js","../packages/wje-textarea/textarea.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Textarea` is a custom web component that represents a textarea input.\n * @summary This element represents a textarea input.\n * @documentation https://elements.webjet.sk/components/textarea\n * @status stable\n * @augments WJElement\n * @csspart native - The native textarea wrapper.\n * @csspart input - The textarea input.\n * @csspart wrapper - The textarea wrapper.\n * @cssproperty [--wje-textarea-font-family=var(--wje-font-family)] - Specifies the font family used for the textarea. Accepts any valid CSS font-family value.\n * @cssproperty [--wje-textarea-background-color=var(--wje-background)] - Sets the background color of the textarea. Accepts any valid CSS color value.\n * @cssproperty [--wje-textarea-color=var(--wje-color)] - Defines the text color within the textarea. Accepts any valid CSS color value.\n * @cssproperty [--wje-textarea-color-invalid=var(--wje-color-danger)] - Changes the text color of the textarea when it is invalid. Useful for highlighting validation errors.\n * @cssproperty [--wje-textarea-border-width=1px] - Specifies the width of the textarea's border. Accepts any valid CSS length unit.\n * @cssproperty [--wje-textarea-border-style=solid] - Sets the style of the textarea's border. Accepts standard CSS border styles such as `solid`, `dashed`, or `dotted`.\n * @cssproperty [--wje-textarea-border-color=var(--wje-border-color)] - Defines the border color of the textarea. Accepts any valid CSS color value.\n * @cssproperty [--wje-textarea-border-color-focus=var(--wje-color-primary)] - Specifies the border color of the textarea when it is focused. Enhances the user experience by providing visual feedback.\n * @cssproperty [--wje-textarea-border-radius=4px] - Determines the border radius of the textarea, defining how rounded its corners are. Accepts any valid CSS length unit.\n * @cssproperty [--wje-textarea-margin-bottom=.5rem] - Sets the bottom margin of the textarea. Ensures spacing between the textarea and other elements.\n * @cssproperty [--wje-textarea-line-height=20px] - Specifies the line height of the text within the textarea. Helps control the vertical spacing of the text.\n * @cssproperty [--wje-textarea-padding=0.5rem] - Defines the padding inside the textarea. Controls the spacing between the content and the border.\n * @tag wje-textarea\n */\n\nexport default class Textarea extends WJElement {\n    /**\n     * Creates an instance of Textarea.\n     * @class\n     */\n    constructor() {\n        super();\n\n        this.invalid = false;\n        this.pristine = true;\n        this.internals = this.attachInternals();\n        this.observer = new MutationObserver(this.observeFunction);\n    }\n\n    observeFunction = (mutations) => {\n        mutations.forEach((mutation) => {\n            if (mutation.type === 'attributes') {\n                const attributeName = mutation.attributeName;\n                const oldValue = mutation.oldValue;\n                const newValue = this.getAttribute(attributeName);\n\n                console.log(`Attribute ${attributeName} changed from ${oldValue} to ${newValue}`);\n            }\n        });\n\n        this.refresh();\n    };\n\n    /**\n     * Setter for the value attribute.\n     * @param {string} value The value to set.\n     */\n    set value(value) {\n        this.internals.setFormValue(value);\n\n        if (this.input) this.input.value = value;\n\n        this.pristine = false;\n        this._value = value;\n    }\n\n    /**\n     * Getter for the value attribute.\n     * @returns {string} The value of the attribute.\n     */\n    get value() {\n        return this.input?.value ?? this._value ?? '';\n    }\n\n    /**\n     * Getter for the invalid attribute.\n     * @returns {boolean} Whether the attribute is present.\n     */\n    get invalid() {\n        return this.hasAttribute('invalid');\n    }\n\n    /**\n     * Setter for the invalid attribute.\n     * @param {boolean} isInvalid Whether the input is invalid.\n     */\n    set invalid(isInvalid) {\n        if (isInvalid) this.setAttribute('invalid', '');\n        else this.removeAttribute('invalid');\n    }\n\n    /**\n     * Getter for the form attribute.\n     * @returns {HTMLFormElement} The form the input is associated with.\n     */\n    get form() {\n        return this.internals.form;\n    }\n\n    /**\n     * Getter for the name attribute.\n     * @returns {string} The name of the input.\n     */\n    get name() {\n        return this.getAttribute('name');\n    }\n\n    /**\n     * Getter for the type attribute.\n     * @returns {string} The type of the input.\n     */\n    get type() {\n        return this.localName;\n    }\n\n    /**\n     * Getter for the validity attribute.\n     * @returns {ValidityState} The validity state of the input.\n     */\n    get validity() {\n        return this.internals.validity;\n    }\n\n    /**\n     * Getter for the validationMessage attribute.\n     * @returns {string} The validation message of the input.\n     */\n    get validationMessage() {\n        return this.internals.validationMessage;\n    }\n\n    /**\n     * Getter for the willValidate attribute.\n     * @returns {boolean} Whether the input will be validated.\n     */\n    get willValidate() {\n        return this.internals.willValidate;\n    }\n\n    className = 'Textarea';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet} The CSS stylesheet\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Whether the input is associated with a form.\n     * @type {boolean}\n     */\n    static formAssociated = true;\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @static\n     * @returns {Array<string>}\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    set placeholder(value) {\n        this.setAttribute('placeholder', value);\n    }\n\n    get placeholder() {\n        return this.getAttribute('placeholder');\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n\n        // if some value was set via value setter then don't use default value\n        if (this.pristine) {\n            this.value = this.innerHTML;\n            this.pristine = false;\n        }\n    }\n\n    beforeDraw() {\n        this.observer.disconnect();\n    }\n\n    /**\n     * Draws the component for the textarea.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native-textarea', this.variant || 'default');\n        native.setAttribute('part', 'native');\n\n        if (this.hasAttribute('invalid')) native.classList.add('has-error');\n\n        let wrapper = document.createElement('div');\n        wrapper.setAttribute('part', 'wrapper');\n        wrapper.classList.add('wrapper');\n\n        let inputWrapper = document.createElement('div');\n        inputWrapper.classList.add('input-wrapper');\n\n        let label = document.createElement('label');\n        label.setAttribute('part', 'label');\n        label.htmlFor = 'textarea';\n        label.innerHTML = this.label || '';\n\n        let input = document.createElement('textarea');\n        input.id = 'textarea';\n        input.name = this.name;\n        input.disabled = this.hasAttribute('disabled');\n        input.innerText = this.value;\n        input.placeholder = this.placeholder || '';\n        input.classList.add('form-control');\n        input.setAttribute('part', 'input');\n        input.setAttribute('rows', this.rows || 3);\n        input.setAttribute('spellcheck', false);\n\n        const attributes = Array.from(this.attributes).map((attr) => attr.name);\n\n        attributes.forEach((attr) => {\n            if (this.hasAttribute(attr)) {\n                input.setAttribute(attr, this[attr] || '');\n            }\n        });\n\n        if (this.resize === 'auto') input.addEventListener('input', this.setTextareaHeight);\n\n        if (this.variant === 'standard') {\n            if (this.label) native.appendChild(label);\n        } else {\n            inputWrapper.appendChild(label);\n        }\n\n        inputWrapper.appendChild(input);\n\n        wrapper.appendChild(inputWrapper);\n\n        native.appendChild(wrapper);\n\n        fragment.appendChild(native);\n\n        if (this.hasAttribute('counter')) {\n            input.maxLength = this.maxLength || 1000;\n            input.addEventListener('input', this.counterFn);\n\n            let counter = document.createElement('div');\n            counter.classList.add('counter');\n            counter.innerText = `${input.value.length}/${input.maxLength}`;\n\n            this.counterElement = counter;\n            fragment.appendChild(counter);\n        }\n\n        this.native = native;\n        this.labelElement = label;\n        this.input = input;\n\n        return fragment;\n    }\n\n    /**\n     * Sets up the event listeners after the component is drawn.\n     */\n    afterDraw() {\n        this.resizeObserver = new ResizeObserver(() => this.setTextareaHeight);\n\n        if (!this.hasAttribute('disabled')) {\n            event.addListener(this, 'click', 'wje:textarea:change');\n            event.addListener(this, 'click', 'wje:textarea:input');\n        }\n\n        this.input.addEventListener('focus', (e) => {\n            this.labelElement.classList.add('fade');\n            this.native.classList.add('focused');\n        });\n\n        this.input.addEventListener('blur', (e) => {\n            this.native.classList.remove('focused');\n            if (!e.target.value) this.labelElement.classList.remove('fade');\n        });\n\n        this.addEventListener('invalid', (e) => {\n            this.invalid = true;\n            this.pristine = false;\n\n            this.showInvalidMessage();\n\n            if (this.customErrorDisplay) {\n                e.preventDefault();\n            }\n        });\n\n        this.input.addEventListener('input', (e) => {\n            this.validateInput();\n\n            if (this.validateOnChange) {\n                this.pristine = false;\n                this.propagateValidation();\n            }\n\n            this.input.classList.remove('pristine');\n            this.labelElement.classList.add('fade');\n\n            const clone = new e.constructor(e.type, e);\n            this.dispatchEvent(clone);\n\n            event.dispatchCustomEvent(this, 'wje-textarea:input', {\n                value: this.input.value,\n            });\n\n            this.value = this.input.value;\n        });\n\n        this.validateInput();\n\n        this.observer.observe(this, {\n            attributes: true, // Watch for attribute changes\n            attributeOldValue: true, // Keep track of the old value of attributes\n        });\n    }\n\n    componentCleanup() {\n        this.observer.disconnect();\n        this.resizeObserver?.unobserve(this.input);\n    }\n\n    /**\n     * Disconnects the component.\n     */\n    beforeDisconnect() {\n        this.resizeObserver?.unobserve(this.input);\n    }\n\n    /**\n     * Sets the height of the textarea.\n     */\n    setTextareaHeight = () => {\n        if (this.getAttribute('resize') === 'auto') {\n            this.input.style.height = 'auto';\n            this.input.style.height = this.input.scrollHeight + 'px';\n        }\n    };\n\n    /**\n     * Updates the counter for the textarea.\n     * @param {Event} e The event object.\n     */\n    counterFn = (e) => {\n        this.counterElement.innerText = e.target.value.length + '/' + this.input.maxLength;\n    };\n\n    /**\n     * @summary Validates the input.\n     * This method checks the validity state of the input. If the input is not valid, it iterates over the validity state object.\n     * For each invalid state, it constructs an attribute name and checks if the input has this attribute.\n     * If the input has the attribute, it sets the validation error to the state and the error message to the attribute value.\n     * If the input does not have the attribute, it sets the error message to the default validation message of the input.\n     * It then sets the validity in the form internals to an object with the validation error as key and true as value, and the error message.\n     * If the input is valid, it sets the validity in the form internals to an empty object.\n     */\n    validateInput() {\n        const validState = this.input.validity;\n\n        if (!validState.valid) {\n            for (let state in validState) {\n                const attr = `message-${state.toString()}`;\n\n                if (validState[state]) {\n                    this.validationError = state.toString();\n                    let errorMessage = this.message;\n\n                    // TODO this take error messages based on lang from operating system of user  should we implement custom translations based on app language ?\n                    if (!this.hasAttribute('message'))\n                        errorMessage = this.hasAttribute(attr) ? this.getAttribute(attr) : this.input.validationMessage;\n\n                    this.internals.setValidity({ [this.validationError]: true }, errorMessage);\n                }\n            }\n        } else {\n            this.internals.setValidity({});\n        }\n    }\n\n    /**\n     * @summary Propagates the validation state of the input.\n     * This method sets the 'invalid' property of the input based on its 'pristine' state and its internal validity state.\n     * If the input is invalid and the 'customErrorDisplay' property is true, it dispatches an 'invalid' event.\n     */\n    propagateValidation() {\n        this.invalid = !this.pristine && !this.internals.validity.valid;\n\n        if (this.invalid && this.customErrorDisplay) {\n            this.dispatchEvent(new Event('invalid'));\n        }\n    }\n\n    /**\n     * @summary Callback function that is called when the custom element is associated with a form.\n     * This function adds an event listener to the form's submit event, which validates the input and propagates the validation.\n     * @param {HTMLFormElement} form The form the custom element is associated with.\n     */\n    formAssociatedCallback(form) {\n        this.internals.setFormValue(this.value);\n        form?.addEventListener('submit', () => {\n            this.validateInput();\n            this.propagateValidation();\n        });\n    }\n\n    /**\n     * The formResetCallback method is a built-in lifecycle callback that gets called when a form gets reset.\n     * This method is responsible for resetting the value of the custom input element to its default value.\n     * It also resets the form value and validity state in the form internals.\n     * @function\n     */\n    formResetCallback() {\n        // Set the value of the custom input element to its default value\n        this.value = this.defaultValue;\n        // Reset the form value in the form internals to the default value\n        this.internals.setFormValue(this.defaultValue);\n        // Reset the validity state in the form internals\n        this.internals.setValidity({});\n    }\n\n    /**\n     * The formStateRestoreCallback method is a built-in lifecycle callback that gets called when the state of a form-associated custom element is restored.\n     * This method is responsible for restoring the value of the custom input element to its saved state.\n     * It also restores the form value and validity state in the form internals to their saved states.\n     * @param {object} state The saved state of the custom input element.\n     * @function\n     */\n    formStateRestoreCallback(state) {\n        // Set the value of the custom input element to its saved value\n        this.value = state.value;\n        // Restore the form value in the form internals to the saved value\n        this.internals.setFormValue(state.value);\n        // Restore the validity state in the form internals to the saved state\n        this.internals.setValidity({});\n    }\n\n    /**\n     * The formStateSaveCallback method is a built-in lifecycle callback that gets called when the state of a form-associated custom element is saved.\n     * This method is responsible for saving the value of the custom input element.\n     * @returns {object} The saved state of the custom input element.\n     * @function\n     */\n    formStateSaveCallback() {\n        return {\n            value: this.value,\n        };\n    }\n\n    /**\n     * The formDisabledCallback method is a built-in lifecycle callback that gets called when the disabled state of a form-associated custom element changes.\n     * This method is not implemented yet.\n     * @param {boolean} disabled The new disabled state of the custom input element.\n     * @function\n     */\n    formDisabledCallback(disabled) {\n        console.warn('formDisabledCallback not implemented yet');\n    }\n}\n","import Textarea from './textarea.element.js';\n\nexport default Textarea;\n\nTextarea.define('wje-textarea', Textarea);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-textarea.js","sources":["../packages/wje-textarea/textarea.element.js","../packages/wje-textarea/textarea.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Textarea` is a custom web component that represents a textarea input.\n * @summary This element represents a textarea input.\n * @documentation https://elements.webjet.sk/components/textarea\n * @status stable\n * @augments WJElement\n * @csspart native - The native textarea wrapper.\n * @csspart input - The textarea input.\n * @csspart wrapper - The textarea wrapper.\n * @cssproperty [--wje-textarea-font-family=var(--wje-font-family)] - Specifies the font family used for the textarea. Accepts any valid CSS font-family value.\n * @cssproperty [--wje-textarea-background-color=var(--wje-background)] - Sets the background color of the textarea. Accepts any valid CSS color value.\n * @cssproperty [--wje-textarea-color=var(--wje-color)] - Defines the text color within the textarea. Accepts any valid CSS color value.\n * @cssproperty [--wje-textarea-color-invalid=var(--wje-color-danger)] - Changes the text color of the textarea when it is invalid. Useful for highlighting validation errors.\n * @cssproperty [--wje-textarea-border-width=1px] - Specifies the width of the textarea's border. Accepts any valid CSS length unit.\n * @cssproperty [--wje-textarea-border-style=solid] - Sets the style of the textarea's border. Accepts standard CSS border styles such as `solid`, `dashed`, or `dotted`.\n * @cssproperty [--wje-textarea-border-color=var(--wje-border-color)] - Defines the border color of the textarea. Accepts any valid CSS color value.\n * @cssproperty [--wje-textarea-border-color-focus=var(--wje-color-primary)] - Specifies the border color of the textarea when it is focused. Enhances the user experience by providing visual feedback.\n * @cssproperty [--wje-textarea-border-radius=4px] - Determines the border radius of the textarea, defining how rounded its corners are. Accepts any valid CSS length unit.\n * @cssproperty [--wje-textarea-margin-bottom=.5rem] - Sets the bottom margin of the textarea. Ensures spacing between the textarea and other elements.\n * @cssproperty [--wje-textarea-line-height=20px] - Specifies the line height of the text within the textarea. Helps control the vertical spacing of the text.\n * @cssproperty [--wje-textarea-padding=0.5rem] - Defines the padding inside the textarea. Controls the spacing between the content and the border.\n * @tag wje-textarea\n */\n\nexport default class Textarea extends WJElement {\n    /**\n     * Creates an instance of Textarea.\n     * @class\n     */\n    constructor() {\n        super();\n\n        this.invalid = false;\n        this.pristine = true;\n        this.internals = this.attachInternals();\n        this.observer = new MutationObserver(this.observeFunction);\n    }\n\n    observeFunction = (mutations) => {\n        mutations.forEach((mutation) => {\n            if (mutation.type === 'attributes') {\n                const attributeName = mutation.attributeName;\n                const oldValue = mutation.oldValue;\n                const newValue = this.getAttribute(attributeName);\n\n                console.log(`Attribute ${attributeName} changed from ${oldValue} to ${newValue}`);\n            }\n        });\n\n        this.refresh();\n    };\n\n    /**\n     * Setter for the value attribute.\n     * @param {string} value The value to set.\n     */\n    set value(value) {\n        this.internals.setFormValue(value);\n\n        if (this.input) this.input.value = value;\n\n        this.pristine = false;\n        this._value = value;\n    }\n\n    /**\n     * Getter for the value attribute.\n     * @returns {string} The value of the attribute.\n     */\n    get value() {\n        return this.input?.value ?? this._value ?? '';\n    }\n\n    /**\n     * Getter for the invalid attribute.\n     * @returns {boolean} Whether the attribute is present.\n     */\n    get invalid() {\n        return this.hasAttribute('invalid');\n    }\n\n    /**\n     * Setter for the invalid attribute.\n     * @param {boolean} isInvalid Whether the input is invalid.\n     */\n    set invalid(isInvalid) {\n        if (isInvalid) this.setAttribute('invalid', '');\n        else this.removeAttribute('invalid');\n    }\n\n    /**\n     * Getter for the form attribute.\n     * @returns {HTMLFormElement} The form the input is associated with.\n     */\n    get form() {\n        return this.internals.form;\n    }\n\n    /**\n     * Getter for the name attribute.\n     * @returns {string} The name of the input.\n     */\n    get name() {\n        return this.getAttribute('name');\n    }\n\n    /**\n     * Getter for the type attribute.\n     * @returns {string} The type of the input.\n     */\n    get type() {\n        return this.localName;\n    }\n\n    /**\n     * Getter for the validity attribute.\n     * @returns {ValidityState} The validity state of the input.\n     */\n    get validity() {\n        return this.internals.validity;\n    }\n\n    /**\n     * Getter for the validationMessage attribute.\n     * @returns {string} The validation message of the input.\n     */\n    get validationMessage() {\n        return this.internals.validationMessage;\n    }\n\n    /**\n     * Getter for the willValidate attribute.\n     * @returns {boolean} Whether the input will be validated.\n     */\n    get willValidate() {\n        return this.internals.willValidate;\n    }\n\n    className = 'Textarea';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet} The CSS stylesheet\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Whether the input is associated with a form.\n     * @type {boolean}\n     */\n    static formAssociated = true;\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @static\n     * @returns {Array<string>}\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    set placeholder(value) {\n        this.setAttribute('placeholder', value);\n    }\n\n    get placeholder() {\n        return this.getAttribute('placeholder');\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n\n        // if some value was set via value setter then don't use default value\n        if (this.pristine) {\n            this.value = this.innerHTML;\n            this.pristine = false;\n        }\n    }\n\n    beforeDraw() {\n        this.observer.disconnect();\n    }\n\n    /**\n     * Draws the component for the textarea.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native-textarea', this.variant || 'default');\n        native.setAttribute('part', 'native');\n\n        if (this.hasAttribute('invalid')) native.classList.add('has-error');\n\n        let wrapper = document.createElement('div');\n        wrapper.setAttribute('part', 'wrapper');\n        wrapper.classList.add('wrapper');\n\n        let inputWrapper = document.createElement('div');\n        inputWrapper.classList.add('input-wrapper');\n\n        let label = document.createElement('label');\n        label.setAttribute('part', 'label');\n        label.htmlFor = 'textarea';\n        label.innerHTML = this.label || '';\n\n        let input = document.createElement('textarea');\n        input.id = 'textarea';\n        input.name = this.name;\n        input.disabled = this.hasAttribute('disabled');\n        input.innerText = this.value;\n        input.placeholder = this.placeholder || '';\n        input.classList.add('form-control');\n        input.setAttribute('part', 'input');\n        input.setAttribute('rows', this.rows || 3);\n        input.setAttribute('spellcheck', false);\n\n        const attributes = Array.from(this.attributes).map((attr) => attr.name);\n\n        attributes.forEach((attr) => {\n            if (this.hasAttribute(attr)) {\n                input.setAttribute(attr, this[attr] || '');\n            }\n        });\n\n        if (this.resize === 'auto') input.addEventListener('input', this.setTextareaHeight);\n\n        if (this.variant === 'standard') {\n            if (this.label) native.appendChild(label);\n        } else {\n            inputWrapper.appendChild(label);\n        }\n\n        inputWrapper.appendChild(input);\n\n        wrapper.appendChild(inputWrapper);\n\n        native.appendChild(wrapper);\n\n        fragment.appendChild(native);\n\n        if (this.hasAttribute('counter')) {\n            input.maxLength = this.maxLength || 1000;\n            input.addEventListener('input', this.counterFn);\n\n            let counter = document.createElement('div');\n            counter.classList.add('counter');\n            counter.innerText = `${input.value.length}/${input.maxLength}`;\n\n            this.counterElement = counter;\n            fragment.appendChild(counter);\n        }\n\n        this.native = native;\n        this.labelElement = label;\n        this.input = input;\n\n        return fragment;\n    }\n\n    /**\n     * Sets up the event listeners after the component is drawn.\n     */\n    afterDraw() {\n        this.resizeObserver = new ResizeObserver(() => this.setTextareaHeight);\n\n        if (!this.hasAttribute('disabled')) {\n            event.addListener(this, 'click', 'wje-textarea:change');\n            event.addListener(this, 'click', 'wje-textarea:input');\n        }\n\n        this.input.addEventListener('focus', (e) => {\n            this.labelElement.classList.add('fade');\n            this.native.classList.add('focused');\n        });\n\n        this.input.addEventListener('blur', (e) => {\n            this.native.classList.remove('focused');\n            if (!e.target.value) this.labelElement.classList.remove('fade');\n        });\n\n        this.addEventListener('invalid', (e) => {\n            this.invalid = true;\n            this.pristine = false;\n\n            this.showInvalidMessage();\n\n            if (this.customErrorDisplay) {\n                e.preventDefault();\n            }\n        });\n\n        this.input.addEventListener('input', (e) => {\n            this.validateInput();\n\n            if (this.validateOnChange) {\n                this.pristine = false;\n                this.propagateValidation();\n            }\n\n            this.input.classList.remove('pristine');\n            this.labelElement.classList.add('fade');\n\n            const clone = new e.constructor(e.type, e);\n            this.dispatchEvent(clone);\n\n            event.dispatchCustomEvent(this, 'wje-textarea:input', {\n                value: this.input.value,\n            });\n\n            this.value = this.input.value;\n        });\n\n        this.validateInput();\n\n        this.observer.observe(this, {\n            attributes: true, // Watch for attribute changes\n            attributeOldValue: true, // Keep track of the old value of attributes\n        });\n    }\n\n    componentCleanup() {\n        this.observer.disconnect();\n        this.resizeObserver?.unobserve(this.input);\n    }\n\n    /**\n     * Disconnects the component.\n     */\n    beforeDisconnect() {\n        this.resizeObserver?.unobserve(this.input);\n    }\n\n    /**\n     * Sets the height of the textarea.\n     */\n    setTextareaHeight = () => {\n        if (this.getAttribute('resize') === 'auto') {\n            this.input.style.height = 'auto';\n            this.input.style.height = this.input.scrollHeight + 'px';\n        }\n    };\n\n    /**\n     * Updates the counter for the textarea.\n     * @param {Event} e The event object.\n     */\n    counterFn = (e) => {\n        this.counterElement.innerText = e.target.value.length + '/' + this.input.maxLength;\n    };\n\n    /**\n     * @summary Validates the input.\n     * This method checks the validity state of the input. If the input is not valid, it iterates over the validity state object.\n     * For each invalid state, it constructs an attribute name and checks if the input has this attribute.\n     * If the input has the attribute, it sets the validation error to the state and the error message to the attribute value.\n     * If the input does not have the attribute, it sets the error message to the default validation message of the input.\n     * It then sets the validity in the form internals to an object with the validation error as key and true as value, and the error message.\n     * If the input is valid, it sets the validity in the form internals to an empty object.\n     */\n    validateInput() {\n        const validState = this.input.validity;\n\n        if (!validState.valid) {\n            for (let state in validState) {\n                const attr = `message-${state.toString()}`;\n\n                if (validState[state]) {\n                    this.validationError = state.toString();\n                    let errorMessage = this.message;\n\n                    // TODO this take error messages based on lang from operating system of user  should we implement custom translations based on app language ?\n                    if (!this.hasAttribute('message'))\n                        errorMessage = this.hasAttribute(attr) ? this.getAttribute(attr) : this.input.validationMessage;\n\n                    this.internals.setValidity({ [this.validationError]: true }, errorMessage);\n                }\n            }\n        } else {\n            this.internals.setValidity({});\n        }\n    }\n\n    /**\n     * @summary Propagates the validation state of the input.\n     * This method sets the 'invalid' property of the input based on its 'pristine' state and its internal validity state.\n     * If the input is invalid and the 'customErrorDisplay' property is true, it dispatches an 'invalid' event.\n     */\n    propagateValidation() {\n        this.invalid = !this.pristine && !this.internals.validity.valid;\n\n        if (this.invalid && this.customErrorDisplay) {\n            this.dispatchEvent(new Event('invalid'));\n        }\n    }\n\n    /**\n     * @summary Callback function that is called when the custom element is associated with a form.\n     * This function adds an event listener to the form's submit event, which validates the input and propagates the validation.\n     * @param {HTMLFormElement} form The form the custom element is associated with.\n     */\n    formAssociatedCallback(form) {\n        this.internals.setFormValue(this.value);\n        form?.addEventListener('submit', () => {\n            this.validateInput();\n            this.propagateValidation();\n        });\n    }\n\n    /**\n     * The formResetCallback method is a built-in lifecycle callback that gets called when a form gets reset.\n     * This method is responsible for resetting the value of the custom input element to its default value.\n     * It also resets the form value and validity state in the form internals.\n     * @function\n     */\n    formResetCallback() {\n        // Set the value of the custom input element to its default value\n        this.value = this.defaultValue;\n        // Reset the form value in the form internals to the default value\n        this.internals.setFormValue(this.defaultValue);\n        // Reset the validity state in the form internals\n        this.internals.setValidity({});\n    }\n\n    /**\n     * The formStateRestoreCallback method is a built-in lifecycle callback that gets called when the state of a form-associated custom element is restored.\n     * This method is responsible for restoring the value of the custom input element to its saved state.\n     * It also restores the form value and validity state in the form internals to their saved states.\n     * @param {object} state The saved state of the custom input element.\n     * @function\n     */\n    formStateRestoreCallback(state) {\n        // Set the value of the custom input element to its saved value\n        this.value = state.value;\n        // Restore the form value in the form internals to the saved value\n        this.internals.setFormValue(state.value);\n        // Restore the validity state in the form internals to the saved state\n        this.internals.setValidity({});\n    }\n\n    /**\n     * The formStateSaveCallback method is a built-in lifecycle callback that gets called when the state of a form-associated custom element is saved.\n     * This method is responsible for saving the value of the custom input element.\n     * @returns {object} The saved state of the custom input element.\n     * @function\n     */\n    formStateSaveCallback() {\n        return {\n            value: this.value,\n        };\n    }\n\n    /**\n     * The formDisabledCallback method is a built-in lifecycle callback that gets called when the disabled state of a form-associated custom element changes.\n     * This method is not implemented yet.\n     * @param {boolean} disabled The new disabled state of the custom input element.\n     * @function\n     */\n    formDisabledCallback(disabled) {\n        console.warn('formDisabledCallback not implemented yet');\n    }\n}\n","import Textarea from './textarea.element.js';\n\nexport default Textarea;\n\nTextarea.define('wje-textarea', Textarea);\n"],"names":[],"mappings":"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"}

package/dist/wje-tooltip.js

@@ -2,6 +2,8 @@ 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, { event } from "./wje-element.js";
+import "./wje-popup.js";
+import { P as Popup } from "./popup.element-AaduHP2r.js";
 const styles = "/*\n[ WJ Tooltip ]\n*/\n\n.native-tooltip {\n    display: flex;\n    align-items: center;\n    padding: var(--wje-tooltip-spacing);\n    color: var(--wje-tooltip-color);\n    background-color: var(--wje-tooltip-background);\n    font-weight: var(--wje-tooltip-font-weight);\n    font-size: var(--wje-tooltip-font-size);\n    border-radius: var(--wje-tooltip-border-radius);\n    line-height: var(--wje-tooltip-line-height);\n    box-sizing: border-box;\n    box-shadow: var(--wje-tooltip-shadow);\n}\n\n::slotted([slot='start']) {\n    margin: 0 0.3rem 0 0;\n}\n\n::slotted([slot='end']) {\n    margin: 0 0 0 0.3rem;\n}\n\n.arrow {\n    position: absolute;\n    width: 10px;\n    height: 10px;\n    background: var(--wje-tooltip-arrow-color);\n    transform: rotate(45deg);\n}\n";
 class Tooltip extends WJElement {
   /**
@@ -9,6 +11,13 @@ class Tooltip extends WJElement {
    */
   constructor() {
     super();
+    /**
+     * Dependencies of the Button element.
+     * @type {object}
+     */
+    __publicField(this, "dependencies", {
+      "wje-popup": Popup
+    });
     /**
      * The class name for the component.
      * @type {string}

package/dist/wje-tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-tooltip.js","sources":["../packages/wje-tooltip/tooltip.element.js","../packages/wje-tooltip/tooltip.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Tooltip` is a custom web component that represents a tooltip.\n * @summary This element represents a tooltip.\n * @documentation https://elements.webjet.sk/components/tooltip\n * @status stable\n * @augments {WJElement}\n * @attribute {string} content - The content of the tooltip element. Accepts any valid string value.\n * @slot arrow - The arrow slot for the tooltip.\n * @slot anchor - The anchor slot for the tooltip.\n * @csspart native - The native tooltip wrapper.\n * @cssproperty [--wje-tooltip-arrow-color=var(--wje-color-contrast-11)] - Specifies the color of the tooltip's arrow. This property determines the visual color of the arrow that points to the element the tooltip is attached to. Accepts any valid CSS color value such as `hex`, `rgb`, or `CSS variable`.\n * @tag wje-tooltip\n */\nexport default class Tooltip extends WJElement {\n    /**\n     * Creates an instance of Tooltip.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Set active attribute for the tooltip element.\n     * @param value\n     */\n    set content(value) {\n        this.setAttribute('content', value);\n    }\n\n    /**\n     * Get active attribute for the tooltip element.\n     * @returns {string}\n     */\n    get content() {\n        if (this.hasAttribute('content')) return this.getAttribute('content');\n\n        return '';\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'Tooltip';\n\n    /**\n     * Returns the CSS stylesheet for the component.\n     * @static\n     * @returns {CSSStyleSheet} The CSS stylesheet\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of observed attributes.\n     * @static\n     * @returns {Array} An array of observed attributes\n     */\n    static get observedAttributes() {\n        return ['active'];\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 tooltip.\n     * @returns {object} Document fragment\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let popup = document.createElement('wje-popup');\n        popup.setAttribute('placement', this.placement || 'top');\n        popup.setAttribute('offset', this.offset || '0');\n\n        // SLOT - Anchor\n        let slot = document.createElement('slot');\n        slot.setAttribute('slot', 'anchor');\n\n        // let slot = this.querySelector(\"wje-button\");\n\n        let arrow = document.createElement('div');\n        arrow.classList.add('arrow');\n        arrow.setAttribute('slot', 'arrow');\n\n        // SLOT - Start\n        let start = document.createElement('slot');\n        start.setAttribute('name', 'start');\n\n        // SLOT - End\n        let end = document.createElement('slot');\n        end.setAttribute('name', 'end');\n\n        let content = document.createElement('div');\n        content.innerHTML = this.content;\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-tooltip');\n\n        native.appendChild(start);\n        native.appendChild(content);\n        native.appendChild(end);\n\n        popup.appendChild(slot);\n        popup.appendChild(arrow);\n        popup.appendChild(native);\n\n        this.mySlot = slot;\n        this.popup = popup;\n        this.native = native;\n\n        fragment.appendChild(popup);\n\n        return fragment;\n    }\n\n    /**\n     * Draws the component for the tooltip.\n     */\n    afterDraw() {\n        let anchorEl = this.mySlot.assignedElements()[0];\n        if (this.selector) {\n            anchorEl = this.checkSelector(anchorEl);\n        }\n\n        if (!anchorEl) return;\n\n        event.addListener(anchorEl, 'mouseenter', null, this.onShow);\n        event.addListener(anchorEl, 'mouseleave', null, this.onHide);\n        event.addListener(this, 'wje-dropdown:open', null, this.onHide);\n        event.addListener(this, 'wje-dropdown:close', null, this.onShow);\n    }\n\n    afterDisconnect() {\n        event.removeListener(this, 'wje-dropdown:open', null, this.onHide);\n        event.removeListener(this, 'wje-dropdown:close', null, this.onShow);\n        event.removeListener(this, 'mouseenter', null, this.onShow);\n        event.removeListener(this, 'mouseleave', null, this.onHide);\n    }\n\n    dispatch(customEvent) {\n        return new Promise((resolve) => {\n            event.dispatchCustomEvent(this, customEvent, {\n                resolve: resolve,\n            });\n        });\n    }\n\n    beforeShow() {\n        return this.native.innerHTML;\n    }\n\n    afterShow() {\n        return true;\n    }\n\n    popupHideCallback = () => {\n        this.onHide();\n    };\n\n    /**\n     * Handles the logic for showing the component's popup or tooltip.\n     * Adds the `active` class, invokes lifecycle hooks, and manages the popup visibility.\n     * @throws {Error} If the `beforeShow` method returns a non-string value or `false`.\n     */\n    onShow = () => {\n        event.addListener(this, 'wje-popup:hide', null, this.popupHideCallback);\n\n        this.classList.add('active');\n\n        if (this.querySelector('wje-dropdown')?.classList.contains('active')) {\n            return;\n        }\n\n        Promise.resolve(this.beforeShow(this))\n            .then((res) => {\n                if (!this.classList.contains('active') || !res || typeof res !== 'string') {\n                    throw new Error('beforeShow method returned false or not string');\n                }\n\n                this.native.innerHTML = res;\n\n                this.popup.show(); // Show tooltip\n\n                Promise.resolve(this.afterShow(this));\n            })\n            .catch(() => {\n                // ak je nejaka chyba tak to len zatvorime\n                this.classList.remove('active');\n                this.popup.hide();\n            });\n    };\n\n    /**\n     * Hides the component's popup or tooltip.\n     * Removes the `active` class from the component and hides the popup element.\n     */\n    onHide = () => {\n        event.removeListener(this, 'wje-popup:hide', null, this.popupHideCallback);\n\n        this.classList.remove('active');\n        this.popup.hide();\n    };\n\n    /**\n     * Validates if the specified selector exists within the provided element.\n     * Logs an error if the selector is not found and returns the found element or `null`.\n     * @param {HTMLElement} anchorEl The root element to search within.\n     * @returns {HTMLElement|null} The first element matching the selector, or `null` if not found.\n     */\n    checkSelector(anchorEl) {\n        const newAnchorEl = anchorEl.querySelector(this.selector);\n        if (newAnchorEl === null) {\n            console.error('Selector not found:', this.selector);\n        }\n\n        return newAnchorEl;\n    }\n}\n","import Tooltip from './tooltip.element.js';\n\nexport default Tooltip;\n\nTooltip.define('wje-tooltip', Tooltip);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-tooltip.js","sources":["../packages/wje-tooltip/tooltip.element.js","../packages/wje-tooltip/tooltip.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport Popup from '../wje-popup/popup.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Tooltip` is a custom web component that represents a tooltip.\n * @summary This element represents a tooltip.\n * @documentation https://elements.webjet.sk/components/tooltip\n * @status stable\n * @augments {WJElement}\n * @attribute {string} content - The content of the tooltip element. Accepts any valid string value.\n * @slot arrow - The arrow slot for the tooltip.\n * @slot anchor - The anchor slot for the tooltip.\n * @csspart native - The native tooltip wrapper.\n * @cssproperty [--wje-tooltip-arrow-color=var(--wje-color-contrast-11)] - Specifies the color of the tooltip's arrow. This property determines the visual color of the arrow that points to the element the tooltip is attached to. Accepts any valid CSS color value such as `hex`, `rgb`, or `CSS variable`.\n * @tag wje-tooltip\n */\nexport default class Tooltip extends WJElement {\n    /**\n     * Creates an instance of Tooltip.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Dependencies of the Button element.\n     * @type {object}\n     */\n    dependencies = {\n        'wje-popup': Popup,\n    };\n\n    /**\n     * Set active attribute for the tooltip element.\n     * @param value\n     */\n    set content(value) {\n        this.setAttribute('content', value);\n    }\n\n    /**\n     * Get active attribute for the tooltip element.\n     * @returns {string}\n     */\n    get content() {\n        if (this.hasAttribute('content')) return this.getAttribute('content');\n\n        return '';\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'Tooltip';\n\n    /**\n     * Returns the CSS stylesheet for the component.\n     * @static\n     * @returns {CSSStyleSheet} The CSS stylesheet\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of observed attributes.\n     * @static\n     * @returns {Array} An array of observed attributes\n     */\n    static get observedAttributes() {\n        return ['active'];\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 tooltip.\n     * @returns {object} Document fragment\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let popup = document.createElement('wje-popup');\n        popup.setAttribute('placement', this.placement || 'top');\n        popup.setAttribute('offset', this.offset || '0');\n\n        // SLOT - Anchor\n        let slot = document.createElement('slot');\n        slot.setAttribute('slot', 'anchor');\n\n        let arrow = document.createElement('div');\n        arrow.classList.add('arrow');\n        arrow.setAttribute('slot', 'arrow');\n\n        // SLOT - Start\n        let start = document.createElement('slot');\n        start.setAttribute('name', 'start');\n\n        // SLOT - End\n        let end = document.createElement('slot');\n        end.setAttribute('name', 'end');\n\n        let content = document.createElement('div');\n        content.innerHTML = this.content;\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-tooltip');\n\n        native.appendChild(start);\n        native.appendChild(content);\n        native.appendChild(end);\n\n        popup.appendChild(slot);\n        popup.appendChild(arrow);\n        popup.appendChild(native);\n\n        this.mySlot = slot;\n        this.popup = popup;\n        this.native = native;\n\n        fragment.appendChild(popup);\n\n        return fragment;\n    }\n\n    /**\n     * Draws the component for the tooltip.\n     */\n    afterDraw() {\n        let anchorEl = this.mySlot.assignedElements()[0];\n        if (this.selector) {\n            anchorEl = this.checkSelector(anchorEl);\n        }\n\n        if (!anchorEl) return;\n\n        event.addListener(anchorEl, 'mouseenter', null, this.onShow);\n        event.addListener(anchorEl, 'mouseleave', null, this.onHide);\n        event.addListener(this, 'wje-dropdown:open', null, this.onHide);\n        event.addListener(this, 'wje-dropdown:close', null, this.onShow);\n    }\n\n    afterDisconnect() {\n        event.removeListener(this, 'wje-dropdown:open', null, this.onHide);\n        event.removeListener(this, 'wje-dropdown:close', null, this.onShow);\n        event.removeListener(this, 'mouseenter', null, this.onShow);\n        event.removeListener(this, 'mouseleave', null, this.onHide);\n    }\n\n    dispatch(customEvent) {\n        return new Promise((resolve) => {\n            event.dispatchCustomEvent(this, customEvent, {\n                resolve: resolve,\n            });\n        });\n    }\n\n    beforeShow() {\n        return this.native.innerHTML;\n    }\n\n    afterShow() {\n        return true;\n    }\n\n    popupHideCallback = () => {\n        this.onHide();\n    };\n\n    /**\n     * Handles the logic for showing the component's popup or tooltip.\n     * Adds the `active` class, invokes lifecycle hooks, and manages the popup visibility.\n     * @throws {Error} If the `beforeShow` method returns a non-string value or `false`.\n     */\n    onShow = () => {\n        event.addListener(this, 'wje-popup:hide', null, this.popupHideCallback);\n\n        this.classList.add('active');\n\n        if (this.querySelector('wje-dropdown')?.classList.contains('active')) {\n            return;\n        }\n\n        Promise.resolve(this.beforeShow(this))\n            .then((res) => {\n                if (!this.classList.contains('active') || !res || typeof res !== 'string') {\n                    throw new Error('beforeShow method returned false or not string');\n                }\n\n                this.native.innerHTML = res;\n\n                this.popup.show(); // Show tooltip\n\n                Promise.resolve(this.afterShow(this));\n            })\n            .catch(() => {\n                // ak je nejaka chyba tak to len zatvorime\n                this.classList.remove('active');\n                this.popup.hide();\n            });\n    };\n\n    /**\n     * Hides the component's popup or tooltip.\n     * Removes the `active` class from the component and hides the popup element.\n     */\n    onHide = () => {\n        event.removeListener(this, 'wje-popup:hide', null, this.popupHideCallback);\n\n        this.classList.remove('active');\n        this.popup.hide();\n    };\n\n    /**\n     * Validates if the specified selector exists within the provided element.\n     * Logs an error if the selector is not found and returns the found element or `null`.\n     * @param {HTMLElement} anchorEl The root element to search within.\n     * @returns {HTMLElement|null} The first element matching the selector, or `null` if not found.\n     */\n    checkSelector(anchorEl) {\n        const newAnchorEl = anchorEl.querySelector(this.selector);\n        if (newAnchorEl === null) {\n            console.error('Selector not found:', this.selector);\n        }\n\n        return newAnchorEl;\n    }\n}\n","import Tooltip from './tooltip.element.js';\n\nexport default Tooltip;\n\nTooltip.define('wje-tooltip', Tooltip);\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "wj-elements",
   "description": "WebJET Elements is a modern set of user interface tools harnessing the power of web components designed to simplify web application development.",
-  "version": "0.1.176",
+  "version": "0.1.178",
   "homepage": "https://github.com/lencys/wj-elements",
   "author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
   "license": "MIT",
@@ -71,6 +71,9 @@
   ],
   "dependencies": {
     "@crowdin/cli": "^3.19.2",
+    "@docusaurus/core": "^3.8.0",
+    "@docusaurus/mdx-loader": "^3.8.0",
+    "@docusaurus/plugin-client-redirects": "^3.8.0",
     "@faker-js/faker": "^8.0.0",
     "@floating-ui/dom": "^1.5.1",
     "animate.css": "^4.1.1",

package/dist/packages/utils/permissions-api.d.ts

@@ -1,34 +0,0 @@
-export class WjePermissionsApi {
-    static _permissionKey: string;
-    /**
-     * Sets the permission key.
-     * @param value
-     */
-    static set permissionKey(value: any | string);
-    /**
-     * Returns the permission key.
-     * @returns {*|string}
-     */
-    static get permissionKey(): any | string;
-    /**
-     * Sets the permissions.
-     * @param value
-     */
-    static set permissions(value: string[]);
-    /**
-     * Returns the permissions.
-     * @returns {string[]}
-     */
-    static get permissions(): string[];
-    /**
-     * Checks if the permission is included.
-     * @param key
-     * @returns {boolean}
-     */
-    static includesKey(key: any): boolean;
-    /**
-     * Checks if the permission is fulfilled.
-     * @returns {boolean}
-     */
-    static isPermissionFulfilled(permissions: any): boolean;
-}