wj-elements 0.4.2 → 0.4.3

package/dist/wje-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-input.js","sources":["../packages/wje-input/input.element.js","../packages/wje-input/input.js"],"sourcesContent":["import { FormAssociatedElement } from '../internals/form-associated-element.js';\nimport { event } from '../utils/event.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents a custom input element. It extends the WJElement class and provides additional functionality for handling input.\n * @documentation https://elements.webjet.sk/components/input\n * @status stable\n * @augments {FormAssociatedElement}\n * @csspart native - The native part.\n * @csspart wrapper - The wrapper part.\n * @csspart input - The input part.\n * @csspart clear - The clear part.\n * @slot start - Slot for content at the start of the input.\n * @slot end - Slot for content at the end of the input.\n * @cssproperty [--wje-input-font-family=var(--wje-font-family)] - Defines the font family for the input text.\n * @cssproperty [--wje-input-background-color=var(--wje-background)] - Specifies the background color of the input field.\n * @cssproperty [--wje-input-color=var(--wje-color)] - Sets the text color within the input field.\n * @cssproperty [--wje-input-color-invalid=var(--wje-color-danger)] - Changes the text color when the input value is invalid.\n * @cssproperty [--wje-input-error-background-color=var(--wje-tooltip-background)] - Controls the background color of the validation error bubble.\n * @cssproperty [--wje-input-error-color=var(--wje-tooltip-color)] - Controls the text color of the validation error bubble.\n * @cssproperty [--wje-input-border-color=var(--wje-border-color)] - Defines the border color of the input field.\n * @cssproperty [--wje-input-border-color-focus=var(--wje-color-primary)] - Specifies the border color when the input is focused.\n * @cssproperty [--wje-input-border-width=1px] - Sets the width of the input border.\n * @cssproperty [--wje-input-border-style=solid] - Defines the border style of the input (e.g., solid, dashed).\n * @cssproperty [--wje-input-border-radius=4px] - Specifies the border radius, creating rounded corners.\n * @cssproperty [--wje-input-margin-bottom=.5rem] - Adds spacing below the input field.\n * @cssproperty [--wje-input-line-height=20px] - Sets the line height of the text within the input field.\n * @cssproperty [--wje-input-slot-padding-inline=.5rem] - Controls the padding on the left and right of the input slot content.\n * // @fires wje-input:input - Dispatched when the input value changes.\n * // @fires wje-input:clear - Dispatched when the input is cleared.\n */\nexport default class Input extends FormAssociatedElement {\n    static _instanceId = 0;\n    /**\n     * Creates an instance of Input.\n     */\n    constructor() {\n        super();\n\n        this.invalid = false;\n        this.pristine = true;\n        this._instanceId = ++Input._instanceId;\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        this.syncAria();\n    }\n\n    /**\n     * Retrieves the value from the input element if available; otherwise,\n     * returns the internal _value property or an empty string as the default.\n     * @returns {string} The current value from the input element, the internal _value, or an empty string.\n     */\n    get value() {\n        return this.input?.value ?? this._value ?? '';\n    }\n\n    /**\n     * Sets the label attribute of the element.\n     * @param {string} value The value to set as the label attribute.\n     */\n    set label(value) {\n        this.setAttribute('label', value);\n    }\n\n    /**\n     * Retrieves the value of the 'label' attribute if it exists.\n     * If the 'label' attribute is not set, it returns false.\n     * @returns {string|boolean} The value of the 'label' attribute as a string, or false if the attribute is not set.\n     */\n    get label() {\n        return this.getAttribute('label') || false;\n    }\n\n    /**\n     * Sets the custom error display attribute for an element.\n     * @param {boolean} value If true, adds the 'custom-error-display' attribute to the element. If false, removes the attribute from the element.\n     */\n    set customErrorDisplay(value) {\n        if (value) {\n            this.setAttribute('custom-error-display', '');\n        } else {\n            this.removeAttribute('custom-error-display');\n        }\n    }\n\n    /**\n     * Getter for the customErrorDisplay attribute.\n     * @returns {boolean} Whether the attribute is present.\n     */\n    get customErrorDisplay() {\n        return this.hasAttribute('custom-error-display');\n    }\n\n    /**\n     * Sets the `validateOnChange` property. If set to a truthy value, it adds the\n     * `validate-on-change` attribute to the element. If set to a falsy value, it\n     * removes the `validate-on-change` attribute from the element.\n     * @param {boolean} value Determines whether to add or remove the\n     * `validate-on-change` attribute. A truthy value adds the attribute, whereas a\n     * falsy value removes it.\n     */\n    set validateOnChange(value) {\n        if (value) {\n            this.setAttribute('validate-on-change', '');\n        } else {\n            this.removeAttribute('validate-on-change');\n        }\n    }\n\n    /**\n     * Getter for the validateOnChange attribute.\n     * @returns {boolean} Whether the attribute is present.\n     */\n    get validateOnChange() {\n        return this.hasAttribute('validate-on-change');\n    }\n\n    /**\n     * @summary Getter for the defaultValue attribute.\n     * This method retrieves the 'value' attribute of the custom input element.\n     * The 'value' attribute represents the default value of the input element.\n     * If the 'value' attribute is not set, it returns an empty string.\n     * @returns {string} The default value of the input element.\n     */\n    get defaultValue() {\n        return this.getAttribute('value') ?? '';\n    }\n\n    /**\n     * @summary Setter for the defaultValue attribute.\n     * This method sets the 'value' attribute of the custom input element to the provided value.\n     * The 'value' attribute represents the default value of the input element.\n     * @param {string} value The value to set as the default value.\n     */\n    set defaultValue(value) {\n        this.setAttribute('value', value);\n    }\n\n    /**\n     * Sets or removes the 'clearable' attribute on the element.\n     * When set to a truthy value, the 'clearable' attribute is added; when falsy, the attribute is removed.\n     * @param {boolean} value Determines whether to set or remove the 'clearable' attribute. If true, the 'clearable' attribute is added. If false, it is removed.\n     */\n    set clearable(value) {\n        if (value) {\n            this.setAttribute('clearable', '');\n        } else {\n            this.removeAttribute('clearable');\n        }\n    }\n\n    /**\n     * Checks if the 'clearable' attribute is present on the element.\n     * @returns {boolean} True if the 'clearable' attribute is set, otherwise false.\n     */\n    get clearable() {\n        return this.hasAttribute('clearable');\n    }\n\n    /**\n     * Sets the placeholder value for an element. If the provided value is non-empty,\n     * it assigns the value to the \"placeholder\" attribute. Otherwise, it removes\n     * the \"placeholder\" attribute from the element.\n     * @param {string} value The placeholder text to set or null/undefined to remove the attribute.\n     */\n    set placeholder(value) {\n        if (value) {\n            this.setAttribute('placeholder', value);\n        } else {\n            this.removeAttribute('placeholder');\n        }\n    }\n\n    /**\n     * Retrieves the value of the 'placeholder' attribute from the element.\n     * If the attribute is not set, it returns an empty string.\n     * @returns {string} The value of the 'placeholder' attribute or an empty string if not set.\n     */\n    get placeholder() {\n        return this.getAttribute('placeholder') || '';\n    }\n\n    /**\n     * Sets the `variant` attribute on the element. If a value is provided, it will set the attribute to the given value.\n     * If no value is provided, it removes the `variant` attribute from the element.\n     * @param {string} value The value to set for the `variant` attribute. If falsy, the attribute is removed.\n     */\n    set variant(value) {\n        if (value) {\n            this.setAttribute('variant', value);\n        } else {\n            this.removeAttribute('variant');\n        }\n    }\n\n    /**\n     * Retrieves the value of the 'variant' attribute from the element.\n     * If the attribute is not set, it defaults to 'default'.\n     * @returns {string} The value of the 'variant' attribute or 'default' if not set.\n     */\n    get variant() {\n        return this.getAttribute('variant') || 'default';\n    }\n\n    /**\n     * The class name of the input element.\n     * @type {string}\n     */\n    className = 'Input';\n\n    /**\n     * Getter for the cssStyleSheet attribute.\n     * @returns {CSSStyleSheet} The CSS style sheet of the input element.\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Getter for the observedAttributes attribute of the input element.\n     * @returns {Array} The attributes to observe for changes.\n     */\n    static get observedAttributes() {\n        return ['type', 'value', 'name', 'disabled', 'placeholder', 'label', 'message', 'error-inline', 'required', 'readonly', 'invalid'];\n    }\n\n    /**\n     * Sets up the attributes for the input.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        // if some value was set via value setter then dont use default value\n        if (this.pristine) {\n            this.value = this.defaultValue;\n            this.pristine = false;\n        }\n        this.syncAria();\n    }\n\n    attributeChangedCallback(name, oldValue, newValue) {\n        if (oldValue === newValue) return;\n\n        const labelVisibilityChanged = Boolean(oldValue) !== Boolean(newValue);\n\n        if (name === 'label' && labelVisibilityChanged) {\n            super.attributeChangedCallback?.(name, oldValue, newValue);\n            return;\n        }\n\n        if (!this.input) {\n            this.syncAria();\n            return;\n        }\n\n        if (name === 'value') {\n            this._value = newValue ?? '';\n            this.input.value = this.value;\n            this.internals.setFormValue(this.value);\n        } else if (name === 'type') {\n            this.input.type = this.getAttribute('type') || 'text';\n        } else if (name === 'name') {\n            this.input.name = this.name;\n        } else if (name === 'disabled') {\n            this.input.disabled = this.disabled;\n        } else if (name === 'required') {\n            this.input.required = this.required;\n        } else if (name === 'readonly') {\n            this.input.readOnly = this.hasAttribute('readonly');\n        } else if (name === 'placeholder') {\n            this.input.placeholder = this.placeholder;\n        } else if (name === 'label') {\n            if (this.labelElement) this.labelElement.innerText = this.label || '';\n        } else if (name === 'invalid') {\n            this.native?.classList.toggle('has-error', this.invalid);\n\n            if (this.invalid && this.validationMessage) {\n                this.showInvalidMessage();\n            } else if (!this.invalid && this.errorMessage) {\n                this.errorMessage.textContent = '';\n            }\n        }\n\n        this.syncAria();\n    }\n\n    /**\n     * Draws the input element.\n     * @returns {DocumentFragment} The drawn input.\n     */\n    draw() {\n        let hasSlotStart = this.hasSlot(this, 'start');\n        let hasSlotEnd = this.hasSlot(this, 'end');\n        let hasSlotError = this.hasSlot(this, 'error');\n        let fragment = document.createDocumentFragment();\n\n        // Wrapper\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-input', this.variant);\n\n        if (this.invalid) native.classList.add('has-error');\n\n        let wrapper = document.createElement('div');\n        wrapper.classList.add('wrapper');\n\n        let inputWrapper = document.createElement('div');\n        inputWrapper.setAttribute('part', 'wrapper');\n        inputWrapper.classList.add('input-wrapper');\n\n        // Label\n        let label = document.createElement('label');\n        label.setAttribute('part', 'label');\n        label.innerText = this.label;\n        if (this.value && !this.hasAttribute('error')) label.classList.add('fade');\n\n        // Input\n        let input = document.createElement('input');\n        input.setAttribute('type', 'text');\n        input.setAttribute('part', 'input');\n        input.setAttribute('value', this.value || '');\n        input.classList.add('form-control');\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        // Error\n        let errorSlot = document.createElement('slot');\n        errorSlot.setAttribute('name', 'error');\n        errorSlot.setAttribute('part', 'error-slot');\n        this._ariaErrorId = this.id ? `${this.id}-error` : `wje-input-${this._instanceId}-error`;\n        errorSlot.id = this._ariaErrorId;\n\n        let error = document.createElement('div');\n        error.setAttribute('slot', 'error');\n\n        let start = null;\n        if (hasSlotStart) {\n            start = document.createElement('slot');\n            start.setAttribute('name', 'start');\n            start.setAttribute('part', 'start');\n        }\n\n        let end = null;\n        if (hasSlotEnd) {\n            end = document.createElement('slot');\n            end.setAttribute('name', 'end');\n            end.setAttribute('part', 'end');\n        }\n\n        if (hasSlotStart) {\n            wrapper.appendChild(start); // zmenene\n            native.classList.add('has-start');\n        }\n\n        if (this.label) {\n            if (this.variant === 'standard') {\n                native.append(label);\n            } else {\n                inputWrapper.appendChild(label);\n            }\n        }\n\n        inputWrapper.appendChild(input);\n        wrapper.appendChild(inputWrapper);\n\n        native.appendChild(wrapper);\n        native.append(errorSlot);\n\n        this.append(error);\n\n        if (this.clearable) {\n            this.clear = document.createElement('wje-button');\n            this.clear.classList.add('clear');\n            this.clear.setAttribute('fill', 'link');\n            this.clear.setAttribute('part', 'clear');\n\n            let clearIcon = document.createElement('wje-icon');\n            clearIcon.setAttribute('name', 'x');\n            this.clear.appendChild(clearIcon);\n            inputWrapper.appendChild(this.clear);\n        }\n\n        if (hasSlotEnd) {\n            wrapper.appendChild(end);// zmenene\n            native.classList.add('has-end');\n        }\n\n        fragment.appendChild(native);\n\n        this.native = native;\n        this.labelElement = label;\n        this.input = input;\n        this.errorMessage = error;\n\n        this.syncAria();\n        return fragment;\n    }\n\n    /**\n     * Runs after the input is drawn to the DOM.\n     */\n    afterDraw() {\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.input.addEventListener('input', (e) => {\n            this.validate();\n\n            if (this.validateOnChange) {\n                this.pristine = false;\n                this.propagateValidation();\n            }\n\n            if (this.invalid && this.checkValidity()) {\n                this.invalid = false;\n                this.errorMessage.textContent = '';\n                this.internals.setValidity({}, '');\n            }\n\n            this.input.classList.remove('pristine');\n            this.labelElement.classList.add('fade');\n\n            event.dispatchCustomEvent(this, 'wje-input:input', {\n                value: this.input.value,\n            });\n\n            this.value = this.input.value;\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.addEventListener('focus', () => this.input.focus());\n\n        if (this.clear) {\n            this.clear.addEventListener('wje-button:click', (e) => {\n                this.input.value = '';\n                event.dispatchCustomEvent(this.clear, 'wje-input:clear');\n            });\n        }\n\n        this.validate();\n\n        if (this.invalid) {\n            this.showInvalidMessage();\n        }\n\n        this.syncAria();\n    }\n\n    /**\n     * Syncs ARIA attributes on the host element.\n     */\n    syncAria() {\n        const requiredInvalid = this.required && !this.value;\n        const invalid = this.invalid || requiredInvalid;\n        const label = this.label && this.label !== false ? this.label.trim() : '';\n        this.setAriaState({\n            role: 'textbox',\n            disabled: this.disabled,\n            required: this.required,\n            readonly: this.hasAttribute('readonly'),\n            invalid,\n            describedBy: this._ariaErrorId,\n            ...(label ? { label } : {}),\n        });\n    }\n\n    /**\n     * Checks whether the input has a slot.\n     * @param {HTMLElement} el The element to check.\n     * @param {string} slotName The name of the slot to check for.\n     * @returns {boolean} Whether the input has the slot.\n     */\n    hasSlot(el, slotName = null) {\n        let selector = slotName ? `[slot=\"${slotName}\"]` : '[slot]';\n\n        return el.querySelectorAll(selector).length > 0 ? true : false;\n    }\n}\n","import Input from './input.element.js';\n\nexport default Input;\n\nInput.define('wje-input', Input);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-input.js","sources":["../packages/wje-input/input.element.js","../packages/wje-input/input.js"],"sourcesContent":["import { FormAssociatedElement } from '../internals/form-associated-element.js';\nimport { event } from '../utils/event.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents a custom input element. It extends the WJElement class and provides additional functionality for handling input.\n * @documentation https://elements.webjet.sk/components/input\n * @status stable\n * @augments {FormAssociatedElement}\n * @csspart native - The native part.\n * @csspart wrapper - The wrapper part.\n * @csspart input - The input part.\n * @csspart clear - The clear part.\n * @slot start - Slot for content at the start of the input.\n * @slot end - Slot for content at the end of the input.\n * @cssproperty [--wje-input-font-family=var(--wje-font-family)] - Defines the font family for the input text.\n * @cssproperty [--wje-input-background-color=var(--wje-background)] - Specifies the background color of the input field.\n * @cssproperty [--wje-input-color=var(--wje-color)] - Sets the text color within the input field.\n * @cssproperty [--wje-input-color-invalid=var(--wje-color-danger)] - Changes the text color when the input value is invalid.\n * @cssproperty [--wje-input-error-background-color=var(--wje-tooltip-background)] - Controls the background color of the validation error bubble.\n * @cssproperty [--wje-input-error-color=var(--wje-tooltip-color)] - Controls the text color of the validation error bubble.\n * @cssproperty [--wje-input-border-color=var(--wje-border-color)] - Defines the border color of the input field.\n * @cssproperty [--wje-input-border-color-focus=var(--wje-color-primary)] - Specifies the border color when the input is focused.\n * @cssproperty [--wje-input-border-width=1px] - Sets the width of the input border.\n * @cssproperty [--wje-input-border-style=solid] - Defines the border style of the input (e.g., solid, dashed).\n * @cssproperty [--wje-input-border-radius=4px] - Specifies the border radius, creating rounded corners.\n * @cssproperty [--wje-input-margin-bottom=.5rem] - Adds spacing below the input field.\n * @cssproperty [--wje-input-line-height=20px] - Sets the line height of the text within the input field.\n * @cssproperty [--wje-input-slot-padding-inline=.5rem] - Controls the padding on the left and right of the input slot content.\n * // @fires wje-input:input - Dispatched when the input value changes.\n * // @fires wje-input:clear - Dispatched when the input is cleared.\n */\nexport default class Input extends FormAssociatedElement {\n    static _instanceId = 0;\n    /**\n     * Creates an instance of Input.\n     */\n    constructor() {\n        super();\n\n        this.invalid = false;\n        this.pristine = true;\n        this._instanceId = ++Input._instanceId;\n    }\n\n    /**\n     * Setter for the value attribute.\n     * @param {string} value The value to set.\n     */\n    set value(value) {\n        value = value ?? '';\n\n        this.internals.setFormValue(value);\n\n        if (this.input && this.input.value !== value) this.input.value = value;\n\n        this.pristine = false;\n        this._value = value;\n        this.syncAria();\n    }\n\n    /**\n     * Retrieves the value from the input element if available; otherwise,\n     * returns the internal _value property or an empty string as the default.\n     * @returns {string} The current value from the input element, the internal _value, or an empty string.\n     */\n    get value() {\n        return this.input?.value ?? this._value ?? '';\n    }\n\n    /**\n     * Sets the label attribute of the element.\n     * @param {string} value The value to set as the label attribute.\n     */\n    set label(value) {\n        this.setAttribute('label', value);\n    }\n\n    /**\n     * Retrieves the value of the 'label' attribute if it exists.\n     * If the 'label' attribute is not set, it returns false.\n     * @returns {string|boolean} The value of the 'label' attribute as a string, or false if the attribute is not set.\n     */\n    get label() {\n        return this.getAttribute('label') || false;\n    }\n\n    /**\n     * Sets the custom error display attribute for an element.\n     * @param {boolean} value If true, adds the 'custom-error-display' attribute to the element. If false, removes the attribute from the element.\n     */\n    set customErrorDisplay(value) {\n        if (value) {\n            this.setAttribute('custom-error-display', '');\n        } else {\n            this.removeAttribute('custom-error-display');\n        }\n    }\n\n    /**\n     * Getter for the customErrorDisplay attribute.\n     * @returns {boolean} Whether the attribute is present.\n     */\n    get customErrorDisplay() {\n        return this.hasAttribute('custom-error-display');\n    }\n\n    /**\n     * Sets the `validateOnChange` property. If set to a truthy value, it adds the\n     * `validate-on-change` attribute to the element. If set to a falsy value, it\n     * removes the `validate-on-change` attribute from the element.\n     * @param {boolean} value Determines whether to add or remove the\n     * `validate-on-change` attribute. A truthy value adds the attribute, whereas a\n     * falsy value removes it.\n     */\n    set validateOnChange(value) {\n        if (value) {\n            this.setAttribute('validate-on-change', '');\n        } else {\n            this.removeAttribute('validate-on-change');\n        }\n    }\n\n    /**\n     * Getter for the validateOnChange attribute.\n     * @returns {boolean} Whether the attribute is present.\n     */\n    get validateOnChange() {\n        return this.hasAttribute('validate-on-change');\n    }\n\n    /**\n     * @summary Getter for the defaultValue attribute.\n     * This method retrieves the 'value' attribute of the custom input element.\n     * The 'value' attribute represents the default value of the input element.\n     * If the 'value' attribute is not set, it returns an empty string.\n     * @returns {string} The default value of the input element.\n     */\n    get defaultValue() {\n        return this.getAttribute('value') ?? '';\n    }\n\n    /**\n     * @summary Setter for the defaultValue attribute.\n     * This method sets the 'value' attribute of the custom input element to the provided value.\n     * The 'value' attribute represents the default value of the input element.\n     * @param {string} value The value to set as the default value.\n     */\n    set defaultValue(value) {\n        this.setAttribute('value', value);\n    }\n\n    /**\n     * Sets or removes the 'clearable' attribute on the element.\n     * When set to a truthy value, the 'clearable' attribute is added; when falsy, the attribute is removed.\n     * @param {boolean} value Determines whether to set or remove the 'clearable' attribute. If true, the 'clearable' attribute is added. If false, it is removed.\n     */\n    set clearable(value) {\n        if (value) {\n            this.setAttribute('clearable', '');\n        } else {\n            this.removeAttribute('clearable');\n        }\n    }\n\n    /**\n     * Checks if the 'clearable' attribute is present on the element.\n     * @returns {boolean} True if the 'clearable' attribute is set, otherwise false.\n     */\n    get clearable() {\n        return this.hasAttribute('clearable');\n    }\n\n    /**\n     * Sets the placeholder value for an element. If the provided value is non-empty,\n     * it assigns the value to the \"placeholder\" attribute. Otherwise, it removes\n     * the \"placeholder\" attribute from the element.\n     * @param {string} value The placeholder text to set or null/undefined to remove the attribute.\n     */\n    set placeholder(value) {\n        if (value) {\n            this.setAttribute('placeholder', value);\n        } else {\n            this.removeAttribute('placeholder');\n        }\n    }\n\n    /**\n     * Retrieves the value of the 'placeholder' attribute from the element.\n     * If the attribute is not set, it returns an empty string.\n     * @returns {string} The value of the 'placeholder' attribute or an empty string if not set.\n     */\n    get placeholder() {\n        return this.getAttribute('placeholder') || '';\n    }\n\n    /**\n     * Sets the `variant` attribute on the element. If a value is provided, it will set the attribute to the given value.\n     * If no value is provided, it removes the `variant` attribute from the element.\n     * @param {string} value The value to set for the `variant` attribute. If falsy, the attribute is removed.\n     */\n    set variant(value) {\n        if (value) {\n            this.setAttribute('variant', value);\n        } else {\n            this.removeAttribute('variant');\n        }\n    }\n\n    /**\n     * Retrieves the value of the 'variant' attribute from the element.\n     * If the attribute is not set, it defaults to 'default'.\n     * @returns {string} The value of the 'variant' attribute or 'default' if not set.\n     */\n    get variant() {\n        return this.getAttribute('variant') || 'default';\n    }\n\n    /**\n     * The class name of the input element.\n     * @type {string}\n     */\n    className = 'Input';\n\n    /**\n     * Getter for the cssStyleSheet attribute.\n     * @returns {CSSStyleSheet} The CSS style sheet of the input element.\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Getter for the observedAttributes attribute of the input element.\n     * @returns {Array} The attributes to observe for changes.\n     */\n    static get observedAttributes() {\n        return [\n            'type',\n            'value',\n            'name',\n            'disabled',\n            'placeholder',\n            'label',\n            'message',\n            'error-inline',\n            'required',\n            'readonly',\n            'invalid',\n            'min',\n            'max',\n            'step',\n            'inputmode',\n        ];\n    }\n\n    /**\n     * Sets up the attributes for the input.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        // if some value was set via value setter then dont use default value\n        if (this.pristine) {\n            this.value = this.defaultValue;\n            this.pristine = false;\n        }\n        this.syncAria();\n    }\n\n    attributeChangedCallback(name, oldValue, newValue) {\n        if (oldValue === newValue) return;\n\n        const labelVisibilityChanged = Boolean(oldValue) !== Boolean(newValue);\n\n        if (name === 'label' && labelVisibilityChanged) {\n            super.attributeChangedCallback?.(name, oldValue, newValue);\n            return;\n        }\n\n        if (!this.input) {\n            this.syncAria();\n            return;\n        }\n\n        if (name === 'value') {\n            this._value = newValue ?? '';\n            if (this.input.value !== this._value) this.input.value = this._value;\n            this.internals.setFormValue(this._value);\n        } else if (name === 'type') {\n            this.input.type = this.getAttribute('type') || 'text';\n        } else if (name === 'name') {\n            this.input.name = this.name;\n        } else if (name === 'disabled') {\n            this.input.disabled = this.disabled;\n        } else if (name === 'required') {\n            this.input.required = this.required;\n        } else if (name === 'readonly') {\n            this.input.readOnly = this.hasAttribute('readonly');\n        } else if (name === 'placeholder') {\n            this.input.placeholder = this.placeholder;\n        } else if (['min', 'max', 'step', 'inputmode'].includes(name)) {\n            this.#syncNativeAttribute(name, newValue);\n        } else if (name === 'label') {\n            if (this.labelElement) this.labelElement.innerText = this.label || '';\n        } else if (name === 'invalid') {\n            this.native?.classList.toggle('has-error', this.invalid);\n\n            if (this.invalid && this.validationMessage) {\n                this.showInvalidMessage();\n            } else if (!this.invalid && this.errorMessage) {\n                this.errorMessage.textContent = '';\n            }\n        }\n\n        this.syncAria();\n    }\n\n    /**\n     * Draws the input element.\n     * @returns {DocumentFragment} The drawn input.\n     */\n    draw() {\n        let hasSlotStart = this.hasSlot(this, 'start');\n        let hasSlotEnd = this.hasSlot(this, 'end');\n        let hasSlotError = this.hasSlot(this, 'error');\n        let fragment = document.createDocumentFragment();\n\n        // Wrapper\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-input', this.variant);\n\n        if (this.invalid) native.classList.add('has-error');\n\n        let wrapper = document.createElement('div');\n        wrapper.classList.add('wrapper');\n\n        let inputWrapper = document.createElement('div');\n        inputWrapper.setAttribute('part', 'wrapper');\n        inputWrapper.classList.add('input-wrapper');\n\n        // Label\n        let label = document.createElement('label');\n        label.setAttribute('part', 'label');\n        label.innerText = this.label;\n        if (this.value && !this.hasAttribute('error')) label.classList.add('fade');\n\n        // Input\n        let input = document.createElement('input');\n        input.setAttribute('type', 'text');\n        input.setAttribute('part', 'input');\n        input.setAttribute('value', this.value || '');\n        input.classList.add('form-control');\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        // Error\n        let errorSlot = document.createElement('slot');\n        errorSlot.setAttribute('name', 'error');\n        errorSlot.setAttribute('part', 'error-slot');\n        this._ariaErrorId = this.id ? `${this.id}-error` : `wje-input-${this._instanceId}-error`;\n        errorSlot.id = this._ariaErrorId;\n\n        let error = document.createElement('div');\n        error.setAttribute('slot', 'error');\n\n        let start = null;\n        if (hasSlotStart) {\n            start = document.createElement('slot');\n            start.setAttribute('name', 'start');\n            start.setAttribute('part', 'start');\n        }\n\n        let end = null;\n        if (hasSlotEnd) {\n            end = document.createElement('slot');\n            end.setAttribute('name', 'end');\n            end.setAttribute('part', 'end');\n        }\n\n        if (hasSlotStart) {\n            wrapper.appendChild(start); // zmenene\n            native.classList.add('has-start');\n        }\n\n        if (this.label) {\n            if (this.variant === 'standard') {\n                native.append(label);\n            } else {\n                inputWrapper.appendChild(label);\n            }\n        }\n\n        inputWrapper.appendChild(input);\n        wrapper.appendChild(inputWrapper);\n\n        native.appendChild(wrapper);\n        native.append(errorSlot);\n\n        this.append(error);\n\n        if (this.clearable) {\n            this.clear = document.createElement('wje-button');\n            this.clear.classList.add('clear');\n            this.clear.setAttribute('fill', 'link');\n            this.clear.setAttribute('part', 'clear');\n\n            let clearIcon = document.createElement('wje-icon');\n            clearIcon.setAttribute('name', 'x');\n            this.clear.appendChild(clearIcon);\n            inputWrapper.appendChild(this.clear);\n        }\n\n        if (hasSlotEnd) {\n            wrapper.appendChild(end);// zmenene\n            native.classList.add('has-end');\n        }\n\n        fragment.appendChild(native);\n\n        this.native = native;\n        this.labelElement = label;\n        this.input = input;\n        this.errorMessage = error;\n\n        this.syncAria();\n        return fragment;\n    }\n\n    /**\n     * Runs after the input is drawn to the DOM.\n     */\n    afterDraw() {\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.input.addEventListener('input', (e) => {\n            this.validate();\n\n            if (this.validateOnChange) {\n                this.pristine = false;\n                this.propagateValidation();\n            }\n\n            if (this.invalid && this.checkValidity()) {\n                this.invalid = false;\n                this.errorMessage.textContent = '';\n                this.internals.setValidity({}, '');\n            }\n\n            this.input.classList.remove('pristine');\n            this.labelElement.classList.add('fade');\n\n            event.dispatchCustomEvent(this, 'wje-input:input', {\n                value: this.input.value,\n            });\n\n            this.pristine = false;\n            this._value = this.input.value;\n            this.internals.setFormValue(this._value);\n            this.syncAria();\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.addEventListener('focus', () => this.input.focus());\n\n        if (this.clear) {\n            this.clear.addEventListener('wje-button:click', (e) => {\n                this.input.value = '';\n                event.dispatchCustomEvent(this.clear, 'wje-input:clear');\n            });\n        }\n\n        this.validate();\n\n        if (this.invalid) {\n            this.showInvalidMessage();\n        }\n\n        this.syncAria();\n    }\n\n    /**\n     * Syncs ARIA attributes on the host element.\n     */\n    syncAria() {\n        const requiredInvalid = this.required && !this.value;\n        const invalid = this.invalid || requiredInvalid;\n        const label = this.label && this.label !== false ? this.label.trim() : '';\n        this.setAriaState({\n            role: 'textbox',\n            disabled: this.disabled,\n            required: this.required,\n            readonly: this.hasAttribute('readonly'),\n            invalid,\n            describedBy: this._ariaErrorId,\n            ...(label ? { label } : {}),\n        });\n    }\n\n    /**\n     * Checks whether the input has a slot.\n     * @param {HTMLElement} el The element to check.\n     * @param {string} slotName The name of the slot to check for.\n     * @returns {boolean} Whether the input has the slot.\n     */\n    hasSlot(el, slotName = null) {\n        let selector = slotName ? `[slot=\"${slotName}\"]` : '[slot]';\n\n        return el.querySelectorAll(selector).length > 0 ? true : false;\n    }\n\n    /**\n     * Syncs an attribute from the host element to the native input without redrawing.\n     * @param {string} name The attribute name.\n     * @param {string|null} value The new attribute value.\n     */\n    #syncNativeAttribute(name, value) {\n        if (!(this.input instanceof HTMLInputElement)) return;\n\n        if (value === null) {\n            this.input.removeAttribute(name);\n        } else {\n            this.input.setAttribute(name, value);\n        }\n    }\n}\n","import Input from './input.element.js';\n\nexport default Input;\n\nInput.define('wje-input', Input);\n"],"names":[],"mappings":"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"}

