@cbpds/web-components
Version:
Web components for the CBP Design System.
5 lines • 10 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import{r,h as a,a as e,g as c}from"./p-654179c2.js";import{c as o,s as t}from"./p-93ade441.js";const i=':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 l=i;const d=class{constructor(a){r(this,a);this.progressId=o("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)||{}}t(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 r;if(this.success){r=a("cbp-icon",{key:"cde7017b69f92a1d941221e9b6c6e80b53441b86",name:"check-circle",color:"var(--cbp-loader-status-indicator-color)"})}else if(this.error){r=a("cbp-icon",{key:"df43cfb62cd6a91d30ec2f8581f0f977f6b3acb1",name:"exclamation-circle",color:"var(--cbp-loader-status-indicator-color)"})}else{r=Math.round(this.value/this.max*100)+"%"}if(this.success){this.value=this.max}return a(e,{key:"421ad0547d6e7507899a9c039a0cd6c9ae453f2b"},a("label",{key:"a71f1d49d59bb9d04acedbcea4e964a0953812a5",htmlFor:this.progressId},this.success?`Complete`:this.error?`Error`:null,a("slot",{key:"ea79dfb24b2c636ce9248332c39ef82e87dd675c"}),(this.success||this.error)&&this.variant=="linear"&&a("span",{key:"a9d491f3618369c4d957656fcbe082e05c0c58bf"},r)),(this.success||this.error)&&this.variant=="circular"&&this.size=="large"&&a("span",{key:"94c4f8e0a9cf6d6f2e3e3e8f3a6c74e8f8899c4a",class:"cbp-loader-desc"},r),this.variant=="circular"&&this.size=="small"&&(this.success||this.error)?r:``,a("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 c(this)}};d.style=l;export{d as cbp_loader};
//# sourceMappingURL=p-89d76ba1.entry.js.map