@porscheinformatik/clr-addons 10.4.3 → 10.5.0

package/bundles/clr-addons.umd.js

@@ -1,8 +1,28 @@
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('@clr/angular'), require('rxjs'), require('rxjs/operators'), require('@angular/router'), require('@angular/animations'), require('@clr/icons'), require('@clr/icons/shapes/all-shapes')) :
     typeof define === 'function' && define.amd ? define('@porscheinformatik/clr-addons', ['exports', '@angular/core', '@angular/common', '@angular/forms', '@clr/angular', 'rxjs', 'rxjs/operators', '@angular/router', '@angular/animations', '@clr/icons', '@clr/icons/shapes/all-shapes'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.porscheinformatik = global.porscheinformatik || {}, global.porscheinformatik['clr-addons'] = {}), global.ng.core, global.ng.common, global.ng.forms, global['@clr/angular'], global.rxjs, global.rxjs.operators, global.ng.router, global.ng.animations, global.icons, global.allShapes));
-}(this, (function (exports, i0, common, forms, angular, rxjs, operators, router, animations, icons, allShapes) { 'use strict';
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.porscheinformatik = global.porscheinformatik || {}, global.porscheinformatik["clr-addons"] = {}), global.ng.core, global.ng.common, global.ng.forms, global["@clr/angular"], global.rxjs, global.rxjs.operators, global.ng.router, global.ng.animations, global.icons, global.allShapes));
+})(this, (function (exports, i0, common, forms, angular, rxjs, operators, router, animations, icons, allShapes) { 'use strict';
+
+    function _interopNamespace(e) {
+        if (e && e.__esModule) return e;
+        var n = Object.create(null);
+        if (e) {
+            Object.keys(e).forEach(function (k) {
+                if (k !== 'default') {
+                    var d = Object.getOwnPropertyDescriptor(e, k);
+                    Object.defineProperty(n, k, d.get ? d : {
+                        enumerable: true,
+                        get: function () { return e[k]; }
+                    });
+                }
+            });
+        }
+        n["default"] = e;
+        return Object.freeze(n);
+    }
+
+    var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
 
     /*
      * Copyright (c) 2018-2019 Porsche Informatik. All Rights Reserved.
@@ -60,7 +80,7 @@
         };
         return ClrBreadcrumbService;
     }());
-    ClrBreadcrumbService.ɵprov = i0.ɵɵdefineInjectable({ factory: function ClrBreadcrumbService_Factory() { return new ClrBreadcrumbService(); }, token: ClrBreadcrumbService, providedIn: "root" });
+    ClrBreadcrumbService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function ClrBreadcrumbService_Factory() { return new ClrBreadcrumbService(); }, token: ClrBreadcrumbService, providedIn: "root" });
     ClrBreadcrumbService.decorators = [
         { type: i0.Injectable, args: [{
                     providedIn: 'root',
@@ -1828,7 +1848,7 @@
             this.onTouch = this.defaultOnTouch;
         }
         ClrAbstractFormComponent.prototype.ngOnInit = function () {
-            var controlIdService = this.injector.get(angular.ɵbc, null);
+            var controlIdService = this.injector.get(angular["ɵbc"], null);
             if (controlIdService) {
                 this.inputId = controlIdService.id;
             }
@@ -1844,7 +1864,7 @@
                     _this.showError = _this.invalid && _this.control.touched;
                 });
             }
-            var markControlService = this.injector.get(angular.ɵbi, null);
+            var markControlService = this.injector.get(angular["ɵbi"], null);
             if (markControlService) {
                 markControlService.touchedChange.subscribe(function () {
                     _this.control.markAsTouched();
@@ -1949,7 +1969,7 @@
                             useExisting: i0.forwardRef(function () { return ClrMultilingualInput; }),
                             multi: true,
                         },
-                        angular.ɵbc,
+                        angular["ɵbc"],
                     ]
                 },] }
     ];
@@ -1974,7 +1994,7 @@
                             useExisting: i0.forwardRef(function () { return ClrMultilingualTextarea; }),
                             multi: true,
                         },
-                        angular.ɵbc,
+                        angular["ɵbc"],
                     ]
                 },] }
     ];
@@ -2558,7 +2578,8 @@
         };
         ClrNumericField.prototype.roundOrTruncate = function (value) {
             var method = this.roundValue ? 'round' : value < 0 ? 'ceil' : 'floor';
-            return Math[method](value * Math.pow(10, this.decimalPlaces)) / Math.pow(10, this.decimalPlaces);
+            // 16 is the highest precision before numbers have weird behaviour. see https://stackoverflow.com/q/21472828/15120942
+            return Math[method](+(value * Math.pow(10, this.decimalPlaces)).toPrecision(16)) / Math.pow(10, this.decimalPlaces);
         };
         return ClrNumericField;
     }());
@@ -3815,7 +3836,7 @@
     ];
 
     /*
-     * 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.
      */
@@ -3825,12 +3846,28 @@
             this._preventSave = false;
             this._cancelText = 'Cancel';
             this._editable = true;
-            this._editMode = false;
             this._editIcon = 'pencil';
+            this._isCollapsible = false;
+            this._isCollapsed = false;
+            this._isCollapsedChange = new i0.EventEmitter();
             this._editModeChanged = new i0.EventEmitter(false);
             this._submitted = new i0.EventEmitter(false);
             this._cancelled = new i0.EventEmitter(false);
+            this._editMode = false;
         }
+        Object.defineProperty(ClrViewEditSection.prototype, "editMode", {
+            get: function () {
+                return this._editMode;
+            },
+            set: function (value) {
+                this._editMode = value;
+                if (value) {
+                    this.toggleCollapsed(false);
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
         ClrViewEditSection.prototype.onSubmit = function () {
             this._submitted.emit();
             if (!this._preventSave) {
@@ -3843,17 +3880,48 @@
         };
         ClrViewEditSection.prototype.onEdit = function () {
             this.setEditMode(true);
+            this.toggleCollapsed(false);
         };
         ClrViewEditSection.prototype.setEditMode = function (mode) {
-            this._editMode = mode;
-            this._editModeChanged.emit(this._editMode);
+            this.editMode = mode;
+            this._editModeChanged.emit(this.editMode);
+        };
+        ClrViewEditSection.prototype.toggleCollapsed = function (collapsed) {
+            this._isCollapsed = collapsed;
+            this._isCollapsedChange.emit(this._isCollapsed);
+        };
+        ClrViewEditSection.prototype.onCollapseExpand = function () {
+            if (this._isCollapsed) {
+                this.toggleCollapsed(false);
+            }
+            else {
+                this.toggleCollapsed(true);
+            }
         };
         return ClrViewEditSection;
     }());
     ClrViewEditSection.decorators = [
         { type: i0.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"
+                    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",
+                    animations: [
+                        animations.trigger('collapseExpandAnimation', [
+                            animations.transition(':enter', [
+                                animations.style({ opacity: 0, height: 0, overflow: 'hidden' }),
+                                animations.animate('300ms', animations.style({ opacity: 1, height: '*' })),
+                            ]),
+                            animations.transition(':leave', [
+                                animations.style({ opacity: 1, height: '*', overflow: 'hidden' }),
+                                animations.animate('300ms', animations.style({ opacity: 0, height: 0 })),
+                            ]),
+                        ]),
+                        animations.trigger('rotateIcon', [
+                            animations.state('true', animations.style({ transform: 'rotate(0)' })),
+                            animations.state('false', animations.style({ transform: 'rotate(180deg)' })),
+                            animations.transition('true => false', animations.animate('300ms ease-out')),
+                            animations.transition('false => true', animations.animate('300ms ease-in')),
+                        ]),
+                    ]
                 },] }
     ];
     ClrViewEditSection.propDecorators = {
@@ -3862,13 +3930,16 @@
         _preventSave: [{ type: i0.Input, args: ['clrPreventModeChangeOnSave',] }],
         _cancelText: [{ type: i0.Input, args: ['clrCancelText',] }],
         _editable: [{ type: i0.Input, args: ['clrEditable',] }],
-        _editMode: [{ type: i0.Input, args: ['clrEditMode',] }],
         _editIcon: [{ type: i0.Input, args: ['clrEditIcon',] }],
+        _isCollapsible: [{ type: i0.Input, args: ['clrIsCollapsible',] }],
+        _isCollapsed: [{ type: i0.Input, args: ['clrIsCollapsed',] }],
         viewRef: [{ type: i0.Input, args: ['clrViewRef',] }],
         editRef: [{ type: i0.Input, args: ['clrEditRef',] }],
+        _isCollapsedChange: [{ type: i0.Output, args: ['clrIsCollapsedChange',] }],
         _editModeChanged: [{ type: i0.Output, args: ['clrEditModeChange',] }],
         _submitted: [{ type: i0.Output, args: ['clrSectionSubmitted',] }],
-        _cancelled: [{ type: i0.Output, args: ['clrSectionEditCancelled',] }]
+        _cancelled: [{ type: i0.Output, args: ['clrSectionEditCancelled',] }],
+        editMode: [{ type: i0.Input, args: ['clrEditMode',] }]
     };
 
     /*
@@ -4867,17 +4938,17 @@
     exports.escapeHtml = escapeHtml;
     exports.escapeRegex = escapeRegex;
     exports.loadIcons = loadIcons;
-    exports.ɵa = TreetableMainRenderer;
-    exports.ɵb = TreetableHeaderRenderer;
-    exports.ɵc = TreetableRowRenderer;
-    exports.ɵd = TreetableCellRenderer;
-    exports.ɵe = ClrAddOption;
-    exports.ɵf = ClrMultilingualAbstract;
-    exports.ɵg = ClrAbstractFormComponent;
-    exports.ɵh = ClrAutocompleteOffModule;
-    exports.ɵi = ClrAutocompleteOff;
+    exports["ɵa"] = TreetableMainRenderer;
+    exports["ɵb"] = TreetableHeaderRenderer;
+    exports["ɵc"] = TreetableRowRenderer;
+    exports["ɵd"] = TreetableCellRenderer;
+    exports["ɵe"] = ClrAddOption;
+    exports["ɵf"] = ClrMultilingualAbstract;
+    exports["ɵg"] = ClrAbstractFormComponent;
+    exports["ɵh"] = ClrAutocompleteOffModule;
+    exports["ɵi"] = ClrAutocompleteOff;
 
     Object.defineProperty(exports, '__esModule', { value: true });
 
-})));
+}));
 //# sourceMappingURL=clr-addons.umd.js.map