wj-elements 0.1.137 → 0.1.139

package/dist/wje-textarea.js.map

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "wj-elements",
   "description": "WebJET Elements is a modern set of user interface tools harnessing the power of web components designed to simplify web application development.",
-  "version": "0.1.137",
+  "version": "0.1.139",
   "homepage": "https://github.com/lencys/wj-elements",
   "author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
   "license": "MIT",
@@ -72,6 +72,7 @@
     "@crowdin/cli": "^3.19.2",
     "@faker-js/faker": "^8.0.0",
     "@floating-ui/dom": "^1.5.1",
+    "ajv": "^8.17.1",
     "animate.css": "^4.1.1",
     "qrious": "^4.0.2",
     "slick-router": "^3.0.1",
@@ -106,4 +107,4 @@
     "vite-plugin-dts": "^4.5.0",
     "vite-plugin-javascript-obfuscator": "^3.1.0"
   }
-}
+}