@seniorsistemas/angular-components 14.16.15 → 14.16.17

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

@@ -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);
                         }
                     }
@@ -4717,7 +4758,7 @@
         ], BooleanFieldComponent.prototype, "formControl", void 0);
         BooleanFieldComponent = __decorate([
             core.Component({
-                template: "<ng-container *ngIf=\"field.verticalAlignment;else horizontalAlignment\">\n    <div class=\"ui-g\">\n        <div class=\"ui-g-12\">\n            <p-radioButton\n                [name]=\"field.name\"\n                [value]=\"true\"\n                [label]=\"field.optionsLabel.true\"\n                [formControl]=\"formControl\"\n                [inputId]=\"(field.id || field.name) + '-1'\"\n                (onClick)=\"field.onClick ? field.onClick($event) : null\"\n                (onFocus)=\"field.onFocus ? field.onFocus($event) : null\"\n                (onBlur)=\"field.onBlur ? field.onBlur($event) : null\">\n            </p-radioButton>\n        </div>\n        <div class=\"ui-g-12\">\n            <p-radioButton\n                [name]=\"field.name\"\n                [value]=\"false\"\n                [label]=\"field.optionsLabel.false\"\n                [formControl]=\"formControl\"\n                [inputId]=\"(field.id || field.name) + '-2'\"\n                (onClick)=\"field.onClick ? field.onClick($event) : null\"\n                (onFocus)=\"field.onFocus ? field.onFocus($event) : null\"\n                (onBlur)=\"field.onBlur ? field.onBlur($event) : null\">\n            </p-radioButton>\n        </div>\n        <div\n            *ngIf=\"!field.showClear && !field.required()\"\n            class=\"ui-g-12\">\n            <p-radioButton                \n                [name]=\"field.name\"\n                [value]=\"null\"\n                [label]=\"field.optionsLabel.empty\"\n                [formControl]=\"formControl\"\n                [inputId]=\"(field.id || field.name) + '-3'\"\n                (onClick)=\"field.onClick ? field.onClick($event) : null\"\n                (onFocus)=\"field.onFocus ? field.onFocus($event) : null\"\n                (onBlur)=\"field.onBlur ? field.onBlur($event) : null\">\n            </p-radioButton>            \n        </div>\n        <div>\n            <s-button\n                *ngIf=\"field.showClear && !field.required()\"\n                [label]=\"field.optionsLabel.clear || 'Clear selection'\"\n                (onClick)=\"onClear()\"\n                priority=\"link\">\n            </s-button>\n        </div>\n\n    </div>\n</ng-container>\n\n<ng-template #horizontalAlignment>\n    <div class=\"ui-g\">\n        <p-radioButton\n            [name]=\"field.name\"\n            [value]=\"true\"\n            [label]=\"field.optionsLabel.true\"\n            [formControl]=\"formControl\"\n            [inputId]=\"(field.id || field.name) + '-1'\"\n            (onClick)=\"field.onClick ? field.onClick($event) : null\"\n            (onFocus)=\"field.onFocus ? field.onFocus($event) : null\"\n            (onBlur)=\"field.onBlur ? field.onBlur($event) : null\">\n        </p-radioButton>\n    \n        <p-radioButton\n            [name]=\"field.name\"\n            [value]=\"false\"\n            [label]=\"field.optionsLabel.false\"\n            [formControl]=\"formControl\"\n            [inputId]=\"(field.id || field.name) + '-2'\"\n            (onClick)=\"field.onClick ? field.onClick($event) : null\"\n            (onFocus)=\"field.onFocus ? field.onFocus($event) : null\"\n            (onBlur)=\"field.onBlur ? field.onBlur($event) : null\">\n        </p-radioButton>\n\n        <p-radioButton\n            *ngIf=\"!field.showClear && !field.required()\"\n            [name]=\"field.name\"\n            [value]=\"null\"\n            [label]=\"field.optionsLabel.empty\"\n            [formControl]=\"formControl\"\n            [inputId]=\"(field.id || field.name) + '-3'\"\n            (onClick)=\"field.onClick ? field.onClick($event) : null\"\n            (onFocus)=\"field.onFocus ? field.onFocus($event) : null\"\n            (onBlur)=\"field.onBlur ? field.onBlur($event) : null\">\n        </p-radioButton>\n\n        <s-button\n            *ngIf=\"field.showClear && !field.required()\"\n            style=\"margin-left: 40px;\"\n            [label]=\"field.optionsLabel.clear || 'Clear selection'\"\n            (onClick)=\"onClear()\"\n            priority=\"link\">\n        </s-button>\n    </div>\n</ng-template>\n"
+                template: "<ng-container *ngIf=\"field.verticalAlignment;else horizontalAlignment\">\n    <div class=\"ui-g\">\n        <div class=\"ui-g-12\">\n            <p-radioButton\n                [name]=\"field.name\"\n                [value]=\"true\"\n                [label]=\"field.optionsLabel.true\"\n                [formControl]=\"formControl\"\n                [inputId]=\"(field.id || field.name) + '-1'\"\n                (onClick)=\"field.onClick ? field.onClick($event) : null\"\n                (onFocus)=\"field.onFocus ? field.onFocus($event) : null\"\n                (onBlur)=\"field.onBlur ? field.onBlur($event) : null\">\n            </p-radioButton>\n        </div>\n        <div class=\"ui-g-12\">\n            <p-radioButton\n                [name]=\"field.name\"\n                [value]=\"false\"\n                [label]=\"field.optionsLabel.false\"\n                [formControl]=\"formControl\"\n                [inputId]=\"(field.id || field.name) + '-2'\"\n                (onClick)=\"field.onClick ? field.onClick($event) : null\"\n                (onFocus)=\"field.onFocus ? field.onFocus($event) : null\"\n                (onBlur)=\"field.onBlur ? field.onBlur($event) : null\">\n            </p-radioButton>\n        </div>\n        <div\n            *ngIf=\"!field.showClear && !field.required()\"\n            class=\"ui-g-12\">\n            <p-radioButton                \n                [name]=\"field.name\"\n                [value]=\"null\"\n                [label]=\"field.optionsLabel.empty\"\n                [formControl]=\"formControl\"\n                [inputId]=\"(field.id || field.name) + '-3'\"\n                (onClick)=\"field.onClick ? field.onClick($event) : null\"\n                (onFocus)=\"field.onFocus ? field.onFocus($event) : null\"\n                (onBlur)=\"field.onBlur ? field.onBlur($event) : null\">\n            </p-radioButton>            \n        </div>\n        <div>\n            <s-button\n                *ngIf=\"field.showClear && !field.required() && !formControl.disabled\"\n                [label]=\"field.optionsLabel.clear || 'Clear selection'\"\n                (onClick)=\"onClear()\"\n                priority=\"link\">\n            </s-button>\n        </div>\n\n    </div>\n</ng-container>\n\n<ng-template #horizontalAlignment>\n    <div class=\"ui-g\">\n        <p-radioButton\n            [name]=\"field.name\"\n            [value]=\"true\"\n            [label]=\"field.optionsLabel.true\"\n            [formControl]=\"formControl\"\n            [inputId]=\"(field.id || field.name) + '-1'\"\n            (onClick)=\"field.onClick ? field.onClick($event) : null\"\n            (onFocus)=\"field.onFocus ? field.onFocus($event) : null\"\n            (onBlur)=\"field.onBlur ? field.onBlur($event) : null\">\n        </p-radioButton>\n    \n        <p-radioButton\n            [name]=\"field.name\"\n            [value]=\"false\"\n            [label]=\"field.optionsLabel.false\"\n            [formControl]=\"formControl\"\n            [inputId]=\"(field.id || field.name) + '-2'\"\n            (onClick)=\"field.onClick ? field.onClick($event) : null\"\n            (onFocus)=\"field.onFocus ? field.onFocus($event) : null\"\n            (onBlur)=\"field.onBlur ? field.onBlur($event) : null\">\n        </p-radioButton>\n\n        <p-radioButton\n            *ngIf=\"!field.showClear && !field.required()\"\n            [name]=\"field.name\"\n            [value]=\"null\"\n            [label]=\"field.optionsLabel.empty\"\n            [formControl]=\"formControl\"\n            [inputId]=\"(field.id || field.name) + '-3'\"\n            (onClick)=\"field.onClick ? field.onClick($event) : null\"\n            (onFocus)=\"field.onFocus ? field.onFocus($event) : null\"\n            (onBlur)=\"field.onBlur ? field.onBlur($event) : null\">\n        </p-radioButton>\n\n        <s-button\n            *ngIf=\"field.showClear && !field.required() && !formControl.disabled\"\n            style=\"margin-left: 40px;\"\n            [label]=\"field.optionsLabel.clear || 'Clear selection'\"\n            (onClick)=\"onClear()\"\n            priority=\"link\">\n        </s-button>\n    </div>\n</ng-template>\n"
             })
         ], BooleanFieldComponent);
         return BooleanFieldComponent;