wj-elements 0.7.6 → 0.8.0

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        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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"}
+{"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":["Input","FormAssociatedElement","constructor","super","className","this","invalid","pristine","_instanceId","value","internals","setFormValue","input","_value","syncAria","setAttribute","label","getAttribute","removeAttribute","hasAttribute","validateOnChange","defaultValue","clearable","placeholder","cssStyleSheet","observedAttributes","setupAttributes","isShadowRoot","name","oldValue","newValue","labelVisibilityChanged","Boolean","attributeChangedCallback","type","disabled","required","readOnly","includes","labelElement","innerText","native","classList","toggle","validationMessage","showInvalidMessage","errorMessage","textContent","hasSlotStart","hasSlot","hasSlotEnd","fragment","document","createDocumentFragment","createElement","add","variant","wrapper","inputWrapper","Array","from","attributes","map","attr","forEach","errorSlot","_ariaErrorId","id","error","start","end","appendChild","append","clear","clearIcon","afterDraw","addEventListener","e","remove","target","validate","propagateValidation","checkValidity","setValidity","event","dispatchCustomEvent","customErrorDisplay","preventDefault","focus","requiredInvalid","trim","setAriaState","role","readonly","describedBy","el","slotName","selector","querySelectorAll","length","syncNativeAttribute","HTMLInputElement","static","define"],"mappings":";;;;;;;;;;;;AAgCe,MAAMA,KAAN,MAAMA,WAAcC;EAK/B,cAAAC;AACIC,UAAAA;AANO;AA8LXC,qCAAY;AAtLRC,SAAKC,iBACLD,KAAKE,WAAAA,MACLF,KAAKG,cAAAA,EAAgBR,GAAMQ;AAAAA,EAC/B;AAAA,EAMA,IAAA,MAAUC,IAAAA;AACNA,IAAAA,KAAQA,MAAS,IAEjBJ,KAAKK,UAAUC,aAAaF,EAAAA,GAExBJ,KAAKO,SAASP,KAAKO,MAAMH,UAAUA,OAAOJ,KAAKO,MAAMH,QAAQA,KAEjEJ,KAAKE,WAAAA,OACLF,KAAKQ,SAASJ,IACdJ,KAAKS,SAAAA;AAAAA,EACT;AAAA,EAOA,IAAA,QAAIL;;AACA,aAAOJ,UAAKO,UAALP,mBAAYI,UAASJ,KAAKQ,UAAU;AAAA,EAC/C;AAAA,EAMA,IAAA,MAAUJ,IAAAA;AACNJ,SAAKU,aAAa,SAASN,EAAAA;AAAAA,EAC/B;AAAA,EAOA,YAAIO;AACA,WAAOX,KAAKY,aAAa,OAAA,KAAA;AAAA,EAC7B;AAAA,EAMA,IAAA,mBAAuBR,IAAAA;AACfA,IAAAA,KACAJ,KAAKU,aAAa,wBAAwB,EAAA,IAE1CV,KAAKa,gBAAgB,sBAAA;AAAA,EAE7B;AAAA,EAMA,IAAA;AACI,WAAOb,KAAKc,aAAa,sBAAA;AAAA,EAC7B;AAAA,EAUA,IAAA,iBAAqBV,IAAAA;AACbA,IAAAA,KACAJ,KAAKU,aAAa,sBAAsB,EAAA,IAExCV,KAAKa,gBAAgB,oBAAA;AAAA,EAE7B;AAAA,EAMA,IAAA,mBAAIE;AACA,WAAOf,KAAKc,aAAa,oBAAA;AAAA,EAC7B;AAAA,EASA,IAAA,eAAIE;AACA,WAAOhB,KAAKY,aAAa,OAAA,KAAY;AAAA,EACzC;AAAA,EAQA,IAAA,aAAiBR,IAAAA;AACbJ,SAAKU,aAAa,SAASN,EAAAA;AAAAA,EAC/B;AAAA,EAOA,IAAA,UAAcA;AACNA,IAAAA,KACAJ,KAAKU,aAAa,aAAa,EAAA,IAE/BV,KAAKa,gBAAgB,WAAA;AAAA,EAE7B;AAAA,EAMA,IAAA,YAAII;AACA,WAAOjB,KAAKc,aAAa,WAAA;AAAA,EAC7B;AAAA,EAQA,IAAA,YAAgBV,IAAAA;AACRA,IAAAA,KACAJ,KAAKU,aAAa,eAAeN,EAAAA,IAEjCJ,KAAKa,gBAAgB,aAAA;AAAA,EAE7B;AAAA,EAOA,IAAA,cAAIK;AACA,WAAOlB,KAAKY,aAAa,aAAA,KAAkB;AAAA,EAC/C;AAAA,EAOA,IAAA,QAAYR,IAAAA;AACJA,IAAAA,KACAJ,KAAKU,aAAa,WAAWN,EAAAA,IAE7BJ,KAAKa,gBAAgB,SAAA;AAAA,EAE7B;AAAA,EAOA,IAAA;AACI,WAAOb,KAAKY,aAAa,SAAA,KAAc;AAAA,EAC3C;AAAA,EAYA,WAAA,gBAAWO;AACP;EACJ;AAAA,EAMA,gCAAWC;AACP,WAAO,CACH,QACA,SACA,QACA,YACA,eACA,SACA,WACA,gBACA,YACA,YACA,WACA,OACA,OACA,QACA,WAAA;AAAA,EAER;AAAA,EAKA,kBAAAC;AACIrB,SAAKsB,eAAe,QAEhBtB,KAAKE,aACLF,KAAKI,QAAQJ,KAAKgB,cAClBhB,KAAKE,WAAAA,QAETF,KAAKS,SAAAA;AAAAA,EACT;AAAA,EAEA,yBAAyBc,IAAMC,IAAUC,IAAAA;;AACrC,QAAID,OAAaC,GAAU;AAE3B,UAAMC,IAAyBC,QAAQH,EAAAA,MAAcG,QAAQF,EAAAA;AAEhD,gBAATF,MAAoBG,KACpB5B,WAAM8B,6BAAN9B,8BAAiCyB,IAAMC,IAAUC,MAIhDzB,KAAKO,SAKG,YAATgB,MACAvB,KAAKQ,SAASiB,MAAY,IACtBzB,KAAKO,MAAMH,UAAUJ,KAAKQ,WAAQR,KAAKO,MAAMH,QAAQJ,KAAKQ,SAC9DR,KAAKK,UAAUC,aAAaN,KAAKQ,MAAAA,KACjB,WAATe,KACPvB,KAAKO,MAAMsB,OAAO7B,KAAKY,aAAa,MAAA,KAAW,SAC/B,WAATW,KACPvB,KAAKO,MAAMgB,OAAOvB,KAAKuB,OACP,eAATA,KACPvB,KAAKO,MAAMuB,WAAW9B,KAAK8B,WACX,eAATP,KACPvB,KAAKO,MAAMwB,WAAW/B,KAAK+B,WACX,eAATR,KACPvB,KAAKO,MAAMyB,WAAWhC,KAAKc,aAAa,UAAA,IACxB,kBAATS,KACPvB,KAAKO,MAAMW,cAAclB,KAAKkB,cACvB,CAAC,OAAO,OAAO,QAAQ,WAAA,EAAae,SAASV,EAAAA,IACpDvB,sBAAAA,oBAAAA,WAA0BuB,IAAME,MAChB,YAATF,KACHvB,KAAKkC,iBAAclC,KAAKkC,aAAaC,YAAYnC,KAAKW,SAAS,MACnD,cAATY,QACPvB,UAAKoC,WAALpC,mBAAaqC,UAAUC,OAAO,aAAatC,KAAKC,UAE5CD,KAAKC,WAAWD,KAAKuC,oBACrBvC,KAAKwC,mBAAAA,IAAAA,CACGxC,KAAKC,WAAWD,KAAKyC,iBAC7BzC,KAAKyC,aAAaC,cAAc,MAIxC1C,KAAKS,SAAAA,KAlCDT,KAAKS,SAAAA;AAAAA,EAmCb;AAAA,EAMA;AACI,QAAIkC,KAAe3C,KAAK4C,QAAQ5C,MAAM,OAAA,GAClC6C,KAAa7C,KAAK4C,QAAQ5C,MAAM,KAAA;AACjBA,SAAK4C,QAAQ5C,MAAM,OAAA;AACtC,QAAI8C,KAAWC,SAASC,uBAAAA,GAGpBZ,IAASW,SAASE,cAAc,KAAA;AACpCb,MAAO1B,aAAa,QAAQ,QAAA,GAC5B0B,EAAOC,UAAUa,IAAI,gBAAgBlD,KAAKmD,OAAAA,GAEtCnD,KAAKC,WAASmC,EAAOC,UAAUa,IAAI,WAAA;AAEvC,QAAIE,IAAUL,SAASE,cAAc,KAAA;AACrCG,MAAQf,UAAUa,IAAI,SAAA;AAEtB,QAAIG,IAAeN,SAASE,cAAc,KAAA;AAC1CI,MAAa3C,aAAa,QAAQ,YAClC2C,EAAahB,UAAUa,IAAI,eAAA;AAG3B,QAAIvC,IAAQoC,SAASE,cAAc,OAAA;AACnCtC,MAAMD,aAAa,QAAQ,OAAA,GAC3BC,EAAMwB,YAAYnC,KAAKW,OACnBX,KAAKI,SAAAA,CAAUJ,KAAKc,aAAa,YAAUH,EAAM0B,UAAUa,IAAI,MAAA;AAGnE,QAAI3C,IAAQwC,SAASE,cAAc,OAAA;AACnC1C,MAAMG,aAAa,QAAQ,MAAA,GAC3BH,EAAMG,aAAa,QAAQ,OAAA,GAC3BH,EAAMG,aAAa,SAASV,KAAKI,SAAS,EAAA,GAC1CG,EAAM8B,UAAUa,IAAI,cAAA;AAEDI,UAAMC,KAAKvD,KAAKwD,UAAAA,EAAYC,IAAKC,CAAAA,OAASA,GAAKnC,MAEvDoC,QAASD,CAAAA,OAAAA;AACZ1D,WAAKc,aAAa4C,EAAAA,KAClBnD,EAAMG,aAAagD,IAAM1D,KAAK0D,EAAAA,KAAS,EAAA;AAAA,IAAA,CAAA;AAK/C,QAAIE,IAAYb,SAASE,cAAc,MAAA;AACvCW,MAAUlD,aAAa,QAAQ,OAAA,GAC/BkD,EAAUlD,aAAa,QAAQ,YAAA,GAC/BV,KAAK6D,eAAe7D,KAAK8D,KAAK,GAAG9D,KAAK8D,EAAAA,WAAa,aAAa9D,KAAKG,WAAAA,UACrEyD,EAAUE,KAAK9D,KAAK6D;AAEpB,QAAIE,IAAQhB,SAASE,cAAc;AACnCc,MAAMrD,aAAa,QAAQ,OAAA;AAE3B,QAAIsD,IAAQ;AACRrB,IAAAA,OACAqB,IAAQjB,SAASE,cAAc,MAAA,GAC/Be,EAAMtD,aAAa,QAAQ,OAAA,GAC3BsD,EAAMtD,aAAa,QAAQ,OAAA;AAG/B,QAAIuD,IAAM;AA4BV,QA3BIpB,OACAoB,IAAMlB,SAASE,cAAc,MAAA,GAC7BgB,EAAIvD,aAAa,QAAQ,KAAA,GACzBuD,EAAIvD,aAAa,QAAQ,KAAA,IAGzBiC,OACAS,EAAQc,YAAYF,CAAAA,GACpB5B,EAAOC,UAAUa,IAAI,WAAA,IAGrBlD,KAAKW,UACgB,eAAjBX,KAAKmD,UACLf,EAAO+B,OAAOxD,CAAAA,IAEd0C,EAAaa,YAAYvD,CAAAA,IAIjC0C,EAAaa,YAAY3D,CAAAA,GACzB6C,EAAQc,YAAYb,CAAAA,GAEpBjB,EAAO8B,YAAYd,CAAAA,GACnBhB,EAAO+B,OAAOP,CAAAA,GAEd5D,KAAKmE,OAAOJ,IAER/D,KAAKiB,WAAW;AAChBjB,WAAKoE,QAAQrB,SAASE,cAAc,YAAA,GACpCjD,KAAKoE,MAAM/B,UAAUa,IAAI,OAAA,GACzBlD,KAAKoE,MAAM1D,aAAa,QAAQ,MAAA,GAChCV,KAAKoE,MAAM1D,aAAa,QAAQ,OAAA;AAEhC,UAAI2D,KAAYtB,SAASE,cAAc,UAAA;AACvCoB,MAAAA,GAAU3D,aAAa,QAAQ,GAAA,GAC/BV,KAAKoE,MAAMF,YAAYG,KACvBhB,EAAaa,YAAYlE,KAAKoE,KAAAA;AAAAA,IAClC;AAeA,WAbIvB,OACAO,EAAQc,YAAYD,CAAAA,GACpB7B,EAAOC,UAAUa,IAAI,aAGzBJ,GAASoB,YAAY9B,CAAAA,GAErBpC,KAAKoC,SAASA,GACdpC,KAAKkC,eAAevB,GACpBX,KAAKO,QAAQA,GACbP,KAAKyC,eAAesB,GAEpB/D,KAAKS,SAAAA,GACEqC;AAAAA,EACX;AAAA,EAKA,YAAAwB;AACItE,SAAKO,MAAMgE,iBAAiB,SAAUC,CAAAA,OAAAA;AAClCxE,WAAKkC,aAAaG,UAAUa,IAAI,MAAA,GAChClD,KAAKoC,OAAOC,UAAUa,IAAI;QAG9BlD,KAAKO,MAAMgE,iBAAiB,QAASC,CAAAA,OAAAA;AACjCxE,WAAKoC,OAAOC,UAAUoC,OAAO,SAAA,GACxBD,GAAEE,OAAOtE,SAAOJ,KAAKkC,aAAaG,UAAUoC,OAAO,MAAA;AAAA,IAAA,CAAA,GAG5DzE,KAAKO,MAAMgE,iBAAiB,SAAUC,CAAAA,OAAAA;AAClCxE,WAAK2E,SAAAA,GAED3E,KAAKe,qBACLf,KAAKE,WAAAA,OACLF,KAAK4E,oBAAAA,IAGL5E,KAAKC,WAAWD,KAAK6E,cAAAA,MACrB7E,KAAKC,UAAAA,OACLD,KAAKyC,aAAaC,cAAc,IAChC1C,KAAKK,UAAUyE,YAAY,CAAA,GAAI,EAAA,IAGnC9E,KAAKO,MAAM8B,UAAUoC,OAAO,UAAA,GAC5BzE,KAAKkC,aAAaG,UAAUa,IAAI,MAAA,GAEhC6B,EAAMC,oBAAoBhF,MAAM,mBAAmB,EAC/CI,OAAOJ,KAAKO,MAAMH,MAAAA,CAAAA,GAGtBJ,KAAKE,WAAAA,OACLF,KAAKQ,SAASR,KAAKO,MAAMH,OACzBJ,KAAKK,UAAUC,aAAaN,KAAKQ,MAAAA,GACjCR,KAAKS,SAAAA;AAAAA,IAAAA,CAAAA,GAGTT,KAAKuE,iBAAiB,WAAYC,CAAAA,OAAAA;AAC9BxE,WAAKC,UAAAA,MACLD,KAAKE,kBAELF,KAAKwC,mBAAAA,GAEDxC,KAAKiF,sBACLT,GAAEU,eAAAA;AAAAA,IAAAA,CAAAA,GAIVlF,KAAKuE,iBAAiB,SAAS,MAAMvE,KAAKO,MAAM4E,MAAAA,CAAAA,GAE5CnF,KAAKoE,SACLpE,KAAKoE,MAAMG,iBAAiB,oBAAqBC,CAAAA,OAAAA;AAC7CxE,WAAKO,MAAMH,QAAQ,IACnB2E,EAAMC,oBAAoBhF,KAAKoE,OAAO,iBAAA;AAAA,IAAA,CAAA,GAI9CpE,KAAK2E,SAAAA,GAED3E,KAAKC,WACLD,KAAKwC,sBAGTxC,KAAKS,SAAAA;AAAAA,EACT;AAAA,EAKA,WAAAA;AACI,UAAM2E,KAAkBpF,KAAK+B,YAAAA,CAAa/B,KAAKI,OACzCH,KAAUD,KAAKC,WAAWmF,IAC1BzE,KAAQX,KAAKW,SAAAA,UAASX,KAAKW,QAAkBX,KAAKW,MAAM0E,KAAAA,IAAS;AACvErF,SAAKsF,aAAa,EACdC,MAAM,WACNzD,UAAU9B,KAAK8B,UACfC,UAAU/B,KAAK+B,UACfyD,UAAUxF,KAAKc,aAAa,UAAA,GAC5Bb,SAAAA,IACAwF,aAAazF,KAAK6D,cAAAA,GACdlD,KAAQ,EAAEA,OAAAA,GAAAA,IAAU;EAEhC;AAAA,EAQA,QAAQ+E,IAAIC,KAAW,MAAA;AACnB,QAAIC,KAAWD,KAAW,UAAUA,EAAAA,OAAe;AAEnD,WAAOD,GAAGG,iBAAiBD,EAAAA,EAAUE,SAAS;AAAA,EAClD;AAeA;AApgBW;AA4fX,OAAAC,SAAqBxE,IAAMnB,IAAAA;AACjBJ,OAAKO,iBAAiByF,qBAEd,SAAV5F,KACAJ,KAAKO,MAAMM,gBAAgBU,EAAAA,IAE3BvB,KAAKO,MAAMG,aAAaa,IAAMnB,EAAAA;AAEtC;AAngBA6F,cADiBtG,IACjBsG,eAAqB;AADV,IAAMtG,IAAN;AC5BfA,EAAMuG,OAAO,aAAavG,CAAAA;"}

