udp-stencil-component-library 25.18.1-beta.8 → 25.18.1-beta.9

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

@@ -0,0 +1,565 @@
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-n-1ZSeAs.js';
+import { createPopper } from '@popperjs/core';
+
+const textFieldCss = ":host(.udp-input){display:block;box-sizing:border-box;position:relative}:host(.udp-input--full-width){width:100%}:host(.udp-input--error){--input-border-color:var(--input-underline-color-error)}:host(.udp-input--disabled){pointer-events:none;opacity:0.5;cursor:not-allowed}:host(.udp-input--required){position:relative}:host(.udp-input--readonly){--input-background:var(--gray-02)}:host(.udp-input--hidden){display:none}:host(.udp-input--checked){--input-accent-color:var(--primary-color)}:host(.udp-input--multi-select){--list-max-height:200px}:host(.udp-input) .bx--text-input:focus{outline:none;}:host(.udp-input) .bx--form-item{margin-bottom:var(--spacing-05)}:host(.udp-input) .bx--label{display:block;margin-bottom:var(--spacing-03);color:var(--text-main);font-size:var(--caption-text-font-size);font-weight:var(--caption-text-font-weight);line-height:var(--caption-text-line-height)}@media (max-width: var(--breakpoint-xs-max)){:host(.udp-input){margin-bottom:var(--spacing-04)}:host(.udp-input) .bx--form-item{margin-bottom:var(--spacing-04)}}@media (min-width: var(--breakpoint-sm-min)){:host(.udp-input){min-height:2.5rem;}}:host(.udp-input--size-small) .bx--text-input,:host(.udp-input--size-small) textarea,:host(.udp-input--size-small) input[type=\"text\"],:host(.udp-input--size-small) input[type=\"number\"],:host(.udp-input--size-small) input[type=\"email\"],:host(.udp-input--size-small) input[type=\"password\"],:host(.udp-input--size-small) input[type=\"tel\"],:host(.udp-input--size-small) input[type=\"url\"],:host(.udp-input--size-small) input[type=\"search\"]{padding:var(--spacing-02);padding-bottom:6px;font-size:var(--caption-font-size, 0.875rem)}:host(.udp-input--size-normal) .bx--text-input,:host(.udp-input--size-normal) textarea,:host(.udp-input--size-normal) input[type=\"text\"],:host(.udp-input--size-normal) input[type=\"number\"],:host(.udp-input--size-normal) input[type=\"email\"],:host(.udp-input--size-normal) input[type=\"password\"],:host(.udp-input--size-normal) input[type=\"tel\"],:host(.udp-input--size-normal) input[type=\"url\"],:host(.udp-input--size-normal) input[type=\"search\"]{padding:var(--spacing-03);padding-bottom:9px;font-size:var(--body-font-size)}:host(.udp-input--size-large) .bx--text-input,:host(.udp-input--size-large) textarea,:host(.udp-input--size-large) input[type=\"text\"],:host(.udp-input--size-large) input[type=\"number\"],:host(.udp-input--size-large) input[type=\"email\"],:host(.udp-input--size-large) input[type=\"password\"],:host(.udp-input--size-large) input[type=\"tel\"],:host(.udp-input--size-large) input[type=\"url\"],:host(.udp-input--size-large) input[type=\"search\"]{padding:var(--spacing-04);padding-bottom:12px;font-size:var(--body-font-size)}:host(.udp-input--margin-none){margin:0}:host(.udp-input--margin-dense){margin:var(--spacing-02) 0}:host(.udp-input--margin-normal){margin:var(--spacing-03) 0}:host(.udp-input--margin-comfortable){margin:var(--spacing-04) 0}:host(.udp-input--size-small) .bx--label{margin-bottom:var(--spacing-02);font-size:var(--caption-font-size, 0.875rem)}:host(.udp-input--size-normal) .bx--label{margin-bottom:var(--spacing-03);font-size:var(--body-font-size)}:host(.udp-input--size-large) .bx--label{margin-bottom:var(--spacing-04);font-size:var(--body-font-size)}.bx--text-input,textarea,input[type=\"text\"],input[type=\"number\"],input[type=\"email\"],input[type=\"password\"],input[type=\"tel\"],input[type=\"url\"],input[type=\"search\"]{display:inline-block;padding:var(--spacing-03);padding-bottom:9px;box-sizing:border-box;border:none;font-size:var(--body-font-size);background:var(--input-background);border-bottom:var(--underline-standard) solid var(--input-underline-color, var(--gray-08));width:100%;font-family:var(--font-family);transition:border-bottom-color 0.15s ease-in-out}.bx--text-input:focus,textarea:focus,input[type=\"text\"]:focus,input[type=\"number\"]:focus,input[type=\"email\"]:focus,input[type=\"password\"]:focus,input[type=\"tel\"]:focus,input[type=\"url\"]:focus,input[type=\"search\"]:focus{border-bottom-color:var(--input-underline-color-focus, var(--primary-color));border-bottom-width:2px}.bx--text-input--error,.bx--text-input:user-invalid,:host(.udp-input--error) .bx--text-input,:host(.udp-input--error) textarea,:host(.udp-input--error) input[type=\"text\"],:host(.udp-input--error) input[type=\"number\"],:host(.udp-input--error) input[type=\"email\"],:host(.udp-input--error) input[type=\"password\"],:host(.udp-input--error) input[type=\"tel\"],:host(.udp-input--error) input[type=\"url\"],:host(.udp-input--error) input[type=\"search\"],input[type=\"text\"]:user-invalid,input[type=\"number\"]:user-invalid,input[type=\"email\"]:user-invalid,input[type=\"password\"]:user-invalid,input[type=\"tel\"]:user-invalid,input[type=\"url\"]:user-invalid,input[type=\"search\"]:user-invalid{border-bottom-color:var(--input-underline-color-error, var(--error-color-main)) !important}:host(.udp-input--disabled) .bx--text-input,:host(.udp-input--disabled) textarea,:host(.udp-input--disabled) input[type=\"text\"],:host(.udp-input--disabled) input[type=\"number\"],:host(.udp-input--disabled) input[type=\"email\"],:host(.udp-input--disabled) input[type=\"password\"],:host(.udp-input--disabled) input[type=\"tel\"],:host(.udp-input--disabled) input[type=\"url\"],:host(.udp-input--disabled) input[type=\"search\"]{border-bottom-color:var(--input-underline-color-disabled, var(--gray-08))}textarea.bx--text-input{resize:vertical;min-height:var(--spacing-08)}.bx--text-input::placeholder,textarea::placeholder,input[type=\"text\"]::placeholder,input[type=\"number\"]::placeholder,input[type=\"email\"]::placeholder,input[type=\"password\"]::placeholder,input[type=\"tel\"]::placeholder,input[type=\"url\"]::placeholder,input[type=\"search\"]::placeholder{color:var(--placeholder-color, #999);opacity:1}:host(.udp-input),:host{display:block;width:100%;box-sizing:border-box}.bx--form-item{margin-bottom:var(--spacing-05)}.bx--label{display:block;margin-bottom:var(--spacing-03)}.error-message,.bx--form-requirement,:host(.udp-input--error) .error-message,:host(.udp-input--error) .bx--form-requirement{color:var(--error-color-main, #d32f2f) !important;margin-top:var(--spacing-02);font-size:var(--caption-font-size, 0.875rem);--unity-typography-inherit-color:var(--error-color-main, #d32f2f)}.helper-text{color:var(--text-02, #525252);margin-top:var(--spacing-02);font-size:var(--caption-font-size, 0.875rem)}:host(.udp-input--disabled) .bx--text-input,:host(.udp-input--disabled) textarea,:host(.udp-input--disabled) input,:host(.udp-input--disabled){cursor:not-allowed;opacity:0.6}:host(.udp-input--readonly) .bx--text-input,:host(.udp-input--readonly) textarea,:host(.udp-input--readonly) input{background-color:var(--field-01, #f4f4f4);cursor:default}";
+
+const TextField = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.change = createEvent(this, "change");
+        this.errorEvent = createEvent(this, "error");
+        /**
+         * Error message to display below the input field. Shows validation errors or other issues.
+         */
+        this.error = '';
+        /**
+         * Size variant controlling the padding and spacing of the input.
+         * - 'small': Compact spacing for data-heavy interfaces
+         * - 'normal': Standard spacing (default)
+         * - 'large': Generous spacing for accessibility
+         */
+        this.size = 'normal';
+        /**
+         * Margin variant for the input spacing.
+         * - 'none': No margin
+         * - 'dense': Minimal margin spacing
+         * - 'normal': Standard margin spacing (default)
+         */
+        this.margin = 'normal';
+        /**
+         * Handles input events (real-time typing). Updates internal state and emits input event.
+         * For controlled components, also updates the value prop.
+         * @param event - The native input event
+         * @internal
+         */
+        this.onInput = (event) => {
+            if (this.readonly) {
+                // Prevent typing if the field is read-only
+                const input = event.target;
+                input.value = this.internalValue;
+                return;
+            }
+            const newValue = event.target.value;
+            this.internalValue = newValue; // Update internal state
+            // If this is a controlled component (value prop provided), update the value prop
+            if (this.value !== undefined) {
+                this.value = newValue;
+            }
+            // Re-evaluate validation on input if there's currently an error
+            // This provides immediate feedback when user corrects the error
+            if (this.errorMessage) {
+                const validationError = this.validateCharacterLength(newValue);
+                if (validationError !== this.errorMessage) {
+                    // Error state has changed, update it
+                    this.setAndDispatchError(validationError);
+                }
+            }
+        };
+        /**
+         * Handles change events (committed changes on blur/enter). Emits change event.
+         * @param event - The native change event
+         * @internal
+         */
+        this.onChange = (event) => {
+            if (this.readonly) {
+                return;
+            }
+            const newValue = event.target.value;
+            // Validate the new value for character length constraints
+            const validationError = this.validateCharacterLength(newValue);
+            if (validationError) {
+                // Character length validation failed
+                this.setAndDispatchError(validationError);
+            }
+            else {
+                // Character length validation passed, clear any existing error
+                this.setAndDispatchError('');
+            }
+            // Emit change event when user finishes editing (blur, enter, etc.)
+            this.change.emit(newValue);
+        };
+    }
+    /**
+     * Updates the error message when the error prop changes.
+     * @internal
+     */
+    updateError() {
+        this.errorMessage = this.error;
+    }
+    /**
+     * Updates the internal value when initialValue prop changes.
+     * Only updates if current value is empty to avoid overriding user input.
+     * @internal
+     */
+    updateInitialValue() {
+        // Only update if we don't have a value yet or if explicitly resetting
+        if (this.internalValue === '' || this.internalValue === undefined) {
+            this.internalValue = this.initialValue || '';
+        }
+    }
+    /**
+     * Updates the internal value when value prop changes.
+     * For controlled components, the value prop takes precedence.
+     * @internal
+     */
+    updateValue() {
+        // If value prop is provided, this is a controlled component
+        if (this.value !== undefined) {
+            this.internalValue = this.value;
+        }
+    }
+    /**
+     * Validates the text value against min/max character constraints
+     * @param value - The text value to validate
+     * @returns Error message if invalid, empty string if valid
+     */
+    validateCharacterLength(value) {
+        if (!value)
+            return '';
+        const length = value.length;
+        if (this.minCharacter && length < this.minCharacter) {
+            return `Must be at least ${this.minCharacter} characters`;
+        }
+        if (this.maxCharacter && length > this.maxCharacter) {
+            return `Must be no more than ${this.maxCharacter} characters`;
+        }
+        return '';
+    }
+    /**
+     * Sets error state and dispatches error event that bubbles to stencil-field
+     * @param errorMessage - The error message to set and dispatch
+     */
+    setAndDispatchError(errorMessage) {
+        console.log('Setting text field error:', errorMessage);
+        // Update internal error state
+        this.errorMessage = errorMessage;
+        // Emit Stencil error event
+        this.errorEvent.emit(errorMessage);
+        // Dispatch custom error event that bubbles up to stencil-field
+        const errorEvent = new CustomEvent('error', {
+            detail: errorMessage,
+            bubbles: true,
+            composed: true
+        });
+        this.el.dispatchEvent(errorEvent);
+    }
+    /**
+     * Component lifecycle method. Initializes error message and internal value.
+     * @internal
+     */
+    componentWillLoad() {
+        // Initialize error message
+        if (this.error) {
+            this.errorMessage = this.error;
+        }
+        // Initialize value: use value prop if provided (controlled), otherwise use initialValue (uncontrolled)
+        this.internalValue = this.value !== undefined ? this.value : (this.initialValue || '');
+        // Validate the initial value
+        if (this.internalValue) {
+            const validationError = this.validateCharacterLength(this.internalValue);
+            if (validationError) {
+                this.setAndDispatchError(validationError);
+            }
+        }
+    }
+    render() {
+        const isError = !!this.errorMessage;
+        const inputClass = {
+            'bx--text-input': true,
+            'bx--text-input--error': isError,
+            'bx--text-input:user-invalid': isError,
+            'text-field--disabled': this.disabled,
+        };
+        return (h(Host, { key: 'be35c0ce5f92ddcde4ba83b0c4e0dfa9d0e21141', class: {
+                'udp-input': true,
+                'udp-input--error': isError,
+                'udp-input--disabled': this.disabled,
+                'udp-input--readonly': this.readonly,
+                'udp-input--required': this.required,
+                [`udp-input--size-${this.size}`]: true,
+                [`udp-input--margin-${this.margin}`]: true,
+            }, "aria-invalid": isError ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false' }, h("div", { key: '724482ba470fc85753a690305069cac7318c864a', class: "bx--form-item" }, h("unity-typography", { key: '49c8be8225287aea250fb25abf6efff72e36be7b', variant: "caption-text" }, h("label", { key: '70633aa3554288ac78921f614eb6e697de2c75f3', 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: 'fdf7e37101763ca2020d75e41b184666b35c2378', class: "error-message" }, h("unity-typography", { key: '41d5512ccbc2e3ac43f7fdc5142888540e22cccd', variant: "caption-text", color: "error" }, this.errorMessage))))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "error": ["updateError"],
+        "initialValue": ["updateInitialValue"],
+        "value": ["updateValue"]
+    }; }
+};
+TextField.style = textFieldCss;
+
+const udpSelectorCss = ":host(.udp-input){display:block;box-sizing:border-box;position:relative}:host(.udp-input--full-width){width:100%}:host(.udp-input--error){--input-border-color:var(--input-underline-color-error)}:host(.udp-input--disabled){pointer-events:none;opacity:0.5;cursor:not-allowed}:host(.udp-input--required){position:relative}:host(.udp-input--readonly){--input-background:var(--gray-02)}:host(.udp-input--hidden){display:none}:host(.udp-input--checked){--input-accent-color:var(--primary-color)}:host(.udp-input--multi-select){--list-max-height:200px}:host(.udp-input) .bx--text-input:focus{outline:none;}:host(.udp-input) .bx--form-item{margin-bottom:var(--spacing-05)}:host(.udp-input) .bx--label{display:block;margin-bottom:var(--spacing-03);color:var(--text-main);font-size:var(--caption-text-font-size);font-weight:var(--caption-text-font-weight);line-height:var(--caption-text-line-height)}@media (max-width: var(--breakpoint-xs-max)){:host(.udp-input){margin-bottom:var(--spacing-04)}:host(.udp-input) .bx--form-item{margin-bottom:var(--spacing-04)}}@media (min-width: var(--breakpoint-sm-min)){:host(.udp-input){min-height:2.5rem;}}:host(.udp-input--size-small) .bx--text-input,:host(.udp-input--size-small) textarea,:host(.udp-input--size-small) input[type=\"text\"],:host(.udp-input--size-small) input[type=\"number\"],:host(.udp-input--size-small) input[type=\"email\"],:host(.udp-input--size-small) input[type=\"password\"],:host(.udp-input--size-small) input[type=\"tel\"],:host(.udp-input--size-small) input[type=\"url\"],:host(.udp-input--size-small) input[type=\"search\"]{padding:var(--spacing-02);padding-bottom:6px;font-size:var(--caption-font-size, 0.875rem)}:host(.udp-input--size-normal) .bx--text-input,:host(.udp-input--size-normal) textarea,:host(.udp-input--size-normal) input[type=\"text\"],:host(.udp-input--size-normal) input[type=\"number\"],:host(.udp-input--size-normal) input[type=\"email\"],:host(.udp-input--size-normal) input[type=\"password\"],:host(.udp-input--size-normal) input[type=\"tel\"],:host(.udp-input--size-normal) input[type=\"url\"],:host(.udp-input--size-normal) input[type=\"search\"]{padding:var(--spacing-03);padding-bottom:9px;font-size:var(--body-font-size)}:host(.udp-input--size-large) .bx--text-input,:host(.udp-input--size-large) textarea,:host(.udp-input--size-large) input[type=\"text\"],:host(.udp-input--size-large) input[type=\"number\"],:host(.udp-input--size-large) input[type=\"email\"],:host(.udp-input--size-large) input[type=\"password\"],:host(.udp-input--size-large) input[type=\"tel\"],:host(.udp-input--size-large) input[type=\"url\"],:host(.udp-input--size-large) input[type=\"search\"]{padding:var(--spacing-04);padding-bottom:12px;font-size:var(--body-font-size)}:host(.udp-input--margin-none){margin:0}:host(.udp-input--margin-dense){margin:var(--spacing-02) 0}:host(.udp-input--margin-normal){margin:var(--spacing-03) 0}:host(.udp-input--margin-comfortable){margin:var(--spacing-04) 0}:host(.udp-input--size-small) .bx--label{margin-bottom:var(--spacing-02);font-size:var(--caption-font-size, 0.875rem)}:host(.udp-input--size-normal) .bx--label{margin-bottom:var(--spacing-03);font-size:var(--body-font-size)}:host(.udp-input--size-large) .bx--label{margin-bottom:var(--spacing-04);font-size:var(--body-font-size)}.bx--text-input,textarea,input[type=\"text\"],input[type=\"number\"],input[type=\"email\"],input[type=\"password\"],input[type=\"tel\"],input[type=\"url\"],input[type=\"search\"]{display:inline-block;padding:var(--spacing-03);padding-bottom:9px;box-sizing:border-box;border:none;font-size:var(--body-font-size);background:var(--input-background);border-bottom:var(--underline-standard) solid var(--input-underline-color, var(--gray-08));width:100%;font-family:var(--font-family);transition:border-bottom-color 0.15s ease-in-out}.bx--text-input:focus,textarea:focus,input[type=\"text\"]:focus,input[type=\"number\"]:focus,input[type=\"email\"]:focus,input[type=\"password\"]:focus,input[type=\"tel\"]:focus,input[type=\"url\"]:focus,input[type=\"search\"]:focus{border-bottom-color:var(--input-underline-color-focus, var(--primary-color));border-bottom-width:2px}.bx--text-input--error,.bx--text-input:user-invalid,:host(.udp-input--error) .bx--text-input,:host(.udp-input--error) textarea,:host(.udp-input--error) input[type=\"text\"],:host(.udp-input--error) input[type=\"number\"],:host(.udp-input--error) input[type=\"email\"],:host(.udp-input--error) input[type=\"password\"],:host(.udp-input--error) input[type=\"tel\"],:host(.udp-input--error) input[type=\"url\"],:host(.udp-input--error) input[type=\"search\"],input[type=\"text\"]:user-invalid,input[type=\"number\"]:user-invalid,input[type=\"email\"]:user-invalid,input[type=\"password\"]:user-invalid,input[type=\"tel\"]:user-invalid,input[type=\"url\"]:user-invalid,input[type=\"search\"]:user-invalid{border-bottom-color:var(--input-underline-color-error, var(--error-color-main)) !important}:host(.udp-input--disabled) .bx--text-input,:host(.udp-input--disabled) textarea,:host(.udp-input--disabled) input[type=\"text\"],:host(.udp-input--disabled) input[type=\"number\"],:host(.udp-input--disabled) input[type=\"email\"],:host(.udp-input--disabled) input[type=\"password\"],:host(.udp-input--disabled) input[type=\"tel\"],:host(.udp-input--disabled) input[type=\"url\"],:host(.udp-input--disabled) input[type=\"search\"]{border-bottom-color:var(--input-underline-color-disabled, var(--gray-08))}textarea.bx--text-input{resize:vertical;min-height:var(--spacing-08)}.bx--text-input::placeholder,textarea::placeholder,input[type=\"text\"]::placeholder,input[type=\"number\"]::placeholder,input[type=\"email\"]::placeholder,input[type=\"password\"]::placeholder,input[type=\"tel\"]::placeholder,input[type=\"url\"]::placeholder,input[type=\"search\"]::placeholder{color:var(--placeholder-color, #999);opacity:1}:host(.udp-input),:host{display:block;width:100%;box-sizing:border-box}.bx--form-item{margin-bottom:var(--spacing-05)}.bx--label{display:block;margin-bottom:var(--spacing-03)}.error-message,.bx--form-requirement,:host(.udp-input--error) .error-message,:host(.udp-input--error) .bx--form-requirement{color:var(--error-color-main, #d32f2f) !important;margin-top:var(--spacing-02);font-size:var(--caption-font-size, 0.875rem);--unity-typography-inherit-color:var(--error-color-main, #d32f2f)}.helper-text{color:var(--text-02, #525252);margin-top:var(--spacing-02);font-size:var(--caption-font-size, 0.875rem)}:host(.udp-input--disabled) .bx--text-input,:host(.udp-input--disabled) textarea,:host(.udp-input--disabled) input,:host(.udp-input--disabled){cursor:not-allowed;opacity:0.6}:host(.udp-input--readonly) .bx--text-input,:host(.udp-input--readonly) textarea,:host(.udp-input--readonly) input{background-color:var(--field-01, #f4f4f4);cursor:default}:host(.udp-input--size-small) .selected-option{padding:var(--spacing-02);padding-bottom:6px;font-size:var(--caption-font-size, 0.875rem)}:host(.udp-input--size-normal) .selected-option{padding:var(--spacing-03);padding-bottom:9px;font-size:var(--body-font-size)}:host(.udp-input--size-large) .selected-option{padding:var(--spacing-04);padding-bottom:12px;font-size:var(--body-font-size)}.selected-option{border:none;border-bottom:var(--underline-standard) solid var(--input-underline-color, var(--gray-08));box-sizing:border-box;cursor:pointer;background-color:var(--input-background);display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-03);padding-bottom:9px;width:100%;font-size:var(--body-font-size);font-family:var(--font-family);transition:border-bottom-color 0.15s ease-in-out}.selected-option:active,.selected-option:focus,.selected-option.focused{outline:none;border-bottom-color:var(--input-underline-color-focus, var(--primary-color));border-bottom-width:2px}:host(.udp-input--error) .selected-option,:host(.udp-input--error) .selected-option:focus,:host(.udp-input--error) .selected-option:active,:host(.udp-input--error) .selected-option.focused{border-bottom-color:var(--input-underline-color-error, var(--error-color-main)) !important}:host(.udp-input--disabled) .selected-option{border-bottom-color:var(--input-underline-color-disabled, var(--gray-08));cursor:not-allowed;opacity:0.6}.selected-option-label{flex-grow:1;color:var(--ag-foreground-color, #000)}.selected-option-label.placeholder{color:var(--placeholder-color, #999)}.udp-selector--large .selected-option{background-color:var(--gray-08);color:white;width:60px;padding:var(--spacing-05);box-shadow:var(--elevation-08);width:100px;border-radius:50px;font-size:var(--body-font-size)}.arrow{position:relative;display:inline-block;width:10px;height:5px}.arrow::before,.arrow::after{content:'';position:absolute;bottom:0;width:0.6em;height:10px;border-bottom:var(--underline-standard) solid var(--gray-09)}.udp-selector--large .selected-option .arrow::before,.udp-selector--large .selected-option .arrow::after{border-bottom:1px solid white}.arrow::before{left:-0.1em;transform:rotate(-45deg)}.arrow::after{transform:rotate(45deg)}.udp-selector__container{position:relative}.options-list{max-width:100%;border:none;margin:4px 0 0 0;padding:0;list-style:none;z-index:9999;max-height:150px;overflow-y:auto;overflow-x:hidden;border-radius:var(--border-radius);box-shadow:var(--elevation-08);position:absolute;width:100%;box-sizing:border-box}.options-list li{position:relative;padding:10px;cursor:pointer;background-color:var(--input-background)}.options-list li:hover{background-color:var(--primary-color);color:white}";
+
+const UdpSelector = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * Array of options to display in the selector. Each option should be an object with `value` and `label` properties.
+         */
+        this.options = [];
+        /**
+         * Whether the selector should display in a large style.
+         */
+        this.large = false;
+        /**
+         * Whether multiple items can be selected. When false, only one item can be selected at a time.
+         */
+        this.multiSelect = false;
+        /**
+         * Whether the selector is disabled. Users cannot interact with the selector when disabled.
+         */
+        this.disabled = false;
+        /**
+         * Whether the selector is in a read-only state. Users can see the value but cannot modify it.
+         */
+        this.readonly = false;
+        /**
+         * Size variant controlling the padding and spacing of the selector.
+         * - '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 state to control the visibility of the dropdown options.
+         * @internal
+         */
+        this.isOpen = false;
+        /**
+         * Internal state to manage selected options for multi-select mode.
+         * @internal
+         */
+        this.selectedOptions = [];
+        /**
+         * Internal state to manage the selected option for single-select mode.
+         * @internal
+         */
+        this.selectedOption = null;
+        /**
+         * Handles the blur event on the selector. Delays closing the dropdown to allow option clicks.
+         * @internal
+         */
+        this.handleBlur = () => {
+            setTimeout(() => {
+                this.isOpen = false;
+            }, 200);
+        };
+        /**
+         * Prevents the blur event on the main input when an option is clicked.
+         * @param event - The mouse event.
+         * @internal
+         */
+        this.handleOptionMouseDown = (event) => {
+            event.preventDefault();
+        };
+    }
+    /**
+     * Updates the error message when the error prop changes.
+     * @internal
+     */
+    updateError() {
+        this.errorMessage = this.error;
+    }
+    /**
+     * Updates the selection when the `initialValue` prop changes.
+     * @param newValue - The new initial value.
+     * @internal
+     */
+    initialValueChanged(newValue) {
+        if (newValue !== undefined) {
+            this.setSelectionFromValue(newValue);
+        }
+    }
+    /**
+     * Updates the selection when the `value` prop changes.
+     * @internal
+     */
+    valueChanged() {
+        if (this.value !== undefined) {
+            this.setSelectionFromValue(this.value);
+        }
+    }
+    /**
+     * Handles clicks outside the component to close the dropdown.
+     * @param event - The mouse event.
+     * @internal
+     */
+    handleClickOutside(event) {
+        if (this.isOpen && !event.composedPath().includes(this.el)) {
+            this.isOpen = false;
+        }
+    }
+    /**
+     * Component lifecycle method. Initializes error message and selection state.
+     * @internal
+     */
+    componentWillLoad() {
+        if (this.error) {
+            this.errorMessage = this.error;
+        }
+        const initValue = this.initialValue || this.value;
+        if (initValue) {
+            this.setSelectionFromValue(initValue);
+        }
+    }
+    /**
+     * Component lifecycle method. Destroys the Popper.js instance when the component is removed from the DOM.
+     * @internal
+     */
+    disconnectedCallback() {
+        this.destroyPopper();
+    }
+    /**
+     * Watches for changes in the `isOpen` state and sets up/destroys the Popper.js instance accordingly.
+     * @param isOpen - The new state of `isOpen`.
+     * @internal
+     */
+    handleOpenChange(isOpen) {
+        if (isOpen) {
+            requestAnimationFrame(() => this.setupPopper());
+        }
+        else {
+            this.destroyPopper();
+        }
+    }
+    /**
+     * Toggles the visibility of the dropdown options.
+     * @internal
+     */
+    toggleDropdown() {
+        if (this.disabled || this.readonly) {
+            return;
+        }
+        this.isOpen = !this.isOpen;
+    }
+    /**
+     * Sets up the Popper.js instance for positioning the dropdown.
+     * @internal
+     */
+    setupPopper() {
+        const referenceEl = this.el.shadowRoot.querySelector('.selected-option');
+        const popperEl = this.el.shadowRoot.querySelector('.options-list');
+        if (referenceEl && popperEl) {
+            this.popperInstance = createPopper(referenceEl, popperEl, {
+                strategy: 'fixed',
+                placement: 'bottom-start',
+                modifiers: [
+                    {
+                        name: 'offset',
+                        options: {
+                            offset: [0, 4],
+                        },
+                    },
+                    {
+                        name: 'preventOverflow',
+                        options: {
+                            padding: 8,
+                        },
+                    },
+                    {
+                        name: 'flip',
+                    },
+                    {
+                        name: 'sameWidth',
+                        enabled: true,
+                        phase: 'beforeWrite',
+                        requires: ['computeStyles'],
+                        fn: ({ state }) => {
+                            state.styles.popper.width = `${state.rects.reference.width}px`;
+                        },
+                    },
+                ],
+            });
+        }
+    }
+    /**
+     * Destroys the Popper.js instance.
+     * @internal
+     */
+    destroyPopper() {
+        if (this.popperInstance) {
+            this.popperInstance.destroy();
+            this.popperInstance = null;
+        }
+    }
+    /**
+     * Sets the selected option(s) based on a provided value string.
+     * @param value - The value string (comma-separated for multi-select).
+     * @internal
+     */
+    setSelectionFromValue(value) {
+        if (!value || this.options.length === 0) {
+            if (this.multiSelect) {
+                this.selectedOptions = [];
+            }
+            else {
+                this.selectedOption = null;
+            }
+            return;
+        }
+        if (this.multiSelect) {
+            const values = value.split(',').map(v => v.trim()).filter(v => v);
+            this.selectedOptions = this.options.filter(option => values.includes(option.value));
+        }
+        else {
+            const option = this.options.find(opt => opt.value === value);
+            this.selectedOption = option || null;
+        }
+    }
+    /**
+     * Re-applies the current selection when the `options` prop changes.
+     * @internal
+     */
+    optionsChanged() {
+        var _a;
+        const currentValue = this.multiSelect
+            ? this.selectedOptions.map(option => option.value).join(',')
+            : ((_a = this.selectedOption) === null || _a === void 0 ? void 0 : _a.value) || '';
+        if (currentValue) {
+            this.setSelectionFromValue(currentValue);
+        }
+    }
+    /**
+     * Handles the selection of an option from the dropdown.
+     * @param option - The selected option object.
+     * @internal
+     */
+    selectOption(option) {
+        if (this.disabled || this.readonly) {
+            return;
+        }
+        if (this.multiSelect) {
+            const isSelected = this.selectedOptions.some(selected => selected.value === option.value);
+            if (isSelected) {
+                this.selectedOptions = this.selectedOptions.filter(selected => selected.value !== option.value);
+            }
+            else {
+                this.selectedOptions = [...this.selectedOptions, option];
+            }
+        }
+        else {
+            this.selectedOption = option;
+            this.isOpen = false;
+        }
+        this.updateValueProp();
+        this.emitSelectedOptions();
+        const selectedOptionIndex = this.options.findIndex(opt => opt.value === option.value);
+        if (selectedOptionIndex !== -1) {
+            const selectedOptionElement = document.querySelector(`.options-list li:nth-child(${selectedOptionIndex + 1})`);
+            if (selectedOptionElement) {
+                selectedOptionElement.classList.toggle('selected');
+            }
+        }
+    }
+    /**
+     * Updates the mutable `value` prop to reflect the current selection.
+     * @internal
+     */
+    updateValueProp() {
+        if (this.multiSelect) {
+            this.value = this.selectedOptions.map(option => option.value).join(',');
+        }
+        else {
+            this.value = this.selectedOption ? this.selectedOption.value : '';
+        }
+    }
+    /**
+     * Emits custom `change` and `input` events with the current selection.
+     * @event change
+     * @event input
+     * @param {string} value - The current selected value(s), comma-separated for multi-select.
+     * @internal
+     */
+    emitSelectedOptions() {
+        let standardValue;
+        if (this.multiSelect) {
+            standardValue = this.selectedOptions.map(option => option.value).join(',');
+        }
+        else {
+            standardValue = this.selectedOption ? this.selectedOption.value : '';
+        }
+        const changeEvent = new CustomEvent('change', {
+            detail: standardValue,
+            bubbles: true,
+            composed: true
+        });
+        this.el.dispatchEvent(changeEvent);
+        const inputEvent = new CustomEvent('input', {
+            detail: standardValue,
+            bubbles: true,
+            composed: true
+        });
+        this.el.dispatchEvent(inputEvent);
+    }
+    /**
+     * Renders the UDP Selector component.
+     * @returns JSX element.
+     * @internal
+     */
+    render() {
+        const isError = !!this.errorMessage;
+        const selectedOptionClasses = {
+            'selected-option': true,
+            'focused': this.isOpen,
+        };
+        const hasSelection = this.multiSelect ? this.selectedOptions.length > 0 : !!this.selectedOption;
+        return (h(Host, { key: 'a9e2eebce84a6111dde139a5071b7563d06b2c64', class: {
+                'udp-input': true,
+                'udp-selector': true,
+                'udp-input--error': isError,
+                'udp-input--disabled': this.disabled,
+                'udp-input--readonly': this.readonly,
+                'udp-input--required': this.required,
+                '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: '3cd969528cea22bfc24b98e73711d474fc0591ac', class: "bx--form-item" }, this.label && (h("unity-typography", { key: '3de45f16b31c530906698104455c5fedbf561ca4', variant: "caption-text" }, h("label", { key: '5ceddaf68f4339d544fdb96788fd876907bfd3dd', htmlFor: this.id, class: "bx--label" }, this.label, this.required ? '*' : ''))), h("div", { key: '7b4b9a5a30857aea7efc4f045bc2ecc3b82e9453', class: "udp-selector__container" }, h("div", { key: '7b555975278ac0e26e7c317539f2cb7b9c2c24cd', class: selectedOptionClasses, onClick: () => this.toggleDropdown(), 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: '3bec9703ee182cdcb8e8697a356288b55079f303', class: {
+                'selected-option-label': true,
+                'placeholder': !hasSelection,
+            } }, this.multiSelect
+            ? this.selectedOptions.length > 0
+                ? this.selectedOptions.map(option => option.label).join(', ')
+                : 'Select option(s)'
+            : this.selectedOption
+                ? this.selectedOption.label
+                : 'Select an option'), this.multiSelect && this.selectedOptions.length > 0 && h("span", { key: '4448f90e3655a59440c37bcf55294bbe99cd9dbc', class: "checkmark" }), h("div", { key: 'd6a0f2fac80e4358528f6c34dab0fc14fd815e71', class: "arrow" })), this.isOpen && (h("ul", { key: '80676247f6cd11ac3f89006e989ec8e417d61a74', 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: 'b6747a44312f3b35dbdeedad66e84fbb2da9ccd6', class: "error-message" }, h("unity-typography", { key: '2b134d1e82b86b14503fb29b8dd7df439662b315', variant: "caption-text", color: "error" }, this.errorMessage))))));
+    }
+    /**
+     * Checks if a given option is currently selected.
+     * @param option - The option to check.
+     * @returns True if the option is selected, false otherwise.
+     * @internal
+     */
+    isOptionSelected(option) {
+        if (this.multiSelect) {
+            return this.selectedOptions.some(selected => selected.value === option.value);
+        }
+        else {
+            return this.selectedOption && this.selectedOption.value === option.value;
+        }
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "error": ["updateError"],
+        "initialValue": ["initialValueChanged"],
+        "value": ["valueChanged"],
+        "isOpen": ["handleOpenChange"],
+        "options": ["optionsChanged"]
+    }; }
+};
+UdpSelector.style = udpSelectorCss;
+
+export { TextField as text_field, UdpSelector as udp_selector };
+//# sourceMappingURL=text-field.udp-selector.entry.js.map

