@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: '7b6f5cd0572182488347efa51eb938885ac9f843', name: "check-circle", color: "var(--cbp-loader-status-indicator-color)" });
}
else if (this.error) {
statusIndicator = h("cbp-icon", { key: '8fda8adf8bba8dc602df59656c1af7a8c04a3bf6', 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: '0513b679d88a2686f6b8ca7dfae7c60279ff75f8' }, h("label", { key: 'd7c5de36853db2dd80165f90f9e5e98516ef3906', htmlFor: this.progressId }, (this.success)
? `Complete`
: (this.error
? `Error`
: null), h("slot", { key: '4a9c5f70a36af88b7f4c83b8f7ebd632172e94e3' }), (this.success || this.error) && this.variant == 'linear' &&
h("span", { key: 'a920ce662970a5b3ce98f4fda47c78ff034f5de7' }, statusIndicator)), (this.success || this.error) && this.variant == 'circular' && this.size == 'large' &&
h("span", { key: 'baad9f091056d12e1c8cda317cb02184b7c85455', class: 'cbp-loader-desc' }, statusIndicator), this.variant == 'circular' && this.size == 'small' && (this.success || this.error) ? statusIndicator : ``, h("progress", { key: '6ff4bc3d21a22449826eb757dfae4914cd77f02b', 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