cps-ui-kit 0.12.0 → 0.13.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-toggle/cps-button-toggle.component.mjs +3 -3
- package/esm2020/lib/components/cps-expansion-panel/cps-expansion-panel.component.mjs +64 -0
- package/esm2020/public-api.mjs +2 -1
- package/fesm2015/cps-ui-kit.mjs +60 -3
- package/fesm2015/cps-ui-kit.mjs.map +1 -1
- package/fesm2020/cps-ui-kit.mjs +60 -3
- package/fesm2020/cps-ui-kit.mjs.map +1 -1
- package/lib/components/cps-expansion-panel/cps-expansion-panel.component.d.ts +18 -0
- package/package.json +1 -1
- package/public-api.d.ts +1 -0
package/README.md
CHANGED
|
@@ -86,10 +86,10 @@ export class CpsButtonToggleComponent {
|
|
|
86
86
|
setDisabledState(disabled) { }
|
|
87
87
|
}
|
|
88
88
|
CpsButtonToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsButtonToggleComponent, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
89
|
-
CpsButtonToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsButtonToggleComponent, isStandalone: true, selector: "cps-button-toggle", inputs: { label: "label", options: "options", multiple: "multiple", disabled: "disabled", mandatory: "mandatory", _value: ["value", "_value"] }, outputs: { valueChanged: "valueChanged" }, providers: [CheckOptionSelectedPipe], ngImport: i0, template: "<div class=\"cps-btn-toggle\">\n <div class=\"cps-btn-toggle-label\" *ngIf=\"label\">\n <span>{{ label }}</span>\n </div>\n <div class=\"cps-btn-toggle-content\">\n <label *ngFor=\"let option of options\" class=\"cps-btn-toggle-content-option\">\n <input\n class=\"cps-btn-toggle-content-option-input\"\n [type]=\"!multiple && mandatory ? 'radio' : 'checkbox'\"\n [disabled]=\"option.disabled || disabled\"\n [value]=\"option.value\"\n [checked]=\"\n option.value | checkOptionSelected : value : multiple : true : ''\n \"\n (change)=\"updateValueEvent($event)\" />\n <span class=\"cps-btn-toggle-content-option-content\">\n <span>{{ option.label }}</span>\n </span>\n </label>\n </div>\n</div>\n", styles: [":host .cps-btn-toggle-label{color:var(--cps-color-text-dark);margin-bottom:.75rem}:host .cps-btn-toggle-content{display:flex}:host .cps-btn-toggle-content-option-input{clip:rect(0 0 0 0);clip-path:inset(100%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host .cps-btn-toggle-content-option-input:checked+.cps-btn-toggle-content-option-content{background-color:var(--cps-color-calm);z-index:1;color:#fff}:host .cps-btn-toggle-content-option-input:checked+.cps-btn-toggle-content-option-content:hover{background-image:linear-gradient(hsla(0,0%,100%,.1) 0 0)}:host .cps-btn-toggle-content-option-input:disabled+.cps-btn-toggle-content-option-content{pointer-events:none;background-color:#f7f7f7;color:var(--cps-color-text-light)}:host .cps-btn-toggle-content-option-input:disabled:checked+.cps-btn-toggle-content-option-content{background-color:var(--cps-color-line-mid);color:var(--cps-color-text-mild)}:host .cps-btn-toggle-content-option-content{height:36px;display:flex;width:max-content;align-items:center;cursor:pointer;background-color:#fff;padding:.375em .75em;position:relative;border:.0625em solid var(--cps-color-silver);border-right:0;letter-spacing:.05em;color:var(--cps-color-text-dark);text-align:center;transition:background-color .2s ease;-webkit-user-select:none;user-select:none}:host .cps-btn-toggle-content-option-content:hover{background:#f8f4f5}:host .cps-btn-toggle-content-option:first-child .cps-btn-toggle-content-option-content{border-radius:4px 0 0 4px}:host .cps-btn-toggle-content-option:last-child .cps-btn-toggle-content-option-content{border-radius:0 4px 4px 0;border-right:.0625em solid var(--cps-color-silver)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: CheckOptionSelectedPipe, name: "checkOptionSelected" }] });
|
|
89
|
+
CpsButtonToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsButtonToggleComponent, isStandalone: true, selector: "cps-button-toggle", inputs: { label: "label", options: "options", multiple: "multiple", disabled: "disabled", mandatory: "mandatory", _value: ["value", "_value"] }, outputs: { valueChanged: "valueChanged" }, providers: [CheckOptionSelectedPipe], ngImport: i0, template: "<div class=\"cps-btn-toggle\">\n <div class=\"cps-btn-toggle-label\" *ngIf=\"label\">\n <span>{{ label }}</span>\n </div>\n <div class=\"cps-btn-toggle-content\">\n <label *ngFor=\"let option of options\" class=\"cps-btn-toggle-content-option\">\n <input\n class=\"cps-btn-toggle-content-option-input\"\n [type]=\"!multiple && mandatory ? 'radio' : 'checkbox'\"\n [disabled]=\"option.disabled || disabled\"\n [value]=\"option.value\"\n [checked]=\"\n option.value | checkOptionSelected : value : multiple : true : ''\n \"\n (change)=\"updateValueEvent($event)\" />\n <span class=\"cps-btn-toggle-content-option-content\">\n <span>{{ option.label }}</span>\n </span>\n </label>\n </div>\n</div>\n", styles: [":host .cps-btn-toggle-label{color:var(--cps-color-text-dark);margin-bottom:.75rem}:host .cps-btn-toggle-content{display:flex}:host .cps-btn-toggle-content-option-input{clip:rect(0 0 0 0);clip-path:inset(100%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host .cps-btn-toggle-content-option-input:checked+.cps-btn-toggle-content-option-content{background-color:var(--cps-color-calm);z-index:1;color:#fff}:host .cps-btn-toggle-content-option-input:checked+.cps-btn-toggle-content-option-content:hover{background-image:linear-gradient(hsla(0,0%,100%,.1) 0 0)}:host .cps-btn-toggle-content-option-input:disabled+.cps-btn-toggle-content-option-content{pointer-events:none;background-color:#f7f7f7;color:var(--cps-color-text-light)}:host .cps-btn-toggle-content-option-input:disabled:checked+.cps-btn-toggle-content-option-content{background-color:var(--cps-color-line-mid);color:var(--cps-color-text-mild)}:host .cps-btn-toggle-content-option-content{height:36px;display:flex;width:max-content;align-items:center;cursor:pointer;background-color:#fff;padding:.375em .75em;position:relative;border:.0625em solid var(--cps-color-silver);border-right:0;letter-spacing:.05em;color:var(--cps-color-text-dark);text-align:center;transition:background-color .2s ease;-webkit-user-select:none;user-select:none}:host .cps-btn-toggle-content-option-content:hover{background:#f8f4f5}:host .cps-btn-toggle-content-option-content:active{background:#f1eaec}:host .cps-btn-toggle-content-option:first-child .cps-btn-toggle-content-option-content{border-radius:4px 0 0 4px}:host .cps-btn-toggle-content-option:last-child .cps-btn-toggle-content-option-content{border-radius:0 4px 4px 0;border-right:.0625em solid var(--cps-color-silver)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: CheckOptionSelectedPipe, name: "checkOptionSelected" }] });
|
|
90
90
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsButtonToggleComponent, decorators: [{
|
|
91
91
|
type: Component,
|
|
92
|
-
args: [{ standalone: true, imports: [CommonModule, CheckOptionSelectedPipe], providers: [CheckOptionSelectedPipe], selector: 'cps-button-toggle', template: "<div class=\"cps-btn-toggle\">\n <div class=\"cps-btn-toggle-label\" *ngIf=\"label\">\n <span>{{ label }}</span>\n </div>\n <div class=\"cps-btn-toggle-content\">\n <label *ngFor=\"let option of options\" class=\"cps-btn-toggle-content-option\">\n <input\n class=\"cps-btn-toggle-content-option-input\"\n [type]=\"!multiple && mandatory ? 'radio' : 'checkbox'\"\n [disabled]=\"option.disabled || disabled\"\n [value]=\"option.value\"\n [checked]=\"\n option.value | checkOptionSelected : value : multiple : true : ''\n \"\n (change)=\"updateValueEvent($event)\" />\n <span class=\"cps-btn-toggle-content-option-content\">\n <span>{{ option.label }}</span>\n </span>\n </label>\n </div>\n</div>\n", styles: [":host .cps-btn-toggle-label{color:var(--cps-color-text-dark);margin-bottom:.75rem}:host .cps-btn-toggle-content{display:flex}:host .cps-btn-toggle-content-option-input{clip:rect(0 0 0 0);clip-path:inset(100%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host .cps-btn-toggle-content-option-input:checked+.cps-btn-toggle-content-option-content{background-color:var(--cps-color-calm);z-index:1;color:#fff}:host .cps-btn-toggle-content-option-input:checked+.cps-btn-toggle-content-option-content:hover{background-image:linear-gradient(hsla(0,0%,100%,.1) 0 0)}:host .cps-btn-toggle-content-option-input:disabled+.cps-btn-toggle-content-option-content{pointer-events:none;background-color:#f7f7f7;color:var(--cps-color-text-light)}:host .cps-btn-toggle-content-option-input:disabled:checked+.cps-btn-toggle-content-option-content{background-color:var(--cps-color-line-mid);color:var(--cps-color-text-mild)}:host .cps-btn-toggle-content-option-content{height:36px;display:flex;width:max-content;align-items:center;cursor:pointer;background-color:#fff;padding:.375em .75em;position:relative;border:.0625em solid var(--cps-color-silver);border-right:0;letter-spacing:.05em;color:var(--cps-color-text-dark);text-align:center;transition:background-color .2s ease;-webkit-user-select:none;user-select:none}:host .cps-btn-toggle-content-option-content:hover{background:#f8f4f5}:host .cps-btn-toggle-content-option:first-child .cps-btn-toggle-content-option-content{border-radius:4px 0 0 4px}:host .cps-btn-toggle-content-option:last-child .cps-btn-toggle-content-option-content{border-radius:0 4px 4px 0;border-right:.0625em solid var(--cps-color-silver)}\n"] }]
|
|
92
|
+
args: [{ standalone: true, imports: [CommonModule, CheckOptionSelectedPipe], providers: [CheckOptionSelectedPipe], selector: 'cps-button-toggle', template: "<div class=\"cps-btn-toggle\">\n <div class=\"cps-btn-toggle-label\" *ngIf=\"label\">\n <span>{{ label }}</span>\n </div>\n <div class=\"cps-btn-toggle-content\">\n <label *ngFor=\"let option of options\" class=\"cps-btn-toggle-content-option\">\n <input\n class=\"cps-btn-toggle-content-option-input\"\n [type]=\"!multiple && mandatory ? 'radio' : 'checkbox'\"\n [disabled]=\"option.disabled || disabled\"\n [value]=\"option.value\"\n [checked]=\"\n option.value | checkOptionSelected : value : multiple : true : ''\n \"\n (change)=\"updateValueEvent($event)\" />\n <span class=\"cps-btn-toggle-content-option-content\">\n <span>{{ option.label }}</span>\n </span>\n </label>\n </div>\n</div>\n", styles: [":host .cps-btn-toggle-label{color:var(--cps-color-text-dark);margin-bottom:.75rem}:host .cps-btn-toggle-content{display:flex}:host .cps-btn-toggle-content-option-input{clip:rect(0 0 0 0);clip-path:inset(100%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host .cps-btn-toggle-content-option-input:checked+.cps-btn-toggle-content-option-content{background-color:var(--cps-color-calm);z-index:1;color:#fff}:host .cps-btn-toggle-content-option-input:checked+.cps-btn-toggle-content-option-content:hover{background-image:linear-gradient(hsla(0,0%,100%,.1) 0 0)}:host .cps-btn-toggle-content-option-input:disabled+.cps-btn-toggle-content-option-content{pointer-events:none;background-color:#f7f7f7;color:var(--cps-color-text-light)}:host .cps-btn-toggle-content-option-input:disabled:checked+.cps-btn-toggle-content-option-content{background-color:var(--cps-color-line-mid);color:var(--cps-color-text-mild)}:host .cps-btn-toggle-content-option-content{height:36px;display:flex;width:max-content;align-items:center;cursor:pointer;background-color:#fff;padding:.375em .75em;position:relative;border:.0625em solid var(--cps-color-silver);border-right:0;letter-spacing:.05em;color:var(--cps-color-text-dark);text-align:center;transition:background-color .2s ease;-webkit-user-select:none;user-select:none}:host .cps-btn-toggle-content-option-content:hover{background:#f8f4f5}:host .cps-btn-toggle-content-option-content:active{background:#f1eaec}:host .cps-btn-toggle-content-option:first-child .cps-btn-toggle-content-option-content{border-radius:4px 0 0 4px}:host .cps-btn-toggle-content-option:last-child .cps-btn-toggle-content-option-content{border-radius:0 4px 4px 0;border-right:.0625em solid var(--cps-color-silver)}\n"] }]
|
|
93
93
|
}], ctorParameters: function () { return [{ type: i1.NgControl, decorators: [{
|
|
94
94
|
type: Self
|
|
95
95
|
}, {
|
|
@@ -110,4 +110,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
110
110
|
}], valueChanged: [{
|
|
111
111
|
type: Output
|
|
112
112
|
}] } });
|
|
113
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
113
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY3BzLWJ1dHRvbi10b2dnbGUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY3BzLXVpLWtpdC9zcmMvbGliL2NvbXBvbmVudHMvY3BzLWJ1dHRvbi10b2dnbGUvY3BzLWJ1dHRvbi10b2dnbGUuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY3BzLXVpLWtpdC9zcmMvbGliL2NvbXBvbmVudHMvY3BzLWJ1dHRvbi10b2dnbGUvY3BzLWJ1dHRvbi10b2dnbGUuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFDTCxTQUFTLEVBQ1QsWUFBWSxFQUNaLEtBQUssRUFFTCxRQUFRLEVBQ1IsTUFBTSxFQUNOLElBQUksRUFDTCxNQUFNLGVBQWUsQ0FBQztBQUV2QixPQUFPLEVBQUUsT0FBTyxFQUFFLE1BQU0sV0FBVyxDQUFDO0FBQ3BDLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLHdDQUF3QyxDQUFDOzs7O0FBZ0JqRixNQUFNLE9BQU8sd0JBQXdCO0lBUW5DLElBQUksS0FBSyxDQUFDLEtBQVU7UUFDbEIsSUFBSSxDQUFDLE1BQU0sR0FBRyxLQUFLLENBQUM7UUFDcEIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUN2QixDQUFDO0lBRUQsSUFBSSxLQUFLO1FBQ1AsT0FBTyxJQUFJLENBQUMsTUFBTSxDQUFDO0lBQ3JCLENBQUM7SUFJRCxZQUF3QyxRQUFtQjtRQUFuQixhQUFRLEdBQVIsUUFBUSxDQUFXO1FBbEJsRCxVQUFLLEdBQUcsRUFBRSxDQUFDO1FBQ1gsWUFBTyxHQUFHLEVBQXVCLENBQUM7UUFDbEMsYUFBUSxHQUFHLEtBQUssQ0FBQztRQUNqQixhQUFRLEdBQUcsS0FBSyxDQUFDO1FBQ2pCLGNBQVMsR0FBRyxJQUFJLENBQUMsQ0FBQywyQ0FBMkM7UUFDdEQsV0FBTSxHQUFRLFNBQVMsQ0FBQztRQVc5QixpQkFBWSxHQUFHLElBQUksWUFBWSxFQUFPLENBQUM7UUFjakQsZ0VBQWdFO1FBQ2hFLGFBQVEsR0FBRyxDQUFDLEtBQVUsRUFBRSxFQUFFLEdBQUUsQ0FBQyxDQUFDO1FBQzlCLGdFQUFnRTtRQUNoRSxjQUFTLEdBQUcsR0FBRyxFQUFFLEdBQUUsQ0FBQyxDQUFDO1FBZG5CLElBQUksSUFBSSxDQUFDLFFBQVEsRUFBRTtZQUNqQixJQUFJLENBQUMsUUFBUSxDQUFDLGFBQWEsR0FBRyxJQUFJLENBQUM7U0FDcEM7SUFDSCxDQUFDO0lBRUQsUUFBUTtRQUNOLElBQUksSUFBSSxDQUFDLFFBQVEsSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNLEVBQUU7WUFDakMsSUFBSSxDQUFDLE1BQU0sR0FBRyxFQUFFLENBQUM7U0FDbEI7SUFDSCxDQUFDO0lBT0QsZ0JBQWdCLENBQUMsRUFBTztRQUN0QixJQUFJLENBQUMsUUFBUSxHQUFHLEVBQUUsQ0FBQztJQUNyQixDQUFDO0lBRUQsaUJBQWlCLENBQUMsRUFBTztRQUN2QixJQUFJLENBQUMsU0FBUyxHQUFHLEVBQUUsQ0FBQztJQUN0QixDQUFDO0lBRUQsVUFBVSxDQUFDLEtBQVU7UUFDbkIsSUFBSSxDQUFDLEtBQUssR0FBRyxLQUFLLENBQUM7SUFDckIsQ0FBQztJQUVELGdCQUFnQixDQUFDLEtBQVU7UUFDekIsSUFBSSxJQUFJLENBQUMsUUFBUTtZQUFFLE9BQU87UUFDMUIsTUFBTSxLQUFLLEdBQUcsS0FBSyxFQUFFLE1BQU0sRUFBRSxPQUFPLElBQUksS0FBSyxDQUFDO1FBRTlDLElBQUksSUFBSSxDQUFDLFNBQVMsSUFBSSxJQUFJLENBQUMsUUFBUSxJQUFJLENBQUMsS0FBSyxJQUFJLElBQUksQ0FBQyxLQUFLLENBQUMsTUFBTSxHQUFHLENBQUMsRUFBRTtZQUN0RSxLQUFLLENBQUMsTUFBTSxDQUFDLE9BQU8sR0FBRyxJQUFJLENBQUM7WUFDNUIsT0FBTztTQUNSO1FBRUQsTUFBTSxHQUFHLEdBQUcsS0FBSyxFQUFFLE1BQU0sRUFBRSxLQUFLLElBQUksU0FBUyxDQUFDO1FBRTlDLElBQUksSUFBSSxDQUFDLFFBQVEsRUFBRTtZQUNqQixJQUFJLEdBQUcsR0FBRyxFQUFTLENBQUM7WUFDcEIsSUFBSSxDQUFDLEtBQUssRUFBRTtnQkFDVixHQUFHLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFNLEVBQUUsRUFBRSxDQUFDLENBQUMsT0FBTyxDQUFDLENBQUMsRUFBRSxHQUFHLENBQUMsQ0FBQyxDQUFDO2FBQ3ZEO2lCQUFNO2dCQUNMLElBQUksQ0FBQyxPQUFPLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxFQUFFLEVBQUU7b0JBQ3pCLElBQ0UsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFNLEVBQUUsRUFBRSxDQUFDLE9BQU8sQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLEtBQUssQ0FBQyxDQUFDO3dCQUNoRCxPQUFPLENBQUMsR0FBRyxFQUFFLENBQUMsQ0FBQyxLQUFLLENBQUMsRUFDckI7d0JBQ0EsR0FBRyxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDLENBQUM7cUJBQ25CO2dCQUNILENBQUMsQ0FBQyxDQUFDO2FBQ0o7WUFDRCxJQUFJLENBQUMsWUFBWSxDQUFDLEdBQUcsQ0FBQyxDQUFDO1NBQ3hCO2FBQU07WUFDTCxJQUFJLElBQUksQ0FBQyxTQUFTLEVBQUU7Z0JBQ2xCLElBQUksQ0FBQyxZQUFZLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxRQUFRO2FBQ2pDO2lCQUFNO2dCQUNMLElBQUksQ0FBQyxZQUFZLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDLFNBQVMsQ0FBQyxDQUFDO2FBQzVDO1NBQ0Y7SUFDSCxDQUFDO0lBRU8sWUFBWSxDQUFDLEtBQVU7UUFDN0IsSUFBSSxDQUFDLFVBQVUsQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUN2QixJQUFJLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQ3JCLElBQUksQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ2hDLENBQUM7SUFFRCxnRUFBZ0U7SUFDaEUsZ0JBQWdCLENBQUMsUUFBaUIsSUFBRyxDQUFDOztxSEExRjNCLHdCQUF3Qjt5R0FBeEIsd0JBQXdCLDRQQUx4QixDQUFDLHVCQUF1QixDQUFDLDBCQ3ZCdEMsc3hCQXFCQSwyd0REQ1ksWUFBWSwyUEFBRSx1QkFBdUI7MkZBTXBDLHdCQUF3QjtrQkFScEMsU0FBUztpQ0FDSSxJQUFJLFdBQ1AsQ0FBQyxZQUFZLEVBQUUsdUJBQXVCLENBQUMsYUFDckMsQ0FBQyx1QkFBdUIsQ0FBQyxZQUMxQixtQkFBbUI7OzBCQXVCaEIsSUFBSTs7MEJBQUksUUFBUTs0Q0FsQnBCLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxPQUFPO3NCQUFmLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLFNBQVM7c0JBQWpCLEtBQUs7Z0JBQ1UsTUFBTTtzQkFBckIsS0FBSzt1QkFBQyxPQUFPO2dCQVdKLFlBQVk7c0JBQXJCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHtcbiAgQ29tcG9uZW50LFxuICBFdmVudEVtaXR0ZXIsXG4gIElucHV0LFxuICBPbkluaXQsXG4gIE9wdGlvbmFsLFxuICBPdXRwdXQsXG4gIFNlbGZcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDb250cm9sVmFsdWVBY2Nlc3NvciwgTmdDb250cm9sIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHsgaXNFcXVhbCB9IGZyb20gJ2xvZGFzaC1lcyc7XG5pbXBvcnQgeyBDaGVja09wdGlvblNlbGVjdGVkUGlwZSB9IGZyb20gJy4uLy4uL3BpcGVzL2NoZWNrLW9wdGlvbi1zZWxlY3RlZC5waXBlJztcblxuZXhwb3J0IHR5cGUgQnRuVG9nZ2xlT3B0aW9uID0ge1xuICB2YWx1ZTogYW55O1xuICBsYWJlbDogc3RyaW5nO1xuICBkaXNhYmxlZD86IGJvb2xlYW47XG59O1xuXG5AQ29tcG9uZW50KHtcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZSwgQ2hlY2tPcHRpb25TZWxlY3RlZFBpcGVdLFxuICBwcm92aWRlcnM6IFtDaGVja09wdGlvblNlbGVjdGVkUGlwZV0sXG4gIHNlbGVjdG9yOiAnY3BzLWJ1dHRvbi10b2dnbGUnLFxuICB0ZW1wbGF0ZVVybDogJy4vY3BzLWJ1dHRvbi10b2dnbGUuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9jcHMtYnV0dG9uLXRvZ2dsZS5jb21wb25lbnQuc2NzcyddXG59KVxuZXhwb3J0IGNsYXNzIENwc0J1dHRvblRvZ2dsZUNvbXBvbmVudCBpbXBsZW1lbnRzIENvbnRyb2xWYWx1ZUFjY2Vzc29yLCBPbkluaXQge1xuICBASW5wdXQoKSBsYWJlbCA9ICcnO1xuICBASW5wdXQoKSBvcHRpb25zID0gW10gYXMgQnRuVG9nZ2xlT3B0aW9uW107XG4gIEBJbnB1dCgpIG11bHRpcGxlID0gZmFsc2U7XG4gIEBJbnB1dCgpIGRpc2FibGVkID0gZmFsc2U7XG4gIEBJbnB1dCgpIG1hbmRhdG9yeSA9IHRydWU7IC8vIGF0IGxlYXN0IG9uZSBvZiB0aGUgb3B0aW9ucyBpcyBtYW5kYXRvcnlcbiAgQElucHV0KCd2YWx1ZScpIF92YWx1ZTogYW55ID0gdW5kZWZpbmVkO1xuXG4gIHNldCB2YWx1ZSh2YWx1ZTogYW55KSB7XG4gICAgdGhpcy5fdmFsdWUgPSB2YWx1ZTtcbiAgICB0aGlzLm9uQ2hhbmdlKHZhbHVlKTtcbiAgfVxuXG4gIGdldCB2YWx1ZSgpOiBhbnkge1xuICAgIHJldHVybiB0aGlzLl92YWx1ZTtcbiAgfVxuXG4gIEBPdXRwdXQoKSB2YWx1ZUNoYW5nZWQgPSBuZXcgRXZlbnRFbWl0dGVyPGFueT4oKTtcblxuICBjb25zdHJ1Y3RvcihAU2VsZigpIEBPcHRpb25hbCgpIHByaXZhdGUgX2NvbnRyb2w6IE5nQ29udHJvbCkge1xuICAgIGlmICh0aGlzLl9jb250cm9sKSB7XG4gICAgICB0aGlzLl9jb250cm9sLnZhbHVlQWNjZXNzb3IgPSB0aGlzO1xuICAgIH1cbiAgfVxuXG4gIG5nT25Jbml0KCkge1xuICAgIGlmICh0aGlzLm11bHRpcGxlICYmICF0aGlzLl92YWx1ZSkge1xuICAgICAgdGhpcy5fdmFsdWUgPSBbXTtcbiAgICB9XG4gIH1cblxuICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgQHR5cGVzY3JpcHQtZXNsaW50L25vLWVtcHR5LWZ1bmN0aW9uXG4gIG9uQ2hhbmdlID0gKGV2ZW50OiBhbnkpID0+IHt9O1xuICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgQHR5cGVzY3JpcHQtZXNsaW50L25vLWVtcHR5LWZ1bmN0aW9uXG4gIG9uVG91Y2hlZCA9ICgpID0+IHt9O1xuXG4gIHJlZ2lzdGVyT25DaGFuZ2UoZm46IGFueSkge1xuICAgIHRoaXMub25DaGFuZ2UgPSBmbjtcbiAgfVxuXG4gIHJlZ2lzdGVyT25Ub3VjaGVkKGZuOiBhbnkpIHtcbiAgICB0aGlzLm9uVG91Y2hlZCA9IGZuO1xuICB9XG5cbiAgd3JpdGVWYWx1ZSh2YWx1ZTogYW55KSB7XG4gICAgdGhpcy52YWx1ZSA9IHZhbHVlO1xuICB9XG5cbiAgdXBkYXRlVmFsdWVFdmVudChldmVudDogYW55KSB7XG4gICAgaWYgKHRoaXMuZGlzYWJsZWQpIHJldHVybjtcbiAgICBjb25zdCBjaGVjayA9IGV2ZW50Py50YXJnZXQ/LmNoZWNrZWQgfHwgZmFsc2U7XG5cbiAgICBpZiAodGhpcy5tYW5kYXRvcnkgJiYgdGhpcy5tdWx0aXBsZSAmJiAhY2hlY2sgJiYgdGhpcy52YWx1ZS5sZW5ndGggPCAyKSB7XG4gICAgICBldmVudC50YXJnZXQuY2hlY2tlZCA9IHRydWU7XG4gICAgICByZXR1cm47XG4gICAgfVxuXG4gICAgY29uc3QgdmFsID0gZXZlbnQ/LnRhcmdldD8udmFsdWUgfHwgdW5kZWZpbmVkO1xuXG4gICAgaWYgKHRoaXMubXVsdGlwbGUpIHtcbiAgICAgIGxldCByZXMgPSBbXSBhcyBhbnk7XG4gICAgICBpZiAoIWNoZWNrKSB7XG4gICAgICAgIHJlcyA9IHRoaXMudmFsdWUuZmlsdGVyKCh2OiBhbnkpID0+ICFpc0VxdWFsKHYsIHZhbCkpO1xuICAgICAgfSBlbHNlIHtcbiAgICAgICAgdGhpcy5vcHRpb25zLmZvckVhY2goKG8pID0+IHtcbiAgICAgICAgICBpZiAoXG4gICAgICAgICAgICB0aGlzLnZhbHVlLnNvbWUoKHY6IGFueSkgPT4gaXNFcXVhbCh2LCBvLnZhbHVlKSkgfHxcbiAgICAgICAgICAgIGlzRXF1YWwodmFsLCBvLnZhbHVlKVxuICAgICAgICAgICkge1xuICAgICAgICAgICAgcmVzLnB1c2goby52YWx1ZSk7XG4gICAgICAgICAgfVxuICAgICAgICB9KTtcbiAgICAgIH1cbiAgICAgIHRoaXMuX3VwZGF0ZVZhbHVlKHJlcyk7XG4gICAgfSBlbHNlIHtcbiAgICAgIGlmICh0aGlzLm1hbmRhdG9yeSkge1xuICAgICAgICB0aGlzLl91cGRhdGVWYWx1ZSh2YWwpOyAvLyByYWRpb1xuICAgICAgfSBlbHNlIHtcbiAgICAgICAgdGhpcy5fdXBkYXRlVmFsdWUoY2hlY2sgPyB2YWwgOiB1bmRlZmluZWQpO1xuICAgICAgfVxuICAgIH1cbiAgfVxuXG4gIHByaXZhdGUgX3VwZGF0ZVZhbHVlKHZhbHVlOiBhbnkpIHtcbiAgICB0aGlzLndyaXRlVmFsdWUodmFsdWUpO1xuICAgIHRoaXMub25DaGFuZ2UodmFsdWUpO1xuICAgIHRoaXMudmFsdWVDaGFuZ2VkLmVtaXQodmFsdWUpO1xuICB9XG5cbiAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEB0eXBlc2NyaXB0LWVzbGludC9uby1lbXB0eS1mdW5jdGlvblxuICBzZXREaXNhYmxlZFN0YXRlKGRpc2FibGVkOiBib29sZWFuKSB7fVxufVxuIiwiPGRpdiBjbGFzcz1cImNwcy1idG4tdG9nZ2xlXCI+XG4gIDxkaXYgY2xhc3M9XCJjcHMtYnRuLXRvZ2dsZS1sYWJlbFwiICpuZ0lmPVwibGFiZWxcIj5cbiAgICA8c3Bhbj57eyBsYWJlbCB9fTwvc3Bhbj5cbiAgPC9kaXY+XG4gIDxkaXYgY2xhc3M9XCJjcHMtYnRuLXRvZ2dsZS1jb250ZW50XCI+XG4gICAgPGxhYmVsICpuZ0Zvcj1cImxldCBvcHRpb24gb2Ygb3B0aW9uc1wiIGNsYXNzPVwiY3BzLWJ0bi10b2dnbGUtY29udGVudC1vcHRpb25cIj5cbiAgICAgIDxpbnB1dFxuICAgICAgICBjbGFzcz1cImNwcy1idG4tdG9nZ2xlLWNvbnRlbnQtb3B0aW9uLWlucHV0XCJcbiAgICAgICAgW3R5cGVdPVwiIW11bHRpcGxlICYmIG1hbmRhdG9yeSA/ICdyYWRpbycgOiAnY2hlY2tib3gnXCJcbiAgICAgICAgW2Rpc2FibGVkXT1cIm9wdGlvbi5kaXNhYmxlZCB8fCBkaXNhYmxlZFwiXG4gICAgICAgIFt2YWx1ZV09XCJvcHRpb24udmFsdWVcIlxuICAgICAgICBbY2hlY2tlZF09XCJcbiAgICAgICAgICBvcHRpb24udmFsdWUgfCBjaGVja09wdGlvblNlbGVjdGVkIDogdmFsdWUgOiBtdWx0aXBsZSA6IHRydWUgOiAnJ1xuICAgICAgICBcIlxuICAgICAgICAoY2hhbmdlKT1cInVwZGF0ZVZhbHVlRXZlbnQoJGV2ZW50KVwiIC8+XG4gICAgICA8c3BhbiBjbGFzcz1cImNwcy1idG4tdG9nZ2xlLWNvbnRlbnQtb3B0aW9uLWNvbnRlbnRcIj5cbiAgICAgICAgPHNwYW4+e3sgb3B0aW9uLmxhYmVsIH19PC9zcGFuPlxuICAgICAgPC9zcGFuPlxuICAgIDwvbGFiZWw+XG4gIDwvZGl2PlxuPC9kaXY+XG4iXX0=
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import { CommonModule } from '@angular/common';
|
|
2
|
+
import { Component, EventEmitter, Input, Output } from '@angular/core';
|
|
3
|
+
import { CpsIconComponent } from '../cps-icon/cps-icon.component';
|
|
4
|
+
import { getCSSColor } from '../../utils/colors-utils';
|
|
5
|
+
import { convertSize } from '../../utils/size-utils';
|
|
6
|
+
import * as i0 from "@angular/core";
|
|
7
|
+
import * as i1 from "@angular/common";
|
|
8
|
+
export class CpsExpansionPanelComponent {
|
|
9
|
+
constructor() {
|
|
10
|
+
this.headerTitle = '';
|
|
11
|
+
this.backgroundColor = 'transparent';
|
|
12
|
+
this.showChevron = true;
|
|
13
|
+
this.isExpanded = false;
|
|
14
|
+
this.disabled = false;
|
|
15
|
+
this.bordered = true;
|
|
16
|
+
this.borderRadius = '4px';
|
|
17
|
+
this.width = '100%';
|
|
18
|
+
this.afterCollapse = new EventEmitter();
|
|
19
|
+
this.afterExpand = new EventEmitter();
|
|
20
|
+
}
|
|
21
|
+
ngOnInit() {
|
|
22
|
+
this.backgroundColor = getCSSColor(this.backgroundColor);
|
|
23
|
+
this.borderRadius = convertSize(this.borderRadius);
|
|
24
|
+
this.width = convertSize(this.width);
|
|
25
|
+
}
|
|
26
|
+
toggleExpansion() {
|
|
27
|
+
if (!this.disabled) {
|
|
28
|
+
this.isExpanded = !this.isExpanded;
|
|
29
|
+
if (this.isExpanded) {
|
|
30
|
+
this.afterExpand.emit();
|
|
31
|
+
}
|
|
32
|
+
if (!this.isExpanded) {
|
|
33
|
+
this.afterCollapse.emit();
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
CpsExpansionPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsExpansionPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
39
|
+
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" }, outputs: { afterCollapse: "afterCollapse", afterExpand: "afterExpand" }, ngImport: i0, template: "<div\n class=\"cps-expansion-panel\"\n [class.expanded]=\"isExpanded\"\n [class.bordered]=\"bordered\"\n [ngStyle]=\"{\n 'background-color': backgroundColor,\n 'border-radius': borderRadius,\n width: width\n }\">\n <div\n class=\"cps-expansion-panel-header\"\n [ngClass]=\"{ disabled: disabled }\"\n [style.cursor]=\"disabled ? 'default' : 'pointer'\"\n (click)=\"toggleExpansion()\">\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 class=\"cps-expansion-panel-content\">\n <ng-content></ng-content>\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.bordered{border:1px solid var(--cps-color-text-lightest)}: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:#f8f4f5}:host .cps-expansion-panel-header:active{background-color:#f1eaec}:host .cps-expansion-panel-header.disabled{pointer-events:none;color:var(--cps-color-text-mild)}: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{max-height:0;overflow:hidden;display:none;padding:16px;transition:max-height .3s ease;color:var(--cps-color-text-dark);font-size:16px}:host .cps-expansion-panel.expanded.bordered .cps-expansion-panel-header{border-bottom:1px solid var(--cps-color-text-lightest)}:host .cps-expansion-panel.expanded .cps-expansion-panel-content{overflow:auto;padding:16px;max-height:500px;display:block}:host .cps-expansion-panel.expanded .cps-expansion-panel-chevron{transform:rotate(180deg)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }] });
|
|
40
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsExpansionPanelComponent, decorators: [{
|
|
41
|
+
type: Component,
|
|
42
|
+
args: [{ standalone: true, imports: [CommonModule, CpsIconComponent], selector: 'cps-expansion-panel', template: "<div\n class=\"cps-expansion-panel\"\n [class.expanded]=\"isExpanded\"\n [class.bordered]=\"bordered\"\n [ngStyle]=\"{\n 'background-color': backgroundColor,\n 'border-radius': borderRadius,\n width: width\n }\">\n <div\n class=\"cps-expansion-panel-header\"\n [ngClass]=\"{ disabled: disabled }\"\n [style.cursor]=\"disabled ? 'default' : 'pointer'\"\n (click)=\"toggleExpansion()\">\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 class=\"cps-expansion-panel-content\">\n <ng-content></ng-content>\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.bordered{border:1px solid var(--cps-color-text-lightest)}: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:#f8f4f5}:host .cps-expansion-panel-header:active{background-color:#f1eaec}:host .cps-expansion-panel-header.disabled{pointer-events:none;color:var(--cps-color-text-mild)}: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{max-height:0;overflow:hidden;display:none;padding:16px;transition:max-height .3s ease;color:var(--cps-color-text-dark);font-size:16px}:host .cps-expansion-panel.expanded.bordered .cps-expansion-panel-header{border-bottom:1px solid var(--cps-color-text-lightest)}:host .cps-expansion-panel.expanded .cps-expansion-panel-content{overflow:auto;padding:16px;max-height:500px;display:block}:host .cps-expansion-panel.expanded .cps-expansion-panel-chevron{transform:rotate(180deg)}\n"] }]
|
|
43
|
+
}], propDecorators: { headerTitle: [{
|
|
44
|
+
type: Input
|
|
45
|
+
}], backgroundColor: [{
|
|
46
|
+
type: Input
|
|
47
|
+
}], showChevron: [{
|
|
48
|
+
type: Input
|
|
49
|
+
}], isExpanded: [{
|
|
50
|
+
type: Input
|
|
51
|
+
}], disabled: [{
|
|
52
|
+
type: Input
|
|
53
|
+
}], bordered: [{
|
|
54
|
+
type: Input
|
|
55
|
+
}], borderRadius: [{
|
|
56
|
+
type: Input
|
|
57
|
+
}], width: [{
|
|
58
|
+
type: Input
|
|
59
|
+
}], afterCollapse: [{
|
|
60
|
+
type: Output
|
|
61
|
+
}], afterExpand: [{
|
|
62
|
+
type: Output
|
|
63
|
+
}] } });
|
|
64
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY3BzLWV4cGFuc2lvbi1wYW5lbC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jcHMtdWkta2l0L3NyYy9saWIvY29tcG9uZW50cy9jcHMtZXhwYW5zaW9uLXBhbmVsL2Nwcy1leHBhbnNpb24tcGFuZWwuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY3BzLXVpLWtpdC9zcmMvbGliL2NvbXBvbmVudHMvY3BzLWV4cGFuc2lvbi1wYW5lbC9jcHMtZXhwYW5zaW9uLXBhbmVsLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQVUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQy9FLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLGdDQUFnQyxDQUFDO0FBQ2xFLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQUN2RCxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sd0JBQXdCLENBQUM7OztBQVNyRCxNQUFNLE9BQU8sMEJBQTBCO0lBUHZDO1FBUVcsZ0JBQVcsR0FBRyxFQUFFLENBQUM7UUFDakIsb0JBQWUsR0FBRyxhQUFhLENBQUM7UUFDaEMsZ0JBQVcsR0FBRyxJQUFJLENBQUM7UUFDbkIsZUFBVSxHQUFHLEtBQUssQ0FBQztRQUNuQixhQUFRLEdBQUcsS0FBSyxDQUFDO1FBQ2pCLGFBQVEsR0FBRyxJQUFJLENBQUM7UUFDaEIsaUJBQVksR0FBb0IsS0FBSyxDQUFDO1FBQ3RDLFVBQUssR0FBb0IsTUFBTSxDQUFDO1FBQy9CLGtCQUFhLEdBQXVCLElBQUksWUFBWSxFQUFRLENBQUM7UUFDN0QsZ0JBQVcsR0FBdUIsSUFBSSxZQUFZLEVBQVEsQ0FBQztLQW1CdEU7SUFqQkMsUUFBUTtRQUNOLElBQUksQ0FBQyxlQUFlLEdBQUcsV0FBVyxDQUFDLElBQUksQ0FBQyxlQUFlLENBQUMsQ0FBQztRQUN6RCxJQUFJLENBQUMsWUFBWSxHQUFHLFdBQVcsQ0FBQyxJQUFJLENBQUMsWUFBWSxDQUFDLENBQUM7UUFDbkQsSUFBSSxDQUFDLEtBQUssR0FBRyxXQUFXLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ3ZDLENBQUM7SUFFRCxlQUFlO1FBQ2IsSUFBSSxDQUFDLElBQUksQ0FBQyxRQUFRLEVBQUU7WUFDbEIsSUFBSSxDQUFDLFVBQVUsR0FBRyxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUM7WUFDbkMsSUFBSSxJQUFJLENBQUMsVUFBVSxFQUFFO2dCQUNuQixJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksRUFBRSxDQUFDO2FBQ3pCO1lBQ0QsSUFBSSxDQUFDLElBQUksQ0FBQyxVQUFVLEVBQUU7Z0JBQ3BCLElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxFQUFFLENBQUM7YUFDM0I7U0FDRjtJQUNILENBQUM7O3VIQTVCVSwwQkFBMEI7MkdBQTFCLDBCQUEwQixvWENidkMsd3dCQXVCQSwyMkNEZlksWUFBWSxzVEFBRSxnQkFBZ0I7MkZBSzdCLDBCQUEwQjtrQkFQdEMsU0FBUztpQ0FDSSxJQUFJLFdBQ1AsQ0FBQyxZQUFZLEVBQUUsZ0JBQWdCLENBQUMsWUFDL0IscUJBQXFCOzhCQUt0QixXQUFXO3NCQUFuQixLQUFLO2dCQUNHLGVBQWU7c0JBQXZCLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSztnQkFDRyxVQUFVO3NCQUFsQixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxZQUFZO3NCQUFwQixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDSSxhQUFhO3NCQUF0QixNQUFNO2dCQUNHLFdBQVc7c0JBQXBCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPbkluaXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ3BzSWNvbkNvbXBvbmVudCB9IGZyb20gJy4uL2Nwcy1pY29uL2Nwcy1pY29uLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBnZXRDU1NDb2xvciB9IGZyb20gJy4uLy4uL3V0aWxzL2NvbG9ycy11dGlscyc7XG5pbXBvcnQgeyBjb252ZXJ0U2l6ZSB9IGZyb20gJy4uLy4uL3V0aWxzL3NpemUtdXRpbHMnO1xuXG5AQ29tcG9uZW50KHtcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZSwgQ3BzSWNvbkNvbXBvbmVudF0sXG4gIHNlbGVjdG9yOiAnY3BzLWV4cGFuc2lvbi1wYW5lbCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9jcHMtZXhwYW5zaW9uLXBhbmVsLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vY3BzLWV4cGFuc2lvbi1wYW5lbC5jb21wb25lbnQuc2NzcyddXG59KVxuZXhwb3J0IGNsYXNzIENwc0V4cGFuc2lvblBhbmVsQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcbiAgQElucHV0KCkgaGVhZGVyVGl0bGUgPSAnJztcbiAgQElucHV0KCkgYmFja2dyb3VuZENvbG9yID0gJ3RyYW5zcGFyZW50JztcbiAgQElucHV0KCkgc2hvd0NoZXZyb24gPSB0cnVlO1xuICBASW5wdXQoKSBpc0V4cGFuZGVkID0gZmFsc2U7XG4gIEBJbnB1dCgpIGRpc2FibGVkID0gZmFsc2U7XG4gIEBJbnB1dCgpIGJvcmRlcmVkID0gdHJ1ZTtcbiAgQElucHV0KCkgYm9yZGVyUmFkaXVzOiBudW1iZXIgfCBzdHJpbmcgPSAnNHB4JztcbiAgQElucHV0KCkgd2lkdGg6IG51bWJlciB8IHN0cmluZyA9ICcxMDAlJztcbiAgQE91dHB1dCgpIGFmdGVyQ29sbGFwc2U6IEV2ZW50RW1pdHRlcjx2b2lkPiA9IG5ldyBFdmVudEVtaXR0ZXI8dm9pZD4oKTtcbiAgQE91dHB1dCgpIGFmdGVyRXhwYW5kOiBFdmVudEVtaXR0ZXI8dm9pZD4gPSBuZXcgRXZlbnRFbWl0dGVyPHZvaWQ+KCk7XG5cbiAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgdGhpcy5iYWNrZ3JvdW5kQ29sb3IgPSBnZXRDU1NDb2xvcih0aGlzLmJhY2tncm91bmRDb2xvcik7XG4gICAgdGhpcy5ib3JkZXJSYWRpdXMgPSBjb252ZXJ0U2l6ZSh0aGlzLmJvcmRlclJhZGl1cyk7XG4gICAgdGhpcy53aWR0aCA9IGNvbnZlcnRTaXplKHRoaXMud2lkdGgpO1xuICB9XG5cbiAgdG9nZ2xlRXhwYW5zaW9uKCk6IHZvaWQge1xuICAgIGlmICghdGhpcy5kaXNhYmxlZCkge1xuICAgICAgdGhpcy5pc0V4cGFuZGVkID0gIXRoaXMuaXNFeHBhbmRlZDtcbiAgICAgIGlmICh0aGlzLmlzRXhwYW5kZWQpIHtcbiAgICAgICAgdGhpcy5hZnRlckV4cGFuZC5lbWl0KCk7XG4gICAgICB9XG4gICAgICBpZiAoIXRoaXMuaXNFeHBhbmRlZCkge1xuICAgICAgICB0aGlzLmFmdGVyQ29sbGFwc2UuZW1pdCgpO1xuICAgICAgfVxuICAgIH1cbiAgfVxufVxuIiwiPGRpdlxuICBjbGFzcz1cImNwcy1leHBhbnNpb24tcGFuZWxcIlxuICBbY2xhc3MuZXhwYW5kZWRdPVwiaXNFeHBhbmRlZFwiXG4gIFtjbGFzcy5ib3JkZXJlZF09XCJib3JkZXJlZFwiXG4gIFtuZ1N0eWxlXT1cIntcbiAgICAnYmFja2dyb3VuZC1jb2xvcic6IGJhY2tncm91bmRDb2xvcixcbiAgICAnYm9yZGVyLXJhZGl1cyc6IGJvcmRlclJhZGl1cyxcbiAgICB3aWR0aDogd2lkdGhcbiAgfVwiPlxuICA8ZGl2XG4gICAgY2xhc3M9XCJjcHMtZXhwYW5zaW9uLXBhbmVsLWhlYWRlclwiXG4gICAgW25nQ2xhc3NdPVwieyBkaXNhYmxlZDogZGlzYWJsZWQgfVwiXG4gICAgW3N0eWxlLmN1cnNvcl09XCJkaXNhYmxlZCA/ICdkZWZhdWx0JyA6ICdwb2ludGVyJ1wiXG4gICAgKGNsaWNrKT1cInRvZ2dsZUV4cGFuc2lvbigpXCI+XG4gICAgPGRpdiBjbGFzcz1cImNwcy1leHBhbnNpb24tcGFuZWwtdGl0bGVcIj57eyBoZWFkZXJUaXRsZSB9fTwvZGl2PlxuICAgIDxzcGFuIGNsYXNzPVwiY3BzLWV4cGFuc2lvbi1wYW5lbC1jaGV2cm9uXCIgKm5nSWY9XCJzaG93Q2hldnJvbiAmJiAhZGlzYWJsZWRcIj5cbiAgICAgIDxjcHMtaWNvbiBpY29uPVwiY2hldnJvbi1kb3duXCIgc2l6ZT1cInNtYWxsXCIgY29sb3I9XCJ0ZXh0LWRhcmtcIj4gPC9jcHMtaWNvbj5cbiAgICA8L3NwYW4+XG4gIDwvZGl2PlxuICA8ZGl2IGNsYXNzPVwiY3BzLWV4cGFuc2lvbi1wYW5lbC1jb250ZW50XCI+XG4gICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuICA8L2Rpdj5cbjwvZGl2PlxuIl19
|
package/esm2020/public-api.mjs
CHANGED
|
@@ -11,8 +11,9 @@ export * from './lib/components/cps-radio/cps-radio.component';
|
|
|
11
11
|
export * from './lib/components/cps-tag/cps-tag.component';
|
|
12
12
|
export * from './lib/components/cps-chip/cps-chip.component';
|
|
13
13
|
export * from './lib/components/cps-loader/cps-loader.component';
|
|
14
|
+
export * from './lib/components/cps-expansion-panel/cps-expansion-panel.component';
|
|
14
15
|
export * from './lib/components/cps-progress-linear/cps-progress-linear.component';
|
|
15
16
|
export * from './lib/components/cps-datepicker/cps-datepicker.component';
|
|
16
17
|
export * from './lib/components/cps-button-toggle/cps-button-toggle.component';
|
|
17
18
|
export * from './lib/utils/colors-utils';
|
|
18
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
19
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL2Nwcy11aS1raXQvc3JjL3B1YmxpYy1hcGkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxjQUFjLDhDQUE4QyxDQUFDO0FBQzdELGNBQWMsZ0RBQWdELENBQUM7QUFDL0QsY0FBYyxrREFBa0QsQ0FBQztBQUNqRSxjQUFjLDhEQUE4RCxDQUFDO0FBQzdFLGNBQWMsa0RBQWtELENBQUM7QUFDakUsY0FBYyxzREFBc0QsQ0FBQztBQUNyRSxjQUFjLGdEQUFnRCxDQUFDO0FBQy9ELGNBQWMsNENBQTRDLENBQUM7QUFDM0QsY0FBYyw4Q0FBOEMsQ0FBQztBQUM3RCxjQUFjLGtEQUFrRCxDQUFDO0FBQ2pFLGNBQWMsb0VBQW9FLENBQUM7QUFDbkYsY0FBYyxvRUFBb0UsQ0FBQztBQUNuRixjQUFjLDBEQUEwRCxDQUFDO0FBQ3pFLGNBQWMsZ0VBQWdFLENBQUM7QUFDL0UsY0FBYywwQkFBMEIsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBQdWJsaWMgQVBJIFN1cmZhY2Ugb2YgY3BzLXVpLWtpdFxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbXBvbmVudHMvY3BzLWljb24vY3BzLWljb24uY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbXBvbmVudHMvY3BzLWlucHV0L2Nwcy1pbnB1dC5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvY29tcG9uZW50cy9jcHMtc2VsZWN0L2Nwcy1zZWxlY3QuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbXBvbmVudHMvY3BzLWF1dG9jb21wbGV0ZS9jcHMtYXV0b2NvbXBsZXRlLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9jb21wb25lbnRzL2Nwcy1idXR0b24vY3BzLWJ1dHRvbi5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvY29tcG9uZW50cy9jcHMtY2hlY2tib3gvY3BzLWNoZWNrYm94LmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9jb21wb25lbnRzL2Nwcy1yYWRpby9jcHMtcmFkaW8uY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbXBvbmVudHMvY3BzLXRhZy9jcHMtdGFnLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9jb21wb25lbnRzL2Nwcy1jaGlwL2Nwcy1jaGlwLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9jb21wb25lbnRzL2Nwcy1sb2FkZXIvY3BzLWxvYWRlci5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvY29tcG9uZW50cy9jcHMtZXhwYW5zaW9uLXBhbmVsL2Nwcy1leHBhbnNpb24tcGFuZWwuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbXBvbmVudHMvY3BzLXByb2dyZXNzLWxpbmVhci9jcHMtcHJvZ3Jlc3MtbGluZWFyLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9jb21wb25lbnRzL2Nwcy1kYXRlcGlja2VyL2Nwcy1kYXRlcGlja2VyLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9jb21wb25lbnRzL2Nwcy1idXR0b24tdG9nZ2xlL2Nwcy1idXR0b24tdG9nZ2xlLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi91dGlscy9jb2xvcnMtdXRpbHMnO1xuIl19
|
package/fesm2015/cps-ui-kit.mjs
CHANGED
|
@@ -1860,6 +1860,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
1860
1860
|
type: Input
|
|
1861
1861
|
}] } });
|
|
1862
1862
|
|
|
1863
|
+
class CpsExpansionPanelComponent {
|
|
1864
|
+
constructor() {
|
|
1865
|
+
this.headerTitle = '';
|
|
1866
|
+
this.backgroundColor = 'transparent';
|
|
1867
|
+
this.showChevron = true;
|
|
1868
|
+
this.isExpanded = false;
|
|
1869
|
+
this.disabled = false;
|
|
1870
|
+
this.bordered = true;
|
|
1871
|
+
this.borderRadius = '4px';
|
|
1872
|
+
this.width = '100%';
|
|
1873
|
+
this.afterCollapse = new EventEmitter();
|
|
1874
|
+
this.afterExpand = new EventEmitter();
|
|
1875
|
+
}
|
|
1876
|
+
ngOnInit() {
|
|
1877
|
+
this.backgroundColor = getCSSColor(this.backgroundColor);
|
|
1878
|
+
this.borderRadius = convertSize(this.borderRadius);
|
|
1879
|
+
this.width = convertSize(this.width);
|
|
1880
|
+
}
|
|
1881
|
+
toggleExpansion() {
|
|
1882
|
+
if (!this.disabled) {
|
|
1883
|
+
this.isExpanded = !this.isExpanded;
|
|
1884
|
+
if (this.isExpanded) {
|
|
1885
|
+
this.afterExpand.emit();
|
|
1886
|
+
}
|
|
1887
|
+
if (!this.isExpanded) {
|
|
1888
|
+
this.afterCollapse.emit();
|
|
1889
|
+
}
|
|
1890
|
+
}
|
|
1891
|
+
}
|
|
1892
|
+
}
|
|
1893
|
+
CpsExpansionPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsExpansionPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1894
|
+
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" }, outputs: { afterCollapse: "afterCollapse", afterExpand: "afterExpand" }, ngImport: i0, template: "<div\n class=\"cps-expansion-panel\"\n [class.expanded]=\"isExpanded\"\n [class.bordered]=\"bordered\"\n [ngStyle]=\"{\n 'background-color': backgroundColor,\n 'border-radius': borderRadius,\n width: width\n }\">\n <div\n class=\"cps-expansion-panel-header\"\n [ngClass]=\"{ disabled: disabled }\"\n [style.cursor]=\"disabled ? 'default' : 'pointer'\"\n (click)=\"toggleExpansion()\">\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 class=\"cps-expansion-panel-content\">\n <ng-content></ng-content>\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.bordered{border:1px solid var(--cps-color-text-lightest)}: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:#f8f4f5}:host .cps-expansion-panel-header:active{background-color:#f1eaec}:host .cps-expansion-panel-header.disabled{pointer-events:none;color:var(--cps-color-text-mild)}: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{max-height:0;overflow:hidden;display:none;padding:16px;transition:max-height .3s ease;color:var(--cps-color-text-dark);font-size:16px}:host .cps-expansion-panel.expanded.bordered .cps-expansion-panel-header{border-bottom:1px solid var(--cps-color-text-lightest)}:host .cps-expansion-panel.expanded .cps-expansion-panel-content{overflow:auto;padding:16px;max-height:500px;display:block}: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"] }] });
|
|
1895
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsExpansionPanelComponent, decorators: [{
|
|
1896
|
+
type: Component,
|
|
1897
|
+
args: [{ standalone: true, imports: [CommonModule, CpsIconComponent], selector: 'cps-expansion-panel', template: "<div\n class=\"cps-expansion-panel\"\n [class.expanded]=\"isExpanded\"\n [class.bordered]=\"bordered\"\n [ngStyle]=\"{\n 'background-color': backgroundColor,\n 'border-radius': borderRadius,\n width: width\n }\">\n <div\n class=\"cps-expansion-panel-header\"\n [ngClass]=\"{ disabled: disabled }\"\n [style.cursor]=\"disabled ? 'default' : 'pointer'\"\n (click)=\"toggleExpansion()\">\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 class=\"cps-expansion-panel-content\">\n <ng-content></ng-content>\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.bordered{border:1px solid var(--cps-color-text-lightest)}: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:#f8f4f5}:host .cps-expansion-panel-header:active{background-color:#f1eaec}:host .cps-expansion-panel-header.disabled{pointer-events:none;color:var(--cps-color-text-mild)}: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{max-height:0;overflow:hidden;display:none;padding:16px;transition:max-height .3s ease;color:var(--cps-color-text-dark);font-size:16px}:host .cps-expansion-panel.expanded.bordered .cps-expansion-panel-header{border-bottom:1px solid var(--cps-color-text-lightest)}:host .cps-expansion-panel.expanded .cps-expansion-panel-content{overflow:auto;padding:16px;max-height:500px;display:block}:host .cps-expansion-panel.expanded .cps-expansion-panel-chevron{transform:rotate(180deg)}\n"] }]
|
|
1898
|
+
}], propDecorators: { headerTitle: [{
|
|
1899
|
+
type: Input
|
|
1900
|
+
}], backgroundColor: [{
|
|
1901
|
+
type: Input
|
|
1902
|
+
}], showChevron: [{
|
|
1903
|
+
type: Input
|
|
1904
|
+
}], isExpanded: [{
|
|
1905
|
+
type: Input
|
|
1906
|
+
}], disabled: [{
|
|
1907
|
+
type: Input
|
|
1908
|
+
}], bordered: [{
|
|
1909
|
+
type: Input
|
|
1910
|
+
}], borderRadius: [{
|
|
1911
|
+
type: Input
|
|
1912
|
+
}], width: [{
|
|
1913
|
+
type: Input
|
|
1914
|
+
}], afterCollapse: [{
|
|
1915
|
+
type: Output
|
|
1916
|
+
}], afterExpand: [{
|
|
1917
|
+
type: Output
|
|
1918
|
+
}] } });
|
|
1919
|
+
|
|
1863
1920
|
class CpsDatepickerComponent {
|
|
1864
1921
|
set value(value) {
|
|
1865
1922
|
this._value = value;
|
|
@@ -2182,10 +2239,10 @@ class CpsButtonToggleComponent {
|
|
|
2182
2239
|
setDisabledState(disabled) { }
|
|
2183
2240
|
}
|
|
2184
2241
|
CpsButtonToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsButtonToggleComponent, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
2185
|
-
CpsButtonToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsButtonToggleComponent, isStandalone: true, selector: "cps-button-toggle", inputs: { label: "label", options: "options", multiple: "multiple", disabled: "disabled", mandatory: "mandatory", _value: ["value", "_value"] }, outputs: { valueChanged: "valueChanged" }, providers: [CheckOptionSelectedPipe], ngImport: i0, template: "<div class=\"cps-btn-toggle\">\n <div class=\"cps-btn-toggle-label\" *ngIf=\"label\">\n <span>{{ label }}</span>\n </div>\n <div class=\"cps-btn-toggle-content\">\n <label *ngFor=\"let option of options\" class=\"cps-btn-toggle-content-option\">\n <input\n class=\"cps-btn-toggle-content-option-input\"\n [type]=\"!multiple && mandatory ? 'radio' : 'checkbox'\"\n [disabled]=\"option.disabled || disabled\"\n [value]=\"option.value\"\n [checked]=\"\n option.value | checkOptionSelected : value : multiple : true : ''\n \"\n (change)=\"updateValueEvent($event)\" />\n <span class=\"cps-btn-toggle-content-option-content\">\n <span>{{ option.label }}</span>\n </span>\n </label>\n </div>\n</div>\n", styles: [":host .cps-btn-toggle-label{color:var(--cps-color-text-dark);margin-bottom:.75rem}:host .cps-btn-toggle-content{display:flex}:host .cps-btn-toggle-content-option-input{clip:rect(0 0 0 0);clip-path:inset(100%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host .cps-btn-toggle-content-option-input:checked+.cps-btn-toggle-content-option-content{background-color:var(--cps-color-calm);z-index:1;color:#fff}:host .cps-btn-toggle-content-option-input:checked+.cps-btn-toggle-content-option-content:hover{background-image:linear-gradient(hsla(0,0%,100%,.1) 0 0)}:host .cps-btn-toggle-content-option-input:disabled+.cps-btn-toggle-content-option-content{pointer-events:none;background-color:#f7f7f7;color:var(--cps-color-text-light)}:host .cps-btn-toggle-content-option-input:disabled:checked+.cps-btn-toggle-content-option-content{background-color:var(--cps-color-line-mid);color:var(--cps-color-text-mild)}:host .cps-btn-toggle-content-option-content{height:36px;display:flex;width:max-content;align-items:center;cursor:pointer;background-color:#fff;padding:.375em .75em;position:relative;border:.0625em solid var(--cps-color-silver);border-right:0;letter-spacing:.05em;color:var(--cps-color-text-dark);text-align:center;transition:background-color .2s ease;-webkit-user-select:none;user-select:none}:host .cps-btn-toggle-content-option-content:hover{background:#f8f4f5}:host .cps-btn-toggle-content-option:first-child .cps-btn-toggle-content-option-content{border-radius:4px 0 0 4px}:host .cps-btn-toggle-content-option:last-child .cps-btn-toggle-content-option-content{border-radius:0 4px 4px 0;border-right:.0625em solid var(--cps-color-silver)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: CheckOptionSelectedPipe, name: "checkOptionSelected" }] });
|
|
2242
|
+
CpsButtonToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsButtonToggleComponent, isStandalone: true, selector: "cps-button-toggle", inputs: { label: "label", options: "options", multiple: "multiple", disabled: "disabled", mandatory: "mandatory", _value: ["value", "_value"] }, outputs: { valueChanged: "valueChanged" }, providers: [CheckOptionSelectedPipe], ngImport: i0, template: "<div class=\"cps-btn-toggle\">\n <div class=\"cps-btn-toggle-label\" *ngIf=\"label\">\n <span>{{ label }}</span>\n </div>\n <div class=\"cps-btn-toggle-content\">\n <label *ngFor=\"let option of options\" class=\"cps-btn-toggle-content-option\">\n <input\n class=\"cps-btn-toggle-content-option-input\"\n [type]=\"!multiple && mandatory ? 'radio' : 'checkbox'\"\n [disabled]=\"option.disabled || disabled\"\n [value]=\"option.value\"\n [checked]=\"\n option.value | checkOptionSelected : value : multiple : true : ''\n \"\n (change)=\"updateValueEvent($event)\" />\n <span class=\"cps-btn-toggle-content-option-content\">\n <span>{{ option.label }}</span>\n </span>\n </label>\n </div>\n</div>\n", styles: [":host .cps-btn-toggle-label{color:var(--cps-color-text-dark);margin-bottom:.75rem}:host .cps-btn-toggle-content{display:flex}:host .cps-btn-toggle-content-option-input{clip:rect(0 0 0 0);clip-path:inset(100%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host .cps-btn-toggle-content-option-input:checked+.cps-btn-toggle-content-option-content{background-color:var(--cps-color-calm);z-index:1;color:#fff}:host .cps-btn-toggle-content-option-input:checked+.cps-btn-toggle-content-option-content:hover{background-image:linear-gradient(hsla(0,0%,100%,.1) 0 0)}:host .cps-btn-toggle-content-option-input:disabled+.cps-btn-toggle-content-option-content{pointer-events:none;background-color:#f7f7f7;color:var(--cps-color-text-light)}:host .cps-btn-toggle-content-option-input:disabled:checked+.cps-btn-toggle-content-option-content{background-color:var(--cps-color-line-mid);color:var(--cps-color-text-mild)}:host .cps-btn-toggle-content-option-content{height:36px;display:flex;width:max-content;align-items:center;cursor:pointer;background-color:#fff;padding:.375em .75em;position:relative;border:.0625em solid var(--cps-color-silver);border-right:0;letter-spacing:.05em;color:var(--cps-color-text-dark);text-align:center;transition:background-color .2s ease;-webkit-user-select:none;user-select:none}:host .cps-btn-toggle-content-option-content:hover{background:#f8f4f5}:host .cps-btn-toggle-content-option-content:active{background:#f1eaec}:host .cps-btn-toggle-content-option:first-child .cps-btn-toggle-content-option-content{border-radius:4px 0 0 4px}:host .cps-btn-toggle-content-option:last-child .cps-btn-toggle-content-option-content{border-radius:0 4px 4px 0;border-right:.0625em solid var(--cps-color-silver)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: CheckOptionSelectedPipe, name: "checkOptionSelected" }] });
|
|
2186
2243
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsButtonToggleComponent, decorators: [{
|
|
2187
2244
|
type: Component,
|
|
2188
|
-
args: [{ standalone: true, imports: [CommonModule, CheckOptionSelectedPipe], providers: [CheckOptionSelectedPipe], selector: 'cps-button-toggle', template: "<div class=\"cps-btn-toggle\">\n <div class=\"cps-btn-toggle-label\" *ngIf=\"label\">\n <span>{{ label }}</span>\n </div>\n <div class=\"cps-btn-toggle-content\">\n <label *ngFor=\"let option of options\" class=\"cps-btn-toggle-content-option\">\n <input\n class=\"cps-btn-toggle-content-option-input\"\n [type]=\"!multiple && mandatory ? 'radio' : 'checkbox'\"\n [disabled]=\"option.disabled || disabled\"\n [value]=\"option.value\"\n [checked]=\"\n option.value | checkOptionSelected : value : multiple : true : ''\n \"\n (change)=\"updateValueEvent($event)\" />\n <span class=\"cps-btn-toggle-content-option-content\">\n <span>{{ option.label }}</span>\n </span>\n </label>\n </div>\n</div>\n", styles: [":host .cps-btn-toggle-label{color:var(--cps-color-text-dark);margin-bottom:.75rem}:host .cps-btn-toggle-content{display:flex}:host .cps-btn-toggle-content-option-input{clip:rect(0 0 0 0);clip-path:inset(100%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host .cps-btn-toggle-content-option-input:checked+.cps-btn-toggle-content-option-content{background-color:var(--cps-color-calm);z-index:1;color:#fff}:host .cps-btn-toggle-content-option-input:checked+.cps-btn-toggle-content-option-content:hover{background-image:linear-gradient(hsla(0,0%,100%,.1) 0 0)}:host .cps-btn-toggle-content-option-input:disabled+.cps-btn-toggle-content-option-content{pointer-events:none;background-color:#f7f7f7;color:var(--cps-color-text-light)}:host .cps-btn-toggle-content-option-input:disabled:checked+.cps-btn-toggle-content-option-content{background-color:var(--cps-color-line-mid);color:var(--cps-color-text-mild)}:host .cps-btn-toggle-content-option-content{height:36px;display:flex;width:max-content;align-items:center;cursor:pointer;background-color:#fff;padding:.375em .75em;position:relative;border:.0625em solid var(--cps-color-silver);border-right:0;letter-spacing:.05em;color:var(--cps-color-text-dark);text-align:center;transition:background-color .2s ease;-webkit-user-select:none;user-select:none}:host .cps-btn-toggle-content-option-content:hover{background:#f8f4f5}:host .cps-btn-toggle-content-option:first-child .cps-btn-toggle-content-option-content{border-radius:4px 0 0 4px}:host .cps-btn-toggle-content-option:last-child .cps-btn-toggle-content-option-content{border-radius:0 4px 4px 0;border-right:.0625em solid var(--cps-color-silver)}\n"] }]
|
|
2245
|
+
args: [{ standalone: true, imports: [CommonModule, CheckOptionSelectedPipe], providers: [CheckOptionSelectedPipe], selector: 'cps-button-toggle', template: "<div class=\"cps-btn-toggle\">\n <div class=\"cps-btn-toggle-label\" *ngIf=\"label\">\n <span>{{ label }}</span>\n </div>\n <div class=\"cps-btn-toggle-content\">\n <label *ngFor=\"let option of options\" class=\"cps-btn-toggle-content-option\">\n <input\n class=\"cps-btn-toggle-content-option-input\"\n [type]=\"!multiple && mandatory ? 'radio' : 'checkbox'\"\n [disabled]=\"option.disabled || disabled\"\n [value]=\"option.value\"\n [checked]=\"\n option.value | checkOptionSelected : value : multiple : true : ''\n \"\n (change)=\"updateValueEvent($event)\" />\n <span class=\"cps-btn-toggle-content-option-content\">\n <span>{{ option.label }}</span>\n </span>\n </label>\n </div>\n</div>\n", styles: [":host .cps-btn-toggle-label{color:var(--cps-color-text-dark);margin-bottom:.75rem}:host .cps-btn-toggle-content{display:flex}:host .cps-btn-toggle-content-option-input{clip:rect(0 0 0 0);clip-path:inset(100%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host .cps-btn-toggle-content-option-input:checked+.cps-btn-toggle-content-option-content{background-color:var(--cps-color-calm);z-index:1;color:#fff}:host .cps-btn-toggle-content-option-input:checked+.cps-btn-toggle-content-option-content:hover{background-image:linear-gradient(hsla(0,0%,100%,.1) 0 0)}:host .cps-btn-toggle-content-option-input:disabled+.cps-btn-toggle-content-option-content{pointer-events:none;background-color:#f7f7f7;color:var(--cps-color-text-light)}:host .cps-btn-toggle-content-option-input:disabled:checked+.cps-btn-toggle-content-option-content{background-color:var(--cps-color-line-mid);color:var(--cps-color-text-mild)}:host .cps-btn-toggle-content-option-content{height:36px;display:flex;width:max-content;align-items:center;cursor:pointer;background-color:#fff;padding:.375em .75em;position:relative;border:.0625em solid var(--cps-color-silver);border-right:0;letter-spacing:.05em;color:var(--cps-color-text-dark);text-align:center;transition:background-color .2s ease;-webkit-user-select:none;user-select:none}:host .cps-btn-toggle-content-option-content:hover{background:#f8f4f5}:host .cps-btn-toggle-content-option-content:active{background:#f1eaec}:host .cps-btn-toggle-content-option:first-child .cps-btn-toggle-content-option-content{border-radius:4px 0 0 4px}:host .cps-btn-toggle-content-option:last-child .cps-btn-toggle-content-option-content{border-radius:0 4px 4px 0;border-right:.0625em solid var(--cps-color-silver)}\n"] }]
|
|
2189
2246
|
}], ctorParameters: function () {
|
|
2190
2247
|
return [{ type: i1.NgControl, decorators: [{
|
|
2191
2248
|
type: Self
|
|
@@ -2217,5 +2274,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
2217
2274
|
* Generated bundle index. Do not edit.
|
|
2218
2275
|
*/
|
|
2219
2276
|
|
|
2220
|
-
export { CpsAutocompleteComponent, CpsButtonComponent, CpsButtonToggleComponent, CpsCheckboxComponent, CpsChipComponent, CpsDatepickerComponent, CpsIconComponent, CpsInputComponent, CpsLoaderComponent, CpsProgressLinearComponent, CpsRadioComponent, CpsSelectComponent, CpsTagComponent, getCSSColor, getCpsColors, getTextColor, iconNames };
|
|
2277
|
+
export { CpsAutocompleteComponent, CpsButtonComponent, CpsButtonToggleComponent, CpsCheckboxComponent, CpsChipComponent, CpsDatepickerComponent, CpsExpansionPanelComponent, CpsIconComponent, CpsInputComponent, CpsLoaderComponent, CpsProgressLinearComponent, CpsRadioComponent, CpsSelectComponent, CpsTagComponent, getCSSColor, getCpsColors, getTextColor, iconNames };
|
|
2221
2278
|
//# sourceMappingURL=cps-ui-kit.mjs.map
|