cps-ui-kit 0.143.0 → 0.144.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
|
@@ -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 : '
|
|
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: [
|
|
9071
9071
|
trigger('panelContent', [
|
|
9072
9072
|
state('hidden', style({
|
|
9073
9073
|
height: '0',
|
|
@@ -9083,11 +9083,11 @@ CpsExpansionPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0
|
|
|
9083
9083
|
]),
|
|
9084
9084
|
trigger('panelHeader', [
|
|
9085
9085
|
state('hidden', style({
|
|
9086
|
-
borderBottom: '
|
|
9086
|
+
borderBottom: ''
|
|
9087
9087
|
})),
|
|
9088
9088
|
state('visible', style({
|
|
9089
9089
|
borderBottom: '{{borderStyle}}'
|
|
9090
|
-
}), { params: { borderStyle: '
|
|
9090
|
+
}), { params: { borderStyle: '' } }),
|
|
9091
9091
|
transition('visible <=> hidden', [
|
|
9092
9092
|
animate('0.2s cubic-bezier(0.4, 0, 0.2, 1)')
|
|
9093
9093
|
]),
|
|
@@ -9112,17 +9112,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
9112
9112
|
]),
|
|
9113
9113
|
trigger('panelHeader', [
|
|
9114
9114
|
state('hidden', style({
|
|
9115
|
-
borderBottom: '
|
|
9115
|
+
borderBottom: ''
|
|
9116
9116
|
})),
|
|
9117
9117
|
state('visible', style({
|
|
9118
9118
|
borderBottom: '{{borderStyle}}'
|
|
9119
|
-
}), { params: { borderStyle: '
|
|
9119
|
+
}), { params: { borderStyle: '' } }),
|
|
9120
9120
|
transition('visible <=> hidden', [
|
|
9121
9121
|
animate('0.2s cubic-bezier(0.4, 0, 0.2, 1)')
|
|
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 : '
|
|
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"] }]
|
|
9126
9126
|
}], propDecorators: { headerTitle: [{
|
|
9127
9127
|
type: Input
|
|
9128
9128
|
}], backgroundColor: [{
|