udp-stencil-component-library 1.0.0

package/dist/components/p-BoD1tv2h.js

@@ -0,0 +1,423 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-DPon6DDX.js';
+import { createPopper } from '@popperjs/core';
+import { d as defineCustomElement$1 } from './p-DkppmXNM.js';
+
+const udpSelectorCss = ":host(.udp-input){display:block;box-sizing:border-box;position:relative}:host(.udp-form-item-wrapper){display:block;width:100%;box-sizing:border-box}:host(.udp-input--full-width){width:100%}:host(.udp-input--error){--input-border-color:var(--input-underline-color-error)}:host(.udp-input--disabled){pointer-events:none;opacity:0.5;cursor:not-allowed}:host(.udp-input--required){position:relative}:host(.udp-input--readonly){--input-background:var(--gray-02)}:host(.udp-input--hidden){display:none}:host(.udp-input--checked){--input-accent-color:var(--primary-color)}:host(.udp-input--multi-select){--list-max-height:200px}:host(.udp-input) .bx--text-input:focus{outline:none;}:host(.udp-input) .bx--form-item{margin-bottom:var(--spacing-05)}:host(.udp-input) .bx--label{display:block;margin-bottom:var(--spacing-03);color:var(--text-main);font-size:var(--caption-text-font-size);font-weight:var(--caption-text-font-weight);line-height:var(--caption-text-line-height)}@media (max-width: var(--breakpoint-xs-max)){:host(.udp-input){margin-bottom:var(--spacing-04)}:host(.udp-input) .bx--form-item{margin-bottom:var(--spacing-04)}}@media (min-width: var(--breakpoint-sm-min)){:host(.udp-input){min-height:2.5rem;}}:host(.udp-input--size-small) .bx--text-input,:host(.udp-input--size-small) textarea,:host(.udp-input--size-small) input[type=\"text\"],:host(.udp-input--size-small) input[type=\"number\"],:host(.udp-input--size-small) input[type=\"email\"],:host(.udp-input--size-small) input[type=\"password\"],:host(.udp-input--size-small) input[type=\"tel\"],:host(.udp-input--size-small) input[type=\"url\"],:host(.udp-input--size-small) input[type=\"search\"]{padding:var(--spacing-02);padding-bottom:6px;font-size:var(--caption-font-size, 0.875rem)}:host(.udp-input--size-normal) .bx--text-input,:host(.udp-input--size-normal) textarea,:host(.udp-input--size-normal) input[type=\"text\"],:host(.udp-input--size-normal) input[type=\"number\"],:host(.udp-input--size-normal) input[type=\"email\"],:host(.udp-input--size-normal) input[type=\"password\"],:host(.udp-input--size-normal) input[type=\"tel\"],:host(.udp-input--size-normal) input[type=\"url\"],:host(.udp-input--size-normal) input[type=\"search\"]{padding:var(--spacing-03);padding-bottom:9px;font-size:var(--body-font-size)}:host(.udp-input--size-large) .bx--text-input,:host(.udp-input--size-large) textarea,:host(.udp-input--size-large) input[type=\"text\"],:host(.udp-input--size-large) input[type=\"number\"],:host(.udp-input--size-large) input[type=\"email\"],:host(.udp-input--size-large) input[type=\"password\"],:host(.udp-input--size-large) input[type=\"tel\"],:host(.udp-input--size-large) input[type=\"url\"],:host(.udp-input--size-large) input[type=\"search\"]{padding:var(--spacing-04);padding-bottom:12px;font-size:var(--body-font-size)}:host(.udp-input--margin-none){margin:0}:host(.udp-input--margin-dense){margin:var(--spacing-02) 0}:host(.udp-input--margin-normal){margin:var(--spacing-03) 0}:host(.udp-input--margin-comfortable){margin:var(--spacing-04) 0}:host(.udp-input--size-small) .bx--label{margin-bottom:var(--spacing-02);font-size:var(--caption-font-size, 0.875rem)}:host(.udp-input--size-normal) .bx--label{margin-bottom:var(--spacing-03);font-size:var(--body-font-size)}:host(.udp-input--size-large) .bx--label{margin-bottom:var(--spacing-04);font-size:var(--body-font-size)}.bx--text-input,textarea,input[type=\"text\"],input[type=\"number\"],input[type=\"email\"],input[type=\"password\"],input[type=\"tel\"],input[type=\"url\"],input[type=\"search\"]{display:inline-block;padding:var(--spacing-03);padding-bottom:9px;box-sizing:border-box;border:none;font-size:var(--body-font-size);background:var(--input-background);border-bottom:var(--underline-standard) solid var(--input-underline-color, var(--gray-08));width:100%;font-family:var(--font-family);transition:border-bottom-color 0.15s ease-in-out}.bx--text-input:focus,textarea:focus,input[type=\"text\"]:focus,input[type=\"number\"]:focus,input[type=\"email\"]:focus,input[type=\"password\"]:focus,input[type=\"tel\"]:focus,input[type=\"url\"]:focus,input[type=\"search\"]:focus{border-bottom-color:var(--input-underline-color-focus, var(--primary-color));border-bottom-width:2px}.bx--text-input--error,.bx--text-input:user-invalid,:host(.udp-input--error) .bx--text-input,:host(.udp-input--error) textarea,:host(.udp-input--error) input[type=\"text\"],:host(.udp-input--error) input[type=\"number\"],:host(.udp-input--error) input[type=\"email\"],:host(.udp-input--error) input[type=\"password\"],:host(.udp-input--error) input[type=\"tel\"],:host(.udp-input--error) input[type=\"url\"],:host(.udp-input--error) input[type=\"search\"],input[type=\"text\"]:user-invalid,input[type=\"number\"]:user-invalid,input[type=\"email\"]:user-invalid,input[type=\"password\"]:user-invalid,input[type=\"tel\"]:user-invalid,input[type=\"url\"]:user-invalid,input[type=\"search\"]:user-invalid{border-bottom-color:var(--input-underline-color-error, var(--error-color-main)) !important}:host(.udp-input--disabled) .bx--text-input,:host(.udp-input--disabled) textarea,:host(.udp-input--disabled) input[type=\"text\"],:host(.udp-input--disabled) input[type=\"number\"],:host(.udp-input--disabled) input[type=\"email\"],:host(.udp-input--disabled) input[type=\"password\"],:host(.udp-input--disabled) input[type=\"tel\"],:host(.udp-input--disabled) input[type=\"url\"],:host(.udp-input--disabled) input[type=\"search\"]{border-bottom-color:var(--input-underline-color-disabled, var(--gray-08))}textarea.bx--text-input{resize:vertical;min-height:var(--spacing-08)}.bx--text-input::placeholder,textarea::placeholder,input[type=\"text\"]::placeholder,input[type=\"number\"]::placeholder,input[type=\"email\"]::placeholder,input[type=\"password\"]::placeholder,input[type=\"tel\"]::placeholder,input[type=\"url\"]::placeholder,input[type=\"search\"]::placeholder{color:var(--placeholder-color, #999);opacity:1}:host(.udp-input),:host{display:block;width:100%;box-sizing:border-box}.bx--form-item{margin-bottom:var(--spacing-05)}.bx--label{display:block;margin-bottom:var(--spacing-03)}.error-message,.bx--form-requirement,:host(.udp-input--error) .error-message,:host(.udp-input--error) .bx--form-requirement{color:var(--error-color-main, #d32f2f) !important;margin-top:var(--spacing-02);font-size:var(--caption-font-size, 0.875rem);--unity-typography-inherit-color:var(--error-color-main, #d32f2f)}.helper-text{color:var(--text-02, #525252);margin-top:var(--spacing-02);font-size:var(--caption-font-size, 0.875rem)}:host(.udp-input--disabled) .bx--text-input,:host(.udp-input--disabled) textarea,:host(.udp-input--disabled) input,:host(.udp-input--disabled){cursor:not-allowed;opacity:0.6}:host(.udp-input--readonly) .bx--text-input,:host(.udp-input--readonly) textarea,:host(.udp-input--readonly) input{background-color:var(--field-01, #f4f4f4);cursor:default}:host(.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() {
+        super();
+        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: 'e4d83b96470d0094c92b7641086b256fc82e3a73', 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: '28428ed7dcd6dec39edde6d06db7a44ea56d2038', class: "bx--form-item" }, this.label && (h("unity-typography", { key: '547eeab24dd6444cad20b2008c813841ed8ffa61', variant: "caption-text" }, h("label", { key: '0b0626ab06cdd077823d368078b922bc53b8448f', htmlFor: this.id, class: "bx--label" }, this.label, this.required ? '*' : ''))), h("div", { key: '73757edb60f5cfe33fae698f63ee7238bfe88058', class: "udp-selector__container" }, h("div", { key: '58bd22768517a76b69135fa8ca163bdc1f7b6442', class: selectedOptionClasses, onClick: () => this.toggleDropdown(), onBlur: this.handleBlur, tabindex: this.disabled || this.readonly ? '-1' : '0', role: "combobox", "aria-haspopup": "listbox", "aria-expanded": this.isOpen.toString(), id: 'udpRecord-udp-selector-' + this.id,
+            // @ts-ignore
+            udprecordid: 'udpRecord-udp-selector-' + this.id }, h("div", { key: 'e01305999f444f1c17dd24cad29d9839b673224f', 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: '766daf83f6bd8d15392437f1427ba6a63c74a077', class: "checkmark" }), h("div", { key: '97ffa630996b604a0b13ba16ce35014efb4919e6', class: "arrow" })), this.isOpen && (h("ul", { key: '770e18fea23584af7c7cf8de5e14d466a10ac0eb', 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: '284e9aa7871751f2852cea75e584ccbdb62af298', class: "error-message" }, h("unity-typography", { key: '874ada07c14df0f533df8bd3f95f206d339c0632', 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; }
+}, [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"],
+        "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=p-BoD1tv2h.js.map
+
+//# sourceMappingURL=p-BoD1tv2h.js.map

package/dist/components/p-BoD1tv2h.js.map

@@ -0,0 +1 @@
+{"file":"p-BoD1tv2h.js","mappings":";;;;AAAA,MAAM,cAAc,GAAG,04SAA04S;;MC+Cp5S,WAAW,iBAAAA,kBAAA,CAAA,MAAA,WAAA,SAAAC,CAAA,CAAA;AALxB,IAAA,WAAA,GAAA;;;;AAQE;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAA4C,EAAE;AAgB7D;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAY,KAAK;AAE9B;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAY,KAAK;AA2BpC;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAEjC;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAEjC;;;;;AAKG;AACK,QAAA,IAAI,CAAA,IAAA,GAAc,QAAQ;AAElC;;;;;AAKG;AACK,QAAA,IAAM,CAAA,MAAA,GAAgB,QAAQ;AAEtC;;;AAGG;AACM,QAAA,IAAM,CAAA,MAAA,GAAG,KAAK;AAEvB;;;AAGG;AACM,QAAA,IAAe,CAAA,eAAA,GAA4C,EAAE;AAEtE;;;AAGG;AACM,QAAA,IAAc,CAAA,cAAA,GAA4C,IAAI;AA6EvE;;;AAGG;AACH,QAAA,IAAU,CAAA,UAAA,GAAG,MAAK;YAChB,UAAU,CAAC,MAAK;AACd,gBAAA,IAAI,CAAC,MAAM,GAAG,KAAK;aACpB,EAAE,GAAG,CAAC;AACT,SAAC;AAED;;;;AAIG;AACH,QAAA,IAAA,CAAA,qBAAqB,GAAG,CAAC,KAAiB,KAAI;YAC5C,KAAK,CAAC,cAAc,EAAE;AACxB,SAAC;AAgTF;AApYC;;;AAGG;IAEH,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK;;AAGhC;;;;AAIG;AAEH,IAAA,mBAAmB,CAAC,QAAgB,EAAA;AAClC,QAAA,IAAI,QAAQ,KAAK,SAAS,EAAE;AAC1B,YAAA,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC;;;AAIxC;;;AAGG;IAEH,YAAY,GAAA;AACV,QAAA,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE;AAC5B,YAAA,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,KAAK,CAAC;;;AAI1C;;;;AAIG;AAEH,IAAA,kBAAkB,CAAC,KAAiB,EAAA;AAClC,QAAA,IAAI,IAAI,CAAC,MAAM,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AAC1D,YAAA,IAAI,CAAC,MAAM,GAAG,KAAK;;;AAIvB;;;AAGG;IACH,iBAAiB,GAAA;AACf,QAAA,IAAI,IAAI,CAAC,KAAK,EAAE;AACd,YAAA,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK;;QAGhC,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,KAAK;QACjD,IAAI,SAAS,EAAE;AACb,YAAA,IAAI,CAAC,qBAAqB,CAAC,SAAS,CAAC;;;AAIzC;;;AAGG;IACH,oBAAoB,GAAA;QAClB,IAAI,CAAC,aAAa,EAAE;;AAsBtB;;;;AAIG;AAEH,IAAA,gBAAgB,CAAC,MAAe,EAAA;QAC9B,IAAI,MAAM,EAAE;YACV,qBAAqB,CAAC,MAAM,IAAI,CAAC,WAAW,EAAE,CAAC;;aAC1C;YACL,IAAI,CAAC,aAAa,EAAE;;;AAIxB;;;AAGG;IACH,cAAc,GAAA;QACZ,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE;YAClC;;AAEF,QAAA,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM;;AAG5B;;;AAGG;IACH,WAAW,GAAA;AACT,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,kBAAkB,CAAC;AACxE,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,eAAe,CAAC;AAElE,QAAA,IAAI,WAAW,IAAI,QAAQ,EAAE;YAC3B,IAAI,CAAC,cAAc,GAAG,YAAY,CAAC,WAAW,EAAE,QAAuB,EAAE;AACvE,gBAAA,QAAQ,EAAE,OAAO;AACjB,gBAAA,SAAS,EAAE,cAAc;AACzB,gBAAA,SAAS,EAAE;AACT,oBAAA;AACE,wBAAA,IAAI,EAAE,QAAQ;AACd,wBAAA,OAAO,EAAE;AACP,4BAAA,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;AACf,yBAAA;AACF,qBAAA;AACD,oBAAA;AACE,wBAAA,IAAI,EAAE,iBAAiB;AACvB,wBAAA,OAAO,EAAE;AACP,4BAAA,OAAO,EAAE,CAAC;AACX,yBAAA;AACF,qBAAA;AACD,oBAAA;AACE,wBAAA,IAAI,EAAE,MAAM;AACb,qBAAA;AACD,oBAAA;AACE,wBAAA,IAAI,EAAE,WAAW;AACjB,wBAAA,OAAO,EAAE,IAAI;AACb,wBAAA,KAAK,EAAE,aAAa;wBACpB,QAAQ,EAAE,CAAC,eAAe,CAAC;AAC3B,wBAAA,EAAE,EAAE,CAAC,EAAE,KAAK,EAAE,KAAI;AAChB,4BAAA,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,GAAG,CAAA,EAAG,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,KAAK,IAAI;yBAC/D;AACF,qBAAA;AACF,iBAAA;AACF,aAAA,CAAC;;;AAIN;;;AAGG;IACH,aAAa,GAAA;AACX,QAAA,IAAI,IAAI,CAAC,cAAc,EAAE;AACvB,YAAA,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE;AAC7B,YAAA,IAAI,CAAC,cAAc,GAAG,IAAI;;;AAI9B;;;;AAIG;AACH,IAAA,qBAAqB,CAAC,KAAa,EAAA;QACjC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE;AACvC,YAAA,IAAI,IAAI,CAAC,WAAW,EAAE;AACpB,gBAAA,IAAI,CAAC,eAAe,GAAG,EAAE;;iBACpB;AACL,gBAAA,IAAI,CAAC,cAAc,GAAG,IAAI;;YAE5B;;AAGF,QAAA,IAAI,IAAI,CAAC,WAAW,EAAE;AACpB,YAAA,MAAM,MAAM,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC;YACjE,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,MAAM,IAAI,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;;aAC9E;AACL,YAAA,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,GAAG,CAAC,KAAK,KAAK,KAAK,CAAC;AAC5D,YAAA,IAAI,CAAC,cAAc,GAAG,MAAM,IAAI,IAAI;;;AAIxC;;;AAGG;IAEH,cAAc,GAAA;;AACZ,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC;AACxB,cAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,MAAM,IAAI,MAAM,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,GAAG;AAC3D,cAAE,CAAA,CAAA,EAAA,GAAA,IAAI,CAAC,cAAc,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,KAAK,KAAI,EAAE;QAEpC,IAAI,YAAY,EAAE;AAChB,YAAA,IAAI,CAAC,qBAAqB,CAAC,YAAY,CAAC;;;AAI5C;;;;AAIG;AACH,IAAA,YAAY,CAAC,MAAwC,EAAA;QACnD,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE;YAClC;;AAGF,QAAA,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,MAAM,UAAU,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,IAAI,QAAQ,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK,CAAC;YACzF,IAAI,UAAU,EAAE;gBACd,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,QAAQ,IAAI,QAAQ,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK,CAAC;;iBAC1F;gBACL,IAAI,CAAC,eAAe,GAAG,CAAC,GAAG,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC;;;aAErD;AACL,YAAA,IAAI,CAAC,cAAc,GAAG,MAAM;AAC5B,YAAA,IAAI,CAAC,MAAM,GAAG,KAAK;;QAGrB,IAAI,CAAC,eAAe,EAAE;QACtB,IAAI,CAAC,mBAAmB,EAAE;QAE1B,MAAM,mBAAmB,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,IAAI,GAAG,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK,CAAC;AACrF,QAAA,IAAI,mBAAmB,KAAK,EAAE,EAAE;AAC9B,YAAA,MAAM,qBAAqB,GAAG,QAAQ,CAAC,aAAa,CAAC,CAA8B,2BAAA,EAAA,mBAAmB,GAAG,CAAC,CAAG,CAAA,CAAA,CAAC;YAC9G,IAAI,qBAAqB,EAAE;AACzB,gBAAA,qBAAqB,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC;;;;AAKxD;;;AAGG;IACH,eAAe,GAAA;AACb,QAAA,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,MAAM,IAAI,MAAM,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;;aAClE;AACL,YAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,GAAG,EAAE;;;AAIrE;;;;;;AAMG;IACH,mBAAmB,GAAA;AACjB,QAAA,IAAI,aAAa;AAEjB,QAAA,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,aAAa,GAAG,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,MAAM,IAAI,MAAM,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;;aACrE;AACL,YAAA,aAAa,GAAG,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,GAAG,EAAE;;AAGtE,QAAA,MAAM,WAAW,GAAG,IAAI,WAAW,CAAC,QAAQ,EAAE;AAC5C,YAAA,MAAM,EAAE,aAAa;AACrB,YAAA,OAAO,EAAE,IAAI;AACb,YAAA,QAAQ,EAAE;AACX,SAAA,CAAC;AACF,QAAA,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,WAAW,CAAC;AAElC,QAAA,MAAM,UAAU,GAAG,IAAI,WAAW,CAAC,OAAO,EAAE;AAC1C,YAAA,MAAM,EAAE,aAAa;AACrB,YAAA,OAAO,EAAE,IAAI;AACb,YAAA,QAAQ,EAAE;AACX,SAAA,CAAC;AACF,QAAA,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,UAAU,CAAC;;AAGnC;;;;AAIG;IACH,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,YAAY;AAEnC,QAAA,MAAM,qBAAqB,GAAG;AAC5B,YAAA,iBAAiB,EAAE,IAAI;YACvB,SAAS,EAAE,IAAI,CAAC,MAAM;SACvB;QAED,MAAM,YAAY,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,eAAe,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,cAAc;QAE/F,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;AACL,gBAAA,WAAW,EAAE,IAAI;AACjB,gBAAA,cAAc,EAAE,IAAI;AACpB,gBAAA,kBAAkB,EAAE,OAAO;gBAC3B,qBAAqB,EAAE,IAAI,CAAC,QAAQ;gBACpC,qBAAqB,EAAE,IAAI,CAAC,QAAQ;gBACpC,qBAAqB,EAAE,IAAI,CAAC,QAAQ;gBACpC,kBAAkB,EAAE,IAAI,CAAC,KAAK;AAC9B,gBAAA,CAAC,mBAAmB,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;AACtC,gBAAA,CAAC,qBAAqB,IAAI,CAAC,MAAM,CAAE,CAAA,GAAG,IAAI;AAC3C,aAAA,EACa,cAAA,EAAA,OAAO,GAAG,MAAM,GAAG,OAAO,EAAA,eAAA,EACzB,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,EAAA,EAE/C,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACvB,IAAI,CAAC,KAAK,KACT,CAAkB,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,cAAc,EAAA,EACtC,CAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,IAAI,CAAC,EAAE,EAAE,KAAK,EAAC,WAAW,EAAA,EACvC,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,QAAQ,GAAG,GAAG,GAAG,EAAE,CACnB,CACS,CACpB,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,yBAAyB,EAAA,EAClC,CACE,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,qBAAqB,EAC5B,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,EACpC,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,GAAG,EACrD,IAAI,EAAC,UAAU,EACD,eAAA,EAAA,SAAS,EACR,eAAA,EAAA,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,EACrC,EAAE,EAAE,yBAAyB,GAAG,IAAI,CAAC,EAAE;;AAEvC,YAAA,WAAW,EAAE,yBAAyB,GAAG,IAAI,CAAC,EAAE,EAAA,EAEhD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,uBAAuB,EAAE,IAAI;gBAC7B,aAAa,EAAE,CAAC,YAAY;aAC7B,EAEA,EAAA,IAAI,CAAC;AACJ,cAAE,IAAI,CAAC,eAAe,CAAC,MAAM,GAAG;AAC9B,kBAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,MAAM,IAAI,MAAM,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,IAAI;AAC5D,kBAAE;cACF,IAAI,CAAC;AACP,kBAAE,IAAI,CAAC,cAAc,CAAC;kBACpB,kBAAkB,CAClB,EACL,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,eAAe,CAAC,MAAM,GAAG,CAAC,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,WAAW,EAAQ,CAAA,EACvF,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,OAAO,EAAA,CAAO,CACrB,EACL,IAAI,CAAC,MAAM,KACV,2DAAI,KAAK,EAAC,cAAc,EAAA,EACrB,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,KACtB,CAAA,CAAA,kBAAA,EAAA,EAAkB,OAAO,EAAC,QAAQ,EAAA,EAChC,CAAA,CAAA,IAAA,EAAA,EAAI,KAAK,EAAE,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,GAAG,UAAU,GAAG,EAAE,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE,WAAW,EAAE,IAAI,CAAC,qBAAqB,EAAA,EAC1I,MAAM,CAAC,KAAK,EACZ,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,IAAI,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,WAAW,GAAQ,CAC9D,CACY,CACpB,CAAC,CACC,CACN,CACG,EACL,IAAI,CAAC,YAAY,KAChB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACxB,CAAA,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAkB,OAAO,EAAC,cAAc,EAAC,KAAK,EAAC,OAAO,EAAA,EACnD,IAAI,CAAC,YAAY,CACD,CACf,CACP,CACK,CACD;;AAIX;;;;;AAKG;AACH,IAAA,gBAAgB,CAAC,MAAwC,EAAA;AACvD,QAAA,IAAI,IAAI,CAAC,WAAW,EAAE;AACpB,YAAA,OAAO,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,IAAI,QAAQ,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK,CAAC;;aACxE;AACL,YAAA,OAAO,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,cAAc,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["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';\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            onBlur={this.handleBlur}\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"],"version":3}

package/dist/components/p-BuRv3dp5.js

@@ -0,0 +1,72 @@
+import { p as proxyCustomElement, H, h } from './p-DPon6DDX.js';
+import { d as defineCustomElement$2 } from './p-DpLtIIwx.js';
+import { d as defineCustomElement$1 } from './p-DkppmXNM.js';
+
+const fluentDialogCss = ":host([open]){display:block;position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;background-color:rgba(0, 0, 0, 0.5);}.dialog-container{display:none;}.dialog-container.open{display:block;}.dialog-container{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);background-color:#fff;box-shadow:0 12px 24px rgba(0, 0, 0, 0.16), 0 12px 24px rgba(0, 0, 0, 0.23);max-width:90%;min-width:500px;overflow:hidden;z-index:10000;}.dialog-title{padding:16px;font-size:20px}.dialog-content{padding-left:16px;padding-right:16px}.dialog-actions{display:flex;justify-content:flex-end}button{margin-left:8px}.overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.5);z-index:9998}.overlay-open{display:block}.dialog-open{display:block}";
+
+const FluentDialog = /*@__PURE__*/ proxyCustomElement(class FluentDialog extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.buttonOneHidden = false;
+        this.buttonTwoHidden = false;
+        this.buttonThreeHidden = true;
+    }
+    render() {
+        return (h("div", { key: 'e46d040ad65373790c52735c5bde4c7fd8d0158e', class: { 'overlay': true, 'overlay-open': this.open } }, h("div", { key: '2e0fbf70c5e3c16662ba9452a0f474f9925785ce', class: { 'dialog-container': true, 'dialog-open': this.open } }, h("div", { key: '6f7a5197b682efb380180f04b5b210eb77a5f180', class: "dialog-title", id: this.titleId }, h("unity-typography", { key: '27e020bd8e87ee03e0555b51cf6c25dbb9705c24', variant: "h3" }, this.title)), h("div", { key: '534a6fb9c904da44de25d1d12bb3177799bc2897', class: "dialog-content" }, h("unity-typography", { key: '8acffded3c5aff289a676b6b26135f24a7430958', variant: "h6" }, this.message), h("unity-typography", { key: '03df3aae85431a6100477c163b7e47ed25bdf174', variant: "body" }, h("slot", { key: '623bdf3080e1cf9c0ec2e385093674427458d675' }))), h("div", { key: 'f102c978876f649d21905cc0eab52698b13c50a5', class: "dialog-actions" }, !this.buttonTwoHidden && (h("custom-button", { key: '18210c326eabf3dcbec3d5c17dcd2886c05c5407', size: "tall", variant: "text", onClick: () => this.actionTwo() }, this.labelTwo)), !this.buttonThreeHidden && (h("custom-button", { key: '6c96d2c5b68c9edd7c4f65983eabaa6a6a544771',
+            //class="primary-action"
+            onClick: () => this.actionThree(), size: "tall", variant: "text", disabled: this.disableThree }, this.labelThree)), !this.buttonOneHidden && (h("custom-button", { key: '3552e6fc254b54a749091a34531e5f72d5305899', class: "primary-action", variant: "text", onClick: () => this.actionOne(), size: "tall", disabled: this.disableOne }, this.labelOne))), this.progress && h("div", { key: 'd84ffbeaff3954ef638613fc8cd487cb1db25412', class: "linear-progress" }))));
+    }
+    static get style() { return fluentDialogCss; }
+}, [1, "fluent-dialog", {
+        "title": [1],
+        "message": [1],
+        "actionOne": [16, "action-one"],
+        "actionTwo": [16, "action-two"],
+        "actionThree": [16, "action-three"],
+        "labelOne": [1, "label-one"],
+        "labelTwo": [1, "label-two"],
+        "labelThree": [1, "label-three"],
+        "open": [4],
+        "handleClose": [16, "handle-close"],
+        "ariaLabelledby": [1, "aria-labelledby"],
+        "ariaDescribedby": [1, "aria-describedby"],
+        "titleId": [1, "title-id"],
+        "descriptionId": [1, "description-id"],
+        "buttonOneHidden": [4, "button-one-hidden"],
+        "buttonTwoHidden": [4, "button-two-hidden"],
+        "buttonThreeHidden": [4, "button-three-hidden"],
+        "disableOne": [4, "disable-one"],
+        "disableTwo": [4, "disable-two"],
+        "disableThree": [4, "disable-three"],
+        "progress": [2]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["fluent-dialog", "custom-button", "unity-typography"];
+    components.forEach(tagName => { switch (tagName) {
+        case "fluent-dialog":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, FluentDialog);
+            }
+            break;
+        case "custom-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "unity-typography":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { FluentDialog as F, defineCustomElement as d };
+//# sourceMappingURL=p-BuRv3dp5.js.map
+
+//# sourceMappingURL=p-BuRv3dp5.js.map

package/dist/components/p-BuRv3dp5.js.map

@@ -0,0 +1 @@
+{"file":"p-BuRv3dp5.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,oyBAAoyB;;MCO/yB,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;AALzB,IAAA,WAAA,GAAA;;;;AAoBU,QAAA,IAAe,CAAA,eAAA,GAAY,KAAK;AAChC,QAAA,IAAe,CAAA,eAAA,GAAY,KAAK;AAChC,QAAA,IAAiB,CAAA,iBAAA,GAAY,IAAI;AA+C1C;IAzCC,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,cAAc,EAAE,IAAI,CAAC,IAAI,EAAE,EAAA,EACxD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,EAAE,kBAAkB,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,CAAC,IAAI,EAAE,EAAA,EAChE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAC,EAAE,EAAE,IAAI,CAAC,OAAO,EAAA,EACxC,CAAkB,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,IAAI,EAAA,EAAE,IAAI,CAAC,KAAK,CAAoB,CAC1D,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EACzB,CAAA,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAkB,OAAO,EAAC,IAAI,IAAE,IAAI,CAAC,OAAO,CAAoB,EAChE,CAAkB,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,MAAM,EAAA,EAC9B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACS,CACf,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EACxB,CAAC,IAAI,CAAC,eAAe,KACpB,CAAA,CAAA,eAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAe,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,SAAS,EAAE,EAAA,EACtE,IAAI,CAAC,QAAQ,CACA,CACjB,EACA,CAAC,IAAI,CAAC,iBAAiB,KACtB,CAAA,CAAA,eAAA,EAAA,EAAA,GAAA,EAAA,0CAAA;;YAEE,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EACjC,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,MAAM,EACd,QAAQ,EAAE,IAAI,CAAC,YAAY,EAAA,EAE1B,IAAI,CAAC,UAAU,CACF,CACjB,EACA,CAAC,IAAI,CAAC,eAAe,KACpB,sEAAe,KAAK,EAAC,gBAAgB,EAAC,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,SAAS,EAAE,EAAE,IAAI,EAAC,MAAM,EAAC,QAAQ,EAAE,IAAI,CAAC,UAAU,EACxH,EAAA,IAAI,CAAC,QAAQ,CACA,CACjB,CACG,EACL,IAAI,CAAC,QAAQ,IAAI,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAO,CAAA,CACjD,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/my-component/UI/dialogs/fluent-dialog/fluent-dialog.css?tag=fluent-dialog&encapsulation=shadow","src/components/my-component/UI/dialogs/fluent-dialog/fluent-dialog.tsx"],"sourcesContent":["\n:host([open]) {\n    display: block;\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    z-index: 9999;\n    background-color: rgba(0, 0, 0, 0.5); /* Greyed-out background */\n  }\n\n\n.dialog-container {\n    display: none;\n    /* Additional styles for the container */\n  }\n  \n  .dialog-container.open {\n    display: block;\n    /* Additional styles for when the dialog is open */\n  }\n  \n  .dialog-container {\n    display: none; /* Hide the dialog by default */\n    position: fixed; /* Position in relation to the viewport */\n    top: 50%; /* Start at the center vertically */\n    left: 50%; /* Start at the center horizontally */\n    transform: translate(-50%, -50%); /* Shift the dialog to be truly centered */\n    background-color: #fff;\n    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.16), 0 12px 24px rgba(0, 0, 0, 0.23);\n    max-width: 90%;\n    min-width: 500px;\n    overflow: hidden;\n    z-index: 10000; /* Make sure it's above the overlay */\n  }\n  \n  \n  .dialog-title {\n    padding: 16px;\n    font-size: 20px;\n  }\n  \n  .dialog-content {\n    padding-left: 16px;\n    padding-right: 16px;\n  }\n  \n  .dialog-actions {\n    /* padding: 16px; */\n    display: flex;\n    justify-content: flex-end;\n  }\n  \n  \n  button {\n    margin-left: 8px;\n  }\n  \n\n  .overlay {\n    display: none;\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background-color: rgba(0, 0, 0, 0.5);\n    z-index: 9998;\n  }\n  \n  .overlay-open {\n    display: block;\n  }\n  \n  .dialog-open {\n    display: block;\n  }","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'fluent-dialog',\n  styleUrl: 'fluent-dialog.css',\n  shadow: true,\n})\nexport class FluentDialog {\n  @Prop() title: string;\n  @Prop() message: string;\n  @Prop() actionOne: Function;\n  @Prop() actionTwo: Function;\n  @Prop() actionThree: Function;\n  @Prop() labelOne: string;\n  @Prop() labelTwo: string;\n  @Prop() labelThree: string;\n  @Prop() open: boolean;\n  @Prop() handleClose: Function;\n  @Prop() ariaLabelledby: string;\n  @Prop() ariaDescribedby: string;\n  @Prop() titleId: string;\n  @Prop() descriptionId: string;\n  @Prop() buttonOneHidden: boolean = false;\n  @Prop() buttonTwoHidden: boolean = false;\n  @Prop() buttonThreeHidden: boolean = true;\n  @Prop() disableOne: boolean;\n  @Prop() disableTwo: boolean;\n  @Prop() disableThree: boolean;\n  @Prop() progress: number;\n\n  render() {\n    return (\n      <div class={{ 'overlay': true, 'overlay-open': this.open }}>\n        <div class={{ 'dialog-container': true, 'dialog-open': this.open }}>\n          <div class=\"dialog-title\" id={this.titleId}>\n            <unity-typography variant=\"h3\">{this.title}</unity-typography>\n          </div>\n          <div class=\"dialog-content\">\n            <unity-typography variant=\"h6\">{this.message}</unity-typography>\n            <unity-typography variant=\"body\">\n              <slot />\n            </unity-typography>\n          </div>\n          <div class=\"dialog-actions\">\n            {!this.buttonTwoHidden && (\n              <custom-button size=\"tall\" variant=\"text\" onClick={() => this.actionTwo()}>\n                {this.labelTwo}\n              </custom-button>\n            )}\n            {!this.buttonThreeHidden && (\n              <custom-button\n                //class=\"primary-action\"\n                onClick={() => this.actionThree()}\n                size=\"tall\"\n                variant=\"text\"\n                disabled={this.disableThree}\n              >\n                {this.labelThree}\n              </custom-button>\n            )}\n            {!this.buttonOneHidden && (\n              <custom-button class=\"primary-action\" variant=\"text\" onClick={() => this.actionOne()} size=\"tall\" disabled={this.disableOne}>\n                {this.labelOne}\n              </custom-button>\n            )}\n          </div>\n          {this.progress && <div class=\"linear-progress\"></div>}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-C-wDzVCk.js

@@ -0,0 +1,45 @@
+import { p as proxyCustomElement, H, h } from './p-DPon6DDX.js';
+import { d as defineCustomElement$1 } from './p-DkppmXNM.js';
+
+const udpBadgeCss = ".badge-wrapper{position:relative;display:inline-block}.badge-content{position:absolute;top:-12px;right:-8px;background-color:var(--primary-color);color:white;border-radius:50%;padding:4px;min-width:18px;text-align:center;z-index:1}";
+
+const UdpBadge = /*@__PURE__*/ proxyCustomElement(class UdpBadge extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.content = 0;
+        this.max = 99;
+    }
+    render() {
+        const displayContent = this.content > this.max ? `${this.max}+` : this.content;
+        return (h("div", { key: '362a814c5b0576477391748087e92c064404b93b', class: "badge-wrapper" }, h("slot", { key: '72b129c3bf9869991a2b6f1e415348722ceb1e20' }), h("span", { key: '498505ecaaf98902b67fcd65a6963ef36ff4c73f', class: "badge-content" }, h("unity-typography", { key: '1b2c834a121f74c058230b57ecef201e01b105b0', variant: 'caption-text' }, " ", displayContent, " "))));
+    }
+    static get style() { return udpBadgeCss; }
+}, [1, "udp-badge", {
+        "content": [2],
+        "max": [2]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["udp-badge", "unity-typography"];
+    components.forEach(tagName => { switch (tagName) {
+        case "udp-badge":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, UdpBadge);
+            }
+            break;
+        case "unity-typography":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { UdpBadge as U, defineCustomElement as d };
+//# sourceMappingURL=p-C-wDzVCk.js.map
+
+//# sourceMappingURL=p-C-wDzVCk.js.map

package/dist/components/p-C-wDzVCk.js.map

@@ -0,0 +1 @@
+{"file":"p-C-wDzVCk.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,yOAAyO;;MCQhP,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;AALrB,IAAA,WAAA,GAAA;;;;AAMU,QAAA,IAAO,CAAA,OAAA,GAAW,CAAC;AACnB,QAAA,IAAG,CAAA,GAAA,GAAW,EAAE;AAgBzB;IAdC,MAAM,GAAA;QACJ,MAAM,cAAc,GAClB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,GAAG,CAAG,EAAA,IAAI,CAAC,GAAG,CAAG,CAAA,CAAA,GAAG,IAAI,CAAC,OAAO;AAEzD,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,eAAe,EAAA,EACxB,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACb,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACvB,CAAkB,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,cAAc,EAAA,OAAI,cAAc,MAAqB,CAE5E,CACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/my-component/UI/data-display/badge/udp-badge.css?tag=udp-badge&encapsulation=shadow","src/components/my-component/UI/data-display/badge/udp-badge.tsx"],"sourcesContent":[".badge-wrapper {\n    position: relative;\n    display: inline-block;\n  }\n  \n  .badge-content {\n    position: absolute;\n    top: -12px;\n    right: -8px;\n    background-color: var(--primary-color);\n    color: white;\n    border-radius: 50%;\n    padding: 4px;\n    min-width: 18px;\n    text-align: center;\n    z-index: 1;\n  }\n  ","import { Component, h, Prop } from '@stencil/core';\nimport './udp-badge.css';\n\n@Component({\n  tag: 'udp-badge',\n  styleUrl: 'udp-badge.css',\n  shadow: true,\n})\nexport class UdpBadge {\n  @Prop() content: number = 0;\n  @Prop() max: number = 99;\n\n  render() {\n    const displayContent =\n      this.content > this.max ? `${this.max}+` : this.content;\n\n    return (\n      <div class=\"badge-wrapper\">\n        <slot></slot>\n        <span class=\"badge-content\">\n            <unity-typography variant='caption-text' > {displayContent} </unity-typography>\n            \n        </span>\n      </div>\n    );\n  }\n}\n"],"version":3}