cps-ui-kit 0.142.0 → 0.143.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-expansion-panel/cps-expansion-panel.component.mjs +11 -3
- package/fesm2015/cps-ui-kit.mjs +10 -2
- package/fesm2015/cps-ui-kit.mjs.map +1 -1
- package/fesm2020/cps-ui-kit.mjs +10 -2
- package/fesm2020/cps-ui-kit.mjs.map +1 -1
- package/lib/components/cps-expansion-panel/cps-expansion-panel.component.d.ts +6 -1
- package/package.json +1 -1
package/fesm2020/cps-ui-kit.mjs
CHANGED
|
@@ -9020,6 +9020,11 @@ class CpsExpansionPanelComponent {
|
|
|
9020
9020
|
* @group Props
|
|
9021
9021
|
*/
|
|
9022
9022
|
this.borderRadius = '4px';
|
|
9023
|
+
/**
|
|
9024
|
+
* Border color of the expansion panel.
|
|
9025
|
+
* @group Props
|
|
9026
|
+
*/
|
|
9027
|
+
this.borderColor = 'line-dark';
|
|
9023
9028
|
/**
|
|
9024
9029
|
* The width of the expansion panel of type number denoting pixels or string.
|
|
9025
9030
|
* @group Props
|
|
@@ -9044,6 +9049,7 @@ class CpsExpansionPanelComponent {
|
|
|
9044
9049
|
this.afterExpand = new EventEmitter();
|
|
9045
9050
|
}
|
|
9046
9051
|
ngOnInit() {
|
|
9052
|
+
this.borderColor = getCSSColor(this.borderColor);
|
|
9047
9053
|
this.backgroundColor = getCSSColor(this.backgroundColor);
|
|
9048
9054
|
this.borderRadius = convertSize(this.borderRadius);
|
|
9049
9055
|
this.width = convertSize(this.width);
|
|
@@ -9061,7 +9067,7 @@ class CpsExpansionPanelComponent {
|
|
|
9061
9067
|
}
|
|
9062
9068
|
}
|
|
9063
9069
|
CpsExpansionPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsExpansionPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9064
|
-
CpsExpansionPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsExpansionPanelComponent, isStandalone: true, selector: "cps-expansion-panel", inputs: { headerTitle: "headerTitle", backgroundColor: "backgroundColor", showChevron: "showChevron", isExpanded: "isExpanded", disabled: "disabled", bordered: "bordered", borderRadius: "borderRadius", width: "width", prefixIcon: "prefixIcon" }, outputs: { afterCollapse: "afterCollapse", afterExpand: "afterExpand" }, ngImport: i0, template: "<div\n class=\"cps-expansion-panel\"\n [class.expanded]=\"isExpanded\"\n [
|
|
9070
|
+
CpsExpansionPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsExpansionPanelComponent, isStandalone: true, selector: "cps-expansion-panel", inputs: { headerTitle: "headerTitle", backgroundColor: "backgroundColor", showChevron: "showChevron", isExpanded: "isExpanded", disabled: "disabled", bordered: "bordered", borderRadius: "borderRadius", borderColor: "borderColor", width: "width", prefixIcon: "prefixIcon" }, outputs: { afterCollapse: "afterCollapse", afterExpand: "afterExpand" }, ngImport: i0, template: "<div\n class=\"cps-expansion-panel\"\n [class.expanded]=\"isExpanded\"\n [ngStyle]=\"{\n 'background-color': backgroundColor,\n 'border-radius': borderRadius,\n width: width,\n border: bordered ? '1px solid ' + borderColor : ''\n }\">\n <div\n class=\"cps-expansion-panel-header\"\n [@panelHeader]=\"\n isExpanded\n ? {\n value: 'visible',\n params: {\n borderStyle: bordered ? '1px solid ' + borderColor : '0'\n }\n }\n : 'hidden'\n \"\n [ngClass]=\"{ disabled: disabled }\"\n [style.cursor]=\"disabled ? 'default' : 'pointer'\"\n (click)=\"toggleExpansion()\">\n <span class=\"cps-expansion-panel-prefix-icon\" *ngIf=\"prefixIcon\">\n <cps-icon\n [icon]=\"prefixIcon\"\n size=\"small\"\n [color]=\"disabled ? 'text-mild' : 'text-dark'\">\n </cps-icon>\n </span>\n <div class=\"cps-expansion-panel-title\">{{ headerTitle }}</div>\n <span class=\"cps-expansion-panel-chevron\" *ngIf=\"showChevron && !disabled\">\n <cps-icon icon=\"chevron-down\" size=\"small\" color=\"text-dark\"> </cps-icon>\n </span>\n </div>\n <div\n class=\"cps-expansion-panel-content\"\n [@panelContent]=\"isExpanded ? 'visible' : 'hidden'\">\n <div class=\"cps-expansion-panel-content-inner\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n", styles: [":host{display:flex}:host .cps-expansion-panel{overflow:hidden;font-family:Source Sans Pro,sans-serif;line-height:20px;color:var(--cps-color-text-dark)}:host .cps-expansion-panel-header{display:flex;align-items:center;padding:10px 16px;font-size:16px;justify-content:space-between;-webkit-user-select:none;user-select:none}:host .cps-expansion-panel-header:hover{background-color:var(--cps-color-highlight-hover)}:host .cps-expansion-panel-header:active{background-color:var(--cps-color-highlight-active)}:host .cps-expansion-panel-header.disabled{pointer-events:none;color:var(--cps-color-text-mild)}:host .cps-expansion-panel-prefix-icon{display:flex;align-items:center;margin-right:12px;margin-bottom:2px}:host .cps-expansion-panel-prefix-icon cps-icon ::ng-deep .cps-icon{width:18px;height:18px}:host .cps-expansion-panel-title{flex:1 0 auto;display:inline-flex}:host .cps-expansion-panel-chevron{width:16px;display:flex;align-items:center;transition-duration:.2s;margin-left:6px}:host .cps-expansion-panel-content{overflow:hidden;color:var(--cps-color-text-dark);font-size:16px}:host .cps-expansion-panel-content-inner{padding:16px}:host .cps-expansion-panel.expanded .cps-expansion-panel-content{max-height:500px}:host .cps-expansion-panel.expanded .cps-expansion-panel-content:not(.ng-animating){overflow:auto}:host .cps-expansion-panel.expanded .cps-expansion-panel-chevron{transform:rotate(180deg)}\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"] }], animations: [
|
|
9065
9071
|
trigger('panelContent', [
|
|
9066
9072
|
state('hidden', style({
|
|
9067
9073
|
height: '0',
|
|
@@ -9116,7 +9122,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
9116
9122
|
]),
|
|
9117
9123
|
transition('void => *', animate(0))
|
|
9118
9124
|
])
|
|
9119
|
-
], template: "<div\n class=\"cps-expansion-panel\"\n [class.expanded]=\"isExpanded\"\n [
|
|
9125
|
+
], template: "<div\n class=\"cps-expansion-panel\"\n [class.expanded]=\"isExpanded\"\n [ngStyle]=\"{\n 'background-color': backgroundColor,\n 'border-radius': borderRadius,\n width: width,\n border: bordered ? '1px solid ' + borderColor : ''\n }\">\n <div\n class=\"cps-expansion-panel-header\"\n [@panelHeader]=\"\n isExpanded\n ? {\n value: 'visible',\n params: {\n borderStyle: bordered ? '1px solid ' + borderColor : '0'\n }\n }\n : 'hidden'\n \"\n [ngClass]=\"{ disabled: disabled }\"\n [style.cursor]=\"disabled ? 'default' : 'pointer'\"\n (click)=\"toggleExpansion()\">\n <span class=\"cps-expansion-panel-prefix-icon\" *ngIf=\"prefixIcon\">\n <cps-icon\n [icon]=\"prefixIcon\"\n size=\"small\"\n [color]=\"disabled ? 'text-mild' : 'text-dark'\">\n </cps-icon>\n </span>\n <div class=\"cps-expansion-panel-title\">{{ headerTitle }}</div>\n <span class=\"cps-expansion-panel-chevron\" *ngIf=\"showChevron && !disabled\">\n <cps-icon icon=\"chevron-down\" size=\"small\" color=\"text-dark\"> </cps-icon>\n </span>\n </div>\n <div\n class=\"cps-expansion-panel-content\"\n [@panelContent]=\"isExpanded ? 'visible' : 'hidden'\">\n <div class=\"cps-expansion-panel-content-inner\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n", styles: [":host{display:flex}:host .cps-expansion-panel{overflow:hidden;font-family:Source Sans Pro,sans-serif;line-height:20px;color:var(--cps-color-text-dark)}:host .cps-expansion-panel-header{display:flex;align-items:center;padding:10px 16px;font-size:16px;justify-content:space-between;-webkit-user-select:none;user-select:none}:host .cps-expansion-panel-header:hover{background-color:var(--cps-color-highlight-hover)}:host .cps-expansion-panel-header:active{background-color:var(--cps-color-highlight-active)}:host .cps-expansion-panel-header.disabled{pointer-events:none;color:var(--cps-color-text-mild)}:host .cps-expansion-panel-prefix-icon{display:flex;align-items:center;margin-right:12px;margin-bottom:2px}:host .cps-expansion-panel-prefix-icon cps-icon ::ng-deep .cps-icon{width:18px;height:18px}:host .cps-expansion-panel-title{flex:1 0 auto;display:inline-flex}:host .cps-expansion-panel-chevron{width:16px;display:flex;align-items:center;transition-duration:.2s;margin-left:6px}:host .cps-expansion-panel-content{overflow:hidden;color:var(--cps-color-text-dark);font-size:16px}:host .cps-expansion-panel-content-inner{padding:16px}:host .cps-expansion-panel.expanded .cps-expansion-panel-content{max-height:500px}:host .cps-expansion-panel.expanded .cps-expansion-panel-content:not(.ng-animating){overflow:auto}:host .cps-expansion-panel.expanded .cps-expansion-panel-chevron{transform:rotate(180deg)}\n"] }]
|
|
9120
9126
|
}], propDecorators: { headerTitle: [{
|
|
9121
9127
|
type: Input
|
|
9122
9128
|
}], backgroundColor: [{
|
|
@@ -9131,6 +9137,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
9131
9137
|
type: Input
|
|
9132
9138
|
}], borderRadius: [{
|
|
9133
9139
|
type: Input
|
|
9140
|
+
}], borderColor: [{
|
|
9141
|
+
type: Input
|
|
9134
9142
|
}], width: [{
|
|
9135
9143
|
type: Input
|
|
9136
9144
|
}], prefixIcon: [{
|