@cbpds/web-components
Version:
Web components for the CBP Design System.
68 lines (62 loc) • 11.1 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-cd71cbd5.js');
const utils = require('./utils-99c9e716.js');
const cbpLoaderCss = ":root{--cbp-loader-color:var(--cbp-color-info-dark);--cbp-loader-color-dark:var(--cbp-color-info-light);--cbp-loader-center-color:var(--cbp-color-branding-cbp-light);--cbp-loader-center-color-dark:var(--cbp-color-branding-cbp-dark);--cbp-loader-track-color:var(--cbp-color-gray-cool-20);--cbp-loader-track-color-dark:var(--cbp-color-gray-cool-50);--cbp-loader-status-description-color:var(--cbp-color-text-darkest);--cbp-loader-status-description-color-dark:var(--cbp-color-text-lightest);--cbp-loader-status-description-line-height:3.5;--cbp-loader-status-indicator-color:var(--cbp-color-white);--cbp-loader-status-indicator-color-dark:var(--cbp-color-black);--cbp-loader-status-description-padding:0 0 0 var(--cbp-space-2x);--cbp-loader-linear-height:var(--cbp-space-2x);--cbp-loader-linear-width:100%;--cbp-loader-linear-status-width:var(--cbp-loader-linear-width);--cbp-loader-linear-flex-direction:column;--cbp-loader-linear-gap:var(--cbp-space-2x);--cbp-loader-diameter:var(--cbp-space-12x);--cbp-loader-gutter-width:var(--cbp-space-2x);--cbp-loader-status-indicator-diameter:var(--cbp-space-4x);--cbp-loader-circular-determinate:var(--cbp-loader-track-color);--cbp-loader-flex-direction:row;--cbp-loader-font-weight:var(--cbp-font-weight-medium);--cbp-loader-font-size:var(--cbp-font-size-subhead)}[data-cbp-theme=light] cbp-loader[context*=dark]:not([context=light-always]),[data-cbp-theme=dark] cbp-loader:not([context=dark-inverts]):not([context=light-always]){--cbp-loader-color:var(--cbp-loader-color-dark);--cbp-loader-center-color:var(--cbp-loader-center-color-dark);--cbp-loader-track-color:var(--cbp-loader-track-color-dark);--cbp-loader-status-description-color:var(--cbp-loader-status-description-color-dark);--cbp-loader-status-indicator-color:var(--cbp-loader-status-indicator-color-dark)}@keyframes spin{0%{clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}25%{clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)}50%{clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)}75%{clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)}100%{clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)}}@keyframes slide{0%{transform:translateX(0%)}100%{transform:translateX(400%)}}cbp-loader{max-width:100%;overflow:hidden;position:relative;}cbp-loader label{font-size:var(--cbp-loader-font-size);font-weight:var(--cbp-loader-font-weight);align-self:flex-start}cbp-loader[variant=linear]{--cbp-icon-size:var(--cbp-space-3x);width:var(--cbp-loader-linear-width);display:inline-flex;flex-direction:var(--cbp-loader-linear-flex-direction);align-items:center;gap:var(--cbp-loader-linear-gap)}cbp-loader[variant=linear] progress{appearance:none;height:var(--cbp-loader-linear-height)}cbp-loader[variant=linear] progress::-webkit-progress-bar{background-color:var(--cbp-loader-track-color)}cbp-loader[variant=linear] progress::-webkit-progress-value{background-color:var(--cbp-loader-color)}cbp-loader[variant=linear]:not([determinate]):not([error]):not([success]) progress:before{content:\"\";display:block;height:var(--cbp-loader-linear-height);width:20%;background-color:var(--cbp-loader-color);position:absolute;animation:slide 2s cubic-bezier(0.2, 0, 0.38, 0.9) infinite}cbp-loader[variant=linear][determinate] label{color:var(--cbp-loader-status-description-color);display:inline-flex;width:var(--cbp-loader-linear-status-width);height:var(--cbp-space-4x);white-space:nowrap}cbp-loader[variant=linear][determinate] label span:last-of-type{margin-left:auto}cbp-loader[variant=linear][size=small][success] label,cbp-loader[variant=linear][size=small][error] label{text-wrap:nowrap}cbp-loader[variant=circular]{display:inline-flex;flex-direction:var(--cbp-loader-flex-direction)}cbp-loader[variant=circular] label{color:var(--cbp-loader-status-description-color);font-size:var(--cbp-font-size-subhead);font-weight:var(--cbp-font-weight-medium);align-self:center;padding:var(--cbp-loader-status-description-padding);order:2}cbp-loader[variant=circular] progress{height:var(--cbp-loader-diameter);width:var(--cbp-loader-diameter);display:flex;align-items:center;justify-content:center;border-radius:var(--cbp-border-radius-circle);overflow:hidden;padding:0}cbp-loader[variant=circular] progress::-webkit-progress-bar{display:none}cbp-loader[variant=circular] progress:before{content:\"\";position:absolute;z-index:var(--cbp-z-index-level-1);height:var(--cbp-loader-diameter);width:var(--cbp-loader-diameter);border-radius:calc(var(--cbp-border-radius-circle) / 2);margin:auto auto;background:var(--cbp-loader-color)}cbp-loader[variant=circular] progress:after{content:\"\";position:absolute;z-index:var(--cbp-z-index-level-2);height:calc(var(--cbp-loader-diameter) - var(--cbp-loader-gutter-width));width:calc(var(--cbp-loader-diameter) - var(--cbp-loader-gutter-width));border-radius:calc(var(--cbp-border-radius-circle) / 2);margin:auto auto;background:var(--cbp-loader-center-color)}cbp-loader[variant=circular][size=small][success] progress,cbp-loader[variant=circular][size=small][error] progress{display:none}cbp-loader[variant=circular][size=large][success] span,cbp-loader[variant=circular][size=large][error] span{position:absolute;width:var(--cbp-loader-diameter);line-height:var(--cbp-loader-status-description-line-height);text-align:center;z-index:var(--cbp-z-index-level-3)}cbp-loader[variant=circular]:not([determinate]):not([error]):not([success]) ::before{transform:rotate(45deg);animation:spin 2s linear infinite}cbp-loader[variant=circular][determinate] progress:before{background:var(--cbp-loader-circular-determinate)}cbp-loader[variant=circular][determinate] .cbp-loader-desc{position:absolute;width:var(--cbp-loader-diameter);line-height:var(--cbp-loader-status-description-line-height);text-align:center;z-index:var(--cbp-z-index-level-3);color:var(--cbp-loader-color);font-weight:var(--cbp-font-weight-bold)}cbp-loader[variant=circular][orientation=horizontal]{--cbp-loader-status-description-padding:0 0 0 var(--cbp-space-1x);--cbp-loader-flex-direction:row}cbp-loader[variant=circular][orientation=vertical]:not([size=small]){--cbp-loader-status-description-padding:var(--cbp-space-1x) 0 0 0;--cbp-loader-flex-direction:column}cbp-loader[error]{--cbp-loader-color:var(--cbp-color-danger-dark);--cbp-loader-color-dark:var(--cbp-color-danger-light);--cbp-loader-track-color:var(--cbp-color-danger-dark);--cbp-loader-track-color-dark:var(--cbp-color-danger-light);--cbp-loader-status-description-color:var(--cbp-color-danger-dark);--cbp-loader-status-description-color-dark:var(--cbp-color-danger-light);--cbp-loader-status-indicator-color:var(--cbp-color-danger-dark);--cbp-loader-status-indicator-color-dark:var(--cbp-color-danger-light)}cbp-loader[success]{--cbp-loader-color:var(--cbp-color-success-base);--cbp-loader-color-dark:var(--cbp-color-success-light);--cbp-loader-track-color:var(--cbp-color-success-base);--cbp-loader-track-color-dark:var(--cbp-color-success-light);--cbp-loader-status-description-color:var(--cbp-color-success-base);--cbp-loader-status-description-color-dark:var(--cbp-color-success-light);--cbp-loader-status-indicator-color:var(--cbp-color-success-base);--cbp-loader-status-indicator-color-dark:var(--cbp-color-success-light)}cbp-loader[size=large]{--cbp-loader-diameter:var(--cbp-space-12x);--cbp-loader-gutter-width:var(--cbp-space-2x);--cbp-loader-linear-height:var(--cbp-space-2x);--cbp-loader-linear-flex-direction:column;--cbp-loader-linear-status-width:var(--cbp-loader-linear-width);--cbp-loader-linear-gap:var(--cbp-space-2x)}cbp-loader[size=small]{--cbp-loader-diameter:var(--cbp-space-4x);--cbp-loader-gutter-width:var(--cbp-space-1x);--cbp-loader-linear-height:var(--cbp-space-1x);--cbp-loader-linear-flex-direction:row;--cbp-loader-linear-status-width:min-content;--cbp-loader-linear-gap:var(--cbp-space-1x)}cbp-loader progress{height:inherit;width:inherit}";
const CbpLoaderStyle0 = cbpLoaderCss;
const CbpLoader = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.progressId = utils.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) || {};
}
utils.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 = index.h("cbp-icon", { key: 'cde7017b69f92a1d941221e9b6c6e80b53441b86', name: "check-circle", color: "var(--cbp-loader-status-indicator-color)" });
}
else if (this.error) {
statusIndicator = index.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 (index.h(index.Host, { key: '421ad0547d6e7507899a9c039a0cd6c9ae453f2b' }, index.h("label", { key: 'a71f1d49d59bb9d04acedbcea4e964a0953812a5', htmlFor: this.progressId }, (this.success)
? `Complete`
: (this.error
? `Error`
: null), index.h("slot", { key: 'ea79dfb24b2c636ce9248332c39ef82e87dd675c' }), (this.success || this.error) && this.variant == 'linear' &&
index.h("span", { key: 'a9d491f3618369c4d957656fcbe082e05c0c58bf' }, statusIndicator)), (this.success || this.error) && this.variant == 'circular' && this.size == 'large' &&
index.h("span", { key: '94c4f8e0a9cf6d6f2e3e3e8f3a6c74e8f8899c4a', class: 'cbp-loader-desc' }, statusIndicator), this.variant == 'circular' && this.size == 'small' && (this.success || this.error) ? statusIndicator : ``, index.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) })));
}
get host() { return index.getElement(this); }
};
CbpLoader.style = CbpLoaderStyle0;
exports.cbp_loader = CbpLoader;
//# sourceMappingURL=cbp-loader.cjs.entry.js.map