@porscheinformatik/material-addons 10.1.6 → 10.2.0

package/bundles/porscheinformatik-material-addons.umd.js

@@ -61,11 +61,13 @@
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
             function (d, b) { for (var p in b)
-                if (b.hasOwnProperty(p))
+                if (Object.prototype.hasOwnProperty.call(b, p))
                     d[p] = b[p]; };
         return extendStatics(d, b);
     };
     function __extends(d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
@@ -208,10 +210,10 @@
             k2 = k;
         o[k2] = m[k];
     });
-    function __exportStar(m, exports) {
+    function __exportStar(m, o) {
         for (var p in m)
-            if (p !== "default" && !exports.hasOwnProperty(p))
-                __createBinding(exports, m, p);
+            if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p))
+                __createBinding(o, m, p);
     }
     function __values(o) {
         var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
@@ -251,11 +253,13 @@
         }
         return ar;
     }
+    /** @deprecated */
     function __spread() {
         for (var ar = [], i = 0; i < arguments.length; i++)
             ar = ar.concat(__read(arguments[i]));
         return ar;
     }
+    /** @deprecated */
     function __spreadArrays() {
         for (var s = 0, i = 0, il = arguments.length; i < il; i++)
             s += arguments[i].length;
@@ -264,7 +268,17 @@
                 r[k] = a[j];
         return r;
     }
-    ;
+    function __spreadArray(to, from, pack) {
+        if (pack || arguments.length === 2)
+            for (var i = 0, l = from.length, ar; i < l; i++) {
+                if (ar || !(i in from)) {
+                    if (!ar)
+                        ar = Array.prototype.slice.call(from, 0, i);
+                    ar[i] = from[i];
+                }
+            }
+        return to.concat(ar || Array.prototype.slice.call(from));
+    }
     function __await(v) {
         return this instanceof __await ? (this.v = v, this) : new __await(v);
     }
@@ -321,7 +335,7 @@
         var result = {};
         if (mod != null)
             for (var k in mod)
-                if (Object.hasOwnProperty.call(mod, k))
+                if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k))
                     __createBinding(result, mod, k);
         __setModuleDefault(result, mod);
         return result;
@@ -329,18 +343,21 @@
     function __importDefault(mod) {
         return (mod && mod.__esModule) ? mod : { default: mod };
     }
