@seniorsistemas/angular-components 14.16.14 → 14.16.16

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

@@ -3326,8 +3326,8 @@
         LoadingStateComponent = LoadingStateComponent_1 = __decorate([
             core.Component({
                 selector: "s-loading-state",
-                template: "<div [id]=\"id\" class=\"s-loading-state-container\" [ngClass]=\"{'loading': loading, 'blocking': blocking, 'fullscreen': blockWindow}\">\n\n    <div [id]=\"id + '-loader'\" class=\"loader\">\n\n        <div [id]=\"id + '-spinner'\" class=\"spinner\">\n            <div class=\"bounce bounce-1\"></div>\n            <div class=\"bounce bounce-2\"></div>\n            <div class=\"bounce bounce-3\"></div>\n        </div>\n\n        <div [id]=\"id + '-overlay'\" class=\"overlay\"></div>\n\n    </div>\n\n    <div [id]=\"id + '-contents'\" class=\"contents\">\n        <ng-container *ngTemplateOutlet=\"contents || originalContent\"></ng-container>\n        <ng-template #originalContent>\n            <ng-content></ng-content>\n        </ng-template>\n    </div>\n\n</div>",
-                styles: [".s-loading-state-container{position:relative}.s-loading-state-container>.loader{opacity:0;position:absolute;width:100%;height:100%;transition:opacity .2s ease-out,display .2s ease-out;visibility:hidden}.s-loading-state-container.fullscreen>.loader{position:fixed;left:0;top:0}.s-loading-state-container>.loader>.overlay{opacity:.8;width:100%;height:100%;background-color:#fff;transition:opacity .2s ease-out,display .2s ease-out}.s-loading-state-container>.loader>.spinner{position:absolute;left:50%;top:calc(50% - 9px);transform:translate(-50%);text-align:center;vertical-align:middle;display:table;z-index:2}.s-loading-state-container.blocking>.loader,.s-loading-state-container.loading>.loader{visibility:visible}.s-loading-state-container.blocking>.loader,.s-loading-state-container.blocking>.loader>.overlay,.s-loading-state-container.loading>.loader,.s-loading-state-container.loading>.loader>.overlay{z-index:1;cursor:wait}.s-loading-state-container.blocking>.contents,.s-loading-state-container.loading>.contents{z-index:0!important}.s-loading-state-container.blocking.loading>.loader{opacity:1}.s-loading-state-container.loading>.loader>.spinner>.bounce{background-color:#333;width:10px;height:10px;display:inline-block;border-radius:100%;animation:1.2s ease-out infinite bounce}.s-loading-state-container.loading>.loader>.spinner>.bounce+.bounce{margin-left:15px}.s-loading-state-container.loading>.loader>.spinner>.bounce.bounce-1{animation-delay:0s}.s-loading-state-container.loading>.loader>.spinner>.bounce.bounce-2{animation-delay:.1s}.s-loading-state-container.loading>.loader>.spinner>.bounce.bounce-3{animation-delay:.2s}@keyframes bounce{100%,80%{transform:scale(1)}90%{transform:scale(1.8)}}::ng-deep .s-loading-state-container.loading.blocking s-loading-state .s-loading-state-container>.loader{opacity:0;visibility:hidden}::ng-deep .s-loading-state-container.loading.blocking s-loading-state .s-loading-state-container>.contents{z-index:0!important}"]
+                template: "<div\n    [id]=\"id\"\n    class=\"s-loading-state-container\"\n    [ngClass]=\"{'loading': loading, 'blocking': blocking, 'fullscreen': blockWindow}\">\n    <div\n        [id]=\"id + '-loader'\"\n        class=\"loader\">\n        <div\n            [id]=\"id + '-spinner'\"\n            class=\"spinner\">\n            <div class=\"bounce bounce-1\"></div>\n            <div class=\"bounce bounce-2\"></div>\n            <div class=\"bounce bounce-3\"></div>\n        </div>\n        <div\n            [id]=\"id + '-overlay'\"\n            class=\"overlay\">\n        </div>\n    </div>\n    <div\n        [id]=\"id + '-contents'\"\n        class=\"contents\">\n        <ng-container *ngTemplateOutlet=\"contents || originalContent\"></ng-container>\n        <ng-template #originalContent>\n            <ng-content></ng-content>\n        </ng-template>\n    </div>\n</div>",
+                styles: [".s-loading-state-container{position:relative}.s-loading-state-container>.loader{height:100%;opacity:0;position:absolute;transition:opacity .2s ease-out,display .2s ease-out;visibility:hidden;width:100%}.s-loading-state-container>.loader>.overlay{background-color:#fff;height:100%;opacity:.8;transition:opacity .2s ease-out,display .2s ease-out;width:100%}.s-loading-state-container>.loader>.spinner{display:table;left:50%;position:absolute;text-align:center;top:calc(50% - 9px);transform:translate(-50%);vertical-align:middle;z-index:2}.s-loading-state-container.blocking>.loader,.s-loading-state-container.loading>.loader{visibility:visible}.s-loading-state-container.blocking>.loader,.s-loading-state-container.blocking>.loader>.overlay,.s-loading-state-container.loading>.loader,.s-loading-state-container.loading>.loader>.overlay{cursor:wait;z-index:1}.s-loading-state-container.blocking>.contents,.s-loading-state-container.loading>.contents{z-index:0!important}.s-loading-state-container.loading>.loader>.spinner>.bounce{animation:1.2s ease-out infinite bounce;background-color:#333;border-radius:100%;display:inline-block;height:10px;width:10px}.s-loading-state-container.loading>.loader>.spinner>.bounce+.bounce{margin-left:15px}.s-loading-state-container.loading>.loader>.spinner>.bounce.bounce-1{animation-delay:0s}.s-loading-state-container.loading>.loader>.spinner>.bounce.bounce-2{animation-delay:.1s}.s-loading-state-container.loading>.loader>.spinner>.bounce.bounce-3{animation-delay:.2s}.s-loading-state-container.blocking.loading>.loader{opacity:1}.s-loading-state-container.fullscreen>.loader{left:0;position:fixed;top:0;z-index:1005}@keyframes bounce{100%,80%{transform:scale(1)}90%{transform:scale(1.8)}}::ng-deep .s-loading-state-container.loading.blocking s-loading-state .s-loading-state-container>.loader{opacity:0;visibility:hidden}::ng-deep .s-loading-state-container.loading.blocking s-loading-state .s-loading-state-container>.contents{z-index:0!important}"]
             })
         ], LoadingStateComponent);
         return LoadingStateComponent;
