@leanix/components 0.2.48 → 0.2.52

package/bundles/leanix-components.umd.js

@@ -94,13 +94,13 @@
         return ButtonGroupComponent;
     }());
     ButtonGroupComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: ButtonGroupComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    ButtonGroupComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: ButtonGroupComponent, selector: "lx-button-group", inputs: { separator: "separator" }, host: { properties: { "class.marginSeparator": "this.hasMarginSeperator", "class.borderSeparator": "this.hasBorderSeparator" } }, ngImport: i0__namespace, template: "<ng-content></ng-content>\n", styles: [":host{display:inline-block}:host.marginSeparator>>>[lx-button]:not(:last-child){margin-right:1px}:host.borderSeparator>>>[lx-button]:not(:last-child){border-right:none!important}:host.borderSeparator>>>[lx-button]:not(:last-child):hover{border-right:none!important}:host>>>[lx-button]:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}:host>>>[lx-button]:not(:first-of-type){border-top-left-radius:0;border-bottom-left-radius:0}:host>>>lx-options-dropdown button[lx-button]:last-of-type{border-top-left-radius:0;border-bottom-left-radius:0}"] });
+    ButtonGroupComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: ButtonGroupComponent, selector: "lx-button-group", inputs: { separator: "separator" }, host: { properties: { "class.marginSeparator": "this.hasMarginSeperator", "class.borderSeparator": "this.hasBorderSeparator" } }, ngImport: i0__namespace, template: "<ng-content></ng-content>\n", styles: [":host{display:inline-block}:host.marginSeparator ::ng-deep [lx-button]:not(:last-child){margin-right:1px}:host.borderSeparator ::ng-deep [lx-button]:not(:last-child){border-right:none!important}:host.borderSeparator ::ng-deep [lx-button]:not(:last-child):hover{border-right:none!important}:host ::ng-deep [lx-button]:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}:host ::ng-deep [lx-button]:not(:first-of-type){border-top-left-radius:0;border-bottom-left-radius:0}:host ::ng-deep lx-options-dropdown button[lx-button]:last-of-type{border-top-left-radius:0;border-bottom-left-radius:0}"] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: ButtonGroupComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'lx-button-group',
                         templateUrl: 'button-group.component.html',
-                        styleUrls: ['button-group.component.styl']
+                        styleUrls: ['button-group.component.scss']
                     }]
             }], propDecorators: { separator: [{
                     type: i0.Input
@@ -1067,6 +1067,141 @@
                     type: i0.Input
                 }] } });
 
