@trimble-oss/moduswebcomponents/esm/modus-wc-slider.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 { i as inheritAriaAttributes } from './utils-DQvnWXRl.js';

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

const modusWcSliderCss = "modus-wc-slider .modus-wc-range{--rounded-box:200px;--range-shadow:var(--modus-wc-color-trimble-blue)}modus-wc-slider .modus-wc-range .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-shadow:var(--modus-wc-color-trimble-blue)}";

const ModusWcSlider = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        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: '9d89e67c579cfb870fcdc27ac97133123ab46cdf' }, this.label && (h("modus-wc-input-label", { key: '6f069f9f16498249942ad88f40715bddec59cb8f', forId: this.inputId, labelText: this.label, required: this.required, size: this.size })), h("input", Object.assign({ key: 'dae7df4d284519aaa6e9575d030c5f383cadecdf', "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 getElement(this); }
};
ModusWcSlider.style = modusWcSliderCss;

export { ModusWcSlider as modus_wc_slider };