cps-ui-kit 0.20.0 → 0.22.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/esm2020/lib/components/cps-button/cps-button.component.mjs +4 -3
- package/esm2020/lib/components/cps-tree-select/cps-tree-select.component.mjs +2 -2
- package/fesm2015/cps-ui-kit.mjs +28 -28
- package/fesm2015/cps-ui-kit.mjs.map +1 -1
- package/fesm2020/cps-ui-kit.mjs +28 -28
- package/fesm2020/cps-ui-kit.mjs.map +1 -1
- package/package.json +1 -1
package/fesm2020/cps-ui-kit.mjs
CHANGED
|
@@ -1292,7 +1292,7 @@ class CpsTreeSelectComponent {
|
|
|
1292
1292
|
key,
|
|
1293
1293
|
styleClass: 'key-' + key
|
|
1294
1294
|
};
|
|
1295
|
-
if (o.
|
|
1295
|
+
if (o.isDirectory) {
|
|
1296
1296
|
inner.type = 'directory';
|
|
1297
1297
|
inner.selectable = false;
|
|
1298
1298
|
inner.styleClass += ' cps-tree-node-fully-expandable';
|
|
@@ -1896,6 +1896,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
1896
1896
|
args: ['autocompleteContainer']
|
|
1897
1897
|
}] } });
|
|
1898
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
|
+
|
|
1899
1924
|
class CpsButtonComponent {
|
|
1900
1925
|
constructor() {
|
|
1901
1926
|
this.color = 'calm';
|
|
@@ -1992,10 +2017,10 @@ class CpsButtonComponent {
|
|
|
1992
2017
|
}
|
|
1993
2018
|
}
|
|
1994
2019
|
CpsButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1995
|
-
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"] }] });
|
|
1996
2021
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsButtonComponent, decorators: [{
|
|
1997
2022
|
type: Component,
|
|
1998
|
-
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"] }]
|
|
1999
2024
|
}], propDecorators: { color: [{
|
|
2000
2025
|
type: Input
|
|
2001
2026
|
}], contentColor: [{
|
|
@@ -2349,31 +2374,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
2349
2374
|
type: Output
|
|
2350
2375
|
}] } });
|
|
2351
2376
|
|
|
2352
|
-
class CpsProgressCircularComponent {
|
|
2353
|
-
constructor() {
|
|
2354
|
-
this.diameter = 40;
|
|
2355
|
-
this.strokeWidth = 4;
|
|
2356
|
-
this.color = 'calm';
|
|
2357
|
-
}
|
|
2358
|
-
ngOnInit() {
|
|
2359
|
-
this.diameter = convertSize(this.diameter);
|
|
2360
|
-
this.strokeWidth = convertSize(this.strokeWidth);
|
|
2361
|
-
this.color = getCSSColor(this.color);
|
|
2362
|
-
}
|
|
2363
|
-
}
|
|
2364
|
-
CpsProgressCircularComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsProgressCircularComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2365
|
-
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 }] });
|
|
2366
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsProgressCircularComponent, decorators: [{
|
|
2367
|
-
type: Component,
|
|
2368
|
-
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"] }]
|
|
2369
|
-
}], propDecorators: { diameter: [{
|
|
2370
|
-
type: Input
|
|
2371
|
-
}], strokeWidth: [{
|
|
2372
|
-
type: Input
|
|
2373
|
-
}], color: [{
|
|
2374
|
-
type: Input
|
|
2375
|
-
}] } });
|
|
2376
|
-
|
|
2377
2377
|
class CpsDatepickerComponent {
|
|
2378
2378
|
set value(value) {
|
|
2379
2379
|
this._value = value;
|