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

package/dist/esm/stencil-toggle.entry.js

@@ -0,0 +1,148 @@
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-n-1ZSeAs.js';
+
+const stencilToggleCss = ":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) .toggle-container{width:32px;height:18px}:host(.udp-input--size-small) button{border-radius:18px}:host(.udp-input--size-small) .toggle-knob{width:14px;height:14px;top:2px;left:2px}:host(.udp-input--size-small) .toggled .toggle-knob{left:16px}:host(.udp-input--size-normal) .toggle-container{width:38px;height:22px}:host(.udp-input--size-normal) button{border-radius:22px}:host(.udp-input--size-normal) .toggle-knob{position:absolute;top:2px;left:2px;width:18px;height:18px}:host(.udp-input--size-normal) .toggled .toggle-knob{left:18px}:host(.udp-input--size-large) .toggle-container{width:44px;height:26px}:host(.udp-input--size-large) button{border-radius:26px}:host(.udp-input--size-large) .toggle-knob{width:22px;height:22px;top:2px;left:2px}:host(.udp-input--size-large) .toggled .toggle-knob{left:20px}.toggle-container{position:relative;display:inline-block}button{appearance:none;background-color:var(--gray-04, #ccc);width:100%;height:100%;position:relative;outline:none;border:none;cursor:pointer;transition:background-color 0.2s ease}.toggled button{background-color:var(--primary-color, #344861)}.toggle-knob{position:absolute;background-color:var(--white, #ffffff);border-radius:50%;transition:left 0.2s ease}:host(.udp-input--size-small) .label-left{margin-right:var(--spacing-02)}:host(.udp-input--size-small) .label-right{margin-left:var(--spacing-02)}:host(.udp-input--size-small) .label-bottom{margin-top:var(--spacing-02)}:host(.udp-input--size-normal) .label-left{margin-right:var(--spacing-03)}:host(.udp-input--size-normal) .label-right{margin-left:var(--spacing-03)}:host(.udp-input--size-normal) .label-bottom{margin-top:var(--spacing-03)}:host(.udp-input--size-large) .label-left{margin-right:var(--spacing-04)}:host(.udp-input--size-large) .label-right{margin-left:var(--spacing-04)}:host(.udp-input--size-large) .label-bottom{margin-top:var(--spacing-04)}.toggle-wrapper{display:flex;align-items:center}.toggle-wrapper.position-left{flex-direction:row}.toggle-wrapper.position-right{flex-direction:row}.toggle-wrapper.position-bottom{flex-direction:column;align-items:flex-start}.toggle-label{font-size:var(--caption-font-size, 0.875rem)}.label-left{margin-right:var(--spacing-03)}.label-right{margin-left:var(--spacing-03)}.label-bottom{margin-top:var(--spacing-03)}";
+
+const StencilToggle = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.toggledChange = createEvent(this, "toggledChange");
+        this.toggled = false;
+        /**
+         * Position of the label relative to the toggle switch.
+         * - 'left': Label appears to the left of the toggle (default)
+         * - 'right': Label appears to the right of the toggle
+         * - 'bottom': Label appears below the toggle
+         */
+        this.labelPosition = 'left';
+        /**
+         * Whether the toggle is disabled. Users cannot interact with the toggle when disabled.
+         */
+        this.disabled = false;
+        /**
+         * Margin spacing around the component. Affects vertical spacing in form layouts.
+         * - 'none': No margin
+         * - 'dense': Reduced margin for compact layouts
+         * - 'normal': Standard margin spacing (default)
+         */
+        this.margin = 'normal';
+        /**
+         * Size variant for the toggle component.
+         * - 'small': Smaller toggle size.
+         * - 'normal': Standard toggle size (default).
+         * - 'large': Larger toggle size.
+         */
+        this.size = 'normal';
+    }
+    /**
+     * 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 toggle state when initialValue changes
+     * (useful for form resets, dynamic initial values, etc.).
+     * @param newValue - The new initial value
+     */
+    initialValueChanged(newValue) {
+        // Update toggled when initialValue changes (for form resets, etc.)
+        if (newValue !== undefined) {
+            this.toggled = newValue === 'true' || newValue === '1' || newValue === 'on';
+        }
+    }
+    /**
+     * Watcher for the checked prop. Updates the toggle state when the checked prop changes
+     * (controlled component behavior).
+     */
+    checkedChanged() {
+        // Backward compatibility: if checked prop is set directly, use it
+        if (this.checked !== undefined && this.checked !== this.toggled) {
+            this.toggled = this.checked;
+        }
+    }
+    /**
+     * Component lifecycle method called when the component is about to load.
+     * Initializes the toggle state from either the checked prop or initialValue prop.
+     */
+    componentWillLoad() {
+        // Initialize toggled from initialValue or checked prop (backward compatibility)
+        if (this.initialValue !== undefined) {
+            this.toggled = this.initialValue === 'true' || this.initialValue === '1' || this.initialValue === 'on';
+        }
+        else {
+            this.toggled = this.checked || false;
+        }
+        if (this.error) {
+            this.errorMessage = this.error;
+        }
+        // Generate a unique ID for the toggle instance if idItem is not provided.
+        // This ensures the label's htmlFor can always link to the button's id.
+        this._internalId = `stencil-toggle-generated-${StencilToggle.S_TOGGLE_ID_COUNTER++}`;
+    }
+    /**
+     * Legacy lifecycle method - no longer needed with current state management.
+     * @deprecated This method is no longer used
+     */
+    componentWillUpdate() {
+        // Remove this since we're handling state differently now
+    }
+    /**
+     * Handles toggle button clicks and keyboard interactions.
+     * Updates internal state and emits both legacy and standard DOM events.
+     */
+    toggleButton() {
+        if (this.disabled)
+            return;
+        this.toggled = !this.toggled;
+        // Update controlled value if this is a controlled component
+        if (this.checked !== undefined) {
+            this.checked = this.toggled;
+        }
+        // Emit for backward compatibility
+        this.toggledChange.emit(this.toggled);
+        // Emit standard DOM events that stencil-field and form libraries can handle
+        const changeEvent = new CustomEvent('change', {
+            detail: this.toggled ? 'true' : 'false',
+            bubbles: true
+        });
+        this.el.dispatchEvent(changeEvent);
+        const inputEvent = new CustomEvent('input', {
+            detail: this.toggled ? 'true' : 'false',
+            bubbles: true
+        });
+        this.el.dispatchEvent(inputEvent);
+    }
+    /**
+     * Renders the toggle component with proper accessibility attributes and layout.
+     * Handles label positioning and generates unique IDs for form association.
+     */
+    render() {
+        // Use the provided idItem, id, or fall back to the internally generated ID
+        const baseId = this.idItem || this.id || this._internalId;
+        const buttonId = `${baseId}-button`;
+        const labelId = `${baseId}-label`;
+        const isError = !!this.errorMessage;
+        const labelElement = this.label && (h("label", { key: '9a97eb8c3b4fd8d76b4bcf83bc590a5abb8044d6', id: labelId, class: `toggle-label label-${this.labelPosition}`, htmlFor: !this.disabled ? buttonId : undefined }, h("unity-typography", { key: 'b1fa7f50fccc2c20ace816825cd7526bbcee021b', variant: "caption-text" }, this.label)));
+        const toggleElement = (h("div", { key: '88bec0d7084ed239893faed516d3c7d77e9a7b1a', class: `toggle-container ${this.toggled ? 'toggled' : ''}` }, h("button", { key: 'bc76124e23ed10fd4d9040caf49cd887508882d2', id: buttonId, onClick: () => this.toggleButton(), disabled: this.disabled, "aria-checked": this.toggled.toString(), "aria-labelledby": labelId, role: "switch" }, h("span", { key: '077ceef2c67fb252c4af5b38c5fd62db02adb8eb', class: "toggle-knob" }))));
+        return (h(Host, { key: '9f6df5633b9808c9bff37ebe197490bf7e362fc9', class: {
+                'udp-input': true,
+                'udp-input--error': isError,
+                'udp-input--disabled': this.disabled,
+                'udp-input--checked': this.toggled,
+                [`udp-input--margin-${this.margin}`]: true,
+                [`udp-input--size-${this.size}`]: true,
+            }, "aria-invalid": isError ? 'true' : 'false' }, h("div", { key: 'fc562798bbd32a36c1592bbf1794ca45a89f1395', class: `toggle-wrapper position-${this.labelPosition}` }, this.labelPosition === 'left' && labelElement, toggleElement, this.labelPosition === 'right' && labelElement, this.labelPosition === 'bottom' && labelElement, this.errorMessage && h("div", { key: '7681432a91cfbdd77c63d16ec74881b4d384c880', class: "error-message" }, this.errorMessage))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "error": ["updateError"],
+        "initialValue": ["initialValueChanged"],
+        "checked": ["checkedChanged"]
+    }; }
+};
+// Static counter to ensure unique IDs for generated fallbacks
+StencilToggle.S_TOGGLE_ID_COUNTER = 0;
+StencilToggle.style = stencilToggleCss;
+
+export { StencilToggle as stencil_toggle };
+//# sourceMappingURL=stencil-toggle.entry.js.map

