cps-ui-kit 0.19.0 → 0.20.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -0
- package/esm2020/lib/components/cps-progress-circular/cps-progress-circular.component.mjs +30 -0
- package/esm2020/lib/components/cps-progress-linear/cps-progress-linear.component.mjs +8 -13
- package/esm2020/public-api.mjs +2 -1
- package/fesm2015/cps-ui-kit.mjs +33 -13
- package/fesm2015/cps-ui-kit.mjs.map +1 -1
- package/fesm2020/cps-ui-kit.mjs +33 -13
- package/fesm2020/cps-ui-kit.mjs.map +1 -1
- package/lib/components/cps-progress-circular/cps-progress-circular.component.d.ts +10 -0
- package/lib/components/cps-progress-linear/cps-progress-linear.component.d.ts +2 -6
- package/package.json +1 -1
- package/public-api.d.ts +1 -0
package/README.md
CHANGED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { CommonModule } from '@angular/common';
|
|
2
|
+
import { Component, Input } from '@angular/core';
|
|
3
|
+
import { convertSize } from '../../utils/size-utils';
|
|
4
|
+
import { getCSSColor } from '../../utils/colors-utils';
|
|
5
|
+
import * as i0 from "@angular/core";
|
|
6
|
+
export class CpsProgressCircularComponent {
|
|
7
|
+
constructor() {
|
|
8
|
+
this.diameter = 40;
|
|
9
|
+
this.strokeWidth = 4;
|
|
10
|
+
this.color = 'calm';
|
|
11
|
+
}
|
|
12
|
+
ngOnInit() {
|
|
13
|
+
this.diameter = convertSize(this.diameter);
|
|
14
|
+
this.strokeWidth = convertSize(this.strokeWidth);
|
|
15
|
+
this.color = getCSSColor(this.color);
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
CpsProgressCircularComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsProgressCircularComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
19
|
+
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 }] });
|
|
20
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsProgressCircularComponent, decorators: [{
|
|
21
|
+
type: Component,
|
|
22
|
+
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"] }]
|
|
23
|
+
}], propDecorators: { diameter: [{
|
|
24
|
+
type: Input
|
|
25
|
+
}], strokeWidth: [{
|
|
26
|
+
type: Input
|
|
27
|
+
}], color: [{
|
|
28
|
+
type: Input
|
|
29
|
+
}] } });
|
|
30
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY3BzLXByb2dyZXNzLWNpcmN1bGFyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2Nwcy11aS1raXQvc3JjL2xpYi9jb21wb25lbnRzL2Nwcy1wcm9ncmVzcy1jaXJjdWxhci9jcHMtcHJvZ3Jlc3MtY2lyY3VsYXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY3BzLXVpLWtpdC9zcmMvbGliL2NvbXBvbmVudHMvY3BzLXByb2dyZXNzLWNpcmN1bGFyL2Nwcy1wcm9ncmVzcy1jaXJjdWxhci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQVUsTUFBTSxlQUFlLENBQUM7QUFDekQsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBQ3JELE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQzs7QUFTdkQsTUFBTSxPQUFPLDRCQUE0QjtJQVB6QztRQVFXLGFBQVEsR0FBb0IsRUFBRSxDQUFDO1FBQy9CLGdCQUFXLEdBQW9CLENBQUMsQ0FBQztRQUNqQyxVQUFLLEdBQUcsTUFBTSxDQUFDO0tBUXpCO0lBTkMsUUFBUTtRQUNOLElBQUksQ0FBQyxRQUFRLEdBQUcsV0FBVyxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQztRQUMzQyxJQUFJLENBQUMsV0FBVyxHQUFHLFdBQVcsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLENBQUM7UUFFakQsSUFBSSxDQUFDLEtBQUssR0FBRyxXQUFXLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ3ZDLENBQUM7O3lIQVZVLDRCQUE0Qjs2R0FBNUIsNEJBQTRCLCtKQ1p6QyxzSUFJQSx1WERHWSxZQUFZOzJGQUtYLDRCQUE0QjtrQkFQeEMsU0FBUztpQ0FDSSxJQUFJLFdBQ1AsQ0FBQyxZQUFZLENBQUMsWUFDYix1QkFBdUI7OEJBS3hCLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgT25Jbml0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBjb252ZXJ0U2l6ZSB9IGZyb20gJy4uLy4uL3V0aWxzL3NpemUtdXRpbHMnO1xuaW1wb3J0IHsgZ2V0Q1NTQ29sb3IgfSBmcm9tICcuLi8uLi91dGlscy9jb2xvcnMtdXRpbHMnO1xuXG5AQ29tcG9uZW50KHtcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZV0sXG4gIHNlbGVjdG9yOiAnY3BzLXByb2dyZXNzLWNpcmN1bGFyJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2Nwcy1wcm9ncmVzcy1jaXJjdWxhci5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2Nwcy1wcm9ncmVzcy1jaXJjdWxhci5jb21wb25lbnQuc2NzcyddXG59KVxuZXhwb3J0IGNsYXNzIENwc1Byb2dyZXNzQ2lyY3VsYXJDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICBASW5wdXQoKSBkaWFtZXRlcjogbnVtYmVyIHwgc3RyaW5nID0gNDA7XG4gIEBJbnB1dCgpIHN0cm9rZVdpZHRoOiBudW1iZXIgfCBzdHJpbmcgPSA0O1xuICBASW5wdXQoKSBjb2xvciA9ICdjYWxtJztcblxuICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICB0aGlzLmRpYW1ldGVyID0gY29udmVydFNpemUodGhpcy5kaWFtZXRlcik7XG4gICAgdGhpcy5zdHJva2VXaWR0aCA9IGNvbnZlcnRTaXplKHRoaXMuc3Ryb2tlV2lkdGgpO1xuXG4gICAgdGhpcy5jb2xvciA9IGdldENTU0NvbG9yKHRoaXMuY29sb3IpO1xuICB9XG59XG4iLCI8ZGl2XG4gIGNsYXNzPVwiY3BzLXByb2dyZXNzLWNpcmN1bGFyXCJcbiAgW3N0eWxlLndpZHRoXT1cImRpYW1ldGVyXCJcbiAgW3N0eWxlLmJvcmRlcl09XCJzdHJva2VXaWR0aCArICcgc29saWQgJyArIGNvbG9yXCI+PC9kaXY+XG4iXX0=
|
|
@@ -12,25 +12,20 @@ export class CpsProgressLinearComponent {
|
|
|
12
12
|
this.bgColor = 'white';
|
|
13
13
|
this.opacity = 1;
|
|
14
14
|
this.radius = 0;
|
|
15
|
-
this.cvtWidth = '';
|
|
16
|
-
this.cvtHeight = '';
|
|
17
|
-
this.cvtRadius = '';
|
|
18
|
-
this.cvtColor = '';
|
|
19
|
-
this.cvtBgColor = '';
|
|
20
15
|
}
|
|
21
16
|
ngOnInit() {
|
|
22
|
-
this.
|
|
23
|
-
this.
|
|
24
|
-
this.
|
|
25
|
-
this.
|
|
26
|
-
this.
|
|
17
|
+
this.width = convertSize(this.width);
|
|
18
|
+
this.height = convertSize(this.height);
|
|
19
|
+
this.radius = convertSize(this.radius);
|
|
20
|
+
this.color = getCSSColor(this.color);
|
|
21
|
+
this.bgColor = getCSSColor(this.bgColor);
|
|
27
22
|
}
|
|
28
23
|
}
|
|
29
24
|
CpsProgressLinearComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsProgressLinearComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
30
|
-
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':
|
|
25
|
+
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: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
31
26
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsProgressLinearComponent, decorators: [{
|
|
32
27
|
type: Component,
|
|
33
|
-
args: [{ standalone: true, imports: [CommonModule], selector: 'cps-progress-linear', template: "<div\n class=\"cps-progress-linear\"\n [ngStyle]=\"{\n 'max-width':
|
|
28
|
+
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"] }]
|
|
34
29
|
}], propDecorators: { width: [{
|
|
35
30
|
type: Input
|
|
36
31
|
}], height: [{
|
|
@@ -44,4 +39,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
44
39
|
}], radius: [{
|
|
45
40
|
type: Input
|
|
46
41
|
}] } });
|
|
47
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
42
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY3BzLXByb2dyZXNzLWxpbmVhci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jcHMtdWkta2l0L3NyYy9saWIvY29tcG9uZW50cy9jcHMtcHJvZ3Jlc3MtbGluZWFyL2Nwcy1wcm9ncmVzcy1saW5lYXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY3BzLXVpLWtpdC9zcmMvbGliL2NvbXBvbmVudHMvY3BzLXByb2dyZXNzLWxpbmVhci9jcHMtcHJvZ3Jlc3MtbGluZWFyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBVSxNQUFNLGVBQWUsQ0FBQztBQUN6RCxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFDckQsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLDBCQUEwQixDQUFDOzs7QUFTdkQsTUFBTSxPQUFPLDBCQUEwQjtJQVB2QztRQVFXLFVBQUssR0FBb0IsTUFBTSxDQUFDO1FBQ2hDLFdBQU0sR0FBb0IsUUFBUSxDQUFDO1FBQ25DLFVBQUssR0FBRyxNQUFNLENBQUM7UUFDZixZQUFPLEdBQUcsT0FBTyxDQUFDO1FBQ2xCLFlBQU8sR0FBb0IsQ0FBQyxDQUFDO1FBQzdCLFdBQU0sR0FBb0IsQ0FBQyxDQUFDO0tBVXRDO0lBUkMsUUFBUTtRQUNOLElBQUksQ0FBQyxLQUFLLEdBQUcsV0FBVyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUNyQyxJQUFJLENBQUMsTUFBTSxHQUFHLFdBQVcsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUM7UUFDdkMsSUFBSSxDQUFDLE1BQU0sR0FBRyxXQUFXLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDO1FBRXZDLElBQUksQ0FBQyxLQUFLLEdBQUcsV0FBVyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUNyQyxJQUFJLENBQUMsT0FBTyxHQUFHLFdBQVcsQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLENBQUM7SUFDM0MsQ0FBQzs7dUhBZlUsMEJBQTBCOzJHQUExQiwwQkFBMEIsdU1DWnZDLDJhQWlCQSxrZURWWSxZQUFZOzJGQUtYLDBCQUEwQjtrQkFQdEMsU0FBUztpQ0FDSSxJQUFJLFdBQ1AsQ0FBQyxZQUFZLENBQUMsWUFDYixxQkFBcUI7OEJBS3RCLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNHLE9BQU87c0JBQWYsS0FBSztnQkFDRyxPQUFPO3NCQUFmLEtBQUs7Z0JBQ0csTUFBTTtzQkFBZCxLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIE9uSW5pdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgY29udmVydFNpemUgfSBmcm9tICcuLi8uLi91dGlscy9zaXplLXV0aWxzJztcbmltcG9ydCB7IGdldENTU0NvbG9yIH0gZnJvbSAnLi4vLi4vdXRpbHMvY29sb3JzLXV0aWxzJztcblxuQENvbXBvbmVudCh7XG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGVdLFxuICBzZWxlY3RvcjogJ2Nwcy1wcm9ncmVzcy1saW5lYXInLFxuICB0ZW1wbGF0ZVVybDogJy4vY3BzLXByb2dyZXNzLWxpbmVhci5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2Nwcy1wcm9ncmVzcy1saW5lYXIuY29tcG9uZW50LnNjc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBDcHNQcm9ncmVzc0xpbmVhckNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIEBJbnB1dCgpIHdpZHRoOiBudW1iZXIgfCBzdHJpbmcgPSAnMTAwJSc7XG4gIEBJbnB1dCgpIGhlaWdodDogbnVtYmVyIHwgc3RyaW5nID0gJzAuNXJlbSc7XG4gIEBJbnB1dCgpIGNvbG9yID0gJ2NhbG0nO1xuICBASW5wdXQoKSBiZ0NvbG9yID0gJ3doaXRlJztcbiAgQElucHV0KCkgb3BhY2l0eTogbnVtYmVyIHwgc3RyaW5nID0gMTtcbiAgQElucHV0KCkgcmFkaXVzOiBudW1iZXIgfCBzdHJpbmcgPSAwO1xuXG4gIG5nT25Jbml0KCk6IHZvaWQge1xuICAgIHRoaXMud2lkdGggPSBjb252ZXJ0U2l6ZSh0aGlzLndpZHRoKTtcbiAgICB0aGlzLmhlaWdodCA9IGNvbnZlcnRTaXplKHRoaXMuaGVpZ2h0KTtcbiAgICB0aGlzLnJhZGl1cyA9IGNvbnZlcnRTaXplKHRoaXMucmFkaXVzKTtcblxuICAgIHRoaXMuY29sb3IgPSBnZXRDU1NDb2xvcih0aGlzLmNvbG9yKTtcbiAgICB0aGlzLmJnQ29sb3IgPSBnZXRDU1NDb2xvcih0aGlzLmJnQ29sb3IpO1xuICB9XG59XG4iLCI8ZGl2XG4gIGNsYXNzPVwiY3BzLXByb2dyZXNzLWxpbmVhclwiXG4gIFtuZ1N0eWxlXT1cIntcbiAgICAnbWF4LXdpZHRoJzogd2lkdGgsXG4gICAgaGVpZ2h0OiBoZWlnaHQsXG4gICAgJ2JvcmRlci1yYWRpdXMnOiByYWRpdXMsXG4gICAgYmFja2dyb3VuZDogYmdDb2xvclxuICB9XCI+XG4gIDxkaXZcbiAgICBjbGFzcz1cImNwcy1wcm9ncmVzcy1saW5lYXItbGluZSBpbmNcIlxuICAgIFtzdHlsZS5iYWNrZ3JvdW5kXT1cImNvbG9yXCJcbiAgICBbc3R5bGUub3BhY2l0eV09XCJvcGFjaXR5XCI+PC9kaXY+XG4gIDxkaXZcbiAgICBjbGFzcz1cImNwcy1wcm9ncmVzcy1saW5lYXItbGluZSBkZWNcIlxuICAgIFtzdHlsZS5iYWNrZ3JvdW5kXT1cImNvbG9yXCJcbiAgICBbc3R5bGUub3BhY2l0eV09XCJvcGFjaXR5XCI+PC9kaXY+XG48L2Rpdj5cbiJdfQ==
|
package/esm2020/public-api.mjs
CHANGED
|
@@ -13,9 +13,10 @@ export * from './lib/components/cps-tag/cps-tag.component';
|
|
|
13
13
|
export * from './lib/components/cps-chip/cps-chip.component';
|
|
14
14
|
export * from './lib/components/cps-loader/cps-loader.component';
|
|
15
15
|
export * from './lib/components/cps-expansion-panel/cps-expansion-panel.component';
|
|
16
|
+
export * from './lib/components/cps-progress-circular/cps-progress-circular.component';
|
|
16
17
|
export * from './lib/components/cps-progress-linear/cps-progress-linear.component';
|
|
17
18
|
export * from './lib/components/cps-datepicker/cps-datepicker.component';
|
|
18
19
|
export * from './lib/components/cps-textarea/cps-textarea.component';
|
|
19
20
|
export * from './lib/components/cps-button-toggle/cps-button-toggle.component';
|
|
20
21
|
export * from './lib/utils/colors-utils';
|
|
21
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
22
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL2Nwcy11aS1raXQvc3JjL3B1YmxpYy1hcGkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxjQUFjLDhDQUE4QyxDQUFDO0FBQzdELGNBQWMsZ0RBQWdELENBQUM7QUFDL0QsY0FBYyxrREFBa0QsQ0FBQztBQUNqRSxjQUFjLDREQUE0RCxDQUFDO0FBQzNFLGNBQWMsOERBQThELENBQUM7QUFDN0UsY0FBYyxrREFBa0QsQ0FBQztBQUNqRSxjQUFjLHNEQUFzRCxDQUFDO0FBQ3JFLGNBQWMsZ0RBQWdELENBQUM7QUFDL0QsY0FBYyw0Q0FBNEMsQ0FBQztBQUMzRCxjQUFjLDhDQUE4QyxDQUFDO0FBQzdELGNBQWMsa0RBQWtELENBQUM7QUFDakUsY0FBYyxvRUFBb0UsQ0FBQztBQUNuRixjQUFjLHdFQUF3RSxDQUFDO0FBQ3ZGLGNBQWMsb0VBQW9FLENBQUM7QUFDbkYsY0FBYywwREFBMEQsQ0FBQztBQUN6RSxjQUFjLHNEQUFzRCxDQUFDO0FBQ3JFLGNBQWMsZ0VBQWdFLENBQUM7QUFDL0UsY0FBYywwQkFBMEIsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBQdWJsaWMgQVBJIFN1cmZhY2Ugb2YgY3BzLXVpLWtpdFxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbXBvbmVudHMvY3BzLWljb24vY3BzLWljb24uY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbXBvbmVudHMvY3BzLWlucHV0L2Nwcy1pbnB1dC5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvY29tcG9uZW50cy9jcHMtc2VsZWN0L2Nwcy1zZWxlY3QuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbXBvbmVudHMvY3BzLXRyZWUtc2VsZWN0L2Nwcy10cmVlLXNlbGVjdC5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvY29tcG9uZW50cy9jcHMtYXV0b2NvbXBsZXRlL2Nwcy1hdXRvY29tcGxldGUuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbXBvbmVudHMvY3BzLWJ1dHRvbi9jcHMtYnV0dG9uLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9jb21wb25lbnRzL2Nwcy1jaGVja2JveC9jcHMtY2hlY2tib3guY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbXBvbmVudHMvY3BzLXJhZGlvL2Nwcy1yYWRpby5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvY29tcG9uZW50cy9jcHMtdGFnL2Nwcy10YWcuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbXBvbmVudHMvY3BzLWNoaXAvY3BzLWNoaXAuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbXBvbmVudHMvY3BzLWxvYWRlci9jcHMtbG9hZGVyLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9jb21wb25lbnRzL2Nwcy1leHBhbnNpb24tcGFuZWwvY3BzLWV4cGFuc2lvbi1wYW5lbC5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvY29tcG9uZW50cy9jcHMtcHJvZ3Jlc3MtY2lyY3VsYXIvY3BzLXByb2dyZXNzLWNpcmN1bGFyLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9jb21wb25lbnRzL2Nwcy1wcm9ncmVzcy1saW5lYXIvY3BzLXByb2dyZXNzLWxpbmVhci5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvY29tcG9uZW50cy9jcHMtZGF0ZXBpY2tlci9jcHMtZGF0ZXBpY2tlci5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvY29tcG9uZW50cy9jcHMtdGV4dGFyZWEvY3BzLXRleHRhcmVhLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9jb21wb25lbnRzL2Nwcy1idXR0b24tdG9nZ2xlL2Nwcy1idXR0b24tdG9nZ2xlLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi91dGlscy9jb2xvcnMtdXRpbHMnO1xuIl19
|
package/fesm2015/cps-ui-kit.mjs
CHANGED
|
@@ -256,25 +256,20 @@ class CpsProgressLinearComponent {
|
|
|
256
256
|
this.bgColor = 'white';
|
|
257
257
|
this.opacity = 1;
|
|
258
258
|
this.radius = 0;
|
|
259
|
-
this.cvtWidth = '';
|
|
260
|
-
this.cvtHeight = '';
|
|
261
|
-
this.cvtRadius = '';
|
|
262
|
-
this.cvtColor = '';
|
|
263
|
-
this.cvtBgColor = '';
|
|
264
259
|
}
|
|
265
260
|
ngOnInit() {
|
|
266
|
-
this.
|
|
267
|
-
this.
|
|
268
|
-
this.
|
|
269
|
-
this.
|
|
270
|
-
this.
|
|
261
|
+
this.width = convertSize(this.width);
|
|
262
|
+
this.height = convertSize(this.height);
|
|
263
|
+
this.radius = convertSize(this.radius);
|
|
264
|
+
this.color = getCSSColor(this.color);
|
|
265
|
+
this.bgColor = getCSSColor(this.bgColor);
|
|
271
266
|
}
|
|
272
267
|
}
|
|
273
268
|
CpsProgressLinearComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsProgressLinearComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
274
|
-
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':
|
|
269
|
+
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"] }] });
|
|
275
270
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsProgressLinearComponent, decorators: [{
|
|
276
271
|
type: Component,
|
|
277
|
-
args: [{ standalone: true, imports: [CommonModule], selector: 'cps-progress-linear', template: "<div\n class=\"cps-progress-linear\"\n [ngStyle]=\"{\n 'max-width':
|
|
272
|
+
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"] }]
|
|
278
273
|
}], propDecorators: { width: [{
|
|
279
274
|
type: Input
|
|
280
275
|
}], height: [{
|
|
@@ -2409,6 +2404,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
2409
2404
|
type: Output
|
|
2410
2405
|
}] } });
|
|
2411
2406
|
|
|
2407
|
+
class CpsProgressCircularComponent {
|
|
2408
|
+
constructor() {
|
|
2409
|
+
this.diameter = 40;
|
|
2410
|
+
this.strokeWidth = 4;
|
|
2411
|
+
this.color = 'calm';
|
|
2412
|
+
}
|
|
2413
|
+
ngOnInit() {
|
|
2414
|
+
this.diameter = convertSize(this.diameter);
|
|
2415
|
+
this.strokeWidth = convertSize(this.strokeWidth);
|
|
2416
|
+
this.color = getCSSColor(this.color);
|
|
2417
|
+
}
|
|
2418
|
+
}
|
|
2419
|
+
CpsProgressCircularComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsProgressCircularComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2420
|
+
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 }] });
|
|
2421
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsProgressCircularComponent, decorators: [{
|
|
2422
|
+
type: Component,
|
|
2423
|
+
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"] }]
|
|
2424
|
+
}], propDecorators: { diameter: [{
|
|
2425
|
+
type: Input
|
|
2426
|
+
}], strokeWidth: [{
|
|
2427
|
+
type: Input
|
|
2428
|
+
}], color: [{
|
|
2429
|
+
type: Input
|
|
2430
|
+
}] } });
|
|
2431
|
+
|
|
2412
2432
|
class CpsDatepickerComponent {
|
|
2413
2433
|
set value(value) {
|
|
2414
2434
|
this._value = value;
|
|
@@ -2935,5 +2955,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
2935
2955
|
* Generated bundle index. Do not edit.
|
|
2936
2956
|
*/
|
|
2937
2957
|
|
|
2938
|
-
export { CpsAutocompleteComponent, CpsButtonComponent, CpsButtonToggleComponent, CpsCheckboxComponent, CpsChipComponent, CpsDatepickerComponent, CpsExpansionPanelComponent, CpsIconComponent, CpsInputComponent, CpsLoaderComponent, CpsProgressLinearComponent, CpsRadioComponent, CpsSelectComponent, CpsTagComponent, CpsTextareaComponent, CpsTreeSelectComponent, getCSSColor, getCpsColors, getTextColor, iconNames };
|
|
2958
|
+
export { CpsAutocompleteComponent, CpsButtonComponent, CpsButtonToggleComponent, CpsCheckboxComponent, CpsChipComponent, CpsDatepickerComponent, CpsExpansionPanelComponent, CpsIconComponent, CpsInputComponent, CpsLoaderComponent, CpsProgressCircularComponent, CpsProgressLinearComponent, CpsRadioComponent, CpsSelectComponent, CpsTagComponent, CpsTextareaComponent, CpsTreeSelectComponent, getCSSColor, getCpsColors, getTextColor, iconNames };
|
|
2939
2959
|
//# sourceMappingURL=cps-ui-kit.mjs.map
|