-    function __classPrivateFieldGet(receiver, privateMap) {
-        if (!privateMap.has(receiver)) {
-            throw new TypeError("attempted to get private field on non-instance");
-        }
-        return privateMap.get(receiver);
+    function __classPrivateFieldGet(receiver, state, kind, f) {
+        if (kind === "a" && !f)
+            throw new TypeError("Private accessor was defined without a getter");
+        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+            throw new TypeError("Cannot read private member from an object whose class did not declare it");
+        return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
     }
-    function __classPrivateFieldSet(receiver, privateMap, value) {
-        if (!privateMap.has(receiver)) {
-            throw new TypeError("attempted to set private field on non-instance");
-        }
-        privateMap.set(receiver, value);
-        return value;
+    function __classPrivateFieldSet(receiver, state, value, kind, f) {
+        if (kind === "m")
+            throw new TypeError("Private method is not writable");
+        if (kind === "a" && !f)
+            throw new TypeError("Private accessor was defined without a setter");
+        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+            throw new TypeError("Cannot write private member to an object whose class did not declare it");
+        return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
     }
 
     var MadBasicButton = /** @class */ (function () {
@@ -1478,9 +1495,11 @@
             this.saveDisabled = false;
             this.saveText = 'NOT SET';
             this.editMode = false;
+            this.additionalActionText = '';
             this.edit = new i0.EventEmitter();
             this.cancel = new i0.EventEmitter();
             this.save = new i0.EventEmitter();
+            this.additionalAction = new i0.EventEmitter();
         }
         CardComponent.prototype.onCancel = function () {
             this.cancel.emit(undefined);
@@ -1495,16 +1514,25 @@
         CardComponent.prototype.toggleCollapse = function () {
             this.expanded = !this.expanded;
         };
+        CardComponent.prototype.additionalActionClicked = function () {
+            this.additionalAction.emit(undefined);
+        };
         return CardComponent;
     }());
     CardComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'mad-card',
-                    template: "<mat-card>\n  <mat-card-header>\n    <mat-card-title>\n      {{ title }}\n      <mad-icon-button (click)=\"toggleCollapse()\" *ngIf=\"expandable && !editMode\">\n        <mat-icon [@rotateIcon]=\"!expanded\">keyboard_arrow_down</mat-icon>\n      </mad-icon-button>\n    </mat-card-title>\n    <mad-icon-button [title]=\"editText\" (click)=\"onEdit()\" *ngIf=\"!readonly && !editMode\">\n      <mat-icon>create</mat-icon>\n    </mad-icon-button>\n  </mat-card-header>\n  <mat-card-content [@collapseExpandAnimation] *ngIf=\"expanded\">\n    <ng-content></ng-content>\n  </mat-card-content>\n  <mat-card-actions *ngIf=\"!readonly && editMode\">\n    <mad-primary-button [title]=\"saveText\" [disabled]=\"saveDisabled\" (throttleClick)=\"onSave()\" madThrottleClick>\n      {{ saveText }}\n    </mad-primary-button>\n    <mad-outline-button [title]=\"cancelText\" [disabled]=\"cancelDisabled\" (click)=\"onCancel()\">\n      {{ cancelText }}\n    </mad-outline-button>\n  </mat-card-actions>\n</mat-card>\n",
+                    template: "<mat-card>\n  <mat-card-header>\n    <mat-card-title>\n      {{ title }}\n      <mad-icon-button (click)=\"toggleCollapse()\" *ngIf=\"expandable && !editMode\">\n        <mat-icon [@rotateIcon]=\"!expanded\">keyboard_arrow_down</mat-icon>\n      </mad-icon-button>\n    </mat-card-title>\n    <span>\n      <mad-icon-button (click)=\"additionalActionClicked()\" *ngIf=\"additionalActionIcon\" [title]=\"additionalActionText\" type=\"button\">\n        <mat-icon>{{additionalActionIcon}}</mat-icon>\n      </mad-icon-button>\n      <mad-icon-button [title]=\"editText\" (click)=\"onEdit()\" *ngIf=\"!readonly && !editMode\">\n        <mat-icon>create</mat-icon>\n      </mad-icon-button>\n    </span>\n  </mat-card-header>\n  <mat-card-content [@collapseExpandAnimation] *ngIf=\"expanded\">\n    <ng-content></ng-content>\n  </mat-card-content>\n  <mat-card-actions *ngIf=\"!readonly && editMode\">\n    <mad-primary-button [title]=\"saveText\" [disabled]=\"saveDisabled\" (throttleClick)=\"onSave()\" madThrottleClick>\n      {{ saveText }}\n    </mad-primary-button>\n    <mad-outline-button [title]=\"cancelText\" [disabled]=\"cancelDisabled\" (click)=\"onCancel()\">\n      {{ cancelText }}\n    </mad-outline-button>\n  </mat-card-actions>\n</mat-card>\n",
                     animations: [
                         animations.trigger('collapseExpandAnimation', [
-                            animations.transition(':enter', [animations.style({ opacity: 0, height: 0, overflow: 'hidden' }), animations.animate('100ms', animations.style({ opacity: 1, height: '*' }))]),
-                            animations.transition(':leave', [animations.style({ opacity: 1, height: '*', overflow: 'hidden' }), animations.animate('100ms', animations.style({ opacity: 0, height: 0 }))]),
+                            animations.transition(':enter', [animations.style({ opacity: 0, height: 0, overflow: 'hidden' }), animations.animate('100ms', animations.style({
+                                    opacity: 1,
+                                    height: '*'
+                                }))]),
+                            animations.transition(':leave', [animations.style({ opacity: 1, height: '*', overflow: 'hidden' }), animations.animate('100ms', animations.style({
+                                    opacity: 0,
+                                    height: 0
+                                }))]),
                         ]),
                         animations.trigger('rotateIcon', [
                             animations.state('true', animations.style({ transform: 'rotate(0)' })),
@@ -1527,9 +1555,12 @@
         saveText: [{ type: i0.Input }],
         title: [{ type: i0.Input }],
         editMode: [{ type: i0.Input }],
+        additionalActionIcon: [{ type: i0.Input }],
+        additionalActionText: [{ type: i0.Input }],
         edit: [{ type: i0.Output }],
         cancel: [{ type: i0.Output }],
-        save: [{ type: i0.Output }]
+        save: [{ type: i0.Output }],
+        additionalAction: [{ type: i0.Output }]
     };
 
     var ThrottleClickDirective = /** @class */ (function () {
@@ -1788,8 +1819,8 @@
     TableComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'mad-table',
-                    template: "<!-- Table actions -->\n<div *ngIf=\"tableActions?.length\">\n  <mad-primary-button class=\"table-action\" *ngFor=\"let tableAction of tableActions\" (click)=\"onTableAction(tableAction)\">\n    {{ tableAction.label }}\n  </mad-primary-button>\n</div>\n\n<!-- Row action buttons -->\n<mat-menu #menu=\"matMenu\">\n  <ng-template matMenuContent let-element=\"element\">\n    <button *ngFor=\"let rowAction of rowActions\" mat-menu-item class=\"row-action\" (click)=\"onRowEvent($event, element, rowAction)\">\n      {{ rowAction.label }}\n    </button>\n  </ng-template>\n</mat-menu>\n\n<!-- Table filter -->\n<mat-form-field *ngIf=\"isFilterEnabled\">\n  <mat-label>{{ filterLabel }}</mat-label>\n  <input matInput (keyup)=\"onFilter($event?.target?.value)\" placeholder=\"{{ filterPlaceholder }}\" />\n</mat-form-field>\n\n<!-- Table -->\n<div *ngIf=\"dataSource?.data?.length > 0; else noData\">\n  <table mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSortingEvent($event)\">\n    <!-- Row actions column -->\n    <ng-container [matColumnDef]=\"ACTION_COLUMN_NAME\" *ngIf=\"rowActions?.length\">\n      <th mat-header-cell *matHeaderCellDef class=\"row-action-button\"></th>\n      <td mat-cell *matCellDef=\"let element\" class=\"row-action-button\">\n        <mad-icon-button [matMenuTriggerData]=\"{ element: element }\" [matMenuTriggerFor]=\"menu\">\n          <mat-icon>more_vert</mat-icon>\n        </mad-icon-button>\n      </td>\n    </ng-container>\n    <!-- Columns with data -->\n    <ng-container *ngFor=\"let column of columns\" [matColumnDef]=\"column.label\">\n      <ng-container *ngIf=\"column.isSortable; else noSort\">\n        <th\n          mat-header-cell\n          *matHeaderCellDef\n          mat-sort-header=\"{{ column.label }}\"\n          [arrowPosition]=\"column.isRightAligned ? 'before' : 'after'\"\n          [class.text-right]=\"column.isRightAligned\"\n        >\n          {{ column.label }}\n        </th>\n      </ng-container>\n      <ng-template #noSort>\n        <th mat-header-cell *matHeaderCellDef [class.text-right]=\"column.isRightAligned\">\n          {{ column.label }}\n        </th>\n      </ng-template>\n      <td mat-cell *matCellDef=\"let element\" [class.text-right]=\"column.isRightAligned\">\n        {{ element[column.dataPropertyName] }}\n      </td>\n    </ng-container>\n    <tr mat-header-row *matHeaderRowDef=\"columnNames\"></tr>\n    <tr\n      mat-row\n      [class.clickable-table-row]=\"isRowClickable\"\n      (click)=\"onRowEvent($event, row)\"\n      *matRowDef=\"let row; columns: columnNames\"\n    ></tr>\n  </table>\n\n  <!-- Pagination -->\n  <mat-paginator\n    [style.display]=\"isPaginationEnabled ? 'block' : 'none'\"\n    [pageSize]=\"defaultPageSize\"\n    [pageSizeOptions]=\"pageSizeOptions\"\n    showFirstLastButtons\n  >\n  </mat-paginator>\n</div>\n\n<!-- No data alert -->\n<ng-template #noData>\n  <div class=\"noDataText\">\n    {{ noDataText }}\n  </div>\n</ng-template>\n",
-                    styles: [".text-right{text-align:right!important}.table-action{margin-bottom:.5em;margin-right:.5em}.row-action-button{width:10px}.noDataText{text-align:center;width:100%}"]
+                    template: "<!-- Table actions -->\n<div *ngIf=\"tableActions?.length\">\n  <mad-primary-button class=\"table-action\" *ngFor=\"let tableAction of tableActions\" (click)=\"onTableAction(tableAction)\">\n    {{ tableAction.label }}\n  </mad-primary-button>\n</div>\n\n<!-- Row action buttons -->\n<mat-menu #menu=\"matMenu\">\n  <ng-template matMenuContent let-element=\"element\">\n    <button *ngFor=\"let rowAction of rowActions\" mat-menu-item class=\"row-action\" (click)=\"onRowEvent($event, element, rowAction)\">\n      {{ rowAction.label }}\n    </button>\n  </ng-template>\n</mat-menu>\n\n<!-- Table filter -->\n<mat-form-field *ngIf=\"isFilterEnabled\">\n  <mat-label>{{ filterLabel }}</mat-label>\n  <input matInput (keyup)=\"onFilter($event?.target?.value)\" placeholder=\"{{ filterPlaceholder }}\" />\n</mat-form-field>\n\n<!-- Table -->\n<div *ngIf=\"dataSource?.data?.length > 0; else noData\" class=\"mad-table\">\n  <table mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSortingEvent($event)\">\n    <!-- Row actions column -->\n    <ng-container [matColumnDef]=\"ACTION_COLUMN_NAME\" *ngIf=\"rowActions?.length\">\n      <th mat-header-cell *matHeaderCellDef class=\"row-action-button\"></th>\n      <td mat-cell *matCellDef=\"let element\" class=\"row-action-button\">\n        <mad-icon-button [matMenuTriggerData]=\"{ element: element }\" [matMenuTriggerFor]=\"menu\">\n          <mat-icon>more_vert</mat-icon>\n        </mad-icon-button>\n      </td>\n    </ng-container>\n    <!-- Columns with data -->\n    <ng-container *ngFor=\"let column of columns\" [matColumnDef]=\"column.label\">\n      <ng-container *ngIf=\"column.isSortable; else noSort\">\n        <th\n          mat-header-cell\n          *matHeaderCellDef\n          mat-sort-header=\"{{ column.label }}\"\n          [arrowPosition]=\"column.isRightAligned ? 'before' : 'after'\"\n          [class.text-right]=\"column.isRightAligned\"\n        >\n          {{ column.label }}\n        </th>\n      </ng-container>\n      <ng-template #noSort>\n        <th mat-header-cell *matHeaderCellDef [class.text-right]=\"column.isRightAligned\">\n          {{ column.label }}\n        </th>\n      </ng-template>\n      <td mat-cell *matCellDef=\"let element\" [class.text-right]=\"column.isRightAligned\">\n        {{ element[column.dataPropertyName] }}\n      </td>\n    </ng-container>\n    <tr mat-header-row *matHeaderRowDef=\"columnNames\"></tr>\n    <tr\n      mat-row\n      [class.clickable-table-row]=\"isRowClickable\"\n      (click)=\"onRowEvent($event, row)\"\n      *matRowDef=\"let row; columns: columnNames\"\n    ></tr>\n  </table>\n\n  <!-- Pagination -->\n  <mat-paginator\n    [style.display]=\"isPaginationEnabled ? 'block' : 'none'\"\n    [pageSize]=\"defaultPageSize\"\n    [pageSizeOptions]=\"pageSizeOptions\"\n    showFirstLastButtons\n  >\n  </mat-paginator>\n</div>\n\n<!-- No data alert -->\n<ng-template #noData>\n  <div class=\"noDataText\">\n    {{ noDataText }}\n  </div>\n</ng-template>\n",
+                    styles: [".text-right{text-align:right!important}.table-action{margin-bottom:.5em;margin-right:.5em}.row-action-button{width:10px}.noDataText{text-align:center;width:100%}.mad-table{overflow-x:auto;width:100%}"]
                 },] }
     ];
     TableComponent.propDecorators = {