@seniorsistemas/angular-components 14.11.0 → 14.12.0

package/bundles/seniorsistemas-angular-components.umd.js

@@ -3859,6 +3859,191 @@
         return RowTogllerDirective;
     }(table.RowToggler));
 
+    var TableFrozenPositionDirective = /** @class */ (function () {
+        function TableFrozenPositionDirective(el, host) {
+            var _this = this;
+            this.el = el;
+            this.host = host;
+            this.sTableFrozenPosition = "left";
+            this.host.onColResize.subscribe(function () {
+                _this.handleColResize();
+            });
+            window.addEventListener("resize", this.handleWindowResize.bind(this));
+            var componentId = new Date().getTime();
+            this.resetRowHeightClassName = "resetTableRowsHeight_" + componentId;
+            var styleReset = document.createElement("style");
+            styleReset.innerHTML = "." + this.resetRowHeightClassName + " tbody > tr, ." + this.resetRowHeightClassName + " thead > tr { height: auto; }";
+            document.getElementsByTagName("head")[0].appendChild(styleReset);
+            this.fixBodyRowClassName = "fixTableBodyRowsHeight_" + componentId;
+            this.styleFixBodyRowHeight = document.createElement("style");
+            this.styleFixBodyRowHeight.innerHTML = "." + this.fixBodyRowClassName + " tbody > tr { height: auto; }";
+            document.getElementsByTagName("head")[0].appendChild(this.styleFixBodyRowHeight);
+            this.fixHeadRowClassName = "fixTableHeadRowsHeight_" + componentId;
+            this.styleFixHeadRowHeight = document.createElement("style");
+            this.styleFixHeadRowHeight.innerHTML = "." + this.fixHeadRowClassName + " thead > tr { height: auto; }";
+            document.getElementsByTagName("head")[0].appendChild(this.styleFixHeadRowHeight);
+        }
+        Object.defineProperty(TableFrozenPositionDirective.prototype, "sTableFrozenValue", {
+            set: function (_) {
+                var _this = this;
+                setTimeout(function () {
+                    _this.synchronizeRowHeight();
+                });
+            },
+            enumerable: true,
+            configurable: true
+        });
+        TableFrozenPositionDirective.prototype.ngAfterViewInit = function () {
+            if (this.sTableFrozenPosition === "left")
+                return;
+            this.applyStylesForTable();
+        };
+        TableFrozenPositionDirective.prototype.ngOnDestroy = function () {
+            window.removeEventListener("resize", this.handleWindowResize.bind(this));
+        };
+        TableFrozenPositionDirective.prototype.applyStylesForTable = function () {
+            var scrollWrapper = this.el.nativeElement.querySelector(".ui-table-scrollable-wrapper");
+            if (!scrollWrapper) {
+                console.warn("Unable to find scroll-wrapper element from table. Is the table configured with frozen template?");
+                return;
+            }
+            scrollWrapper.style.display = "flex";
+            scrollWrapper.style.flexDirection = "row";
+            var frozenTable = this.el.nativeElement.querySelector(".ui-table-frozen-view");
+            if (!frozenTable) {
+                console.warn("Unable to find frozen element from table. Is the table configured with frozen template?");
+                return;
+            }
+            frozenTable.style.order = "1";
+            frozenTable.style.borderRight = "none";
+            frozenTable.style.borderLeft = "1px solid #dddddd";
+            frozenTable.style.boxShadow = "-5px 0 5px -5px #cccccc";
+            var unfrozenTable = this.el.nativeElement.querySelector(".ui-table-unfrozen-view");
+            if (!unfrozenTable) {
+                console.warn("Unable to find unfrozen element from table. Is the table configured with frozen template?");
+                return;
+            }
+            unfrozenTable.style.position = "unset";
+        };
+        TableFrozenPositionDirective.prototype.handleWindowResize = function () {
+            this.synchronizeRowHeight();
+        };
+        TableFrozenPositionDirective.prototype.handleColResize = function () {
+            this.synchronizeRowHeight();
+        };
+        TableFrozenPositionDirective.prototype.synchronizeRowHeight = function () {
+            var tableBodyWrappers = this.el.nativeElement.getElementsByClassName("ui-table-scrollable-body");
+            var tableBodies = __spread(tableBodyWrappers).map(function (divWrapper) { return __spread(divWrapper.childNodes).find(function (p) { return p.tagName === "TABLE"; }); });
+            this.recalculateDefaultRowHeight(tableBodies);
+            this.applyMaxRowHeight(tableBodies);
+            var tableHeadWrappers = this.el.nativeElement.getElementsByClassName("ui-table-scrollable-header-box");
+            var tableHeads = __spread(tableHeadWrappers).map(function (divWrapper) { return __spread(divWrapper.childNodes).find(function (p) { return p.tagName === "TABLE"; }); });
+            this.recalculateDefaultRowHeight(tableHeads);
+            this.applyMaxRowHeight(tableHeads, true);
+        };
+        TableFrozenPositionDirective.prototype.recalculateDefaultRowHeight = function (tables) {
+            var e_1, _a;
+            try {
+                for (var tables_1 = __values(tables), tables_1_1 = tables_1.next(); !tables_1_1.done; tables_1_1 = tables_1.next()) {
+                    var table = tables_1_1.value;
+                    table.classList.remove(this.fixBodyRowClassName);
+                    table.classList.remove(this.fixHeadRowClassName);
+                    table.classList.add(this.resetRowHeightClassName);
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (tables_1_1 && !tables_1_1.done && (_a = tables_1.return)) _a.call(tables_1);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+        };
+        TableFrozenPositionDirective.prototype.applyMaxRowHeight = function (tables, isHead) {
+            var e_2, _a, e_3, _b, e_4, _c, e_5, _d;
+            if (isHead === void 0) { isHead = false; }
+            var rowSizes = [];
+            try {
+                for (var tables_2 = __values(tables), tables_2_1 = tables_2.next(); !tables_2_1.done; tables_2_1 = tables_2.next()) {
+                    var table = tables_2_1.value;
+                    try {
+                        for (var _e = (e_3 = void 0, __values(table.rows)), _f = _e.next(); !_f.done; _f = _e.next()) {
+                            var tr = _f.value;
+                            rowSizes.push(tr.getBoundingClientRect().height);
+                        }
+                    }
+                    catch (e_3_1) { e_3 = { error: e_3_1 }; }
+                    finally {
+                        try {
+                            if (_f && !_f.done && (_b = _e.return)) _b.call(_e);
+                        }
+                        finally { if (e_3) throw e_3.error; }
+                    }
+                }
+            }
+            catch (e_2_1) { e_2 = { error: e_2_1 }; }
+            finally {
+                try {
+                    if (tables_2_1 && !tables_2_1.done && (_a = tables_2.return)) _a.call(tables_2);
+                }
+                finally { if (e_2) throw e_2.error; }
+            }
+            if (!rowSizes.length)
+                return;
+            var maxHeight = Math.max.apply(Math, __spread(rowSizes));
+            if (isHead) {
+                this.styleFixHeadRowHeight.innerHTML = "." + this.fixHeadRowClassName + " thead > tr { height: " + maxHeight + "px; }";
+                try {
+                    for (var tables_3 = __values(tables), tables_3_1 = tables_3.next(); !tables_3_1.done; tables_3_1 = tables_3.next()) {
+                        var table = tables_3_1.value;
+                        table.classList.remove(this.resetRowHeightClassName);
+                        table.classList.add(this.fixHeadRowClassName);
+                    }
+                }
+                catch (e_4_1) { e_4 = { error: e_4_1 }; }
+                finally {
+                    try {
+                        if (tables_3_1 && !tables_3_1.done && (_c = tables_3.return)) _c.call(tables_3);
+                    }
+                    finally { if (e_4) throw e_4.error; }
+                }
+            }
+            else {
+                this.styleFixBodyRowHeight.innerHTML = "." + this.fixBodyRowClassName + " tbody > tr { height: " + maxHeight + "px; }";
+                try {
+                    for (var tables_4 = __values(tables), tables_4_1 = tables_4.next(); !tables_4_1.done; tables_4_1 = tables_4.next()) {
+                        var table = tables_4_1.value;
+                        table.classList.remove(this.resetRowHeightClassName);
+                        table.classList.add(this.fixBodyRowClassName);
+                    }
+                }
+                catch (e_5_1) { e_5 = { error: e_5_1 }; }
+                finally {
+                    try {
+                        if (tables_4_1 && !tables_4_1.done && (_d = tables_4.return)) _d.call(tables_4);
+                    }
+                    finally { if (e_5) throw e_5.error; }
+                }
+            }
+        };
+        TableFrozenPositionDirective.ctorParameters = function () { return [
+            { type: core.ElementRef },
+            { type: table.Table }
+        ]; };
+        __decorate([
+            core.Input()
+        ], TableFrozenPositionDirective.prototype, "sTableFrozenPosition", void 0);
+        __decorate([
+            core.Input()
+        ], TableFrozenPositionDirective.prototype, "sTableFrozenValue", null);
+        TableFrozenPositionDirective = __decorate([
+            core.Directive({
+                selector: "[sTableFrozenPosition]"
+            })
+        ], TableFrozenPositionDirective);
+        return TableFrozenPositionDirective;
+    }());
+
 
     (function (EnumColumnFieldType) {
         EnumColumnFieldType["STRING"] = "STRING";
@@ -4185,12 +4370,14 @@
                 exports: [
                     RowTogllerDirective,
                     NavigationDirective,
-                    TableColumnsComponent
+                    TableColumnsComponent,
+                    TableFrozenPositionDirective
                 ],
                 declarations: [
                     RowTogllerDirective,
                     NavigationDirective,
-                    TableColumnsComponent
+                    TableColumnsComponent,
+                    TableFrozenPositionDirective
                 ],
             })
         ], TableModule);
@@ -8881,6 +9068,7 @@
     exports.StepsComponent = StepsComponent;
     exports.StepsModule = StepsModule;
     exports.Structure = Structure;
+    exports.TableFrozenPositionDirective = TableFrozenPositionDirective;
     exports.TableHeaderCheckboxComponent = TableHeaderCheckboxComponent;
     exports.TableHeaderCheckboxModule = TableHeaderCheckboxModule;
     exports.TableModule = TableModule;