@trimble-oss/moduswebcomponents/esm/modus-wc-select.entry.js

Modus Web Components is a modern, accessible UI library built with Stencil JS that provides reusable web components following Trimble's Modus design system. This updated version focuses on improved flexibility, enhanced theming options, comprehensive cust

import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-D_4hbGjA.js';
import { c as generateElementId, i as inheritAriaAttributes } from './utils-DQvnWXRl.js';

const convertPropsToClasses = ({ bordered, feedback, size, }) => {
    let classes = '';
    if (bordered) {
        classes = `${classes} modus-wc-select-bordered`;
    }
    if (feedback) {
        classes = `${classes} modus-wc-input--${feedback.level}`;
    }
    if (size) {
        classes = `${classes} modus-wc-select-${size}`;
    }
    return classes.trim();
};

const modusWcSelectCss = "modus-wc-select .modus-wc-select-xs{height:var(--modus-wc-size-xs);min-height:var(--modus-wc-size-xs)}modus-wc-select .modus-wc-select-sm{height:var(--modus-wc-size-sm);min-height:var(--modus-wc-size-sm)}modus-wc-select .modus-wc-select-md{height:var(--modus-wc-size-md);min-height:var(--modus-wc-size-md)}modus-wc-select .modus-wc-select-lg{height:var(--modus-wc-size-lg);min-height:var(--modus-wc-size-lg)}modus-wc-select .modus-wc-select-xl{height:var(--modus-wc-size-xl);min-height:var(--modus-wc-size-xl)}modus-wc-select .modus-wc-select--error{border-color:var(--modus-wc-color-error) !important}modus-wc-select .modus-wc-select--info{border-color:var(--modus-wc-color-info) !important}modus-wc-select .modus-wc-select--success{border-color:var(--modus-wc-color-success) !important}modus-wc-select .modus-wc-select--warning{border-color:var(--modus-wc-color-warning) !important}modus-wc-select .modus-wc-select .modus-wc-input-label{padding-bottom:var(--modus-wc-spacing-sm)}[data-theme=modus-classic-light] modus-wc-select .modus-wc-select,[data-theme=modus-classic-dark] modus-wc-select .modus-wc-select{border-radius:var(--modus-wc-border-radius-md)}[data-theme=modus-classic-light] modus-wc-select .modus-wc-select.modus-wc-select-sm,[data-theme=modus-classic-dark] modus-wc-select .modus-wc-select.modus-wc-select-sm{font-size:var(--modus-wc-font-size-sm);height:var(--modus-wc-input-height-sm);line-height:var(--modus-wc-input-height-sm);min-height:var(--modus-wc-input-height-sm)}[data-theme=modus-classic-light] modus-wc-select .modus-wc-select.modus-wc-select-md,[data-theme=modus-classic-dark] modus-wc-select .modus-wc-select.modus-wc-select-md{font-size:var(--modus-wc-font-size-md);height:var(--modus-wc-input-height-md);line-height:var(--modus-wc-input-height-md);min-height:var(--modus-wc-input-height-md)}[data-theme=modus-classic-light] modus-wc-select .modus-wc-select.modus-wc-select-lg,[data-theme=modus-classic-dark] modus-wc-select .modus-wc-select.modus-wc-select-lg{font-size:var(--modus-wc-font-size-lg);height:var(--modus-wc-input-height-lg);line-height:var(--modus-wc-font-size-lg);min-height:var(--modus-wc-font-size-lg)}[data-theme=modus-classic-light] modus-wc-select .modus-wc-select:focus,[data-theme=modus-classic-dark] modus-wc-select .modus-wc-select:focus{border-color:var(--modus-wc-color-blue-light);border-width:var(--modus-wc-border-width-sm);box-shadow:none;outline:none}[data-theme=modus-classic-light] modus-wc-select .modus-wc-select.modus-wc-select-bordered:not(:disabled):not(:focus){border-color:var(--modus-wc-color-gray-6)}[data-theme=modus-classic-dark] modus-wc-select .modus-wc-select:focus{border-color:var(--modus-wc-color-highlight-blue)}[data-theme=modus-classic-dark] modus-wc-select .modus-wc-select,[data-theme=modus-modern-dark] modus-wc-select .modus-wc-select,[data-theme=connect-dark] modus-wc-select .modus-wc-select{background-color:var(--modus-wc-color-gray-10)}[data-theme=connect-light] modus-wc-select .modus-wc-select,[data-theme=connect-dark] modus-wc-select .modus-wc-select{border-bottom-width:var(--input-bottom-border-width);outline-width:0 !important}[data-theme=connect-light] modus-wc-select .modus-wc-select:not(.modus-wc-select,.modus-wc-number-input),[data-theme=connect-dark] modus-wc-select .modus-wc-select:not(.modus-wc-select,.modus-wc-number-input){padding:0 var(--modus-wc-spacing-sm)}[data-theme=connect-light] modus-wc-select .modus-wc-select:hover,[data-theme=connect-dark] modus-wc-select .modus-wc-select:hover{border-bottom-color:var(--modus-wc-color-primary)}[data-theme=connect-light] modus-wc-select .modus-wc-select:active,[data-theme=connect-dark] modus-wc-select .modus-wc-select:active{border-bottom-color:var(--modus-wc-color-primary)}[data-theme=connect-light] modus-wc-select .modus-wc-select:focus,[data-theme=connect-dark] modus-wc-select .modus-wc-select:focus{border-bottom-color:var(--modus-wc-color-primary);outline:none}[data-theme=connect-light] modus-wc-select .modus-wc-select:focus-within,[data-theme=connect-dark] modus-wc-select .modus-wc-select:focus-within{border-bottom-color:var(--modus-wc-color-primary);outline:none}";

