@seniorsistemas/angular-components 14.14.4 → 14.15.0

package/fesm5/seniorsistemas-angular-components.js

@@ -7167,6 +7167,100 @@ var StepsModule = /** @class */ (function () {
     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([
+        Input()
+    ], TimelineComponent.prototype, "id", void 0);
+    __decorate([
+        Input()
+    ], TimelineComponent.prototype, "steps", void 0);
+    __decorate([
+        Input()
+    ], TimelineComponent.prototype, "activeIndex", void 0);
+    TimelineComponent = TimelineComponent_1 = __decorate([
+        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: [
+                trigger("beforeActiveDesative", [
+                    state("active", style$7({
+                        "background-position": "left bottom",
+                    })),
+                    state("desactive", style$7({
+                        "background-position": "right bottom",
+                    })),
+                    transition("active => desactive", [animate("50ms 100ms linear")]),
+                    transition("desactive => active", [animate("50ms 250ms linear")]),
+                ]),
+                trigger("activeDesative", [
+                    state("active", style$7({
+                        "background-position": "left bottom",
+                    })),
+                    state("desactive", style$7({
+                        "background-position": "right bottom",
+                    })),
+                    transition("active => desactive", [animate("100ms 150ms linear")]),
+                    transition("desactive => active", [animate("100ms 150ms linear")]),
+                ]),
+                trigger("afterActiveDesative", [
+                    state("active", style$7({
+                        "background-position": "left bottom",
+                    })),
+                    state("desactive", style$7({
+                        "background-position": "right bottom",
+                    })),
+                    transition("active => desactive", [animate("50ms 250ms linear")]),
+                    transition("desactive => active", [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([
+        NgModule({
+            imports: [CommonModule, TooltipModule],
+            declarations: [TimelineComponent],
+            exports: [TimelineComponent],
+        })
+    ], TimelineModule);
+    return TimelineModule;
+}());
+
 var TileComponent = /** @class */ (function () {
     function TileComponent() {
         this.id = "s-tile-" + TileComponent_1.nextId++;
@@ -9036,5 +9130,5 @@ var CodeEditorModule = /** @class */ (function () {
  * Generated bundle index. Do not edit.
  */
 
-export { AngularComponentsModule, AutocompleteField, BaseFieldComponent, BignumberField, BignumberInputDirective, BignumberInputModule, BooleanField, BooleanOptionsLabel, BreadcrumbComponent, BreadcrumbModule, Breakpoints, ButtonComponent, ButtonModule, ButtonPriority, ButtonSize, CalendarField, CalendarLocaleOptions, CalendarMaskDirective, CalendarMaskModule, ChipsField, CodeEditorModule, CollapseLinkComponent, CollapseLinkModule, ControlErrorsComponent, ControlErrorsModule, CurrencyField, CustomFieldsComponent, CustomFieldsModule, CustomFieldsService, DEFAULT_CALENDAR_LOCALE_OPTIONS, DEFAULT_LOCALE_OPTIONS, DEFAULT_NUMBER_LOCALE_OPTIONS, DoubleClickDirective, DynamicConfig, DynamicFormComponent, DynamicFormModule, DynamicType, EditableOverlayDirective, EditableOverlayModule, EmptyStateComponent, EmptyStateModule, EnumBadgeColors, EnumColumnFieldType, ExportUtils, Field, FieldType, Fieldset, FileUploadComponent, FileUploadModule, FormField, GlobalSearchComponent, GlobalSearchDropdownItemComponent, GlobalSearchModule, GlobalSearchSizeEnum, HostProjectConfigsInjectionToken, ImageCropperComponent, ImageCropperModule, ImageCropperService, InfoSignDirective, InfoSignModule, Languages, LoadingStateComponent, LoadingStateDirective, LoadingStateModule, LocaleModule, LocaleOptions, LocaleService, LocalizedCurrencyPipe, LocalizedCurrencyPipeOptions, LocalizedDateImpurePipe, LocalizedDatePipe, LocalizedNumberInputDirective, LocalizedNumberInputModule, LocalizedNumberPipe, LocalizedTimeImpurePipe, LocalizedTimePipe, LongPressDirective, LookupComponent, LookupField, MaskFormatterModule, MaskFormatterPipe, MouseEventsModule, NavigationDirective, NumberAlignmentOption, NumberField, NumberInputDirective, NumberInputModule, NumberLocaleOptions, ObjectCardComponent, ObjectCardFieldComponent, ObjectCardMainComponent, ObjectCardModule, Option, ProductHeaderComponent, ProductHeaderModule, RadioButtonField, RationButtonOption, RowTogllerDirective, Section, SelectField, SelectOption, SidebarComponent, SidebarModule, StatsCardComponent, StatsCardModule, StepState, StepsComponent, StepsModule, Structure, TableFrozenPositionDirective, TableHeaderCheckboxComponent, TableHeaderCheckboxModule, TableModule, TaxCalculationLanguageConfigs, TextAreaField, TextField, Themes, ThumbnailComponent, ThumbnailModule, ThumbnailSize, TileComponent, TileModule, TokenListComponent, TokenListModule, ValidateErrors, LocalizedCurrencyImpurePipe as ɵa, LocalizedBignumberPipe as ɵb, DecimalField as ɵba, StructureModule as ɵbb, HeaderComponent as ɵbc, FooterComponent as ɵbd, NumberLocaleOptions as ɵbe, ThumbnailService as ɵbf, InfiniteScrollModule as ɵbg, InfiniteScrollDirective as ɵbh, CustomTranslationsModule as ɵbi, CodeEditorComponent as ɵbj, CoreFacade as ɵbk, CodeMirror6Core as ɵbl, LocalizedBignumberImpurePipe as ɵc, EmptyStateGoBackComponent as ɵd, TableColumnsComponent as ɵe, TablePagingComponent as ɵf, InfoSignComponent as ɵg, AutocompleteFieldComponent as ɵh, BooleanFieldComponent as ɵi, CalendarFieldComponent as ɵj, ChipsFieldComponent as ɵk, CurrencyFieldComponent as ɵl, DynamicFieldComponent as ɵm, DynamicFormDirective as ɵn, FieldsetComponent as ɵo, FileUploadComponent$1 as ɵp, LookupFieldComponent as ɵq, NumberFieldComponent as ɵr, BignumberFieldComponent as ɵs, RadioButtonComponent as ɵt, RowComponent as ɵu, SectionComponent as ɵv, SelectFieldComponent as ɵw, TextAreaFieldComponent as ɵx, TextFieldComponent as ɵy };
+export { AngularComponentsModule, AutocompleteField, BaseFieldComponent, BignumberField, BignumberInputDirective, BignumberInputModule, BooleanField, BooleanOptionsLabel, BreadcrumbComponent, BreadcrumbModule, Breakpoints, ButtonComponent, ButtonModule, ButtonPriority, ButtonSize, CalendarField, CalendarLocaleOptions, CalendarMaskDirective, CalendarMaskModule, ChipsField, CodeEditorModule, CollapseLinkComponent, CollapseLinkModule, ControlErrorsComponent, ControlErrorsModule, CurrencyField, CustomFieldsComponent, CustomFieldsModule, CustomFieldsService, DEFAULT_CALENDAR_LOCALE_OPTIONS, DEFAULT_LOCALE_OPTIONS, DEFAULT_NUMBER_LOCALE_OPTIONS, DoubleClickDirective, DynamicConfig, DynamicFormComponent, DynamicFormModule, DynamicType, EditableOverlayDirective, EditableOverlayModule, EmptyStateComponent, EmptyStateModule, EnumBadgeColors, EnumColumnFieldType, ExportUtils, Field, FieldType, Fieldset, FileUploadComponent, FileUploadModule, FormField, GlobalSearchComponent, GlobalSearchDropdownItemComponent, GlobalSearchModule, GlobalSearchSizeEnum, HostProjectConfigsInjectionToken, ImageCropperComponent, ImageCropperModule, ImageCropperService, InfoSignDirective, InfoSignModule, Languages, LoadingStateComponent, LoadingStateDirective, LoadingStateModule, LocaleModule, LocaleOptions, LocaleService, LocalizedCurrencyPipe, LocalizedCurrencyPipeOptions, LocalizedDateImpurePipe, LocalizedDatePipe, LocalizedNumberInputDirective, LocalizedNumberInputModule, LocalizedNumberPipe, LocalizedTimeImpurePipe, LocalizedTimePipe, LongPressDirective, LookupComponent, LookupField, MaskFormatterModule, MaskFormatterPipe, MouseEventsModule, NavigationDirective, NumberAlignmentOption, NumberField, NumberInputDirective, NumberInputModule, NumberLocaleOptions, ObjectCardComponent, ObjectCardFieldComponent, ObjectCardMainComponent, ObjectCardModule, Option, ProductHeaderComponent, ProductHeaderModule, RadioButtonField, RationButtonOption, RowTogllerDirective, Section, SelectField, SelectOption, SidebarComponent, SidebarModule, StatsCardComponent, StatsCardModule, StepState, StepsComponent, StepsModule, Structure, TableFrozenPositionDirective, TableHeaderCheckboxComponent, TableHeaderCheckboxModule, TableModule, TaxCalculationLanguageConfigs, TextAreaField, TextField, Themes, ThumbnailComponent, ThumbnailModule, ThumbnailSize, TileComponent, TileModule, TimelineComponent, TimelineModule, TokenListComponent, TokenListModule, ValidateErrors, LocalizedCurrencyImpurePipe as ɵa, LocalizedBignumberPipe as ɵb, DecimalField as ɵba, StructureModule as ɵbb, HeaderComponent as ɵbc, FooterComponent as ɵbd, NumberLocaleOptions as ɵbe, ThumbnailService as ɵbf, InfiniteScrollModule as ɵbg, InfiniteScrollDirective as ɵbh, CustomTranslationsModule as ɵbi, CodeEditorComponent as ɵbj, CoreFacade as ɵbk, CodeMirror6Core as ɵbl, LocalizedBignumberImpurePipe as ɵc, EmptyStateGoBackComponent as ɵd, TableColumnsComponent as ɵe, TablePagingComponent as ɵf, InfoSignComponent as ɵg, AutocompleteFieldComponent as ɵh, BooleanFieldComponent as ɵi, CalendarFieldComponent as ɵj, ChipsFieldComponent as ɵk, CurrencyFieldComponent as ɵl, DynamicFieldComponent as ɵm, DynamicFormDirective as ɵn, FieldsetComponent as ɵo, FileUploadComponent$1 as ɵp, LookupFieldComponent as ɵq, NumberFieldComponent as ɵr, BignumberFieldComponent as ɵs, RadioButtonComponent as ɵt, RowComponent as ɵu, SectionComponent as ɵv, SelectFieldComponent as ɵw, TextAreaFieldComponent as ɵx, TextFieldComponent as ɵy };
 //# sourceMappingURL=seniorsistemas-angular-components.js.map