@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
183 lines (177 loc) • 16.2 kB
JavaScript
import { h, p as proxyCustomElement, H, d as createEvent, c as Host } from './p-X1tirp06.js';
import { C as CloseSolidIcon } from './p-DTZ1OQY1.js';
import { g as generateElementId, i as inheritAriaAttributes, c as inheritAttributes } from './p-VPqXjOQn.js';
import { d as defineCustomElement$3 } from './p-s6LDESOI.js';
import { d as defineCustomElement$2 } from './p-kjsS48iG.js';
import { d as defineCustomElement$1 } from './p-DtlnhsZ5.js';
const SearchSolidIcon = ({ className }) => (h("svg", { "aria-hidden": "true", class: className || '', fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
h("path", { d: "m16.38 14.92-.66.05-.41-.41c2.44-2.81 2.28-7.1-.5-9.7S7.8 2.4 5.17 4.94a6.99 6.99 0 0 0-.08 9.98c2.61 2.61 6.77 2.72 9.52.34l.41.41-.05.65 3.89 3.89a.996.996 0 1 0 1.41-1.41l-3.88-3.88Zm-2.81-1.41a5.016 5.016 0 0 1-7.08 0c-1.95-1.95-1.95-5.13 0-7.08s5.13-1.95 7.08 0 1.95 5.13 0 7.08" })));
const convertPropsToClasses = ({ bordered, disabled, feedback, readOnly, size, }) => {
let classes = '';
if (bordered) {
classes = `${classes} modus-wc-input-bordered`;
}
if (disabled) {
classes = `${classes} modus-wc-input-disabled`;
}
if (feedback) {
classes = `${classes} modus-wc-input--${feedback.level}`;
}
if (readOnly) {
classes = `${classes} modus-wc-text-input--readonly`;
}
if (size) {
classes = `${classes} modus-wc-input-${size}`;
}
return classes.trim();
};
const modusWcTextInputCss = "modus-wc-text-input .modus-wc-input{border-bottom-width:var(--input-bottom-border-width)}modus-wc-text-input .modus-wc-input--error{border-color:var(--modus-wc-color-error) !important}modus-wc-text-input .modus-wc-input--info{border-color:var(--modus-wc-color-info) !important}modus-wc-text-input .modus-wc-input--success{border-color:var(--modus-wc-color-success) !important}modus-wc-text-input .modus-wc-input--warning{border-color:var(--modus-wc-color-warning) !important}modus-wc-text-input .modus-wc-input-xs{height:var(--modus-wc-size-xs);min-height:var(--modus-wc-size-xs)}modus-wc-text-input .modus-wc-input-sm{height:var(--modus-wc-size-sm);min-height:var(--modus-wc-size-sm)}modus-wc-text-input .modus-wc-input-md{height:var(--modus-wc-size-md);min-height:var(--modus-wc-size-md)}modus-wc-text-input .modus-wc-input-lg{height:var(--modus-wc-size-lg);min-height:var(--modus-wc-size-lg)}modus-wc-text-input .modus-wc-input-xl{height:var(--modus-wc-size-xl);min-height:var(--modus-wc-size-xl)}modus-wc-text-input .modus-wc-input-label{padding-bottom:var(--modus-wc-spacing-sm)}modus-wc-text-input .modus-wc-text-input.modus-wc-input{padding:0 var(--modus-wc-spacing-sm)}modus-wc-text-input .modus-wc-text-input.modus-wc-input.modus-wc-input-sm .modus-wc-text-input-icon:not(.modus-wc-text-input-icon-custom){height:var(--modus-wc-line-height-sm);width:var(--modus-wc-line-height-sm)}modus-wc-text-input .modus-wc-text-input.modus-wc-input.modus-wc-input-md .modus-wc-text-input-icon:not(.modus-wc-text-input-icon-custom){height:var(--modus-wc-line-height-md);width:var(--modus-wc-line-height-md)}modus-wc-text-input .modus-wc-text-input.modus-wc-input.modus-wc-input-lg .modus-wc-text-input-icon:not(.modus-wc-text-input-icon-custom){height:var(--modus-wc-line-height-lg);width:var(--modus-wc-line-height-lg)}modus-wc-text-input .modus-wc-text-input.modus-wc-input .modus-wc-text-input-icon.modus-wc-text-input-icon-clear{cursor:pointer}modus-wc-text-input .modus-wc-text-input.modus-wc-input .modus-wc-text-input-icon.modus-wc-text-input-icon-custom{align-items:center;display:flex;flex-shrink:0;justify-content:center}modus-wc-text-input .modus-wc-text-input.modus-wc-input .modus-wc-clear-icon-container{align-items:center;display:flex;justify-content:center;min-width:var(--modus-wc-line-height-md)}modus-wc-text-input .modus-wc-text-input.modus-wc-input .modus-wc-clear-icon-container.modus-wc-clear-icon-hidden{pointer-events:none;visibility:hidden}modus-wc-text-input .modus-wc-text-input.modus-wc-input .modus-wc-clear-icon-container.modus-wc-clear-icon-visible{visibility:visible}modus-wc-text-input .modus-wc-text-input.modus-wc-input.modus-wc-input-sm .modus-wc-clear-icon-container{min-width:var(--modus-wc-line-height-sm)}modus-wc-text-input .modus-wc-text-input.modus-wc-input.modus-wc-input-lg .modus-wc-clear-icon-container{min-width:var(--modus-wc-line-height-lg)}[data-theme=modus-classic-light] modus-wc-text-input .modus-wc-text-input.modus-wc-input,[data-theme=modus-classic-dark] modus-wc-text-input .modus-wc-text-input.modus-wc-input{border-radius:var(--modus-wc-border-radius-md)}[data-theme=modus-classic-light] modus-wc-text-input .modus-wc-text-input.modus-wc-input.modus-wc-input-sm,[data-theme=modus-classic-dark] modus-wc-text-input .modus-wc-text-input.modus-wc-input.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);padding:var(--modus-wc-spacing-sm) var(--modus-wc-spacing-xs)}[data-theme=modus-classic-light] modus-wc-text-input .modus-wc-text-input.modus-wc-input.modus-wc-input-md,[data-theme=modus-classic-dark] modus-wc-text-input .modus-wc-text-input.modus-wc-input.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);padding:var(--modus-wc-spacing-sm)}[data-theme=modus-classic-light] modus-wc-text-input .modus-wc-text-input.modus-wc-input.modus-wc-input-lg,[data-theme=modus-classic-dark] modus-wc-text-input .modus-wc-text-input.modus-wc-input.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);padding:var(--modus-wc-spacing-md) var(--modus-wc-spacing-sm)}[data-theme=modus-classic-light] modus-wc-text-input .modus-wc-text-input.modus-wc-input:focus-within,[data-theme=modus-classic-dark] modus-wc-text-input .modus-wc-text-input.modus-wc-input:focus-within{border-width:var(--modus-wc-border-width-sm);box-shadow:none;outline:none}[data-theme=modus-classic-light] modus-wc-text-input .modus-wc-text-input.modus-wc-input .modus-wc-text-input-icon.modus-wc-text-input-icon-clear:focus:not(:focus-visible),[data-theme=modus-classic-dark] modus-wc-text-input .modus-wc-text-input.modus-wc-input .modus-wc-text-input-icon.modus-wc-text-input-icon-clear:focus:not(:focus-visible){outline:none}[data-theme=modus-classic-light] modus-wc-text-input .modus-wc-text-input.modus-wc-input.modus-wc-text-input--readonly,[data-theme=modus-classic-dark] modus-wc-text-input .modus-wc-text-input.modus-wc-input.modus-wc-text-input--readonly{background-color:var(--modus-wc-color-base-100)}[data-theme=modus-classic-light] modus-wc-text-input .modus-wc-text-input.modus-wc-input.modus-wc-input-bordered:not(:disabled){border-color:var(--modus-wc-color-accent)}[data-theme=modus-classic-light] modus-wc-text-input .modus-wc-text-input.modus-wc-input.modus-wc-input-bordered:not(:disabled):focus-within{border-color:var(--modus-wc-color-blue-light)}[data-theme=modus-classic-light] modus-wc-text-input .modus-wc-text-input.modus-wc-input .modus-wc-text-input-icon{color:var(--modus-wc-color-gray-8)}[data-theme=modus-classic-dark] modus-wc-text-input .modus-wc-text-input.modus-wc-input .modus-wc-text-input-icon{color:var(--modus-wc-color-gray-2)}[data-theme=modus-classic-dark] modus-wc-text-input .modus-wc-text-input.modus-wc-input:focus-within{border-color:var(--modus-wc-color-highlight-blue)}[data-theme=connect-light] modus-wc-text-input .modus-wc-text-input,[data-theme=connect-dark] modus-wc-text-input .modus-wc-text-input{border-bottom-width:var(--input-bottom-border-width);outline-width:0 !important}[data-theme=connect-light] modus-wc-text-input .modus-wc-text-input:not(.modus-wc-select,.modus-wc-number-input),[data-theme=connect-dark] modus-wc-text-input .modus-wc-text-input:not(.modus-wc-select,.modus-wc-number-input){padding:0 var(--modus-wc-spacing-sm)}[data-theme=connect-light] modus-wc-text-input .modus-wc-text-input:hover,[data-theme=connect-dark] modus-wc-text-input .modus-wc-text-input:hover{border-bottom-color:var(--modus-wc-color-primary)}[data-theme=connect-light] modus-wc-text-input .modus-wc-text-input:active,[data-theme=connect-dark] modus-wc-text-input .modus-wc-text-input:active{border-bottom-color:var(--modus-wc-color-primary)}[data-theme=connect-light] modus-wc-text-input .modus-wc-text-input:focus,[data-theme=connect-dark] modus-wc-text-input .modus-wc-text-input:focus{border-bottom-color:var(--modus-wc-color-primary);outline:none}[data-theme=connect-light] modus-wc-text-input .modus-wc-text-input:focus-within,[data-theme=connect-dark] modus-wc-text-input .modus-wc-text-input:focus-within{border-bottom-color:var(--modus-wc-color-primary);outline:none}";
const ModusWcTextInput = /*@__PURE__*/ proxyCustomElement(class ModusWcTextInput extends H {
constructor() {
super();
this.__registerHost();
this.clearClick = createEvent(this, "clearClick");
this.inputBlur = createEvent(this, "inputBlur");
this.inputChange = createEvent(this, "inputChange");
this.inputFocus = createEvent(this, "inputFocus");
this.inheritedAttributes = {};
this.generatedId = generateElementId();
/** Indicates that the input should have a border. */
this.bordered = true;
/** Aria label for the clear icon button. */
this.clearAriaLabel = 'Clear text';
/** Custom CSS class to apply to the input. */
this.customClass = '';
/** Whether the form control is disabled. */
this.disabled = false;
/** Show the clear button within the input field. */
this.includeClear = false;
/** Show the search icon within the input field. */
this.includeSearch = false;
/** 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 = 'text';
/** The value of the control. */
this.value = '';
this.handleBlur = (event) => {
this.inputBlur.emit(event);
};
this.handleClearText = (event) => {
this.value = '';
this.inputChange.emit(event);
this.clearClick.emit();
};
this.handleFocus = (event) => {
this.inputFocus.emit(event);
};
this.handleInput = (event) => {
this.value = event.target.value;
this.inputChange.emit(event);
};
}
componentWillLoad() {
if (!this.el.ariaLabel) {
this.el.ariaLabel = this.placeholder || 'Text input';
}
this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes(this.el, ['spellcheck', 'inputmode']));
if (!this.el.hasAttribute('inputmode') &&
!this.inheritedAttributes.inputmode) {
this.el.setAttribute('inputmode', 'text');
}
}
getClasses() {
const classList = [
'modus-wc-text-input',
'modus-wc-input',
'modus-wc-w-full',
'modus-wc-flex',
'modus-wc-items-center',
'modus-wc-gap-1',
];
const propClasses = convertPropsToClasses({
bordered: this.bordered,
disabled: this.disabled,
feedback: this.feedback,
readOnly: this.readOnly,
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(' ');
}
shouldIncludeClear() {
return (!!this.includeClear && !this.disabled && !this.readOnly && !!this.value);
}
render() {
const showClear = this.shouldIncludeClear();
const effectiveId = this.inputId || this.generatedId;
const hasCustomIcon = !!this.el.querySelector('[slot="custom-icon"]');
return (h(Host, { key: '0e7bdce5e281ea9630c19cb0b8e7c791b9b84a9b' }, this.label && (h("modus-wc-input-label", { key: 'eddf5e49410f94cc182bc51b97e4ef91c3918322', forId: effectiveId, labelText: this.label, required: this.required, size: this.size })), h("label", { key: 'e9f5f5e880bb6610316c9cec6875608a13f59fc3', class: this.getClasses() }, hasCustomIcon ? (h("div", { class: "modus-wc-text-input-icon modus-wc-text-input-icon-custom" }, h("slot", { name: "custom-icon" }))) : (this.includeSearch && (h(SearchSolidIcon, { className: "modus-wc-text-input-icon modus-wc-text-input-icon-search" }))), h("input", Object.assign({ key: 'dc972a389b04a6d73afb93799431a52e5e163c96', "aria-required": this.required, autocapitalize: this.autoCapitalize, autocomplete: this.autoComplete, autocorrect: this.autoCorrect, class: "modus-wc-grow", disabled: this.disabled, enterkeyhint: this.enterkeyhint, id: effectiveId, maxlength: this.maxLength, minlength: this.minLength, name: this.name, onBlur: this.handleBlur, onFocus: this.handleFocus, onInput: this.handleInput, pattern: this.pattern, placeholder: this.placeholder, readonly: this.readOnly, required: this.required, tabIndex: this.inputTabIndex, type: this.type, value: this.value }, this.inheritedAttributes)), this.includeClear && (h("div", { key: '9ba4799eb5b808a7f5d01cf66738e10c3c6d8957', class: `modus-wc-clear-icon-container ${showClear ? 'modus-wc-clear-icon-visible' : 'modus-wc-clear-icon-hidden'}` }, h(CloseSolidIcon, { key: '3edd47bd185a5de2b2023f3472b8900cedb4b683', ariaLabel: this.clearAriaLabel, className: "modus-wc-text-input-icon modus-wc-text-input-icon-clear", decorative: false, onClear: this.handleClearText })))), this.feedback && (h("modus-wc-input-feedback", { key: 'f1fc2d8df7fe7973e9b669dead0abf9d74a41dd6', level: this.feedback.level, message: this.feedback.message, size: this.size }))));
}
get el() { return this; }
static get style() { return modusWcTextInputCss; }
}, [4, "modus-wc-text-input", {
"autoCapitalize": [1, "auto-capitalize"],
"autoComplete": [1, "auto-complete"],
"autoCorrect": [1, "auto-correct"],
"bordered": [4],
"clearAriaLabel": [1, "clear-aria-label"],
"customClass": [1, "custom-class"],
"disabled": [4],
"enterkeyhint": [1],
"feedback": [16],
"includeClear": [4, "include-clear"],
"includeSearch": [4, "include-search"],
"inputId": [1, "input-id"],
"inputTabIndex": [2, "input-tab-index"],
"label": [1],
"maxLength": [2, "max-length"],
"minLength": [2, "min-length"],
"name": [1],
"pattern": [1],
"placeholder": [1],
"readOnly": [4, "read-only"],
"required": [4],
"size": [1],
"type": [1],
"value": [1537]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["modus-wc-text-input", "modus-wc-icon", "modus-wc-input-feedback", "modus-wc-input-label"];
components.forEach(tagName => { switch (tagName) {
case "modus-wc-text-input":
if (!customElements.get(tagName)) {
customElements.define(tagName, ModusWcTextInput);
}
break;
case "modus-wc-icon":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "modus-wc-input-feedback":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
case "modus-wc-input-label":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
export { ModusWcTextInput as M, SearchSolidIcon as S, defineCustomElement as d };