udp-stencil-component-library 25.18.2-beta.1 → 25.18.2-beta.11

package/dist/components/udp-selector2.js

@@ -1,425 +1 @@
-import { p as proxyCustomElement, H, h, d as Host } from './index2.js';
-import { createPopper } from '@popperjs/core';
-import { d as defineCustomElement$1 } from './unity-typography2.js';
-
-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 = /*@__PURE__*/ proxyCustomElement(class UdpSelector extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        /**
-         * 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: 'db8d5a2fb7a711cf6ecf2c2a317cd36b9ef29500', 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: '4cb64ce38200b154d8e1f82dbc56c13849f8d655', class: "bx--form-item" }, this.label && (h("unity-typography", { key: 'b237f6f3c9e2091d96fba27389aaa365e73d1caf', variant: "caption-text" }, h("label", { key: '0dc5303a649a83a2c13f7d872db6767d1ebc786a', htmlFor: this.id, class: "bx--label" }, this.label, this.required ? '*' : ''))), h("div", { key: '4a54ebca6d891176778b083967475c9a31bba369', class: "udp-selector__container" }, h("div", { key: 'e5509c7dcfcdd1e64d9b33f5247fdd1ae87893c6', 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: '72803fb7f4add66ff314cbc18b9f72fc6dfc67f3', 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: '431d7127377c465f93412d739a345aecea7706c5', class: "checkmark" }), h("div", { key: '67cd1a08e9fb127264635fc58422ec51a1dc0eca', class: "arrow" })), this.isOpen && (h("ul", { key: '7c6e7d2afeb95dabe428a42dd9c681f3868bab3d', 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: 'b49aeab27f25ea8cb5e8de0f6ee7a4a9eb9bf91f', class: "error-message" }, h("unity-typography", { key: '9dde88c0624b5f28fd2b32c8bda364555f3fe0cd', 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 this; }
-    static get watchers() { return {
-        "error": ["updateError"],
-        "initialValue": ["initialValueChanged"],
-        "value": ["valueChanged"],
-        "isOpen": ["handleOpenChange"],
-        "options": ["optionsChanged"]
-    }; }
-    static get style() { return udpSelectorCss; }
-}, [257, "udp-selector", {
-        "options": [16],
-        "initialValue": [1, "initial-value"],
-        "value": [1025],
-        "large": [4],
-        "multiSelect": [4, "multi-select"],
-        "name": [1],
-        "label": [1],
-        "error": [1],
-        "required": [4],
-        "id": [1],
-        "disabled": [4],
-        "readonly": [4],
-        "size": [1],
-        "margin": [1],
-        "isOpen": [32],
-        "selectedOptions": [32],
-        "selectedOption": [32],
-        "errorMessage": [32]
-    }, [[4, "click", "handleClickOutside"]], {
-        "error": ["updateError"],
-        "initialValue": ["initialValueChanged"],
-        "value": ["valueChanged"],
-        "isOpen": ["handleOpenChange"],
-        "options": ["optionsChanged"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["udp-selector", "unity-typography"];
-    components.forEach(tagName => { switch (tagName) {
-        case "udp-selector":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, UdpSelector);
-            }
-            break;
-        case "unity-typography":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { UdpSelector as U, defineCustomElement as d };
-//# sourceMappingURL=udp-selector2.js.map
-
-//# sourceMappingURL=udp-selector2.js.map
+import{p as t,H as e,h as i,d as o,t as r}from"./index2.js";import{createPopper as n}from"@popperjs/core";import{d as s}from"./unity-typography2.js";const p=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.options=[],this.large=!1,this.multiSelect=!1,this.disabled=!1,this.readonly=!1,this.size="normal",this.margin="normal",this.isOpen=!1,this.selectedOptions=[],this.selectedOption=null,this.handleBlur=()=>{setTimeout((()=>{this.isOpen=!1}),200)},this.handleOptionMouseDown=t=>{t.preventDefault()}}updateError(){this.errorMessage=this.error}initialValueChanged(t){void 0!==t&&this.setSelectionFromValue(t)}valueChanged(){void 0!==this.value&&this.setSelectionFromValue(this.value)}handleClickOutside(t){this.isOpen&&!t.composedPath().includes(this.el)&&(this.isOpen=!1)}componentWillLoad(){this.error&&(this.errorMessage=this.error);const t=this.initialValue||this.value;t&&this.setSelectionFromValue(t)}disconnectedCallback(){this.destroyPopper()}handleOpenChange(t){t?requestAnimationFrame((()=>this.setupPopper())):this.destroyPopper()}toggleDropdown(){this.disabled||this.readonly||(this.isOpen=!this.isOpen)}setupPopper(){const t=this.el.shadowRoot.querySelector(".selected-option"),e=this.el.shadowRoot.querySelector(".options-list");t&&e&&(this.popperInstance=n(t,e,{strategy:"fixed",placement:"bottom-start",modifiers:[{name:"offset",options:{offset:[0,4]}},{name:"preventOverflow",options:{padding:8}},{name:"flip"},{name:"sameWidth",enabled:!0,phase:"beforeWrite",requires:["computeStyles"],fn:({state:t})=>{t.styles.popper.width=`${t.rects.reference.width}px`}}]}))}destroyPopper(){this.popperInstance&&(this.popperInstance.destroy(),this.popperInstance=null)}setSelectionFromValue(t){if(t&&0!==this.options.length)if(this.multiSelect){const e=t.split(",").map((t=>t.trim())).filter((t=>t));this.selectedOptions=this.options.filter((t=>e.includes(t.value)))}else{const e=this.options.find((e=>e.value===t));this.selectedOption=e||null}else this.multiSelect?this.selectedOptions=[]:this.selectedOption=null}optionsChanged(){var t;const e=this.multiSelect?this.selectedOptions.map((t=>t.value)).join(","):(null===(t=this.selectedOption)||void 0===t?void 0:t.value)||"";e&&this.setSelectionFromValue(e)}selectOption(t){if(this.disabled||this.readonly)return;if(this.multiSelect){const e=this.selectedOptions.some((e=>e.value===t.value));this.selectedOptions=e?this.selectedOptions.filter((e=>e.value!==t.value)):[...this.selectedOptions,t]}else this.selectedOption=t,this.isOpen=!1;this.updateValueProp(),this.emitSelectedOptions();const e=this.options.findIndex((e=>e.value===t.value));if(-1!==e){const t=document.querySelector(`.options-list li:nth-child(${e+1})`);t&&t.classList.toggle("selected")}}updateValueProp(){this.value=this.multiSelect?this.selectedOptions.map((t=>t.value)).join(","):this.selectedOption?this.selectedOption.value:""}emitSelectedOptions(){let t;t=this.multiSelect?this.selectedOptions.map((t=>t.value)).join(","):this.selectedOption?this.selectedOption.value:"";const e=new CustomEvent("change",{detail:t,bubbles:!0,composed:!0});this.el.dispatchEvent(e);const i=new CustomEvent("input",{detail:t,bubbles:!0,composed:!0});this.el.dispatchEvent(i)}render(){const t=!!this.errorMessage,e={"selected-option":!0,focused:this.isOpen},r=this.multiSelect?this.selectedOptions.length>0:!!this.selectedOption;return i(o,{key:"742c9350f4c6e7388e0b279be4e3368e7195c6a2",class:{"udp-input":!0,"udp-selector":!0,"udp-input--error":t,"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}`]:!0,[`udp-input--margin-${this.margin}`]:!0},"aria-invalid":t?"true":"false","aria-required":this.required?"true":"false"},i("div",{key:"7a1142a256ee849864add36c5ebe21df64c06e4b",class:"bx--form-item"},this.label&&i("unity-typography",{key:"91a70d41326d650420d647ef1444d08656a048c3",variant:"caption-text"},i("label",{key:"05a3628391efbcd5f4f5164fa5b83c4edcda5099",htmlFor:this.id,class:"bx--label"},this.label,this.required?"*":"")),i("div",{key:"71a6dfd4a3673aa9e94e38bcc356a911c5e7b077",class:"udp-selector__container"},i("div",{key:"a58c7df64a41a9c14e79827aad9c76acacda47cc",class:e,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,udprecordid:"udpRecord-udp-selector-"+this.id},i("div",{key:"ac15ee94572170fd0c907f969754d750b7638b12",class:{"selected-option-label":!0,placeholder:!r}},this.multiSelect?this.selectedOptions.length>0?this.selectedOptions.map((t=>t.label)).join(", "):"Select option(s)":this.selectedOption?this.selectedOption.label:"Select an option"),this.multiSelect&&this.selectedOptions.length>0&&i("span",{key:"59b861eb9d862cab4250960b4966f499199a5621",class:"checkmark"}),i("div",{key:"ac310d6628aabcc83955352b45f2c836bf99d6ee",class:"arrow"})),this.isOpen&&i("ul",{key:"c7c5b261265436d907a3dedd1d8064134e286374",class:"options-list"},this.options.map((t=>i("unity-typography",{variant:"button"},i("li",{class:this.isOptionSelected(t)?"selected":"",onClick:()=>this.selectOption(t),onMouseDown:this.handleOptionMouseDown},t.label,this.isOptionSelected(t)&&i("span",{class:"checkmark"}))))))),this.errorMessage&&i("div",{key:"34520538dfe40aee42c885f212814d29f8227fc8",class:"error-message"},i("unity-typography",{key:"31f91b038a4736e78268997b0b7e2434fea66020",variant:"caption-text",color:"error"},this.errorMessage))))}isOptionSelected(t){return this.multiSelect?this.selectedOptions.some((e=>e.value===t.value)):this.selectedOption&&this.selectedOption.value===t.value}get el(){return this}static get watchers(){return{error:[{updateError:0}],initialValue:[{initialValueChanged:0}],value:[{valueChanged:0}],isOpen:[{handleOpenChange:0}],options:[{optionsChanged:0}]}}static get style(){return':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}'}},[1,"udp-selector",{options:[16],initialValue:[1,"initial-value"],value:[1025],large:[4],multiSelect:[4,"multi-select"],name:[1],label:[1],error:[1],required:[4],id:[1],disabled:[4],readonly:[4],size:[1],margin:[1],isOpen:[32],selectedOptions:[32],selectedOption:[32],errorMessage:[32]},[[4,"click","handleClickOutside"]],{error:[{updateError:0}],initialValue:[{initialValueChanged:0}],value:[{valueChanged:0}],isOpen:[{handleOpenChange:0}],options:[{optionsChanged:0}]}]);function a(){"undefined"!=typeof customElements&&["udp-selector","unity-typography"].forEach((t=>{switch(t){case"udp-selector":customElements.get(r(t))||customElements.define(r(t),p);break;case"unity-typography":customElements.get(r(t))||s()}}))}export{p as U,a as d}

package/dist/components/udp-side-sheet.js

@@ -1,9 +1 @@
-import { U as UdpSideSheet$1, d as defineCustomElement$1 } from './udp-side-sheet2.js';
-
-const UdpSideSheet = UdpSideSheet$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { UdpSideSheet, defineCustomElement };
-//# sourceMappingURL=udp-side-sheet.js.map
-
-//# sourceMappingURL=udp-side-sheet.js.map
+import{U as s,d as e}from"./udp-side-sheet2.js";const o=s,t=e;export{o as UdpSideSheet,t as defineCustomElement}