udp-stencil-component-library 1.0.2 → 1.0.3

package/dist/esm/numeric-field_5.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-CaIWDYyq.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-CaIWDYyq.js';
 
 const numericFieldCss = ":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}";
 
@@ -122,18 +122,18 @@ const NumericField = class {
             'bx--text-input--error': isError,
             'text-field--disabled': this.disabled,
         };
-        return (h(Host, { key: '7d776c36ad5501bb3f374e944ffe45e9eeec6c23', class: {
+        return (h(Host, { key: '32ef2570f39039046ca11f41eca52febeae693ec', class: {
                 'udp-input': true,
                 'udp-input--error': isError,
                 'udp-input--disabled': this.disabled,
                 'udp-input--hidden': this.hidden,
                 'udp-input--required': this.required,
-                'udp-input--readonly': this.readOnly,
+                'udp-input--readonly': this.readonly,
                 [`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: 'be538a9c56bd08eab7223fef6ee9da24403c718b', class: "bx--form-item" }, h("unity-typography", { key: '46d18c808bbe451b4190acc8ee311e3bfbffd730', variant: "caption-text" }, h("label", { key: '263cf55793ddfa48b0673f56e21e0f1b0baaae32', htmlFor: this.id, class: "bx--label" }, this.label, this.required ? '*' : '')), this.hidden ? (h("input", { id: this.id, type: "hidden", value: this.internalValue, name: this.name })) : (h("input", { id: this.id, name: this.name, type: "number", class: Object.assign({}, inputClass), placeholder: this.placeholder, value: this.internalValue, required: this.required, disabled: this.disabled, readOnly: this.readOnly, onFocus: this.onFocus, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, inputMode: this.inputMode, min: this.min, max: this.max, step: this.step,
+            }, "aria-invalid": isError ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false' }, h("div", { key: '0e7a7e10a09c8f9884eca3156897cacb6e0dde56', class: "bx--form-item" }, h("unity-typography", { key: 'e277cf047ef5a7ecf0a886406ad6043b0a0f6112', variant: "caption-text" }, h("label", { key: '522fb1b279e0a6bbb1370ce3fe8f3862222af545', htmlFor: this.id, class: "bx--label" }, this.label, this.required ? '*' : '')), this.hidden ? (h("input", { id: this.id, type: "hidden", value: this.internalValue, name: this.name })) : (h("input", { id: this.id, name: this.name, type: "number", class: Object.assign({}, inputClass), placeholder: this.placeholder, value: this.internalValue, required: this.required, disabled: this.disabled, readOnly: this.readonly, onFocus: this.onFocus, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, inputMode: this.inputMode, min: this.min, max: this.max, step: this.step,
             //@ts-ignore
-            udprecordid: 'udpRecord-number-field-' + this.id })), isError && (h("div", { key: '9a374f9fe28eded7695ddf789ef1228aff14e493', class: "error-message" }, h("unity-typography", { key: '1cdcd1f2fb2cf057c6b3b39fedc7daa79534cfb4', variant: "caption-text", color: "error" }, this.errorMessage))))));
+            udprecordid: 'udpRecord-number-field-' + this.id })), isError && (h("div", { key: 'fcd472c0b004963ec052c3d9a00d52aaf008fbd2', class: "error-message" }, h("unity-typography", { key: 'e864b6079624297f1bd9e837579e24132a3390d9', variant: "caption-text", color: "error" }, this.errorMessage))))));
     }
     static get watchers() { return {
         "error": ["updateError"],
@@ -149,6 +149,7 @@ const TextArea = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         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
@@ -181,6 +182,15 @@ const TextArea = class {
             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();
         };
         /**
@@ -191,6 +201,16 @@ const TextArea = class {
                 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);
         };
     }
@@ -223,6 +243,41 @@ const TextArea = class {
             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
      */
@@ -241,6 +296,13 @@ const TextArea = class {
             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
@@ -290,7 +352,7 @@ const TextArea = class {
     }
     render() {
         const { disabled, id, internalValue, label, placeholder, required, readonly, errorMessage, fullWidth, internalRows } = this;
-        return (h(Host, { key: '378e250cf30868845c696dd86b787d32a4437e63', class: {
+        return (h(Host, { key: 'faf105fdc0cc63272227337663356a245564ff12', class: {
                 'udp-input': true,
                 'udp-input--error': !!errorMessage,
                 'udp-input--disabled': disabled,
@@ -299,12 +361,13 @@ const TextArea = class {
                 'udp-input--required': required,
                 [`udp-input--size-${this.size}`]: true,
                 [`udp-input--margin-${this.margin}`]: true,
-            } }, h("div", { key: '1369268dd7f253c7761a799cd416344e14c06e4c', class: "bx--form-item" }, h("unity-typography", { key: 'bfd1c9629383802d209ce3b9c43b752d5cc33c42', variant: "caption-text" }, h("label", { key: '79e84e7f6410ce0de70f857fc4a608857a221533', htmlFor: id, class: "bx--label" }, label, required ? '*' : '')), h("textarea", { key: '1801c9caaa02182f3e57885eba7c486b1a52a061', ref: el => (this.textareaEl = el), id: id, class: {
+            } }, h("div", { key: 'd8b0320b635c92debf9a35ad85e76c524fdce683', class: "bx--form-item" }, h("unity-typography", { key: 'eda91296822952f0eeb49d73df4ccde994e0fe22', variant: "caption-text" }, h("label", { key: '15f95f1b0d744a5555404c485bde82bc77ed22f2', htmlFor: id, class: "bx--label" }, label, required ? '*' : '')), h("textarea", { key: '0350ff25f0cc20448a3f0ec29447e289a80c6be8', 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: 'a9e97f1f0bb2fc27b148ecf21f2af7c36d2b32da', class: "error-message" }, h("unity-typography", { key: '67e29423ef72ed93c9f1389348f5823aa62f09cd', variant: "caption-text", color: "error" }, errorMessage))))));
+            }, 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: '70b53e47ce10072d8703a3ac66c923251c5fdcfe', class: "error-message" }, h("unity-typography", { key: '43f511ccc1099252a9f683c0b4afbe9554e86978', variant: "caption-text", color: "error" }, errorMessage))))));
     }
+    get el() { return getElement(this); }
     static get watchers() { return {
         "error": ["updateError"],
         "initialValue": ["initialValueChanged"],
@@ -437,7 +500,7 @@ const UdpDateSelector = class {
             classNames.push('bx--text-input--full-width');
         }
         const inputClass = classNames.join(' ');
-        return (h(Host, { key: '5d8e8f450757be0bd63db8fb511dd22a039b2466', class: {
+        return (h(Host, { key: 'cd8eb162431d282a64ca428499b31c389d964006', class: {
                 'udp-input': true,
                 'udp-input--error': isError,
                 'udp-input--disabled': this.disabled,
@@ -446,9 +509,9 @@ const UdpDateSelector = class {
                 '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: '0b22e99b464d0ca84ff7c2bb31e4910c310fa798', class: "bx--form-item" }, h("unity-typography", { key: 'c813e22de8abb30805ba8186874e2ec6762fde9f', variant: "caption-text" }, h("label", { key: 'aa3cb179d85fc655a5ce234785aa19067edb29b6', htmlFor: this.id, class: "bx--label" }, this.label, this.required ? '*' : '')), h("input", { key: '1b2f93e68873124f6a17b35e2fcfa640e80b469b', type: "date", id: this.id, name: this.name, class: inputClass, value: this.internalValue, min: this.min ? this.formatDateForHtml(this.min) : null, max: this.max ? this.formatDateForHtml(this.max) : null, onInput: this.handleDateChange, onChange: this.handleDateChange, onBlur: this.handleBlur, onFocus: this.handleFocus, disabled: this.disabled, readonly: this.readonly, required: this.required,
+            }, "aria-invalid": isError ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false' }, h("div", { key: '473df9337a3cc6dbb9aa3e7687d194a98f9ce9fe', class: "bx--form-item" }, h("unity-typography", { key: 'c63149f3a9cc0d88c51f1cc71be6751d771e35f2', variant: "caption-text" }, h("label", { key: '0ab607e8dd5e4e035cf0cee059caed2c09f149fa', htmlFor: this.id, class: "bx--label" }, this.label, this.required ? '*' : '')), h("input", { key: '762a962d30972ff1db2c9ee90ffac9c6c5ea325e', type: "date", id: this.id, name: this.name, class: inputClass, value: this.internalValue, min: this.min ? this.formatDateForHtml(this.min) : null, max: this.max ? this.formatDateForHtml(this.max) : null, onInput: this.handleDateChange, onChange: this.handleDateChange, onBlur: this.handleBlur, onFocus: this.handleFocus, disabled: this.disabled, readonly: this.readonly, required: this.required,
             //@ts-ignore
-            udprecordid: 'udpRecord-udp-date-selector-' + this.id }), h("unity-typography", { key: 'ca266c32a11a2653e322c159094ee7dd3857a311', class: "error-message", variant: "caption-text", color: "error" }, this.errorMessage))));
+            udprecordid: 'udpRecord-udp-date-selector-' + this.id }), h("unity-typography", { key: 'f0161f79bae9bd431a6cc191015545e55d2f9089', class: "error-message", variant: "caption-text", color: "error" }, this.errorMessage))));
     }
     static get watchers() { return {
         "error": ["updateError"],
@@ -611,7 +674,7 @@ const UdpDateTimeSelector = class {
             classNames.push('bx--text-input--full-width');
         }
         const inputClass = classNames.join(' ');
-        return (h(Host, { key: 'a4a4b1da1767b52e7c08025dcaab6f0d3e3f86d0', class: {
+        return (h(Host, { key: '85d5946dfe58a154c64b36e4b8049ad87b58fa4f', class: {
                 'udp-input': true,
                 'udp-input--error': isError,
                 'udp-input--disabled': this.disabled,
@@ -620,9 +683,9 @@ const UdpDateTimeSelector = class {
                 '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: 'c4a2172e002e541172ceae2438300f8f11dd5c05', class: "bx--form-item" }, h("unity-typography", { key: '27f68ecbcd8b373f2d3debf44bcc664665cb2002', variant: "caption-text" }, h("label", { key: '03f99e2992c441089b55fba119d8ceced7bc9cd0', htmlFor: this.id, class: "bx--label" }, this.label, this.required ? '*' : '')), h("input", { key: 'f5e5ce56fbb883392c36c7c697426d6cc5aa02e4', type: "datetime-local", id: this.id, name: this.name, class: inputClass, value: this.internalValue, min: this.min ? this.formatDateForHtml(this.min) : null, max: this.max ? this.formatDateForHtml(this.max) : null, onInput: this.handleDateChange, onBlur: this.handleBlur, onFocus: this.handleFocus, disabled: this.disabled, readonly: this.readonly, required: this.required,
+            }, "aria-invalid": isError ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false' }, h("div", { key: '0acd3b73f117d23bf72a31e579989b91c4d65bd6', class: "bx--form-item" }, h("unity-typography", { key: '96800ba12c04caf023ec598a4e4b5d49d38110dc', variant: "caption-text" }, h("label", { key: '6bf6800633644e6ccf71626fefcc5909cd82f00f', htmlFor: this.id, class: "bx--label" }, this.label, this.required ? '*' : '')), h("input", { key: '85aaa396c446593ffb7555af6bde6dd68bddcca0', type: "datetime-local", id: this.id, name: this.name, class: inputClass, value: this.internalValue, min: this.min ? this.formatDateForHtml(this.min) : null, max: this.max ? this.formatDateForHtml(this.max) : null, onInput: this.handleDateChange, onBlur: this.handleBlur, onFocus: this.handleFocus, disabled: this.disabled, readonly: this.readonly, required: this.required,
             //@ts-ignore
-            udprecordid: 'udpRecord-udp-datetime-selector-' + this.id }), h("unity-typography", { key: '04b8079259437699ecdac7699772c455b1a9d1e3', class: "error-message", variant: "caption-text", color: "error" }, this.errorMessage))));
+            udprecordid: 'udpRecord-udp-datetime-selector-' + this.id }), h("unity-typography", { key: '2fb0c1e5470610240c608fbdda2076ed8144aaff', class: "error-message", variant: "caption-text", color: "error" }, this.errorMessage))));
     }
     static get watchers() { return {
         "error": ["updateError"],
@@ -639,6 +702,7 @@ const UdpTimeSelector = class {
         registerInstance(this, hostRef);
         this.change = createEvent(this, "change");
         this.input = createEvent(this, "input");
+        this.errorEvent = createEvent(this, "error");
         /**
          * Current value of the time selector. When provided, makes this a controlled component.
          * Uses HH:mm format (e.g., "14:30"). The component will use this value and update it through events.
@@ -668,9 +732,60 @@ const UdpTimeSelector = class {
         this.margin = 'normal';
         this.internalValue = ''; // Internal state for value management
         /**
-         * Handles changes to the time input value. Updates internal state and emits standard events.
+         * Handles the invalid event from the native input element
+         * @param event - The invalid event from the time input
+         */
+        this.handleInvalid = (event) => {
+            const target = event.target;
+            const validationMessage = target.validationMessage;
+            this.setAndDispatchError(validationMessage);
+        };
+        /**
+         * Handles when the input becomes valid (clears errors)
+         * @param event - The input event
+         */
+        this.handleValid = (event) => {
+            const target = event.target;
+            // Always validate with our custom logic first
+            const customError = this.validateTime(target.value);
+            if (customError) {
+                // Custom validation failed
+                this.setAndDispatchError(customError);
+            }
+            else if (target.validity.valid) {
+                // Both custom and native validation passed
+                this.setAndDispatchError('');
+            }
+        };
+        /**
+         * Handles input events (real-time typing). Updates internal state and provides immediate validation feedback.
          * @param event - The input event from the time input
          */
+        this.handleTimeInput = (event) => {
+            const target = event.target;
+            const newValue = target.value;
+            // Update internal value
+            this.internalValue = newValue;
+            // Update controlled value if this is a controlled component
+            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.validateTime(newValue);
+                if (validationError !== this.errorMessage) {
+                    // Error state has changed, update it
+                    this.setAndDispatchError(validationError);
+                }
+            }
+            // Emit input event for real-time updates
+            this.input.emit(newValue);
+        };
+        /**
+         * Handles changes to the time input value. Updates internal state and emits standard events.
+         * @param event - The change event from the time input
+         */
         this.handleTimeChange = (event) => {
             const target = event.target;
             const newValue = target.value;
@@ -680,9 +795,18 @@ const UdpTimeSelector = class {
             if (this.value !== undefined) {
                 this.value = newValue;
             }
-            // Emit standard events for integration with form libraries and custom handlers
+            // Validate the new value
+            const customError = this.validateTime(newValue);
+            if (customError) {
+                // Custom validation failed
+                this.setAndDispatchError(customError);
+            }
+            else {
+                // Custom validation passed, clear any existing error
+                this.setAndDispatchError('');
+            }
+            // Emit change event for committed changes
             this.change.emit(newValue);
-            this.input.emit(newValue);
         };
     }
     /**
@@ -698,6 +822,7 @@ const UdpTimeSelector = class {
      * Watcher for the error prop. Updates the internal error message when the error prop changes.
      */
     updateError() {
+        console.log('Error prop changed:', this.error);
         this.errorMessage = this.error;
     }
     /**
@@ -708,6 +833,9 @@ const UdpTimeSelector = class {
     initialValueChanged(newValue) {
         if (newValue !== undefined) {
             this.internalValue = newValue;
+            const newError = this.validateTime(newValue);
+            if (newError)
+                this.setAndDispatchError(newError);
         }
     }
     /**
@@ -732,6 +860,52 @@ const UdpTimeSelector = class {
     handleFocus() {
         // Standard focus events bubble naturally - no custom emission needed
     }
+    /**
+     * Validates the time value against min/max constraints
+     * @param value - The time value to validate
+     * @returns Error message if invalid, empty string if valid
+     */
+    validateTime(value) {
+        if (!value)
+            return '';
+        // Convert time strings to minutes for comparison
+        const timeToMinutes = (time) => {
+            const [hours, minutes] = time.split(':').map(Number);
+            return hours * 60 + minutes;
+        };
+        const valueMinutes = timeToMinutes(value);
+        if (this.min) {
+            const minMinutes = timeToMinutes(this.min);
+            if (valueMinutes < minMinutes) {
+                return `Time must be after ${this.min}`;
+            }
+        }
+        if (this.max) {
+            const maxMinutes = timeToMinutes(this.max);
+            if (valueMinutes > maxMinutes) {
+                return `Time must be before ${this.max}`;
+            }
+        }
+        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 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);
+    }
     render() {
         const isError = !!this.errorMessage;
         const classNames = ['bx--text-input'];
@@ -745,7 +919,7 @@ const UdpTimeSelector = class {
             classNames.push('bx--text-input--full-width');
         }
         const inputClass = classNames.join(' ');
-        return (h(Host, { key: 'acb3b9aa491b0c6c67df493044aef292146110fb', class: {
+        return (h(Host, { key: '1205a25d9e0373114297d342b9ab0cbd285c51e2', class: {
                 'udp-input': true,
                 'udp-input--error': isError,
                 'udp-input--disabled': this.disabled,
@@ -754,10 +928,11 @@ const UdpTimeSelector = class {
                 '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: 'a2b9070e2b6a3e1904638fad5cdb8d86a5a3053a', class: "bx--form-item" }, h("unity-typography", { key: 'ca325952cc2f9d80d8aca99ca0748f0aa72751ee', variant: "caption-text" }, h("label", { key: '6afdf6a9224c5530c3f0e4c962d246ebd8c2926d', htmlFor: this.id, class: "bx--label" }, this.label, this.required ? '*' : '')), h("input", { key: '3fad200e15b093ca786129d7537bf0c56de28b8d', type: "time", id: this.id, name: this.name, class: inputClass, value: this.internalValue, min: this.min, max: this.max, onInput: this.handleTimeChange, onChange: this.handleTimeChange, onBlur: this.handleBlur, onFocus: this.handleFocus, disabled: this.disabled, readonly: this.readonly, required: this.required,
+            }, "aria-invalid": isError ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false' }, h("div", { key: 'b88a1cf0cccdf135fb40e86e0fbc4cf10847dec2', class: "bx--form-item" }, h("unity-typography", { key: '77c013fb01660898ad898db14ca04b51f6e07de0', variant: "caption-text" }, h("label", { key: '26721af45bf881a3daa594dd8ae018b8a98b39bc', htmlFor: this.id, class: "bx--label" }, this.label, this.required ? '*' : '')), h("input", { key: 'a51e49451c55e4ece0668078959a141d521d7773', type: "time", id: this.id, name: this.name, class: inputClass, value: this.internalValue, min: this.min, max: this.max, onInput: this.handleTimeInput, onChange: this.handleTimeChange, onBlur: this.handleBlur, onFocus: this.handleFocus, onInvalid: this.handleInvalid, disabled: this.disabled, readonly: this.readonly, required: this.required,
             //@ts-ignore
-            udprecordid: 'udpRecord-udp-time-selector-' + this.id }), h("unity-typography", { key: '8061d8fe2f38d9c9d3ff3136e445835ef5811eb6', class: "error-message", variant: "caption-text", color: "error" }, this.errorMessage))));
+            udprecordid: 'udpRecord-udp-time-selector-' + this.id }), h("unity-typography", { key: '5171d4ca07938113cc781e605da2d60492e64008', class: "error-message", variant: "caption-text", color: "error" }, this.errorMessage))));
     }
+    get el() { return getElement(this); }
     static get watchers() { return {
         "error": ["updateError"],
         "initialValue": ["initialValueChanged"],