@seniorsistemas/angular-components 14.16.15 → 14.16.17

package/fesm5/seniorsistemas-angular-components.js

@@ -3805,16 +3805,14 @@ var RowTogllerDirective = /** @class */ (function (_super) {
 
 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 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];
@@ -3830,6 +3828,9 @@ var TableFrozenPositionDirective = /** @class */ (function () {
         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 (_) {
@@ -3861,6 +3862,44 @@ var TableFrozenPositionDirective = /** @class */ (function () {
         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;
@@ -3944,6 +3983,8 @@ var TableFrozenPositionDirective = /** @class */ (function () {
                 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);
                     }
                 }
@@ -4544,7 +4585,7 @@ var BooleanFieldComponent = /** @class */ (function () {
     ], BooleanFieldComponent.prototype, "formControl", void 0);
     BooleanFieldComponent = __decorate([
         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;