@seniorsistemas/angular-components 14.14.3 → 14.15.1

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

@@ -1278,12 +1278,11 @@
 
     var NumberLocaleOptions = /** @class */ (function () {
         function NumberLocaleOptions(config) {
-            var _this = this;
             if (config === void 0) { config = {}; }
             this.thousandsSeparator = ".";
             this.decimalSeparator = ",";
             this.currencySymbol = "R$";
-            Object.keys(config).forEach(function (key) { return (_this[key] = config[key] || _this[key]); });
+            Object.assign(this, config);
         }
         return NumberLocaleOptions;
     }());
@@ -3947,23 +3946,25 @@
             this.el = el;
             this.host = host;
             this.sTableFrozenPosition = "left";
+            this.onColumnsChanged = new core.EventEmitter();
             this.host.onColResize.subscribe(function () {
                 _this.handleColResize();
             });
             window.addEventListener("resize", this.handleWindowResize.bind(this));
             var componentId = new Date().getTime();
+            var htmlHead = document.getElementsByTagName("head")[0];
             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);
+            htmlHead.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);
+            htmlHead.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);
+            htmlHead.appendChild(this.styleFixHeadRowHeight);
         }
         Object.defineProperty(TableFrozenPositionDirective.prototype, "sTableFrozenValue", {
             set: function (_) {
@@ -3979,9 +3980,27 @@
             if (this.sTableFrozenPosition === "left")
                 return;
             this.applyStylesForTable();
+            this.setUpColumnMonitoring();
         };
         TableFrozenPositionDirective.prototype.ngOnDestroy = function () {
             window.removeEventListener("resize", this.handleWindowResize.bind(this));
+            if (this.tableHeadObservable) {
+                this.tableHeadObservable.disconnect();
+            }
+        };
+        TableFrozenPositionDirective.prototype.setUpColumnMonitoring = function () {
+            var _this = this;
+            this.tableHeadObservable = new MutationObserver(function () {
+                _this.synchronizeRowHeight();
+                _this.onColumnsChanged.emit(null);
+            });
+            var tableHeads = __spread(this.el.nativeElement.getElementsByTagName("thead"));
+            tableHeads.forEach(function (tableHead) {
+                _this.tableHeadObservable.observe(tableHead, {
+                    subtree: true,
+                    childList: true
+                });
+            });
         };
         TableFrozenPositionDirective.prototype.applyStylesForTable = function () {
             var scrollWrapper = this.el.nativeElement.querySelector(".ui-table-scrollable-wrapper");
@@ -7342,6 +7361,100 @@
         return StepsModule;
     }());
 
+    var TimelineComponent = /** @class */ (function () {
+        function TimelineComponent() {
+            this.id = "s-timeline-" + TimelineComponent_1.nextId++;
+            this.activeIndex = 0;
+        }
+        TimelineComponent_1 = TimelineComponent;
+        TimelineComponent.prototype.barAnimation = function (index, activeIndex) {
+            var visited = index < activeIndex;
+            var activated = index === activeIndex;
+            return visited || activated;
+        };
+        TimelineComponent.prototype.afterBarAnimation = function (index, activeIndex) {
+            var visited = index < activeIndex;
+            var activated = index === activeIndex - 1;
+            return visited || activated;
+        };
+        Object.defineProperty(TimelineComponent.prototype, "visibledStep", {
+            get: function () {
+                return this.steps.filter(function (step) { return !step.hidden; });
+            },
+            enumerable: true,
+            configurable: true
+        });
+        var TimelineComponent_1;
+        TimelineComponent.nextId = 0;
+        __decorate([
+            core.Input()
+        ], TimelineComponent.prototype, "id", void 0);
+        __decorate([
+            core.Input()
+        ], TimelineComponent.prototype, "steps", void 0);
+        __decorate([
+            core.Input()
+        ], TimelineComponent.prototype, "activeIndex", void 0);
+        TimelineComponent = TimelineComponent_1 = __decorate([
+            core.Component({
+                selector: "s-timeline",
+                template: "<div [id]=\"id\" class=\"s-timeline-container\">\n    <ng-container *ngFor=\"let step of visibledStep; let i = index; let isFirst = first; let isLast = last\">\n        <div *ngIf=\"!isFirst\" class=\"s-timeline-progress-bar\"\n            [@activeDesative]=\"barAnimation(i, activeIndex) ? 'active': 'desactive'\" [ngClass]=\"{\n            's-timeline-step-completed': (i < activeIndex),\n            's-timeline-step-active': (i === activeIndex)\n        }\"></div>\n        <div [id]=\"id + '-step-' + (step.id || i)\" class=\"s-timeline-step-header\" role=\"tab\"\n            tabindex=\"0\" [attr.aria-label]=\"step.ariaLabel || null\" [attr.aria-controls]=\"step.ariaControls\"\n            [attr.aria-labelledby]=\"!step.ariaLabel ? 'step-label-' + i : null\" [attr.aria-posinset]=\"i + 1\"\n            [attr.aria-setsize]=\"visibledStep.length\" [attr.aria-selected]=\"activeIndex == i\" [ngClass]=\"{\n            's-timeline-step-completed': (i < activeIndex),\n            's-timeline-step-active': (i === activeIndex)\n        }\">\n            <div *ngIf=\"!isFirst\"\n                [@beforeActiveDesative]=\"barAnimation(i, activeIndex) ? 'active': 'desactive'\"\n                class=\"s-timeline-progress-bar-before\" [ngClass]=\"{\n                's-timeline-step-completed': (i < activeIndex),\n                's-timeline-step-active': (i === activeIndex)\n            }\"></div>\n            <div *ngIf=\"!isLast\"\n                [@afterActiveDesative]=\"afterBarAnimation(i, activeIndex) ? 'active': 'desactive'\"\n                class=\"s-timeline-progress-bar-after\" [ngClass]=\"{\n                's-timeline-step-completed': ((i + 1) < activeIndex),\n                's-timeline-step-active': (i === (activeIndex - 1))\n            }\"></div>\n            <div class=\"s-timeline-index\">\n                <div class=\"s-timeline-index-content\">\n                    <span class=\"fas\" [ngClass]=\"step.stepIcon\" aria-hidden=\"true\" [attr.aria-label]=\"i + 1\"></span>\n                </div>\n            </div>\n            <div [id]=\"'step-label-' + i\" class=\"s-timeline-label\">\n                <span>{{step.label}}</span>\n            </div>\n            <div [id]=\"'step-help-label-' + i\" class=\"s-timeline-help-label\">\n                <span>{{step.helpLabel}}</span>\n            </div>\n        </div>\n    </ng-container>\n</div>\n",
+                host: {
+                    "aria-orientation": "horizontal",
+                    role: "tablist",
+                    "tab-index": "0",
+                },
+                animations: [
+                    animations.trigger("beforeActiveDesative", [
+                        animations.state("active", animations.style({
+                            "background-position": "left bottom",
+                        })),
+                        animations.state("desactive", animations.style({
+                            "background-position": "right bottom",
+                        })),
+                        animations.transition("active => desactive", [animations.animate("50ms 100ms linear")]),
+                        animations.transition("desactive => active", [animations.animate("50ms 250ms linear")]),
+                    ]),
+                    animations.trigger("activeDesative", [
+                        animations.state("active", animations.style({
+                            "background-position": "left bottom",
+                        })),
+                        animations.state("desactive", animations.style({
+                            "background-position": "right bottom",
+                        })),
+                        animations.transition("active => desactive", [animations.animate("100ms 150ms linear")]),
+                        animations.transition("desactive => active", [animations.animate("100ms 150ms linear")]),
+                    ]),
+                    animations.trigger("afterActiveDesative", [
+                        animations.state("active", animations.style({
+                            "background-position": "left bottom",
+                        })),
+                        animations.state("desactive", animations.style({
+                            "background-position": "right bottom",
+                        })),
+                        animations.transition("active => desactive", [animations.animate("50ms 250ms linear")]),
+                        animations.transition("desactive => active", [animations.animate("50ms 100ms linear")]),
+                    ]),
+                ],
+                styles: ["@keyframes scale-up-center{0%{transform:scale(.5)}100%{transform:scale(1)}}.s-timeline-container{display:-ms-flexbox;display:flex;white-space:nowrap;-ms-flex-align:start;align-items:flex-start;overflow:hidden;padding:15px 10px}.s-timeline-step-header{box-sizing:border-box;-ms-flex-direction:column;flex-direction:column;height:auto;position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-height:72px;max-height:98px;min-width:60px;width:100%}.s-timeline-step-header .s-timeline-help-label,.s-timeline-step-header .s-timeline-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:break-all;color:#999;font-size:14px;font-weight:400;padding-top:5px}.s-timeline-step-header .s-timeline-progress-bar-before{margin:0;position:absolute;top:20px;-ms-flex:auto;flex:auto;height:3px;overflow:hidden;width:calc(50% - 20px);background-color:#697882;background-image:linear-gradient(to right,#0c9348 50%,#697882 50%);background-position:right bottom;background-size:300% 100%;left:-10px}.s-timeline-step-header .s-timeline-progress-bar-before.s-timeline-step-active,.s-timeline-step-header .s-timeline-progress-bar-before.s-timeline-step-completed{background-position:left bottom}.s-timeline-step-header .s-timeline-progress-bar-after{margin:0;position:absolute;top:20px;-ms-flex:auto;flex:auto;height:3px;overflow:hidden;width:calc(50% - 20px);background-color:#697882;background-image:linear-gradient(to right,#0c9348 50%,#697882 50%);background-position:right bottom;background-size:300% 100%;right:-10px}.s-timeline-step-header .s-timeline-progress-bar-after.s-timeline-step-active,.s-timeline-step-header .s-timeline-progress-bar-after.s-timeline-step-completed{background-position:left bottom}.s-timeline-progress-bar{margin:0;position:relative;top:20px;-ms-flex:auto;flex:auto;height:3px;overflow:hidden;width:100%;background-color:#697882;background-image:linear-gradient(to right,#0c9348 50%,#697882 50%);background-position:right bottom;background-size:300% 100%}.s-timeline-index{background-color:#697882;border:3px solid #697882;border-radius:50%;color:#fff;display:inline-block;font-weight:700;position:relative;transition:background-color .2s ease-out;height:46px;width:46px;-ms-flex:none;flex:none}.s-timeline-index .s-timeline-index-content{line-height:18px;font-size:18px;padding-top:8.5px;text-align:center;position:relative}.s-timeline-step-active .s-timeline-index,.s-timeline-step-completed .s-timeline-index{border-color:#0c9348;animation:.1s ease-out alternate scale-up-center;background-color:#0c9348}.s-timeline-step-active.s-timeline-progress-bar,.s-timeline-step-completed.s-timeline-progress-bar{background-position:left bottom}.s-timeline-step-active .s-timeline-label,.s-timeline-step-completed .s-timeline-label{color:#333;font-weight:700}@media (max-width:767px){.s-timeline-help-label,.s-timeline-label{display:none}}"]
+            })
+        ], TimelineComponent);
+        return TimelineComponent;
+    }());
+
+    var TimelineModule = /** @class */ (function () {
+        function TimelineModule() {
+        }
+        TimelineModule = __decorate([
+            core.NgModule({
+                imports: [common.CommonModule, tooltip.TooltipModule],
+                declarations: [TimelineComponent],
+                exports: [TimelineComponent],
+            })
+        ], TimelineModule);
+        return TimelineModule;
+    }());
+
     var TileComponent = /** @class */ (function () {
         function TileComponent() {
             this.id = "s-tile-" + TileComponent_1.nextId++;
@@ -9317,6 +9430,8 @@
     exports.ThumbnailModule = ThumbnailModule;
     exports.TileComponent = TileComponent;
     exports.TileModule = TileModule;
+    exports.TimelineComponent = TimelineComponent;
+    exports.TimelineModule = TimelineModule;
     exports.TokenListComponent = TokenListComponent;
     exports.TokenListModule = TokenListModule;
     exports.ɵa = LocalizedCurrencyImpurePipe;