package/dist/esm/{catalog-store-CeVER_Bk.js → transformSearchData-DBjFnXu6.js}

@@ -1,6 +1,3 @@
-import { createStore } from '@stencil/store';
-import { a as getApiCatalogById } from './apiUtils-CudiwABF.js';
-
 const toTitleCase = (str) => str.charAt(0).toUpperCase() + str.slice(1);
 const convertToAgGridColumns = (data) => {
     if (!data || !Array.isArray(data) || data.length === 0) {
@@ -1082,30 +1079,7 @@ const demoMSSearchData = {
 //   "Append": false
 // }
 
-// src/global/state.ts
-const { state, onChange } = createStore({
-    catalogData: null,
-    isLoadingCatalogData: false,
-    hotListActive: ''
-});
-async function loadCatalogData(apiCatalogId) {
-    state.isLoadingCatalogData = true;
-    try {
-        // const apiCatalogData = localStorage.getItem('apiCatalogId') || await getApiCatalogById(apiCatalogId, accessToken);
-        const apiCatalogData = await getApiCatalogById(apiCatalogId);
-        console.log('store state was');
-        state.catalogData = apiCatalogData;
-    }
-    catch (error) {
-        console.error('Error loading catalog data:', error);
-        state.catalogData = null; // Reset the catalog data on error
-    }
-    finally {
-        state.isLoadingCatalogData = false;
-    }
-}
-
-export { createStructuredQuery as a, demoMSSearchData as b, convertToAgGridColumns as c, defaultPayload as d, loadCatalogData as l, onChange as o, state as s, transformSearchData as t };
-//# sourceMappingURL=catalog-store-CeVER_Bk.js.map
+export { createStructuredQuery as a, demoMSSearchData as b, convertToAgGridColumns as c, defaultPayload as d, transformSearchData as t };
+//# sourceMappingURL=transformSearchData-DBjFnXu6.js.map
 
-//# sourceMappingURL=catalog-store-CeVER_Bk.js.map
+//# sourceMappingURL=transformSearchData-DBjFnXu6.js.map