cps-ui-kit 0.19.0 → 0.20.0

package/fesm2020/cps-ui-kit.mjs

@@ -256,25 +256,20 @@ class CpsProgressLinearComponent {
         this.bgColor = 'white';
         this.opacity = 1;
         this.radius = 0;
-        this.cvtWidth = '';
-        this.cvtHeight = '';
-        this.cvtRadius = '';
-        this.cvtColor = '';
-        this.cvtBgColor = '';
     }
     ngOnInit() {
-        this.cvtWidth = convertSize(this.width);
-        this.cvtHeight = convertSize(this.height);
-        this.cvtRadius = convertSize(this.radius);
-        this.cvtColor = getCSSColor(this.color);
-        this.cvtBgColor = getCSSColor(this.bgColor);
+        this.width = convertSize(this.width);
+        this.height = convertSize(this.height);
+        this.radius = convertSize(this.radius);
+        this.color = getCSSColor(this.color);
+        this.bgColor = getCSSColor(this.bgColor);
     }
 }
 CpsProgressLinearComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsProgressLinearComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CpsProgressLinearComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsProgressLinearComponent, isStandalone: true, selector: "cps-progress-linear", inputs: { width: "width", height: "height", color: "color", bgColor: "bgColor", opacity: "opacity", radius: "radius" }, ngImport: i0, template: "<div\n  class=\"cps-progress-linear\"\n  [ngStyle]=\"{\n    'max-width': cvtWidth,\n    height: cvtHeight,\n    'border-radius': cvtRadius,\n    background: cvtBgColor\n  }\">\n  <div\n    class=\"cps-progress-linear-line inc\"\n    [style.background]=\"cvtColor\"\n    [style.opacity]=\"opacity\"></div>\n  <div\n    class=\"cps-progress-linear-line dec\"\n    [style.background]=\"cvtColor\"\n    [style.opacity]=\"opacity\"></div>\n</div>\n", styles: [":host{width:100%}:host .cps-progress-linear{position:relative;overflow-x:hidden}:host .cps-progress-linear-line{position:absolute;height:inherit;left:-5%;top:0}:host .cps-progress-linear .inc{animation:increase 2s infinite}:host .cps-progress-linear .dec{animation:decrease 2s .5s infinite}@keyframes increase{0%{left:-5%;width:5%}to{left:130%;width:100%}}@keyframes decrease{0%{left:-80%;width:80%}to{left:110%;width:10%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+CpsProgressLinearComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsProgressLinearComponent, isStandalone: true, selector: "cps-progress-linear", inputs: { width: "width", height: "height", color: "color", bgColor: "bgColor", opacity: "opacity", radius: "radius" }, ngImport: i0, template: "<div\n  class=\"cps-progress-linear\"\n  [ngStyle]=\"{\n    'max-width': width,\n    height: height,\n    'border-radius': radius,\n    background: bgColor\n  }\">\n  <div\n    class=\"cps-progress-linear-line inc\"\n    [style.background]=\"color\"\n    [style.opacity]=\"opacity\"></div>\n  <div\n    class=\"cps-progress-linear-line dec\"\n    [style.background]=\"color\"\n    [style.opacity]=\"opacity\"></div>\n</div>\n", styles: [":host{width:100%}:host .cps-progress-linear{position:relative;overflow-x:hidden}:host .cps-progress-linear-line{position:absolute;height:inherit;left:-5%;top:0}:host .cps-progress-linear .inc{animation:increase 2s infinite}:host .cps-progress-linear .dec{animation:decrease 2s .5s infinite}@keyframes increase{0%{left:-5%;width:5%}to{left:130%;width:100%}}@keyframes decrease{0%{left:-80%;width:80%}to{left:110%;width:10%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsProgressLinearComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [CommonModule], selector: 'cps-progress-linear', template: "<div\n  class=\"cps-progress-linear\"\n  [ngStyle]=\"{\n    'max-width': cvtWidth,\n    height: cvtHeight,\n    'border-radius': cvtRadius,\n    background: cvtBgColor\n  }\">\n  <div\n    class=\"cps-progress-linear-line inc\"\n    [style.background]=\"cvtColor\"\n    [style.opacity]=\"opacity\"></div>\n  <div\n    class=\"cps-progress-linear-line dec\"\n    [style.background]=\"cvtColor\"\n    [style.opacity]=\"opacity\"></div>\n</div>\n", styles: [":host{width:100%}:host .cps-progress-linear{position:relative;overflow-x:hidden}:host .cps-progress-linear-line{position:absolute;height:inherit;left:-5%;top:0}:host .cps-progress-linear .inc{animation:increase 2s infinite}:host .cps-progress-linear .dec{animation:decrease 2s .5s infinite}@keyframes increase{0%{left:-5%;width:5%}to{left:130%;width:100%}}@keyframes decrease{0%{left:-80%;width:80%}to{left:110%;width:10%}}\n"] }]
