@trimble-oss/moduswebcomponents
Version:
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
84 lines (78 loc) • 15.1 kB
JavaScript
'use strict';
var index = require('./index-CtEGR9Z7.js');
var baseComponent = require('./base-component-Dx-Crsr_.js');
var constants = require('./constants-DmPatsAz.js');
var utils = require('./utils-B2oo-h7a.js');
const convertPropsToClasses = (props) => {
let classes = '';
if (Object.prototype.hasOwnProperty.call(props, 'size') && props.size) {
classes = `${classes} modus-wc-toggle-${props.size}`;
}
return classes;
};
const modusWcSwitchCss = "modus-wc-switch.modus-wc-switch-host{--rounded-badge:32px;align-items:center;display:flex}modus-wc-switch.modus-wc-switch-host .modus-wc-input-label{font-weight:var(--modus-wc-font-weight-normal);padding-inline-start:var(--modus-wc-spacing-md)}modus-wc-switch .modus-wc-toggle{border-radius:var(--rounded-badge)}modus-wc-switch .modus-wc-toggle:focus{border-color:var(--modus-wc-color-base-200)}[data-theme=modus-classic-light] modus-wc-switch .modus-wc-toggle,[data-theme=modus-classic-dark] modus-wc-switch .modus-wc-toggle{background-color:var(--modus-wc-color-white);border:none;color:var(--modus-wc-color-gray-4);outline-color:var(--modus-wc-color-highlight-blue);--fallback-b1:var(--modus-wc-color-gray-4)}[data-theme=modus-classic-light] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-xs,[data-theme=modus-classic-dark] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-xs{--handleoffset:var(--modus-wc-spacing-sm);height:var(--modus-wc-spacing-lg);width:var(--modus-wc-spacing-xl)}[data-theme=modus-classic-light] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-xs~modus-wc-input-label .modus-wc-input-label,[data-theme=modus-classic-dark] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-xs~modus-wc-input-label .modus-wc-input-label{font-size:var(--modus-wc-font-size-sm);line-height:var(--modus-wc-font-size-2xl)}[data-theme=modus-classic-light] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-sm,[data-theme=modus-classic-dark] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-sm{--handleoffset:1rem;height:1rem;width:2rem}[data-theme=modus-classic-light] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-md,[data-theme=modus-classic-dark] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-md{--handleoffset:1.25rem;height:1.25rem;width:2.5rem}[data-theme=modus-classic-light] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-lg,[data-theme=modus-classic-dark] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-lg{--handleoffset:1.5rem;height:1.5rem;width:3rem}[data-theme=modus-classic-light] modus-wc-switch .modus-wc-toggle:checked,[data-theme=modus-classic-dark] modus-wc-switch .modus-wc-toggle:checked{--fallback-b1:var(--modus-wc-color-blue-light);color:var(--modus-wc-color-blue-light)}[data-theme=modus-classic-light] modus-wc-switch .modus-wc-toggle:not(:disabled):hover:not(:checked),[data-theme=modus-classic-dark] modus-wc-switch .modus-wc-toggle:not(:disabled):hover:not(:checked){background-color:var(--modus-wc-color-white);outline:2px solid var(--modus-wc-color-blue-light);outline-offset:-2px}[data-theme=modus-classic-light] modus-wc-switch .modus-wc-toggle:not(:disabled):hover:checked,[data-theme=modus-classic-dark] modus-wc-switch .modus-wc-toggle:not(:disabled):hover:checked{background-color:var(--modus-wc-color-white);--fallback-b1:var(--modus-wc-color-trimble-blue)}[data-theme=modus-classic-light] modus-wc-switch .modus-wc-toggle:not(:disabled):focus-visible,[data-theme=modus-classic-dark] modus-wc-switch .modus-wc-toggle:not(:disabled):focus-visible{outline:2px solid var(--modus-wc-color-highlight-blue);outline-offset:2px}[data-theme=modus-classic-light] modus-wc-switch .modus-wc-toggle:disabled,[data-theme=modus-classic-dark] modus-wc-switch .modus-wc-toggle:disabled{background-color:var(--modus-wc-color-white)}[data-theme=modus-classic-dark] modus-wc-switch .modus-wc-toggle:checked{--fallback-b1:var(--modus-wc-color-highlight-blue);color:var(--modus-wc-color-highlight-blue)}[data-theme=modus-classic-dark] modus-wc-switch .modus-wc-toggle:not(:disabled):hover:not(:checked){background-color:var(--modus-wc-color-white);outline:2px solid var(--modus-wc-color-highlight-blue);outline-offset:-2px}[data-theme=modus-classic-dark] modus-wc-switch .modus-wc-toggle:not(:disabled):hover:checked{background-color:var(--modus-wc-color-white);--fallback-b1:var(--modus-wc-color-blue-light)}[data-theme=connect-light] modus-wc-switch .modus-wc-toggle,[data-theme=connect-dark] modus-wc-switch .modus-wc-toggle{background-color:var(--modus-wc-color-white);border:none;color:var(--modus-wc-color-gray-4);outline-color:var(--modus-wc-color-highlight-blue);--fallback-b1:var(--modus-wc-color-gray-4)}[data-theme=connect-light] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-xs,[data-theme=connect-dark] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-xs{--handleoffset:var(--modus-wc-spacing-sm);height:var(--modus-wc-spacing-lg);width:var(--modus-wc-spacing-xl)}[data-theme=connect-light] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-xs~modus-wc-input-label .modus-wc-input-label,[data-theme=connect-dark] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-xs~modus-wc-input-label .modus-wc-input-label{font-size:var(--modus-wc-font-size-sm);line-height:var(--modus-wc-font-size-2xl)}[data-theme=connect-light] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-sm,[data-theme=connect-dark] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-sm{--handleoffset:1rem;height:1rem;width:2rem}[data-theme=connect-light] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-md,[data-theme=connect-dark] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-md{--handleoffset:1.25rem;height:1.25rem;width:2.5rem}[data-theme=connect-light] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-lg,[data-theme=connect-dark] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-lg{--handleoffset:1.5rem;height:1.5rem;width:3rem}[data-theme=connect-light] modus-wc-switch .modus-wc-toggle:checked,[data-theme=connect-dark] modus-wc-switch .modus-wc-toggle:checked{--fallback-b1:var(--modus-wc-color-blue-light);color:var(--modus-wc-color-blue-light)}[data-theme=connect-light] modus-wc-switch .modus-wc-toggle:not(:disabled):hover:not(:checked),[data-theme=connect-dark] modus-wc-switch .modus-wc-toggle:not(:disabled):hover:not(:checked){background-color:var(--modus-wc-color-white);outline:2px solid var(--modus-wc-color-blue-light);outline-offset:-2px}[data-theme=connect-light] modus-wc-switch .modus-wc-toggle:not(:disabled):hover:checked,[data-theme=connect-dark] modus-wc-switch .modus-wc-toggle:not(:disabled):hover:checked{background-color:var(--modus-wc-color-white);--fallback-b1:var(--modus-wc-color-trimble-blue)}[data-theme=connect-light] modus-wc-switch .modus-wc-toggle:not(:disabled):focus-visible,[data-theme=connect-dark] modus-wc-switch .modus-wc-toggle:not(:disabled):focus-visible{outline:2px solid var(--modus-wc-color-highlight-blue);outline-offset:2px}[data-theme=connect-light] modus-wc-switch .modus-wc-toggle:disabled,[data-theme=connect-dark] modus-wc-switch .modus-wc-toggle:disabled{background-color:var(--modus-wc-color-white)}[data-theme=connect-dark] modus-wc-switch .modus-wc-toggle:checked{--fallback-b1:var(--modus-wc-color-highlight-blue);color:var(--modus-wc-color-highlight-blue)}[data-theme=connect-dark] modus-wc-switch .modus-wc-toggle:not(:disabled):hover:not(:checked){background-color:var(--modus-wc-color-white);outline:2px solid var(--modus-wc-color-highlight-blue);outline-offset:-2px}[data-theme=connect-dark] modus-wc-switch .modus-wc-toggle:not(:disabled):hover:checked{background-color:var(--modus-wc-color-white);--fallback-b1:var(--modus-wc-color-blue-light)}[data-theme=modus-modern-light] modus-wc-switch modus-wc-input-label .modus-wc-input-label,[data-theme=modus-modern-dark] modus-wc-switch modus-wc-input-label .modus-wc-input-label{color:var(--modus-wc-color-gray-10);padding-inline-start:var(--modus-wc-spacing-sm)}[data-theme=modus-modern-light] modus-wc-switch .modus-wc-toggle,[data-theme=modus-modern-dark] modus-wc-switch .modus-wc-toggle{--fallback-b1:var(--modus-wc-color-gray-0);border:none;box-shadow:var(--handleoffsetcalculator) 0 0 var(--modus-wc-border-width-md) var(--fallback-b1) inset, 0 0 0 var(--modus-wc-border-width-md) var(--fallback-b1) inset;color:var(--modus-wc-color-white)}[data-theme=modus-modern-light] modus-wc-switch .modus-wc-toggle:indeterminate,[data-theme=modus-modern-dark] modus-wc-switch .modus-wc-toggle:indeterminate{box-shadow:calc(var(--handleoffset) / 2) 0 0 var(--modus-wc-border-width-md) var(--fallback-b1) inset, calc(var(--handleoffset) / -2) 0 0 var(--modus-wc-border-width-md) var(--fallback-b1) inset, 0 0 0 var(--modus-wc-border-width-md) var(--fallback-b1) inset}[data-theme=modus-modern-light] modus-wc-switch .modus-wc-toggle:checked,[data-theme=modus-modern-dark] modus-wc-switch .modus-wc-toggle:checked{--fallback-b1:var(--modus-wc-color-primary)}[data-theme=modus-modern-light] modus-wc-switch .modus-wc-toggle:focus-visible,[data-theme=modus-modern-dark] modus-wc-switch .modus-wc-toggle:focus-visible{outline:var(--modus-wc-border-width-sm) solid var(--modus-wc-color-primary);outline-offset:var(--modus-wc-border-width-sm)}[data-theme=modus-modern-light] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-xs,[data-theme=modus-modern-dark] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-xs{--handleoffset:var(--modus-wc-spacing-sm);height:var(--modus-wc-spacing-lg);width:var(--modus-wc-spacing-xl)}[data-theme=modus-modern-light] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-xs~modus-wc-input-label .modus-wc-input-label,[data-theme=modus-modern-dark] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-xs~modus-wc-input-label .modus-wc-input-label{font-size:var(--modus-wc-font-size-sm);line-height:var(--modus-wc-font-size-2xl)}[data-theme=modus-modern-light] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-sm,[data-theme=modus-modern-dark] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-sm{--handleoffset:var(--modus-wc-spacing-md);height:var(--modus-wc-font-size-2xl);width:var(--modus-wc-spacing-2xl)}[data-theme=modus-modern-light] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-sm~modus-wc-input-label .modus-wc-input-label,[data-theme=modus-modern-dark] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-sm~modus-wc-input-label .modus-wc-input-label{font-size:var(--modus-wc-font-size-md);line-height:var(--modus-wc-line-height-md)}[data-theme=modus-modern-light] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-md,[data-theme=modus-modern-dark] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-md{--handleoffset:var(--modus-wc-spacing-lg);height:var(--modus-wc-spacing-xl);width:var(--modus-wc-size-md)}[data-theme=modus-modern-light] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-md~modus-wc-input-label .modus-wc-input-label,[data-theme=modus-modern-dark] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-md~modus-wc-input-label .modus-wc-input-label{font-size:var(--modus-wc-font-size-lg);line-height:var(--modus-wc-line-height-md)}[data-theme=modus-modern-light] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-lg,[data-theme=modus-modern-dark] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-lg{--handleoffset:var(--modus-wc-spacing-xl);height:var(--modus-wc-spacing-2xl);width:var(--modus-wc-size-xl)}[data-theme=modus-modern-light] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-lg~modus-wc-input-label .modus-wc-input-label,[data-theme=modus-modern-dark] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-lg~modus-wc-input-label .modus-wc-input-label{font-size:var(--modus-wc-font-size-xl);line-height:var(--modus-wc-line-height-lg)}[data-theme=modus-modern-dark] modus-wc-switch modus-wc-input-label .modus-wc-input-label{color:var(--modus-wc-color-gray-light)}[data-theme=modus-modern-dark] modus-wc-switch .modus-wc-toggle{--fallback-b1:var(--modus-wc-color-gray-9)}";
const ModusWcSwitch = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.inputBlur = index.createEvent(this, "inputBlur", 7);
this.inputChange = index.createEvent(this, "inputChange", 7);
this.inputFocus = index.createEvent(this, "inputFocus", 7);
this.inheritedAttributes = {};
this.resolveEffectiveId = utils.createEffectiveIdResolver();
/** Custom CSS class to apply to the inner div. */
this.customClass = '';
/** The disabled state of the switch. */
this.disabled = false;
/** The indeterminate state of the switch. */
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 switch. */
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() {
// Auto-inject CSS if component is used inside user's shadow DOM
baseComponent.handleShadowDOMStyles(this.el);
if (!this.el.ariaLabel) {
this.el.ariaLabel = 'Switch button';
}
this.inheritedAttributes = utils.inheritAriaAttributes(this.el);
}
getClasses() {
const classList = ['modus-wc-toggle'];
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() {
const effectiveId = this.resolveEffectiveId(this.inputId);
const labelSize = this.size && constants.DAISY_TO_MODUS_LABEL_SIZE[this.size];
return (index.h(index.Host, { key: '75399153e98c3904d1f4876a6b6ec91390942571', class: "modus-wc-switch-host" }, index.h("input", Object.assign({ key: '39f2aba1ce81bad5104eddb136a8365372113fb8', "aria-checked": this.indeterminate ? 'mixed' : this.value, "aria-disabled": this.disabled, checked: this.value, class: this.getClasses(), disabled: this.disabled, id: effectiveId, name: this.name, onBlur: this.handleBlur, onFocus: this.handleFocus, onInput: this.handleInput, required: this.required, role: "switch", tabIndex: this.inputTabIndex, type: "checkbox" }, this.inheritedAttributes)), this.label && (index.h("modus-wc-input-label", { key: '8ae47f5b66801b1cfcae7bf8d586121c900eb527', forId: effectiveId, labelText: this.label, required: this.required, size: labelSize }))));
}
get el() { return index.getElement(this); }
};
ModusWcSwitch.style = modusWcSwitchCss;
exports.modus_wc_switch = ModusWcSwitch;