@rededor/cura 1.0.0-alpha.5 → 1.0.0-alpha.7

package/dist/esm/cura-select_2.entry.js

@@ -1,320 +0,0 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-1ad98520.js';
-
-const curaSelectCss = ":host{display:block;position:relative;font-family:var(--font-family)}.wrapper{width:100%;user-select:none;text-align:left !important}.wrapper cura-label{margin-bottom:8px}.wrapper .helper-text{margin-top:8px;color:var(--neutral-dark)}.wrapper .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper .cura-input-field .feedback-icon{padding-left:12px}.wrapper .cura-input-field .up-down-icon{order:3;padding-right:12px;cursor:pointer;pointer-events:all}.wrapper .cura-input-field input{padding:0px 12px 0px 8px}.wrapper .cura-input-field.open{border-radius:4px 4px 0 0 !important}.wrapper.transparent{background-color:transparent;padding:0px;max-height:80px}.wrapper.transparent .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box;background-color:transparent !important;border:none !important;border-radius:0;height:27px}.wrapper.transparent .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.transparent .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.transparent .cura-input-field .feedback-icon{padding-left:12px}.wrapper.transparent .cura-input-field input{color:var(--neutral-black) !important;font-size:16px;font-weight:var(--font-weight-bold) !important;padding:0}.wrapper.transparent .cura-input-field input::placeholder{color:var(--neutral-black)}.wrapper.transparent .cura-input-field .feedback-icon{order:3;margin:0 20px 0 0}.wrapper.transparent:focus-within .cura-input-field{border:none !important;background-color:transparent !important}.wrapper.transparent:focus-within .cura-input-field input{border:none !important;outline:none}.wrapper.transparent .helper-text{margin-top:0px}.wrapper:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field{border-color:var(--neutral-dark)}.wrapper:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field input{color:var(--neutral-dark)}.wrapper:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper:focus-within .cura-input-field{border:2px solid var(--info-base) !important;background-color:var(--neutral-purewhite);outline:none}.wrapper:focus-within .cura-input-field input{color:var(--neutral-black) !important}.wrapper.success .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper.success .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.success .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.success .cura-input-field .feedback-icon{padding-left:12px}.wrapper.success .cura-input-field input{color:var(--success-darker) !important}.wrapper.success .cura-input-field input::placeholder{color:var(--success-darker) !important}.wrapper.success:not(.transparent) .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box;border:2px solid var(--success-dark) !important;background-color:var(--success-lighter) !important}.wrapper.success:not(.transparent) .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.success:not(.transparent) .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.success:not(.transparent) .cura-input-field .feedback-icon{padding-left:12px}.wrapper.error .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper.error .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.error .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.error .cura-input-field .feedback-icon{padding-left:12px}.wrapper.error .cura-input-field input{color:var(--error-darker) !important}.wrapper.error .cura-input-field input::placeholder{color:var(--error-darker) !important}.wrapper.error:not(.transparent) .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box;border:2px solid var(--error-dark) !important;background-color:var(--error-lighter) !important}.wrapper.error:not(.transparent) .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.error:not(.transparent) .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.error:not(.transparent) .cura-input-field .feedback-icon{padding-left:12px}.wrapper.disabled .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box;background-color:var(--neutral-white);border:2px solid var(--neutral-base)}.wrapper.disabled .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.disabled .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.disabled .cura-input-field .feedback-icon{padding-left:12px}.wrapper.disabled .cura-input-field input{color:var(--neutral-medium)}.wrapper.disabled .cura-input-field input::placeholder{color:var(--neutral-medium)}.wrapper.small .cura-input-field{width:100%;height:32px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper.small .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:12px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.small .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.small .cura-input-field .feedback-icon{padding-left:12px}.wrapper.small .cura-input-field input{line-height:13px;letter-spacing:0.72px}.wrapper.small .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.wrapper.small.label .menu{top:53px}.wrapper.small .menu{top:33px}.wrapper.medium .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper.medium .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.medium .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.medium .cura-input-field .feedback-icon{padding-left:12px}.wrapper.medium .cura-input-field input{line-height:16px;letter-spacing:0.56px}.wrapper.medium .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.wrapper.medium.label .menu{top:61px}.wrapper.medium .menu{top:40px}.wrapper.large .cura-input-field{width:100%;height:44px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper.large .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:16px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.large .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.large .cura-input-field .feedback-icon{padding-left:12px}.wrapper.large .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-bold)}.wrapper.large.label .menu{top:69px}.wrapper.large .menu{top:47px}.required{color:red}.menu{position:absolute;left:0;right:-1px;background:#fff;border:2px solid var(--neutral-light);border-radius:4px;z-index:1000;max-height:285px;overflow:hidden;border-top:transparent;align-items:center;scrollbar-color:var(--neutral-medium) var(--neutral-black-20);overflow-y:scroll;box-shadow:0px 4px 8px 0px rgba(38, 38, 38, 0.16)}.menu.open{border-radius:0 !important}";
-const CuraSelectStyle0 = curaSelectCss;
-
-const CuraSelect = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.selected = createEvent(this, "selected", 7);
-        if (hostRef.$hostElement$["s-ei"]) {
-            this.internals = hostRef.$hostElement$["s-ei"];
-        }
-        else {
-            this.internals = hostRef.$hostElement$.attachInternals();
-            hostRef.$hostElement$["s-ei"] = this.internals;
-        }
-        /**
-         * Styles to be applied to the component.
-         */
-        this.styles = {};
-        /**
-         * Theme object containing font and color information.
-         */
-        this.theme = window.CuraAPI.theme;
-        /**
-         * Handles mutations observed by the MutationObserver.
-         * Updates the selected option or filters options based on the mutation type.
-         */
-        this.handleMutations = (mutations) => {
-            mutations.forEach(mutation => {
-                if (mutation.type === 'attributes') {
-                    if (mutation.attributeName === 'selected')
-                        this.updateSelectedOption();
-                    if (mutation.attributeName === 'value')
-                        this.filterOptions();
-                }
-            });
-        };
-        /**
-         * Handles the selection of an option.
-         */
-        this.onOptiselected = (event) => {
-            const selectedOption = event.target;
-            this.clearSelectedAttributes();
-            selectedOption.setAttribute('selected', 'true');
-        };
-        this.handleKeyDown = (event) => {
-            var _a;
-            if (!this.isOpen)
-                return;
-            const { key } = event;
-            if (key === 'ArrowDown') {
-                event.preventDefault();
-                this.updateActiveIndex(1);
-            }
-            if (key === 'ArrowUp') {
-                event.preventDefault();
-                this.updateActiveIndex(-1);
-            }
-            if (key === 'Enter') {
-                (_a = this.options[this.activeIndex]) === null || _a === void 0 ? void 0 : _a.click();
-            }
-        };
-        this.handleInputChange = (e) => {
-            this.value = e.target.value;
-            this.isOpen = !!this.value.length;
-            this.internals.setFormValue(this.value);
-        };
-        this.handleClick = (event) => {
-            if (this.disabled)
-                return event.preventDefault();
-            const target = event.target;
-            if (target.tagName === 'CURA-SELECT-OPTION')
-                return this.onOptiselected(event);
-            this.isOpen = !this.isOpen;
-        };
-        this.label = '';
-        this.placeholder = '';
-        this.value = '';
-        this.mode = 'default';
-        this.size = 'medium';
-        this.status = 'default';
-        this.disabled = false;
-        this.required = false;
-        this.isHovered = false;
-        this.isFocused = false;
-        this.isOpen = false;
-        this.options = undefined;
-        this.activeIndex = -1;
-    }
-    /**
-   * Callback for form association.
-   */
-    formAssociatedCallback(form) {
-        form.ariaLabel = this.label;
-    }
-    /**
-   * Callback to restore the switch state from the form.
-   */
-    formStateRestoreCallback(state) {
-        this.value = state.value;
-        this.updateSelectedOption();
-    }
-    /**
-   * Callback to reset the switch state when the form is reset.
-   */
-    formResetCallback() {
-        this.value = '';
-        this.clearSelectedAttributes();
-        this.internals.setFormValue(this.value);
-        this.internals.setValidity({});
-    }
-    /**
-    * Callback to update the switch's disabled state when the form's disabled state changes.
-    */
-    formDisabledCallback(disabled) {
-        this.disabled = disabled;
-    }
-    /**
-     * Lifecycle method called before the component is rendered.
-     * Initializes the options for the select component.
-     */
-    componentWillLoad() {
-        this.initializeOptions();
-    }
-    /**
-     * Lifecycle method called after the component is rendered.
-     * Initializes select-related functionality.
-     */
-    componentDidLoad() {
-        this.setupMutationObserver();
-    }
-    /**
-     * Lifecycle method called when the component is connected to the DOM.
-     * Applies styles based on the theme.
-     */
-    connectedCallback() {
-        this.applyStyles();
-    }
-    /**
-     * Lifecycle method called when the component is disconnected from the DOM.
-     * Disconnects the MutationObserver if it exists.
-     */
-    disconnectedCallback() {
-        var _a;
-        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-    }
-    initializeOptions() {
-        this.options = this.host.querySelectorAll('cura-select-option');
-        this.options.forEach(option => {
-            option.setAttribute('size', this.size);
-            option.setAttribute('selected', 'false');
-        });
-    }
-    /**
-     * Applies styles to the component based on the theme.
-     */
-    applyStyles() {
-        const { fonts, colors } = this.theme;
-        const fontWeights = fonts.getWeights();
-        this.styles = Object.assign(Object.assign({}, this.styles), { '--font-weight-medium': fontWeights.medium, '--font-weight-bold': fontWeights.bold, '--font-weight-regular': fontWeights.regular, '--font-color': fonts.getColor(), '--font-family': fonts.getFamily(), '--font-size': fonts.getSize() });
-        const colorKeys = [
-            'primary-base', 'neutral-purewhite', 'neutral-white', 'neutral-black', 'neutral-medium', 'neutral-light',
-            'neutral-base', 'neutral-dark', 'success-dark', 'success-darker', 'success-lighter',
-            'error-lighter', 'error-dark', 'error-darker', 'error-base', 'info-base'
-        ];
-        colorKeys.forEach(key => {
-            this.styles[`--${key}`] = colors.getColor(key);
-        });
-    }
-    /**
-     * Sets up a MutationObserver to watch for changes in the component.
-     */
-    setupMutationObserver() {
-        this.mutationObserver = new MutationObserver(this.handleMutations);
-        this.mutationObserver.observe(this.host, { attributes: true, subtree: true, attributeFilter: ['selected', 'value'] });
-    }
-    updateSelectedOption() {
-        const selectedOption = this.host.querySelector('cura-select-option[selected]');
-        if (selectedOption) {
-            const selectedValue = selectedOption.textContent;
-            if (this.value !== selectedValue) {
-                this.value = selectedValue;
-                this.isOpen = false;
-                this.internals.setFormValue(this.value);
-                this.selected.emit({ value: this.value, selected: true });
-            }
-        }
-    }
-    /**
-     * Clears the 'selected' attribute from all options.
-     */
-    clearSelectedAttributes() {
-        this.options.forEach(option => option.removeAttribute('selected'));
-    }
-    /**
-     * Filters the options based on the current input value.
-     */
-    filterOptions() {
-        const inputValue = this.value.toLowerCase();
-        this.options.forEach(option => {
-            var _a;
-            const optionValue = ((_a = option.textContent) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '';
-            const isVisible = this.isOpen ? optionValue.includes(inputValue) : true;
-            option.style.display = isVisible ? 'block' : 'none';
-        });
-    }
-    updateActiveIndex(direction) {
-        if (this.options.length === 0)
-            return;
-        this.activeIndex = (this.activeIndex + direction + this.options.length) % this.options.length;
-        this.updateOptionHighlights();
-    }
-    updateOptionHighlights() {
-        this.options.forEach((option, index) => option.active = index === this.activeIndex);
-    }
-    getClasses() {
-        return {
-            wrapper: true,
-            label: !!this.label,
-            disabled: this.disabled,
-            transparent: this.mode === 'transparent',
-            [this.size.toLowerCase()]: true,
-            [this.status.toLowerCase()]: true,
-        };
-    }
-    /**
-     * Determines the color based on the item type and component state.
-     */
-    getColor(item) {
-        if (this.disabled)
-            return 'neutral-medium';
-        const isStatusDefault = this.status === 'default';
-        const isHoveredOrFocused = this.isFocused || this.isHovered;
-        if (item === 'label') {
-            if (!isStatusDefault || isHoveredOrFocused)
-                return 'neutral-black';
-            return 'neutral-dark';
-        }
-        if (isHoveredOrFocused && isStatusDefault)
-            return 'neutral-black';
-        if (this.status === 'success')
-            return 'success-dark';
-        if (this.status === 'error')
-            return 'error-dark';
-        return 'neutral-dark';
-    }
-    /**
-     * Renders the icon based on the component's status.
-     */
-    renderIcon() {
-        if (this.status === 'default')
-            return null;
-        const icon = { success: 'checkCircle', error: 'alertCircle' }[this.status];
-        return (h("cura-icon", { class: 'feedback-icon', name: icon, iconset: 'default', size: this.size === 'large' ? 20 : 16, color: this.getColor('icon'), style: this.styles }));
-    }
-    render() {
-        return (h(Host, { key: '35fd5d99705c940578485552a50bcec54efe036e', style: this.styles }, h("div", { key: '1903a7b03e32215678670a2d7d8b49643cc2086b', class: this.getClasses(), tabIndex: 0, ref: (el) => (this.selectRef = el), onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), onKeyDown: this.handleKeyDown, onClick: this.handleClick }, this.label && (h("cura-label", { key: '99aeba22f4b6204d936b6a9dcf6affa29e9411a8', class: 'label', weight: 'bold', size: this.size === 'large' ? 'small' : 'xsmall', color: this.getColor('label') }, this.label, " ", this.required && h("span", { key: '7e335f6fdb0ee6d9e987fba8ec245006f02761b5', class: 'required' }, "* "))), h("div", { key: 'c9ba61c15951f6689724025778fe8a933ab5b9bd', class: {
-                'cura-input-field': true,
-                'open': this.isOpen
-            } }, this.renderIcon(), h("input", { key: '0c1369e661fc6e34c8bf75f5ef4b977e749dc0b5', tabIndex: 0, type: "text", autocomplete: 'off', onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), "aria-required": String(this.required), "aria-disabled": String(this.disabled), "aria-invalid": String(this.status === 'error'), onInput: this.handleInputChange, style: this.styles, placeholder: this.placeholder, disabled: this.disabled, required: this.required, value: this.value }), h("cura-icon", { key: '95b5105660bcfc0c1562955449a1fc737048e8c2', name: this.isOpen ? 'up' : 'down', class: "up-down-icon", color: this.disabled ? 'neutral-dark' : 'primary-base', size: 16, iconset: 'default' })), h("cura-label", { key: 'b5565e686989fe0c1e62f6c01fef52b2829bf4f5', class: "helper-text", size: 'xsmall', color: this.getColor('text'), weight: this.mode === 'transparent' ? 'bold' : 'regular' }, h("slot", { key: '4a265609d8742b7e736920d54525cb2405785ea6' })), this.isOpen && (h("div", { key: '8f0609c7c2e709506ea4bdeeebdb1aae8abde1df', class: {
-                'menu': true,
-                'open': this.isOpen
-            } }, h("slot", { key: 'b6f84b885909ea1a9213cb3d590a02d736320228', name: 'option' }))))));
-    }
-    static get formAssociated() { return true; }
-    get host() { return getElement(this); }
-};
-CuraSelect.style = CuraSelectStyle0;
-
-const curaSelectOptionCss = ":host{display:block}.item{display:flex;padding:12px 8px;cursor:pointer;justify-content:space-between;align-items:center;box-sizing:border-box;background:var(--neutral-purewhite)}.item.selected{background-color:var(--primary-lighter-50);border-bottom:1px solid var(--primary-light)}.item:hover:not(.selected){background:var(--neutral-white);box-shadow:0 2px 0 0 var(--neutral-light)}.item.active{background:var(--neutral-white) !important}.item.selected.active{background-color:var(--primary-lighter-50) !important;box-shadow:none}";
-const CuraSelectOptionStyle0 = curaSelectOptionCss;
-
-const CuraSelectOption = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.theme = window.CuraAPI.theme;
-        this.value = undefined;
-        this.selected = false;
-        this.active = false;
-        this.size = 'small';
-        this.styles = {};
-    }
-    connectedCallback() {
-        const colors = [
-            { name: '--primary-lighter-50', theme: 'primary-lighter', opacity: 0.5 },
-            { name: '--primary-light', theme: 'primary-light' },
-            { name: '--neutral-light', theme: 'neutral-light' },
-            { name: '--neutral-purewhite', theme: 'neutral-purewhite' },
-        ];
-        colors.forEach(color => this.styles = Object.assign(Object.assign({}, this.styles), { [color.name]: this.theme.colors.getColor(color.theme, color === null || color === void 0 ? void 0 : color.opacity) }));
-    }
-    getSize(element) {
-        const sizeMap = {
-            large: element === 'label' ? 'medium' : 20,
-            medium: element === 'label' ? 'small' : 16,
-            small: element === 'label' ? 'xsmall' : 'micro',
-        };
-        return sizeMap[this.size] || sizeMap['medium'];
-    }
-    getClasses() {
-        return {
-            'item': true,
-            'selected': this.selected,
-            'active': this.active
-        };
-    }
-    render() {
-        return (h(Host, { key: '231c03411af0a5639358ff232e4a81287a8571f0', slot: "option" }, h("div", { key: 'b5baa8f7c4a4e863b96ffda1454a8c339d4b2656', class: this.getClasses(), style: this.styles }, h("cura-label", { key: '36d3381260263303242c443004f7e201c2683d4e', color: `${this.selected ? 'primary-base' : 'neutral-black'}`, size: this.getSize('label'), "margin-block": "0" }, h("slot", { key: 'cc72fed8c51592c8fd076d091272879c7572a181' })), this.selected && h("cura-icon", { key: 'e118108f84d49b3d6574a143f09b2c43d43d11a8', name: 'check', size: this.getSize('icon'), color: "primary-base" }))));
-    }
-    get host() { return getElement(this); }
-    static get watchers() { return {
-        "size": ["getSize"]
-    }; }
-};
-CuraSelectOption.style = CuraSelectOptionStyle0;
-
-export { CuraSelect as cura_select, CuraSelectOption as cura_select_option };
-
-//# sourceMappingURL=cura-select_2.entry.js.map

