@trimble-oss/moduswebcomponents/components/p-v6-_mwzz.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 { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-X1tirp06.js';
import { i as inheritAriaAttributes } from './p-VPqXjOQn.js';
import { d as defineCustomElement$1 } from './p-DtlnhsZ5.js';

const convertPropsToClasses = ({ size, }) => {
    let classes = '';
    if (size) {
        classes = `${classes} modus-wc-checkbox-${size}`;
    }
    return classes.trim();
};

const modusWcCheckboxCss = "modus-wc-checkbox.modus-wc-checkbox-host{align-items:center;display:flex}modus-wc-checkbox.modus-wc-checkbox-host .modus-wc-input-label{font-weight:var(--modus-wc-font-weight-normal);padding-inline-start:var(--modus-wc-spacing-md)}[data-theme=modus-classic-light] modus-wc-checkbox .modus-wc-checkbox,[data-theme=modus-classic-dark] modus-wc-checkbox .modus-wc-checkbox{--check-bg:var(--modus-wc-color-highlight-blue);--fallback-bc:var(--modus-wc-color-gray-4);--check-content:var(--modus-wc-color-white);border-radius:var(--modus-wc-border-radius-sm);border-width:var(--modus-wc-border-width-sm)}[data-theme=modus-classic-light] modus-wc-checkbox .modus-wc-checkbox.modus-wc-checkbox-sm,[data-theme=modus-classic-dark] modus-wc-checkbox .modus-wc-checkbox.modus-wc-checkbox-sm{height:0.75rem;width:0.75rem}[data-theme=modus-classic-light] modus-wc-checkbox .modus-wc-checkbox.modus-wc-checkbox-md,[data-theme=modus-classic-dark] modus-wc-checkbox .modus-wc-checkbox.modus-wc-checkbox-md{height:1rem;width:1rem}[data-theme=modus-classic-light] modus-wc-checkbox .modus-wc-checkbox.modus-wc-checkbox-lg,[data-theme=modus-classic-dark] modus-wc-checkbox .modus-wc-checkbox.modus-wc-checkbox-lg{height:1.25rem;width:1.25rem}[data-theme=modus-classic-light] modus-wc-checkbox .modus-wc-checkbox:checked,[data-theme=modus-classic-dark] modus-wc-checkbox .modus-wc-checkbox:checked{--fallback-bc:var(--modus-wc-color-highlight-blue)}[data-theme=modus-classic-light] modus-wc-checkbox .modus-wc-checkbox:checked:hover,[data-theme=modus-classic-dark] modus-wc-checkbox .modus-wc-checkbox:checked:hover{--check-bg:var(--modus-wc-color-blue-light);--fallback-bc:var(--modus-wc-color-blue-light)}[data-theme=modus-classic-light] modus-wc-checkbox .modus-wc-checkbox:indeterminate,[data-theme=modus-classic-dark] modus-wc-checkbox .modus-wc-checkbox:indeterminate{--fallback-bc:var(--modus-wc-color-highlight-blue)}[data-theme=modus-classic-light] modus-wc-checkbox .modus-wc-checkbox:disabled,[data-theme=modus-classic-dark] modus-wc-checkbox .modus-wc-checkbox:disabled{opacity:0.3}[data-theme=modus-classic-light] modus-wc-checkbox .modus-wc-checkbox:disabled:not(:checked),[data-theme=modus-classic-dark] modus-wc-checkbox .modus-wc-checkbox:disabled:not(:checked){background-color:unset;border:var(--modus-wc-border-width-sm) solid var(--modus-wc-color-gray-4)}[data-theme=modus-classic-light] modus-wc-checkbox .modus-wc-checkbox:focus,[data-theme=modus-classic-dark] modus-wc-checkbox .modus-wc-checkbox:focus{outline-color:color-mix(in sRGB, var(--modus-wc-color-highlight-blue) 75%, transparent)}[data-theme=modus-classic-light] modus-wc-checkbox .modus-wc-checkbox:hover,[data-theme=modus-classic-dark] modus-wc-checkbox .modus-wc-checkbox:hover{--fallback-bc:var(--modus-wc-color-highlight-blue)}[data-theme=modus-classic-light] modus-wc-checkbox .modus-wc-checkbox{--check-bg:var(--modus-wc-color-blue-light)}[data-theme=modus-classic-light] modus-wc-checkbox .modus-wc-checkbox:checked{--fallback-bc:var(--modus-wc-color-blue-light)}[data-theme=modus-classic-light] modus-wc-checkbox .modus-wc-checkbox:checked:hover{--check-bg:var(--modus-wc-color-trimble-blue);--fallback-bc:var(--modus-wc-color-trimble-blue)}[data-theme=modus-classic-light] modus-wc-checkbox .modus-wc-checkbox:indeterminate{--fallback-bc:var(--modus-wc-color-blue-light)}[data-theme=modus-classic-light] modus-wc-checkbox .modus-wc-checkbox:focus{outline-color:var(--modus-wc-color-highlight-blue)}[data-theme=modus-classic-light] modus-wc-checkbox .modus-wc-checkbox:hover{--fallback-bc:var(--modus-wc-color-blue-light)}[data-theme=connect-light] modus-wc-checkbox .modus-wc-checkbox,[data-theme=connect-dark] modus-wc-checkbox .modus-wc-checkbox{--check-bg:var(--modus-wc-color-highlight-blue);--fallback-bc:var(--modus-wc-color-gray-4);--check-content:var(--modus-wc-color-white);border-radius:var(--modus-wc-border-radius-sm);border-width:var(--modus-wc-border-width-sm)}[data-theme=connect-light] modus-wc-checkbox .modus-wc-checkbox.modus-wc-checkbox-sm,[data-theme=connect-dark] modus-wc-checkbox .modus-wc-checkbox.modus-wc-checkbox-sm{height:0.75rem;width:0.75rem}[data-theme=connect-light] modus-wc-checkbox .modus-wc-checkbox.modus-wc-checkbox-md,[data-theme=connect-dark] modus-wc-checkbox .modus-wc-checkbox.modus-wc-checkbox-md{height:1rem;width:1rem}[data-theme=connect-light] modus-wc-checkbox .modus-wc-checkbox.modus-wc-checkbox-lg,[data-theme=connect-dark] modus-wc-checkbox .modus-wc-checkbox.modus-wc-checkbox-lg{height:1.25rem;width:1.25rem}[data-theme=connect-light] modus-wc-checkbox .modus-wc-checkbox:checked,[data-theme=connect-dark] modus-wc-checkbox .modus-wc-checkbox:checked{--fallback-bc:var(--modus-wc-color-primary-color)}[data-theme=connect-light] modus-wc-checkbox .modus-wc-checkbox:checked:hover,[data-theme=connect-dark] modus-wc-checkbox .modus-wc-checkbox:checked:hover{--check-bg:var(--modus-wc-color-blue-light);--fallback-bc:var(--modus-wc-color-blue-light)}[data-theme=connect-light] modus-wc-checkbox .modus-wc-checkbox:indeterminate,[data-theme=connect-dark] modus-wc-checkbox .modus-wc-checkbox:indeterminate{--fallback-bc:var(--modus-wc-color-highlight-blue)}[data-theme=connect-light] modus-wc-checkbox .modus-wc-checkbox:disabled,[data-theme=connect-dark] modus-wc-checkbox .modus-wc-checkbox:disabled{opacity:0.3}[data-theme=connect-light] modus-wc-checkbox .modus-wc-checkbox:disabled:not(:checked),[data-theme=connect-dark] modus-wc-checkbox .modus-wc-checkbox:disabled:not(:checked){background-color:unset;border:var(--modus-wc-border-width-sm) solid var(--modus-wc-color-gray-4)}[data-theme=connect-light] modus-wc-checkbox .modus-wc-checkbox:focus,[data-theme=connect-dark] modus-wc-checkbox .modus-wc-checkbox:focus{outline-color:color-mix(in sRGB, var(--modus-wc-color-highlight-blue) 75%, transparent)}[data-theme=connect-light] modus-wc-checkbox .modus-wc-checkbox:hover,[data-theme=connect-dark] modus-wc-checkbox .modus-wc-checkbox:hover{--fallback-bc:var(--modus-wc-color-highlight-blue)}[data-theme=connect-light] modus-wc-checkbox .modus-wc-checkbox{--check-bg:var(--modus-wc-color-primary-color)}[data-theme=connect-light] modus-wc-checkbox .modus-wc-checkbox:checked{--fallback-bc:var(--modus-wc-color-blue-light)}[data-theme=connect-light] modus-wc-checkbox .modus-wc-checkbox:checked:hover{--check-bg:var(--modus-wc-color-trimble-blue);--fallback-bc:var(--modus-wc-color-trimble-blue)}[data-theme=connect-light] modus-wc-checkbox .modus-wc-checkbox:indeterminate{--fallback-bc:var(--modus-wc-color-blue-light)}[data-theme=connect-light] modus-wc-checkbox .modus-wc-checkbox:focus{outline-color:var(--modus-wc-color-highlight-blue)}[data-theme=connect-light] modus-wc-checkbox .modus-wc-checkbox:hover{--fallback-bc:var(--modus-wc-color-blue-light)}";

const ModusWcCheckbox = /*@__PURE__*/ proxyCustomElement(class ModusWcCheckbox extends H {
    constructor() {
        super();
        this.__registerHost();
        this.inputBlur = createEvent(this, "inputBlur");
        this.inputChange = createEvent(this, "inputChange");
        this.inputFocus = createEvent(this, "inputFocus");
        this.inheritedAttributes = {};
        /** Custom CSS class to apply to the inner div. */
        this.customClass = '';
        /** The disabled state of the checkbox. */
        this.disabled = false;
        /** The indeterminate state of the checkbox. */
        this.indeterminate = false;
        /** Name of the form control. Submitted with the form as part of a name/value pair. */
        this.name = '';
        /** 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 checkbox. */
        this.value = false;
        this.handleBlur = (event) => {
            this.inputBlur.emit(event);
        };
        this.handleFocus = (event) => {
            this.inputFocus.emit(event);
        };
        this.handleInput = (event) => {
            this.inputChange.emit(event);
        };
    }
    componentDidRender() {
        const checkbox = this.el.querySelector('input[type="checkbox"]');
        if (checkbox) {
            checkbox.indeterminate = this.indeterminate;
        }
    }
    componentWillLoad() {
        if (!this.el.ariaLabel) {
            this.el.ariaLabel = 'Checkbox';
        }
        this.inheritedAttributes = inheritAriaAttributes(this.el);
    }
    getClasses() {
        const classList = ['modus-wc-checkbox'];
        const propClasses = convertPropsToClasses({ 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() {
        return (h(Host, { key: 'd1aa5ea7d5ebd544fcc684ebf6dcc220052aebe2', class: "modus-wc-checkbox-host" }, h("input", Object.assign({ key: '4e5d70dfde13c5746357b33fbe255588a7245ce9', "aria-checked": this.indeterminate ? 'mixed' : this.value, "aria-disabled": this.disabled, checked: this.value, class: this.getClasses(), disabled: this.disabled, id: this.inputId, name: this.name, onBlur: this.handleBlur, onFocus: this.handleFocus, onInput: this.handleInput, required: this.required, tabIndex: this.inputTabIndex, type: "checkbox" }, this.inheritedAttributes)), this.label && (h("modus-wc-input-label", { key: '38ba3e2e7b10370ffaeaf05fe26dc777b6161182', forId: this.inputId, labelText: this.label, required: this.required, size: this.size }))));
    }
    get el() { return this; }
    static get style() { return modusWcCheckboxCss; }
}, [0, "modus-wc-checkbox", {
        "customClass": [1, "custom-class"],
        "disabled": [4],
        "indeterminate": [1540],
        "inputId": [1, "input-id"],
        "inputTabIndex": [2, "input-tab-index"],
        "label": [1],
        "name": [1],
        "required": [4],
        "size": [1],
        "value": [1540]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["modus-wc-checkbox", "modus-wc-input-label"];
    components.forEach(tagName => { switch (tagName) {
        case "modus-wc-checkbox":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, ModusWcCheckbox);
            }
            break;
        case "modus-wc-input-label":
            if (!customElements.get(tagName)) {
                defineCustomElement$1();
            }
            break;
    } });
}

export { ModusWcCheckbox as M, defineCustomElement as d };