cps-ui-kit 0.19.0 → 0.21.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-button/cps-button.component.mjs +4 -3
- 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 +35 -15
- package/fesm2015/cps-ui-kit.mjs.map +1 -1
- package/fesm2020/cps-ui-kit.mjs +35 -15
- 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/fesm2020/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: [{
|
|
@@ -1901,6 +1896,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
1901
1896
|
args: ['autocompleteContainer']
|
|
1902
1897
|
}] } });
|
|
1903
1898
|
|
|
1899
|
+
class CpsProgressCircularComponent {
|
|
1900
|
+
constructor() {
|
|
1901
|
+
this.diameter = 40;
|
|
1902
|
+
this.strokeWidth = 4;
|
|
1903
|
+
this.color = 'calm';
|
|
1904
|
+
}
|
|
1905
|
+
ngOnInit() {
|
|
1906
|
+
this.diameter = convertSize(this.diameter);
|
|
1907
|
+
this.strokeWidth = convertSize(this.strokeWidth);
|
|
1908
|
+
this.color = getCSSColor(this.color);
|
|
1909
|
+
}
|
|
1910
|
+
}
|
|
1911
|
+
CpsProgressCircularComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsProgressCircularComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1912
|
+
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 }] });
|
|
1913
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsProgressCircularComponent, decorators: [{
|
|
1914
|
+
type: Component,
|
|
1915
|
+
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"] }]
|
|
1916
|
+
}], propDecorators: { diameter: [{
|
|
1917
|
+
type: Input
|
|
1918
|
+
}], strokeWidth: [{
|
|
1919
|
+
type: Input
|
|
1920
|
+
}], color: [{
|
|
1921
|
+
type: Input
|
|
1922
|
+
}] } });
|
|
1923
|
+
|
|
1904
1924
|
class CpsButtonComponent {
|
|
1905
1925
|
constructor() {
|
|
1906
1926
|
this.color = 'calm';
|
|
@@ -1997,10 +2017,10 @@ class CpsButtonComponent {
|
|
|
1997
2017
|
}
|
|
1998
2018
|
}
|
|
1999
2019
|
CpsButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2000
|
-
CpsButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsButtonComponent, isStandalone: true, selector: "cps-button", inputs: { color: "color", contentColor: "contentColor", type: "type", label: "label", icon: "icon", iconPosition: "iconPosition", size: "size", width: "width", height: "height", disabled: "disabled", loading: "loading" }, outputs: { clicked: "clicked" }, host: { properties: { "style.width": "this.cvtWidth" } }, ngImport: i0, template: "<div>\n <button\n type=\"button\"\n [ngClass]=\"classesList\"\n [disabled]=\"disabled || loading\"\n
|
|
2020
|
+
CpsButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsButtonComponent, isStandalone: true, selector: "cps-button", inputs: { color: "color", contentColor: "contentColor", type: "type", label: "label", icon: "icon", iconPosition: "iconPosition", size: "size", width: "width", height: "height", disabled: "disabled", loading: "loading" }, outputs: { clicked: "clicked" }, host: { properties: { "style.width": "this.cvtWidth" } }, ngImport: i0, template: "<div>\n <button\n type=\"button\"\n [ngClass]=\"classesList\"\n [disabled]=\"disabled || loading\"\n (click)=\"onClick($event)\"\n [class.loading]=\"loading\"\n [ngStyle]=\"{\n 'background-color': type==='solid' ? buttonColor : 'transparent',\n color: textColor,\n height: cvtHeight || 'none',\n }\">\n <div class=\"cps-button__spinner\">\n <cps-progress-circular\n *ngIf=\"loading\"\n color=\"currentColor\"\n [diameter]=\"cvtIconSize\"\n strokeWidth=\"2\">\n </cps-progress-circular>\n </div>\n <div\n class=\"cps-button__content\"\n [style.visibility]=\"loading ? 'hidden' : 'visible'\">\n <cps-icon\n *ngIf=\"icon\"\n class=\"cps-button__icon\"\n [icon]=\"icon\"\n [color]=\"disabled ? 'text-light' : textColor\"\n [size]=\"cvtIconSize\">\n </cps-icon>\n <span\n class=\"cps-button__text\"\n *ngIf=\"label\"\n [ngStyle]=\"{ 'font-size': cvtFontSize || null }\"\n >{{ label }}</span\n >\n </div>\n </button>\n</div>\n", styles: [":host{width:-moz-fit-content;width:fit-content;display:inline-block}:host .cps-button{width:100%;letter-spacing:normal;font-family:Source Sans Pro,sans-serif;display:inline-flex;align-items:center;justify-content:center;position:relative;border-radius:4px;border:none;cursor:pointer;outline:none;padding:0 16px;font-weight:500}:host .cps-button:hover:not(:active):not(:disabled){background-image:linear-gradient(hsla(0,0%,100%,.1) 0 0);box-shadow:0 2px 4px #0c0c0d33}:host .cps-button:active:not(:disabled){background-image:linear-gradient(hsla(0,0%,0%,.1) 0 0)}:host .cps-button__content{display:inline-flex}:host .cps-button__icon{align-self:center}:host .cps-button:disabled{cursor:default}:host .cps-button--solid{border:0}:host .cps-button--solid:disabled{background-color:var(--cps-color-line-mid)!important;color:var(--cps-color-text-light)!important}:host .cps-button--outlined{border:2px solid;box-sizing:border-box}:host .cps-button--outlined:disabled{border-color:var(--cps-color-line-dark)!important;color:var(--cps-color-text-light)!important}:host .cps-button--borderless:disabled{color:var(--cps-color-text-light)!important}:host .cps-button--borderless:hover:not(:active):not(:disabled){box-shadow:0 1px 4px #0c0c0d1a}:host .cps-button--large{min-height:48px}:host .cps-button--large .cps-button__icon{width:20px;height:20px}:host .cps-button--large .cps-button__text{font-size:20px}:host .cps-button--large .cps-button__spinner ::ng-deep .cps-progress-circular{width:22px}:host .cps-button--large.loading{min-width:56px}:host .cps-button--normal{min-height:40px}:host .cps-button--normal .cps-button__icon{width:16px;height:16px}:host .cps-button--normal .cps-button__text{font-size:16px}:host .cps-button--normal .cps-button__spinner ::ng-deep .cps-progress-circular{width:18px}:host .cps-button--normal.loading{min-width:48px}:host .cps-button--small{min-height:32px}:host .cps-button--small .cps-button__icon{width:14px;height:14px}:host .cps-button--small .cps-button__text{font-size:14px}:host .cps-button--small .cps-button__spinner ::ng-deep .cps-progress-circular{width:14px}:host .cps-button--small.loading{min-width:40px}:host .cps-button--xsmall{min-height:24px}:host .cps-button--xsmall .cps-button__icon{width:12px;height:12px}:host .cps-button--xsmall .cps-button__text{font-size:12px}:host .cps-button--xsmall .cps-button__spinner ::ng-deep .cps-progress-circular{width:10px}:host .cps-button--xsmall.loading{min-width:32px}:host .cps-button.cps-button--icon-before .cps-button__icon{margin-right:8px}:host .cps-button.cps-button--icon-after .cps-button__icon{margin-left:8px;order:1}:host .cps-button .cps-button__spinner{position:absolute}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsProgressCircularComponent, selector: "cps-progress-circular", inputs: ["diameter", "strokeWidth", "color"] }] });
|
|
2001
2021
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsButtonComponent, decorators: [{
|
|
2002
2022
|
type: Component,
|
|
2003
|
-
args: [{ standalone: true, imports: [CommonModule, CpsIconComponent], selector: 'cps-button', template: "<div>\n <button\n type=\"button\"\n [ngClass]=\"classesList\"\n [disabled]=\"disabled || loading\"\n
|
|
2023
|
+
args: [{ standalone: true, imports: [CommonModule, CpsIconComponent, CpsProgressCircularComponent], selector: 'cps-button', template: "<div>\n <button\n type=\"button\"\n [ngClass]=\"classesList\"\n [disabled]=\"disabled || loading\"\n (click)=\"onClick($event)\"\n [class.loading]=\"loading\"\n [ngStyle]=\"{\n 'background-color': type==='solid' ? buttonColor : 'transparent',\n color: textColor,\n height: cvtHeight || 'none',\n }\">\n <div class=\"cps-button__spinner\">\n <cps-progress-circular\n *ngIf=\"loading\"\n color=\"currentColor\"\n [diameter]=\"cvtIconSize\"\n strokeWidth=\"2\">\n </cps-progress-circular>\n </div>\n <div\n class=\"cps-button__content\"\n [style.visibility]=\"loading ? 'hidden' : 'visible'\">\n <cps-icon\n *ngIf=\"icon\"\n class=\"cps-button__icon\"\n [icon]=\"icon\"\n [color]=\"disabled ? 'text-light' : textColor\"\n [size]=\"cvtIconSize\">\n </cps-icon>\n <span\n class=\"cps-button__text\"\n *ngIf=\"label\"\n [ngStyle]=\"{ 'font-size': cvtFontSize || null }\"\n >{{ label }}</span\n >\n </div>\n </button>\n</div>\n", styles: [":host{width:-moz-fit-content;width:fit-content;display:inline-block}:host .cps-button{width:100%;letter-spacing:normal;font-family:Source Sans Pro,sans-serif;display:inline-flex;align-items:center;justify-content:center;position:relative;border-radius:4px;border:none;cursor:pointer;outline:none;padding:0 16px;font-weight:500}:host .cps-button:hover:not(:active):not(:disabled){background-image:linear-gradient(hsla(0,0%,100%,.1) 0 0);box-shadow:0 2px 4px #0c0c0d33}:host .cps-button:active:not(:disabled){background-image:linear-gradient(hsla(0,0%,0%,.1) 0 0)}:host .cps-button__content{display:inline-flex}:host .cps-button__icon{align-self:center}:host .cps-button:disabled{cursor:default}:host .cps-button--solid{border:0}:host .cps-button--solid:disabled{background-color:var(--cps-color-line-mid)!important;color:var(--cps-color-text-light)!important}:host .cps-button--outlined{border:2px solid;box-sizing:border-box}:host .cps-button--outlined:disabled{border-color:var(--cps-color-line-dark)!important;color:var(--cps-color-text-light)!important}:host .cps-button--borderless:disabled{color:var(--cps-color-text-light)!important}:host .cps-button--borderless:hover:not(:active):not(:disabled){box-shadow:0 1px 4px #0c0c0d1a}:host .cps-button--large{min-height:48px}:host .cps-button--large .cps-button__icon{width:20px;height:20px}:host .cps-button--large .cps-button__text{font-size:20px}:host .cps-button--large .cps-button__spinner ::ng-deep .cps-progress-circular{width:22px}:host .cps-button--large.loading{min-width:56px}:host .cps-button--normal{min-height:40px}:host .cps-button--normal .cps-button__icon{width:16px;height:16px}:host .cps-button--normal .cps-button__text{font-size:16px}:host .cps-button--normal .cps-button__spinner ::ng-deep .cps-progress-circular{width:18px}:host .cps-button--normal.loading{min-width:48px}:host .cps-button--small{min-height:32px}:host .cps-button--small .cps-button__icon{width:14px;height:14px}:host .cps-button--small .cps-button__text{font-size:14px}:host .cps-button--small .cps-button__spinner ::ng-deep .cps-progress-circular{width:14px}:host .cps-button--small.loading{min-width:40px}:host .cps-button--xsmall{min-height:24px}:host .cps-button--xsmall .cps-button__icon{width:12px;height:12px}:host .cps-button--xsmall .cps-button__text{font-size:12px}:host .cps-button--xsmall .cps-button__spinner ::ng-deep .cps-progress-circular{width:10px}:host .cps-button--xsmall.loading{min-width:32px}:host .cps-button.cps-button--icon-before .cps-button__icon{margin-right:8px}:host .cps-button.cps-button--icon-after .cps-button__icon{margin-left:8px;order:1}:host .cps-button .cps-button__spinner{position:absolute}\n"] }]
|
|
2004
2024
|
}], propDecorators: { color: [{
|
|
2005
2025
|
type: Input
|
|
2006
2026
|
}], contentColor: [{
|
|
@@ -2862,5 +2882,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
2862
2882
|
* Generated bundle index. Do not edit.
|
|
2863
2883
|
*/
|
|
2864
2884
|
|
|
2865
|
-
export { CpsAutocompleteComponent, CpsButtonComponent, CpsButtonToggleComponent, CpsCheckboxComponent, CpsChipComponent, CpsDatepickerComponent, CpsExpansionPanelComponent, CpsIconComponent, CpsInputComponent, CpsLoaderComponent, CpsProgressLinearComponent, CpsRadioComponent, CpsSelectComponent, CpsTagComponent, CpsTextareaComponent, CpsTreeSelectComponent, getCSSColor, getCpsColors, getTextColor, iconNames };
|
|
2885
|
+
export { CpsAutocompleteComponent, CpsButtonComponent, CpsButtonToggleComponent, CpsCheckboxComponent, CpsChipComponent, CpsDatepickerComponent, CpsExpansionPanelComponent, CpsIconComponent, CpsInputComponent, CpsLoaderComponent, CpsProgressCircularComponent, CpsProgressLinearComponent, CpsRadioComponent, CpsSelectComponent, CpsTagComponent, CpsTextareaComponent, CpsTreeSelectComponent, getCSSColor, getCpsColors, getTextColor, iconNames };
|
|
2866
2886
|
//# sourceMappingURL=cps-ui-kit.mjs.map
|