@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
177 lines (171 loc) • 10.4 kB
JavaScript
import { p as proxyCustomElement, H, e as createEvent, h, c as Host } from './p-BMvVSi6Y.js';
import { g as generateRandomId, 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-time-input--readonly`;
}
if (size) {
classes = `${classes} modus-wc-input-${size}`;
}
return classes.trim();
};
const modusWcTimeInputCss = ".modus-wc-input--error{border-color:var(--modus-wc-color-error) !important}.modus-wc-input--info{border-color:var(--modus-wc-color-info) !important}.modus-wc-input--success{border-color:var(--modus-wc-color-success) !important}.modus-wc-input--warning{border-color:var(--modus-wc-color-warning) !important}modus-wc-time-input .modus-wc-input-label{padding-bottom:var(--modus-wc-spacing-sm)}[data-theme=modus-classic-light] modus-wc-time-input .modus-wc-time-input.modus-wc-input,[data-theme=modus-classic-dark] modus-wc-time-input .modus-wc-time-input.modus-wc-input{border-radius:var(--modus-wc-border-radius-md)}[data-theme=modus-classic-light] modus-wc-time-input .modus-wc-time-input.modus-wc-input.modus-wc-input-sm,[data-theme=modus-classic-dark] modus-wc-time-input .modus-wc-time-input.modus-wc-input.modus-wc-input-sm{font-size:var(--modus-wc-font-size-sm);height:var(--modus-wc-input-height-sm);padding:var(--modus-wc-spacing-sm) var(--modus-wc-spacing-xs)}[data-theme=modus-classic-light] modus-wc-time-input .modus-wc-time-input.modus-wc-input.modus-wc-input-md,[data-theme=modus-classic-dark] modus-wc-time-input .modus-wc-time-input.modus-wc-input.modus-wc-input-md{font-size:var(--modus-wc-font-size-md);height:var(--modus-wc-input-height-md);padding:var(--modus-wc-spacing-sm)}[data-theme=modus-classic-light] modus-wc-time-input .modus-wc-time-input.modus-wc-input.modus-wc-input-lg,[data-theme=modus-classic-dark] modus-wc-time-input .modus-wc-time-input.modus-wc-input.modus-wc-input-lg{font-size:var(--modus-wc-font-size-lg);height:var(--modus-wc-input-height-lg);padding:var(--modus-wc-spacing-md) var(--modus-wc-spacing-sm)}[data-theme=modus-classic-light] modus-wc-time-input .modus-wc-time-input.modus-wc-input:focus,[data-theme=modus-classic-light] modus-wc-time-input .modus-wc-time-input.modus-wc-input:focus-within,[data-theme=modus-classic-dark] modus-wc-time-input .modus-wc-time-input.modus-wc-input:focus,[data-theme=modus-classic-dark] modus-wc-time-input .modus-wc-time-input.modus-wc-input:focus-within{border-color:var(--modus-wc-color-blue-light);border-width:var(--modus-wc-border-width-sm);box-shadow:none;outline:none}[data-theme=modus-classic-light] modus-wc-time-input .modus-wc-time-input.modus-wc-input.modus-wc-time-input--readonly,[data-theme=modus-classic-dark] modus-wc-time-input .modus-wc-time-input.modus-wc-input.modus-wc-time-input--readonly{background-color:var(--modus-wc-color-base-100)}[data-theme=modus-classic-light] modus-wc-time-input .modus-wc-time-input.modus-wc-input.modus-wc-input-bordered:not(:disabled):not(:focus){border-color:var(--modus-wc-color-gray-6)}[data-theme=modus-classic-dark] modus-wc-time-input .modus-wc-time-input.modus-wc-input{color-scheme:dark}[data-theme=modus-classic-dark] modus-wc-time-input .modus-wc-time-input.modus-wc-input:focus{border-color:var(--modus-wc-color-highlight-blue)}";
const ModusWcTimeInput$1 = /*@__PURE__*/ proxyCustomElement(class ModusWcTimeInput 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;
/** Custom CSS class to apply to the input. */
this.customClass = '';
/** The options to display in the time input dropdown. Options must be in `HH:mm` or `HH:mm:ss` format. */
this.datalistOptions = [];
/** Whether the form control is disabled. */
this.disabled = false;
/** Whether the value is editable. */
this.readOnly = false;
/** A value is required for the form to be submittable. */
this.required = false;
/**
* Displays the time input format as `HH:mm:ss` if `true`.
* Internally sets the `step` to 1 second.
* If a `step` value is provided, it will override this attribute.
*/
this.showSeconds = false;
/** The size of the input. */
this.size = 'md';
/**
* The value of the time input.
* Always in 24-hour format that includes leading zeros:
* `HH:mm` or `HH:mm:ss`, regardless of input format which is likely
* to be selected based on user's locale (or by the user agent).
* If time includes seconds the format is always `HH:mm:ss`.
*/
this.value = '';
this.handleBlur = (event) => {
this.inputBlur.emit(event);
};
this.handleFocus = (event) => {
this.inputFocus.emit(event);
};
this.handleInput = (event) => {
this.inputChange.emit(event);
};
/*
* The ID of the internal <datalist> element. Unique to each instance of the time input component.
* This is used as the `datalistId` id when `datalistOptions` are provided.
*/
this.internalDatalistId = `modus-wc-datalist-${generateRandomId(10)}`;
}
componentWillLoad() {
if (!this.el.ariaLabel) {
this.el.ariaLabel = 'Time input';
}
// if no datalistId value provided, use internal datalist id to enable time options
if (!this.datalistId) {
this.datalistId = this.internalDatalistId;
}
this.inheritedAttributes = inheritAriaAttributes(this.el);
}
getClasses() {
const classList = [
'modus-wc-time-input',
'modus-wc-input',
'modus-wc-w-full',
];
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);
if (this.customClass)
classList.push(this.customClass);
return classList.join(' ');
}
/*
* Conditionally renders the datalist element with the time options.
* If no time options are provided or the datalistId prop is not the default,
* the datalist element will not be rendered (returns `null`).
*/
renderDatalist() {
if (this.datalistOptions.length === 0 ||
this.datalistId !== this.internalDatalistId) {
return null;
}
return (h("datalist", { id: this.internalDatalistId }, this.datalistOptions.map((time) => (h("option", { value: time })))));
}
render() {
return (h(Host, { key: '8c8e1b589d39e62e9b83e316f9738aedc6ebf7b2' }, this.label && (h("modus-wc-input-label", { key: 'fc4cbc6467da2421f688a8741122135dc4c78446', forId: this.inputId, labelText: this.label, required: this.required, size: this.size })), h("input", Object.assign({ key: '9b09a9b1e50658d64e3641258c60c91a04593f81', "aria-required": this.required, autocomplete: this.autoComplete, class: this.getClasses(), disabled: this.disabled, id: this.inputId, list: this.datalistId, max: this.max, min: this.min, name: this.name, onBlur: this.handleBlur, onFocus: this.handleFocus, onInput: this.handleInput, readonly: this.readOnly, required: this.required, step: this.step || this.showSeconds ? 1 : 60, tabIndex: this.inputTabIndex, type: "time", value: this.value }, this.inheritedAttributes)), this.renderDatalist(), this.feedback && (h("modus-wc-input-feedback", { key: '34f1d83cf3e936002d100343510a6df1ca61fe0a', level: this.feedback.level, message: this.feedback.message, size: this.size }))));
}
get el() { return this; }
static get style() { return modusWcTimeInputCss; }
}, [0, "modus-wc-time-input", {
"autoComplete": [1, "auto-complete"],
"bordered": [4],
"customClass": [1, "custom-class"],
"datalistOptions": [16, "datalist-options"],
"disabled": [4],
"feedback": [16],
"inputId": [1, "input-id"],
"inputTabIndex": [2, "input-tab-index"],
"datalistId": [1025, "datalist-id"],
"label": [1],
"max": [1],
"min": [1],
"name": [1],
"readOnly": [4, "read-only"],
"required": [4],
"showSeconds": [4, "show-seconds"],
"size": [1],
"step": [2],
"value": [1537]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["modus-wc-time-input", "modus-wc-icon", "modus-wc-input-feedback", "modus-wc-input-label"];
components.forEach(tagName => { switch (tagName) {
case "modus-wc-time-input":
if (!customElements.get(tagName)) {
customElements.define(tagName, ModusWcTimeInput$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 ModusWcTimeInput = ModusWcTimeInput$1;
const defineCustomElement = defineCustomElement$1;
export { ModusWcTimeInput, defineCustomElement };