+            args: [{ standalone: true, imports: [CommonModule], selector: 'cps-progress-linear', template: "<div\n  class=\"cps-progress-linear\"\n  [ngStyle]=\"{\n    'max-width': width,\n    height: height,\n    'border-radius': radius,\n    background: bgColor\n  }\">\n  <div\n    class=\"cps-progress-linear-line inc\"\n    [style.background]=\"color\"\n    [style.opacity]=\"opacity\"></div>\n  <div\n    class=\"cps-progress-linear-line dec\"\n    [style.background]=\"color\"\n    [style.opacity]=\"opacity\"></div>\n</div>\n", styles: [":host{width:100%}:host .cps-progress-linear{position:relative;overflow-x:hidden}:host .cps-progress-linear-line{position:absolute;height:inherit;left:-5%;top:0}:host .cps-progress-linear .inc{animation:increase 2s infinite}:host .cps-progress-linear .dec{animation:decrease 2s .5s infinite}@keyframes increase{0%{left:-5%;width:5%}to{left:130%;width:100%}}@keyframes decrease{0%{left:-80%;width:80%}to{left:110%;width:10%}}\n"] }]
         }], propDecorators: { width: [{
                 type: Input
             }], height: [{
@@ -2354,6 +2349,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 type: Output
             }] } });
 
+class CpsProgressCircularComponent {
+    constructor() {
+        this.diameter = 40;
+        this.strokeWidth = 4;
+        this.color = 'calm';
+    }
+    ngOnInit() {
+        this.diameter = convertSize(this.diameter);
+        this.strokeWidth = convertSize(this.strokeWidth);
+        this.color = getCSSColor(this.color);
+    }
+}
+CpsProgressCircularComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsProgressCircularComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CpsProgressCircularComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsProgressCircularComponent, isStandalone: true, selector: "cps-progress-circular", inputs: { diameter: "diameter", strokeWidth: "strokeWidth", color: "color" }, ngImport: i0, template: "<div\n  class=\"cps-progress-circular\"\n  [style.width]=\"diameter\"\n  [style.border]=\"strokeWidth + ' solid ' + color\"></div>\n", styles: [":host{display:inline-block}:host .cps-progress-circular{box-sizing:border-box;aspect-ratio:1;border-radius:50%;border-right-color:transparent!important;border-bottom:unset!important;animation:cps-progress-circular-animation .8s linear infinite}@keyframes cps-progress-circular-animation{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsProgressCircularComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [CommonModule], selector: 'cps-progress-circular', template: "<div\n  class=\"cps-progress-circular\"\n  [style.width]=\"diameter\"\n  [style.border]=\"strokeWidth + ' solid ' + color\"></div>\n", styles: [":host{display:inline-block}:host .cps-progress-circular{box-sizing:border-box;aspect-ratio:1;border-radius:50%;border-right-color:transparent!important;border-bottom:unset!important;animation:cps-progress-circular-animation .8s linear infinite}@keyframes cps-progress-circular-animation{to{transform:rotate(360deg)}}\n"] }]
+        }], propDecorators: { diameter: [{
+                type: Input
+            }], strokeWidth: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }] } });
+
 class CpsDatepickerComponent {
     set value(value) {
         this._value = value;
@@ -2862,5 +2882,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CpsAutocompleteComponent, CpsButtonComponent, CpsButtonToggleComponent, CpsCheckboxComponent, CpsChipComponent, CpsDatepickerComponent, CpsExpansionPanelComponent, CpsIconComponent, CpsInputComponent, CpsLoaderComponent, CpsProgressLinearComponent, CpsRadioComponent, CpsSelectComponent, CpsTagComponent, CpsTextareaComponent, CpsTreeSelectComponent, getCSSColor, getCpsColors, getTextColor, iconNames };
+export { CpsAutocompleteComponent, CpsButtonComponent, CpsButtonToggleComponent, CpsCheckboxComponent, CpsChipComponent, CpsDatepickerComponent, CpsExpansionPanelComponent, CpsIconComponent, CpsInputComponent, CpsLoaderComponent, CpsProgressCircularComponent, CpsProgressLinearComponent, CpsRadioComponent, CpsSelectComponent, CpsTagComponent, CpsTextareaComponent, CpsTreeSelectComponent, getCSSColor, getCpsColors, getTextColor, iconNames };
 //# sourceMappingURL=cps-ui-kit.mjs.map