@@ -3978,16 +3978,14 @@
 
     var TableFrozenPositionDirective = /** @class */ (function () {
         function TableFrozenPositionDirective(el, host) {
-            var _this = this;
             this.el = el;
             this.host = host;
             this.sTableFrozenPosition = "left";
             this.isTableVisible = false;
             this.onColumnsChanged = new core.EventEmitter();
             this.table = host;
-            this.host.onColResize.subscribe(function () {
-                _this.handleColResize();
-            });
+            this.table.styleClass = (this.table.styleClass || "") + " s-table-frozen-position";
+            this.setUpTableEvents();
             window.addEventListener("resize", this.handleWindowResize.bind(this));
             var componentId = new Date().getTime();
             var htmlHead = document.getElementsByTagName("head")[0];
@@ -4003,6 +4001,9 @@
             this.styleFixHeadRowHeight = document.createElement("style");
             this.styleFixHeadRowHeight.innerHTML = "." + this.fixHeadRowClassName + " thead > tr { height: auto; }";
             htmlHead.appendChild(this.styleFixHeadRowHeight);
+            var expandFrozenStyle = document.createElement("style");
+            expandFrozenStyle.innerHTML = ".s-table-frozen-position .ui-table-frozen-view .sds-expanded-row > td { visibility: hidden; }";
+            htmlHead.appendChild(expandFrozenStyle);
         }
         Object.defineProperty(TableFrozenPositionDirective.prototype, "sTableFrozenValue", {
             set: function (_) {
@@ -4034,6 +4035,44 @@
             if (this.tableHeadObservable) {
                 this.tableHeadObservable.disconnect();
             }
+            if (this.rowExpandedObserver) {
+                this.rowExpandedObserver.disconnect();
+            }
+        };
+        TableFrozenPositionDirective.prototype.setUpTableEvents = function () {
+            var _this = this;
+            this.table.onColResize.subscribe(function () {
+                _this.handleColResize();
+            });
+            this.table.onRowExpand.subscribe(function () {
+                if (_this.rowExpandedObserver) {
+                    _this.rowExpandedObserver.disconnect();
+                }
+                // The version of Angular/Typescript does not recognize the object ResizeObserver and breaks build
+                _this.rowExpandedObserver = new window.ResizeObserver(function () {
+                    var frozenTDsToAdjust = _this.el.nativeElement.querySelectorAll(".ui-table-frozen-view .sds-expanded-row > td");
+                    var unFrozenTDs = _this.el.nativeElement.querySelectorAll(".ui-table-unfrozen-view .sds-expanded-row > td");
+                    frozenTDsToAdjust.forEach(function (frozenTd, index) {
+                        var unfrozenTD = unFrozenTDs[index];
+                        var unfrozenHeight = unfrozenTD.getBoundingClientRect().height;
+                        var frozenHeight = frozenTd.getBoundingClientRect().height;
+                        if (Math.abs(unfrozenHeight - frozenHeight) > 1) {
+                            frozenTd.style.height = unfrozenHeight + "px";
+                        }
+                    });
+                });
+                setTimeout(function () {
+                    var tdsToAdjust = _this.el.nativeElement.querySelectorAll(".ui-table-frozen-view .sds-expanded-row > td");
+                    var originalsTds = _this.el.nativeElement.querySelectorAll(".ui-table-unfrozen-view .sds-expanded-row > td");
+                    tdsToAdjust.forEach(function (td, index) {
+                        var originalTd = originalsTds[index];
+                        var height = originalTd.getBoundingClientRect().height;
+                        td.innerHTML = "<div style=\"height: " + height + "px\"></div>";
+                        td.style.padding = "0px";
+                        _this.rowExpandedObserver.observe(originalTd);
+                    });
+                });
+            });
         };
         TableFrozenPositionDirective.prototype.setUpColumnMonitoring = function () {
             var _this = this;
@@ -4117,6 +4156,8 @@
                     try {
                         for (var _e = (e_3 = void 0, __values(table.rows)), _f = _e.next(); !_f.done; _f = _e.next()) {
                             var tr = _f.value;
+                            if (tr.classList.contains("sds-expanded-row"))
+                                continue;
                             rowSizes.push(tr.getBoundingClientRect().height);
                         }
                     }