@porscheinformatik/clr-addons 12.0.1 → 12.1.0

package/esm2020/view-edit-section/view-edit-section.mjs

@@ -1,9 +1,10 @@
 /*
- * Copyright (c) 2018-2019 Porsche Informatik. All Rights Reserved.
+ * Copyright (c) 2018-2022 Porsche Informatik. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 import { Component, EventEmitter, Input, Output, TemplateRef } from '@angular/core';
+import { animate, state, style, transition, trigger } from '@angular/animations';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
 import * as i2 from "@clr/angular";
@@ -14,11 +15,23 @@ export class ClrViewEditSection {
         this._preventSave = false;
         this._cancelText = 'Cancel';
         this._editable = true;
-        this._editMode = false;
         this._editIcon = 'pencil';
+        this._isCollapsible = false;
+        this._isCollapsed = false;
+        this._isCollapsedChange = new EventEmitter();
         this._editModeChanged = new EventEmitter(false);
         this._submitted = new EventEmitter(false);
         this._cancelled = new EventEmitter(false);
+        this._editMode = false;
+    }
+    set editMode(value) {
+        this._editMode = value;
+        if (value) {
+            this.toggleCollapsed(false);
+        }
+    }
+    get editMode() {
+        return this._editMode;
     }
     onSubmit() {
         this._submitted.emit();
@@ -32,17 +45,64 @@ export class ClrViewEditSection {
     }
     onEdit() {
         this.setEditMode(true);
+        this.toggleCollapsed(false);
     }
     setEditMode(mode) {
-        this._editMode = mode;
-        this._editModeChanged.emit(this._editMode);
+        this.editMode = mode;
+        this._editModeChanged.emit(this.editMode);
+    }
+    toggleCollapsed(collapsed) {
+        this._isCollapsed = collapsed;
+        this._isCollapsedChange.emit(this._isCollapsed);
+    }
+    onCollapseExpand() {
+        if (this._isCollapsed) {
+            this.toggleCollapsed(false);
+        }
+        else {
+            this.toggleCollapsed(true);
+        }
     }
 }
 ClrViewEditSection.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrViewEditSection, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ClrViewEditSection.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: ClrViewEditSection, selector: "clr-view-edit-section", inputs: { _title: ["clrTitle", "_title"], _saveText: ["clrSaveText", "_saveText"], _preventSave: ["clrPreventModeChangeOnSave", "_preventSave"], _cancelText: ["clrCancelText", "_cancelText"], _editable: ["clrEditable", "_editable"], _editMode: ["clrEditMode", "_editMode"], _editIcon: ["clrEditIcon", "_editIcon"], viewRef: ["clrViewRef", "viewRef"], editRef: ["clrEditRef", "editRef"] }, outputs: { _editModeChanged: "clrEditModeChange", _submitted: "clrSectionSubmitted", _cancelled: "clrSectionEditCancelled" }, ngImport: i0, template: "<div class=\"card view-edit-section\" (keyup.escape)=\"onCancel()\">\n  <div class=\"card-block\">\n    <div class=\"card-title\">\n      {{_title}}\n      <div class=\"ves-actions\">\n        <button\n          type=\"button\"\n          (click)=\"onEdit()\"\n          class=\"btn btn-icon btn-link ves-action\"\n          *ngIf=\"_editable && !_editMode && actionBlock.children.length == 0\"\n        >\n          <clr-icon class=\"ves-edit-icon\" [attr.shape]=\"_editIcon\" size=\"20\"></clr-icon>\n        </button>\n        <div #actionBlock>\n          <ng-content select=\"[action-block]\"></ng-content>\n        </div>\n      </div>\n    </div>\n    <div class=\"card-text\">\n      <ng-template [ngTemplateOutlet]=\"viewRef\" *ngIf=\"!_editMode\"></ng-template>\n      <ng-template [ngTemplateOutlet]=\"editRef\" *ngIf=\"_editMode\"></ng-template>\n      <ng-container *ngIf=\"_editMode\">\n        <form clrForm (ngSubmit)=\"onSubmit()\" class=\"button-bar\">\n          <button class=\"btn btn-primary ves-save\" type=\"submit\">{{_saveText}}</button>\n          <button class=\"btn ves-cancel\" (click)=\"onCancel()\" type=\"button\">{{_cancelText}}</button>\n        </form>\n      </ng-container>\n    </div>\n  </div>\n</div>\n", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.ClrIconCustomTag, selector: "clr-icon" }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.ClrForm, selector: "[clrForm]", inputs: ["clrLabelSize"] }] });
+ClrViewEditSection.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: ClrViewEditSection, selector: "clr-view-edit-section", inputs: { _title: ["clrTitle", "_title"], _saveText: ["clrSaveText", "_saveText"], _preventSave: ["clrPreventModeChangeOnSave", "_preventSave"], _cancelText: ["clrCancelText", "_cancelText"], _editable: ["clrEditable", "_editable"], _editIcon: ["clrEditIcon", "_editIcon"], _isCollapsible: ["clrIsCollapsible", "_isCollapsible"], _isCollapsed: ["clrIsCollapsed", "_isCollapsed"], viewRef: ["clrViewRef", "viewRef"], editRef: ["clrEditRef", "editRef"], editMode: ["clrEditMode", "editMode"] }, outputs: { _isCollapsedChange: "clrIsCollapsedChange", _editModeChanged: "clrEditModeChange", _submitted: "clrSectionSubmitted", _cancelled: "clrSectionEditCancelled" }, ngImport: i0, template: "<div class=\"card view-edit-section\" (keyup.escape)=\"onCancel()\">\n  <div class=\"card-block\">\n    <div class=\"card-title\">\n      {{_title}}\n      <button\n        type=\"button\"\n        (click)=\"onCollapseExpand()\"\n        class=\"btn btn-icon btn-link ces-caret-btn\"\n        *ngIf=\"_isCollapsible && !editMode\"\n      >\n        <clr-icon shape=\"caret up\" size=\"20\" class=\"ces-caret-icon\" [@rotateIcon]=\"_isCollapsed\"></clr-icon>\n      </button>\n      <div class=\"ves-actions\">\n        <button\n          type=\"button\"\n          (click)=\"onEdit()\"\n          class=\"btn btn-icon btn-link ves-action\"\n          *ngIf=\"_editable && !editMode && actionBlock.children.length == 0\"\n        >\n          <clr-icon class=\"ves-edit-icon\" [attr.shape]=\"_editIcon\" size=\"20\"></clr-icon>\n        </button>\n        <div #actionBlock>\n          <ng-content select=\"[action-block]\"></ng-content>\n        </div>\n      </div>\n    </div>\n    <div class=\"card-text\" [@collapseExpandAnimation] *ngIf=\"!(_isCollapsed && _isCollapsible)\">\n      <ng-template [ngTemplateOutlet]=\"viewRef\" *ngIf=\"!editMode\"></ng-template>\n      <ng-template [ngTemplateOutlet]=\"editRef\" *ngIf=\"editMode\"></ng-template>\n      <ng-container *ngIf=\"editMode\">\n        <form clrForm (ngSubmit)=\"onSubmit()\" class=\"button-bar\">\n          <button class=\"btn btn-primary ves-save\" type=\"submit\">{{_saveText}}</button>\n          <button class=\"btn ves-cancel\" (click)=\"onCancel()\" type=\"button\">{{_cancelText}}</button>\n        </form>\n      </ng-container>\n    </div>\n  </div>\n</div>\n", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.ClrIconCustomTag, selector: "clr-icon" }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.ClrForm, selector: "[clrForm]", inputs: ["clrLabelSize"] }], animations: [
+        trigger('collapseExpandAnimation', [
+            transition(':enter', [
+                style({ opacity: 0, height: 0, overflow: 'hidden' }),
+                animate('300ms', style({ opacity: 1, height: '*' })),
+            ]),
+            transition(':leave', [
+                style({ opacity: 1, height: '*', overflow: 'hidden' }),
+                animate('300ms', style({ opacity: 0, height: 0 })),
+            ]),
+        ]),
+        trigger('rotateIcon', [
+            state('true', style({ transform: 'rotate(0)' })),
+            state('false', style({ transform: 'rotate(180deg)' })),
+            transition('true => false', animate('300ms ease-out')),
+            transition('false => true', animate('300ms ease-in')),
+        ]),
+    ] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrViewEditSection, decorators: [{
             type: Component,
-            args: [{ selector: 'clr-view-edit-section', template: "<div class=\"card view-edit-section\" (keyup.escape)=\"onCancel()\">\n  <div class=\"card-block\">\n    <div class=\"card-title\">\n      {{_title}}\n      <div class=\"ves-actions\">\n        <button\n          type=\"button\"\n          (click)=\"onEdit()\"\n          class=\"btn btn-icon btn-link ves-action\"\n          *ngIf=\"_editable && !_editMode && actionBlock.children.length == 0\"\n        >\n          <clr-icon class=\"ves-edit-icon\" [attr.shape]=\"_editIcon\" size=\"20\"></clr-icon>\n        </button>\n        <div #actionBlock>\n          <ng-content select=\"[action-block]\"></ng-content>\n        </div>\n      </div>\n    </div>\n    <div class=\"card-text\">\n      <ng-template [ngTemplateOutlet]=\"viewRef\" *ngIf=\"!_editMode\"></ng-template>\n      <ng-template [ngTemplateOutlet]=\"editRef\" *ngIf=\"_editMode\"></ng-template>\n      <ng-container *ngIf=\"_editMode\">\n        <form clrForm (ngSubmit)=\"onSubmit()\" class=\"button-bar\">\n          <button class=\"btn btn-primary ves-save\" type=\"submit\">{{_saveText}}</button>\n          <button class=\"btn ves-cancel\" (click)=\"onCancel()\" type=\"button\">{{_cancelText}}</button>\n        </form>\n      </ng-container>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'clr-view-edit-section', animations: [
+                        trigger('collapseExpandAnimation', [
+                            transition(':enter', [
+                                style({ opacity: 0, height: 0, overflow: 'hidden' }),
+                                animate('300ms', style({ opacity: 1, height: '*' })),
+                            ]),
+                            transition(':leave', [
+                                style({ opacity: 1, height: '*', overflow: 'hidden' }),
+                                animate('300ms', style({ opacity: 0, height: 0 })),
+                            ]),
+                        ]),
+                        trigger('rotateIcon', [
+                            state('true', style({ transform: 'rotate(0)' })),
+                            state('false', style({ transform: 'rotate(180deg)' })),
+                            transition('true => false', animate('300ms ease-out')),
+                            transition('false => true', animate('300ms ease-in')),
+                        ]),
+                    ], template: "<div class=\"card view-edit-section\" (keyup.escape)=\"onCancel()\">\n  <div class=\"card-block\">\n    <div class=\"card-title\">\n      {{_title}}\n      <button\n        type=\"button\"\n        (click)=\"onCollapseExpand()\"\n        class=\"btn btn-icon btn-link ces-caret-btn\"\n        *ngIf=\"_isCollapsible && !editMode\"\n      >\n        <clr-icon shape=\"caret up\" size=\"20\" class=\"ces-caret-icon\" [@rotateIcon]=\"_isCollapsed\"></clr-icon>\n      </button>\n      <div class=\"ves-actions\">\n        <button\n          type=\"button\"\n          (click)=\"onEdit()\"\n          class=\"btn btn-icon btn-link ves-action\"\n          *ngIf=\"_editable && !editMode && actionBlock.children.length == 0\"\n        >\n          <clr-icon class=\"ves-edit-icon\" [attr.shape]=\"_editIcon\" size=\"20\"></clr-icon>\n        </button>\n        <div #actionBlock>\n          <ng-content select=\"[action-block]\"></ng-content>\n        </div>\n      </div>\n    </div>\n    <div class=\"card-text\" [@collapseExpandAnimation] *ngIf=\"!(_isCollapsed && _isCollapsible)\">\n      <ng-template [ngTemplateOutlet]=\"viewRef\" *ngIf=\"!editMode\"></ng-template>\n      <ng-template [ngTemplateOutlet]=\"editRef\" *ngIf=\"editMode\"></ng-template>\n      <ng-container *ngIf=\"editMode\">\n        <form clrForm (ngSubmit)=\"onSubmit()\" class=\"button-bar\">\n          <button class=\"btn btn-primary ves-save\" type=\"submit\">{{_saveText}}</button>\n          <button class=\"btn ves-cancel\" (click)=\"onCancel()\" type=\"button\">{{_cancelText}}</button>\n        </form>\n      </ng-container>\n    </div>\n  </div>\n</div>\n" }]
         }], propDecorators: { _title: [{
                 type: Input,
                 args: ['clrTitle']
@@ -58,18 +118,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
             }], _editable: [{
                 type: Input,
                 args: ['clrEditable']
-            }], _editMode: [{
-                type: Input,
-                args: ['clrEditMode']
             }], _editIcon: [{
                 type: Input,
                 args: ['clrEditIcon']
+            }], _isCollapsible: [{
+                type: Input,
+                args: ['clrIsCollapsible']
+            }], _isCollapsed: [{
+                type: Input,
+                args: ['clrIsCollapsed']
             }], viewRef: [{
                 type: Input,
                 args: ['clrViewRef']
             }], editRef: [{
                 type: Input,
                 args: ['clrEditRef']
+            }], _isCollapsedChange: [{
+                type: Output,
+                args: ['clrIsCollapsedChange']
             }], _editModeChanged: [{
                 type: Output,
                 args: ['clrEditModeChange']
@@ -79,5 +145,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
             }], _cancelled: [{
                 type: Output,
                 args: ['clrSectionEditCancelled']
+            }], editMode: [{
+                type: Input,
+                args: ['clrEditMode']
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmlldy1lZGl0LXNlY3Rpb24uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvY2xyLWFkZG9ucy92aWV3LWVkaXQtc2VjdGlvbi92aWV3LWVkaXQtc2VjdGlvbi50cyIsIi4uLy4uLy4uLy4uL3NyYy9jbHItYWRkb25zL3ZpZXctZWRpdC1zZWN0aW9uL3ZpZXctZWRpdC1zZWN0aW9uLmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7Ozs7R0FJRztBQUVILE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsV0FBVyxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7OztBQU1wRixNQUFNLE9BQU8sa0JBQWtCO0lBSi9CO1FBTXdCLGNBQVMsR0FBRyxNQUFNLENBQUM7UUFDSixpQkFBWSxHQUFHLEtBQUssQ0FBQztRQUNsQyxnQkFBVyxHQUFHLFFBQVEsQ0FBQztRQUN6QixjQUFTLEdBQUcsSUFBSSxDQUFDO1FBQ2pCLGNBQVMsR0FBRyxLQUFLLENBQUM7UUFDbEIsY0FBUyxHQUFHLFFBQVEsQ0FBQztRQUtkLHFCQUFnQixHQUFHLElBQUksWUFBWSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQ3pDLGVBQVUsR0FBRyxJQUFJLFlBQVksQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUNqQyxlQUFVLEdBQUcsSUFBSSxZQUFZLENBQUMsS0FBSyxDQUFDLENBQUM7S0FzQnpFO0lBcEJRLFFBQVE7UUFDYixJQUFJLENBQUMsVUFBVSxDQUFDLElBQUksRUFBRSxDQUFDO1FBQ3ZCLElBQUksQ0FBQyxJQUFJLENBQUMsWUFBWSxFQUFFO1lBQ3RCLElBQUksQ0FBQyxXQUFXLENBQUMsS0FBSyxDQUFDLENBQUM7U0FDekI7SUFDSCxDQUFDO0lBRU0sUUFBUTtRQUNiLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxFQUFFLENBQUM7UUFDdkIsSUFBSSxDQUFDLFdBQVcsQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUMxQixDQUFDO0lBRU0sTUFBTTtRQUNYLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDekIsQ0FBQztJQUVPLFdBQVcsQ0FBQyxJQUFhO1FBQy9CLElBQUksQ0FBQyxTQUFTLEdBQUcsSUFBSSxDQUFDO1FBQ3RCLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxDQUFDO0lBQzdDLENBQUM7OytHQW5DVSxrQkFBa0I7bUdBQWxCLGtCQUFrQixna0JDWi9CLDZ0Q0E4QkE7MkZEbEJhLGtCQUFrQjtrQkFKOUIsU0FBUzsrQkFDRSx1QkFBdUI7OEJBSWQsTUFBTTtzQkFBeEIsS0FBSzt1QkFBQyxVQUFVO2dCQUNLLFNBQVM7c0JBQTlCLEtBQUs7dUJBQUMsYUFBYTtnQkFDaUIsWUFBWTtzQkFBaEQsS0FBSzt1QkFBQyw0QkFBNEI7Z0JBQ1gsV0FBVztzQkFBbEMsS0FBSzt1QkFBQyxlQUFlO2dCQUNBLFNBQVM7c0JBQTlCLEtBQUs7dUJBQUMsYUFBYTtnQkFDRSxTQUFTO3NCQUE5QixLQUFLO3VCQUFDLGFBQWE7Z0JBQ0UsU0FBUztzQkFBOUIsS0FBSzt1QkFBQyxhQUFhO2dCQUVDLE9BQU87c0JBQTNCLEtBQUs7dUJBQUMsWUFBWTtnQkFDRSxPQUFPO3NCQUEzQixLQUFLO3VCQUFDLFlBQVk7Z0JBRVUsZ0JBQWdCO3NCQUE1QyxNQUFNO3VCQUFDLG1CQUFtQjtnQkFDSSxVQUFVO3NCQUF4QyxNQUFNO3VCQUFDLHFCQUFxQjtnQkFDTSxVQUFVO3NCQUE1QyxNQUFNO3VCQUFDLHlCQUF5QiIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBDb3B5cmlnaHQgKGMpIDIwMTgtMjAxOSBQb3JzY2hlIEluZm9ybWF0aWsuIEFsbCBSaWdodHMgUmVzZXJ2ZWQuXG4gKiBUaGlzIHNvZnR3YXJlIGlzIHJlbGVhc2VkIHVuZGVyIE1JVCBsaWNlbnNlLlxuICogVGhlIGZ1bGwgbGljZW5zZSBpbmZvcm1hdGlvbiBjYW4gYmUgZm91bmQgaW4gTElDRU5TRSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBwcm9qZWN0LlxuICovXG5cbmltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT3V0cHV0LCBUZW1wbGF0ZVJlZiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdjbHItdmlldy1lZGl0LXNlY3Rpb24nLFxuICB0ZW1wbGF0ZVVybDogJy4vdmlldy1lZGl0LXNlY3Rpb24uaHRtbCcsXG59KVxuZXhwb3J0IGNsYXNzIENsclZpZXdFZGl0U2VjdGlvbiB7XG4gIEBJbnB1dCgnY2xyVGl0bGUnKSBfdGl0bGU6IHN0cmluZztcbiAgQElucHV0KCdjbHJTYXZlVGV4dCcpIF9zYXZlVGV4dCA9ICdTYXZlJztcbiAgQElucHV0KCdjbHJQcmV2ZW50TW9kZUNoYW5nZU9uU2F2ZScpIF9wcmV2ZW50U2F2ZSA9IGZhbHNlO1xuICBASW5wdXQoJ2NsckNhbmNlbFRleHQnKSBfY2FuY2VsVGV4dCA9ICdDYW5jZWwnO1xuICBASW5wdXQoJ2NsckVkaXRhYmxlJykgX2VkaXRhYmxlID0gdHJ1ZTtcbiAgQElucHV0KCdjbHJFZGl0TW9kZScpIF9lZGl0TW9kZSA9IGZhbHNlO1xuICBASW5wdXQoJ2NsckVkaXRJY29uJykgX2VkaXRJY29uID0gJ3BlbmNpbCc7XG5cbiAgQElucHV0KCdjbHJWaWV3UmVmJykgdmlld1JlZjogVGVtcGxhdGVSZWY8YW55PjtcbiAgQElucHV0KCdjbHJFZGl0UmVmJykgZWRpdFJlZjogVGVtcGxhdGVSZWY8YW55PjtcblxuICBAT3V0cHV0KCdjbHJFZGl0TW9kZUNoYW5nZScpIF9lZGl0TW9kZUNoYW5nZWQgPSBuZXcgRXZlbnRFbWl0dGVyKGZhbHNlKTtcbiAgQE91dHB1dCgnY2xyU2VjdGlvblN1Ym1pdHRlZCcpIF9zdWJtaXR0ZWQgPSBuZXcgRXZlbnRFbWl0dGVyKGZhbHNlKTtcbiAgQE91dHB1dCgnY2xyU2VjdGlvbkVkaXRDYW5jZWxsZWQnKSBfY2FuY2VsbGVkID0gbmV3IEV2ZW50RW1pdHRlcihmYWxzZSk7XG5cbiAgcHVibGljIG9uU3VibWl0KCk6IHZvaWQge1xuICAgIHRoaXMuX3N1Ym1pdHRlZC5lbWl0KCk7XG4gICAgaWYgKCF0aGlzLl9wcmV2ZW50U2F2ZSkge1xuICAgICAgdGhpcy5zZXRFZGl0TW9kZShmYWxzZSk7XG4gICAgfVxuICB9XG5cbiAgcHVibGljIG9uQ2FuY2VsKCk6IHZvaWQge1xuICAgIHRoaXMuX2NhbmNlbGxlZC5lbWl0KCk7XG4gICAgdGhpcy5zZXRFZGl0TW9kZShmYWxzZSk7XG4gIH1cblxuICBwdWJsaWMgb25FZGl0KCk6IHZvaWQge1xuICAgIHRoaXMuc2V0RWRpdE1vZGUodHJ1ZSk7XG4gIH1cblxuICBwcml2YXRlIHNldEVkaXRNb2RlKG1vZGU6IGJvb2xlYW4pOiB2b2lkIHtcbiAgICB0aGlzLl9lZGl0TW9kZSA9IG1vZGU7XG4gICAgdGhpcy5fZWRpdE1vZGVDaGFuZ2VkLmVtaXQodGhpcy5fZWRpdE1vZGUpO1xuICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwiY2FyZCB2aWV3LWVkaXQtc2VjdGlvblwiIChrZXl1cC5lc2NhcGUpPVwib25DYW5jZWwoKVwiPlxuICA8ZGl2IGNsYXNzPVwiY2FyZC1ibG9ja1wiPlxuICAgIDxkaXYgY2xhc3M9XCJjYXJkLXRpdGxlXCI+XG4gICAgICB7e190aXRsZX19XG4gICAgICA8ZGl2IGNsYXNzPVwidmVzLWFjdGlvbnNcIj5cbiAgICAgICAgPGJ1dHRvblxuICAgICAgICAgIHR5cGU9XCJidXR0b25cIlxuICAgICAgICAgIChjbGljayk9XCJvbkVkaXQoKVwiXG4gICAgICAgICAgY2xhc3M9XCJidG4gYnRuLWljb24gYnRuLWxpbmsgdmVzLWFjdGlvblwiXG4gICAgICAgICAgKm5nSWY9XCJfZWRpdGFibGUgJiYgIV9lZGl0TW9kZSAmJiBhY3Rpb25CbG9jay5jaGlsZHJlbi5sZW5ndGggPT0gMFwiXG4gICAgICAgID5cbiAgICAgICAgICA8Y2xyLWljb24gY2xhc3M9XCJ2ZXMtZWRpdC1pY29uXCIgW2F0dHIuc2hhcGVdPVwiX2VkaXRJY29uXCIgc2l6ZT1cIjIwXCI+PC9jbHItaWNvbj5cbiAgICAgICAgPC9idXR0b24+XG4gICAgICAgIDxkaXYgI2FjdGlvbkJsb2NrPlxuICAgICAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cIlthY3Rpb24tYmxvY2tdXCI+PC9uZy1jb250ZW50PlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICAgIDxkaXYgY2xhc3M9XCJjYXJkLXRleHRcIj5cbiAgICAgIDxuZy10ZW1wbGF0ZSBbbmdUZW1wbGF0ZU91dGxldF09XCJ2aWV3UmVmXCIgKm5nSWY9XCIhX2VkaXRNb2RlXCI+PC9uZy10ZW1wbGF0ZT5cbiAgICAgIDxuZy10ZW1wbGF0ZSBbbmdUZW1wbGF0ZU91dGxldF09XCJlZGl0UmVmXCIgKm5nSWY9XCJfZWRpdE1vZGVcIj48L25nLXRlbXBsYXRlPlxuICAgICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cIl9lZGl0TW9kZVwiPlxuICAgICAgICA8Zm9ybSBjbHJGb3JtIChuZ1N1Ym1pdCk9XCJvblN1Ym1pdCgpXCIgY2xhc3M9XCJidXR0b24tYmFyXCI+XG4gICAgICAgICAgPGJ1dHRvbiBjbGFzcz1cImJ0biBidG4tcHJpbWFyeSB2ZXMtc2F2ZVwiIHR5cGU9XCJzdWJtaXRcIj57e19zYXZlVGV4dH19PC9idXR0b24+XG4gICAgICAgICAgPGJ1dHRvbiBjbGFzcz1cImJ0biB2ZXMtY2FuY2VsXCIgKGNsaWNrKT1cIm9uQ2FuY2VsKClcIiB0eXBlPVwiYnV0dG9uXCI+e3tfY2FuY2VsVGV4dH19PC9idXR0b24+XG4gICAgICAgIDwvZm9ybT5cbiAgICAgIDwvbmctY29udGFpbmVyPlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cbjwvZGl2PlxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmlldy1lZGl0LXNlY3Rpb24uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvY2xyLWFkZG9ucy92aWV3LWVkaXQtc2VjdGlvbi92aWV3LWVkaXQtc2VjdGlvbi50cyIsIi4uLy4uLy4uLy4uL3NyYy9jbHItYWRkb25zL3ZpZXctZWRpdC1zZWN0aW9uL3ZpZXctZWRpdC1zZWN0aW9uLmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7Ozs7R0FJRztBQUVILE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsV0FBVyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3BGLE9BQU8sRUFBRSxPQUFPLEVBQUUsS0FBSyxFQUFFLEtBQUssRUFBRSxVQUFVLEVBQUUsT0FBTyxFQUFFLE1BQU0scUJBQXFCLENBQUM7Ozs7O0FBd0JqRixNQUFNLE9BQU8sa0JBQWtCO0lBdEIvQjtRQXdCd0IsY0FBUyxHQUFHLE1BQU0sQ0FBQztRQUNKLGlCQUFZLEdBQUcsS0FBSyxDQUFDO1FBQ2xDLGdCQUFXLEdBQUcsUUFBUSxDQUFDO1FBQ3pCLGNBQVMsR0FBRyxJQUFJLENBQUM7UUFDakIsY0FBUyxHQUFHLFFBQVEsQ0FBQztRQUNoQixtQkFBYyxHQUFHLEtBQUssQ0FBQztRQUN6QixpQkFBWSxHQUFHLEtBQUssQ0FBQztRQUtkLHVCQUFrQixHQUFHLElBQUksWUFBWSxFQUFXLENBQUM7UUFDcEQscUJBQWdCLEdBQUcsSUFBSSxZQUFZLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDekMsZUFBVSxHQUFHLElBQUksWUFBWSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQ2pDLGVBQVUsR0FBRyxJQUFJLFlBQVksQ0FBQyxLQUFLLENBQUMsQ0FBQztRQWVoRSxjQUFTLEdBQUcsS0FBSyxDQUFDO0tBb0MzQjtJQWpEQyxJQUNXLFFBQVEsQ0FBQyxLQUFjO1FBQ2hDLElBQUksQ0FBQyxTQUFTLEdBQUcsS0FBSyxDQUFD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QUFTO3NCQUE5QixLQUFLO3VCQUFDLGFBQWE7Z0JBQ08sY0FBYztzQkFBeEMsS0FBSzt1QkFBQyxrQkFBa0I7Z0JBQ0EsWUFBWTtzQkFBcEMsS0FBSzt1QkFBQyxnQkFBZ0I7Z0JBRUYsT0FBTztzQkFBM0IsS0FBSzt1QkFBQyxZQUFZO2dCQUNFLE9BQU87c0JBQTNCLEtBQUs7dUJBQUMsWUFBWTtnQkFFYSxrQkFBa0I7c0JBQWpELE1BQU07dUJBQUMsc0JBQXNCO2dCQUNELGdCQUFnQjtzQkFBNUMsTUFBTTt1QkFBQyxtQkFBbUI7Z0JBQ0ksVUFBVTtzQkFBeEMsTUFBTTt1QkFBQyxxQkFBcUI7Z0JBQ00sVUFBVTtzQkFBNUMsTUFBTTt1QkFBQyx5QkFBeUI7Z0JBR3RCLFFBQVE7c0JBRGxCLEtBQUs7dUJBQUMsYUFBYSIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBDb3B5cmlnaHQgKGMpIDIwMTgtMjAyMiBQb3JzY2hlIEluZm9ybWF0aWsuIEFsbCBSaWdodHMgUmVzZXJ2ZWQuXG4gKiBUaGlzIHNvZnR3YXJlIGlzIHJlbGVhc2VkIHVuZGVyIE1JVCBsaWNlbnNlLlxuICogVGhlIGZ1bGwgbGljZW5zZSBpbmZvcm1hdGlvbiBjYW4gYmUgZm91bmQgaW4gTElDRU5TRSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBwcm9qZWN0LlxuICovXG5cbmltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT3V0cHV0LCBUZW1wbGF0ZVJlZiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgYW5pbWF0ZSwgc3RhdGUsIHN0eWxlLCB0cmFuc2l0aW9uLCB0cmlnZ2VyIH0gZnJvbSAnQGFuZ3VsYXIvYW5pbWF0aW9ucyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2Nsci12aWV3LWVkaXQtc2VjdGlvbicsXG4gIHRlbXBsYXRlVXJsOiAnLi92aWV3LWVkaXQtc2VjdGlvbi5odG1sJyxcbiAgYW5pbWF0aW9uczogW1xuICAgIHRyaWdnZXIoJ2NvbGxhcHNlRXhwYW5kQW5pbWF0aW9uJywgW1xuICAgICAgdHJhbnNpdGlvbignOmVudGVyJywgW1xuICAgICAgICBzdHlsZSh7IG9wYWNpdHk6IDAsIGhlaWdodDogMCwgb3ZlcmZsb3c6ICdoaWRkZW4nIH0pLFxuICAgICAgICBhbmltYXRlKCczMDBtcycsIHN0eWxlKHsgb3BhY2l0eTogMSwgaGVpZ2h0OiAnKicgfSkpLFxuICAgICAgXSksXG4gICAgICB0cmFuc2l0aW9uKCc6bGVhdmUnLCBbXG4gICAgICAgIHN0eWxlKHsgb3BhY2l0eTogMSwgaGVpZ2h0OiAnKicsIG92ZXJmbG93OiAnaGlkZGVuJyB9KSxcbiAgICAgICAgYW5pbWF0ZSgnMzAwbXMnLCBzdHlsZSh7IG9wYWNpdHk6IDAsIGhlaWdodDogMCB9KSksXG4gICAgICBdKSxcbiAgICBdKSxcbiAgICB0cmlnZ2VyKCdyb3RhdGVJY29uJywgW1xuICAgICAgc3RhdGUoJ3RydWUnLCBzdHlsZSh7IHRyYW5zZm9ybTogJ3JvdGF0ZSgwKScgfSkpLFxuICAgICAgc3RhdGUoJ2ZhbHNlJywgc3R5bGUoeyB0cmFuc2Zvcm06ICdyb3RhdGUoMTgwZGVnKScgfSkpLFxuICAgICAgdHJhbnNpdGlvbigndHJ1ZSA9PiBmYWxzZScsIGFuaW1hdGUoJzMwMG1zIGVhc2Utb3V0JykpLFxuICAgICAgdHJhbnNpdGlvbignZmFsc2UgPT4gdHJ1ZScsIGFuaW1hdGUoJzMwMG1zIGVhc2UtaW4nKSksXG4gICAgXSksXG4gIF0sXG59KVxuZXhwb3J0IGNsYXNzIENsclZpZXdFZGl0U2VjdGlvbiB7XG4gIEBJbnB1dCgnY2xyVGl0bGUnKSBfdGl0bGU6IHN0cmluZztcbiAgQElucHV0KCdjbHJTYXZlVGV4dCcpIF9zYXZlVGV4dCA9ICdTYXZlJztcbiAgQElucHV0KCdjbHJQcmV2ZW50TW9kZUNoYW5nZU9uU2F2ZScpIF9wcmV2ZW50U2F2ZSA9IGZhbHNlO1xuICBASW5wdXQoJ2NsckNhbmNlbFRleHQnKSBfY2FuY2VsVGV4dCA9ICdDYW5jZWwnO1xuICBASW5wdXQoJ2NsckVkaXRhYmxlJykgX2VkaXRhYmxlID0gdHJ1ZTtcbiAgQElucHV0KCdjbHJFZGl0SWNvbicpIF9lZGl0SWNvbiA9ICdwZW5jaWwnO1xuICBASW5wdXQoJ2NscklzQ29sbGFwc2libGUnKSBfaXNDb2xsYXBzaWJsZSA9IGZhbHNlO1xuICBASW5wdXQoJ2NscklzQ29sbGFwc2VkJykgX2lzQ29sbGFwc2VkID0gZmFsc2U7XG5cbiAgQElucHV0KCdjbHJWaWV3UmVmJykgdmlld1JlZjogVGVtcGxhdGVSZWY8YW55PjtcbiAgQElucHV0KCdjbHJFZGl0UmVmJykgZWRpdFJlZjogVGVtcGxhdGVSZWY8YW55PjtcblxuICBAT3V0cHV0KCdjbHJJc0NvbGxhcHNlZENoYW5nZScpIF9pc0NvbGxhcHNlZENoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8Ym9vbGVhbj4oKTtcbiAgQE91dHB1dCgnY2xyRWRpdE1vZGVDaGFuZ2UnKSBfZWRpdE1vZGVDaGFuZ2VkID0gbmV3IEV2ZW50RW1pdHRlcihmYWxzZSk7XG4gIEBPdXRwdXQoJ2NsclNlY3Rpb25TdWJtaXR0ZWQnKSBfc3VibWl0dGVkID0gbmV3IEV2ZW50RW1pdHRlcihmYWxzZSk7XG4gIEBPdXRwdXQoJ2NsclNlY3Rpb25FZGl0Q2FuY2VsbGVkJykgX2NhbmNlbGxlZCA9IG5ldyBFdmVudEVtaXR0ZXIoZmFsc2UpO1xuXG4gIEBJbnB1dCgnY2xyRWRpdE1vZGUnKVxuICBwdWJsaWMgc2V0IGVkaXRNb2RlKHZhbHVlOiBib29sZWFuKSB7XG4gICAgdGhpcy5fZWRpdE1vZGUgPSB2YWx1ZTtcblxuICAgIGlmICh2YWx1ZSkge1xuICAgICAgdGhpcy50b2dnbGVDb2xsYXBzZWQoZmFsc2UpO1xuICAgIH1cbiAgfVxuXG4gIHB1YmxpYyBnZXQgZWRpdE1vZGUoKTogYm9vbGVhbiB7XG4gICAgcmV0dXJuIHRoaXMuX2VkaXRNb2RlO1xuICB9XG5cbiAgcHJpdmF0ZSBfZWRpdE1vZGUgPSBmYWxzZTtcblxuICBwdWJsaWMgb25TdWJtaXQoKTogdm9pZCB7XG4gICAgdGhpcy5fc3VibWl0dGVkLmVtaXQoKTtcbiAgICBpZiAoIXRoaXMuX3ByZXZlbnRTYXZlKSB7XG4gICAgICB0aGlzLnNldEVkaXRNb2RlKGZhbHNlKTtcbiAgICB9XG4gIH1cblxuICBwdWJsaWMgb25DYW5jZWwoKTogdm9pZCB7XG4gICAgdGhpcy5fY2FuY2VsbGVkLmVtaXQoKTtcbiAgICB0aGlzLnNldEVkaXRNb2RlKGZhbHNlKTtcbiAgfVxuXG4gIHB1YmxpYyBvbkVkaXQoKTogdm9pZCB7XG4gICAgdGhpcy5zZXRFZGl0TW9kZSh0cnVlKTtcbiAgICB0aGlzLnRvZ2dsZUNvbGxhcHNlZChmYWxzZSk7XG4gIH1cblxuICBwcml2YXRlIHNldEVkaXRNb2RlKG1vZGU6IGJvb2xlYW4pOiB2b2lkIHtcbiAgICB0aGlzLmVkaXRNb2RlID0gbW9kZTtcbiAgICB0aGlzLl9lZGl0TW9kZUNoYW5nZWQuZW1pdCh0aGlzLmVkaXRNb2RlKTtcbiAgfVxuXG4gIHByaXZhdGUgdG9nZ2xlQ29sbGFwc2VkKGNvbGxhcHNlZDogYm9vbGVhbikge1xuICAgIHRoaXMuX2lzQ29sbGFwc2VkID0gY29sbGFwc2VkO1xuICAgIHRoaXMuX2lzQ29sbGFwc2VkQ2hhbmdlLmVtaXQodGhpcy5faXNDb2xsYXBzZWQpO1xuICB9XG5cbiAgb25Db2xsYXBzZUV4cGFuZCgpOiB2b2lkIHtcbiAgICBpZiAodGhpcy5faXNDb2xsYXBzZWQpIHtcbiAgICAgIHRoaXMudG9nZ2xlQ29sbGFwc2VkKGZhbHNlKTtcbiAgICB9IGVsc2Uge1xuICAgICAgdGhpcy50b2dnbGVDb2xsYXBzZWQodHJ1ZSk7XG4gICAgfVxuICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwiY2FyZCB2aWV3LWVkaXQtc2VjdGlvblwiIChrZXl1cC5lc2NhcGUpPVwib25DYW5jZWwoKVwiPlxuICA8ZGl2IGNsYXNzPVwiY2FyZC1ibG9ja1wiPlxuICAgIDxkaXYgY2xhc3M9XCJjYXJkLXRpdGxlXCI+XG4gICAgICB7e190aXRsZX19XG4gICAgICA8YnV0dG9uXG4gICAgICAgIHR5cGU9XCJidXR0b25cIlxuICAgICAgICAoY2xpY2spPVwib25Db2xsYXBzZUV4cGFuZCgpXCJcbiAgICAgICAgY2xhc3M9XCJidG4gYnRuLWljb24gYnRuLWxpbmsgY2VzLWNhcmV0LWJ0blwiXG4gICAgICAgICpuZ0lmPVwiX2lzQ29sbGFwc2libGUgJiYgIWVkaXRNb2RlXCJcbiAgICAgID5cbiAgICAgICAgPGNsci1pY29uIHNoYXBlPVwiY2FyZXQgdXBcIiBzaXplPVwiMjBcIiBjbGFzcz1cImNlcy1jYXJldC1pY29uXCIgW0Byb3RhdGVJY29uXT1cIl9pc0NvbGxhcHNlZFwiPjwvY2xyLWljb24+XG4gICAgICA8L2J1dHRvbj5cbiAgICAgIDxkaXYgY2xhc3M9XCJ2ZXMtYWN0aW9uc1wiPlxuICAgICAgICA8YnV0dG9uXG4gICAgICAgICAgdHlwZT1cImJ1dHRvblwiXG4gICAgICAgICAgKGNsaWNrKT1cIm9uRWRpdCgpXCJcbiAgICAgICAgICBjbGFzcz1cImJ0biBidG4taWNvbiBidG4tbGluayB2ZXMtYWN0aW9uXCJcbiAgICAgICAgICAqbmdJZj1cIl9lZGl0YWJsZSAmJiAhZWRpdE1vZGUgJiYgYWN0aW9uQmxvY2suY2hpbGRyZW4ubGVuZ3RoID09IDBcIlxuICAgICAgICA+XG4gICAgICAgICAgPGNsci1pY29uIGNsYXNzPVwidmVzLWVkaXQtaWNvblwiIFthdHRyLnNoYXBlXT1cIl9lZGl0SWNvblwiIHNpemU9XCIyMFwiPjwvY2xyLWljb24+XG4gICAgICAgIDwvYnV0dG9uPlxuICAgICAgICA8ZGl2ICNhY3Rpb25CbG9jaz5cbiAgICAgICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJbYWN0aW9uLWJsb2NrXVwiPjwvbmctY29udGVudD5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgICA8ZGl2IGNsYXNzPVwiY2FyZC10ZXh0XCIgW0Bjb2xsYXBzZUV4cGFuZEFuaW1hdGlvbl0gKm5nSWY9XCIhKF9pc0NvbGxhcHNlZCAmJiBfaXNDb2xsYXBzaWJsZSlcIj5cbiAgICAgIDxuZy10ZW1wbGF0ZSBbbmdUZW1wbGF0ZU91dGxldF09XCJ2aWV3UmVmXCIgKm5nSWY9XCIhZWRpdE1vZGVcIj48L25nLXRlbXBsYXRlPlxuICAgICAgPG5nLXRlbXBsYXRlIFtuZ1RlbXBsYXRlT3V0bGV0XT1cImVkaXRSZWZcIiAqbmdJZj1cImVkaXRNb2RlXCI+PC9uZy10ZW1wbGF0ZT5cbiAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJlZGl0TW9kZVwiPlxuICAgICAgICA8Zm9ybSBjbHJGb3JtIChuZ1N1Ym1pdCk9XCJvblN1Ym1pdCgpXCIgY2xhc3M9XCJidXR0b24tYmFyXCI+XG4gICAgICAgICAgPGJ1dHRvbiBjbGFzcz1cImJ0biBidG4tcHJpbWFyeSB2ZXMtc2F2ZVwiIHR5cGU9XCJzdWJtaXRcIj57e19zYXZlVGV4dH19PC9idXR0b24+XG4gICAgICAgICAgPGJ1dHRvbiBjbGFzcz1cImJ0biB2ZXMtY2FuY2VsXCIgKGNsaWNrKT1cIm9uQ2FuY2VsKClcIiB0eXBlPVwiYnV0dG9uXCI+e3tfY2FuY2VsVGV4dH19PC9idXR0b24+XG4gICAgICAgIDwvZm9ybT5cbiAgICAgIDwvbmctY29udGFpbmVyPlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cbjwvZGl2PlxuIl19

package/fesm2015/clr-addons.mjs

@@ -3521,7 +3521,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
         }] });
 
 /*
- * Copyright (c) 2018-2019 Porsche Informatik. All Rights Reserved.
+ * Copyright (c) 2018-2022 Porsche Informatik. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
@@ -3531,11 +3531,23 @@ class ClrViewEditSection {
         this._preventSave = false;
         this._cancelText = 'Cancel';
         this._editable = true;
-        this._editMode = false;
         this._editIcon = 'pencil';
+        this._isCollapsible = false;
+        this._isCollapsed = false;
+        this._isCollapsedChange = new EventEmitter();
         this._editModeChanged = new EventEmitter(false);
         this._submitted = new EventEmitter(false);
         this._cancelled = new EventEmitter(false);
+        this._editMode = false;
+    }
+    set editMode(value) {
+        this._editMode = value;
+        if (value) {
+            this.toggleCollapsed(false);
+        }
+    }
+    get editMode() {
+        return this._editMode;
     }
     onSubmit() {
         this._submitted.emit();
@@ -3549,17 +3561,64 @@ class ClrViewEditSection {
     }
     onEdit() {
         this.setEditMode(true);
+        this.toggleCollapsed(false);
     }
     setEditMode(mode) {
-        this._editMode = mode;
-        this._editModeChanged.emit(this._editMode);
+        this.editMode = mode;
+        this._editModeChanged.emit(this.editMode);
+    }
+    toggleCollapsed(collapsed) {
+        this._isCollapsed = collapsed;
+        this._isCollapsedChange.emit(this._isCollapsed);
+    }
+    onCollapseExpand() {
+        if (this._isCollapsed) {
+            this.toggleCollapsed(false);
+        }
+        else {
+            this.toggleCollapsed(true);
+        }
     }
 }
 ClrViewEditSection.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrViewEditSection, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ClrViewEditSection.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: ClrViewEditSection, selector: "clr-view-edit-section", inputs: { _title: ["clrTitle", "_title"], _saveText: ["clrSaveText", "_saveText"], _preventSave: ["clrPreventModeChangeOnSave", "_preventSave"], _cancelText: ["clrCancelText", "_cancelText"], _editable: ["clrEditable", "_editable"], _editMode: ["clrEditMode", "_editMode"], _editIcon: ["clrEditIcon", "_editIcon"], viewRef: ["clrViewRef", "viewRef"], editRef: ["clrEditRef", "editRef"] }, outputs: { _editModeChanged: "clrEditModeChange", _submitted: "clrSectionSubmitted", _cancelled: "clrSectionEditCancelled" }, ngImport: i0, template: "<div class=\"card view-edit-section\" (keyup.escape)=\"onCancel()\">\n  <div class=\"card-block\">\n    <div class=\"card-title\">\n      {{_title}}\n      <div class=\"ves-actions\">\n        <button\n          type=\"button\"\n          (click)=\"onEdit()\"\n          class=\"btn btn-icon btn-link ves-action\"\n          *ngIf=\"_editable && !_editMode && actionBlock.children.length == 0\"\n        >\n          <clr-icon class=\"ves-edit-icon\" [attr.shape]=\"_editIcon\" size=\"20\"></clr-icon>\n        </button>\n        <div #actionBlock>\n          <ng-content select=\"[action-block]\"></ng-content>\n        </div>\n      </div>\n    </div>\n    <div class=\"card-text\">\n      <ng-template [ngTemplateOutlet]=\"viewRef\" *ngIf=\"!_editMode\"></ng-template>\n      <ng-template [ngTemplateOutlet]=\"editRef\" *ngIf=\"_editMode\"></ng-template>\n      <ng-container *ngIf=\"_editMode\">\n        <form clrForm (ngSubmit)=\"onSubmit()\" class=\"button-bar\">\n          <button class=\"btn btn-primary ves-save\" type=\"submit\">{{_saveText}}</button>\n          <button class=\"btn ves-cancel\" (click)=\"onCancel()\" type=\"button\">{{_cancelText}}</button>\n        </form>\n      </ng-container>\n    </div>\n  </div>\n</div>\n", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.ClrIconCustomTag, selector: "clr-icon" }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1.ClrForm, selector: "[clrForm]", inputs: ["clrLabelSize"] }] });
+ClrViewEditSection.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: ClrViewEditSection, selector: "clr-view-edit-section", inputs: { _title: ["clrTitle", "_title"], _saveText: ["clrSaveText", "_saveText"], _preventSave: ["clrPreventModeChangeOnSave", "_preventSave"], _cancelText: ["clrCancelText", "_cancelText"], _editable: ["clrEditable", "_editable"], _editIcon: ["clrEditIcon", "_editIcon"], _isCollapsible: ["clrIsCollapsible", "_isCollapsible"], _isCollapsed: ["clrIsCollapsed", "_isCollapsed"], viewRef: ["clrViewRef", "viewRef"], editRef: ["clrEditRef", "editRef"], editMode: ["clrEditMode", "editMode"] }, outputs: { _isCollapsedChange: "clrIsCollapsedChange", _editModeChanged: "clrEditModeChange", _submitted: "clrSectionSubmitted", _cancelled: "clrSectionEditCancelled" }, ngImport: i0, template: "<div class=\"card view-edit-section\" (keyup.escape)=\"onCancel()\">\n  <div class=\"card-block\">\n    <div class=\"card-title\">\n      {{_title}}\n      <button\n        type=\"button\"\n        (click)=\"onCollapseExpand()\"\n        class=\"btn btn-icon btn-link ces-caret-btn\"\n        *ngIf=\"_isCollapsible && !editMode\"\n      >\n        <clr-icon shape=\"caret up\" size=\"20\" class=\"ces-caret-icon\" [@rotateIcon]=\"_isCollapsed\"></clr-icon>\n      </button>\n      <div class=\"ves-actions\">\n        <button\n          type=\"button\"\n          (click)=\"onEdit()\"\n          class=\"btn btn-icon btn-link ves-action\"\n          *ngIf=\"_editable && !editMode && actionBlock.children.length == 0\"\n        >\n          <clr-icon class=\"ves-edit-icon\" [attr.shape]=\"_editIcon\" size=\"20\"></clr-icon>\n        </button>\n        <div #actionBlock>\n          <ng-content select=\"[action-block]\"></ng-content>\n        </div>\n      </div>\n    </div>\n    <div class=\"card-text\" [@collapseExpandAnimation] *ngIf=\"!(_isCollapsed && _isCollapsible)\">\n      <ng-template [ngTemplateOutlet]=\"viewRef\" *ngIf=\"!editMode\"></ng-template>\n      <ng-template [ngTemplateOutlet]=\"editRef\" *ngIf=\"editMode\"></ng-template>\n      <ng-container *ngIf=\"editMode\">\n        <form clrForm (ngSubmit)=\"onSubmit()\" class=\"button-bar\">\n          <button class=\"btn btn-primary ves-save\" type=\"submit\">{{_saveText}}</button>\n          <button class=\"btn ves-cancel\" (click)=\"onCancel()\" type=\"button\">{{_cancelText}}</button>\n        </form>\n      </ng-container>\n    </div>\n  </div>\n</div>\n", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.ClrIconCustomTag, selector: "clr-icon" }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1.ClrForm, selector: "[clrForm]", inputs: ["clrLabelSize"] }], animations: [
+        trigger('collapseExpandAnimation', [
+            transition(':enter', [
+                style({ opacity: 0, height: 0, overflow: 'hidden' }),
+                animate('300ms', style({ opacity: 1, height: '*' })),
+            ]),
+            transition(':leave', [
+                style({ opacity: 1, height: '*', overflow: 'hidden' }),
+                animate('300ms', style({ opacity: 0, height: 0 })),
+            ]),
+        ]),
+        trigger('rotateIcon', [
+            state('true', style({ transform: 'rotate(0)' })),
+            state('false', style({ transform: 'rotate(180deg)' })),
+            transition('true => false', animate('300ms ease-out')),
+            transition('false => true', animate('300ms ease-in')),
+        ]),
+    ] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ClrViewEditSection, decorators: [{
             type: Component,
-            args: [{ selector: 'clr-view-edit-section', template: "<div class=\"card view-edit-section\" (keyup.escape)=\"onCancel()\">\n  <div class=\"card-block\">\n    <div class=\"card-title\">\n      {{_title}}\n      <div class=\"ves-actions\">\n        <button\n          type=\"button\"\n          (click)=\"onEdit()\"\n          class=\"btn btn-icon btn-link ves-action\"\n          *ngIf=\"_editable && !_editMode && actionBlock.children.length == 0\"\n        >\n          <clr-icon class=\"ves-edit-icon\" [attr.shape]=\"_editIcon\" size=\"20\"></clr-icon>\n        </button>\n        <div #actionBlock>\n          <ng-content select=\"[action-block]\"></ng-content>\n        </div>\n      </div>\n    </div>\n    <div class=\"card-text\">\n      <ng-template [ngTemplateOutlet]=\"viewRef\" *ngIf=\"!_editMode\"></ng-template>\n      <ng-template [ngTemplateOutlet]=\"editRef\" *ngIf=\"_editMode\"></ng-template>\n      <ng-container *ngIf=\"_editMode\">\n        <form clrForm (ngSubmit)=\"onSubmit()\" class=\"button-bar\">\n          <button class=\"btn btn-primary ves-save\" type=\"submit\">{{_saveText}}</button>\n          <button class=\"btn ves-cancel\" (click)=\"onCancel()\" type=\"button\">{{_cancelText}}</button>\n        </form>\n      </ng-container>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'clr-view-edit-section', animations: [
+                        trigger('collapseExpandAnimation', [
+                            transition(':enter', [
+                                style({ opacity: 0, height: 0, overflow: 'hidden' }),
+                                animate('300ms', style({ opacity: 1, height: '*' })),
+                            ]),
+                            transition(':leave', [
+                                style({ opacity: 1, height: '*', overflow: 'hidden' }),
+                                animate('300ms', style({ opacity: 0, height: 0 })),
+                            ]),
+                        ]),
+                        trigger('rotateIcon', [
+                            state('true', style({ transform: 'rotate(0)' })),
+                            state('false', style({ transform: 'rotate(180deg)' })),
+                            transition('true => false', animate('300ms ease-out')),
+                            transition('false => true', animate('300ms ease-in')),
+                        ]),
+                    ], template: "<div class=\"card view-edit-section\" (keyup.escape)=\"onCancel()\">\n  <div class=\"card-block\">\n    <div class=\"card-title\">\n      {{_title}}\n      <button\n        type=\"button\"\n        (click)=\"onCollapseExpand()\"\n        class=\"btn btn-icon btn-link ces-caret-btn\"\n        *ngIf=\"_isCollapsible && !editMode\"\n      >\n        <clr-icon shape=\"caret up\" size=\"20\" class=\"ces-caret-icon\" [@rotateIcon]=\"_isCollapsed\"></clr-icon>\n      </button>\n      <div class=\"ves-actions\">\n        <button\n          type=\"button\"\n          (click)=\"onEdit()\"\n          class=\"btn btn-icon btn-link ves-action\"\n          *ngIf=\"_editable && !editMode && actionBlock.children.length == 0\"\n        >\n          <clr-icon class=\"ves-edit-icon\" [attr.shape]=\"_editIcon\" size=\"20\"></clr-icon>\n        </button>\n        <div #actionBlock>\n          <ng-content select=\"[action-block]\"></ng-content>\n        </div>\n      </div>\n    </div>\n    <div class=\"card-text\" [@collapseExpandAnimation] *ngIf=\"!(_isCollapsed && _isCollapsible)\">\n      <ng-template [ngTemplateOutlet]=\"viewRef\" *ngIf=\"!editMode\"></ng-template>\n      <ng-template [ngTemplateOutlet]=\"editRef\" *ngIf=\"editMode\"></ng-template>\n      <ng-container *ngIf=\"editMode\">\n        <form clrForm (ngSubmit)=\"onSubmit()\" class=\"button-bar\">\n          <button class=\"btn btn-primary ves-save\" type=\"submit\">{{_saveText}}</button>\n          <button class=\"btn ves-cancel\" (click)=\"onCancel()\" type=\"button\">{{_cancelText}}</button>\n        </form>\n      </ng-container>\n    </div>\n  </div>\n</div>\n" }]
         }], propDecorators: { _title: [{
                 type: Input,
                 args: ['clrTitle']
@@ -3575,18 +3634,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
             }], _editable: [{
                 type: Input,
                 args: ['clrEditable']
-            }], _editMode: [{
-                type: Input,
-                args: ['clrEditMode']
             }], _editIcon: [{
                 type: Input,
                 args: ['clrEditIcon']
+            }], _isCollapsible: [{
+                type: Input,
+                args: ['clrIsCollapsible']
+            }], _isCollapsed: [{
+                type: Input,
+                args: ['clrIsCollapsed']
             }], viewRef: [{
                 type: Input,
                 args: ['clrViewRef']
             }], editRef: [{
                 type: Input,
                 args: ['clrEditRef']
+            }], _isCollapsedChange: [{
+                type: Output,
+                args: ['clrIsCollapsedChange']
             }], _editModeChanged: [{
                 type: Output,
                 args: ['clrEditModeChange']
@@ -3596,6 +3661,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
             }], _cancelled: [{
                 type: Output,
                 args: ['clrSectionEditCancelled']
+            }], editMode: [{
+                type: Input,
+                args: ['clrEditMode']
             }] } });
 
 /*