@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
127 lines (122 loc) • 15.1 kB
JavaScript
import { r as registerInstance, d as createEvent, h, e as Host, g as getElement } from './index-C1-Dpkp7.js';
import { C as CloseSolidIcon } from './close-solid.icon-CtOl3dDw.js';
import { S as SearchSolidIcon } from './search-solid.icon-BIJZ1Fqt.js';
import { h as handleShadowDOMStyles } from './base-component-tWS3Egrk.js';
import { c as createEffectiveIdResolver, i as inheritAriaAttributes, a as inheritAttributes } from './utils-DN2BGzSQ.js';
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 input{background-color:var(--modus-wc-color-base-page)}modus-wc-text-input .modus-wc-input:has(>input[disabled])>input[disabled]{background-color:var(--modus-wc-color-base-200)}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{background-color:var(--modus-wc-color-base-page)}modus-wc-text-input .modus-wc-text-input.modus-wc-input.modus-wc-input-sm{padding:0 var(--modus-wc-spacing-sm)}modus-wc-text-input .modus-wc-text-input.modus-wc-input.modus-wc-input-sm input{max-height:var(--modus-wc-size-xs)}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{font-size:var(--modus-wc-font-size-md)}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{font-size:var(--modus-wc-font-size-lg)}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 input,[data-theme=connect-dark] modus-wc-text-input input{font-weight:var(--modus-wc-font-weight-normal)}[data-theme=connect-light] modus-wc-text-input input::placeholder,[data-theme=connect-dark] modus-wc-text-input input::placeholder{color:#9d9da6;font-style:italic;font-weight:var(--modus-wc-font-weight-normal);opacity:1}[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 = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.clearClick = createEvent(this, "clearClick", 7);
this.inputBlur = createEvent(this, "inputBlur", 7);
this.inputChange = createEvent(this, "inputChange", 7);
this.inputFocus = createEvent(this, "inputFocus", 7);
this.inheritedAttributes = {};
this.resolveEffectiveId = createEffectiveIdResolver();
/** 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() {
// Auto-inject CSS if component is used inside user's shadow DOM
handleShadowDOMStyles(this.el);
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.resolveEffectiveId(this.inputId);
const hasCustomIcon = !!this.el.querySelector('[slot="custom-icon"]');
return (h(Host, { key: '36914061ff7cf20fc92d586a95c9664d80772372' }, this.label && (h("modus-wc-input-label", { key: '7f79b675e9940d14d90e14fe2a3f5b2b72916a02', forId: effectiveId, labelText: this.label, required: this.required, size: this.size })), h("label", { key: 'a3628a31c97375b727fecf487a4141c2d3c76cb5', 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: 'ae9b23a1d3fef64880709e34f3ceafc5a4f9be46', "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: '7bed8a4e252375fceb46d63a00f2520a058ba730', class: `modus-wc-clear-icon-container ${showClear ? 'modus-wc-clear-icon-visible' : 'modus-wc-clear-icon-hidden'}` }, h(CloseSolidIcon, { key: '6cd2a6cc4b44620dbff55df69065ef0f6c2d91c2', 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: 'c8b0ac169d26df57b81e0fb70ab335a46d4077d5', level: this.feedback.level, message: this.feedback.message, size: this.size }))));
}
get el() { return getElement(this); }
};
ModusWcTextInput.style = modusWcTextInputCss;
export { ModusWcTextInput as modus_wc_text_input };