@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
110 lines (104 loc) • 7.43 kB
JavaScript
import { p as proxyCustomElement, H, h, F as Fragment, c as Host } from './p-BMvVSi6Y.js';
import { i as inheritAriaAttributes } from './p-COxr4v9W.js';
import { d as defineCustomElement$2 } from './p-CXnOhVIy.js';
const convertPropsToClasses = ({ variant, indeterminate, }) => {
let classes = '';
if (variant) {
switch (variant) {
case 'default':
classes = `${classes} modus-wc-progress modus-wc-w-full`;
break;
case 'radial':
classes = `${classes} modus-wc-radial-progress`;
break;
}
}
if (indeterminate && variant === 'radial') {
classes = `${classes} modus-wc-radial-progress--indeterminate`;
}
return classes.trim();
};
const modusWcProgressCss = "modus-wc-progress.modus-wc-progress-container .modus-wc-radial-progress-label{font-size:var(--modus-wc-font-size-md);margin:0 var(--modus-wc-spacing-lg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}modus-wc-progress.modus-wc-progress-container .modus-wc-progress{color:var(--modus-wc-color-primary)}modus-wc-progress.modus-wc-progress-container .modus-wc-radial-progress{color:var(--modus-wc-color-trimble-blue)}modus-wc-progress.modus-wc-progress-container .modus-wc-radial-progress.modus-wc-radial-progress--indeterminate{--value:var(--_value) !important;animation-duration:5s;animation-iteration-count:infinite;animation-name:grow;animation-timing-function:ease-in-out}[data-theme=modus-classic-light] modus-wc-progress .modus-wc-progress,[data-theme=modus-classic-dark] modus-wc-progress .modus-wc-progress{appearance:none;background-color:transparent;border:1px solid var(--modus-wc-color-gray-6);border-radius:var(--modus-wc-border-radius-sm);height:var(--modus-wc-line-height-sm);overflow:hidden;width:100%}[data-theme=modus-classic-light] modus-wc-progress .modus-wc-progress::-webkit-progress-value,[data-theme=modus-classic-dark] modus-wc-progress .modus-wc-progress::-webkit-progress-value{border-radius:var(--modus-wc-border-radius-sm)}[data-theme=modus-classic-light] modus-wc-progress .modus-wc-progress::-moz-progress-bar,[data-theme=modus-classic-dark] modus-wc-progress .modus-wc-progress::-moz-progress-bar{border-radius:var(--modus-wc-border-radius-sm)}[data-theme=modus-classic-light] modus-wc-progress .modus-wc-progress .modus-wc-progress-label,[data-theme=modus-classic-dark] modus-wc-progress .modus-wc-progress .modus-wc-progress-label{color:var(--modus-wc-color-white)}[data-theme=modus-classic-light] modus-wc-progress .modus-wc-progress::-webkit-progress-value{background-color:var(--modus-wc-color-trimble-blue)}[data-theme=modus-classic-light] modus-wc-progress .modus-wc-progress::-moz-progress-bar{background-color:var(--modus-wc-color-trimble-blue)}[data-theme=modus-classic-light] modus-wc-progress .modus-wc-progress:indeterminate{background-color:transparent;--progress-color:var(--modus-wc-color-trimble-blue)}[data-theme=modus-classic-dark] modus-wc-progress .modus-wc-progress::-webkit-progress-value{background-color:var(--modus-wc-color-highlight-blue)}[data-theme=modus-classic-dark] modus-wc-progress .modus-wc-progress::-moz-progress-bar{background-color:var(--modus-wc-color-highlight-blue)}[data-theme=modus-classic-dark] modus-wc-progress .modus-wc-progress:indeterminate{background-color:transparent;--progress-color:var(--modus-wc-color-highlight-blue)}.modus-wc-radial-progress.modus-wc-radial-progress--indeterminate{--value:var(--_value) !important;animation-duration:5s;animation-iteration-count:infinite;animation-name:grow;animation-timing-function:ease-in-out}[data-theme=modus-classic-light] .modus-wc-radial-progress{color:var(--modus-wc-color-primary)}[data-theme=modus-classic-dark] .modus-wc-radial-progress{color:var(--modus-wc-color-highlight-blue)}@property --_value{inherits:true;initial-value:0;syntax:\"<number>\"}@keyframes grow{0%{--_value:0}50%{--_value:100}100%{--_value:0}}";
const ModusWcProgress$1 = /*@__PURE__*/ proxyCustomElement(class ModusWcProgress extends H {
constructor() {
super();
this.__registerHost();
this.inheritedAttributes = {};
/** Custom CSS class to apply to the progress element. */
this.customClass = '';
/** The indeterminate state of the progress component. */
this.indeterminate = false;
/** The progress component's maximum value. */
this.max = 100;
/** The value of the progress component. */
this.value = 0;
/** The variant of the progress component. */
this.variant = 'default';
}
componentWillLoad() {
if (!this.el.ariaLabel) {
this.el.ariaLabel = 'Progress';
}
this.inheritedAttributes = inheritAriaAttributes(this.el);
}
getClasses() {
const classList = [];
const propClasses = convertPropsToClasses({
variant: this.variant,
indeterminate: this.indeterminate,
});
// 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(' ');
}
getPercentageValue() {
const safeValue = Math.min(Math.max(0, this.value), this.max);
return (safeValue / this.max) * 100;
}
render() {
const progressAriaAttributes = this.indeterminate
? { 'aria-hidden': 'true' }
: {
'aria-valuenow': this.value,
'aria-valuemin': 0,
'aria-valuemax': this.max,
};
const valueAttributes = this.indeterminate
? {}
: { max: this.max, value: this.value };
return (h(Host, { key: '6ce0ffda229586f2e661e72dd6fac76609eb3836', class: "modus-wc-progress-container" }, this.variant === 'default' ? (h(Fragment, null, h("progress", Object.assign({ class: this.getClasses() }, valueAttributes, progressAriaAttributes, this.inheritedAttributes)), this.label && h("modus-wc-input-label", { labelText: this.label }))) : (h("div", Object.assign({ class: this.getClasses(), style: { '--value': `${this.getPercentageValue()}` }, role: "progressbar" }, progressAriaAttributes, this.inheritedAttributes), h("span", { class: "modus-wc-radial-progress-label" }, this.label), h("slot", null)))));
}
get el() { return this; }
static get style() { return modusWcProgressCss; }
}, [4, "modus-wc-progress", {
"customClass": [1, "custom-class"],
"indeterminate": [1540],
"label": [1],
"max": [2],
"value": [1538],
"variant": [1]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["modus-wc-progress", "modus-wc-input-label"];
components.forEach(tagName => { switch (tagName) {
case "modus-wc-progress":
if (!customElements.get(tagName)) {
customElements.define(tagName, ModusWcProgress$1);
}
break;
case "modus-wc-input-label":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
const ModusWcProgress = ModusWcProgress$1;
const defineCustomElement = defineCustomElement$1;
export { ModusWcProgress, defineCustomElement };