@cbpds/web-components
Version:
Web components for the CBP Design System.
265 lines (264 loc) • 10.6 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import { Host, h } from "@stencil/core";
import { setCSSProps, createNamespaceKey } from "../../utils/utils";
export class CbpLoader {
constructor() {
this.progressId = createNamespaceKey('cbp-loader');
this.variant = undefined;
this.size = "large";
this.determinate = false;
this.value = 0;
this.max = 100;
this.orientation = 'horizontal';
this.success = undefined;
this.error = undefined;
this.context = undefined;
this.sx = {};
}
componentWillLoad() {
if (typeof this.sx == 'string') {
this.sx = JSON.parse(this.sx) || {};
}
setCSSProps(this.host, Object.assign({}, this.sx));
}
componentDidLoad() {
if (this.determinate && this.variant == 'circular') {
this.host.style.setProperty("--cbp-loader-circular-determinate", `conic-gradient(var(--cbp-loader-color) ${((this.value / this.max) * 100) * 3.6}deg, var(--cbp-loader-track-color) 0deg)`);
}
}
render() {
let statusIndicator;
if (this.success) {
statusIndicator = h("cbp-icon", { key: 'cde7017b69f92a1d941221e9b6c6e80b53441b86', name: "check-circle", color: "var(--cbp-loader-status-indicator-color)" });
}
else if (this.error) {
statusIndicator = h("cbp-icon", { key: 'df43cfb62cd6a91d30ec2f8581f0f977f6b3acb1', name: "exclamation-circle", color: "var(--cbp-loader-status-indicator-color)" });
}
else {
statusIndicator = Math.round((this.value / this.max) * 100) + "%";
}
if (this.success) {
this.value = this.max;
}
return (h(Host, { key: '421ad0547d6e7507899a9c039a0cd6c9ae453f2b' }, h("label", { key: 'a71f1d49d59bb9d04acedbcea4e964a0953812a5', htmlFor: this.progressId }, (this.success)
? `Complete`
: (this.error
? `Error`
: null), h("slot", { key: 'ea79dfb24b2c636ce9248332c39ef82e87dd675c' }), (this.success || this.error) && this.variant == 'linear' &&
h("span", { key: 'a9d491f3618369c4d957656fcbe082e05c0c58bf' }, statusIndicator)), (this.success || this.error) && this.variant == 'circular' && this.size == 'large' &&
h("span", { key: '94c4f8e0a9cf6d6f2e3e3e8f3a6c74e8f8899c4a', class: 'cbp-loader-desc' }, statusIndicator), this.variant == 'circular' && this.size == 'small' && (this.success || this.error) ? statusIndicator : ``, h("progress", { key: 'eb1c2ce60285b11f55e35d296f312328c01202d0', id: this.progressId, value: this.determinate ? this.value : null, max: this.max, hidden: this.determinate && this.variant == 'circular' && this.size == 'small' && (this.success || this.error) })));
}
static get is() { return "cbp-loader"; }
static get originalStyleUrls() {
return {
"$": ["cbp-loader.scss"]
};
}
static get styleUrls() {
return {
"$": ["cbp-loader.css"]
};
}
static get properties() {
return {
"progressId": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies a unique `ID` for the loader, used to wire up the controls and accessibility features."
},
"attribute": "progress-id",
"reflect": false,
"defaultValue": "createNamespaceKey('cbp-loader')"
},
"variant": {
"type": "string",
"mutable": false,
"complexType": {
"original": "\"circular\" | \"linear\"",
"resolved": "\"circular\" | \"linear\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Defines if the loader will be in displayed as a circular or linear variant"
},
"attribute": "variant",
"reflect": true
},
"size": {
"type": "string",
"mutable": false,
"complexType": {
"original": "\"large\" | \"small\"",
"resolved": "\"large\" | \"small\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Defines the size of the loader render, default value of large"
},
"attribute": "size",
"reflect": true,
"defaultValue": "\"large\""
},
"determinate": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Defines if the loader will be in determinate/indeterminate, if true loader will display the current value out of max value"
},
"attribute": "determinate",
"reflect": true,
"defaultValue": "false"
},
"value": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Used in deternminate mode to display the current value of loaded content"
},
"attribute": "value",
"reflect": false,
"defaultValue": "0"
},
"max": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Used in deternminate mode to display the max value of loaded content"
},
"attribute": "max",
"reflect": false,
"defaultValue": "100"
},
"orientation": {
"type": "string",
"mutable": false,
"complexType": {
"original": "\"horizontal\" | \"vertical\"",
"resolved": "\"horizontal\" | \"vertical\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Used to set the text orientation for the circular determinate loader's description"
},
"attribute": "orientation",
"reflect": true,
"defaultValue": "'horizontal'"
},
"success": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Used to set the loader to the 'success' state of the loader"
},
"attribute": "success",
"reflect": true
},
"error": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Used to set the loader to the 'error' state of the loader"
},
"attribute": "error",
"reflect": true
},
"context": {
"type": "string",
"mutable": false,
"complexType": {
"original": "\"light-inverts\" | \"light-always\" | \"dark-inverts\" | \"dark-always\"",
"resolved": "\"dark-always\" | \"dark-inverts\" | \"light-always\" | \"light-inverts\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is \"light-inverts\" and does not have to be specified."
},
"attribute": "context",
"reflect": true
},
"sx": {
"type": "any",
"mutable": false,
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Supports adding inline styles as an object"
},
"attribute": "sx",
"reflect": false,
"defaultValue": "{}"
}
};
}
static get elementRef() { return "host"; }
}
//# sourceMappingURL=cbp-loader.js.map