@trimble-oss/moduswebcomponents/components/modus-wc-slider.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, e as createEvent, h, c as Host } from './p-BMvVSi6Y.js';
import { i as inheritAriaAttributes } from './p-COxr4v9W.js';
import { d as defineCustomElement$2 } from './p-CXnOhVIy.js';

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

const modusWcSliderCss = "modus-wc-slider .modus-wc-input-label{padding-bottom:var(--modus-wc-spacing-sm)}[data-theme=modus-classic-light] modus-wc-slider .modus-wc-range,[data-theme=modus-classic-dark] modus-wc-slider .modus-wc-range{--rounded-box:200px;--range-shdw:var(--modus-wc-color-trimble-blue)}";

const ModusWcSlider$1 = /*@__PURE__*/ proxyCustomElement(class ModusWcSlider 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 slider. */
        this.disabled = 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 slider. */
        this.value = 0;
        this.handleBlur = (event) => {
            this.inputBlur.emit(event);
        };
        this.handleFocus = (event) => {
            this.inputFocus.emit(event);
        };
        this.handleInput = (event) => {
            this.inputChange.emit(event);
        };
    }
    componentWillLoad() {
        if (!this.el.ariaLabel) {
            this.el.ariaLabel = 'Slider';
        }
        this.inheritedAttributes = inheritAriaAttributes(this.el);
    }
    getClasses() {
        const classList = ['modus-wc-range'];
        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: 'a695a47c247d78d1db7afe0be8182129464aa26c' }, this.label && (h("modus-wc-input-label", { key: '06154fc20727264768a7701dbb0df927445502a2', forId: this.inputId, labelText: this.label, required: this.required, size: this.size })), h("input", Object.assign({ key: 'bb6dd984414dd366bedd3168254085b2783c73bb', "aria-disabled": this.disabled, class: this.getClasses(), disabled: this.disabled, id: this.inputId, max: this.max, min: this.min, name: this.name, onBlur: this.handleBlur, onFocus: this.handleFocus, onInput: this.handleInput, required: this.required, step: this.step, tabIndex: this.inputTabIndex, type: "range", value: this.value }, this.inheritedAttributes))));
    }
    get el() { return this; }
    static get style() { return modusWcSliderCss; }
}, [0, "modus-wc-slider", {
        "customClass": [1, "custom-class"],
        "disabled": [4],
        "inputId": [1, "input-id"],
        "inputTabIndex": [2, "input-tab-index"],
        "label": [1],
        "max": [2],
        "min": [2],
        "name": [1],
        "required": [4],
        "size": [1],
        "step": [2],
        "value": [1538]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["modus-wc-slider", "modus-wc-input-label"];
    components.forEach(tagName => { switch (tagName) {
        case "modus-wc-slider":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, ModusWcSlider$1);
            }
            break;
        case "modus-wc-input-label":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}

const ModusWcSlider = ModusWcSlider$1;
const defineCustomElement = defineCustomElement$1;

export { ModusWcSlider, defineCustomElement };