const ModusWcSelect = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.inputBlur = createEvent(this, "inputBlur");
        this.inputChange = createEvent(this, "inputChange");
        this.inputFocus = createEvent(this, "inputFocus");
        this.inheritedAttributes = {};
        this.generatedId = generateElementId();
        /** Indicates that the input should have a border. */
        this.bordered = true;
        /** Custom CSS class to apply to the inner div. */
        this.customClass = '';
        /** Whether the form control is disabled. */
        this.disabled = false;
        /** The options to display in the select dropdown. */
        this.options = [];
        /** A value is required for the form to be submittable. */
        this.required = false;
        /** The size of the input. */
        this.size = 'md';
        /** The value of the control. */
        this.value = '';
        this.handleBlur = (event) => {
            this.inputBlur.emit(event);
        };
        this.handleFocus = (event) => {
            this.inputFocus.emit(event);
        };
        this.handleInput = (event) => {
            this.value = event.target.value;
            this.inputChange.emit(event);
        };
    }
    componentWillLoad() {
        if (!this.el.ariaLabel) {
            this.el.ariaLabel = 'Select';
        }
        this.inheritedAttributes = inheritAriaAttributes(this.el);
    }
    getClasses() {
        const classList = ['modus-wc-select', 'modus-wc-w-full'];
        const propClasses = convertPropsToClasses({
            bordered: this.bordered,
            feedback: this.feedback,
            size: this.size,
        });
        // The order CSS classes are added matters to CSS specificity
        if (propClasses)
            classList.push(propClasses);
        if (this.customClass)
            classList.push(this.customClass);
        return classList.join(' ');
    }
    render() {
        const effectiveId = this.inputId || this.generatedId;
        return (h(Host, { key: '39e94da2f1c0f27c14d97a0594de1ed62ee57302' }, this.label && (h("modus-wc-input-label", { key: 'b9f1cd78d1de0de76caa93a450239a2851ccba7c', forId: effectiveId, labelText: this.label, required: this.required, size: this.size })), h("select", Object.assign({ key: '2b3af54e4bb1a1c7d408618537c49aa0c1d9bf29', class: this.getClasses(), disabled: this.disabled, id: effectiveId, name: this.name, onBlur: this.handleBlur, onFocus: this.handleFocus, onInput: this.handleInput, required: this.required, tabindex: this.inputTabIndex }, this.inheritedAttributes), this.options.map((option) => (h("option", { disabled: option.disabled, selected: option.value === this.value, value: option.value }, option.label)))), this.feedback && (h("modus-wc-input-feedback", { key: 'a4001e4c07e511c83dc676f26cfd0dbdc31fde28', level: this.feedback.level, message: this.feedback.message, size: this.size }))));
    }
    get el() { return getElement(this); }
};
ModusWcSelect.style = modusWcSelectCss;

export { ModusWcSelect as modus_wc_select };