package/dist/wje-item.js

@@ -1,71 +1,26 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import WJElement from "./wje-element.js";
-const styles = "/*\n[ WJ Item ]\n*/\n\n:host {\n    display: block;\n    /*position: relative;*/\n    align-items: center;\n    justify-content: space-between;\n    outline: none;\n    color: var(--wje-item-color);\n    text-align: initial;\n    text-decoration: none;\n    box-sizing: border-box;\n    width: 100%;\n}\n\n.item-native {\n    border-radius: var(--wje-item-border-radius);\n    padding-top: var(--wje-item-padding-top);\n    padding-bottom: var(--wje-item-padding-bottom);\n    padding-inline: var(--wje-item-padding-start) var(--wje-item-padding-end);\n    margin: 0;\n    display: flex;\n    align-items: inherit;\n    justify-content: inherit;\n    width: 100%;\n    min-height: var(--wje-item-min-height);\n    transition: var(--wje-item-transition);\n    outline: none;\n    background: var(--wje-item-background);\n    box-sizing: border-box;\n    z-index: 1;\n    text-decoration: none;\n    color: var(--wje-item-color);\n\n    .item-inner {\n        margin: 0;\n        padding: var(--wje-item-inner-padding-top) var(--wje-item-inner-padding-end)\n            var(--wje-item-inner-padding-bottom) var(--wje-item-inner-padding-start);\n\n        display: flex;\n        position: relative;\n\n        flex: 1 1 0;\n        flex-direction: inherit;\n        align-items: inherit;\n        align-self: stretch;\n\n        min-height: inherit;\n\n        border-width: var(--wje-item-border-width);\n        border-style: var(--wje-item-border-style);\n        border-color: var(--wje-item-border-color);\n\n        box-shadow: var(--wje-item-inner-box-shadow);\n        overflow: inherit;\n        box-sizing: border-box;\n\n        .input-wrapper {\n            display: flex;\n            flex: 1 1 0;\n            flex-direction: inherit;\n            align-items: inherit;\n            align-self: stretch;\n            text-overflow: ellipsis;\n            overflow: inherit;\n            box-sizing: border-box;\n        }\n    }\n\n    .item-bottom {\n        padding: 0 var(--wje-item-inner-padding-end) 0 var(--wje-item-padding-start);\n        display: flex;\n        justify-content: space-between;\n    }\n}\n\n@media (any-hover: hover) {\n    :host(:hover) .item-native {\n        position: relative;\n        color: var(--wje-item-color);\n\n        :after {\n            transition: var(--wje-item-transition);\n            z-index: -1;\n            inset: 0;\n            position: absolute;\n            content: '';\n            background: var(--wje-item-background-hover);\n            opacity: 0.7;\n        }\n    }\n}\n\nbutton,\na {\n    cursor: pointer;\n    user-select: none;\n    -webkit-user-drag: none;\n}\n\n::slotted([slot='start']) {\n    margin-inline: 0 1rem;\n}\n\n::slotted(wje-label:not([slot='end'])) {\n    flex: 1 1 0;\n}\n";
-class Item extends WJElement {
-  /**
-   * Item constructor for the class.
-   */
+import t from "./wje-element.js";
+class e extends t {
   constructor() {
     super();
-    /**
-     * Returns the CSS styles for the component.
-     * @type {string}
-     */
     __publicField(this, "className", "Item");
-    /**
-     * Determines if the given element or any of its ancestors matches the specified selector.
-     * @param {string} selector The CSS selector to match against the element's ancestors.
-     * @param {HTMLElement} el The element from which to start the search.
-     * @returns {boolean} - Returns `true` if the element or one of its ancestors matches the selector; otherwise, `false`.
-     */
-    __publicField(this, "hostContext", (selector, el) => {
-      return el.closest(selector) !== null;
-    });
-    this.labelColorStyles = {};
-    this.itemStyles = /* @__PURE__ */ new Map();
-    this.inheritedAriaAttributes = {};
-    this.multipleInputs = false;
-    this.focusable = true;
-    this.button = false;
-    this.detailIcon = ``;
-    this.disabled = false;
-    this.counter = false;
-    this.routerDirection = "forward";
-    this.type = "button";
+    __publicField(this, "hostContext", (t2, e2) => null !== e2.closest(t2));
+    this.labelColorStyles = {}, this.itemStyles = /* @__PURE__ */ new Map(), this.inheritedAriaAttributes = {}, this.multipleInputs = false, this.focusable = true, this.button = false, this.detailIcon = "", this.disabled = false, this.counter = false, this.routerDirection = "forward", this.type = "button";
   }
-  /**
-   * Returns the CSS styles for the component.
-   * @returns {boolean}
-   */
   isClickable() {
     return this.hasAttribute("href") || this.button;
   }
-  /**
-   * Returns the CSS styles for the component.
-   * @static
-   * @returns {object} styles
-   */
   static get cssStyleSheet() {
-    return styles;
+    return ':host{display:block;align-items:center;justify-content:space-between;outline:none;color:var(--wje-item-color);text-align:initial;text-decoration:none;box-sizing:border-box;width:100%}.item-native{border-radius:var(--wje-item-border-radius);padding-top:var(--wje-item-padding-top);padding-bottom:var(--wje-item-padding-bottom);padding-inline:var(--wje-item-padding-start) var(--wje-item-padding-end);margin:0;display:flex;align-items:inherit;justify-content:inherit;width:100%;min-height:var(--wje-item-min-height);transition:var(--wje-item-transition);outline:none;background:var(--wje-item-background);box-sizing:border-box;z-index:1;text-decoration:none;color:var(--wje-item-color)}.item-native .item-inner{margin:0;padding:var(--wje-item-inner-padding-top) var(--wje-item-inner-padding-end) var(--wje-item-inner-padding-bottom) var(--wje-item-inner-padding-start);display:flex;position:relative;flex:1 1 0;flex-direction:inherit;align-items:inherit;align-self:stretch;min-height:inherit;border-width:var(--wje-item-border-width);border-style:var(--wje-item-border-style);border-color:var(--wje-item-border-color);box-shadow:var(--wje-item-inner-box-shadow);overflow:inherit;box-sizing:border-box}.item-native .item-inner .input-wrapper{display:flex;flex:1 1 0;flex-direction:inherit;align-items:inherit;align-self:stretch;text-overflow:ellipsis;overflow:inherit;box-sizing:border-box}.item-native .item-bottom{padding:0 var(--wje-item-inner-padding-end) 0 var(--wje-item-padding-start);display:flex;justify-content:space-between}@media(any-hover:hover){:host(:hover) .item-native{position:relative;color:var(--wje-item-color)}:host(:hover) .item-native :after{transition:var(--wje-item-transition);z-index:-1;top:0;right:0;bottom:0;left:0;position:absolute;content:"";background:var(--wje-item-background-hover);opacity:.7}}button,a{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}::slotted([slot="start"]){margin-inline:0 1rem}::slotted(wje-label:not([slot="end"])){flex:1 1 0}';
   }
-  /**
-   * Sets up the attributes for the component.
-   */
   setupAttributes() {
     this.isShadowRoot = "open";
   }
-  /**
-   * Draws the component for the item.
-   * @returns {DocumentFragment}
-   */
   draw() {
-    const TagType = this.isClickable() ? this.hasAttribute("href") === void 0 ? "button" : "a" : "div";
-    if (this.hostContext("wje-list", this)) {
-      this.classList.add("wje-item-list");
-    }
-    return `<${TagType} class="item-native" part="native">
+    const t2 = this.isClickable() ? void 0 === this.hasAttribute("href") ? "button" : "a" : "div";
+    return this.hostContext("wje-list", this) && this.classList.add("wje-item-list"), `<${t2} class="item-native" part="native">
 			<slot name="start"></slot>
 			<div class="item-inner">
 					<div class="input-wrapper" part="inner">
@@ -74,29 +29,21 @@ class Item extends WJElement {
 					<slot name="end"></slot>
 			</div>
 			<div class="item-highlight"></div>
-    </${TagType}>
+    </${t2}>
 		<div class="item-bottom">
 				<slot name="error"></slot>
 				<slot name="helper"></slot>
 		</div>`;
   }
-  /**
-   * Called after the component has been drawn.
-   */
   afterDraw() {
     this.syncAria();
   }
-  /**
-   * Sync ARIA attributes on host.
-   */
   syncAria() {
-    if (this.hostContext("wje-list", this) && !this.hasAttribute("role")) {
-      this.setAriaState({ role: "listitem" });
-    }
+    this.hostContext("wje-list", this) && !this.hasAttribute("role") && this.setAriaState({ role: "listitem" });
   }
 }
-Item.define("wje-item", Item);
+e.define("wje-item", e);
 export {
-  Item as default
+  e as default
 };
 //# sourceMappingURL=wje-item.js.map

package/dist/wje-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-item.js","sources":["../packages/wje-item/item.element.js","../packages/wje-item/item.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Item` is a custom web component that represents an item.\n * @summary This element represents an item.\n * @documentation https://elements.webjet.sk/components/item\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native part\n * @csspart inner - The inner part\n * @slot start - The start slot\n * @slot end - The end slot\n * @slot error - The error slot\n * @slot helper - The helper slot\n * @cssproperty [--wje-item-background=var(--wje-background)] - Sets the background color of the item. Accepts any valid CSS color value.\n * @cssproperty [--wje-item-color=var(--wje-color)] - Defines the text color for the item. Accepts any valid CSS color value.\n * @cssproperty [--wje-item-padding-start=var(--wje-padding)] - Specifies the left padding of the item. Accepts any valid CSS length.\n * @cssproperty [--wje-item-padding-end=var(--wje-padding)] - Specifies the right padding of the item. Accepts any valid CSS length.\n * @cssproperty [--wje-item-padding-top=var(--wje-padding)] - Specifies the top padding of the item. Accepts any valid CSS length.\n * @cssproperty [--wje-item-padding-bottom=var(--wje-padding)] - Specifies the bottom padding of the item. Accepts any valid CSS length.\n * @cssproperty [--wje-item-inner-padding-start=var(--wje-padding)] - Specifies the left inner padding of the item. Accepts any valid CSS length.\n * @cssproperty [--wje-item-inner-padding-end=var(--wje-padding)] - Specifies the right inner padding of the item. Accepts any valid CSS length.\n * @cssproperty [--wje-item-inner-padding-top=var(--wje-padding)] - Specifies the top inner padding of the item. Accepts any valid CSS length.\n * @cssproperty [--wje-item-inner-padding-bottom=var(--wje-padding)] - Specifies the bottom inner padding of the item. Accepts any valid CSS length.\n * @cssproperty [--wje-item-border-radius=var(--wje-border-radius)] - Defines the border radius, providing rounded corners for the item.\n * @cssproperty [--wje-item-border-width=var(--wje-border-width)] - Sets the border width of the item. Accepts any valid CSS length.\n * @cssproperty [--wje-item-border-style=var(--wje-border-style)] - Specifies the style of the border, such as `solid`, `dashed`, or `dotted`.\n * @cssproperty [--wje-item-border-color=var(--wje-border-color)] - Defines the color of the item's border. Accepts any valid CSS color value.\n * @cssproperty [--wje-item-min-height=var(--wje-min-height)] - Sets the minimum height of the item to ensure consistent layout.\n * @cssproperty [--wje-item-transition=var(--wje-transition)] - Specifies the transition effects for the item, such as for hover or focus states.\n * @cssproperty [--wje-item-inner-box-shadow=var(--wje-box-shadow)] - Adds a shadow effect inside the item for a 3D appearance.\n * @tag wje-item\n */\nexport default class Item extends WJElement {\n    /**\n     * Item constructor for the class.\n     */\n    constructor() {\n        super();\n\n        this.labelColorStyles = {};\n        this.itemStyles = new Map();\n        this.inheritedAriaAttributes = {};\n        this.multipleInputs = false;\n        this.focusable = true;\n        this.button = false;\n        this.detailIcon = ``; // TODO icon\n        this.disabled = false;\n        this.counter = false;\n        this.routerDirection = 'forward';\n        this.type = 'button';\n    }\n\n    /**\n     * Returns the CSS styles for the component.\n     * @returns {boolean}\n     */\n    isClickable() {\n        return this.hasAttribute('href') || this.button;\n    }\n\n    /**\n     * Returns the CSS styles for the component.\n     * @type {string}\n     */\n    className = 'Item';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {object} styles\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the component for the item.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        const TagType = this.isClickable() ? (this.hasAttribute('href') === undefined ? 'button' : 'a') : 'div';\n\n        if (this.hostContext('wje-list', this)) {\n            this.classList.add('wje-item-list');\n        }\n\n        return `<${TagType} class=\"item-native\" part=\"native\">\n\t\t\t<slot name=\"start\"></slot>\n\t\t\t<div class=\"item-inner\">\n\t\t\t\t\t<div class=\"input-wrapper\" part=\"inner\">\n\t\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t</div>\n\t\t\t\t\t<slot name=\"end\"></slot>\n\t\t\t</div>\n\t\t\t<div class=\"item-highlight\"></div>\n    </${TagType}>\n\t\t<div class=\"item-bottom\">\n\t\t\t\t<slot name=\"error\"></slot>\n\t\t\t\t<slot name=\"helper\"></slot>\n\t\t</div>`;\n    }\n\n    /**\n     * Called after the component has been drawn.\n     */\n    afterDraw() {\n        this.syncAria();\n    }\n\n    /**\n     * Sync ARIA attributes on host.\n     */\n    syncAria() {\n        if (this.hostContext('wje-list', this) && !this.hasAttribute('role')) {\n            this.setAriaState({ role: 'listitem' });\n        }\n    }\n\n    /**\n     * Determines if the given element or any of its ancestors matches the specified selector.\n     * @param {string} selector The CSS selector to match against the element's ancestors.\n     * @param {HTMLElement} el The element from which to start the search.\n     * @returns {boolean} - Returns `true` if the element or one of its ancestors matches the selector; otherwise, `false`.\n     */\n    hostContext = (selector, el) => {\n        return el.closest(selector) !== null;\n    };\n}\n","import Item from './item.element.js';\n\nexport default Item;\n\nItem.define('wje-item', Item);\n"],"names":[],"mappings":";;;;;AAkCe,MAAM,aAAa,UAAU;AAAA;AAAA;AAAA;AAAA,EAIxC,cAAc;AACV,UAAK;AA2BT;AAAA;AAAA;AAAA;AAAA,qCAAY;AAmEZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uCAAc,CAAC,UAAU,OAAO;AAC5B,aAAO,GAAG,QAAQ,QAAQ,MAAM;AAAA,IACpC;AA9FI,SAAK,mBAAmB,CAAA;AACxB,SAAK,aAAa,oBAAI,IAAG;AACzB,SAAK,0BAA0B,CAAA;AAC/B,SAAK,iBAAiB;AACtB,SAAK,YAAY;AACjB,SAAK,SAAS;AACd,SAAK,aAAa;AAClB,SAAK,WAAW;AAChB,SAAK,UAAU;AACf,SAAK,kBAAkB;AACvB,SAAK,OAAO;AAAA,EAChB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,cAAc;AACV,WAAO,KAAK,aAAa,MAAM,KAAK,KAAK;AAAA,EAC7C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaA,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB;AACd,SAAK,eAAe;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO;AACH,UAAM,UAAU,KAAK,YAAW,IAAM,KAAK,aAAa,MAAM,MAAM,SAAY,WAAW,MAAO;AAElG,QAAI,KAAK,YAAY,YAAY,IAAI,GAAG;AACpC,WAAK,UAAU,IAAI,eAAe;AAAA,IACtC;AAEA,WAAO,IAAI,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QASlB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAKX;AAAA;AAAA;AAAA;AAAA,EAKA,YAAY;AACR,SAAK,SAAQ;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA,EAKA,WAAW;AACP,QAAI,KAAK,YAAY,YAAY,IAAI,KAAK,CAAC,KAAK,aAAa,MAAM,GAAG;AAClE,WAAK,aAAa,EAAE,MAAM,WAAU,CAAE;AAAA,IAC1C;AAAA,EACJ;AAWJ;ACpIA,KAAK,OAAO,YAAY,IAAI;"}
+{"version":3,"file":"wje-item.js","sources":["../packages/wje-item/item.element.js","../packages/wje-item/item.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Item` is a custom web component that represents an item.\n * @summary This element represents an item.\n * @documentation https://elements.webjet.sk/components/item\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native part\n * @csspart inner - The inner part\n * @slot start - The start slot\n * @slot end - The end slot\n * @slot error - The error slot\n * @slot helper - The helper slot\n * @cssproperty [--wje-item-background=var(--wje-background)] - Sets the background color of the item. Accepts any valid CSS color value.\n * @cssproperty [--wje-item-color=var(--wje-color)] - Defines the text color for the item. Accepts any valid CSS color value.\n * @cssproperty [--wje-item-padding-start=var(--wje-padding)] - Specifies the left padding of the item. Accepts any valid CSS length.\n * @cssproperty [--wje-item-padding-end=var(--wje-padding)] - Specifies the right padding of the item. Accepts any valid CSS length.\n * @cssproperty [--wje-item-padding-top=var(--wje-padding)] - Specifies the top padding of the item. Accepts any valid CSS length.\n * @cssproperty [--wje-item-padding-bottom=var(--wje-padding)] - Specifies the bottom padding of the item. Accepts any valid CSS length.\n * @cssproperty [--wje-item-inner-padding-start=var(--wje-padding)] - Specifies the left inner padding of the item. Accepts any valid CSS length.\n * @cssproperty [--wje-item-inner-padding-end=var(--wje-padding)] - Specifies the right inner padding of the item. Accepts any valid CSS length.\n * @cssproperty [--wje-item-inner-padding-top=var(--wje-padding)] - Specifies the top inner padding of the item. Accepts any valid CSS length.\n * @cssproperty [--wje-item-inner-padding-bottom=var(--wje-padding)] - Specifies the bottom inner padding of the item. Accepts any valid CSS length.\n * @cssproperty [--wje-item-border-radius=var(--wje-border-radius)] - Defines the border radius, providing rounded corners for the item.\n * @cssproperty [--wje-item-border-width=var(--wje-border-width)] - Sets the border width of the item. Accepts any valid CSS length.\n * @cssproperty [--wje-item-border-style=var(--wje-border-style)] - Specifies the style of the border, such as `solid`, `dashed`, or `dotted`.\n * @cssproperty [--wje-item-border-color=var(--wje-border-color)] - Defines the color of the item's border. Accepts any valid CSS color value.\n * @cssproperty [--wje-item-min-height=var(--wje-min-height)] - Sets the minimum height of the item to ensure consistent layout.\n * @cssproperty [--wje-item-transition=var(--wje-transition)] - Specifies the transition effects for the item, such as for hover or focus states.\n * @cssproperty [--wje-item-inner-box-shadow=var(--wje-box-shadow)] - Adds a shadow effect inside the item for a 3D appearance.\n * @tag wje-item\n */\nexport default class Item extends WJElement {\n    /**\n     * Item constructor for the class.\n     */\n    constructor() {\n        super();\n\n        this.labelColorStyles = {};\n        this.itemStyles = new Map();\n        this.inheritedAriaAttributes = {};\n        this.multipleInputs = false;\n        this.focusable = true;\n        this.button = false;\n        this.detailIcon = ``; // TODO icon\n        this.disabled = false;\n        this.counter = false;\n        this.routerDirection = 'forward';\n        this.type = 'button';\n    }\n\n    /**\n     * Returns the CSS styles for the component.\n     * @returns {boolean}\n     */\n    isClickable() {\n        return this.hasAttribute('href') || this.button;\n    }\n\n    /**\n     * Returns the CSS styles for the component.\n     * @type {string}\n     */\n    className = 'Item';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {object} styles\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the component for the item.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        const TagType = this.isClickable() ? (this.hasAttribute('href') === undefined ? 'button' : 'a') : 'div';\n\n        if (this.hostContext('wje-list', this)) {\n            this.classList.add('wje-item-list');\n        }\n\n        return `<${TagType} class=\"item-native\" part=\"native\">\n\t\t\t<slot name=\"start\"></slot>\n\t\t\t<div class=\"item-inner\">\n\t\t\t\t\t<div class=\"input-wrapper\" part=\"inner\">\n\t\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t</div>\n\t\t\t\t\t<slot name=\"end\"></slot>\n\t\t\t</div>\n\t\t\t<div class=\"item-highlight\"></div>\n    </${TagType}>\n\t\t<div class=\"item-bottom\">\n\t\t\t\t<slot name=\"error\"></slot>\n\t\t\t\t<slot name=\"helper\"></slot>\n\t\t</div>`;\n    }\n\n    /**\n     * Called after the component has been drawn.\n     */\n    afterDraw() {\n        this.syncAria();\n    }\n\n    /**\n     * Sync ARIA attributes on host.\n     */\n    syncAria() {\n        if (this.hostContext('wje-list', this) && !this.hasAttribute('role')) {\n            this.setAriaState({ role: 'listitem' });\n        }\n    }\n\n    /**\n     * Determines if the given element or any of its ancestors matches the specified selector.\n     * @param {string} selector The CSS selector to match against the element's ancestors.\n     * @param {HTMLElement} el The element from which to start the search.\n     * @returns {boolean} - Returns `true` if the element or one of its ancestors matches the selector; otherwise, `false`.\n     */\n    hostContext = (selector, el) => {\n        return el.closest(selector) !== null;\n    };\n}\n","import Item from './item.element.js';\n\nexport default Item;\n\nItem.define('wje-item', Item);\n"],"names":["Item","WJElement","constructor","super","className","hostContext","selector","el","closest","this","labelColorStyles","itemStyles","Map","inheritedAriaAttributes","multipleInputs","focusable","button","detailIcon","disabled","counter","routerDirection","type","isClickable","hasAttribute","cssStyleSheet","setupAttributes","isShadowRoot","draw","TagType","classList","add","afterDraw","syncAria","setAriaState","role","define"],"mappings":";;;;AAkCe,MAAMA,UAAaC,EAAAA;AAAAA,EAI9B,cAAAC;AACIC,UAAAA;AA2BJC,qCAAY;AAmEZC,uCAAc,CAACC,IAAUC,OACW,SAAzBA,GAAGC,QAAQF,EAAAA;AA7FlBG,SAAKC,mBAAmB,CAAA,GACxBD,KAAKE,aAAa,oBAAIC,OACtBH,KAAKI,0BAA0B,CAAA,GAC/BJ,KAAKK,iBAAAA,OACLL,KAAKM,YAAAA,MACLN,KAAKO,SAAAA,OACLP,KAAKQ,aAAa,IAClBR,KAAKS,WAAAA,OACLT,KAAKU,UAAAA,OACLV,KAAKW,kBAAkB,WACvBX,KAAKY,OAAO;AAAA,EAChB;AAAA,EAMA,cAAAC;AACI,WAAOb,KAAKc,aAAa,MAAA,KAAWd,KAAKO;AAAAA,EAC7C;AAAA,EAaA,WAAA,gBAAWQ;AACP;EACJ;AAAA,EAKA,kBAAAC;AACIhB,SAAKiB,eAAe;AAAA,EACxB;AAAA,EAMA,OAAAC;AACI,UAAMC,KAAUnB,KAAKa,YAAAA,IAAAA,WAAiBb,KAAKc,aAAa,MAAA,IAAwB,WAAW,MAAO;AAMlG,WAJId,KAAKJ,YAAY,YAAYI,IAAAA,KAC7BA,KAAKoB,UAAUC,IAAI,eAAA,GAGhB,IAAIF,EAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,QASXA,EAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,EAKJ;AAAA,EAKA,YAAAG;AACItB,SAAKuB,SAAAA;AAAAA,EACT;AAAA,EAKA,WAAAA;AACQvB,SAAKJ,YAAY,YAAYI,IAAAA,KAAAA,CAAUA,KAAKc,aAAa,MAAA,KACzDd,KAAKwB,aAAa,EAAEC,MAAM,WAAA,CAAA;AAAA,EAElC;AASsB5B;AClI1BN,EAAKmC,OAAO,YAAYnC,CAAAA;"}