@seniorsistemas/angular-components 14.14.4 → 14.15.0

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

@@ -7341,6 +7341,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++;
@@ -9316,6 +9410,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;