+    var TableHeaderComponent = /** @class */ (function () {
+        function TableHeaderComponent(elmentRef, changeDetection) {
+            this.elmentRef = elmentRef;
+            this.changeDetection = changeDetection;
+            this.sortChange = new i0.EventEmitter();
+            this.sortable = false;
+        }
+        TableHeaderComponent.prototype.onSort = function () {
+            if (this.column) {
+                if (!this.order) {
+                    this.order = 'ASC';
+                }
+                else if (this.order === 'ASC') {
+                    this.order = 'DESC';
+                }
+                else {
+                    this.order = undefined;
+                }
+                this.sortChange.emit({ key: this.order ? this.column : undefined, order: this.order });
+            }
+        };
+        Object.defineProperty(TableHeaderComponent.prototype, "order", {
+            get: function () {
+                return this._order;
+            },
+            set: function (value) {
+                this._order = value;
+                this.changeDetection.markForCheck();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TableHeaderComponent.prototype, "isTabable", {
+            set: function (tabable) {
+                this.elmentRef.nativeElement.tabIndex = tabable ? 0 : -1;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return TableHeaderComponent;
+    }());
+    TableHeaderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: TableHeaderComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TableHeaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: TableHeaderComponent, selector: "lx-th", inputs: { column: "column" }, outputs: { sortChange: "sortChange" }, host: { listeners: { "keydown.enter": "onSort()", "click": "onSort()" }, properties: { "class.sortable": "this.sortable" } }, ngImport: i0__namespace, template: "<span>\n  <ng-content></ng-content>\n</span>\n<i class=\"fas\" [class.fa-sort-up]=\"order === 'ASC'\" [class.fa-sort-down]=\"order === 'DESC'\" *ngIf=\"order && sortable\"></i>\n", styles: [":root{--lx-color-danger:$colorFunctionalRed;--lx-color-grey80:$colorGray80;--lx-color-grey90:$colorGray90}:host{display:table-cell;padding:8px;vertical-align:bottom;border-bottom:2px solid #e1e5eb;border-top:none;font-weight:700}:host.sortable span{color:var(--lx-anchor-fontcolor);cursor:pointer}:host.sortable span:hover{text-decoration:underline}i{margin-left:4px;cursor:pointer}"], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: TableHeaderComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'lx-th',
+                        templateUrl: './table-header.component.html',
+                        styleUrls: ['./table-header.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { column: [{
+                    type: i0.Input
+                }], sortChange: [{
+                    type: i0.Output
+                }], sortable: [{
+                    type: i0.HostBinding,
+                    args: ['class.sortable']
+                }], onSort: [{
+                    type: i0.HostListener,
+                    args: ['keydown.enter']
+                }, {
+                    type: i0.HostListener,
+                    args: ['click']
+                }] } });
+
+    // tslint:disable-next-line: directive-class-suffix
+    var TableComponent = /** @class */ (function () {
+        function TableComponent(elementRef) {
+            this.elementRef = elementRef;
+            this.isSortable = false;
+            this.sortChange = new i0.EventEmitter();
+            this.elementRef.nativeElement.classList.add('table', 'table-hover');
+        }
+        TableComponent.prototype.ngOnChanges = function (changes) {
+            var _this = this;
+            if (changes['sort'] && this.tableHeaders) {
+                this.tableHeaders.forEach(function (header) {
+                    _this.setSortValueOnHeader(header);
+                });
+            }
+            if (changes['isSortable'] && this.tableHeaders) {
+                this.tableHeaders.forEach(function (header) {
+                    header.sortable = _this.isSortable;
+                    header.isTabable = _this.isSortable;
+                });
+            }
+        };
+        TableComponent.prototype.ngAfterContentInit = function () {
+            var _this = this;
+            this.tableHeaders.forEach(function (header) {
+                header.sortable = _this.isSortable;
+                header.isTabable = _this.isSortable;
+                if (_this.sort) {
+                    _this.setSortValueOnHeader(header);
+                }
+            });
+            var sortChange$ = i6.merge.apply(void 0, __spreadArray([], __read(this.tableHeaders.map(function (header) { return header.sortChange.asObservable(); }))));
+            sortChange$.subscribe(function (change) {
+                _this.tableHeaders.forEach(function (header) {
+                    _this.setSortValueOnHeader(header);
+                });
+                _this.sortChange.emit(change);
+            });
+        };
+        TableComponent.prototype.setSortValueOnHeader = function (header) {
+            var _a, _b;
+            if (header.column !== ((_a = this.sort) === null || _a === void 0 ? void 0 : _a.key)) {
+                header.order = undefined;
+            }
+            else {
+                header.order = (_b = this.sort) === null || _b === void 0 ? void 0 : _b.order;
+            }
+        };
+        return TableComponent;
+    }());
+    TableComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: TableComponent, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    TableComponent.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.1.4", type: TableComponent, selector: "table[lx-table]", inputs: { isSortable: "isSortable", sort: "sort" }, outputs: { sortChange: "sortChange" }, queries: [{ propertyName: "tableHeaders", predicate: TableHeaderComponent, descendants: true }], usesOnChanges: true, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: TableComponent, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        // tslint:disable-next-line: directive-selector
+                        selector: 'table[lx-table]'
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }]; }, propDecorators: { isSortable: [{
+                    type: i0.Input
+                }], sort: [{
+                    type: i0.Input
+                }], sortChange: [{
+                    type: i0.Output
+                }], tableHeaders: [{
+                    type: i0.ContentChildren,
+                    args: [TableHeaderComponent, { descendants: true }]
+                }] } });
+
     /**
      * Allows to register an event handler for the "AfterViewInit" lifecycle hook.
      * This can be used to do something whenever a component enters the view. This
@@ -1477,10 +1612,12 @@
             if (!items) {
                 return [];
             }
-            if (options.caseInsensitive) {
-                return options.key ? fp.sortBy(getValueForKey(options.key), items) : items.slice().sort(sortStringCaseInsensitive());
+            if (options.order !== 'DESC') {
+                return applySorting(options, items);
+            }
+            else {
+                return applySorting(options, items).reverse();
             }
-            return options.key ? fp.sortBy(function (item) { return fp.get(options.key, item); }, items) : items.slice().sort();
         };
         return SortPipe;
     }());
@@ -1490,6 +1627,12 @@
                 type: i0.Pipe,
                 args: [{ name: 'lxSort' }]
             }] });
+    function applySorting(options, items) {
+        if (options.caseInsensitive) {
+            return options.key ? fp.sortBy(getValueForKey(options.key), items) : items.slice().sort(sortStringCaseInsensitive());
+        }
+        return options.key ? fp.sortBy(function (item) { return fp.get(options.key, item); }, items) : items.slice().sort();
+    }
     function sortStringCaseInsensitive() {
         return function (a, b) {
             if (typeof a === 'string' && typeof b === 'string') {
@@ -1716,6 +1859,8 @@
             NbspPipe,
             LxIsUuidPipe,
             SpinnerComponent,
+            TableComponent,
+            TableHeaderComponent,
             TinySpinnerComponent,
             TranslationAfterPipe,
             TranslationBeforePipe,
@@ -1744,6 +1889,8 @@
             NbspPipe,
             LxIsUuidPipe,
             SpinnerComponent,
+            TableComponent,
+            TableHeaderComponent,
             TinySpinnerComponent,
             TranslationAfterPipe,
             TranslationBeforePipe,
@@ -1779,6 +1926,8 @@
                             NbspPipe,
                             LxIsUuidPipe,
                             SpinnerComponent,
+                            TableComponent,
+                            TableHeaderComponent,
                             TinySpinnerComponent,
                             TranslationAfterPipe,
                             TranslationBeforePipe,
@@ -1811,6 +1960,8 @@
                             NbspPipe,
                             LxIsUuidPipe,
                             SpinnerComponent,
+                            TableComponent,
+                            TableHeaderComponent,
                             TinySpinnerComponent,
                             TranslationAfterPipe,
                             TranslationBeforePipe,
@@ -6324,6 +6475,8 @@
     exports.TAB = TAB;
     exports.TabComponent = TabComponent;
     exports.TabGroupComponent = TabGroupComponent;
+    exports.TableComponent = TableComponent;
+    exports.TableHeaderComponent = TableHeaderComponent;
     exports.TinySpinnerComponent = TinySpinnerComponent;
     exports.TooltipComponent = TooltipComponent;
     exports.TooltipDirective = TooltipDirective;