cps-ui-kit 0.144.0 → 0.145.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/fesm2020/cps-ui-kit.mjs
CHANGED
|
@@ -9019,12 +9019,12 @@ class CpsExpansionPanelComponent {
|
|
|
9019
9019
|
* The border radius of the component.
|
|
9020
9020
|
* @group Props
|
|
9021
9021
|
*/
|
|
9022
|
-
this.borderRadius =
|
|
9022
|
+
this.borderRadius = 0;
|
|
9023
9023
|
/**
|
|
9024
9024
|
* Border color of the expansion panel.
|
|
9025
9025
|
* @group Props
|
|
9026
9026
|
*/
|
|
9027
|
-
this.borderColor = 'line-
|
|
9027
|
+
this.borderColor = 'line-light';
|
|
9028
9028
|
/**
|
|
9029
9029
|
* The width of the expansion panel of type number denoting pixels or string.
|
|
9030
9030
|
* @group Props
|
|
@@ -9067,7 +9067,7 @@ class CpsExpansionPanelComponent {
|
|
|
9067
9067
|
}
|
|
9068
9068
|
}
|
|
9069
9069
|
CpsExpansionPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsExpansionPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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 : ''\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{border-bottom-color:transparent;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: [
|
|
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 : ''\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{border-bottom-color:transparent;display:flex;align-items:center;padding:10px 16px 10px 24px;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;font-weight:600}: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 24px}: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: [
|
|
9071
9071
|
trigger('panelContent', [
|
|
9072
9072
|
state('hidden', style({
|
|
9073
9073
|
height: '0',
|
|
@@ -9122,7 +9122,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
9122
9122
|
]),
|
|
9123
9123
|
transition('void => *', animate(0))
|
|
9124
9124
|
])
|
|
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 : ''\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{border-bottom-color:transparent;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"] }]
|
|
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 : ''\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{border-bottom-color:transparent;display:flex;align-items:center;padding:10px 16px 10px 24px;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;font-weight:600}: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 24px}: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"] }]
|
|
9126
9126
|
}], propDecorators: { headerTitle: [{
|
|
9127
9127
|
type: Input
|
|
9128
9128
|
}], backgroundColor: [{
|