package/dist/esm/cura-select_2.entry.js.map

@@ -1 +0,0 @@
-{"file":"cura-select.cura-select-option.entry.js","mappings":"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","names":[],"sources":["src/components/forms/cura-select/cura-select.scss?tag=cura-select&encapsulation=shadow","src/components/forms/cura-select/cura-select.tsx","src/components/forms/cura-select-options/cura-select-option.scss?tag=cura-select-option&encapsulation=shadow","src/components/forms/cura-select-options/cura-select-option.tsx"],"sourcesContent":["@import \"../../../scss/mixins/forms.scss\";\n\n:host {\n  display: block;\n  position: relative;\n  font-family: var(--font-family);\n}\n\n.wrapper {\n  width: 100%;\n  user-select: none;\n  text-align: left !important;\n\n  @include cura-label();\n  @include helper-text();\n\n  @include cura-input-field() {\n    .up-down-icon {\n      order: 3;\n      padding-right: 12px;\n      cursor: pointer;\n      pointer-events: all;\n    }\n\n    input {\n      padding: 0px 12px 0px 8px;\n    }\n\n    &.open {\n      border-radius: 4px 4px 0 0 !important;\n    }\n\n\n  }\n\n  @include cura-input-transparent();\n\n  @include cura-forms-hover();\n  @include cura-forms-focused();\n\n\n  @include cura-forms-success();\n  @include cura-forms-error();\n  @include cura-forms-disabled();\n\n  @include cura-forms-small() {\n    &.label {.menu {top: 53px;} }\n    .menu { top: 33px; }\n  }\n\n  @include cura-forms-medium() {\n    &.label {.menu { top: 61px;} }\n    .menu { top: 40px; }\n  }\n\n  @include cura-forms-large() {\n    &.label {.menu { top: 69px } }\n    .menu {top: 47px; }\n  }\n}\n\n.required {\n  color: red;\n}\n\n.menu {\n  position: absolute;\n  left: 0;\n  right: -1px;\n  background: #fff;\n  border: 2px solid var(--neutral-light);\n  border-radius: 4px;\n  z-index: 1000;\n  max-height: 285px;\n  overflow: hidden;\n  border-top: transparent;\n  align-items: center;\n\n  scrollbar-color: var(--neutral-medium) var(--neutral-black-20);\n  overflow-y: scroll;\n  box-shadow: 0px 4px 8px 0px rgba(38, 38, 38, 0.16);\n\n  &.open {\n    border-radius: 0 !important;\n  }\n}\n\n","import { Component, Element, Host, Prop, State, h, Event, EventEmitter, AttachInternals } from '@stencil/core';\n\n@Component({\n  tag: 'cura-select',\n  styleUrl: 'cura-select.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class CuraSelect {\n  /**\n   * The label text for the select component.\n   * Reflects as an attribute in the DOM.\n   */\n  @Prop({ reflect: true }) label: string = '';\n\n  /**\n   * Placeholder text for the input field.\n   * Reflects as an attribute in the DOM.\n   */\n  @Prop({ reflect: true }) placeholder: string = '';\n\n  /**\n   * Current value of the select component.\n   * Reflects as an attribute in the DOM and is mutable.\n   */\n  @Prop({ reflect: true, mutable: true }) value: string = '';\n\n  /**\n   * Display mode of the select component.\n   * Can be 'default' or 'transparent'.\n   */\n  @Prop({ reflect: true }) mode: 'default' | 'transparent' = 'default';\n\n  /**\n   * Size of the select component.\n   * Can be 'small', 'medium', or 'large'.\n   */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Status of the select component.\n   * Can be 'success', 'error', or 'default'.\n   */\n  @Prop({ reflect: true, mutable: true }) status: 'success' | 'error' | 'default' = 'default';\n\n  /**\n   * Whether the select component is disabled.\n   * Reflects as an attribute in the DOM.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * Whether the select component is required.\n   * Reflects as an attribute in the DOM.\n   */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /**\n   * Internal state: Whether the input is hovered.\n   * Default: false\n   */\n  @State() isHovered: boolean = false;\n\n  /**\n   * Internal state: Whether the input is focused.\n   * Default: false\n   */\n  @State() isFocused: boolean = false;\n\n  /**\n   * Internal state: Whether the dropdown menu is open.\n   * Default: false\n   */\n  @State() isOpen: boolean = false;\n\n  /**\n   * Internal state: Collection of options for the select component.\n   */\n  @State() options: NodeListOf<HTMLElement>;\n\n\n  @State() activeIndex: number = -1\n\n  /**\n   * Reference to the host element of the component.\n   */\n  @Element() host: HTMLElement;\n\n  /**\n   * Event emitted when an option is selected.\n   */\n  @Event() selected: EventEmitter;\n\n  /**\n   * Reference to the select component element.\n   */\n  selectRef: HTMLElement;\n\n  /**\n   * MutationObserver to watch changes in the component.\n   */\n  mutationObserver: MutationObserver;\n\n  /**\n   * Styles to be applied to the component.\n   */\n  styles = {};\n\n  /**\n   * Theme object containing font and color information.\n   */\n  theme = window.CuraAPI.theme;\n\n  @AttachInternals() internals: ElementInternals;\n\n  /**\n * Callback for form association.\n */\n  formAssociatedCallback(form: { ariaLabel: string; }) {\n    form.ariaLabel = this.label;\n  }\n\n  /**\n * Callback to restore the switch state from the form.\n */\n  formStateRestoreCallback(state: { value: string }) {\n    this.value = state.value;\n    this.updateSelectedOption();\n  }\n\n  /**\n * Callback to reset the switch state when the form is reset.\n */\n  formResetCallback() {\n    this.value = '';\n    this.clearSelectedAttributes()\n    this.internals.setFormValue(this.value);\n    this.internals.setValidity({});\n  }\n\n  /**\n  * Callback to update the switch's disabled state when the form's disabled state changes.\n  */\n  formDisabledCallback(disabled: boolean) {\n    this.disabled = disabled;\n  }\n\n  /**\n   * Lifecycle method called before the component is rendered.\n   * Initializes the options for the select component.\n   */\n  componentWillLoad() {\n    this.initializeOptions();\n  }\n  /**\n   * Lifecycle method called after the component is rendered.\n   * Initializes select-related functionality.\n   */\n  componentDidLoad() {\n    this.setupMutationObserver();\n  }\n  /**\n   * Lifecycle method called when the component is connected to the DOM.\n   * Applies styles based on the theme.\n   */\n  connectedCallback() {\n    this.applyStyles();\n  }\n  /**\n   * Lifecycle method called when the component is disconnected from the DOM.\n   * Disconnects the MutationObserver if it exists.\n   */\n  disconnectedCallback() {\n    this.mutationObserver?.disconnect();\n  }\n\n  initializeOptions() {\n    this.options = this.host.querySelectorAll('cura-select-option');\n    this.options.forEach(option => {\n      option.setAttribute('size', this.size);\n      option.setAttribute('selected', 'false');\n    });\n  }\n  /**\n   * Applies styles to the component based on the theme.\n   */\n  applyStyles() {\n    const { fonts, colors } = this.theme;\n    const fontWeights = fonts.getWeights();\n\n    this.styles = {\n      ...this.styles,\n      '--font-weight-medium': fontWeights.medium,\n      '--font-weight-bold': fontWeights.bold,\n      '--font-weight-regular': fontWeights.regular,\n      '--font-color': fonts.getColor(),\n      '--font-family': fonts.getFamily(),\n      '--font-size': fonts.getSize(),\n    };\n\n    const colorKeys = [\n      'primary-base', 'neutral-purewhite', 'neutral-white', 'neutral-black', 'neutral-medium', 'neutral-light',\n      'neutral-base', 'neutral-dark', 'success-dark', 'success-darker', 'success-lighter',\n      'error-lighter', 'error-dark', 'error-darker', 'error-base', 'info-base'\n    ];\n\n    colorKeys.forEach(key => {\n      this.styles[`--${key}`] = colors.getColor(key);\n    });\n  }\n  /**\n   * Sets up a MutationObserver to watch for changes in the component.\n   */\n  setupMutationObserver() {\n    this.mutationObserver = new MutationObserver(this.handleMutations);\n    this.mutationObserver.observe(this.host, { attributes: true, subtree: true, attributeFilter: ['selected', 'value'] });\n  }\n  /**\n   * Handles mutations observed by the MutationObserver.\n   * Updates the selected option or filters options based on the mutation type.\n   */\n  handleMutations = (mutations: MutationRecord[]) => {\n    mutations.forEach(mutation => {\n      if (mutation.type === 'attributes') {\n        if (mutation.attributeName === 'selected') this.updateSelectedOption();\n        if (mutation.attributeName === 'value') this.filterOptions();\n      }\n    });\n  };\n  /**\n   * Handles the selection of an option.\n   */\n  onOptiselected = (event: Event) => {\n    const selectedOption = event.target as HTMLElement;\n    this.clearSelectedAttributes();\n    selectedOption.setAttribute('selected', 'true');\n  };\n\n  updateSelectedOption() {\n    const selectedOption = this.host.querySelector('cura-select-option[selected]');\n\n    if (selectedOption) {\n      const selectedValue = selectedOption.textContent;\n      if (this.value !== selectedValue) {\n        this.value = selectedValue ;\n        this.isOpen = false;\n        this.internals.setFormValue(this.value);\n        this.selected.emit({ value: this.value, selected: true });\n      }\n    }\n  }\n\n  /**\n   * Clears the 'selected' attribute from all options.\n   */\n  clearSelectedAttributes() {\n    this.options.forEach(option => option.removeAttribute('selected'));\n  }\n\n  /**\n   * Filters the options based on the current input value.\n   */\n  filterOptions() {\n    const inputValue = this.value.toLowerCase();\n\n    this.options.forEach(option => {\n      const optionValue = option.textContent?.toLowerCase() || '';\n      const isVisible = this.isOpen ? optionValue.includes(inputValue) : true;\n      option.style.display = isVisible ? 'block' : 'none';\n    });\n  }\n\n  handleKeyDown = (event: KeyboardEvent) => {\n    if (!this.isOpen) return;\n    const { key } = event\n\n    if (key === 'ArrowDown') {\n      event.preventDefault();\n      this.updateActiveIndex(1);\n    }\n\n    if (key === 'ArrowUp') {\n      event.preventDefault();\n      this.updateActiveIndex(-1);\n    }\n\n    if (key === 'Enter') {\n      this.options[this.activeIndex]?.click();\n    }\n  }\n\n  updateActiveIndex(direction: number) {\n    if (this.options.length === 0) return;\n    this.activeIndex = (this.activeIndex + direction + this.options.length) % this.options.length;\n    this.updateOptionHighlights()\n  }\n\n  updateOptionHighlights() {\n    this.options.forEach((option, index) => (option as any).active = index === this.activeIndex);\n  }\n\n\n  handleInputChange = (e: Event) => {\n    this.value = (e.target as HTMLInputElement).value;\n    this.isOpen = !!this.value.length;\n    this.internals.setFormValue(this.value);\n  };\n\n\n  getClasses() {\n    return {\n      wrapper: true,\n      label: !!this.label,\n      disabled: this.disabled,\n      transparent: this.mode === 'transparent',\n      [this.size.toLowerCase()]: true,\n      [this.status.toLowerCase()]: true,\n    };\n  }\n\n  /**\n   * Determines the color based on the item type and component state.\n   */\n  getColor(item: 'label' | 'text' | 'icon') {\n    if (this.disabled) return 'neutral-medium';\n\n    const isStatusDefault = this.status === 'default';\n    const isHoveredOrFocused = this.isFocused || this.isHovered;\n\n    if (item === 'label') {\n      if (!isStatusDefault || isHoveredOrFocused) return 'neutral-black';\n      return 'neutral-dark';\n    }\n\n    if (isHoveredOrFocused && isStatusDefault) return 'neutral-black';\n    if (this.status === 'success') return 'success-dark';\n    if (this.status === 'error') return 'error-dark';\n\n    return 'neutral-dark';\n  }\n\n  /**\n   * Renders the icon based on the component's status.\n   */\n  renderIcon() {\n    if (this.status === 'default') return null;\n    const icon = { success: 'checkCircle', error: 'alertCircle' }[this.status];\n    return (\n      <cura-icon\n        class='feedback-icon'\n        name={icon}\n        iconset='default'\n        size={this.size === 'large' ? 20 : 16}\n        color={this.getColor('icon')}\n        style={this.styles}\n      />\n    );\n  }\n\n  handleClick = (event: MouseEvent) => {\n    if (this.disabled) return event.preventDefault();\n    const target = event.target as HTMLElement;\n\n    if (target.tagName === 'CURA-SELECT-OPTION') return this.onOptiselected(event);\n    this.isOpen = !this.isOpen;\n  };\n\n\n  render() {\n    return (\n      <Host style={this.styles}>\n        <div\n          class={this.getClasses()}\n          tabIndex={0}\n          ref={(el) => (this.selectRef = el as HTMLElement)}\n          onMouseEnter={() => (this.isHovered = true)}\n          onMouseLeave={() => (this.isHovered = false)}\n          onKeyDown={this.handleKeyDown}\n          onClick={this.handleClick}\n        >\n          {this.label && (\n            <cura-label\n              class='label'\n              weight='bold'\n              size={this.size === 'large' ? 'small' : 'xsmall'}\n              color={this.getColor('label')}\n            >\n              {this.label} {this.required && <span class='required'>* </span>}\n            </cura-label>\n          )}\n\n          <div class={{\n            'cura-input-field': true,\n            'open': this.isOpen\n          }}>\n            {this.renderIcon()}\n            <input\n              tabIndex={0}\n              type=\"text\"\n              autocomplete='off'\n              onFocus={() => (this.isFocused = true)}\n              onBlur={() => (this.isFocused = false)}\n              aria-required={String(this.required)}\n              aria-disabled={String(this.disabled)}\n              aria-invalid={String(this.status === 'error')}\n              onInput={this.handleInputChange}\n              style={this.styles}\n              placeholder={this.placeholder}\n              disabled={this.disabled}\n              required={this.required}\n              value={this.value}\n            />\n            <cura-icon\n              name={this.isOpen ? 'up' : 'down'}\n              class=\"up-down-icon\"\n              color={this.disabled ? 'neutral-dark' : 'primary-base'}\n              size={16}\n              iconset='default'\n            />\n          </div>\n          <cura-label\n            class=\"helper-text\"\n            size='xsmall'\n            color={this.getColor('text')}\n            weight={this.mode === 'transparent' ? 'bold' : 'regular'} >\n            <slot></slot>\n          </cura-label>\n          {this.isOpen && (\n            <div class={{\n              'menu': true,\n              'open': this.isOpen\n            }}>\n              <slot name='option'></slot>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n",":host {\n  display: block;\n}\n\n.item {\n  display: flex;\n  padding: 12px 8px;\n  cursor: pointer;\n  justify-content: space-between;\n  align-items: center;\n  box-sizing: border-box;\n  background: var(--neutral-purewhite);\n\n  &.selected {\n    background-color: var(--primary-lighter-50);\n    border-bottom: 1px solid var(--primary-light);\n  }\n\n  &:hover:not(.selected) {\n    background: var(--neutral-white);\n    box-shadow: 0 2px 0 0 var(--neutral-light);\n  }\n\n  &.active {\n    background: var(--neutral-white) !important;\n  }\n\n  &.selected.active {\n    background-color: var(--primary-lighter-50) !important;\n    box-shadow: none;\n  }\n}\n","import { Component, h, Host, Prop, State, Element, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'cura-select-option',\n  styleUrl: 'cura-select-option.scss',\n  shadow: true,\n})\nexport class CuraSelectOption {\n  @Prop({ reflect: true }) value: string;\n  @Prop({ reflect: true }) selected: boolean = false;\n  @Prop({ reflect: true }) active: boolean = false;\n  @Prop() size: 'xsmall' | 'small' | 'medium' | 'large' = 'small'\n  @State() styles = {};\n  @Element() host: HTMLElement;\n\n  theme = window.CuraAPI.theme;\n\n  connectedCallback() {\n    const colors = [\n      { name: '--primary-lighter-50', theme: 'primary-lighter', opacity: 0.5 },\n      { name: '--primary-light', theme: 'primary-light' },\n      { name: '--neutral-light', theme: 'neutral-light' },\n      { name: '--neutral-purewhite', theme: 'neutral-purewhite' },\n    ];\n\n    colors.forEach(color => this.styles = { ...this.styles, [color.name]: this.theme.colors.getColor(color.theme, color?.opacity) });\n  }\n\n  @Watch('size')\n  getSize(element: string) {\n    const sizeMap = {\n      large: element === 'label' ? 'medium' : 20,\n      medium: element === 'label' ? 'small' : 16,\n      small: element === 'label' ? 'xsmall' : 'micro',\n    };\n\n    return sizeMap[this.size] || sizeMap['medium'];\n  }\n\n  getClasses() {\n    return {\n      'item': true,\n      'selected': this.selected,\n      'active':this.active\n    };\n  }\n\n  render() {\n    return (\n      <Host slot=\"option\">\n        <div class={this.getClasses()} style={this.styles}>\n          <cura-label color={`${this.selected ? 'primary-base' : 'neutral-black'}`} size={this.getSize('label')} margin-block=\"0\">\n            <slot></slot>\n          </cura-label>\n          {this.selected && <cura-icon name='check' size={this.getSize('icon')} color=\"primary-base\"></cura-icon>}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}