npm - udp-stencil-component-library - Versions diffs - 1.0.2 → 1.0.3 - Mend

udp-stencil-component-library 1.0.2 → 1.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (638) hide show

package/dist/collection/components/my-component/UI/inputs/text-field/text-field.js CHANGED Viewed

@@ -70,6 +70,15 @@ export class TextField {
             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.
@@ -81,6 +90,16 @@ export class TextField {
                 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);
         };
@@ -114,6 +133,41 @@ export class TextField {
             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
@@ -125,6 +179,13 @@ export class TextField {
         }
         // 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;
@@ -134,7 +195,7 @@ export class TextField {
             'bx--text-input:user-invalid': isError,
             'text-field--disabled': this.disabled,
         };
-        return (h(Host, { key: 'babf775e0c8ff358b407e7082a8370c8eac191c4', class: {
+        return (h(Host, { key: '4c97f1b312bfacd447bc14bf3c28542a64829d57', class: {
                 'udp-input': true,
                 'udp-input--error': isError,
                 'udp-input--disabled': this.disabled,
@@ -142,9 +203,9 @@ export class TextField {
                 '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: '4e5f24c12b24d95cd2497abb342001ab62f3509d', class: "bx--form-item" }, h("unity-typography", { key: 'b93a025bdec3267012a91b2bb7b4de9b5d01bbbf', variant: "caption-text" }, h("label", { key: '3d11efcfd0eb3ca142533860c05b6e2448405195', 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,
+            }, "aria-invalid": isError ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false' }, h("div", { key: '71ce2d0d6564b5bb0689839616bd7197361ffeb6', class: "bx--form-item" }, h("unity-typography", { key: '7f1a7a034239aa9c69cd970d959f35e74f7111e8', variant: "caption-text" }, h("label", { key: 'c62a431b8e86c6803cc574f196c785a67ee853af', 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: '772531a96a4c78500d9c424c01738fa4db6c4c9a', class: "error-message" }, h("unity-typography", { key: '58fa85c006231ec3f5563c4a228dad5fec33723b', variant: "caption-text", color: "error" }, this.errorMessage))))));
+            udprecordid: 'udpRecord-text-field-' + this.id })), isError && (h("div", { key: '7f5c9cac452884047569840e6620044c4d544c65', class: "error-message" }, h("unity-typography", { key: '61c3877f867c8a6751483c402f45132a289b84c2', variant: "caption-text", color: "error" }, this.errorMessage))))));
     }
     static get is() { return "text-field"; }
     static get encapsulation() { return "shadow"; }
@@ -274,6 +335,25 @@ export class TextField {
                 "setter": false,
                 "reflect": false
             },
+            "minCharacter": {
+                "type": "number",
+                "attribute": "min-character",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum number of characters required in the input. Enforces minimum character limits."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
             "maxCharacter": {
                 "type": "number",
                 "attribute": "max-character",
@@ -474,8 +554,24 @@ export class TextField {
                     "resolved": "string",
                     "references": {}
                 }
+            }, {
+                "method": "errorEvent",
+                "name": "error",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when validation errors occur (e.g., character length outside min/max constraints).\nContains the error message string. Empty string indicates no error."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
             }];
     }
+    static get elementRef() { return "el"; }
     static get watchers() {
         return [{
                 "propName": "error",

package/dist/collection/components/my-component/UI/inputs/text-field/text-field.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"text-field.js","sourceRoot":"","sources":["../../../../../../src/components/my-component/UI/inputs/text-field/text-field.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Prop,\n h,\n Host,\n State,\n Watch,\n Event,\n EventEmitter,\n} from '@stencil/core';\nimport { InputSize, InputMargin } from '../input-types';\n\n/*\n A standardized text input field component with error handling, validation, and custom styling.\n * Supports both controlled and uncontrolled modes with proper event emission for integration\n * with form libraries and custom event handlers.\n \n @example\n * ```tsx\n * // Uncontrolled component with initial value\n * <text-field\n * placeholder=\"Enter your name\"\n * initialValue=\"John Doe\"\n * onChange={(e) => console.log('Final value:', e.detail)}\n * />\n \n // Controlled component\n * <text-field\n * placeholder=\"Enter your name\"\n * value={nameValue}\n * onChange={(e) => setNameValue(e.detail)}\n * />\n \n // With validation and error handling\n * <text-field\n * label=\"Email Address\"\n * placeholder=\"user@example.com\"\n * required={true}\n * error={emailError}\n * value={email}\n * onChange={handleEmailChange}\n * />\n * ```\n /\n@Component({\n tag: 'text-field',\n styleUrl: 'text-field.css',\n shadow: true,\n})\nexport class TextField {\n /\n Unique identifier for the input element. Used for form association and accessibility.\n /\n @Prop() id: string;\n\n /\n Label text displayed above the input field. Used for accessibility and user guidance.\n /\n @Prop() label: string;\n\n /\n Placeholder text shown when the input is empty. Provides hints about expected input format.\n /\n @Prop() placeholder: string;\n\n /\n Whether the field is required for form submission. Adds visual indicator () and validation.\n /\n @Prop() required: boolean;\n\n /*\n Whether the field is read-only. Users can see the value but cannot modify it.\n /\n @Prop() readonly: boolean;\n\n /\n Whether the field is disabled. Users cannot interact with the field.\n /\n @Prop() disabled: boolean;\n\n /\n Maximum number of characters allowed in the input. Enforces character limits.\n /\n @Prop() maxCharacter: number;\n\n /\n Current value of the input field. When provided, makes this a controlled component.\n * The component will use this value and update it through events.\n /\n @Prop({ mutable: true }) value: string;\n\n /\n Initial value for the input field. Used for uncontrolled components to set the default value.\n * Only used when `value` prop is not provided.\n /\n @Prop() initialValue: string;\n\n /\n Whether the field should be hidden from display while maintaining form functionality.\n /\n @Prop() hidden: boolean;\n\n /\n Error message to display below the input field. Shows validation errors or other issues.\n /\n @Prop() error: string = '';\n\n /\n Input mode hint for mobile keyboards. Optimizes keyboard layout for specific input types.\n * Common values: 'text', 'email', 'tel', 'url', 'numeric', 'decimal', 'search'\n /\n @Prop() inputMode: string;\n\n /\n Size variant controlling the padding and spacing of the input.\n * - 'small': Compact spacing for data-heavy interfaces\n * - 'normal': Standard spacing (default)\n * - 'large': Generous spacing for accessibility\n /\n @Prop() size: InputSize = 'normal';\n\n /\n Margin variant for the input spacing.\n * - 'none': No margin\n * - 'dense': Minimal margin spacing\n * - 'normal': Standard margin spacing (default)\n /\n @Prop() margin: InputMargin = 'normal';\n\n /\n Internal error message state. Manages display of validation errors.\n * @internal\n /\n @State() errorMessage: string;\n\n /\n Internal value state. Manages the current input value independently of props.\n * @internal\n /\n @State() internalValue: string;\n\n /\n Emitted when the text field value changes (on blur, enter, etc.).\n * Provides the final committed value when user finishes editing.\n \n @event change\n * @param {string} value - The current value of the text field\n \n @example\n * ```tsx\n * <text-field onChange={(e) => handleValueChange(e.detail)} />\n * ```\n /\n @Event() change: EventEmitter<string>;\n\n /\n Updates the error message when the error prop changes.\n * @internal\n /\n @Watch('error')\n updateError() {\n this.errorMessage = this.error;\n }\n\n /\n Updates the internal value when initialValue prop changes.\n * Only updates if current value is empty to avoid overriding user input.\n * @internal\n /\n @Watch('initialValue')\n updateInitialValue() {\n // Only update if we don't have a value yet or if explicitly resetting\n if (this.internalValue === '' \|\| this.internalValue === undefined) {\n this.internalValue = this.initialValue \|\| '';\n }\n }\n\n /\n Updates the internal value when value prop changes.\n * For controlled components, the value prop takes precedence.\n * @internal\n /\n @Watch('value')\n updateValue() {\n // If value prop is provided, this is a controlled component\n if (this.value !== undefined) {\n this.internalValue = this.value;\n }\n }\n\n /\n Component lifecycle method. Initializes error message and internal value.\n * @internal\n /\n componentWillLoad() {\n // Initialize error message\n if (this.error) {\n this.errorMessage = this.error;\n }\n // Initialize value: use value prop if provided (controlled), otherwise use initialValue (uncontrolled)\n this.internalValue = this.value !== undefined ? this.value : (this.initialValue \|\| '');\n }\n\n /\n Handles input events (real-time typing). Updates internal state and emits input event.\n * For controlled components, also updates the value prop.\n * @param event - The native input event\n * @internal\n /\n private onInput = (event: InputEvent) => {\n if (this.readonly) {\n // Prevent typing if the field is read-only\n const input = event.target as HTMLInputElement;\n input.value = this.internalValue;\n return;\n }\n const newValue = (event.target as HTMLInputElement).value;\n this.internalValue = newValue; // Update internal state\n\n // If this is a controlled component (value prop provided), update the value prop\n if (this.value !== undefined) {\n this.value = newValue;\n }\n }\n\n /\n Handles change events (committed changes on blur/enter). Emits change event.\n * @param event - The native change event\n * @internal\n /\n private onChange = (event: Event) => {\n if (this.readonly) {\n return;\n }\n const newValue = (event.target as HTMLInputElement).value;\n // Emit change event when user finishes editing (blur, enter, etc.)\n this.change.emit(newValue);\n }\n\n render() {\n const isError = !!this.errorMessage;\n\n const inputClass = {\n 'bx--text-input': true,\n 'bx--text-input--error': isError,\n 'bx--text-input:user-invalid': isError,\n 'text-field--disabled': this.disabled,\n };\n return (\n <Host\n class={{\n 'udp-input': true,\n 'udp-input--error': isError,\n 'udp-input--disabled': this.disabled,\n 'udp-input--readonly': this.readonly,\n 'udp-input--required': this.required,\n [`udp-input--size-${this.size}`]: true,\n [`udp-input--margin-${this.margin}`]: true,\n }}\n aria-invalid={isError ? 'true' : 'false'}\n aria-required={this.required ? 'true' : 'false'}\n >\n <div class=\"bx--form-item\">\n <unity-typography variant=\"caption-text\">\n <label htmlFor={this.id} class=\"bx--label\">\n {this.label}\n {this.required ? '' : ''}\n </label>\n </unity-typography>\n {this.hidden ? (\n <input id={this.id} type=\"hidden\" value={this.internalValue} />\n ) : (\n <input\n id={this.id}\n type=\"text\"\n class={{ ...inputClass }}\n placeholder={this.placeholder}\n value={this.internalValue}\n required={this.required}\n disabled={this.disabled}\n readonly={this.readonly}\n maxLength={this.maxCharacter}\n inputMode={this.inputMode}\n onInput={this.onInput}\n onChange={this.onChange}\n //@ts-ignore\n udprecordid={'udpRecord-text-field-' + this.id}\n />\n )}\n {isError && (\n <div class=\"error-message\">\n <unity-typography variant=\"caption-text\" color=\"error\">{this.errorMessage}</unity-typography>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"text-field.js","sourceRoot":"","sources":["../../../../../../src/components/my-component/UI/inputs/text-field/text-field.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Prop,\n h,\n Host,\n State,\n Watch,\n Event,\n EventEmitter,\n Element,\n} from '@stencil/core';\nimport { InputSize, InputMargin } from '../input-types';\n\n/*\n A standardized text input field component with error handling, validation, and custom styling.\n * Supports both controlled and uncontrolled modes with proper event emission for integration\n * with form libraries and custom event handlers.\n \n @example\n * ```tsx\n * // Uncontrolled component with initial value\n * <text-field\n * placeholder=\"Enter your name\"\n * initialValue=\"John Doe\"\n * onChange={(e) => console.log('Final value:', e.detail)}\n * />\n \n // Controlled component\n * <text-field\n * placeholder=\"Enter your name\"\n * value={nameValue}\n * onChange={(e) => setNameValue(e.detail)}\n * />\n \n // With validation and error handling\n * <text-field\n * label=\"Email Address\"\n * placeholder=\"user@example.com\"\n * required={true}\n * error={emailError}\n * value={email}\n * onChange={handleEmailChange}\n * />\n * ```\n /\n@Component({\n tag: 'text-field',\n styleUrl: 'text-field.css',\n shadow: true,\n})\nexport class TextField {\n @Element() el: HTMLElement;\n\n /\n Unique identifier for the input element. Used for form association and accessibility.\n /\n @Prop() id: string;\n\n /\n Label text displayed above the input field. Used for accessibility and user guidance.\n /\n @Prop() label: string;\n\n /\n Placeholder text shown when the input is empty. Provides hints about expected input format.\n /\n @Prop() placeholder: string;\n\n /\n Whether the field is required for form submission. Adds visual indicator () and validation.\n /\n @Prop() required: boolean;\n\n /*\n Whether the field is read-only. Users can see the value but cannot modify it.\n /\n @Prop() readonly: boolean;\n\n /\n Whether the field is disabled. Users cannot interact with the field.\n /\n @Prop() disabled: boolean;\n\n /\n Minimum number of characters required in the input. Enforces minimum character limits.\n /\n @Prop() minCharacter: number;\n\n /\n Maximum number of characters allowed in the input. Enforces character limits.\n /\n @Prop() maxCharacter: number;\n\n /\n Current value of the input field. When provided, makes this a controlled component.\n * The component will use this value and update it through events.\n /\n @Prop({ mutable: true }) value: string;\n\n /\n Initial value for the input field. Used for uncontrolled components to set the default value.\n * Only used when `value` prop is not provided.\n /\n @Prop() initialValue: string;\n\n /\n Whether the field should be hidden from display while maintaining form functionality.\n /\n @Prop() hidden: boolean;\n\n /\n Error message to display below the input field. Shows validation errors or other issues.\n /\n @Prop() error: string = '';\n\n /\n Input mode hint for mobile keyboards. Optimizes keyboard layout for specific input types.\n * Common values: 'text', 'email', 'tel', 'url', 'numeric', 'decimal', 'search'\n /\n @Prop() inputMode: string;\n\n /\n Size variant controlling the padding and spacing of the input.\n * - 'small': Compact spacing for data-heavy interfaces\n * - 'normal': Standard spacing (default)\n * - 'large': Generous spacing for accessibility\n /\n @Prop() size: InputSize = 'normal';\n\n /\n Margin variant for the input spacing.\n * - 'none': No margin\n * - 'dense': Minimal margin spacing\n * - 'normal': Standard margin spacing (default)\n /\n @Prop() margin: InputMargin = 'normal';\n\n /\n Internal error message state. Manages display of validation errors.\n * @internal\n /\n @State() errorMessage: string;\n\n /\n Internal value state. Manages the current input value independently of props.\n * @internal\n /\n @State() internalValue: string;\n\n /\n Emitted when the text field value changes (on blur, enter, etc.).\n * Provides the final committed value when user finishes editing.\n \n @event change\n * @param {string} value - The current value of the text field\n \n @example\n * ```tsx\n * <text-field onChange={(e) => handleValueChange(e.detail)} />\n * ```\n /\n @Event() change: EventEmitter<string>;\n\n /\n Emitted when validation errors occur (e.g., character length outside min/max constraints).\n * Contains the error message string. Empty string indicates no error.\n /\n @Event({\n eventName: 'error',\n bubbles: true,\n composed: true,\n cancelable: true\n }) errorEvent: EventEmitter<string>;\n\n /\n Updates the error message when the error prop changes.\n * @internal\n /\n @Watch('error')\n updateError() {\n this.errorMessage = this.error;\n }\n\n /\n Updates the internal value when initialValue prop changes.\n * Only updates if current value is empty to avoid overriding user input.\n * @internal\n /\n @Watch('initialValue')\n updateInitialValue() {\n // Only update if we don't have a value yet or if explicitly resetting\n if (this.internalValue === '' \|\| this.internalValue === undefined) {\n this.internalValue = this.initialValue \|\| '';\n }\n }\n\n /\n Updates the internal value when value prop changes.\n * For controlled components, the value prop takes precedence.\n * @internal\n /\n @Watch('value')\n updateValue() {\n // If value prop is provided, this is a controlled component\n if (this.value !== undefined) {\n this.internalValue = this.value;\n }\n }\n\n /\n Validates the text value against min/max character constraints\n * @param value - The text value to validate\n * @returns Error message if invalid, empty string if valid\n /\n private validateCharacterLength(value: string): string {\n if (!value) return '';\n\n const length = value.length;\n\n if (this.minCharacter && length < this.minCharacter) {\n return `Must be at least ${this.minCharacter} characters`;\n }\n\n if (this.maxCharacter && length > this.maxCharacter) {\n return `Must be no more than ${this.maxCharacter} characters`;\n }\n\n return '';\n }\n\n /\n Sets error state and dispatches error event that bubbles to stencil-field\n * @param errorMessage - The error message to set and dispatch\n /\n private setAndDispatchError(errorMessage: string) {\n console.log('Setting text field error:', errorMessage);\n\n // Update internal error state\n this.errorMessage = errorMessage;\n\n // Emit Stencil error event\n this.errorEvent.emit(errorMessage);\n\n // Dispatch custom error event that bubbles up to stencil-field\n const errorEvent = new CustomEvent('error', {\n detail: errorMessage,\n bubbles: true,\n composed: true\n });\n this.el.dispatchEvent(errorEvent);\n }\n\n /\n Component lifecycle method. Initializes error message and internal value.\n * @internal\n /\n componentWillLoad() {\n // Initialize error message\n if (this.error) {\n this.errorMessage = this.error;\n }\n // Initialize value: use value prop if provided (controlled), otherwise use initialValue (uncontrolled)\n this.internalValue = this.value !== undefined ? this.value : (this.initialValue \|\| '');\n\n // Validate the initial value\n if (this.internalValue) {\n const validationError = this.validateCharacterLength(this.internalValue);\n if (validationError) {\n this.setAndDispatchError(validationError);\n }\n }\n }\n\n /\n Handles input events (real-time typing). Updates internal state and emits input event.\n * For controlled components, also updates the value prop.\n * @param event - The native input event\n * @internal\n /\n private onInput = (event: InputEvent) => {\n if (this.readonly) {\n // Prevent typing if the field is read-only\n const input = event.target as HTMLInputElement;\n input.value = this.internalValue;\n return;\n }\n const newValue = (event.target as HTMLInputElement).value;\n this.internalValue = newValue; // Update internal state\n\n // If this is a controlled component (value prop provided), update the value prop\n if (this.value !== undefined) {\n this.value = newValue;\n }\n\n // Re-evaluate validation on input if there's currently an error\n // This provides immediate feedback when user corrects the error\n if (this.errorMessage) {\n const validationError = this.validateCharacterLength(newValue);\n\n if (validationError !== this.errorMessage) {\n // Error state has changed, update it\n this.setAndDispatchError(validationError);\n }\n }\n }\n\n /\n Handles change events (committed changes on blur/enter). Emits change event.\n * @param event - The native change event\n * @internal\n /\n private onChange = (event: Event) => {\n if (this.readonly) {\n return;\n }\n const newValue = (event.target as HTMLInputElement).value;\n\n // Validate the new value for character length constraints\n const validationError = this.validateCharacterLength(newValue);\n\n if (validationError) {\n // Character length validation failed\n this.setAndDispatchError(validationError);\n } else {\n // Character length validation passed, clear any existing error\n this.setAndDispatchError('');\n }\n\n // Emit change event when user finishes editing (blur, enter, etc.)\n this.change.emit(newValue);\n }\n\n render() {\n const isError = !!this.errorMessage;\n\n const inputClass = {\n 'bx--text-input': true,\n 'bx--text-input--error': isError,\n 'bx--text-input:user-invalid': isError,\n 'text-field--disabled': this.disabled,\n };\n return (\n <Host\n class={{\n 'udp-input': true,\n 'udp-input--error': isError,\n 'udp-input--disabled': this.disabled,\n 'udp-input--readonly': this.readonly,\n 'udp-input--required': this.required,\n [`udp-input--size-${this.size}`]: true,\n [`udp-input--margin-${this.margin}`]: true,\n }}\n aria-invalid={isError ? 'true' : 'false'}\n aria-required={this.required ? 'true' : 'false'}\n >\n <div class=\"bx--form-item\">\n <unity-typography variant=\"caption-text\">\n <label htmlFor={this.id} class=\"bx--label\">\n {this.label}\n {this.required ? '' : ''}\n </label>\n </unity-typography>\n {this.hidden ? (\n <input id={this.id} type=\"hidden\" value={this.internalValue} />\n ) : (\n <input\n id={this.id}\n type=\"text\"\n class={{ ...inputClass }}\n placeholder={this.placeholder}\n value={this.internalValue}\n required={this.required}\n disabled={this.disabled}\n readonly={this.readonly}\n maxLength={this.maxCharacter}\n inputMode={this.inputMode}\n onInput={this.onInput}\n onChange={this.onChange}\n //@ts-ignore\n udprecordid={'udpRecord-text-field-' + this.id}\n />\n )}\n {isError && (\n <div class=\"error-message\">\n <unity-typography variant=\"caption-text\" color=\"error\">{this.errorMessage}</unity-typography>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/my-component/UI/inputs/time-selector/udp-time-selector.js CHANGED Viewed

@@ -68,9 +68,60 @@ export class UdpTimeSelector {
         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;
@@ -80,9 +131,18 @@ export class UdpTimeSelector {
             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);
         };
     }
     /**
@@ -98,6 +158,7 @@ export class UdpTimeSelector {
      * 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;
     }
     /**
@@ -108,6 +169,9 @@ export class UdpTimeSelector {
     initialValueChanged(newValue) {
         if (newValue !== undefined) {
             this.internalValue = newValue;
+            const newError = this.validateTime(newValue);
+            if (newError)
+                this.setAndDispatchError(newError);
         }
     }
     /**
@@ -132,6 +196,52 @@ export class UdpTimeSelector {
     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'];
@@ -145,7 +255,7 @@ export class UdpTimeSelector {
             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,
@@ -154,9 +264,9 @@ export class UdpTimeSelector {
                 '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))));
     }
     static get is() { return "udp-time-selector"; }
     static get encapsulation() { return "shadow"; }
@@ -494,8 +604,24 @@ export class UdpTimeSelector {
                     "resolved": "string",
                     "references": {}
                 }
+            }, {
+                "method": "errorEvent",
+                "name": "error",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when validation errors occur (e.g., time outside min/max constraints).\nContains the error message string. Empty string indicates no error."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
             }];
     }
+    static get elementRef() { return "el"; }
     static get watchers() {
         return [{
                 "propName": "error",

package/dist/collection/components/my-component/UI/inputs/time-selector/udp-time-selector.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"udp-time-selector.js","sourceRoot":"","sources":["../../../../../../src/components/my-component/UI/inputs/time-selector/udp-time-selector.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Host, State, Event, EventEmitter, Prop, Watch } from '@stencil/core';\nimport { InputSize, InputMargin } from '../input-types';\n\n/*\n A standardized time input component with validation, min/max constraints, and precise time selection.\n * Supports both controlled and uncontrolled modes with proper event emission for integration\n * with form libraries and custom event handlers.\n \n Time Handling:\n * - Uses HTML5 `time` input for consistent browser behavior and native time picker\n * - Supports HH:mm format (24-hour time) as per HTML5 specification\n * - Provides min/max time constraints for validation\n \n @example\n * ```tsx\n * // Uncontrolled component with initial value\n * <udp-time-selector\n * label=\"Meeting Time\"\n * initialValue=\"14:30\"\n * onChange={(e) => console.log('Selected:', e.detail)}\n * />\n \n // Controlled component\n * <udp-time-selector\n * label=\"Appointment Time\"\n * value={appointmentTime}\n * onChange={(e) => setAppointmentTime(e.detail)}\n * />\n \n // With validation and constraints\n * <udp-time-selector\n * label=\"Business Hours\"\n * value={businessTime}\n * min=\"09:00\"\n * max=\"17:00\"\n * required={true}\n * error={timeError}\n * onChange={handleTimeChange}\n * />\n * ```\n /\n@Component({\n tag: 'udp-time-selector',\n styleUrl: 'udp-time-selector.css',\n shadow: true,\n})\nexport class UdpTimeSelector {\n /\n Unique identifier for the input element. Used for form association and accessibility.\n /\n @Prop() id: string;\n\n /\n Name attribute for the input element. Used for form submission.\n /\n @Prop() name: string;\n\n /\n Label text displayed above the input field. Used for accessibility and user guidance.\n /\n @Prop() label: string;\n\n /\n Minimum time value allowed. Uses HH:mm format (e.g., \"09:00\").\n * Enforces lower bounds validation for time selection.\n /\n @Prop() min: string;\n\n /\n Maximum time value allowed. Uses HH:mm format (e.g., \"17:00\").\n * Enforces upper bounds validation for time selection.\n /\n @Prop() max: string;\n\n /\n Whether the field is required for form submission. Adds visual indicator () and validation.\n /\n @Prop() required: boolean;\n\n /*\n Error message to display below the input field. Shows validation errors or other issues.\n /\n @Prop() error: string;\n\n /\n Initial value for the time selector. Used for uncontrolled components to set the default value.\n * Uses HH:mm format (e.g., \"14:30\"). Only used when `value` prop is not provided.\n /\n @Prop() initialValue: string;\n\n /\n Current value of the time selector. When provided, makes this a controlled component.\n * Uses HH:mm format (e.g., \"14:30\"). The component will use this value and update it through events.\n /\n @Prop({ mutable: true }) value: string = '';\n\n /\n Whether the field is disabled. Users cannot interact with the field when disabled.\n /\n @Prop() disabled: boolean;\n\n /\n Whether the input is readonly.\n /\n @Prop() readonly: boolean = false;\n\n /\n Whether the input should take the full width of its container.\n /\n @Prop() fullWidth: boolean = false;\n\n /\n Size variant controlling the padding and spacing of the input.\n * - 'small': Compact spacing for data-heavy interfaces\n * - 'normal': Standard spacing (default)\n * - 'large': Generous spacing for accessibility\n /\n @Prop() size: InputSize = 'normal';\n\n /\n Margin variant for the input spacing.\n * - 'none': No margin\n * - 'dense': Minimal margin spacing\n * - 'normal': Standard margin spacing (default)\n /\n @Prop() margin: InputMargin = 'normal';\n\n @State() internalValue: string = ''; // Internal state for value management\n @State() errorMessage: string;\n\n /\n Emitted when the time value changes through user interaction or programmatic update.\n * Contains the new time value in HH:mm format.\n /\n @Event() change: EventEmitter<string>;\n\n /\n Emitted when the user types in the time input field.\n * Contains the current input value (may be incomplete during typing).\n /\n @Event() input: EventEmitter<string>;\n\n /\n Component lifecycle method called when the component is about to load.\n * Initializes the internal value from either the value prop or initialValue prop.\n /\n componentWillLoad() {\n // Initialize from controlled value or initial value\n this.internalValue = this.value \|\| this.initialValue \|\| '';\n this.errorMessage = this.error;\n }\n\n /\n Watcher for the error prop. Updates the internal error message when the error prop changes.\n /\n @Watch('error')\n updateError() {\n this.errorMessage = this.error;\n }\n\n /\n Watcher for the initialValue prop. Updates the internal value when initialValue changes\n * (useful for form resets, dynamic initial values, etc.).\n * @param newValue - The new initial value\n /\n @Watch('initialValue')\n initialValueChanged(newValue: string) {\n if (newValue !== undefined) {\n this.internalValue = newValue;\n }\n }\n\n /\n Watcher for the value prop. Updates the internal value when the value prop changes\n * (controlled component behavior).\n * @param newValue - The new controlled value\n /\n @Watch('value')\n valueChanged(newValue: string) {\n if (newValue !== undefined) {\n this.internalValue = newValue;\n }\n }\n\n /\n Handles the blur event on the time input. Standard focus events bubble naturally.\n /\n handleBlur() {\n // Standard focus events bubble naturally - no custom emission needed\n }\n\n /\n Handles the focus event on the time input. Standard focus events bubble naturally.\n /\n handleFocus() {\n // Standard focus events bubble naturally - no custom emission needed\n }\n\n /\n Handles changes to the time input value. Updates internal state and emits standard events.\n * @param event - The input event from the time input\n /\n handleTimeChange = (event: Event) => {\n const target = event.target as HTMLInputElement;\n const newValue = target.value;\n\n // Update internal value\n this.internalValue = newValue;\n\n // Update controlled value if this is a controlled component\n if (this.value !== undefined) {\n this.value = newValue;\n }\n\n // Emit standard events for integration with form libraries and custom handlers\n this.change.emit(newValue);\n this.input.emit(newValue);\n }\n\n render() {\n const isError: boolean = !!this.errorMessage;\n const classNames = ['bx--text-input'];\n if (isError) {\n classNames.push('bx--text-input--error');\n }\n if (this.disabled) {\n classNames.push('time-selector--disabled');\n }\n if (this.fullWidth) {\n classNames.push('bx--text-input--full-width');\n }\n const inputClass = classNames.join(' ');\n\n return (\n <Host\n class={{\n 'udp-input': true,\n 'udp-input--error': isError,\n 'udp-input--disabled': this.disabled,\n 'udp-input--readonly': this.readonly,\n 'udp-input--full-width': this.fullWidth,\n 'udp-input--required': this.required,\n [`udp-input--size-${this.size}`]: true,\n [`udp-input--margin-${this.margin}`]: true,\n }}\n aria-invalid={isError ? 'true' : 'false'}\n aria-required={this.required ? 'true' : 'false'}\n >\n <div class=\"bx--form-item\">\n <unity-typography variant=\"caption-text\">\n <label htmlFor={this.id} class=\"bx--label\">\n {this.label}\n {this.required ? '' : ''}\n </label>\n </unity-typography>\n <input\n type=\"time\"\n id={this.id}\n name={this.name}\n class={inputClass}\n value={this.internalValue}\n min={this.min}\n max={this.max}\n onInput={this.handleTimeChange}\n onChange={this.handleTimeChange}\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n disabled={this.disabled}\n readonly={this.readonly}\n required={this.required}\n //@ts-ignore\n udprecordid={'udpRecord-udp-time-selector-' + this.id}\n />\n <unity-typography class=\"error-message\" variant=\"caption-text\" color=\"error\">\n {this.errorMessage}\n </unity-typography>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"udp-time-selector.js","sourceRoot":"","sources":["../../../../../../src/components/my-component/UI/inputs/time-selector/udp-time-selector.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Host, State, Event, EventEmitter, Prop, Watch, Element } from '@stencil/core';\nimport { InputSize, InputMargin } from '../input-types';\n\n/*\n A standardized time input component with validation, min/max constraints, and precise time selection.\n * Supports both controlled and uncontrolled modes with proper event emission for integration\n * with form libraries and custom event handlers.\n \n Time Handling:\n * - Uses HTML5 `time` input for consistent browser behavior and native time picker\n * - Supports HH:mm format (24-hour time) as per HTML5 specification\n * - Provides min/max time constraints for validation\n \n @example\n * ```tsx\n * // Uncontrolled component with initial value\n * <udp-time-selector\n * label=\"Meeting Time\"\n * initialValue=\"14:30\"\n * onChange={(e) => console.log('Selected:', e.detail)}\n * />\n \n // Controlled component\n * <udp-time-selector\n * label=\"Appointment Time\"\n * value={appointmentTime}\n * onChange={(e) => setAppointmentTime(e.detail)}\n * />\n \n // With validation and constraints\n * <udp-time-selector\n * label=\"Business Hours\"\n * value={businessTime}\n * min=\"09:00\"\n * max=\"17:00\"\n * required={true}\n * error={timeError}\n * onChange={handleTimeChange}\n * />\n * ```\n /\n@Component({\n tag: 'udp-time-selector',\n styleUrl: 'udp-time-selector.css',\n shadow: true,\n})\nexport class UdpTimeSelector {\n /\n Unique identifier for the input element. Used for form association and accessibility.\n /\n @Prop() id: string;\n\n /\n Name attribute for the input element. Used for form submission.\n /\n @Prop() name: string;\n\n /\n Label text displayed above the input field. Used for accessibility and user guidance.\n /\n @Prop() label: string;\n\n /\n Minimum time value allowed. Uses HH:mm format (e.g., \"09:00\").\n * Enforces lower bounds validation for time selection.\n /\n @Prop() min: string;\n\n /\n Maximum time value allowed. Uses HH:mm format (e.g., \"17:00\").\n * Enforces upper bounds validation for time selection.\n /\n @Prop() max: string;\n\n /\n Whether the field is required for form submission. Adds visual indicator () and validation.\n /\n @Prop() required: boolean;\n\n /*\n Error message to display below the input field. Shows validation errors or other issues.\n /\n @Prop() error: string;\n\n /\n Initial value for the time selector. Used for uncontrolled components to set the default value.\n * Uses HH:mm format (e.g., \"14:30\"). Only used when `value` prop is not provided.\n /\n @Prop() initialValue: string;\n\n /\n Current value of the time selector. When provided, makes this a controlled component.\n * Uses HH:mm format (e.g., \"14:30\"). The component will use this value and update it through events.\n /\n @Prop({ mutable: true }) value: string = '';\n\n /\n Whether the field is disabled. Users cannot interact with the field when disabled.\n /\n @Prop() disabled: boolean;\n\n /\n Whether the input is readonly.\n /\n @Prop() readonly: boolean = false;\n\n /\n Whether the input should take the full width of its container.\n /\n @Prop() fullWidth: boolean = false;\n\n /\n Size variant controlling the padding and spacing of the input.\n * - 'small': Compact spacing for data-heavy interfaces\n * - 'normal': Standard spacing (default)\n * - 'large': Generous spacing for accessibility\n /\n @Prop() size: InputSize = 'normal';\n\n /\n Margin variant for the input spacing.\n * - 'none': No margin\n * - 'dense': Minimal margin spacing\n * - 'normal': Standard margin spacing (default)\n /\n @Prop() margin: InputMargin = 'normal';\n\n @Element() el: HTMLElement;\n\n @State() internalValue: string = ''; // Internal state for value management\n @State() errorMessage: string;\n\n /\n Emitted when the time value changes through user interaction or programmatic update.\n * Contains the new time value in HH:mm format.\n /\n @Event() change: EventEmitter<string>;\n\n /\n Emitted when the user types in the time input field.\n * Contains the current input value (may be incomplete during typing).\n /\n @Event() input: EventEmitter<string>;\n\n /\n Emitted when validation errors occur (e.g., time outside min/max constraints).\n * Contains the error message string. Empty string indicates no error.\n /\n @Event({\n eventName: 'error',\n bubbles: true,\n composed: true,\n cancelable: true\n }) errorEvent: EventEmitter<string>;\n\n /\n Component lifecycle method called when the component is about to load.\n * Initializes the internal value from either the value prop or initialValue prop.\n /\n componentWillLoad() {\n // Initialize from controlled value or initial value\n this.internalValue = this.value \|\| this.initialValue \|\| '';\n this.errorMessage = this.error;\n }\n\n /\n Watcher for the error prop. Updates the internal error message when the error prop changes.\n /\n @Watch('error')\n updateError() {\n console.log('Error prop changed:', this.error);\n this.errorMessage = this.error;\n }\n\n /\n Watcher for the initialValue prop. Updates the internal value when initialValue changes\n * (useful for form resets, dynamic initial values, etc.).\n * @param newValue - The new initial value\n /\n @Watch('initialValue')\n initialValueChanged(newValue: string) {\n if (newValue !== undefined) {\n this.internalValue = newValue;\n const newError = this.validateTime(newValue);\n if(newError) this.setAndDispatchError(newError);\n }\n }\n\n /\n Watcher for the value prop. Updates the internal value when the value prop changes\n * (controlled component behavior).\n * @param newValue - The new controlled value\n /\n @Watch('value')\n valueChanged(newValue: string) {\n if (newValue !== undefined) {\n this.internalValue = newValue;\n }\n }\n\n /\n Handles the blur event on the time input. Standard focus events bubble naturally.\n /\n handleBlur() {\n // Standard focus events bubble naturally - no custom emission needed\n }\n\n /\n Handles the focus event on the time input. Standard focus events bubble naturally.\n /\n handleFocus() {\n // Standard focus events bubble naturally - no custom emission needed\n }\n\n /\n Validates the time value against min/max constraints\n * @param value - The time value to validate\n * @returns Error message if invalid, empty string if valid\n /\n private validateTime(value: string): string {\n if (!value) return '';\n\n // Convert time strings to minutes for comparison\n const timeToMinutes = (time: string): number => {\n const [hours, minutes] = time.split(':').map(Number);\n return hours 60 + minutes;\n };\n\n const valueMinutes = timeToMinutes(value);\n\n if (this.min) {\n const minMinutes = timeToMinutes(this.min);\n if (valueMinutes < minMinutes) {\n return `Time must be after ${this.min}`;\n }\n }\n\n if (this.max) {\n const maxMinutes = timeToMinutes(this.max);\n if (valueMinutes > maxMinutes) {\n return `Time must be before ${this.max}`;\n }\n }\n\n return '';\n }\n\n /*\n Sets error state and dispatches error event that bubbles to stencil-field\n * @param errorMessage - The error message to set and dispatch\n /\n private setAndDispatchError(errorMessage: string) {\n console.log('Setting error:', errorMessage);\n\n // Update internal error state\n this.errorMessage = errorMessage;\n\n // Emit Stencil error event\n this.errorEvent.emit(errorMessage);\n\n // Dispatch custom error event that bubbles up to stencil-field\n const errorEvent = new CustomEvent('error', {\n detail: errorMessage,\n bubbles: true,\n composed: true\n });\n this.el.dispatchEvent(errorEvent);\n }\n\n /\n Handles the invalid event from the native input element\n * @param event - The invalid event from the time input\n /\n handleInvalid = (event: Event) => {\n const target = event.target as HTMLInputElement;\n const validationMessage = target.validationMessage;\n this.setAndDispatchError(validationMessage);\n }\n\n /\n Handles when the input becomes valid (clears errors)\n * @param event - The input event\n /\n handleValid = (event: Event) => {\n const target = event.target as HTMLInputElement;\n\n // Always validate with our custom logic first\n const customError = this.validateTime(target.value);\n\n if (customError) {\n // Custom validation failed\n this.setAndDispatchError(customError);\n } else if (target.validity.valid) {\n // Both custom and native validation passed\n this.setAndDispatchError('');\n }\n }\n\n /\n Handles input events (real-time typing). Updates internal state and provides immediate validation feedback.\n * @param event - The input event from the time input\n /\n handleTimeInput = (event: Event) => {\n const target = event.target as HTMLInputElement;\n const newValue = target.value;\n\n // Update internal value\n this.internalValue = newValue;\n\n // Update controlled value if this is a controlled component\n if (this.value !== undefined) {\n this.value = newValue;\n }\n\n // Re-evaluate validation on input if there's currently an error\n // This provides immediate feedback when user corrects the error\n if (this.errorMessage) {\n const validationError = this.validateTime(newValue);\n\n if (validationError !== this.errorMessage) {\n // Error state has changed, update it\n this.setAndDispatchError(validationError);\n }\n }\n\n // Emit input event for real-time updates\n this.input.emit(newValue);\n }\n\n /\n Handles changes to the time input value. Updates internal state and emits standard events.\n * @param event - The change event from the time input\n /\n handleTimeChange = (event: Event) => {\n const target = event.target as HTMLInputElement;\n const newValue = target.value;\n\n // Update internal value\n this.internalValue = newValue;\n\n // Update controlled value if this is a controlled component\n if (this.value !== undefined) {\n this.value = newValue;\n }\n\n // Validate the new value\n const customError = this.validateTime(newValue);\n\n if (customError) {\n // Custom validation failed\n this.setAndDispatchError(customError);\n } else {\n // Custom validation passed, clear any existing error\n this.setAndDispatchError('');\n }\n\n // Emit change event for committed changes\n this.change.emit(newValue);\n }\n\n render() {\n const isError: boolean = !!this.errorMessage;\n const classNames = ['bx--text-input'];\n if (isError) {\n classNames.push('bx--text-input--error');\n }\n if (this.disabled) {\n classNames.push('time-selector--disabled');\n }\n if (this.fullWidth) {\n classNames.push('bx--text-input--full-width');\n }\n const inputClass = classNames.join(' ');\n return (\n <Host\n class={{\n 'udp-input': true,\n 'udp-input--error': isError,\n 'udp-input--disabled': this.disabled,\n 'udp-input--readonly': this.readonly,\n 'udp-input--full-width': this.fullWidth,\n 'udp-input--required': this.required,\n [`udp-input--size-${this.size}`]: true,\n [`udp-input--margin-${this.margin}`]: true,\n }}\n aria-invalid={isError ? 'true' : 'false'}\n aria-required={this.required ? 'true' : 'false'}\n >\n <div class=\"bx--form-item\">\n <unity-typography variant=\"caption-text\">\n <label htmlFor={this.id} class=\"bx--label\">\n {this.label}\n {this.required ? '' : ''}\n </label>\n </unity-typography>\n <input\n type=\"time\"\n id={this.id}\n name={this.name}\n class={inputClass}\n value={this.internalValue}\n min={this.min}\n max={this.max}\n onInput={this.handleTimeInput}\n onChange={this.handleTimeChange}\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n onInvalid={this.handleInvalid}\n disabled={this.disabled}\n readonly={this.readonly}\n required={this.required}\n //@ts-ignore\n udprecordid={'udpRecord-udp-time-selector-' + this.id}\n />\n <unity-typography class=\"error-message\" variant=\"caption-text\" color=\"error\">\n {this.errorMessage}\n </unity-typography>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/my-component/UI/inputs/toggle/stencil-toggle.js CHANGED Viewed

@@ -158,16 +158,16 @@ export class StencilToggle {
         const buttonId = `${baseId}-button`;
         const labelId = `${baseId}-label`;
         const isError = !!this.errorMessage;
-        const labelElement = this.label && (h("label", { key: '341526d9314f607359ebd7b5e90f73b1988c23b1', id: labelId, class: `toggle-label label-${this.labelPosition}`, htmlFor: !this.disabled ? buttonId : undefined }, h("unity-typography", { key: '8734cfda781a94caa91f886091f793a971013955', variant: "caption-text" }, this.label)));
-        const toggleElement = (h("div", { key: 'd2c189b591fcb4a52992aa7a78a744addb607b62', class: `toggle-container ${this.toggled ? 'toggled' : ''}` }, h("button", { key: '960e42e77c12a68a580c7e896eab05362e17f419', id: buttonId, onClick: () => this.toggleButton(), disabled: this.disabled, "aria-checked": this.toggled.toString(), "aria-labelledby": labelId, role: "switch" }, h("span", { key: 'd7719fdfe0b563c8a75cc1d5ad8338aae4c41cba', class: "toggle-knob" }))));
-        return (h(Host, { key: '3c82fe1006cb50b2b558b4ff7b5dfa857bddcd28', class: {
+        const labelElement = this.label && (h("label", { key: '5bab829756552a4ca27ad67089dbcb764bda2de1', id: labelId, class: `toggle-label label-${this.labelPosition}`, htmlFor: !this.disabled ? buttonId : undefined }, h("unity-typography", { key: '1f1f400380c31913441255264eb6d0af35e1c421', variant: "caption-text" }, this.label)));
+        const toggleElement = (h("div", { key: '6c54df6caf5b3f294cae26d2ca3615c7e1bb05cd', class: `toggle-container ${this.toggled ? 'toggled' : ''}` }, h("button", { key: 'e060117671835f2e6a47597a926a2f9512d4f8d7', id: buttonId, onClick: () => this.toggleButton(), disabled: this.disabled, "aria-checked": this.toggled.toString(), "aria-labelledby": labelId, role: "switch" }, h("span", { key: 'fcab0a5fd5bcf15e02a13fc160ceca872034eb69', class: "toggle-knob" }))));
+        return (h(Host, { key: '3f90cb01c6032b87310837aead982a41b0078bad', class: {
                 'udp-input': true,
                 'udp-input--error': isError,
                 'udp-input--disabled': this.disabled,
                 'udp-input--checked': this.toggled,
                 [`udp-input--margin-${this.margin}`]: true,
                 [`udp-input--size-${this.size}`]: true,
-            }, "aria-invalid": isError ? 'true' : 'false' }, h("div", { key: '9ef1da957d0aa0530ab9c22425ef76174570dcec', class: `toggle-wrapper position-${this.labelPosition}` }, this.labelPosition === 'left' && labelElement, toggleElement, this.labelPosition === 'right' && labelElement, this.labelPosition === 'bottom' && labelElement, this.errorMessage && h("div", { key: '0b8d86a08cd1b4aae45a61ad10c209c69ffdc953', class: "error-message" }, this.errorMessage))));
+            }, "aria-invalid": isError ? 'true' : 'false' }, h("div", { key: '14fbbb34b5dee8da92375cabd8ddb050772318a3', class: `toggle-wrapper position-${this.labelPosition}` }, this.labelPosition === 'left' && labelElement, toggleElement, this.labelPosition === 'right' && labelElement, this.labelPosition === 'bottom' && labelElement, this.errorMessage && h("div", { key: 'bdee0f654adb087590d9bcf45daf35d0ffe12bb6', class: "error-message" }, this.errorMessage))));
     }
     static get is() { return "stencil-toggle"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/my-component/UI/inputs/udp-selector/udp-selector.js CHANGED Viewed

@@ -357,7 +357,7 @@ export class UdpSelector {
             'focused': this.isOpen,
         };
         const hasSelection = this.multiSelect ? this.selectedOptions.length > 0 : !!this.selectedOption;
-        return (h(Host, { key: '0fbb750f93acb6ea10b4cd3766b0e5ee3acd3408', class: {
+        return (h(Host, { key: '29251dd9cf9059a19c3ee9cc2c2b03f57ad3e431', class: {
                 'udp-input': true,
                 'udp-selector': true,
                 'udp-input--error': isError,
@@ -367,9 +367,9 @@ export class UdpSelector {
                 'udp-input--large': this.large,
                 [`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: '5f622e00a540d4df483f2ce426a44b18d6d2c334', class: "bx--form-item" }, this.label && (h("unity-typography", { key: '0514116a7ba6d702ea0301f632b2cc55fe674f85', variant: "caption-text" }, h("label", { key: 'ef0db6474f8e5c9491fcba4d6cbec75fd18971d7', htmlFor: this.id, class: "bx--label" }, this.label, this.required ? '*' : ''))), h("div", { key: '3b7f7745c020c610c95bdb2954b1291144829318', class: "udp-selector__container" }, h("div", { key: '6d4fc9dc4464a9e8c8b59b1d182d9840e703fc8d', class: selectedOptionClasses, onClick: () => this.toggleDropdown(), onBlur: this.handleBlur, tabindex: this.disabled || this.readonly ? '-1' : '0', role: "combobox", "aria-haspopup": "listbox", "aria-expanded": this.isOpen.toString(), id: 'udpRecord-udp-selector-' + this.id,
+            }, "aria-invalid": isError ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false' }, h("div", { key: '308273e697814be1edf27d05022fbda9bb9287e7', class: "bx--form-item" }, this.label && (h("unity-typography", { key: '646f781c41b4ebb60eb8d6b08da033b70ce2e48c', variant: "caption-text" }, h("label", { key: 'a0bd9c00fda4e8048a7fe41cc510a5cf6a8ae8ff', htmlFor: this.id, class: "bx--label" }, this.label, this.required ? '*' : ''))), h("div", { key: '81ea44d8eed860aa6efa95e544e9a5ba6d929c14', class: "udp-selector__container" }, h("div", { key: 'b896d5d9c6235d95de68f743da2e923b70e619ce', class: selectedOptionClasses, onClick: () => this.toggleDropdown(), onBlur: this.handleBlur, tabindex: this.disabled || this.readonly ? '-1' : '0', role: "combobox", "aria-haspopup": "listbox", "aria-expanded": this.isOpen.toString(), id: 'udpRecord-udp-selector-' + this.id,
             // @ts-ignore
-            udprecordid: 'udpRecord-udp-selector-' + this.id }, h("div", { key: '04a3f44b087b808ac464bb24478ab979682a59d3', class: {
+            udprecordid: 'udpRecord-udp-selector-' + this.id }, h("div", { key: '8818ec5d3b96b12f5eee6081b04c5664a4944274', class: {
                 'selected-option-label': true,
                 'placeholder': !hasSelection,
             } }, this.multiSelect
@@ -378,7 +378,7 @@ export class UdpSelector {
                 : 'Select option(s)'
             : this.selectedOption
                 ? this.selectedOption.label
-                : 'Select an option'), this.multiSelect && this.selectedOptions.length > 0 && h("span", { key: '23a7fc7dee95948ad900d7a4ec995e801861c7cf', class: "checkmark" }), h("div", { key: 'fce7b6dc97e089d6c2f0a67dbfabfe7eec879a52', class: "arrow" })), this.isOpen && (h("ul", { key: 'cca6bedcae8ca6cf32859a812e7c39527ef8a16c', class: "options-list" }, this.options.map(option => (h("unity-typography", { variant: "button" }, h("li", { class: this.isOptionSelected(option) ? 'selected' : '', onClick: () => this.selectOption(option), onMouseDown: this.handleOptionMouseDown }, option.label, this.isOptionSelected(option) && h("span", { class: "checkmark" })))))))), this.errorMessage && (h("div", { key: 'abca543491f7d3a13bc450b0a63a18858ee3c7ec', class: "error-message" }, h("unity-typography", { key: '27608789cb30c98afd2cc70b9a7bf4cdec7069a6', variant: "caption-text", color: "error" }, this.errorMessage))))));
+                : 'Select an option'), this.multiSelect && this.selectedOptions.length > 0 && h("span", { key: 'aebc9ac1f638b9f5222d051c2e29e2c2c78175d3', class: "checkmark" }), h("div", { key: '241aeeeb1cbf93e82ba882b94acbac0cdc6cb738', class: "arrow" })), this.isOpen && (h("ul", { key: 'b9152b16546b6533c389ba648bf6a3bceaf4daad', class: "options-list" }, this.options.map(option => (h("unity-typography", { variant: "button" }, h("li", { class: this.isOptionSelected(option) ? 'selected' : '', onClick: () => this.selectOption(option), onMouseDown: this.handleOptionMouseDown }, option.label, this.isOptionSelected(option) && h("span", { class: "checkmark" })))))))), this.errorMessage && (h("div", { key: '735fd74f02b851563948987b1b73fbe0b4ef7d00', class: "error-message" }, h("unity-typography", { key: 'cfb1289b857dc0acbcab2ade46f383c93995da5e', variant: "caption-text", color: "error" }, this.errorMessage))))));
     }
     /**
      * Checks if a given option is currently selected.

package/dist/collection/components/my-component/UI/layout/udp-container/udp-container.js CHANGED Viewed

@@ -15,12 +15,12 @@ export class UdpContainer {
         this.padding = true;
     }
     render() {
-        return (h("div", { key: '66333c5149153a9d4510ba416e4bb3a505d51782', class: {
+        return (h("div", { key: '585b9bb995cb7e179c328d07748c66459269c1a0', class: {
                 'udp-container': true,
                 'udp-container--fluid': this.fluid,
                 'udp-container--padded': this.padding,
                 [`udp-container--${this.maxWidth}`]: true,
-            } }, h("slot", { key: 'c2d2402708cd7f46c81640cb86d227189c3312b6' })));
+            } }, h("slot", { key: '5851c51e280c4322cc404bbea3bb3979ac14681e' })));
     }
     static get is() { return "udp-container"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/my-component/UI/layout/udp-container-query/udp-container-query.js CHANGED Viewed

@@ -21,9 +21,9 @@ export class UdpContainerQuery {
         return styleRules;
     }
     render() {
-        return (h(Host, { key: '948101738a9646c7788744578e6e975bed9819b4', class: {
+        return (h(Host, { key: '0a3f0cd285329482e518b84661fd5337a3354546', class: {
                 [this.customClass]: !!this.customClass,
-            } }, h("style", { key: '260ce965778fed823a538c9399eda0b076f4cb34' }, this.getContainerQueryStyle()), h("slot", { key: '92ca5c6d516986d5dbe05c7551073face3fc8ccc' })));
+            } }, h("style", { key: '3011ae8940a91e75ba8491c7b770f7ff9e4d09b5' }, this.getContainerQueryStyle()), h("slot", { key: 'd67a5d70dcc304668e5b26d3f19e11a6c0a20454' })));
     }
     static get is() { return "udp-container-query"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/my-component/UI/layout/udp-container-query-grid/udp-container-query-grid.js CHANGED Viewed

@@ -29,7 +29,7 @@ export class UdpContainerQueryGrid {
                 gap: `${this.gaps[breakpoint]}rem`,
             }));
         });
-        return (h(Host, { key: 'b08ce2009c05882ee6fc32f7c937710ee06b44a3' }, h("udp-container-query", { key: '6819da3f318e45473c331d52088664c76f919d0b', queries: queries }, h("div", { key: '0a0ce492ad3c0ddc8dcbf369302770a00558d331', class: "grid-container" }, h("slot", { key: 'e3a9c2c55831c63a355470c7969573ccaa6df0ae' }))), h("style", { key: 'c98cbf75f5798be1e4a4401b5a8ec93f3a3cf1dc' }, `
+        return (h(Host, { key: '2c106d3026ddc0aa842fb7098e329f9e550bc4f4' }, h("udp-container-query", { key: '636957df833e8c94d3cc35e4055718530c5afe07', queries: queries }, h("div", { key: '344083115b010236374b5ab29a66e7d2bc8046ba', class: "grid-container" }, h("slot", { key: '0e710ee548f3505d588627087256d918a1e14462' }))), h("style", { key: 'f2843d85b7037305124570f6581a76542107e8d9' }, `
           .grid-container {
             display: grid;
             grid-template-columns: repeat(${this.columns[0]}, 1fr);