@porscheinformatik/clr-addons 12.0.1 → 12.1.0

package/fesm2020/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']
             }] } });
 
 /*