udp-stencil-component-library 1.0.0

package/dist/esm/text-area_4.entry.js

@@ -0,0 +1,625 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-CaIWDYyq.js';
+
+const textAreaCss = ":host(.udp-input){display:block;box-sizing:border-box;position:relative}:host(.udp-form-item-wrapper){display:block;width:100%;box-sizing:border-box}:host(.udp-input--full-width){width:100%}:host(.udp-input--error){--input-border-color:var(--input-underline-color-error)}:host(.udp-input--disabled){pointer-events:none;opacity:0.5;cursor:not-allowed}:host(.udp-input--required){position:relative}:host(.udp-input--readonly){--input-background:var(--gray-02)}:host(.udp-input--hidden){display:none}:host(.udp-input--checked){--input-accent-color:var(--primary-color)}:host(.udp-input--multi-select){--list-max-height:200px}:host(.udp-input) .bx--text-input:focus{outline:none;}:host(.udp-input) .bx--form-item{margin-bottom:var(--spacing-05)}:host(.udp-input) .bx--label{display:block;margin-bottom:var(--spacing-03);color:var(--text-main);font-size:var(--caption-text-font-size);font-weight:var(--caption-text-font-weight);line-height:var(--caption-text-line-height)}@media (max-width: var(--breakpoint-xs-max)){:host(.udp-input){margin-bottom:var(--spacing-04)}:host(.udp-input) .bx--form-item{margin-bottom:var(--spacing-04)}}@media (min-width: var(--breakpoint-sm-min)){:host(.udp-input){min-height:2.5rem;}}:host(.udp-input--size-small) .bx--text-input,:host(.udp-input--size-small) textarea,:host(.udp-input--size-small) input[type=\"text\"],:host(.udp-input--size-small) input[type=\"number\"],:host(.udp-input--size-small) input[type=\"email\"],:host(.udp-input--size-small) input[type=\"password\"],:host(.udp-input--size-small) input[type=\"tel\"],:host(.udp-input--size-small) input[type=\"url\"],:host(.udp-input--size-small) input[type=\"search\"]{padding:var(--spacing-02);padding-bottom:6px;font-size:var(--caption-font-size, 0.875rem)}:host(.udp-input--size-normal) .bx--text-input,:host(.udp-input--size-normal) textarea,:host(.udp-input--size-normal) input[type=\"text\"],:host(.udp-input--size-normal) input[type=\"number\"],:host(.udp-input--size-normal) input[type=\"email\"],:host(.udp-input--size-normal) input[type=\"password\"],:host(.udp-input--size-normal) input[type=\"tel\"],:host(.udp-input--size-normal) input[type=\"url\"],:host(.udp-input--size-normal) input[type=\"search\"]{padding:var(--spacing-03);padding-bottom:9px;font-size:var(--body-font-size)}:host(.udp-input--size-large) .bx--text-input,:host(.udp-input--size-large) textarea,:host(.udp-input--size-large) input[type=\"text\"],:host(.udp-input--size-large) input[type=\"number\"],:host(.udp-input--size-large) input[type=\"email\"],:host(.udp-input--size-large) input[type=\"password\"],:host(.udp-input--size-large) input[type=\"tel\"],:host(.udp-input--size-large) input[type=\"url\"],:host(.udp-input--size-large) input[type=\"search\"]{padding:var(--spacing-04);padding-bottom:12px;font-size:var(--body-font-size)}:host(.udp-input--margin-none){margin:0}:host(.udp-input--margin-dense){margin:var(--spacing-02) 0}:host(.udp-input--margin-normal){margin:var(--spacing-03) 0}:host(.udp-input--margin-comfortable){margin:var(--spacing-04) 0}:host(.udp-input--size-small) .bx--label{margin-bottom:var(--spacing-02);font-size:var(--caption-font-size, 0.875rem)}:host(.udp-input--size-normal) .bx--label{margin-bottom:var(--spacing-03);font-size:var(--body-font-size)}:host(.udp-input--size-large) .bx--label{margin-bottom:var(--spacing-04);font-size:var(--body-font-size)}.bx--text-input,textarea,input[type=\"text\"],input[type=\"number\"],input[type=\"email\"],input[type=\"password\"],input[type=\"tel\"],input[type=\"url\"],input[type=\"search\"]{display:inline-block;padding:var(--spacing-03);padding-bottom:9px;box-sizing:border-box;border:none;font-size:var(--body-font-size);background:var(--input-background);border-bottom:var(--underline-standard) solid var(--input-underline-color, var(--gray-08));width:100%;font-family:var(--font-family);transition:border-bottom-color 0.15s ease-in-out}.bx--text-input:focus,textarea:focus,input[type=\"text\"]:focus,input[type=\"number\"]:focus,input[type=\"email\"]:focus,input[type=\"password\"]:focus,input[type=\"tel\"]:focus,input[type=\"url\"]:focus,input[type=\"search\"]:focus{border-bottom-color:var(--input-underline-color-focus, var(--primary-color));border-bottom-width:2px}.bx--text-input--error,.bx--text-input:user-invalid,:host(.udp-input--error) .bx--text-input,:host(.udp-input--error) textarea,:host(.udp-input--error) input[type=\"text\"],:host(.udp-input--error) input[type=\"number\"],:host(.udp-input--error) input[type=\"email\"],:host(.udp-input--error) input[type=\"password\"],:host(.udp-input--error) input[type=\"tel\"],:host(.udp-input--error) input[type=\"url\"],:host(.udp-input--error) input[type=\"search\"],input[type=\"text\"]:user-invalid,input[type=\"number\"]:user-invalid,input[type=\"email\"]:user-invalid,input[type=\"password\"]:user-invalid,input[type=\"tel\"]:user-invalid,input[type=\"url\"]:user-invalid,input[type=\"search\"]:user-invalid{border-bottom-color:var(--input-underline-color-error, var(--error-color-main)) !important}:host(.udp-input--disabled) .bx--text-input,:host(.udp-input--disabled) textarea,:host(.udp-input--disabled) input[type=\"text\"],:host(.udp-input--disabled) input[type=\"number\"],:host(.udp-input--disabled) input[type=\"email\"],:host(.udp-input--disabled) input[type=\"password\"],:host(.udp-input--disabled) input[type=\"tel\"],:host(.udp-input--disabled) input[type=\"url\"],:host(.udp-input--disabled) input[type=\"search\"]{border-bottom-color:var(--input-underline-color-disabled, var(--gray-08))}textarea.bx--text-input{resize:vertical;min-height:var(--spacing-08)}.bx--text-input::placeholder,textarea::placeholder,input[type=\"text\"]::placeholder,input[type=\"number\"]::placeholder,input[type=\"email\"]::placeholder,input[type=\"password\"]::placeholder,input[type=\"tel\"]::placeholder,input[type=\"url\"]::placeholder,input[type=\"search\"]::placeholder{color:var(--placeholder-color, #999);opacity:1}:host(.udp-input),:host{display:block;width:100%;box-sizing:border-box}.bx--form-item{margin-bottom:var(--spacing-05)}.bx--label{display:block;margin-bottom:var(--spacing-03)}.error-message,.bx--form-requirement,:host(.udp-input--error) .error-message,:host(.udp-input--error) .bx--form-requirement{color:var(--error-color-main, #d32f2f) !important;margin-top:var(--spacing-02);font-size:var(--caption-font-size, 0.875rem);--unity-typography-inherit-color:var(--error-color-main, #d32f2f)}.helper-text{color:var(--text-02, #525252);margin-top:var(--spacing-02);font-size:var(--caption-font-size, 0.875rem)}:host(.udp-input--disabled) .bx--text-input,:host(.udp-input--disabled) textarea,:host(.udp-input--disabled) input,:host(.udp-input--disabled){cursor:not-allowed;opacity:0.6}:host(.udp-input--readonly) .bx--text-input,:host(.udp-input--readonly) textarea,:host(.udp-input--readonly) input{background-color:var(--field-01, #f4f4f4);cursor:default}";
+
+const TextArea = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.change = createEvent(this, "change");
+        /**
+         * Size variant controlling the padding and spacing of the textarea.
+         * - 'small': Compact spacing for data-heavy interfaces
+         * - 'normal': Standard spacing (default)
+         * - 'large': Generous spacing for accessibility
+         */
+        this.size = 'normal';
+        /**
+         * Margin variant for the input spacing.
+         * - 'none': No margin
+         * - 'dense': Minimal margin spacing
+         * - 'normal': Standard margin spacing (default)
+         */
+        this.margin = 'normal';
+        /**
+         * If `true`, the component is read-only.
+         */
+        this.readonly = false;
+        /**
+         * @internal
+         */
+        this.onInput = (event) => {
+            if (this.readonly) {
+                const input = event.target;
+                input.value = this.internalValue;
+                return;
+            }
+            const newValue = event.target.value;
+            this.internalValue = newValue;
+            if (this.value !== undefined) {
+                this.value = newValue;
+            }
+            this.adjustTextAreaHeight();
+        };
+        /**
+         * @internal
+         */
+        this.onChange = (event) => {
+            if (this.readonly) {
+                return;
+            }
+            const newValue = event.target.value;
+            this.change.emit(newValue);
+        };
+    }
+    /**
+     * Updates the error message when the error prop changes.
+     * @internal
+     */
+    updateError() {
+        this.errorMessage = this.error;
+    }
+    /**
+     * Updates the internal value when initialValue prop changes.
+     * @internal
+     */
+    initialValueChanged(newValue) {
+        if ((this.internalValue === '' || this.internalValue === undefined) || this.value === undefined) {
+            if (newValue !== undefined) {
+                this.internalValue = newValue;
+                Promise.resolve().then(() => this.adjustTextAreaHeight());
+            }
+        }
+    }
+    /**
+     * Updates the internal value when value prop changes.
+     * @internal
+     */
+    valueChanged() {
+        if (this.value !== undefined && this.value !== this.internalValue) {
+            this.internalValue = this.value;
+            Promise.resolve().then(() => this.adjustTextAreaHeight());
+        }
+    }
+    /**
+     * @internal
+     */
+    componentWillLoad() {
+        this.internalValue = this.value !== undefined ? this.value : (this.initialValue || '');
+        if (this.error) {
+            this.errorMessage = this.error;
+        }
+        let initialNumRows = this.rows;
+        const currentMinRows = this.minRows === undefined ? 1 : this.minRows;
+        if (initialNumRows === undefined) {
+            initialNumRows = currentMinRows;
+        }
+        initialNumRows = Math.max(currentMinRows, initialNumRows);
+        if (this.maxRows !== undefined) {
+            initialNumRows = Math.min(this.maxRows, initialNumRows);
+        }
+        this.internalRows = initialNumRows;
+    }
+    /**
+     * @internal
+     */
+    componentDidLoad() {
+        this.adjustTextAreaHeight();
+    }
+    /**
+     * @internal
+     */
+    adjustTextAreaHeight() {
+        if (!this.textareaEl) {
+            return;
+        }
+        const min = this.minRows === undefined ? 1 : this.minRows;
+        const max = this.maxRows === undefined ? Number.MAX_SAFE_INTEGER : this.maxRows;
+        const previousScrollTop = this.textareaEl.scrollTop;
+        this.textareaEl.style.overflowY = 'hidden';
+        this.textareaEl.style.height = 'auto';
+        this.textareaEl.rows = min;
+        let currentActualRows = min;
+        while (this.textareaEl.scrollHeight > this.textareaEl.clientHeight && currentActualRows < max) {
+            currentActualRows++;
+            this.textareaEl.rows = currentActualRows;
+        }
+        if (currentActualRows < max || max === Number.MAX_SAFE_INTEGER) {
+            while (currentActualRows > min) {
+                this.textareaEl.rows = currentActualRows - 1;
+                if (this.textareaEl.scrollHeight > this.textareaEl.clientHeight) {
+                    this.textareaEl.rows = currentActualRows;
+                    break;
+                }
+                currentActualRows--;
+            }
+        }
+        let newCalculatedRows = Math.max(min, Math.min(currentActualRows, max));
+        this.textareaEl.style.height = '';
+        this.textareaEl.style.overflowY = '';
+        this.textareaEl.rows = newCalculatedRows;
+        if (this.internalRows !== newCalculatedRows) {
+            this.internalRows = newCalculatedRows;
+        }
+        Promise.resolve().then(() => {
+            if (this.textareaEl)
+                this.textareaEl.scrollTop = previousScrollTop;
+        });
+    }
+    render() {
+        const { disabled, id, internalValue, label, placeholder, required, readonly, errorMessage, fullWidth, internalRows } = this;
+        return (h(Host, { key: '41305f157ed18d8033ecd42b8e71c61c4479e969', class: {
+                'udp-input': true,
+                'udp-input--error': !!errorMessage,
+                'udp-input--disabled': disabled,
+                'udp-input--readonly': readonly,
+                'udp-input--full-width': fullWidth,
+                'udp-input--required': required,
+                [`udp-input--size-${this.size}`]: true,
+                [`udp-input--margin-${this.margin}`]: true,
+            } }, h("div", { key: 'a466d1dfe2f15374e52abf52aff3da7c4426e2c2', class: "bx--form-item" }, h("unity-typography", { key: '9f45ce03a947dfb6f5db08b9cd89a165232a8c61', variant: "caption-text" }, h("label", { key: '2e4df5f4567f92c6ecd32d5589846aee060dcecf', htmlFor: id, class: "bx--label" }, label, required ? '*' : '')), h("textarea", { key: '7427d569547ea4f57886d4671fbec9c0d6b969e6', 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: '18861a53bf2179cf7c3feb80d509d32b6b5143ad', class: "error-message" }, h("unity-typography", { key: 'f776d509589cd8e6f500b5da8714cf9fc313020c', variant: "caption-text", color: "error" }, errorMessage))))));
+    }
+    static get watchers() { return {
+        "error": ["updateError"],
+        "initialValue": ["initialValueChanged"],
+        "value": ["valueChanged"]
+    }; }
+};
+TextArea.style = textAreaCss;
+
+const udpDateSelectorCss = ":host(.udp-input){display:block;box-sizing:border-box;position:relative}:host(.udp-form-item-wrapper){display:block;width:100%;box-sizing:border-box}: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}:host(.full-width-host){width:100%}";
+
+const UdpDateSelector = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.change = createEvent(this, "change");
+        /**
+         * Current value of the date selector. When provided, makes this a controlled component.
+         * Uses YYYY-MM-DD format (e.g., "2024-01-15"). The component will use this value and update it through events.
+         */
+        this.value = '';
+        /**
+         * Whether the input is readonly.
+         */
+        this.readonly = false;
+        /**
+         * Whether the input should take the full width of its container.
+         */
+        this.fullWidth = false;
+        /**
+         * Size variant controlling the padding and spacing of the input.
+         * - 'small': Compact spacing for data-heavy interfaces
+         * - 'normal': Standard spacing (default)
+         * - 'large': Generous spacing for accessibility
+         */
+        this.size = 'normal';
+        /**
+         * Margin variant for the input spacing.
+         * - 'none': No margin
+         * - 'dense': Minimal margin spacing
+         * - 'normal': Standard margin spacing (default)
+         */
+        this.margin = 'normal';
+        this.internalValue = ''; // Internal state for value management
+        /**
+         * Handles changes to the date input value. Updates internal state and emits standard events.
+         * @param event - The input event from the date input
+         */
+        this.handleDateChange = (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;
+            }
+            // Emit standard events for integration with form libraries and custom handlers
+            this.change.emit(newValue);
+        };
+    }
+    /**
+     * Component lifecycle method called when the component is about to load.
+     * Initializes the internal value from either the value prop or initialValue prop.
+     */
+    componentWillLoad() {
+        // Initialize from controlled value or initial value
+        this.internalValue = this.value || this.initialValue || '';
+        this.errorMessage = this.error;
+    }
+    /**
+     * Watcher for the error prop. Updates the internal error message when the error prop changes.
+     */
+    updateError() {
+        this.errorMessage = this.error;
+    }
+    /**
+     * Watcher for the initialValue prop. Updates the internal value when initialValue changes
+     * (useful for form resets, dynamic initial values, etc.).
+     * @param newValue - The new initial value
+     */
+    initialValueChanged(newValue) {
+        if (newValue !== undefined) {
+            this.internalValue = newValue;
+        }
+    }
+    /**
+     * Watcher for the value prop. Updates the internal value when the value prop changes
+     * (controlled component behavior).
+     * @param newValue - The new controlled value
+     */
+    valueChanged(newValue) {
+        if (newValue !== undefined) {
+            this.internalValue = newValue;
+        }
+    }
+    /**
+     * Handles the blur event on the date input. Standard focus events bubble naturally.
+     */
+    handleBlur() {
+        // Standard focus events bubble naturally - no custom emission needed
+    }
+    /**
+     * Handles the focus event on the date input. Standard focus events bubble naturally.
+     */
+    handleFocus() {
+        // Standard focus events bubble naturally - no custom emission needed
+    }
+    formatDateForHtml(dateString) {
+        var _a;
+        // convert to date
+        // when converting to ISO string, javascript will edit the date to compensate for the timezone, we dont want that here so we manually subtract the offset that it will add
+        const date = new Date(dateString);
+        if (isNaN(date === null || date === void 0 ? void 0 : date.getTime()))
+            return null;
+        date === null || date === void 0 ? void 0 : date.setTime((date === null || date === void 0 ? void 0 : date.getTime()) - (date === null || date === void 0 ? void 0 : date.getTimezoneOffset()) * 60 * 1000);
+        const isoString = date === null || date === void 0 ? void 0 : date.toISOString();
+        if (!isoString)
+            return null;
+        return (_a = isoString === null || isoString === void 0 ? void 0 : isoString.split) === null || _a === void 0 ? void 0 : _a.call(isoString, 'T')[0];
+    }
+    render() {
+        const isError = !!this.errorMessage;
+        const classNames = ['bx--text-input'];
+        if (isError) {
+            classNames.push('bx--text-input--error');
+        }
+        if (this.disabled) {
+            classNames.push('date-selector--disabled');
+        }
+        if (this.fullWidth) {
+            classNames.push('bx--text-input--full-width');
+        }
+        const inputClass = classNames.join(' ');
+        return (h(Host, { key: 'f322fd4cdf86a497a4a9222bc6c332525d8f47f6', class: {
+                'udp-input': true,
+                'udp-input--error': isError,
+                'udp-input--disabled': this.disabled,
+                'udp-input--readonly': this.readonly,
+                'udp-input--full-width': this.fullWidth,
+                '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: '233d1c8193e91ec278cf3affbbfe157a0a1190ab', class: "bx--form-item" }, h("unity-typography", { key: '1a041ab965c3e539594add30a22c3caf33c8b21f', variant: "caption-text" }, h("label", { key: '74d424a3381e666a4daf401790bfd0e6ac25fb74', htmlFor: this.id, class: "bx--label" }, this.label, this.required ? '*' : '')), h("input", { key: 'bf61c6999e5422dbf9b37a8085783c3ca3b8fc17', 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: '07f1c58c243d63ae2d88a1f643bf91cf12b8f599', class: "error-message", variant: "caption-text", color: "error" }, this.errorMessage))));
+    }
+    static get watchers() { return {
+        "error": ["updateError"],
+        "initialValue": ["initialValueChanged"],
+        "value": ["valueChanged"]
+    }; }
+};
+UdpDateSelector.style = udpDateSelectorCss;
+
+const udpDatetimeSelectorCss = ":host(.udp-input){display:block;box-sizing:border-box;position:relative}:host(.udp-form-item-wrapper){display:block;width:100%;box-sizing:border-box}: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}:host(.full-width-host){width:100%}";
+
+const UdpDateTimeSelector = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.change = createEvent(this, "change");
+        /**
+         * Current value of the date-time selector. When provided, makes this a controlled component.
+         * The component will use this value and update it through events.
+         */
+        this.value = '';
+        /**
+         * Whether the input is readonly.
+         */
+        this.readonly = false;
+        /**
+         * Whether the input should take the full width of its container.
+         */
+        this.fullWidth = false;
+        /**
+         * Size variant controlling the padding and spacing of the input.
+         * - 'small': Compact spacing for data-heavy interfaces
+         * - 'normal': Standard spacing (default)
+         * - 'large': Generous spacing for accessibility
+         */
+        this.size = 'normal';
+        /**
+         * Margin variant for the input spacing.
+         * - 'none': No margin
+         * - 'dense': Minimal margin spacing
+         * - 'normal': Standard margin spacing (default)
+         */
+        this.margin = 'normal';
+        /**
+         * Internal value state. Manages the current date-time value independently of props.
+         * @internal
+         */
+        this.internalValue = '';
+        /**
+         * Handles input events (date-time changes). Updates internal state and emits events.
+         * For controlled components, also updates the value prop.
+         * @param event - The native input event
+         * @internal
+         */
+        this.handleDateChange = (event) => {
+            const newValue = event.target.value;
+            this.internalValue = newValue; // Update internal state
+            // If this is a controlled component (value prop provided), update the value prop
+            if (this.value !== undefined) {
+                this.value = newValue;
+            }
+            // Emit events for real-time and committed updates
+            this.change.emit(newValue);
+        };
+        /**
+         * Handles blur events. Event bubbles up to stencil-field automatically.
+         * @param event - The focus event
+         * @internal
+         */
+        this.handleBlur = () => {
+            // Event will bubble up to stencil-field automatically
+        };
+        /**
+         * Handles focus events. Event bubbles up to stencil-field automatically.
+         * @param event - The focus event
+         * @internal
+         */
+        this.handleFocus = () => {
+            // Event will bubble up to stencil-field automatically
+        };
+    }
+    /**
+     * Emitted when the date-time receives input (on every change).
+     * Provides real-time updates as the user selects date/time.
+     *
+     * @event input
+     * @param {string} value - The current value of the date-time selector in ISO format
+     *
+     * @example
+     * <udp-datetime-selector onInput={(e) => handleLiveUpdate(e.detail)} />
+     * Updates the internal value when initialValue prop changes.
+     * Only updates if current value is empty or if this is an uncontrolled component.
+     * @internal
+     */
+    initialValueChanged(newValue) {
+        // Only update if we don't have a value yet or if this is uncontrolled (no value prop)
+        if ((this.internalValue === '' || this.internalValue === undefined) || this.value === undefined) {
+            if (newValue !== undefined) {
+                this.internalValue = newValue;
+            }
+        }
+    }
+    /**
+     * Updates the internal value when value prop changes.
+     * For controlled components, the value prop takes precedence.
+     * @internal
+     */
+    valueChanged() {
+        // If value prop is provided, this is a controlled component
+        if (this.value !== undefined && this.value !== this.internalValue) {
+            this.internalValue = this.value;
+        }
+    }
+    /**
+     * Component lifecycle method. Initializes error message and internal value.
+     * @internal
+     */
+    componentWillLoad() {
+        // Initialize value: use value prop if provided (controlled), otherwise use initialValue (uncontrolled)
+        this.internalValue = this.value !== undefined ? this.value : (this.initialValue || '');
+        if (this.error) {
+            this.errorMessage = this.error;
+        }
+    }
+    /**
+     * Formats a date string for HTML datetime-local input.
+     */
+    formatDateForHtml(dateString) {
+        var _a;
+        // convert to date
+        const date = new Date(dateString);
+        if (isNaN((_a = new Date(date)) === null || _a === void 0 ? void 0 : _a.getTime()))
+            return null;
+        // when converting to ISO string, javascript will edit the date to compensate for the timezone, we dont want that here so we manually subtract the offset that it will add
+        date === null || date === void 0 ? void 0 : date.setTime((date === null || date === void 0 ? void 0 : date.getTime()) - (date === null || date === void 0 ? void 0 : date.getTimezoneOffset()) * 60 * 1000);
+        const isoString = date === null || date === void 0 ? void 0 : date.toISOString();
+        if (!isoString)
+            return null;
+        // html wants the format YYYY-MM-DDThh:mm, ISO strings have YYYY-MM-DDTHH:MM:SS.mmmZ, so split it on ':' and take the first 2 sections
+        const splitISO = isoString.split(':');
+        return `${splitISO[0]}:${splitISO[1]}`;
+    }
+    /**
+     * Renders the date-time selector component.
+     * @returns JSX element
+     * @internal
+     */
+    render() {
+        const isError = !!this.errorMessage;
+        const classNames = ['bx--text-input'];
+        if (isError) {
+            classNames.push('bx--text-input--error');
+        }
+        if (this.disabled) {
+            classNames.push('datetime-selector--disabled');
+        }
+        if (this.fullWidth) {
+            classNames.push('bx--text-input--full-width');
+        }
+        const inputClass = classNames.join(' ');
+        return (h(Host, { key: '922ee14810e3056343d629920dfc1bf3db0b169b', class: {
+                'udp-input': true,
+                'udp-input--error': isError,
+                'udp-input--disabled': this.disabled,
+                'udp-input--readonly': this.readonly,
+                'udp-input--full-width': this.fullWidth,
+                '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: '55366f34b6e40861cea704acac2b5e5af1272ed7', class: "bx--form-item" }, h("unity-typography", { key: 'e71ace1035b3f5528fcbda50a3505f7e865650e3', variant: "caption-text" }, h("label", { key: '3f22ce12242d993f28dc1aed497fc569c8750ba0', htmlFor: this.id, class: "bx--label" }, this.label, this.required ? '*' : '')), h("input", { key: 'f3820dab3c9bf7afe3280eedc66a81f36a1e8b54', 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: 'c76b07c0fa84e0981f3cd7423b6eb65a5f3d5584', class: "error-message", variant: "caption-text", color: "error" }, this.errorMessage))));
+    }
+    static get watchers() { return {
+        "initialValue": ["initialValueChanged"],
+        "value": ["valueChanged"]
+    }; }
+};
+UdpDateTimeSelector.style = udpDatetimeSelectorCss;
+
+const udpTimeSelectorCss = ":host(.udp-input){display:block;box-sizing:border-box;position:relative}:host(.udp-form-item-wrapper){display:block;width:100%;box-sizing:border-box}:host(.udp-input--full-width){width:100%}:host(.udp-input--error){--input-border-color:var(--input-underline-color-error)}:host(.udp-input--disabled){pointer-events:none;opacity:0.5;cursor:not-allowed}:host(.udp-input--required){position:relative}:host(.udp-input--readonly){--input-background:var(--gray-02)}:host(.udp-input--hidden){display:none}:host(.udp-input--checked){--input-accent-color:var(--primary-color)}:host(.udp-input--multi-select){--list-max-height:200px}:host(.udp-input) .bx--text-input:focus{outline:none;}:host(.udp-input) .bx--form-item{margin-bottom:var(--spacing-05)}:host(.udp-input) .bx--label{display:block;margin-bottom:var(--spacing-03);color:var(--text-main);font-size:var(--caption-text-font-size);font-weight:var(--caption-text-font-weight);line-height:var(--caption-text-line-height)}@media (max-width: var(--breakpoint-xs-max)){:host(.udp-input){margin-bottom:var(--spacing-04)}:host(.udp-input) .bx--form-item{margin-bottom:var(--spacing-04)}}@media (min-width: var(--breakpoint-sm-min)){:host(.udp-input){min-height:2.5rem;}}:host(.udp-input--size-small) .bx--text-input,:host(.udp-input--size-small) textarea,:host(.udp-input--size-small) input[type=\"text\"],:host(.udp-input--size-small) input[type=\"number\"],:host(.udp-input--size-small) input[type=\"email\"],:host(.udp-input--size-small) input[type=\"password\"],:host(.udp-input--size-small) input[type=\"tel\"],:host(.udp-input--size-small) input[type=\"url\"],:host(.udp-input--size-small) input[type=\"search\"]{padding:var(--spacing-02);padding-bottom:6px;font-size:var(--caption-font-size, 0.875rem)}:host(.udp-input--size-normal) .bx--text-input,:host(.udp-input--size-normal) textarea,:host(.udp-input--size-normal) input[type=\"text\"],:host(.udp-input--size-normal) input[type=\"number\"],:host(.udp-input--size-normal) input[type=\"email\"],:host(.udp-input--size-normal) input[type=\"password\"],:host(.udp-input--size-normal) input[type=\"tel\"],:host(.udp-input--size-normal) input[type=\"url\"],:host(.udp-input--size-normal) input[type=\"search\"]{padding:var(--spacing-03);padding-bottom:9px;font-size:var(--body-font-size)}:host(.udp-input--size-large) .bx--text-input,:host(.udp-input--size-large) textarea,:host(.udp-input--size-large) input[type=\"text\"],:host(.udp-input--size-large) input[type=\"number\"],:host(.udp-input--size-large) input[type=\"email\"],:host(.udp-input--size-large) input[type=\"password\"],:host(.udp-input--size-large) input[type=\"tel\"],:host(.udp-input--size-large) input[type=\"url\"],:host(.udp-input--size-large) input[type=\"search\"]{padding:var(--spacing-04);padding-bottom:12px;font-size:var(--body-font-size)}:host(.udp-input--margin-none){margin:0}:host(.udp-input--margin-dense){margin:var(--spacing-02) 0}:host(.udp-input--margin-normal){margin:var(--spacing-03) 0}:host(.udp-input--margin-comfortable){margin:var(--spacing-04) 0}:host(.udp-input--size-small) .bx--label{margin-bottom:var(--spacing-02);font-size:var(--caption-font-size, 0.875rem)}:host(.udp-input--size-normal) .bx--label{margin-bottom:var(--spacing-03);font-size:var(--body-font-size)}:host(.udp-input--size-large) .bx--label{margin-bottom:var(--spacing-04);font-size:var(--body-font-size)}.bx--text-input,textarea,input[type=\"text\"],input[type=\"number\"],input[type=\"email\"],input[type=\"password\"],input[type=\"tel\"],input[type=\"url\"],input[type=\"search\"]{display:inline-block;padding:var(--spacing-03);padding-bottom:9px;box-sizing:border-box;border:none;font-size:var(--body-font-size);background:var(--input-background);border-bottom:var(--underline-standard) solid var(--input-underline-color, var(--gray-08));width:100%;font-family:var(--font-family);transition:border-bottom-color 0.15s ease-in-out}.bx--text-input:focus,textarea:focus,input[type=\"text\"]:focus,input[type=\"number\"]:focus,input[type=\"email\"]:focus,input[type=\"password\"]:focus,input[type=\"tel\"]:focus,input[type=\"url\"]:focus,input[type=\"search\"]:focus{border-bottom-color:var(--input-underline-color-focus, var(--primary-color));border-bottom-width:2px}.bx--text-input--error,.bx--text-input:user-invalid,:host(.udp-input--error) .bx--text-input,:host(.udp-input--error) textarea,:host(.udp-input--error) input[type=\"text\"],:host(.udp-input--error) input[type=\"number\"],:host(.udp-input--error) input[type=\"email\"],:host(.udp-input--error) input[type=\"password\"],:host(.udp-input--error) input[type=\"tel\"],:host(.udp-input--error) input[type=\"url\"],:host(.udp-input--error) input[type=\"search\"],input[type=\"text\"]:user-invalid,input[type=\"number\"]:user-invalid,input[type=\"email\"]:user-invalid,input[type=\"password\"]:user-invalid,input[type=\"tel\"]:user-invalid,input[type=\"url\"]:user-invalid,input[type=\"search\"]:user-invalid{border-bottom-color:var(--input-underline-color-error, var(--error-color-main)) !important}:host(.udp-input--disabled) .bx--text-input,:host(.udp-input--disabled) textarea,:host(.udp-input--disabled) input[type=\"text\"],:host(.udp-input--disabled) input[type=\"number\"],:host(.udp-input--disabled) input[type=\"email\"],:host(.udp-input--disabled) input[type=\"password\"],:host(.udp-input--disabled) input[type=\"tel\"],:host(.udp-input--disabled) input[type=\"url\"],:host(.udp-input--disabled) input[type=\"search\"]{border-bottom-color:var(--input-underline-color-disabled, var(--gray-08))}textarea.bx--text-input{resize:vertical;min-height:var(--spacing-08)}.bx--text-input::placeholder,textarea::placeholder,input[type=\"text\"]::placeholder,input[type=\"number\"]::placeholder,input[type=\"email\"]::placeholder,input[type=\"password\"]::placeholder,input[type=\"tel\"]::placeholder,input[type=\"url\"]::placeholder,input[type=\"search\"]::placeholder{color:var(--placeholder-color, #999);opacity:1}:host(.udp-input),:host{display:block;width:100%;box-sizing:border-box}.bx--form-item{margin-bottom:var(--spacing-05)}.bx--label{display:block;margin-bottom:var(--spacing-03)}.error-message,.bx--form-requirement,:host(.udp-input--error) .error-message,:host(.udp-input--error) .bx--form-requirement{color:var(--error-color-main, #d32f2f) !important;margin-top:var(--spacing-02);font-size:var(--caption-font-size, 0.875rem);--unity-typography-inherit-color:var(--error-color-main, #d32f2f)}.helper-text{color:var(--text-02, #525252);margin-top:var(--spacing-02);font-size:var(--caption-font-size, 0.875rem)}:host(.udp-input--disabled) .bx--text-input,:host(.udp-input--disabled) textarea,:host(.udp-input--disabled) input,:host(.udp-input--disabled){cursor:not-allowed;opacity:0.6}:host(.udp-input--readonly) .bx--text-input,:host(.udp-input--readonly) textarea,:host(.udp-input--readonly) input{background-color:var(--field-01, #f4f4f4);cursor:default}";
+
+const UdpTimeSelector = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.change = createEvent(this, "change");
+        this.input = createEvent(this, "input");
+        /**
+         * 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.
+         */
+        this.value = '';
+        /**
+         * Whether the input is readonly.
+         */
+        this.readonly = false;
+        /**
+         * Whether the input should take the full width of its container.
+         */
+        this.fullWidth = false;
+        /**
+         * Size variant controlling the padding and spacing of the input.
+         * - 'small': Compact spacing for data-heavy interfaces
+         * - 'normal': Standard spacing (default)
+         * - 'large': Generous spacing for accessibility
+         */
+        this.size = 'normal';
+        /**
+         * Margin variant for the input spacing.
+         * - 'none': No margin
+         * - 'dense': Minimal margin spacing
+         * - 'normal': Standard margin spacing (default)
+         */
+        this.margin = 'normal';
+        this.internalValue = ''; // Internal state for value management
+        /**
+         * Handles changes to the time input value. Updates internal state and emits standard events.
+         * @param event - The input event from the time input
+         */
+        this.handleTimeChange = (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;
+            }
+            // Emit standard events for integration with form libraries and custom handlers
+            this.change.emit(newValue);
+            this.input.emit(newValue);
+        };
+    }
+    /**
+     * Component lifecycle method called when the component is about to load.
+     * Initializes the internal value from either the value prop or initialValue prop.
+     */
+    componentWillLoad() {
+        // Initialize from controlled value or initial value
+        this.internalValue = this.value || this.initialValue || '';
+        this.errorMessage = this.error;
+    }
+    /**
+     * Watcher for the error prop. Updates the internal error message when the error prop changes.
+     */
+    updateError() {
+        this.errorMessage = this.error;
+    }
+    /**
+     * Watcher for the initialValue prop. Updates the internal value when initialValue changes
+     * (useful for form resets, dynamic initial values, etc.).
+     * @param newValue - The new initial value
+     */
+    initialValueChanged(newValue) {
+        if (newValue !== undefined) {
+            this.internalValue = newValue;
+        }
+    }
+    /**
+     * Watcher for the value prop. Updates the internal value when the value prop changes
+     * (controlled component behavior).
+     * @param newValue - The new controlled value
+     */
+    valueChanged(newValue) {
+        if (newValue !== undefined) {
+            this.internalValue = newValue;
+        }
+    }
+    /**
+     * Handles the blur event on the time input. Standard focus events bubble naturally.
+     */
+    handleBlur() {
+        // Standard focus events bubble naturally - no custom emission needed
+    }
+    /**
+     * Handles the focus event on the time input. Standard focus events bubble naturally.
+     */
+    handleFocus() {
+        // Standard focus events bubble naturally - no custom emission needed
+    }
+    render() {
+        const isError = !!this.errorMessage;
+        const classNames = ['bx--text-input'];
+        if (isError) {
+            classNames.push('bx--text-input--error');
+        }
+        if (this.disabled) {
+            classNames.push('time-selector--disabled');
+        }
+        if (this.fullWidth) {
+            classNames.push('bx--text-input--full-width');
+        }
+        const inputClass = classNames.join(' ');
+        return (h(Host, { key: '343997e6ef8f5b6ab0a61f8d250e5293f572fb97', class: {
+                'udp-input': true,
+                'udp-input--error': isError,
+                'udp-input--disabled': this.disabled,
+                'udp-input--readonly': this.readonly,
+                'udp-input--full-width': this.fullWidth,
+                '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: '955cf74003a576605bb7b24d5a67d145143aff4b', class: "bx--form-item" }, h("unity-typography", { key: 'd88946f3b292a2f6f950559972a2688896f3e4f1', variant: "caption-text" }, h("label", { key: 'c821e535f9ab9803f3f1c9290c1e7854b0b03692', htmlFor: this.id, class: "bx--label" }, this.label, this.required ? '*' : '')), h("input", { key: 'd96345a2bcde2b65dbe7eb100e76a0acd71c5402', 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,
+            //@ts-ignore
+            udprecordid: 'udpRecord-udp-time-selector-' + this.id }), h("unity-typography", { key: '17daf5fc3b09a1fd9bb403e21f4f39364744cebe', class: "error-message", variant: "caption-text", color: "error" }, this.errorMessage))));
+    }
+    static get watchers() { return {
+        "error": ["updateError"],
+        "initialValue": ["initialValueChanged"],
+        "value": ["valueChanged"]
+    }; }
+};
+UdpTimeSelector.style = udpTimeSelectorCss;
+
+export { TextArea as text_area, UdpDateSelector as udp_date_selector, UdpDateTimeSelector as udp_datetime_selector, UdpTimeSelector as udp_time_selector };
+//# sourceMappingURL=text-area.udp-date-selector.udp-datetime-selector.udp-time-selector.entry.js.map
+
+//# sourceMappingURL=text-area_4.entry.js.map