udp-stencil-component-library 25.18.2-beta.9 → 25.18.2

package/dist/components/text-area2.js

@@ -1,288 +1 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './index2.js';
-import { d as defineCustomElement$1 } from './unity-typography2.js';
-
-const textAreaCss = ":host(.udp-input){display:block;box-sizing:border-box;position:relative}:host(.udp-input--full-width){width:100%}:host(.udp-input--error){--input-border-color:var(--input-underline-color-error)}:host(.udp-input--disabled){pointer-events:none;opacity:0.5;cursor:not-allowed}:host(.udp-input--required){position:relative}:host(.udp-input--readonly){--input-background:var(--gray-02)}:host(.udp-input--hidden){display:none}:host(.udp-input--checked){--input-accent-color:var(--primary-color)}:host(.udp-input--multi-select){--list-max-height:200px}:host(.udp-input) .bx--text-input:focus{outline:none;}:host(.udp-input) .bx--form-item{margin-bottom:var(--spacing-05)}:host(.udp-input) .bx--label{display:block;margin-bottom:var(--spacing-03);color:var(--text-main);font-size:var(--caption-text-font-size);font-weight:var(--caption-text-font-weight);line-height:var(--caption-text-line-height)}@media (max-width: var(--breakpoint-xs-max)){:host(.udp-input){margin-bottom:var(--spacing-04)}:host(.udp-input) .bx--form-item{margin-bottom:var(--spacing-04)}}@media (min-width: var(--breakpoint-sm-min)){:host(.udp-input){min-height:2.5rem;}}:host(.udp-input--size-small) .bx--text-input,:host(.udp-input--size-small) textarea,:host(.udp-input--size-small) input[type=\"text\"],:host(.udp-input--size-small) input[type=\"number\"],:host(.udp-input--size-small) input[type=\"email\"],:host(.udp-input--size-small) input[type=\"password\"],:host(.udp-input--size-small) input[type=\"tel\"],:host(.udp-input--size-small) input[type=\"url\"],:host(.udp-input--size-small) input[type=\"search\"]{padding:var(--spacing-02);padding-bottom:6px;font-size:var(--caption-font-size, 0.875rem)}:host(.udp-input--size-normal) .bx--text-input,:host(.udp-input--size-normal) textarea,:host(.udp-input--size-normal) input[type=\"text\"],:host(.udp-input--size-normal) input[type=\"number\"],:host(.udp-input--size-normal) input[type=\"email\"],:host(.udp-input--size-normal) input[type=\"password\"],:host(.udp-input--size-normal) input[type=\"tel\"],:host(.udp-input--size-normal) input[type=\"url\"],:host(.udp-input--size-normal) input[type=\"search\"]{padding:var(--spacing-03);padding-bottom:9px;font-size:var(--body-font-size)}:host(.udp-input--size-large) .bx--text-input,:host(.udp-input--size-large) textarea,:host(.udp-input--size-large) input[type=\"text\"],:host(.udp-input--size-large) input[type=\"number\"],:host(.udp-input--size-large) input[type=\"email\"],:host(.udp-input--size-large) input[type=\"password\"],:host(.udp-input--size-large) input[type=\"tel\"],:host(.udp-input--size-large) input[type=\"url\"],:host(.udp-input--size-large) input[type=\"search\"]{padding:var(--spacing-04);padding-bottom:12px;font-size:var(--body-font-size)}:host(.udp-input--margin-none){margin:0}:host(.udp-input--margin-dense){margin:var(--spacing-02) 0}:host(.udp-input--margin-normal){margin:var(--spacing-03) 0}:host(.udp-input--margin-comfortable){margin:var(--spacing-04) 0}:host(.udp-input--size-small) .bx--label{margin-bottom:var(--spacing-02);font-size:var(--caption-font-size, 0.875rem)}:host(.udp-input--size-normal) .bx--label{margin-bottom:var(--spacing-03);font-size:var(--body-font-size)}:host(.udp-input--size-large) .bx--label{margin-bottom:var(--spacing-04);font-size:var(--body-font-size)}.bx--text-input,textarea,input[type=\"text\"],input[type=\"number\"],input[type=\"email\"],input[type=\"password\"],input[type=\"tel\"],input[type=\"url\"],input[type=\"search\"]{display:inline-block;padding:var(--spacing-03);padding-bottom:9px;box-sizing:border-box;border:none;font-size:var(--body-font-size);background:var(--input-background);border-bottom:var(--underline-standard) solid var(--input-underline-color, var(--gray-08));width:100%;font-family:var(--font-family);transition:border-bottom-color 0.15s ease-in-out}.bx--text-input:focus,textarea:focus,input[type=\"text\"]:focus,input[type=\"number\"]:focus,input[type=\"email\"]:focus,input[type=\"password\"]:focus,input[type=\"tel\"]:focus,input[type=\"url\"]:focus,input[type=\"search\"]:focus{border-bottom-color:var(--input-underline-color-focus, var(--primary-color));border-bottom-width:2px}.bx--text-input--error,.bx--text-input:user-invalid,:host(.udp-input--error) .bx--text-input,:host(.udp-input--error) textarea,:host(.udp-input--error) input[type=\"text\"],:host(.udp-input--error) input[type=\"number\"],:host(.udp-input--error) input[type=\"email\"],:host(.udp-input--error) input[type=\"password\"],:host(.udp-input--error) input[type=\"tel\"],:host(.udp-input--error) input[type=\"url\"],:host(.udp-input--error) input[type=\"search\"],input[type=\"text\"]:user-invalid,input[type=\"number\"]:user-invalid,input[type=\"email\"]:user-invalid,input[type=\"password\"]:user-invalid,input[type=\"tel\"]:user-invalid,input[type=\"url\"]:user-invalid,input[type=\"search\"]:user-invalid{border-bottom-color:var(--input-underline-color-error, var(--error-color-main)) !important}:host(.udp-input--disabled) .bx--text-input,:host(.udp-input--disabled) textarea,:host(.udp-input--disabled) input[type=\"text\"],:host(.udp-input--disabled) input[type=\"number\"],:host(.udp-input--disabled) input[type=\"email\"],:host(.udp-input--disabled) input[type=\"password\"],:host(.udp-input--disabled) input[type=\"tel\"],:host(.udp-input--disabled) input[type=\"url\"],:host(.udp-input--disabled) input[type=\"search\"]{border-bottom-color:var(--input-underline-color-disabled, var(--gray-08))}textarea.bx--text-input{resize:vertical;min-height:var(--spacing-08)}.bx--text-input::placeholder,textarea::placeholder,input[type=\"text\"]::placeholder,input[type=\"number\"]::placeholder,input[type=\"email\"]::placeholder,input[type=\"password\"]::placeholder,input[type=\"tel\"]::placeholder,input[type=\"url\"]::placeholder,input[type=\"search\"]::placeholder{color:var(--placeholder-color, #999);opacity:1}:host(.udp-input),:host{display:block;width:100%;box-sizing:border-box}.bx--form-item{margin-bottom:var(--spacing-05)}.bx--label{display:block;margin-bottom:var(--spacing-03)}.error-message,.bx--form-requirement,:host(.udp-input--error) .error-message,:host(.udp-input--error) .bx--form-requirement{color:var(--error-color-main, #d32f2f) !important;margin-top:var(--spacing-02);font-size:var(--caption-font-size, 0.875rem);--unity-typography-inherit-color:var(--error-color-main, #d32f2f)}.helper-text{color:var(--text-02, #525252);margin-top:var(--spacing-02);font-size:var(--caption-font-size, 0.875rem)}:host(.udp-input--disabled) .bx--text-input,:host(.udp-input--disabled) textarea,:host(.udp-input--disabled) input,:host(.udp-input--disabled){cursor:not-allowed;opacity:0.6}:host(.udp-input--readonly) .bx--text-input,:host(.udp-input--readonly) textarea,:host(.udp-input--readonly) input{background-color:var(--field-01, #f4f4f4);cursor:default}";
-
-const TextArea = /*@__PURE__*/ proxyCustomElement(class TextArea extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.change = createEvent(this, "change");
-        this.errorEvent = createEvent(this, "error");
-        /**
-         * Size variant controlling the padding and spacing of the textarea.
-         * - 'small': Compact spacing for data-heavy interfaces
-         * - 'normal': Standard spacing (default)
-         * - 'large': Generous spacing for accessibility
-         */
-        this.size = 'normal';
-        /**
-         * Margin variant for the input spacing.
-         * - 'none': No margin
-         * - 'dense': Minimal margin spacing
-         * - 'normal': Standard margin spacing (default)
-         */
-        this.margin = 'normal';
-        /**
-         * If `true`, the component is read-only.
-         */
-        this.readonly = false;
-        /**
-         * @internal
-         */
-        this.onInput = (event) => {
-            if (this.readonly) {
-                const input = event.target;
-                input.value = this.internalValue;
-                return;
-            }
-            const newValue = event.target.value;
-            this.internalValue = newValue;
-            if (this.value !== undefined) {
-                this.value = newValue;
-            }
-            // Re-evaluate validation on input if there's currently an error
-            // This provides immediate feedback when user corrects the error
-            if (this.errorMessage) {
-                const validationError = this.validateCharacterLength(newValue);
-                if (validationError !== this.errorMessage) {
-                    // Error state has changed, update it
-                    this.setAndDispatchError(validationError);
-                }
-            }
-            this.adjustTextAreaHeight();
-        };
-        /**
-         * @internal
-         */
-        this.onChange = (event) => {
-            if (this.readonly) {
-                return;
-            }
-            const newValue = event.target.value;
-            // Validate the new value for character length constraints
-            const validationError = this.validateCharacterLength(newValue);
-            if (validationError) {
-                // Character length validation failed
-                this.setAndDispatchError(validationError);
-            }
-            else {
-                // Character length validation passed, clear any existing error
-                this.setAndDispatchError('');
-            }
-            this.change.emit(newValue);
-        };
-    }
-    /**
-     * Updates the error message when the error prop changes.
-     * @internal
-     */
-    updateError() {
-        this.errorMessage = this.error;
-    }
-    /**
-     * Updates the internal value when initialValue prop changes.
-     * @internal
-     */
-    initialValueChanged(newValue) {
-        if ((this.internalValue === '' || this.internalValue === undefined) || this.value === undefined) {
-            if (newValue !== undefined) {
-                this.internalValue = newValue;
-                Promise.resolve().then(() => this.adjustTextAreaHeight());
-            }
-        }
-    }
-    /**
-     * Updates the internal value when value prop changes.
-     * @internal
-     */
-    valueChanged() {
-        if (this.value !== undefined && this.value !== this.internalValue) {
-            this.internalValue = this.value;
-            Promise.resolve().then(() => this.adjustTextAreaHeight());
-        }
-    }
-    /**
-     * Validates the text value against min/max character constraints
-     * @param value - The text value to validate
-     * @returns Error message if invalid, empty string if valid
-     */
-    validateCharacterLength(value) {
-        if (!value)
-            return '';
-        const length = value.length;
-        if (this.minCharacter && length < this.minCharacter) {
-            return `Must be at least ${this.minCharacter} characters`;
-        }
-        if (this.maxCharacter && length > this.maxCharacter) {
-            return `Must be no more than ${this.maxCharacter} characters`;
-        }
-        return '';
-    }
-    /**
-     * Sets error state and dispatches error event that bubbles to stencil-field
-     * @param errorMessage - The error message to set and dispatch
-     */
-    setAndDispatchError(errorMessage) {
-        console.log('Setting text area error:', errorMessage);
-        // Update internal error state
-        this.errorMessage = errorMessage;
-        // Emit Stencil error event
-        this.errorEvent.emit(errorMessage);
-        // Dispatch custom error event that bubbles up to stencil-field
-        const errorEvent = new CustomEvent('error', {
-            detail: errorMessage,
-            bubbles: true,
-            composed: true
-        });
-        this.el.dispatchEvent(errorEvent);
-    }
-    /**
-     * @internal
-     */
-    componentWillLoad() {
-        this.internalValue = this.value !== undefined ? this.value : (this.initialValue || '');
-        if (this.error) {
-            this.errorMessage = this.error;
-        }
-        let initialNumRows = this.rows;
-        const currentMinRows = this.minRows === undefined ? 1 : this.minRows;
-        if (initialNumRows === undefined) {
-            initialNumRows = currentMinRows;
-        }
-        initialNumRows = Math.max(currentMinRows, initialNumRows);
-        if (this.maxRows !== undefined) {
-            initialNumRows = Math.min(this.maxRows, initialNumRows);
-        }
-        this.internalRows = initialNumRows;
-        // Validate the initial value
-        if (this.internalValue) {
-            const validationError = this.validateCharacterLength(this.internalValue);
-            if (validationError) {
-                this.setAndDispatchError(validationError);
-            }
-        }
-    }
-    /**
-     * @internal
-     */
-    componentDidLoad() {
-        this.adjustTextAreaHeight();
-    }
-    /**
-     * @internal
-     */
-    adjustTextAreaHeight() {
-        if (!this.textareaEl) {
-            return;
-        }
-        const min = this.minRows === undefined ? 1 : this.minRows;
-        const max = this.maxRows === undefined ? Number.MAX_SAFE_INTEGER : this.maxRows;
-        const previousScrollTop = this.textareaEl.scrollTop;
-        this.textareaEl.style.overflowY = 'hidden';
-        this.textareaEl.style.height = 'auto';
-        this.textareaEl.rows = min;
-        let currentActualRows = min;
-        while (this.textareaEl.scrollHeight > this.textareaEl.clientHeight && currentActualRows < max) {
-            currentActualRows++;
-            this.textareaEl.rows = currentActualRows;
-        }
-        if (currentActualRows < max || max === Number.MAX_SAFE_INTEGER) {
-            while (currentActualRows > min) {
-                this.textareaEl.rows = currentActualRows - 1;
-                if (this.textareaEl.scrollHeight > this.textareaEl.clientHeight) {
-                    this.textareaEl.rows = currentActualRows;
-                    break;
-                }
-                currentActualRows--;
-            }
-        }
-        let newCalculatedRows = Math.max(min, Math.min(currentActualRows, max));
-        this.textareaEl.style.height = '';
-        this.textareaEl.style.overflowY = '';
-        this.textareaEl.rows = newCalculatedRows;
-        if (this.internalRows !== newCalculatedRows) {
-            this.internalRows = newCalculatedRows;
-        }
-        Promise.resolve().then(() => {
-            if (this.textareaEl)
-                this.textareaEl.scrollTop = previousScrollTop;
-        });
-    }
-    render() {
-        const { disabled, id, internalValue, label, placeholder, required, readonly, errorMessage, fullWidth, internalRows } = this;
-        return (h(Host, { key: 'ca17436a4c7b653937f145bb5ad1d6b72d4288f1', class: {
-                'udp-input': true,
-                'udp-input--error': !!errorMessage,
-                'udp-input--disabled': disabled,
-                'udp-input--readonly': readonly,
-                'udp-input--full-width': fullWidth,
-                'udp-input--required': required,
-                [`udp-input--size-${this.size}`]: true,
-                [`udp-input--margin-${this.margin}`]: true,
-            } }, h("div", { key: 'a60d4d2d0be6e9185b69f1817e8b12b0fe6d00a3', class: "bx--form-item" }, h("unity-typography", { key: '3d98ead9011fe5591f2e375896dd49ec702fbafc', variant: "caption-text" }, h("label", { key: '6fe1af1670c3c9eca732b6c6a1acf561a18e970e', htmlFor: id, class: "bx--label" }, label, required ? '*' : '')), h("textarea", { key: 'a3993402edfc75d4bb6a7656bac2f4fffef0f154', ref: el => (this.textareaEl = el), id: id, class: {
-                'bx--text-input': true,
-                'bx--text-input--error': !!errorMessage,
-                'text-area--disabled': disabled,
-            }, placeholder: placeholder, value: internalValue, required: required, disabled: disabled, readonly: readonly, maxLength: this.maxCharacter, rows: internalRows, onInput: this.onInput, onChange: this.onChange }, internalValue), errorMessage && (h("div", { key: '0d3e3a857df2cf8eac691db282cf42a97d25fe61', class: "error-message" }, h("unity-typography", { key: '1473a99c0176bc969a782e87f8a19e393b66ddfa', variant: "caption-text", color: "error" }, errorMessage))))));
-    }
-    get el() { return this; }
-    static get watchers() { return {
-        "error": ["updateError"],
-        "initialValue": ["initialValueChanged"],
-        "value": ["valueChanged"]
-    }; }
-    static get style() { return textAreaCss; }
-}, [257, "text-area", {
-        "label": [1],
-        "id": [1],
-        "name": [1],
-        "placeholder": [1],
-        "initialValue": [1, "initial-value"],
-        "value": [1025],
-        "error": [1],
-        "required": [4],
-        "disabled": [4],
-        "fullWidth": [4, "full-width"],
-        "minCharacter": [2, "min-character"],
-        "maxCharacter": [2, "max-character"],
-        "rows": [2],
-        "minRows": [2, "min-rows"],
-        "maxRows": [2, "max-rows"],
-        "size": [1],
-        "margin": [1],
-        "readonly": [4],
-        "internalValue": [32],
-        "errorMessage": [32],
-        "internalRows": [32]
-    }, undefined, {
-        "error": ["updateError"],
-        "initialValue": ["initialValueChanged"],
-        "value": ["valueChanged"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["text-area", "unity-typography"];
-    components.forEach(tagName => { switch (tagName) {
-        case "text-area":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, TextArea);
-            }
-            break;
-        case "unity-typography":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { TextArea as T, defineCustomElement as d };
-//# sourceMappingURL=text-area2.js.map
-
-//# sourceMappingURL=text-area2.js.map
+import{p as t,H as i,c as e,h as r,d as n,t as a}from"./index2.js";import{d as p}from"./unity-typography2.js";const s=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.change=e(this,"change"),this.errorEvent=e(this,"error"),this.size="normal",this.margin="normal",this.readonly=!1,this.onInput=t=>{if(this.readonly)return void(t.target.value=this.internalValue);const i=t.target.value;if(this.internalValue=i,void 0!==this.value&&(this.value=i),this.errorMessage){const t=this.validateCharacterLength(i);t!==this.errorMessage&&this.setAndDispatchError(t)}this.adjustTextAreaHeight()},this.onChange=t=>{if(this.readonly)return;const i=t.target.value,e=this.validateCharacterLength(i);this.setAndDispatchError(e||""),this.change.emit(i)}}updateError(){this.errorMessage=this.error}initialValueChanged(t){""!==this.internalValue&&void 0!==this.internalValue&&void 0!==this.value||void 0!==t&&(this.internalValue=t,Promise.resolve().then((()=>this.adjustTextAreaHeight())))}valueChanged(){void 0!==this.value&&this.value!==this.internalValue&&(this.internalValue=this.value,Promise.resolve().then((()=>this.adjustTextAreaHeight())))}validateCharacterLength(t){if(!t)return"";const i=t.length;return this.minCharacter&&i<this.minCharacter?`Must be at least ${this.minCharacter} characters`:this.maxCharacter&&i>this.maxCharacter?`Must be no more than ${this.maxCharacter} characters`:""}setAndDispatchError(t){console.log("Setting text area error:",t),this.errorMessage=t,this.errorEvent.emit(t);const i=new CustomEvent("error",{detail:t,bubbles:!0,composed:!0});this.el.dispatchEvent(i)}componentWillLoad(){this.internalValue=void 0!==this.value?this.value:this.initialValue||"",this.error&&(this.errorMessage=this.error);let t=this.rows;const i=void 0===this.minRows?1:this.minRows;if(void 0===t&&(t=i),t=Math.max(i,t),void 0!==this.maxRows&&(t=Math.min(this.maxRows,t)),this.internalRows=t,this.internalValue){const t=this.validateCharacterLength(this.internalValue);t&&this.setAndDispatchError(t)}}componentDidLoad(){this.adjustTextAreaHeight()}adjustTextAreaHeight(){if(!this.textareaEl)return;const t=void 0===this.minRows?1:this.minRows,i=void 0===this.maxRows?Number.MAX_SAFE_INTEGER:this.maxRows,e=this.textareaEl.scrollTop;this.textareaEl.style.overflowY="hidden",this.textareaEl.style.height="auto",this.textareaEl.rows=t;let r=t;for(;this.textareaEl.scrollHeight>this.textareaEl.clientHeight&&r<i;)r++,this.textareaEl.rows=r;if(r<i||i===Number.MAX_SAFE_INTEGER)for(;r>t;){if(this.textareaEl.rows=r-1,this.textareaEl.scrollHeight>this.textareaEl.clientHeight){this.textareaEl.rows=r;break}r--}let n=Math.max(t,Math.min(r,i));this.textareaEl.style.height="",this.textareaEl.style.overflowY="",this.textareaEl.rows=n,this.internalRows!==n&&(this.internalRows=n),Promise.resolve().then((()=>{this.textareaEl&&(this.textareaEl.scrollTop=e)}))}render(){const{disabled:t,id:i,internalValue:e,label:a,placeholder:p,required:s,readonly:o,errorMessage:u,fullWidth:d,internalRows:l}=this;return r(n,{key:"ca17436a4c7b653937f145bb5ad1d6b72d4288f1",class:{"udp-input":!0,"udp-input--error":!!u,"udp-input--disabled":t,"udp-input--readonly":o,"udp-input--full-width":d,"udp-input--required":s,[`udp-input--size-${this.size}`]:!0,[`udp-input--margin-${this.margin}`]:!0}},r("div",{key:"a60d4d2d0be6e9185b69f1817e8b12b0fe6d00a3",class:"bx--form-item"},r("unity-typography",{key:"3d98ead9011fe5591f2e375896dd49ec702fbafc",variant:"caption-text"},r("label",{key:"6fe1af1670c3c9eca732b6c6a1acf561a18e970e",htmlFor:i,class:"bx--label"},a,s?"*":"")),r("textarea",{key:"a3993402edfc75d4bb6a7656bac2f4fffef0f154",ref:t=>this.textareaEl=t,id:i,class:{"bx--text-input":!0,"bx--text-input--error":!!u,"text-area--disabled":t},placeholder:p,value:e,required:s,disabled:t,readonly:o,maxLength:this.maxCharacter,rows:l,onInput:this.onInput,onChange:this.onChange},e),u&&r("div",{key:"0d3e3a857df2cf8eac691db282cf42a97d25fe61",class:"error-message"},r("unity-typography",{key:"1473a99c0176bc969a782e87f8a19e393b66ddfa",variant:"caption-text",color:"error"},u))))}get el(){return this}static get watchers(){return{error:[{updateError:0}],initialValue:[{initialValueChanged:0}],value:[{valueChanged:0}]}}static get style(){return':host(.udp-input){display:block;box-sizing:border-box;position:relative}:host(.udp-input--full-width){width:100%}:host(.udp-input--error){--input-border-color:var(--input-underline-color-error)}:host(.udp-input--disabled){pointer-events:none;opacity:0.5;cursor:not-allowed}:host(.udp-input--required){position:relative}:host(.udp-input--readonly){--input-background:var(--gray-02)}:host(.udp-input--hidden){display:none}:host(.udp-input--checked){--input-accent-color:var(--primary-color)}:host(.udp-input--multi-select){--list-max-height:200px}:host(.udp-input) .bx--text-input:focus{outline:none;}:host(.udp-input) .bx--form-item{margin-bottom:var(--spacing-05)}:host(.udp-input) .bx--label{display:block;margin-bottom:var(--spacing-03);color:var(--text-main);font-size:var(--caption-text-font-size);font-weight:var(--caption-text-font-weight);line-height:var(--caption-text-line-height)}@media (max-width: var(--breakpoint-xs-max)){:host(.udp-input){margin-bottom:var(--spacing-04)}:host(.udp-input) .bx--form-item{margin-bottom:var(--spacing-04)}}@media (min-width: var(--breakpoint-sm-min)){:host(.udp-input){min-height:2.5rem;}}:host(.udp-input--size-small) .bx--text-input,:host(.udp-input--size-small) textarea,:host(.udp-input--size-small) input[type="text"],:host(.udp-input--size-small) input[type="number"],:host(.udp-input--size-small) input[type="email"],:host(.udp-input--size-small) input[type="password"],:host(.udp-input--size-small) input[type="tel"],:host(.udp-input--size-small) input[type="url"],:host(.udp-input--size-small) input[type="search"]{padding:var(--spacing-02);padding-bottom:6px;font-size:var(--caption-font-size, 0.875rem)}:host(.udp-input--size-normal) .bx--text-input,:host(.udp-input--size-normal) textarea,:host(.udp-input--size-normal) input[type="text"],:host(.udp-input--size-normal) input[type="number"],:host(.udp-input--size-normal) input[type="email"],:host(.udp-input--size-normal) input[type="password"],:host(.udp-input--size-normal) input[type="tel"],:host(.udp-input--size-normal) input[type="url"],:host(.udp-input--size-normal) input[type="search"]{padding:var(--spacing-03);padding-bottom:9px;font-size:var(--body-font-size)}:host(.udp-input--size-large) .bx--text-input,:host(.udp-input--size-large) textarea,:host(.udp-input--size-large) input[type="text"],:host(.udp-input--size-large) input[type="number"],:host(.udp-input--size-large) input[type="email"],:host(.udp-input--size-large) input[type="password"],:host(.udp-input--size-large) input[type="tel"],:host(.udp-input--size-large) input[type="url"],:host(.udp-input--size-large) input[type="search"]{padding:var(--spacing-04);padding-bottom:12px;font-size:var(--body-font-size)}:host(.udp-input--margin-none){margin:0}:host(.udp-input--margin-dense){margin:var(--spacing-02) 0}:host(.udp-input--margin-normal){margin:var(--spacing-03) 0}:host(.udp-input--margin-comfortable){margin:var(--spacing-04) 0}:host(.udp-input--size-small) .bx--label{margin-bottom:var(--spacing-02);font-size:var(--caption-font-size, 0.875rem)}:host(.udp-input--size-normal) .bx--label{margin-bottom:var(--spacing-03);font-size:var(--body-font-size)}:host(.udp-input--size-large) .bx--label{margin-bottom:var(--spacing-04);font-size:var(--body-font-size)}.bx--text-input,textarea,input[type="text"],input[type="number"],input[type="email"],input[type="password"],input[type="tel"],input[type="url"],input[type="search"]{display:inline-block;padding:var(--spacing-03);padding-bottom:9px;box-sizing:border-box;border:none;font-size:var(--body-font-size);background:var(--input-background);border-bottom:var(--underline-standard) solid var(--input-underline-color, var(--gray-08));width:100%;font-family:var(--font-family);transition:border-bottom-color 0.15s ease-in-out}.bx--text-input:focus,textarea:focus,input[type="text"]:focus,input[type="number"]:focus,input[type="email"]:focus,input[type="password"]:focus,input[type="tel"]:focus,input[type="url"]:focus,input[type="search"]:focus{border-bottom-color:var(--input-underline-color-focus, var(--primary-color));border-bottom-width:2px}.bx--text-input--error,.bx--text-input:user-invalid,:host(.udp-input--error) .bx--text-input,:host(.udp-input--error) textarea,:host(.udp-input--error) input[type="text"],:host(.udp-input--error) input[type="number"],:host(.udp-input--error) input[type="email"],:host(.udp-input--error) input[type="password"],:host(.udp-input--error) input[type="tel"],:host(.udp-input--error) input[type="url"],:host(.udp-input--error) input[type="search"],input[type="text"]:user-invalid,input[type="number"]:user-invalid,input[type="email"]:user-invalid,input[type="password"]:user-invalid,input[type="tel"]:user-invalid,input[type="url"]:user-invalid,input[type="search"]:user-invalid{border-bottom-color:var(--input-underline-color-error, var(--error-color-main)) !important}:host(.udp-input--disabled) .bx--text-input,:host(.udp-input--disabled) textarea,:host(.udp-input--disabled) input[type="text"],:host(.udp-input--disabled) input[type="number"],:host(.udp-input--disabled) input[type="email"],:host(.udp-input--disabled) input[type="password"],:host(.udp-input--disabled) input[type="tel"],:host(.udp-input--disabled) input[type="url"],:host(.udp-input--disabled) input[type="search"]{border-bottom-color:var(--input-underline-color-disabled, var(--gray-08))}textarea.bx--text-input{resize:vertical;min-height:var(--spacing-08)}.bx--text-input::placeholder,textarea::placeholder,input[type="text"]::placeholder,input[type="number"]::placeholder,input[type="email"]::placeholder,input[type="password"]::placeholder,input[type="tel"]::placeholder,input[type="url"]::placeholder,input[type="search"]::placeholder{color:var(--placeholder-color, #999);opacity:1}:host(.udp-input),:host{display:block;width:100%;box-sizing:border-box}.bx--form-item{margin-bottom:var(--spacing-05)}.bx--label{display:block;margin-bottom:var(--spacing-03)}.error-message,.bx--form-requirement,:host(.udp-input--error) .error-message,:host(.udp-input--error) .bx--form-requirement{color:var(--error-color-main, #d32f2f) !important;margin-top:var(--spacing-02);font-size:var(--caption-font-size, 0.875rem);--unity-typography-inherit-color:var(--error-color-main, #d32f2f)}.helper-text{color:var(--text-02, #525252);margin-top:var(--spacing-02);font-size:var(--caption-font-size, 0.875rem)}:host(.udp-input--disabled) .bx--text-input,:host(.udp-input--disabled) textarea,:host(.udp-input--disabled) input,:host(.udp-input--disabled){cursor:not-allowed;opacity:0.6}:host(.udp-input--readonly) .bx--text-input,:host(.udp-input--readonly) textarea,:host(.udp-input--readonly) input{background-color:var(--field-01, #f4f4f4);cursor:default}'}},[1,"text-area",{label:[1],id:[1],name:[1],placeholder:[1],initialValue:[1,"initial-value"],value:[1025],error:[1],required:[4],disabled:[4],fullWidth:[4,"full-width"],minCharacter:[2,"min-character"],maxCharacter:[2,"max-character"],rows:[2],minRows:[2,"min-rows"],maxRows:[2,"max-rows"],size:[1],margin:[1],readonly:[4],internalValue:[32],errorMessage:[32],internalRows:[32]},void 0,{error:[{updateError:0}],initialValue:[{initialValueChanged:0}],value:[{valueChanged:0}]}]);function o(){"undefined"!=typeof customElements&&["text-area","unity-typography"].forEach((t=>{switch(t){case"text-area":customElements.get(a(t))||customElements.define(a(t),s);break;case"unity-typography":customElements.get(a(t))||p()}}))}export{s as T,o as d}

package/dist/components/text-field.js

@@ -1,9 +1 @@
-import { T as TextField$1, d as defineCustomElement$1 } from './text-field2.js';
-
-const TextField = TextField$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { TextField, defineCustomElement };
-//# sourceMappingURL=text-field.js.map
-
-//# sourceMappingURL=text-field.js.map
+import{T as t,d as o}from"./text-field2.js";const s=t,e=o;export{s as TextField,e as defineCustomElement}

package/dist/components/text-field2.js

@@ -1,241 +1 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './index2.js';
-import { d as defineCustomElement$1 } from './unity-typography2.js';
-
-const textFieldCss = ":host(.udp-input){display:block;box-sizing:border-box;position:relative}:host(.udp-input--full-width){width:100%}:host(.udp-input--error){--input-border-color:var(--input-underline-color-error)}:host(.udp-input--disabled){pointer-events:none;opacity:0.5;cursor:not-allowed}:host(.udp-input--required){position:relative}:host(.udp-input--readonly){--input-background:var(--gray-02)}:host(.udp-input--hidden){display:none}:host(.udp-input--checked){--input-accent-color:var(--primary-color)}:host(.udp-input--multi-select){--list-max-height:200px}:host(.udp-input) .bx--text-input:focus{outline:none;}:host(.udp-input) .bx--form-item{margin-bottom:var(--spacing-05)}:host(.udp-input) .bx--label{display:block;margin-bottom:var(--spacing-03);color:var(--text-main);font-size:var(--caption-text-font-size);font-weight:var(--caption-text-font-weight);line-height:var(--caption-text-line-height)}@media (max-width: var(--breakpoint-xs-max)){:host(.udp-input){margin-bottom:var(--spacing-04)}:host(.udp-input) .bx--form-item{margin-bottom:var(--spacing-04)}}@media (min-width: var(--breakpoint-sm-min)){:host(.udp-input){min-height:2.5rem;}}:host(.udp-input--size-small) .bx--text-input,:host(.udp-input--size-small) textarea,:host(.udp-input--size-small) input[type=\"text\"],:host(.udp-input--size-small) input[type=\"number\"],:host(.udp-input--size-small) input[type=\"email\"],:host(.udp-input--size-small) input[type=\"password\"],:host(.udp-input--size-small) input[type=\"tel\"],:host(.udp-input--size-small) input[type=\"url\"],:host(.udp-input--size-small) input[type=\"search\"]{padding:var(--spacing-02);padding-bottom:6px;font-size:var(--caption-font-size, 0.875rem)}:host(.udp-input--size-normal) .bx--text-input,:host(.udp-input--size-normal) textarea,:host(.udp-input--size-normal) input[type=\"text\"],:host(.udp-input--size-normal) input[type=\"number\"],:host(.udp-input--size-normal) input[type=\"email\"],:host(.udp-input--size-normal) input[type=\"password\"],:host(.udp-input--size-normal) input[type=\"tel\"],:host(.udp-input--size-normal) input[type=\"url\"],:host(.udp-input--size-normal) input[type=\"search\"]{padding:var(--spacing-03);padding-bottom:9px;font-size:var(--body-font-size)}:host(.udp-input--size-large) .bx--text-input,:host(.udp-input--size-large) textarea,:host(.udp-input--size-large) input[type=\"text\"],:host(.udp-input--size-large) input[type=\"number\"],:host(.udp-input--size-large) input[type=\"email\"],:host(.udp-input--size-large) input[type=\"password\"],:host(.udp-input--size-large) input[type=\"tel\"],:host(.udp-input--size-large) input[type=\"url\"],:host(.udp-input--size-large) input[type=\"search\"]{padding:var(--spacing-04);padding-bottom:12px;font-size:var(--body-font-size)}:host(.udp-input--margin-none){margin:0}:host(.udp-input--margin-dense){margin:var(--spacing-02) 0}:host(.udp-input--margin-normal){margin:var(--spacing-03) 0}:host(.udp-input--margin-comfortable){margin:var(--spacing-04) 0}:host(.udp-input--size-small) .bx--label{margin-bottom:var(--spacing-02);font-size:var(--caption-font-size, 0.875rem)}:host(.udp-input--size-normal) .bx--label{margin-bottom:var(--spacing-03);font-size:var(--body-font-size)}:host(.udp-input--size-large) .bx--label{margin-bottom:var(--spacing-04);font-size:var(--body-font-size)}.bx--text-input,textarea,input[type=\"text\"],input[type=\"number\"],input[type=\"email\"],input[type=\"password\"],input[type=\"tel\"],input[type=\"url\"],input[type=\"search\"]{display:inline-block;padding:var(--spacing-03);padding-bottom:9px;box-sizing:border-box;border:none;font-size:var(--body-font-size);background:var(--input-background);border-bottom:var(--underline-standard) solid var(--input-underline-color, var(--gray-08));width:100%;font-family:var(--font-family);transition:border-bottom-color 0.15s ease-in-out}.bx--text-input:focus,textarea:focus,input[type=\"text\"]:focus,input[type=\"number\"]:focus,input[type=\"email\"]:focus,input[type=\"password\"]:focus,input[type=\"tel\"]:focus,input[type=\"url\"]:focus,input[type=\"search\"]:focus{border-bottom-color:var(--input-underline-color-focus, var(--primary-color));border-bottom-width:2px}.bx--text-input--error,.bx--text-input:user-invalid,:host(.udp-input--error) .bx--text-input,:host(.udp-input--error) textarea,:host(.udp-input--error) input[type=\"text\"],:host(.udp-input--error) input[type=\"number\"],:host(.udp-input--error) input[type=\"email\"],:host(.udp-input--error) input[type=\"password\"],:host(.udp-input--error) input[type=\"tel\"],:host(.udp-input--error) input[type=\"url\"],:host(.udp-input--error) input[type=\"search\"],input[type=\"text\"]:user-invalid,input[type=\"number\"]:user-invalid,input[type=\"email\"]:user-invalid,input[type=\"password\"]:user-invalid,input[type=\"tel\"]:user-invalid,input[type=\"url\"]:user-invalid,input[type=\"search\"]:user-invalid{border-bottom-color:var(--input-underline-color-error, var(--error-color-main)) !important}:host(.udp-input--disabled) .bx--text-input,:host(.udp-input--disabled) textarea,:host(.udp-input--disabled) input[type=\"text\"],:host(.udp-input--disabled) input[type=\"number\"],:host(.udp-input--disabled) input[type=\"email\"],:host(.udp-input--disabled) input[type=\"password\"],:host(.udp-input--disabled) input[type=\"tel\"],:host(.udp-input--disabled) input[type=\"url\"],:host(.udp-input--disabled) input[type=\"search\"]{border-bottom-color:var(--input-underline-color-disabled, var(--gray-08))}textarea.bx--text-input{resize:vertical;min-height:var(--spacing-08)}.bx--text-input::placeholder,textarea::placeholder,input[type=\"text\"]::placeholder,input[type=\"number\"]::placeholder,input[type=\"email\"]::placeholder,input[type=\"password\"]::placeholder,input[type=\"tel\"]::placeholder,input[type=\"url\"]::placeholder,input[type=\"search\"]::placeholder{color:var(--placeholder-color, #999);opacity:1}:host(.udp-input),:host{display:block;width:100%;box-sizing:border-box}.bx--form-item{margin-bottom:var(--spacing-05)}.bx--label{display:block;margin-bottom:var(--spacing-03)}.error-message,.bx--form-requirement,:host(.udp-input--error) .error-message,:host(.udp-input--error) .bx--form-requirement{color:var(--error-color-main, #d32f2f) !important;margin-top:var(--spacing-02);font-size:var(--caption-font-size, 0.875rem);--unity-typography-inherit-color:var(--error-color-main, #d32f2f)}.helper-text{color:var(--text-02, #525252);margin-top:var(--spacing-02);font-size:var(--caption-font-size, 0.875rem)}:host(.udp-input--disabled) .bx--text-input,:host(.udp-input--disabled) textarea,:host(.udp-input--disabled) input,:host(.udp-input--disabled){cursor:not-allowed;opacity:0.6}:host(.udp-input--readonly) .bx--text-input,:host(.udp-input--readonly) textarea,:host(.udp-input--readonly) input{background-color:var(--field-01, #f4f4f4);cursor:default}";
-
-const TextField = /*@__PURE__*/ proxyCustomElement(class TextField extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.change = createEvent(this, "change");
-        this.errorEvent = createEvent(this, "error");
-        /**
-         * Error message to display below the input field. Shows validation errors or other issues.
-         */
-        this.error = '';
-        /**
-         * Size variant controlling the padding and spacing of the input.
-         * - 'small': Compact spacing for data-heavy interfaces
-         * - 'normal': Standard spacing (default)
-         * - 'large': Generous spacing for accessibility
-         */
-        this.size = 'normal';
-        /**
-         * Margin variant for the input spacing.
-         * - 'none': No margin
-         * - 'dense': Minimal margin spacing
-         * - 'normal': Standard margin spacing (default)
-         */
-        this.margin = 'normal';
-        /**
-         * Handles input events (real-time typing). Updates internal state and emits input event.
-         * For controlled components, also updates the value prop.
-         * @param event - The native input event
-         * @internal
-         */
-        this.onInput = (event) => {
-            if (this.readonly) {
-                // Prevent typing if the field is read-only
-                const input = event.target;
-                input.value = this.internalValue;
-                return;
-            }
-            const newValue = event.target.value;
-            this.internalValue = newValue; // Update internal state
-            // If this is a controlled component (value prop provided), update the value prop
-            if (this.value !== undefined) {
-                this.value = newValue;
-            }
-            // Re-evaluate validation on input if there's currently an error
-            // This provides immediate feedback when user corrects the error
-            if (this.errorMessage) {
-                const validationError = this.validateCharacterLength(newValue);
-                if (validationError !== this.errorMessage) {
-                    // Error state has changed, update it
-                    this.setAndDispatchError(validationError);
-                }
-            }
-        };
-        /**
-         * Handles change events (committed changes on blur/enter). Emits change event.
-         * @param event - The native change event
-         * @internal
-         */
-        this.onChange = (event) => {
-            if (this.readonly) {
-                return;
-            }
-            const newValue = event.target.value;
-            // Validate the new value for character length constraints
-            const validationError = this.validateCharacterLength(newValue);
-            if (validationError) {
-                // Character length validation failed
-                this.setAndDispatchError(validationError);
-            }
-            else {
-                // Character length validation passed, clear any existing error
-                this.setAndDispatchError('');
-            }
-            // Emit change event when user finishes editing (blur, enter, etc.)
-            this.change.emit(newValue);
-        };
-    }
-    /**
-     * Updates the error message when the error prop changes.
-     * @internal
-     */
-    updateError() {
-        this.errorMessage = this.error;
-    }
-    /**
-     * Updates the internal value when initialValue prop changes.
-     * Only updates if current value is empty to avoid overriding user input.
-     * @internal
-     */
-    updateInitialValue() {
-        // Only update if we don't have a value yet or if explicitly resetting
-        if (this.internalValue === '' || this.internalValue === undefined) {
-            this.internalValue = this.initialValue || '';
-        }
-    }
-    /**
-     * Updates the internal value when value prop changes.
-     * For controlled components, the value prop takes precedence.
-     * @internal
-     */
-    updateValue() {
-        // If value prop is provided, this is a controlled component
-        if (this.value !== undefined) {
-            this.internalValue = this.value;
-        }
-    }
-    /**
-     * Validates the text value against min/max character constraints
-     * @param value - The text value to validate
-     * @returns Error message if invalid, empty string if valid
-     */
-    validateCharacterLength(value) {
-        if (!value)
-            return '';
-        const length = value.length;
-        if (this.minCharacter && length < this.minCharacter) {
-            return `Must be at least ${this.minCharacter} characters`;
-        }
-        if (this.maxCharacter && length > this.maxCharacter) {
-            return `Must be no more than ${this.maxCharacter} characters`;
-        }
-        return '';
-    }
-    /**
-     * Sets error state and dispatches error event that bubbles to stencil-field
-     * @param errorMessage - The error message to set and dispatch
-     */
-    setAndDispatchError(errorMessage) {
-        console.log('Setting text field error:', errorMessage);
-        // Update internal error state
-        this.errorMessage = errorMessage;
-        // Emit Stencil error event
-        this.errorEvent.emit(errorMessage);
-        // Dispatch custom error event that bubbles up to stencil-field
-        const errorEvent = new CustomEvent('error', {
-            detail: errorMessage,
-            bubbles: true,
-            composed: true
-        });
-        this.el.dispatchEvent(errorEvent);
-    }
-    /**
-     * Component lifecycle method. Initializes error message and internal value.
-     * @internal
-     */
-    componentWillLoad() {
-        // Initialize error message
-        if (this.error) {
-            this.errorMessage = this.error;
-        }
-        // Initialize value: use value prop if provided (controlled), otherwise use initialValue (uncontrolled)
-        this.internalValue = this.value !== undefined ? this.value : (this.initialValue || '');
-        // Validate the initial value
-        if (this.internalValue) {
-            const validationError = this.validateCharacterLength(this.internalValue);
-            if (validationError) {
-                this.setAndDispatchError(validationError);
-            }
-        }
-    }
-    render() {
-        const isError = !!this.errorMessage;
-        const inputClass = {
-            'bx--text-input': true,
-            'bx--text-input--error': isError,
-            'bx--text-input:user-invalid': isError,
-            'text-field--disabled': this.disabled,
-        };
-        return (h(Host, { key: 'cd443e0566c2064503c9a16332c175cbab66b564', class: {
-                'udp-input': true,
-                'udp-input--error': isError,
-                'udp-input--disabled': this.disabled,
-                'udp-input--readonly': this.readonly,
-                'udp-input--required': this.required,
-                [`udp-input--size-${this.size}`]: true,
-                [`udp-input--margin-${this.margin}`]: true,
-            }, "aria-invalid": isError ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false' }, h("div", { key: 'f9c1c085ae39f49c966ce3b68785f6e6b25e3011', class: "bx--form-item" }, h("unity-typography", { key: 'c5a8973711298673e2240a805e5c31f7e4eb960a', variant: "caption-text" }, h("label", { key: '2d4533dbd0a57fe86167c153ddd4bc11ce468626', htmlFor: this.id, class: "bx--label" }, this.label, this.required ? '*' : '')), this.hidden ? (h("input", { id: this.id, type: "hidden", value: this.internalValue })) : (h("input", { id: this.id, type: "text", class: Object.assign({}, inputClass), placeholder: this.placeholder, value: this.internalValue, required: this.required, disabled: this.disabled, readonly: this.readonly, maxLength: this.maxCharacter, inputMode: this.inputMode, onInput: this.onInput, onChange: this.onChange,
-            //@ts-ignore
-            udprecordid: 'udpRecord-text-field-' + this.id })), isError && (h("div", { key: 'bd6594ada0613e1bf5973b3ab85947ebfcaa143d', class: "error-message" }, h("unity-typography", { key: '98b6b2fb24d5c53f7db1bb7ee736d0178b59f325', variant: "caption-text", color: "error" }, this.errorMessage))))));
-    }
-    get el() { return this; }
-    static get watchers() { return {
-        "error": ["updateError"],
-        "initialValue": ["updateInitialValue"],
-        "value": ["updateValue"]
-    }; }
-    static get style() { return textFieldCss; }
-}, [257, "text-field", {
-        "id": [1],
-        "label": [1],
-        "placeholder": [1],
-        "required": [4],
-        "readonly": [4],
-        "disabled": [4],
-        "minCharacter": [2, "min-character"],
-        "maxCharacter": [2, "max-character"],
-        "value": [1025],
-        "initialValue": [1, "initial-value"],
-        "hidden": [4],
-        "error": [1],
-        "inputMode": [1, "input-mode"],
-        "size": [1],
-        "margin": [1],
-        "errorMessage": [32],
-        "internalValue": [32]
-    }, undefined, {
-        "error": ["updateError"],
-        "initialValue": ["updateInitialValue"],
-        "value": ["updateValue"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["text-field", "unity-typography"];
-    components.forEach(tagName => { switch (tagName) {
-        case "text-field":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, TextField);
-            }
-            break;
-        case "unity-typography":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { TextField as T, defineCustomElement as d };
-//# sourceMappingURL=text-field2.js.map
-
-//# sourceMappingURL=text-field2.js.map
+import{p as t,H as i,c as e,h as p,d as r,t as n}from"./index2.js";import{d as a}from"./unity-typography2.js";const o=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.change=e(this,"change"),this.errorEvent=e(this,"error"),this.error="",this.size="normal",this.margin="normal",this.onInput=t=>{if(this.readonly)return void(t.target.value=this.internalValue);const i=t.target.value;if(this.internalValue=i,void 0!==this.value&&(this.value=i),this.errorMessage){const t=this.validateCharacterLength(i);t!==this.errorMessage&&this.setAndDispatchError(t)}},this.onChange=t=>{if(this.readonly)return;const i=t.target.value,e=this.validateCharacterLength(i);this.setAndDispatchError(e||""),this.change.emit(i)}}updateError(){this.errorMessage=this.error}updateInitialValue(){""!==this.internalValue&&void 0!==this.internalValue||(this.internalValue=this.initialValue||"")}updateValue(){void 0!==this.value&&(this.internalValue=this.value)}validateCharacterLength(t){if(!t)return"";const i=t.length;return this.minCharacter&&i<this.minCharacter?`Must be at least ${this.minCharacter} characters`:this.maxCharacter&&i>this.maxCharacter?`Must be no more than ${this.maxCharacter} characters`:""}setAndDispatchError(t){console.log("Setting text field error:",t),this.errorMessage=t,this.errorEvent.emit(t);const i=new CustomEvent("error",{detail:t,bubbles:!0,composed:!0});this.el.dispatchEvent(i)}componentWillLoad(){if(this.error&&(this.errorMessage=this.error),this.internalValue=void 0!==this.value?this.value:this.initialValue||"",this.internalValue){const t=this.validateCharacterLength(this.internalValue);t&&this.setAndDispatchError(t)}}render(){const t=!!this.errorMessage,i={"bx--text-input":!0,"bx--text-input--error":t,"bx--text-input:user-invalid":t,"text-field--disabled":this.disabled};return p(r,{key:"cd443e0566c2064503c9a16332c175cbab66b564",class:{"udp-input":!0,"udp-input--error":t,"udp-input--disabled":this.disabled,"udp-input--readonly":this.readonly,"udp-input--required":this.required,[`udp-input--size-${this.size}`]:!0,[`udp-input--margin-${this.margin}`]:!0},"aria-invalid":t?"true":"false","aria-required":this.required?"true":"false"},p("div",{key:"f9c1c085ae39f49c966ce3b68785f6e6b25e3011",class:"bx--form-item"},p("unity-typography",{key:"c5a8973711298673e2240a805e5c31f7e4eb960a",variant:"caption-text"},p("label",{key:"2d4533dbd0a57fe86167c153ddd4bc11ce468626",htmlFor:this.id,class:"bx--label"},this.label,this.required?"*":"")),p("input",this.hidden?{id:this.id,type:"hidden",value:this.internalValue}:{id:this.id,type:"text",class:Object.assign({},i),placeholder:this.placeholder,value:this.internalValue,required:this.required,disabled:this.disabled,readonly:this.readonly,maxLength:this.maxCharacter,inputMode:this.inputMode,onInput:this.onInput,onChange:this.onChange,udprecordid:"udpRecord-text-field-"+this.id}),t&&p("div",{key:"bd6594ada0613e1bf5973b3ab85947ebfcaa143d",class:"error-message"},p("unity-typography",{key:"98b6b2fb24d5c53f7db1bb7ee736d0178b59f325",variant:"caption-text",color:"error"},this.errorMessage))))}get el(){return this}static get watchers(){return{error:[{updateError:0}],initialValue:[{updateInitialValue:0}],value:[{updateValue:0}]}}static get style(){return':host(.udp-input){display:block;box-sizing:border-box;position:relative}:host(.udp-input--full-width){width:100%}:host(.udp-input--error){--input-border-color:var(--input-underline-color-error)}:host(.udp-input--disabled){pointer-events:none;opacity:0.5;cursor:not-allowed}:host(.udp-input--required){position:relative}:host(.udp-input--readonly){--input-background:var(--gray-02)}:host(.udp-input--hidden){display:none}:host(.udp-input--checked){--input-accent-color:var(--primary-color)}:host(.udp-input--multi-select){--list-max-height:200px}:host(.udp-input) .bx--text-input:focus{outline:none;}:host(.udp-input) .bx--form-item{margin-bottom:var(--spacing-05)}:host(.udp-input) .bx--label{display:block;margin-bottom:var(--spacing-03);color:var(--text-main);font-size:var(--caption-text-font-size);font-weight:var(--caption-text-font-weight);line-height:var(--caption-text-line-height)}@media (max-width: var(--breakpoint-xs-max)){:host(.udp-input){margin-bottom:var(--spacing-04)}:host(.udp-input) .bx--form-item{margin-bottom:var(--spacing-04)}}@media (min-width: var(--breakpoint-sm-min)){:host(.udp-input){min-height:2.5rem;}}:host(.udp-input--size-small) .bx--text-input,:host(.udp-input--size-small) textarea,:host(.udp-input--size-small) input[type="text"],:host(.udp-input--size-small) input[type="number"],:host(.udp-input--size-small) input[type="email"],:host(.udp-input--size-small) input[type="password"],:host(.udp-input--size-small) input[type="tel"],:host(.udp-input--size-small) input[type="url"],:host(.udp-input--size-small) input[type="search"]{padding:var(--spacing-02);padding-bottom:6px;font-size:var(--caption-font-size, 0.875rem)}:host(.udp-input--size-normal) .bx--text-input,:host(.udp-input--size-normal) textarea,:host(.udp-input--size-normal) input[type="text"],:host(.udp-input--size-normal) input[type="number"],:host(.udp-input--size-normal) input[type="email"],:host(.udp-input--size-normal) input[type="password"],:host(.udp-input--size-normal) input[type="tel"],:host(.udp-input--size-normal) input[type="url"],:host(.udp-input--size-normal) input[type="search"]{padding:var(--spacing-03);padding-bottom:9px;font-size:var(--body-font-size)}:host(.udp-input--size-large) .bx--text-input,:host(.udp-input--size-large) textarea,:host(.udp-input--size-large) input[type="text"],:host(.udp-input--size-large) input[type="number"],:host(.udp-input--size-large) input[type="email"],:host(.udp-input--size-large) input[type="password"],:host(.udp-input--size-large) input[type="tel"],:host(.udp-input--size-large) input[type="url"],:host(.udp-input--size-large) input[type="search"]{padding:var(--spacing-04);padding-bottom:12px;font-size:var(--body-font-size)}:host(.udp-input--margin-none){margin:0}:host(.udp-input--margin-dense){margin:var(--spacing-02) 0}:host(.udp-input--margin-normal){margin:var(--spacing-03) 0}:host(.udp-input--margin-comfortable){margin:var(--spacing-04) 0}:host(.udp-input--size-small) .bx--label{margin-bottom:var(--spacing-02);font-size:var(--caption-font-size, 0.875rem)}:host(.udp-input--size-normal) .bx--label{margin-bottom:var(--spacing-03);font-size:var(--body-font-size)}:host(.udp-input--size-large) .bx--label{margin-bottom:var(--spacing-04);font-size:var(--body-font-size)}.bx--text-input,textarea,input[type="text"],input[type="number"],input[type="email"],input[type="password"],input[type="tel"],input[type="url"],input[type="search"]{display:inline-block;padding:var(--spacing-03);padding-bottom:9px;box-sizing:border-box;border:none;font-size:var(--body-font-size);background:var(--input-background);border-bottom:var(--underline-standard) solid var(--input-underline-color, var(--gray-08));width:100%;font-family:var(--font-family);transition:border-bottom-color 0.15s ease-in-out}.bx--text-input:focus,textarea:focus,input[type="text"]:focus,input[type="number"]:focus,input[type="email"]:focus,input[type="password"]:focus,input[type="tel"]:focus,input[type="url"]:focus,input[type="search"]:focus{border-bottom-color:var(--input-underline-color-focus, var(--primary-color));border-bottom-width:2px}.bx--text-input--error,.bx--text-input:user-invalid,:host(.udp-input--error) .bx--text-input,:host(.udp-input--error) textarea,:host(.udp-input--error) input[type="text"],:host(.udp-input--error) input[type="number"],:host(.udp-input--error) input[type="email"],:host(.udp-input--error) input[type="password"],:host(.udp-input--error) input[type="tel"],:host(.udp-input--error) input[type="url"],:host(.udp-input--error) input[type="search"],input[type="text"]:user-invalid,input[type="number"]:user-invalid,input[type="email"]:user-invalid,input[type="password"]:user-invalid,input[type="tel"]:user-invalid,input[type="url"]:user-invalid,input[type="search"]:user-invalid{border-bottom-color:var(--input-underline-color-error, var(--error-color-main)) !important}:host(.udp-input--disabled) .bx--text-input,:host(.udp-input--disabled) textarea,:host(.udp-input--disabled) input[type="text"],:host(.udp-input--disabled) input[type="number"],:host(.udp-input--disabled) input[type="email"],:host(.udp-input--disabled) input[type="password"],:host(.udp-input--disabled) input[type="tel"],:host(.udp-input--disabled) input[type="url"],:host(.udp-input--disabled) input[type="search"]{border-bottom-color:var(--input-underline-color-disabled, var(--gray-08))}textarea.bx--text-input{resize:vertical;min-height:var(--spacing-08)}.bx--text-input::placeholder,textarea::placeholder,input[type="text"]::placeholder,input[type="number"]::placeholder,input[type="email"]::placeholder,input[type="password"]::placeholder,input[type="tel"]::placeholder,input[type="url"]::placeholder,input[type="search"]::placeholder{color:var(--placeholder-color, #999);opacity:1}:host(.udp-input),:host{display:block;width:100%;box-sizing:border-box}.bx--form-item{margin-bottom:var(--spacing-05)}.bx--label{display:block;margin-bottom:var(--spacing-03)}.error-message,.bx--form-requirement,:host(.udp-input--error) .error-message,:host(.udp-input--error) .bx--form-requirement{color:var(--error-color-main, #d32f2f) !important;margin-top:var(--spacing-02);font-size:var(--caption-font-size, 0.875rem);--unity-typography-inherit-color:var(--error-color-main, #d32f2f)}.helper-text{color:var(--text-02, #525252);margin-top:var(--spacing-02);font-size:var(--caption-font-size, 0.875rem)}:host(.udp-input--disabled) .bx--text-input,:host(.udp-input--disabled) textarea,:host(.udp-input--disabled) input,:host(.udp-input--disabled){cursor:not-allowed;opacity:0.6}:host(.udp-input--readonly) .bx--text-input,:host(.udp-input--readonly) textarea,:host(.udp-input--readonly) input{background-color:var(--field-01, #f4f4f4);cursor:default}'}},[1,"text-field",{id:[1],label:[1],placeholder:[1],required:[4],readonly:[4],disabled:[4],minCharacter:[2,"min-character"],maxCharacter:[2,"max-character"],value:[1025],initialValue:[1,"initial-value"],hidden:[4],error:[1],inputMode:[1,"input-mode"],size:[1],margin:[1],errorMessage:[32],internalValue:[32]},void 0,{error:[{updateError:0}],initialValue:[{updateInitialValue:0}],value:[{updateValue:0}]}]);function s(){"undefined"!=typeof customElements&&["text-field","unity-typography"].forEach((t=>{switch(t){case"text-field":customElements.get(n(t))||customElements.define(n(t),o);break;case"unity-typography":customElements.get(n(t))||a()}}))}export{o as T,s as d}

package/dist/components/text-input-renderer.js

@@ -1,9 +1 @@
-import { T as TextInputRenderer$1, d as defineCustomElement$1 } from './text-input-renderer2.js';
-
-const TextInputRenderer = TextInputRenderer$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { TextInputRenderer, defineCustomElement };
-//# sourceMappingURL=text-input-renderer.js.map
-
-//# sourceMappingURL=text-input-renderer.js.map
+import{T as r,d as t}from"./text-input-renderer2.js";const e=r,o=t;export{e as TextInputRenderer,o as defineCustomElement}