@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
195 lines (194 loc) • 7.24 kB
JavaScript
import { Fragment, h, Host } from "@stencil/core";
import { convertPropsToClasses } from "./modus-wc-progress.tailwind";
import { inheritAriaAttributes } from "../utils";
/**
* A customizable progress component used to show the progress of a task or show the passing of time.
*
* The radial variant supports slotting in custom HTML to be displayed within the progress circle
*/
export class ModusWcProgress {
constructor() {
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)))));
}
static get is() { return "modus-wc-progress"; }
static get originalStyleUrls() {
return {
"$": ["modus-wc-progress.scss"]
};
}
static get styleUrls() {
return {
"$": ["modus-wc-progress.css"]
};
}
static get properties() {
return {
"customClass": {
"type": "string",
"attribute": "custom-class",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Custom CSS class to apply to the progress element."
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "''"
},
"indeterminate": {
"type": "boolean",
"attribute": "indeterminate",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The indeterminate state of the progress component."
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
},
"label": {
"type": "string",
"attribute": "label",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "A text label to render within the progress bar"
},
"getter": false,
"setter": false,
"reflect": false
},
"max": {
"type": "number",
"attribute": "max",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The progress component's maximum value."
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "100"
},
"value": {
"type": "number",
"attribute": "value",
"mutable": true,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The value of the progress component."
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "0"
},
"variant": {
"type": "string",
"attribute": "variant",
"mutable": false,
"complexType": {
"original": "'default' | 'radial'",
"resolved": "\"default\" | \"radial\" | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The variant of the progress component."
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "'default'"
}
};
}
static get elementRef() { return "el"; }
}