package/dist/esm/stencil-toggle.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stencil-toggle.entry.js","sources":["src/components/my-component/UI/inputs/toggle/stencil-toggle.css?tag=stencil-toggle&encapsulation=shadow","src/components/my-component/UI/inputs/toggle/stencil-toggle.tsx"],"sourcesContent":["@import '../inputs.css';\n\n/* Size variants for toggle sizing */\n:host(.udp-input--size-small) .toggle-container {\n  width: 32px;\n  height: 18px;\n}\n\n:host(.udp-input--size-small) button {\n  border-radius: 18px;\n}\n\n:host(.udp-input--size-small) .toggle-knob {\n  width: 14px;\n  height: 14px;\n  top: 2px;\n  left: 2px;\n}\n\n:host(.udp-input--size-small) .toggled .toggle-knob {\n  left: 16px;\n}\n\n:host(.udp-input--size-normal) .toggle-container {\n  width: 38px;\n  height: 22px;\n}\n\n:host(.udp-input--size-normal) button {\n  border-radius: 22px;\n}\n\n:host(.udp-input--size-normal) .toggle-knob {\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  width: 18px;\n  height: 18px;\n}\n\n:host(.udp-input--size-normal) .toggled .toggle-knob {\n  left: 18px;\n}\n\n:host(.udp-input--size-large) .toggle-container {\n  width: 44px;\n  height: 26px;\n}\n\n:host(.udp-input--size-large) button {\n  border-radius: 26px;\n}\n\n:host(.udp-input--size-large) .toggle-knob {\n  width: 22px;\n  height: 22px;\n  top: 2px;\n  left: 2px;\n}\n\n:host(.udp-input--size-large) .toggled .toggle-knob {\n  left: 20px;\n}\n\n.toggle-container {\n  position: relative;\n  display: inline-block;\n}\n\nbutton {\n  appearance: none;\n  background-color: var(--gray-04, #ccc);\n  width: 100%;\n  height: 100%;\n  position: relative;\n  outline: none;\n  border: none;\n  cursor: pointer;\n  transition: background-color 0.2s ease;\n}\n\n.toggled button {\n  background-color: var(--primary-color, #344861);\n}\n\n.toggle-knob {\n  position: absolute;\n  background-color: var(--white, #ffffff);\n  border-radius: 50%;\n  transition: left 0.2s ease;\n}\n\n/* Size variants for label spacing */\n:host(.udp-input--size-small) .label-left {\n  margin-right: var(--spacing-02);\n}\n\n:host(.udp-input--size-small) .label-right {\n  margin-left: var(--spacing-02);\n}\n\n:host(.udp-input--size-small) .label-bottom {\n  margin-top: var(--spacing-02);\n}\n\n:host(.udp-input--size-normal) .label-left {\n  margin-right: var(--spacing-03);\n}\n\n:host(.udp-input--size-normal) .label-right {\n  margin-left: var(--spacing-03);\n}\n\n:host(.udp-input--size-normal) .label-bottom {\n  margin-top: var(--spacing-03);\n}\n\n:host(.udp-input--size-large) .label-left {\n  margin-right: var(--spacing-04);\n}\n\n:host(.udp-input--size-large) .label-right {\n  margin-left: var(--spacing-04);\n}\n\n:host(.udp-input--size-large) .label-bottom {\n  margin-top: var(--spacing-04);\n}\n\n.toggle-wrapper {\n  display: flex;\n  align-items: center;\n}\n\n.toggle-wrapper.position-left {\n  flex-direction: row;\n}\n\n.toggle-wrapper.position-right {\n  flex-direction: row;\n}\n\n.toggle-wrapper.position-bottom {\n  flex-direction: column;\n  align-items: flex-start;\n}\n\n.toggle-label {\n  font-size: var(--caption-font-size, 0.875rem);\n}\n\n.label-left {\n  margin-right: var(--spacing-03);\n}\n\n.label-right {\n  margin-left: var(--spacing-03);\n}\n\n.label-bottom {\n  margin-top: var(--spacing-03);\n}\n","import { Component, Prop, State, h, Host, Event, EventEmitter, Watch, Element } from '@stencil/core';\nimport { InputMargin, InputSize } from '../input-types';\n\n/**\n * A standardized toggle/switch component with customizable positioning and comprehensive state management.\n * Supports both controlled and uncontrolled modes with proper accessibility features and standard DOM events.\n *\n * **Toggle States:**\n * - Uses boolean internal state with string value emission for form compatibility\n * - Accepts various string formats for initial values ('true', '1', 'on')\n * - Emits string values ('true'/'false') for consistent form integration\n *\n * **Accessibility:**\n * - Proper ARIA attributes (role=\"switch\", aria-checked, aria-labelledby)\n * - Keyboard navigation support\n * - Semantic label association with htmlFor attribute\n *\n * @example\n * ```tsx\n * // Uncontrolled component with initial value\n * <stencil-toggle\n *   label=\"Enable notifications\"\n *   initialValue=\"false\"\n *   onChange={(e) => console.log('Toggled:', e.detail)}\n * />\n *\n * // Controlled component\n * <stencil-toggle\n *   label=\"Dark mode\"\n *   checked={isDarkMode}\n *   onChange={(e) => setIsDarkMode(e.detail === 'true')}\n * />\n *\n * // With custom positioning and validation\n * <stencil-toggle\n *   label=\"Accept terms\"\n *   labelPosition=\"right\"\n *   required={true}\n *   error={termsError}\n *   checked={acceptTerms}\n *   onChange={handleTermsChange}\n * />\n * ```\n */\n@Component({\n  tag: 'stencil-toggle',\n  styleUrl: 'stencil-toggle.css',\n  shadow: true,\n})\nexport class StencilToggle {\n  @Element() el: HTMLElement;\n\n  @State() toggled: boolean = false;\n\n  /**\n   * Initial value for the toggle. Used for uncontrolled components to set the default state.\n   * Accepts string values: 'true', '1', 'on' for true state, anything else for false.\n   * Only used when `checked` prop is not provided.\n   */\n  @Prop() initialValue: string;\n\n  /**\n   * Current checked state of the toggle. When provided, makes this a controlled component.\n   * The component will use this value and update it through events.\n   */\n  @Prop({ mutable: true }) checked: boolean;\n\n  /**\n   * Label text displayed next to the toggle. Used for accessibility and user guidance.\n   */\n  @Prop() label: string;\n\n  /**\n   * Position of the label relative to the toggle switch.\n   * - 'left': Label appears to the left of the toggle (default)\n   * - 'right': Label appears to the right of the toggle\n   * - 'bottom': Label appears below the toggle\n   */\n  @Prop() labelPosition: 'left' | 'right' | 'bottom' = 'left';\n\n  /**\n   * Whether the toggle is disabled. Users cannot interact with the toggle when disabled.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Legacy ID property for the toggle element. Use `id` prop instead for new implementations.\n   * @deprecated Use the standard `id` prop instead\n   */\n  @Prop() idItem: string;\n\n  /**\n   * Unique identifier for the toggle element. Used for form association and accessibility.\n   */\n  @Prop() id: string;\n\n  /**\n   * Name attribute for the toggle element. Used for form submission.\n   */\n  @Prop() name: string;\n\n  /**\n   * Error message to display below the toggle. Shows validation errors or other issues.\n   */\n  @Prop() error: string;\n\n  /**\n   * Whether the toggle is required for form submission. Adds visual indicator and validation.\n   */\n  @Prop() required: boolean;\n\n  /**\n   * Margin spacing around the component. Affects vertical spacing in form layouts.\n   * - 'none': No margin\n   * - 'dense': Reduced margin for compact layouts\n   * - 'normal': Standard margin spacing (default)\n   */\n  @Prop() margin: InputMargin = 'normal';\n\n  /**\n   * Size variant for the toggle component.\n   * - 'small': Smaller toggle size.\n   * - 'normal': Standard toggle size (default).\n   * - 'large': Larger toggle size.\n   */\n  @Prop() size: InputSize = 'normal';\n\n  @State() errorMessage: string;\n\n  /**\n   * Emitted when the toggle state changes through user interaction.\n   * Contains the new state as a string value ('true' or 'false') for form compatibility.\n   * @deprecated Use standard 'change' event instead for better integration\n   */\n  @Event() toggledChange: EventEmitter;\n\n  // Static counter to ensure unique IDs for generated fallbacks\n  private static S_TOGGLE_ID_COUNTER = 0;\n  // Internally generated ID if no idItem is provided\n  private _internalId: string;\n\n  /**\n   * Watcher for the error prop. Updates the internal error message when the error prop changes.\n   */\n  @Watch('error')\n  updateError() {\n    this.errorMessage = this.error;\n  }\n\n  /**\n   * Watcher for the initialValue prop. Updates the toggle state when initialValue changes\n   * (useful for form resets, dynamic initial values, etc.).\n   * @param newValue - The new initial value\n   */\n  @Watch('initialValue')\n  initialValueChanged(newValue: string) {\n    // Update toggled when initialValue changes (for form resets, etc.)\n    if (newValue !== undefined) {\n      this.toggled = newValue === 'true' || newValue === '1' || newValue === 'on';\n    }\n  }\n\n  /**\n   * Watcher for the checked prop. Updates the toggle state when the checked prop changes\n   * (controlled component behavior).\n   */\n  @Watch('checked')\n  checkedChanged() {\n    // Backward compatibility: if checked prop is set directly, use it\n    if (this.checked !== undefined && this.checked !== this.toggled) {\n      this.toggled = this.checked;\n    }\n  }\n\n  /**\n   * Component lifecycle method called when the component is about to load.\n   * Initializes the toggle state from either the checked prop or initialValue prop.\n   */\n  componentWillLoad() {\n    // Initialize toggled from initialValue or checked prop (backward compatibility)\n    if (this.initialValue !== undefined) {\n      this.toggled = this.initialValue === 'true' || this.initialValue === '1' || this.initialValue === 'on';\n    } else {\n      this.toggled = this.checked || false;\n    }\n\n    if (this.error) {\n      this.errorMessage = this.error;\n    }\n\n    // Generate a unique ID for the toggle instance if idItem is not provided.\n    // This ensures the label's htmlFor can always link to the button's id.\n    this._internalId = `stencil-toggle-generated-${StencilToggle.S_TOGGLE_ID_COUNTER++}`;\n  }\n\n  /**\n   * Legacy lifecycle method - no longer needed with current state management.\n   * @deprecated This method is no longer used\n   */\n  componentWillUpdate() {\n    // Remove this since we're handling state differently now\n  }\n\n  /**\n   * Handles toggle button clicks and keyboard interactions.\n   * Updates internal state and emits both legacy and standard DOM events.\n   */\n  toggleButton() {\n    if (this.disabled) return;\n\n    this.toggled = !this.toggled;\n\n    // Update controlled value if this is a controlled component\n    if (this.checked !== undefined) {\n      this.checked = this.toggled;\n    }\n\n    // Emit for backward compatibility\n    this.toggledChange.emit(this.toggled);\n\n    // Emit standard DOM events that stencil-field and form libraries can handle\n    const changeEvent = new CustomEvent('change', {\n      detail: this.toggled ? 'true' : 'false',\n      bubbles: true\n    });\n    this.el.dispatchEvent(changeEvent);\n\n    const inputEvent = new CustomEvent('input', {\n      detail: this.toggled ? 'true' : 'false',\n      bubbles: true\n    });\n    this.el.dispatchEvent(inputEvent);\n  }\n\n  /**\n   * Renders the toggle component with proper accessibility attributes and layout.\n   * Handles label positioning and generates unique IDs for form association.\n   */\n  render() {\n    // Use the provided idItem, id, or fall back to the internally generated ID\n    const baseId = this.idItem || this.id || this._internalId;\n    const buttonId = `${baseId}-button`;\n    const labelId = `${baseId}-label`;\n    const isError = !!this.errorMessage;\n\n    const labelElement = this.label && (\n      <label id={labelId} class={`toggle-label label-${this.labelPosition}`} htmlFor={!this.disabled ? buttonId : undefined}>\n        <unity-typography variant=\"caption-text\">{this.label}</unity-typography>\n      </label>\n    );\n\n    const toggleElement = (\n      <div class={`toggle-container ${this.toggled ? 'toggled' : ''}`}>\n        <button\n          id={buttonId}\n          onClick={() => this.toggleButton()}\n          disabled={this.disabled}\n          aria-checked={this.toggled.toString()}\n          aria-labelledby={labelId}\n          role=\"switch\"\n        >\n          <span class=\"toggle-knob\"></span>\n        </button>\n      </div>\n    );\n\n    return (\n      <Host\n        class={{\n          'udp-input': true,\n          'udp-input--error': isError,\n          'udp-input--disabled': this.disabled,\n          'udp-input--checked': this.toggled,\n          [`udp-input--margin-${this.margin}`]: true,\n          [`udp-input--size-${this.size}`]: true,\n        }}\n        aria-invalid={isError ? 'true' : 'false'}\n      >\n        <div class={`toggle-wrapper position-${this.labelPosition}`}>\n          {this.labelPosition === 'left' && labelElement}\n          {toggleElement}\n          {this.labelPosition === 'right' && labelElement}\n          {this.labelPosition === 'bottom' && labelElement}\n          {this.errorMessage && <div class=\"error-message\">{this.errorMessage}</div>}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/text-field.udp-selector.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-field.udp-selector.entry.js","sources":["src/components/my-component/UI/inputs/text-field/text-field.css?tag=text-field&encapsulation=shadow","src/components/my-component/UI/inputs/text-field/text-field.tsx","src/components/my-component/UI/inputs/udp-selector/udp-selector.css?tag=udp-selector&encapsulation=shadow","src/components/my-component/UI/inputs/udp-selector/udp-selector.tsx"],"sourcesContent":["@import '../inputs.css';","import {\n  Component,\n  Prop,\n  h,\n  Host,\n  State,\n  Watch,\n  Event,\n  EventEmitter,\n  Element,\n} from '@stencil/core';\nimport { InputSize, InputMargin } from '../input-types';\n\n/**\n * A standardized text input field component with error handling, validation, and custom styling.\n * Supports both controlled and uncontrolled modes with proper event emission for integration\n * with form libraries and custom event handlers.\n *\n * @example\n * ```tsx\n * // Uncontrolled component with initial value\n * <text-field\n *   placeholder=\"Enter your name\"\n *   initialValue=\"John Doe\"\n *   onChange={(e) => console.log('Final value:', e.detail)}\n * />\n *\n * // Controlled component\n * <text-field\n *   placeholder=\"Enter your name\"\n *   value={nameValue}\n *   onChange={(e) => setNameValue(e.detail)}\n * />\n *\n * // With validation and error handling\n * <text-field\n *   label=\"Email Address\"\n *   placeholder=\"user@example.com\"\n *   required={true}\n *   error={emailError}\n *   value={email}\n *   onChange={handleEmailChange}\n * />\n * ```\n */\n@Component({\n  tag: 'text-field',\n  styleUrl: 'text-field.css',\n  shadow: true,\n})\nexport class TextField {\n  @Element() el: HTMLElement;\n\n  /**\n   * Unique identifier for the input element. Used for form association and accessibility.\n   */\n  @Prop() id: string;\n\n  /**\n   * Label text displayed above the input field. Used for accessibility and user guidance.\n   */\n  @Prop() label: string;\n\n  /**\n   * Placeholder text shown when the input is empty. Provides hints about expected input format.\n   */\n  @Prop() placeholder: string;\n\n  /**\n   * Whether the field is required for form submission. Adds visual indicator (*) and validation.\n   */\n  @Prop() required: boolean;\n\n  /**\n   * Whether the field is read-only. Users can see the value but cannot modify it.\n   */\n  @Prop() readonly: boolean;\n\n  /**\n   * Whether the field is disabled. Users cannot interact with the field.\n   */\n  @Prop() disabled: boolean;\n\n  /**\n   * Minimum number of characters required in the input. Enforces minimum character limits.\n   */\n  @Prop() minCharacter: number;\n\n  /**\n   * Maximum number of characters allowed in the input. Enforces character limits.\n   */\n  @Prop() maxCharacter: number;\n\n  /**\n   * Current value of the input field. When provided, makes this a controlled component.\n   * The component will use this value and update it through events.\n   */\n  @Prop({ mutable: true }) value: string;\n\n  /**\n   * Initial value for the input field. Used for uncontrolled components to set the default value.\n   * Only used when `value` prop is not provided.\n   */\n  @Prop() initialValue: string;\n\n  /**\n   * Whether the field should be hidden from display while maintaining form functionality.\n   */\n  @Prop() hidden: boolean;\n\n  /**\n   * Error message to display below the input field. Shows validation errors or other issues.\n   */\n  @Prop() error: string = '';\n\n  /**\n   * Input mode hint for mobile keyboards. Optimizes keyboard layout for specific input types.\n   * Common values: 'text', 'email', 'tel', 'url', 'numeric', 'decimal', 'search'\n   */\n  @Prop() inputMode: string;\n\n  /**\n   * Size variant controlling the padding and spacing of the input.\n   * - 'small': Compact spacing for data-heavy interfaces\n   * - 'normal': Standard spacing (default)\n   * - 'large': Generous spacing for accessibility\n   */\n  @Prop() size: InputSize = 'normal';\n\n  /**\n   * Margin variant for the input spacing.\n   * - 'none': No margin\n   * - 'dense': Minimal margin spacing\n   * - 'normal': Standard margin spacing (default)\n   */\n  @Prop() margin: InputMargin = 'normal';\n\n  /**\n   * Internal error message state. Manages display of validation errors.\n   * @internal\n   */\n  @State() errorMessage: string;\n\n  /**\n   * Internal value state. Manages the current input value independently of props.\n   * @internal\n   */\n  @State() internalValue: string;\n\n  /**\n   * Emitted when the text field value changes (on blur, enter, etc.).\n   * Provides the final committed value when user finishes editing.\n   *\n   * @event change\n   * @param {string} value - The current value of the text field\n   *\n   * @example\n   * ```tsx\n   * <text-field onChange={(e) => handleValueChange(e.detail)} />\n   * ```\n   */\n  @Event() change: EventEmitter<string>;\n\n  /**\n   * Emitted when validation errors occur (e.g., character length outside min/max constraints).\n   * Contains the error message string. Empty string indicates no error.\n   */\n  @Event({\n    eventName: 'error',\n    bubbles: true,\n    composed: true,\n    cancelable: true\n  }) errorEvent: EventEmitter<string>;\n\n  /**\n   * Updates the error message when the error prop changes.\n   * @internal\n   */\n  @Watch('error')\n  updateError() {\n    this.errorMessage = this.error;\n  }\n\n  /**\n   * Updates the internal value when initialValue prop changes.\n   * Only updates if current value is empty to avoid overriding user input.\n   * @internal\n   */\n  @Watch('initialValue')\n  updateInitialValue() {\n    // Only update if we don't have a value yet or if explicitly resetting\n    if (this.internalValue === '' || this.internalValue === undefined) {\n      this.internalValue = this.initialValue || '';\n    }\n  }\n\n  /**\n   * Updates the internal value when value prop changes.\n   * For controlled components, the value prop takes precedence.\n   * @internal\n   */\n  @Watch('value')\n  updateValue() {\n    // If value prop is provided, this is a controlled component\n    if (this.value !== undefined) {\n      this.internalValue = this.value;\n    }\n  }\n\n  /**\n   * Validates the text value against min/max character constraints\n   * @param value - The text value to validate\n   * @returns Error message if invalid, empty string if valid\n   */\n  private validateCharacterLength(value: string): string {\n    if (!value) return '';\n\n    const length = value.length;\n\n    if (this.minCharacter && length < this.minCharacter) {\n      return `Must be at least ${this.minCharacter} characters`;\n    }\n\n    if (this.maxCharacter && length > this.maxCharacter) {\n      return `Must be no more than ${this.maxCharacter} characters`;\n    }\n\n    return '';\n  }\n\n  /**\n   * Sets error state and dispatches error event that bubbles to stencil-field\n   * @param errorMessage - The error message to set and dispatch\n   */\n  private setAndDispatchError(errorMessage: string) {\n    console.log('Setting text field error:', errorMessage);\n\n    // Update internal error state\n    this.errorMessage = errorMessage;\n\n    // Emit Stencil error event\n    this.errorEvent.emit(errorMessage);\n\n    // Dispatch custom error event that bubbles up to stencil-field\n    const errorEvent = new CustomEvent('error', {\n      detail: errorMessage,\n      bubbles: true,\n      composed: true\n    });\n    this.el.dispatchEvent(errorEvent);\n  }\n\n  /**\n   * Component lifecycle method. Initializes error message and internal value.\n   * @internal\n   */\n  componentWillLoad() {\n    // Initialize error message\n    if (this.error) {\n      this.errorMessage = this.error;\n    }\n    // Initialize value: use value prop if provided (controlled), otherwise use initialValue (uncontrolled)\n    this.internalValue = this.value !== undefined ? this.value : (this.initialValue || '');\n\n    // Validate the initial value\n    if (this.internalValue) {\n      const validationError = this.validateCharacterLength(this.internalValue);\n      if (validationError) {\n        this.setAndDispatchError(validationError);\n      }\n    }\n  }\n\n  /**\n   * Handles input events (real-time typing). Updates internal state and emits input event.\n   * For controlled components, also updates the value prop.\n   * @param event - The native input event\n   * @internal\n   */\n  private onInput = (event: InputEvent) => {\n    if (this.readonly) {\n      // Prevent typing if the field is read-only\n      const input = event.target as HTMLInputElement;\n      input.value = this.internalValue;\n      return;\n    }\n    const newValue = (event.target as HTMLInputElement).value;\n    this.internalValue = newValue; // Update internal state\n\n    // If this is a controlled component (value prop provided), update the value prop\n    if (this.value !== undefined) {\n      this.value = newValue;\n    }\n\n    // Re-evaluate validation on input if there's currently an error\n    // This provides immediate feedback when user corrects the error\n    if (this.errorMessage) {\n      const validationError = this.validateCharacterLength(newValue);\n\n      if (validationError !== this.errorMessage) {\n        // Error state has changed, update it\n        this.setAndDispatchError(validationError);\n      }\n    }\n  }\n\n  /**\n   * Handles change events (committed changes on blur/enter). Emits change event.\n   * @param event - The native change event\n   * @internal\n   */\n  private onChange = (event: Event) => {\n    if (this.readonly) {\n      return;\n    }\n    const newValue = (event.target as HTMLInputElement).value;\n\n    // Validate the new value for character length constraints\n    const validationError = this.validateCharacterLength(newValue);\n\n    if (validationError) {\n      // Character length validation failed\n      this.setAndDispatchError(validationError);\n    } else {\n      // Character length validation passed, clear any existing error\n      this.setAndDispatchError('');\n    }\n\n    // Emit change event when user finishes editing (blur, enter, etc.)\n    this.change.emit(newValue);\n  }\n\n  render() {\n    const isError = !!this.errorMessage;\n\n    const inputClass = {\n      'bx--text-input': true,\n      'bx--text-input--error': isError,\n      'bx--text-input:user-invalid': isError,\n      'text-field--disabled': this.disabled,\n    };\n    return (\n      <Host\n        class={{\n          'udp-input': true,\n          'udp-input--error': isError,\n          'udp-input--disabled': this.disabled,\n          'udp-input--readonly': this.readonly,\n          'udp-input--required': this.required,\n          [`udp-input--size-${this.size}`]: true,\n          [`udp-input--margin-${this.margin}`]: true,\n        }}\n        aria-invalid={isError ? 'true' : 'false'}\n        aria-required={this.required ? 'true' : 'false'}\n      >\n        <div class=\"bx--form-item\">\n          <unity-typography variant=\"caption-text\">\n            <label htmlFor={this.id} class=\"bx--label\">\n              {this.label}\n              {this.required ? '*' : ''}\n            </label>\n          </unity-typography>\n          {this.hidden ? (\n            <input id={this.id} type=\"hidden\" value={this.internalValue} />\n          ) : (\n            <input\n              id={this.id}\n              type=\"text\"\n              class={{ ...inputClass }}\n              placeholder={this.placeholder}\n              value={this.internalValue}\n              required={this.required}\n              disabled={this.disabled}\n              readonly={this.readonly}\n              maxLength={this.maxCharacter}\n              inputMode={this.inputMode}\n              onInput={this.onInput}\n              onChange={this.onChange}\n              //@ts-ignore\n              udprecordid={'udpRecord-text-field-' + this.id}\n            />\n          )}\n          {isError && (\n            <div class=\"error-message\">\n              <unity-typography variant=\"caption-text\" color=\"error\">{this.errorMessage}</unity-typography>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n","@import '../inputs.css';\n\n/* UDP Selector specific styles */\n\n/* Size variants for selector */\n:host(.udp-input--size-small) .selected-option {\n  padding: var(--spacing-02);\n  padding-bottom: 6px;\n  font-size: var(--caption-font-size, 0.875rem);\n}\n\n:host(.udp-input--size-normal) .selected-option {\n  padding: var(--spacing-03);\n  padding-bottom: 9px;\n  font-size: var(--body-font-size);\n}\n\n:host(.udp-input--size-large) .selected-option {\n  padding: var(--spacing-04);\n  padding-bottom: 12px;\n  font-size: var(--body-font-size);\n}\n\n.selected-option {\n  border: none;\n  border-bottom: var(--underline-standard) solid var(--input-underline-color, var(--gray-08));\n  box-sizing: border-box;\n  cursor: pointer;\n  background-color: var(--input-background);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: var(--spacing-03);\n  padding-bottom: 9px;\n  width: 100%;\n  font-size: var(--body-font-size);\n  font-family: var(--font-family);\n  transition: border-bottom-color 0.15s ease-in-out;\n}\n\n.selected-option:active,\n.selected-option:focus,\n.selected-option.focused {\n  outline: none;\n  border-bottom-color: var(--input-underline-color-focus, var(--primary-color));\n  border-bottom-width: 2px;\n}\n\n/* Error state for selector */\n:host(.udp-input--error) .selected-option,\n:host(.udp-input--error) .selected-option:focus,\n:host(.udp-input--error) .selected-option:active,\n:host(.udp-input--error) .selected-option.focused {\n  border-bottom-color: var(--input-underline-color-error, var(--error-color-main)) !important;\n}\n\n/* Disabled state for selector */\n:host(.udp-input--disabled) .selected-option {\n  border-bottom-color: var(--input-underline-color-disabled, var(--gray-08));\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n.selected-option-label {\n  flex-grow: 1;\n  color: var(--ag-foreground-color, #000);\n}\n\n.selected-option-label.placeholder {\n  color: var(--placeholder-color, #999);\n}\n\n.udp-selector--large .selected-option {\n  background-color: var(--gray-08);\n  color: white;\n  width: 60px;\n  padding: var(--spacing-05);\n  box-shadow: var(--elevation-08);\n  width: 100px;\n  border-radius: 50px;\n  font-size: var(--body-font-size);\n}\n\n.arrow {\n  position: relative;\n  display: inline-block;\n  width: 10px;\n  height: 5px;\n}\n\n.arrow::before,\n.arrow::after {\n  content: '';\n  position: absolute;\n  bottom: 0;\n  width: 0.6em;\n  height: 10px;\n  border-bottom: var(--underline-standard) solid var(--gray-09);\n}\n\n.udp-selector--large .selected-option .arrow::before,\n.udp-selector--large .selected-option .arrow::after {\n  border-bottom: 1px solid white;\n}\n\n.arrow::before {\n  left: -0.1em;\n  transform: rotate(-45deg);\n}\n\n.arrow::after {\n  /* left: 0.5em; */\n  transform: rotate(45deg);\n}\n\n.udp-selector__container {\n  position: relative;\n}\n\n.options-list {\n  max-width: 100%;\n  border: none;\n  margin: 4px 0 0 0;\n  padding: 0;\n  list-style: none;\n  z-index: 9999;\n  max-height: 150px;\n  overflow-y: auto;\n  overflow-x: hidden;\n  border-radius: var(--border-radius);\n  box-shadow: var(--elevation-08);\n  position: absolute;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.options-list li {\n  position: relative;\n  padding: 10px;\n  cursor: pointer;\n  background-color: var(--input-background);\n}\n\n.options-list li:hover {\n  background-color: var(--primary-color);\n  color: white;\n}\n","import { Component, Prop, State, h, Watch, Element, Listen, Host } from '@stencil/core';\nimport { createPopper, Instance as PopperInstance } from '@popperjs/core';\nimport { InputSize, InputMargin } from '../input-types';\n\n/**\n * A standardized selector component with single/multi-select support and various display options.\n * Supports both controlled and uncontrolled modes.\n *\n * This component emits a custom `change` event with the committed value and also\n * propagates standard DOM events like `input`, `focus`, and `blur` from the\n * underlying input element.\n *\n * @example\n * ```tsx\n * // Uncontrolled component with initial selection\n * <udp-selector\n *   options={[{ value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2' } ]}\n *   initialValue=\"1\"\n *   label=\"Select an option\"\n *   onChange={(e) => console.log('Selected:', e.detail)}\n * />\n *\n * // Controlled component with multi-select\n * <udp-selector\n *   options={[{ value: 'a', label: 'Apple' }, { value: 'b', label: 'Banana' } ]}\n *   value={selectedFruits}\n *   multiSelect={true}\n *   label=\"Select fruits\"\n *   onChange={(e) => setSelectedFruits(e.detail)}\n * />\n *\n * // With validation and density\n * <udp-selector\n *   options={[{ value: 'x', label: 'X-ray' }, { value: 'y', label: 'Yacht' } ]}\n *   label=\"Choose type\"\n *   required={true}\n *   error={selectionError}\n *   density=\"dense\"\n *   onChange={handleTypeChange}\n * />\n * ```\n */\n@Component({\n  tag: 'udp-selector',\n  styleUrl: 'udp-selector.css',\n  shadow: true,\n})\nexport class UdpSelector {\n  @Element() el: HTMLElement;\n\n  /**\n   * Array of options to display in the selector. Each option should be an object with `value` and `label` properties.\n   */\n  @Prop() options: Array<{ value: string; label: string }> = [];\n\n  /**\n   * Initial value for the selector. Used for uncontrolled components to set the default selection.\n   * For multi-select, use comma-separated values (e.g., \"1,2,3\").\n   * Only used when `value` prop is not provided.\n   */\n  @Prop() initialValue: string;\n\n  /**\n   * Current value of the selector. When provided, makes this a controlled component.\n   * For multi-select, use comma-separated values (e.g., \"1,2,3\").\n   * The component will use this value and update it through events.\n   */\n  @Prop({ mutable: true }) value: string;\n\n  /**\n   * Whether the selector should display in a large style.\n   */\n  @Prop() large: boolean = false;\n\n  /**\n   * Whether multiple items can be selected. When false, only one item can be selected at a time.\n   */\n  @Prop() multiSelect: boolean = false;\n\n  /**\n   * Name attribute for form submission. Used for form data collection.\n   */\n  @Prop() name: string;\n\n  /**\n   * Label text displayed above the selector. Used for accessibility and user guidance.\n   */\n  @Prop() label: string;\n\n  /**\n   * Error message to display below the selector. Shows validation errors or other issues.\n   */\n  @Prop() error: string;\n\n  /**\n   * Whether the field is required for form submission. Adds validation behavior.\n   */\n  @Prop() required: boolean;\n\n  /**\n   * Unique identifier for the selector element. Used for form association and accessibility.\n   */\n  @Prop() id: string;\n\n  /**\n   * Whether the selector is disabled. Users cannot interact with the selector when disabled.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether the selector is in a read-only state. Users can see the value but cannot modify it.\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * Size variant controlling the padding and spacing of the selector.\n   * - 'small': Compact spacing for data-heavy interfaces\n   * - 'normal': Standard spacing (default)\n   * - 'large': Generous spacing for accessibility\n   */\n  @Prop() size: InputSize = 'normal';\n\n  /**\n   * Margin variant for the input spacing.\n   * - 'none': No margin\n   * - 'dense': Minimal margin spacing\n   * - 'normal': Standard margin spacing (default)\n   */\n  @Prop() margin: InputMargin = 'normal';\n\n  /**\n   * Internal state to control the visibility of the dropdown options.\n   * @internal\n   */\n  @State() isOpen = false;\n\n  /**\n   * Internal state to manage selected options for multi-select mode.\n   * @internal\n   */\n  @State() selectedOptions: Array<{ value: string; label: string }> = [];\n\n  /**\n   * Internal state to manage the selected option for single-select mode.\n   * @internal\n   */\n  @State() selectedOption: { value: string; label: string } | null = null;\n\n  /**\n   * Internal error message state. Manages display of validation errors.\n   * @internal\n   */\n  @State() errorMessage: string;\n\n  private popperInstance: PopperInstance;\n\n  /**\n   * Updates the error message when the error prop changes.\n   * @internal\n   */\n  @Watch('error')\n  updateError() {\n    this.errorMessage = this.error;\n  }\n\n  /**\n   * Updates the selection when the `initialValue` prop changes.\n   * @param newValue - The new initial value.\n   * @internal\n   */\n  @Watch('initialValue')\n  initialValueChanged(newValue: string) {\n    if (newValue !== undefined) {\n      this.setSelectionFromValue(newValue);\n    }\n  }\n\n  /**\n   * Updates the selection when the `value` prop changes.\n   * @internal\n   */\n  @Watch('value')\n  valueChanged() {\n    if (this.value !== undefined) {\n      this.setSelectionFromValue(this.value);\n    }\n  }\n\n  /**\n   * Handles clicks outside the component to close the dropdown.\n   * @param event - The mouse event.\n   * @internal\n   */\n  @Listen('click', { target: 'document' })\n  handleClickOutside(event: MouseEvent) {\n    if (this.isOpen && !event.composedPath().includes(this.el)) {\n      this.isOpen = false;\n    }\n  }\n\n  /**\n   * Component lifecycle method. Initializes error message and selection state.\n   * @internal\n   */\n  componentWillLoad() {\n    if (this.error) {\n      this.errorMessage = this.error;\n    }\n\n    const initValue = this.initialValue || this.value;\n    if (initValue) {\n      this.setSelectionFromValue(initValue);\n    }\n  }\n\n  /**\n   * Component lifecycle method. Destroys the Popper.js instance when the component is removed from the DOM.\n   * @internal\n   */\n  disconnectedCallback() {\n    this.destroyPopper();\n  }\n\n  /**\n   * Handles the blur event on the selector. Delays closing the dropdown to allow option clicks.\n   * @internal\n   */\n  handleBlur = () => {\n    setTimeout(() => {\n      this.isOpen = false;\n    }, 200);\n  };\n\n  /**\n   * Prevents the blur event on the main input when an option is clicked.\n   * @param event - The mouse event.\n   * @internal\n   */\n  handleOptionMouseDown = (event: MouseEvent) => {\n    event.preventDefault();\n  };\n\n  /**\n   * Watches for changes in the `isOpen` state and sets up/destroys the Popper.js instance accordingly.\n   * @param isOpen - The new state of `isOpen`.\n   * @internal\n   */\n  @Watch('isOpen')\n  handleOpenChange(isOpen: boolean) {\n    if (isOpen) {\n      requestAnimationFrame(() => this.setupPopper());\n    } else {\n      this.destroyPopper();\n    }\n  }\n\n  /**\n   * Toggles the visibility of the dropdown options.\n   * @internal\n   */\n  toggleDropdown() {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n    this.isOpen = !this.isOpen;\n  }\n\n  /**\n   * Sets up the Popper.js instance for positioning the dropdown.\n   * @internal\n   */\n  setupPopper() {\n    const referenceEl = this.el.shadowRoot.querySelector('.selected-option');\n    const popperEl = this.el.shadowRoot.querySelector('.options-list');\n\n    if (referenceEl && popperEl) {\n      this.popperInstance = createPopper(referenceEl, popperEl as HTMLElement, {\n        strategy: 'fixed',\n        placement: 'bottom-start',\n        modifiers: [\n          {\n            name: 'offset',\n            options: {\n              offset: [0, 4],\n            },\n          },\n          {\n            name: 'preventOverflow',\n            options: {\n              padding: 8,\n            },\n          },\n          {\n            name: 'flip',\n          },\n          {\n            name: 'sameWidth',\n            enabled: true,\n            phase: 'beforeWrite',\n            requires: ['computeStyles'],\n            fn: ({ state }) => {\n              state.styles.popper.width = `${state.rects.reference.width}px`;\n            },\n          },\n        ],\n      });\n    }\n  }\n\n  /**\n   * Destroys the Popper.js instance.\n   * @internal\n   */\n  destroyPopper() {\n    if (this.popperInstance) {\n      this.popperInstance.destroy();\n      this.popperInstance = null;\n    }\n  }\n\n  /**\n   * Sets the selected option(s) based on a provided value string.\n   * @param value - The value string (comma-separated for multi-select).\n   * @internal\n   */\n  setSelectionFromValue(value: string) {\n    if (!value || this.options.length === 0) {\n      if (this.multiSelect) {\n        this.selectedOptions = [];\n      } else {\n        this.selectedOption = null;\n      }\n      return;\n    }\n\n    if (this.multiSelect) {\n      const values = value.split(',').map(v => v.trim()).filter(v => v);\n      this.selectedOptions = this.options.filter(option => values.includes(option.value));\n    } else {\n      const option = this.options.find(opt => opt.value === value);\n      this.selectedOption = option || null;\n    }\n  }\n\n  /**\n   * Re-applies the current selection when the `options` prop changes.\n   * @internal\n   */\n  @Watch('options')\n  optionsChanged() {\n    const currentValue = this.multiSelect\n      ? this.selectedOptions.map(option => option.value).join(',')\n      : this.selectedOption?.value || '';\n\n    if (currentValue) {\n      this.setSelectionFromValue(currentValue);\n    }\n  }\n\n  /**\n   * Handles the selection of an option from the dropdown.\n   * @param option - The selected option object.\n   * @internal\n   */\n  selectOption(option: { value: string; label: string }) {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    if (this.multiSelect) {\n      const isSelected = this.selectedOptions.some(selected => selected.value === option.value);\n      if (isSelected) {\n        this.selectedOptions = this.selectedOptions.filter(selected => selected.value !== option.value);\n      } else {\n        this.selectedOptions = [...this.selectedOptions, option];\n      }\n    } else {\n      this.selectedOption = option;\n      this.isOpen = false;\n    }\n\n    this.updateValueProp();\n    this.emitSelectedOptions();\n\n    const selectedOptionIndex = this.options.findIndex(opt => opt.value === option.value);\n    if (selectedOptionIndex !== -1) {\n      const selectedOptionElement = document.querySelector(`.options-list li:nth-child(${selectedOptionIndex + 1})`);\n      if (selectedOptionElement) {\n        selectedOptionElement.classList.toggle('selected');\n      }\n    }\n  }\n\n  /**\n   * Updates the mutable `value` prop to reflect the current selection.\n   * @internal\n   */\n  updateValueProp() {\n    if (this.multiSelect) {\n      this.value = this.selectedOptions.map(option => option.value).join(',');\n    } else {\n      this.value = this.selectedOption ? this.selectedOption.value : '';\n    }\n  }\n\n  /**\n   * Emits custom `change` and `input` events with the current selection.\n   * @event change\n   * @event input\n   * @param {string} value - The current selected value(s), comma-separated for multi-select.\n   * @internal\n   */\n  emitSelectedOptions() {\n    let standardValue;\n\n    if (this.multiSelect) {\n      standardValue = this.selectedOptions.map(option => option.value).join(',');\n    } else {\n      standardValue = this.selectedOption ? this.selectedOption.value : '';\n    }\n\n    const changeEvent = new CustomEvent('change', {\n      detail: standardValue,\n      bubbles: true,\n      composed: true\n    });\n    this.el.dispatchEvent(changeEvent);\n\n    const inputEvent = new CustomEvent('input', {\n      detail: standardValue,\n      bubbles: true,\n      composed: true\n    });\n    this.el.dispatchEvent(inputEvent);\n  }\n\n  /**\n   * Renders the UDP Selector component.\n   * @returns JSX element.\n   * @internal\n   */\n  render() {\n    const isError = !!this.errorMessage;\n\n    const selectedOptionClasses = {\n      'selected-option': true,\n      'focused': this.isOpen,\n    };\n\n    const hasSelection = this.multiSelect ? this.selectedOptions.length > 0 : !!this.selectedOption;\n\n    return (\n      <Host\n        class={{\n          'udp-input': true,\n          'udp-selector': true,\n          'udp-input--error': isError,\n          'udp-input--disabled': this.disabled,\n          'udp-input--readonly': this.readonly,\n          'udp-input--required': this.required,\n          'udp-input--large': this.large,\n          [`udp-input--size-${this.size}`]: true,\n          [`udp-input--margin-${this.margin}`]: true,\n        }}\n        aria-invalid={isError ? 'true' : 'false'}\n        aria-required={this.required ? 'true' : 'false'}\n      >\n        <div class=\"bx--form-item\">\n          {this.label && (\n            <unity-typography variant=\"caption-text\">\n              <label htmlFor={this.id} class=\"bx--label\">\n                {this.label}\n                {this.required ? '*' : ''}\n              </label>\n            </unity-typography>\n          )}\n        <div class=\"udp-selector__container\">\n          <div\n            class={selectedOptionClasses}\n            onClick={() => this.toggleDropdown()}\n            tabindex={this.disabled || this.readonly ? '-1' : '0'}\n            role=\"combobox\"\n            aria-haspopup=\"listbox\"\n            aria-expanded={this.isOpen.toString()}\n            id={'udpRecord-udp-selector-' + this.id}\n            // @ts-ignore\n            udprecordid={'udpRecord-udp-selector-' + this.id}\n          >\n            <div\n              class={{\n                'selected-option-label': true,\n                'placeholder': !hasSelection,\n              }}\n            >\n              {this.multiSelect\n                ? this.selectedOptions.length > 0\n                  ? this.selectedOptions.map(option => option.label).join(', ')\n                  : 'Select option(s)'\n                : this.selectedOption\n                ? this.selectedOption.label\n                : 'Select an option'}\n            </div>\n            {this.multiSelect && this.selectedOptions.length > 0 && <span class=\"checkmark\"></span>}\n            <div class=\"arrow\"></div>\n          </div>\n          {this.isOpen && (\n            <ul class=\"options-list\">\n              {this.options.map(option => (\n                <unity-typography variant=\"button\">\n                  <li class={this.isOptionSelected(option) ? 'selected' : ''} onClick={() => this.selectOption(option)} onMouseDown={this.handleOptionMouseDown}>\n                    {option.label}\n                    {this.isOptionSelected(option) && <span class=\"checkmark\"></span>}\n                  </li>\n                </unity-typography>\n              ))}\n            </ul>\n          )}\n        </div>\n        {this.errorMessage && (\n          <div class=\"error-message\">\n            <unity-typography variant=\"caption-text\" color=\"error\">\n              {this.errorMessage}\n            </unity-typography>\n          </div>\n        )}\n        </div>\n      </Host>\n    );\n  }\n\n  /**\n   * Checks if a given option is currently selected.\n   * @param option - The option to check.\n   * @returns True if the option is selected, false otherwise.\n   * @internal\n   */\n  isOptionSelected(option: { value: string; label: string }) {\n    if (this.multiSelect) {\n      return this.selectedOptions.some(selected => selected.value === option.value);\n    } else {\n      return this.selectedOption && this.selectedOption.value === option.value;\n    }\n  }\n}\n"],"names":[],"mappings":"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"}