package/dist/wje-master.js

@@ -105,7 +105,7 @@ import { default as default89 } from "./wje-tooltip.js";
 import { default as default90 } from "./wje-tree.js";
 import { default as default91 } from "./wje-tree-item.js";
 import { default as default92 } from "./wje-visually-hidden.js";
-import { P } from "./popup.element-DklicGea.js";
+import { P } from "./popup.element-C8-g3WLs.js";
 const skSk = {
   code: "sk-sk",
   name: "Slovak",

package/dist/wje-options.js

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

package/dist/wje-options.js.map

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

package/dist/wje-popup.js

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

package/dist/wje-select.js

@@ -9,7 +9,7 @@ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read fr
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _addedOptions, _htmlOptions, _portaledOptionRecords, _Select_instances, htmlSelectedItem_fn, getSelectedOptions_fn, hasVisibleOptions_fn, updateEmptyState_fn, _applySearchFilter, _handleOptionsLoad, _onMenuItemClickCapture, _syncPortalStyles, copyPortalCustomProperties_fn, syncOptionOwners_fn, portalOptions_fn, _restorePortaledOptions, syncOptionCheckbox_fn;
+var _addedOptions, _htmlOptions, _portaledOptionRecords, _Select_instances, htmlSelectedItem_fn, getSelectedOptions_fn, hasVisibleOptions_fn, updateEmptyState_fn, _applySearchFilter, _handleOptionsLoad, _onMenuItemClickCapture, _syncPortalStyles, copyPortalCustomProperties_fn, syncOptionOwners_fn, portalOptions_fn, _restorePortaledOptions, focusFindInput_fn, syncOptionCheckbox_fn;
 import { F as FormAssociatedElement } from "./form-associated-element-DEQ4y-jn.js";
 import { event } from "./event.js";
 import { Localizer } from "./localize.js";
@@ -22,7 +22,7 @@ import Input from "./wje-input.js";
 import Option from "./wje-option.js";
 import Options from "./wje-options.js";
 import Checkbox from "./wje-checkbox.js";
-import { P as Popup } from "./popup.element-DklicGea.js";
+import { P as Popup } from "./popup.element-C8-g3WLs.js";
 const styles = "/*\n[ WJ Select ]\n*/\n\n:host {\n    margin-bottom: var(--wje-select-margin-bottom);\n    width: 100%;\n    display: block;\n    [slot='arrow'] {\n        transform: rotate(0deg);\n        transition: all 0.2s ease-in;\n    }\n    label {\n        margin: var(--wje-select-label-margin);\n        padding: var(--wje-select-label-padding);\n        display: var(--wje-select-label-display);\n        opacity: 1;\n        cursor: text;\n        transition: opacity 0.2s ease;\n        line-height: var(--wje-select-label-line-height);\n        font-size: var(--wje-select-label-font-size);\n    }\n}\n\n.native-select {\n    position: relative;\n    &.default {\n        .wrapper {\n            display: block;\n						background-color: var(--wje-select-background);\n            border-width: var(--wje-select-border-width);\n            border-style: var(--wje-select-border-style);\n            border-color: var(--wje-select-border-color);\n            border-radius: var(--wje-select-border-radius);\n            padding-inline: 0.5rem;\n            padding-top: 0.125rem;\n            padding-bottom: 0.125rem;\n        }\n        .input-wrapper {\n            padding: 0;\n            min-height: 28px;\n            margin-top: -4px;\n        }\n        &.focused {\n            wje-label {\n                opacity: 0.67;\n                font-size: 12px;\n                letter-spacing: normal;\n            }\n        }\n        label {\n            &.fade {\n                opacity: 0.5;\n                font-size: 12px;\n                letter-spacing: normal;\n            }\n        }\n    }\n    &.standard {\n        .wrapper {\n            height: var(--wje-select-height);\n            box-sizing: border-box;\n            background-color: var(--wje-select-background);\n            border-width: var(--wje-select-border-width);\n            border-style: var(--wje-select-border-style);\n            border-color: var(--wje-select-border-color);\n            border-radius: var(--wje-select-border-radius);\n        }\n        .input-wrapper {\n            background: transparent;\n            width: 100%;\n        }\n        slot[name='error'] {\n            position: static;\n\n            background: transparent;\n            padding: 0.25rem 0;\n            left: auto;\n            transform: none;\n            color: var(--wje-input-color-invalid);\n            font-size: 12px;\n            line-height: normal;\n        }\n    }\n}\n\n.wrapper {\n    display: flex;\n    width: 100%;\n}\n\n.input-wrapper {\n    display: grid;\n    grid-template-columns: auto 1fr auto auto auto;\n    align-items: center;\n    background-color: var(--wje-select-background);\n    /*min-height: 28px;*/\n    color: var(--wje-select-color);\n    line-height: var(--wje-select-line-height);\n    appearance: none;\n    padding: 2px 0.5rem;\n    font-size: 14px !important;\n    font-weight: normal;\n    vertical-align: middle;\n    input[readonly] {\n        pointer-events: none;\n        caret-color: transparent;\n    }\n}\n\ninput {\n    color: var(--wje-select-color);\n    line-height: var(--wje-select-line-height);\n    font-size: 14px !important;\n    font-weight: 400;\n    letter-spacing: 0.01em;\n    border: medium;\n    height: 25px;\n    min-height: 25px;\n    padding: 0;\n    background: none;\n    box-shadow: none;\n    width: 100%;\n    outline: 0;\n    font-size: 14px !important;\n}\n\n::placeholder {\n    opacity: 1;\n}\n\n:host [active] {\n    .wrapper {\n        border-radius: var(--wje-select-border-radius);\n    }\n    [slot='arrow'] {\n        transform: rotate(180deg);\n        transition: all 0.2s ease-in;\n    }\n}\n\n.options-wrapper {\n    border-width: var(--wje-select-options-border-width);\n    border-style: var(--wje-select-options-border-style);\n    border-color: var(--wje-select-options-border-color);\n    border-radius: var(--wje-select-options-border-radius);\n    margin-top: calc(0px - var(--wje-select-border-width));\n    background-color: var(--wje-select-options-background-color);\n    overflow: hidden;\n}\n\n.find {\n    margin-block: var(--wje-select-find-margin-block);\n    margin-inline: var(--wje-select-find-margin-inline);\n    width: var(--wje-select-find-width);\n}\n\n.list {\n    overflow: auto;\n    height: 100%;\n    position: relative;\n}\n\n.list:has(.empty:not([hidden])) {\n    min-height: 44px;\n}\n\n.empty {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: var(--wje-spacing-small);\n    color: var(--wje-select-color);\n    text-align: center;\n    background-color: var(--wje-select-options-background-color);\n    pointer-events: none;\n}\n\n.empty[hidden] {\n    display: none;\n}\n\n.options-wrapper:has(.find) .list {\n    height: calc(100% - 32px - 2 * var(--wje-select-find-margin-block));\n}\n\n:host([multiple]) input {\n    position: absolute;\n    z-index: -1;\n    top: 0;\n    left: 0;\n    width: 0;\n    height: 0;\n    opacity: 0;\n}\n\n:host([multiple]) .chips {\n    display: flex;\n    flex: 1;\n    align-items: center;\n    flex-wrap: wrap;\n    gap: var(--wje-spacing-3x-small);\n}\n\n:host([disabled]) .input-wrapper {\n    opacity: 0.5;\n    pointer-events: none;\n    cursor: not-allowed;\n}\n\n.counter {\n    padding-inline: 0.5rem;\n}\n\nwje-chip {\n    --wje-chip-margin: 0 0.25rem 0 0;\n}\n\nwje-button {\n    --wje-padding-top: 0.25rem;\n    --wje-padding-start: 0.25rem;\n    --wje-padding-end: 0.25rem;\n    --wje-padding-bottom: 0.25rem;\n    --wje-button-margin-inline: 0 0.25rem;\n}\n\n.slot-start,\n.slot-end {\n    &:not(:empty) {\n        margin-right: 0.5rem;\n    }\n}\n\nslot[name='error'] {\n    display: none;\n}\n\n:host([invalid]) slot[name='error'] {\n    display: block;\n}\n\nslot[name='error'] {\n    display: none;\n    position: absolute;\n    max-width: 100%;\n    min-width: auto;\n    border-radius: 50px;\n    background-color: var(--wje-select-error-background-color, var(--wje-tooltip-background));\n    padding: 0.25rem 0.5rem;\n    top: 0;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    color: var(--wje-select-error-color, var(--wje-tooltip-color));\n    font-size: var(--wje-font-size-small);\n    width: max-content;\n    line-height: normal;\n}\n\n.input-hidden{\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    padding: 0;\n    margin: 0;\n    opacity: 0;\n    z-index: -1;\n}\n\n:host([required]) .wrapper::after {\n    color: var(--wje-input-color-invalid);\n    content: var(--wje-input-required-symbol);\n    font-size: 24px;\n    position: absolute;\n    right: 12px;\n    top: 0;\n}\n\n:host([required]) .standard .input-wrapper::after {\n    right: 13px;\n    top: -20px;\n}\n";
 const _Select = class _Select extends FormAssociatedElement {
   constructor() {
@@ -668,7 +668,7 @@ const _Select = class _Select extends FormAssociatedElement {
       find.setAttribute("part", "find");
       find.clearable = true;
       find.classList.add("find");
-      optionsWrapper.appendChild(find);
+      optionsWrapper.append(find);
       this.findEl = find;
     }
     let slotFooter = document.createElement("slot");
@@ -745,6 +745,7 @@ const _Select = class _Select extends FormAssociatedElement {
         let subtractHeight = rect.height + totalHeight;
         this.list.style.height = `calc(100% - ${subtractHeight}px)`;
       }
+      __privateMethod(this, _Select_instances, focusFindInput_fn).call(this);
     });
     __privateSet(this, _htmlOptions, Array.from(this.querySelectorAll(":scope > wje-option")).map((option) => {
       return {
@@ -1156,6 +1157,16 @@ portalOptions_fn = function(container = ((_a) => (_a = this.popup) == null ? voi
   });
 };
 _restorePortaledOptions = new WeakMap();
+focusFindInput_fn = function() {
+  if (!this.hasAttribute("find") || !(this.findEl instanceof HTMLElement)) return;
+  requestAnimationFrame(() => {
+    var _a;
+    const input = this.findEl.input || ((_a = this.findEl.shadowRoot) == null ? void 0 : _a.querySelector("input"));
+    if (input instanceof HTMLElement) {
+      input.focus();
+    }
+  });
+};
 syncOptionCheckbox_fn = function(option) {
   const checkbox = option.querySelector('wje-checkbox[slot="check"]');
   if (!checkbox) return;