@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
176 lines (170 loc) • 18.1 kB
JavaScript
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$4 } from './p-C8YB6DYg.js';
import { d as defineCustomElement$3 } from './p-DWQdP1KV.js';
import { d as defineCustomElement$2 } from './p-CXnOhVIy.js';
const convertPropsToClasses = ({ bordered, feedback, readOnly, size, }) => {
let classes = '';
if (bordered) {
classes = `${classes} modus-wc-input-bordered`;
}
if (feedback) {
classes = `${classes} modus-wc-input--${feedback.level}`;
}
if (readOnly) {
classes = `${classes} modus-wc-number-input--readonly`;
}
if (size) {
classes = `${classes} modus-wc-input-${size}`;
}
return classes.trim();
};
const modusWcNumberInputCss = "modus-wc-input .modus-wc-input--error{border-color:var(--modus-wc-color-error) !important}modus-wc-input .modus-wc-input--info{border-color:var(--modus-wc-color-info) !important}modus-wc-input .modus-wc-input--success{border-color:var(--modus-wc-color-success) !important}modus-wc-input .modus-wc-input--warning{border-color:var(--modus-wc-color-warning) !important}modus-wc-number-input .modus-wc-input-label{padding-bottom:var(--modus-wc-spacing-sm)}modus-wc-number-input .modus-wc-number-input-container .modus-wc-input-currency{background-color:var(--modus-wc-color-base-100);border:var(--modus-wc-border-width-xs) solid transparent;color:var(--modus-wc-color-base-content);white-space:nowrap}[data-theme=modus-classic-light] modus-wc-number-input .modus-wc-number-input-container .modus-wc-input-currency,[data-theme=modus-classic-dark] modus-wc-number-input .modus-wc-number-input-container .modus-wc-input-currency{background-color:var(--modus-wc-color-gray-2);border:var(--modus-wc-border-width-xs) solid transparent;color:var(--modus-wc-color-trimble-gray);white-space:nowrap}[data-theme=modus-classic-light] modus-wc-number-input .modus-wc-number-input-container .modus-wc-input-currency.modus-wc-input-sm,[data-theme=modus-classic-dark] modus-wc-number-input .modus-wc-number-input-container .modus-wc-input-currency.modus-wc-input-sm{padding:0 var(--modus-wc-spacing-xs)}[data-theme=modus-classic-light] modus-wc-number-input .modus-wc-number-input-container .modus-wc-input-currency.modus-wc-input-md,[data-theme=modus-classic-dark] modus-wc-number-input .modus-wc-number-input-container .modus-wc-input-currency.modus-wc-input-md{padding:0 var(--modus-wc-spacing-sm)}[data-theme=modus-classic-light] modus-wc-number-input .modus-wc-number-input-container .modus-wc-input-currency.modus-wc-input-lg,[data-theme=modus-classic-dark] modus-wc-number-input .modus-wc-number-input-container .modus-wc-input-currency.modus-wc-input-lg{padding:0 var(--modus-wc-spacing-md)}[data-theme=modus-classic-light] modus-wc-number-input .modus-wc-number-input-container .modus-wc-number-input.modus-wc-input.modus-wc-input-sm,[data-theme=modus-classic-dark] modus-wc-number-input .modus-wc-number-input-container .modus-wc-number-input.modus-wc-input.modus-wc-input-sm{padding:var(--modus-wc-spacing-sm) var(--modus-wc-spacing-xs);padding-inline-end:0}[data-theme=modus-classic-light] modus-wc-number-input .modus-wc-number-input-container .modus-wc-number-input.modus-wc-input.modus-wc-input-md,[data-theme=modus-classic-dark] modus-wc-number-input .modus-wc-number-input-container .modus-wc-number-input.modus-wc-input.modus-wc-input-md{padding:var(--modus-wc-spacing-sm);padding-inline-end:var(--modus-wc-spacing-lg)}[data-theme=modus-classic-light] modus-wc-number-input .modus-wc-number-input-container .modus-wc-number-input.modus-wc-input.modus-wc-input-lg,[data-theme=modus-classic-dark] modus-wc-number-input .modus-wc-number-input-container .modus-wc-number-input.modus-wc-input.modus-wc-input-lg{padding:var(--modus-wc-spacing-md) var(--modus-wc-spacing-sm);padding-inline-end:var(--modus-wc-spacing-xl)}[data-theme=modus-classic-light] modus-wc-number-input .modus-wc-number-input-container .modus-wc-number-input.modus-wc-input:focus,[data-theme=modus-classic-dark] modus-wc-number-input .modus-wc-number-input-container .modus-wc-number-input.modus-wc-input:focus{border-color:var(--modus-wc-color-highlight-blue);border-width:var(--modus-wc-border-width-sm);box-shadow:none;outline:none}[data-theme=modus-classic-light] modus-wc-number-input .modus-wc-number-input-container .modus-wc-number-input.modus-wc-input.modus-wc-number-input--readonly,[data-theme=modus-classic-dark] modus-wc-number-input .modus-wc-number-input-container .modus-wc-number-input.modus-wc-input.modus-wc-number-input--readonly{background-color:var(--modus-wc-color-base-100)}[data-theme=modus-classic-light] modus-wc-number-input .modus-wc-number-input-container .modus-wc-number-input::-webkit-inner-spin-button,[data-theme=modus-classic-light] modus-wc-number-input .modus-wc-number-input-container .modus-wc-number-input::-webkit-outer-spin-button,[data-theme=modus-classic-light] modus-wc-number-input .modus-wc-number-input-container .modus-wc-input-currency::-webkit-inner-spin-button,[data-theme=modus-classic-light] modus-wc-number-input .modus-wc-number-input-container .modus-wc-input-currency::-webkit-outer-spin-button,[data-theme=modus-classic-dark] modus-wc-number-input .modus-wc-number-input-container .modus-wc-number-input::-webkit-inner-spin-button,[data-theme=modus-classic-dark] modus-wc-number-input .modus-wc-number-input-container .modus-wc-number-input::-webkit-outer-spin-button,[data-theme=modus-classic-dark] modus-wc-number-input .modus-wc-number-input-container .modus-wc-input-currency::-webkit-inner-spin-button,[data-theme=modus-classic-dark] modus-wc-number-input .modus-wc-number-input-container .modus-wc-input-currency::-webkit-outer-spin-button{margin-bottom:auto;margin-top:auto}[data-theme=modus-classic-light] modus-wc-number-input .modus-wc-number-input-container .modus-wc-number-input.modus-wc-input-sm,[data-theme=modus-classic-light] modus-wc-number-input .modus-wc-number-input-container .modus-wc-input-currency.modus-wc-input-sm,[data-theme=modus-classic-dark] modus-wc-number-input .modus-wc-number-input-container .modus-wc-number-input.modus-wc-input-sm,[data-theme=modus-classic-dark] modus-wc-number-input .modus-wc-number-input-container .modus-wc-input-currency.modus-wc-input-sm{font-size:var(--modus-wc-font-size-sm);height:var(--modus-wc-input-height-sm);line-height:var(--modus-wc-line-height-sm)}[data-theme=modus-classic-light] modus-wc-number-input .modus-wc-number-input-container .modus-wc-number-input.modus-wc-input-sm::-webkit-inner-spin-button,[data-theme=modus-classic-light] modus-wc-number-input .modus-wc-number-input-container .modus-wc-number-input.modus-wc-input-sm::-webkit-outer-spin-button,[data-theme=modus-classic-light] modus-wc-number-input .modus-wc-number-input-container .modus-wc-input-currency.modus-wc-input-sm::-webkit-inner-spin-button,[data-theme=modus-classic-light] modus-wc-number-input .modus-wc-number-input-container .modus-wc-input-currency.modus-wc-input-sm::-webkit-outer-spin-button,[data-theme=modus-classic-dark] modus-wc-number-input .modus-wc-number-input-container .modus-wc-number-input.modus-wc-input-sm::-webkit-inner-spin-button,[data-theme=modus-classic-dark] modus-wc-number-input .modus-wc-number-input-container .modus-wc-number-input.modus-wc-input-sm::-webkit-outer-spin-button,[data-theme=modus-classic-dark] modus-wc-number-input .modus-wc-number-input-container .modus-wc-input-currency.modus-wc-input-sm::-webkit-inner-spin-button,[data-theme=modus-classic-dark] modus-wc-number-input .modus-wc-number-input-container .modus-wc-input-currency.modus-wc-input-sm::-webkit-outer-spin-button{font-size:var(--modus-wc-font-size-sm);height:var(--modus-wc-input-height-sm)}[data-theme=modus-classic-light] modus-wc-number-input .modus-wc-number-input-container .modus-wc-number-input.modus-wc-input-md,[data-theme=modus-classic-light] modus-wc-number-input .modus-wc-number-input-container .modus-wc-input-currency.modus-wc-input-md,[data-theme=modus-classic-dark] modus-wc-number-input .modus-wc-number-input-container .modus-wc-number-input.modus-wc-input-md,[data-theme=modus-classic-dark] modus-wc-number-input .modus-wc-number-input-container .modus-wc-input-currency.modus-wc-input-md{font-size:var(--modus-wc-font-size-md);height:var(--modus-wc-input-height-md);line-height:var(--modus-wc-line-height-md)}[data-theme=modus-classic-light] modus-wc-number-input .modus-wc-number-input-container .modus-wc-number-input.modus-wc-input-md::-webkit-inner-spin-button,[data-theme=modus-classic-light] modus-wc-number-input .modus-wc-number-input-container .modus-wc-number-input.modus-wc-input-md::-webkit-outer-spin-button,[data-theme=modus-classic-light] modus-wc-number-input .modus-wc-number-input-container .modus-wc-input-currency.modus-wc-input-md::-webkit-inner-spin-button,[data-theme=modus-classic-light] modus-wc-number-input .modus-wc-number-input-container .modus-wc-input-currency.modus-wc-input-md::-webkit-outer-spin-button,[data-theme=modus-classic-dark] modus-wc-number-input .modus-wc-number-input-container .modus-wc-number-input.modus-wc-input-md::-webkit-inner-spin-button,[data-theme=modus-classic-dark] modus-wc-number-input .modus-wc-number-input-container .modus-wc-number-input.modus-wc-input-md::-webkit-outer-spin-button,[data-theme=modus-classic-dark] modus-wc-number-input .modus-wc-number-input-container .modus-wc-input-currency.modus-wc-input-md::-webkit-inner-spin-button,[data-theme=modus-classic-dark] modus-wc-number-input .modus-wc-number-input-container .modus-wc-input-currency.modus-wc-input-md::-webkit-outer-spin-button{font-size:var(--modus-wc-font-size-md);height:var(--modus-wc-input-height-md)}[data-theme=modus-classic-light] modus-wc-number-input .modus-wc-number-input-container .modus-wc-number-input.modus-wc-input-lg,[data-theme=modus-classic-light] modus-wc-number-input .modus-wc-number-input-container .modus-wc-input-currency.modus-wc-input-lg,[data-theme=modus-classic-dark] modus-wc-number-input .modus-wc-number-input-container .modus-wc-number-input.modus-wc-input-lg,[data-theme=modus-classic-dark] modus-wc-number-input .modus-wc-number-input-container .modus-wc-input-currency.modus-wc-input-lg{font-size:var(--modus-wc-font-size-lg);height:var(--modus-wc-input-height-lg);line-height:var(--modus-wc-line-height-xl)}[data-theme=modus-classic-light] modus-wc-number-input .modus-wc-number-input-container .modus-wc-number-input.modus-wc-input-lg::-webkit-inner-spin-button,[data-theme=modus-classic-light] modus-wc-number-input .modus-wc-number-input-container .modus-wc-number-input.modus-wc-input-lg::-webkit-outer-spin-button,[data-theme=modus-classic-light] modus-wc-number-input .modus-wc-number-input-container .modus-wc-input-currency.modus-wc-input-lg::-webkit-inner-spin-button,[data-theme=modus-classic-light] modus-wc-number-input .modus-wc-number-input-container .modus-wc-input-currency.modus-wc-input-lg::-webkit-outer-spin-button,[data-theme=modus-classic-dark] modus-wc-number-input .modus-wc-number-input-container .modus-wc-number-input.modus-wc-input-lg::-webkit-inner-spin-button,[data-theme=modus-classic-dark] modus-wc-number-input .modus-wc-number-input-container .modus-wc-number-input.modus-wc-input-lg::-webkit-outer-spin-button,[data-theme=modus-classic-dark] modus-wc-number-input .modus-wc-number-input-container .modus-wc-input-currency.modus-wc-input-lg::-webkit-inner-spin-button,[data-theme=modus-classic-dark] modus-wc-number-input .modus-wc-number-input-container .modus-wc-input-currency.modus-wc-input-lg::-webkit-outer-spin-button{font-size:var(--modus-wc-font-size-lg);height:3rem}";
const ModusWcNumberInput$1 = /*@__PURE__*/ proxyCustomElement(class ModusWcNumberInput extends H {
constructor() {
super();
this.__registerHost();
this.inputBlur = createEvent(this, "inputBlur");
this.inputChange = createEvent(this, "inputChange");
this.inputFocus = createEvent(this, "inputFocus");
this.inheritedAttributes = {};
/** Indicates that the input should have a border. */
this.bordered = true;
/** The currency symbol to display. */
this.currencySymbol = '';
/** Custom CSS class to apply to the input. */
this.customClass = '';
/** Whether the form control is disabled. */
this.disabled = false;
/**
* Hints at the type of data that might be entered by the user while editing the element or its contents.
* This allows a browser to display an appropriate virtual keyboard.
*/
this.inputMode = 'numeric';
/** Text that appears in the form control when it has no value set. */
this.placeholder = '';
/** Whether the value is editable. */
this.readOnly = false;
/** A value is required for the form to be submittable. */
this.required = false;
/** The size of the input. */
this.size = 'md';
/** Type of form control. */
this.type = 'number';
/** 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.inputChange.emit(event);
};
}
componentWillLoad() {
if (!this.el.ariaLabel) {
this.el.ariaLabel = this.placeholder || 'Number input';
}
this.inheritedAttributes = inheritAriaAttributes(this.el);
}
getSharedClasses(styleList) {
const classList = [...styleList];
const propClasses = convertPropsToClasses({
bordered: this.bordered,
feedback: this.feedback,
readOnly: this.readOnly,
size: this.size,
});
// The order CSS classes are added matters to CSS specificity
if (propClasses)
classList.push(propClasses);
return classList.join(' ');
}
getInputClasses() {
const classList = [
'modus-wc-number-input',
'modus-wc-input',
'modus-wc-w-full',
];
if (this.currencySymbol) {
classList.push('modus-wc-join-item');
}
return this.getSharedClasses(classList);
}
getCurrencyClasses() {
const classList = [
'modus-wc-input-currency',
'modus-wc-join-item',
'modus-wc-flex',
'modus-wc-items-center',
];
return this.getSharedClasses(classList);
}
getWrapperClasses() {
const classList = ['modus-wc-number-input-container'];
if (this.currencySymbol) {
classList.push('modus-wc-join');
classList.push('modus-wc-flex');
}
return classList.join(' ');
}
render() {
return (h(Host, { key: '0688c302a1d6e2ef33cdaaa4dd505b32c2f936de', class: this.customClass }, this.label && (h("modus-wc-input-label", { key: '586f51f3ef69afae292771dd8412b35bd2b42632', forId: this.inputId, labelText: this.label, required: this.required, size: this.size })), h("div", { key: '0b531ccbd6bbd10017dbb343acb78ecded5e7d90', class: this.getWrapperClasses() }, this.currencySymbol && (h("div", { key: 'f8a5899027f25b0d6f5a963a1813fabe3d8985bd', class: this.getCurrencyClasses() }, this.currencySymbol)), h("input", Object.assign({ key: '120373fb433d051a5f5623cea2db8f1f99ee380f', "aria-placeholder": this.placeholder, "aria-required": this.required, autocomplete: this.autoComplete, class: this.getInputClasses(), disabled: this.disabled, id: this.inputId, inputmode: this.inputMode, max: this.max, min: this.min, name: this.name, onBlur: this.handleBlur, onFocus: this.handleFocus, onInput: this.handleInput, placeholder: this.placeholder, readonly: this.readOnly, required: this.required, step: this.step, tabIndex: this.inputTabIndex, type: this.type, value: this.value }, this.inheritedAttributes))), this.feedback && (h("modus-wc-input-feedback", { key: '475e95b5c72d1d130982bc0e5017615ae05ddf0d', level: this.feedback.level, message: this.feedback.message, size: this.size }))));
}
get el() { return this; }
static get style() { return modusWcNumberInputCss; }
}, [0, "modus-wc-number-input", {
"autoComplete": [1, "auto-complete"],
"bordered": [4],
"currencySymbol": [1, "currency-symbol"],
"customClass": [1, "custom-class"],
"disabled": [4],
"feedback": [16],
"inputId": [1, "input-id"],
"inputMode": [1, "input-mode"],
"inputTabIndex": [2, "input-tab-index"],
"label": [1],
"max": [2],
"min": [2],
"name": [1],
"placeholder": [1],
"readOnly": [4, "read-only"],
"required": [4],
"size": [1],
"step": [2],
"type": [1],
"value": [1537]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["modus-wc-number-input", "modus-wc-icon", "modus-wc-input-feedback", "modus-wc-input-label"];
components.forEach(tagName => { switch (tagName) {
case "modus-wc-number-input":
if (!customElements.get(tagName)) {
customElements.define(tagName, ModusWcNumberInput$1);
}
break;
case "modus-wc-icon":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "modus-wc-input-feedback":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "modus-wc-input-label":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
const ModusWcNumberInput = ModusWcNumberInput$1;
const defineCustomElement = defineCustomElement$1;
export { ModusWcNumberInput, defineCustomElement };