@seniorsistemas/angular-components 17.8.9 → 17.8.11

package/fesm5/seniorsistemas-angular-components.js

@@ -4360,7 +4360,7 @@ var CountryPhonePickerComponent = /** @class */ (function () {
                     useExisting: forwardRef(function () { return CountryPhonePickerComponent_1; }),
                     multi: true,
                 }],
-            styles: [".country-phone-picker .phone-input{background-color:#fff;border:1px solid #d8d8d8;border-radius:4px;display:-ms-flexbox;display:flex;line-height:normal}.country-phone-picker .phone-input .drop{-ms-flex-align:center;align-items:center;cursor:pointer;display:-ms-flexbox;display:flex}.country-phone-picker .phone-input .drop .drop-flag{margin-left:12px}.country-phone-picker .phone-input .drop .drop-icon{font-size:12px;margin:0 8px}.country-phone-picker .phone-input .phone-ddi{margin:8px 0}.country-phone-picker .phone-input input{border:none;-ms-flex-positive:1;flex-grow:1;font-family:\"Open Sans\",sans-serif;font-size:14px;font-weight:400;line-height:150%;margin-left:8px}.country-phone-picker .phone-input input:focus{color:#697882;outline:0}.country-phone-picker .dropdown{background-color:#fff;border-radius:4px;box-shadow:0 4px 5px #00000033;padding:4px 0;position:absolute;margin:2px 0;z-index:999999}.country-phone-picker .dropdown .search{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;padding:8px 12px}.country-phone-picker .dropdown .search .search-field{border:1px solid #d8d8d8;border-radius:4px;-ms-flex-positive:1;flex-grow:1;font-family:\"Open Sans\",sans-serif;font-size:14px;font-weight:400;height:36px;line-height:150%;padding:0 32px 0 8px}.country-phone-picker .dropdown .search .search-icon{color:#333;font-size:12px;position:relative;right:24px}.country-phone-picker .dropdown .search .search-clear{color:#333;cursor:pointer;font-size:1rem}.country-phone-picker .dropdown .select-list{list-style:none;max-height:234px;min-width:360px;max-width:100vw;overflow:scroll;padding:0}.country-phone-picker .dropdown .select-list .select-option{cursor:pointer;display:-ms-flexbox;display:flex;padding:12px;-webkit-user-select:none;-ms-user-select:none;user-select:none}.country-phone-picker .dropdown .select-list .select-option .select-option__flag{margin-right:12px}.country-phone-picker .dropdown .select-list .select-option .select-option__name{margin-right:.5rem;max-width:100%;overflow:hidden;text-overflow:ellipsis}.country-phone-picker .dropdown .select-list .select-option .select-option__ddi{color:#697882;font-size:14px;font-family:\"Open Sans\",sans-serif;font-weight:400;line-height:150%}.country-phone-picker .dropdown .select-list .select-option--focused,.country-phone-picker .dropdown .select-list .select-option:hover{background-color:#e5eaea}"]
+            styles: [".country-phone-picker .phone-input{background-color:#fff;border:1px solid #d8d8d8;border-radius:4px;display:-ms-flexbox;display:flex;line-height:normal;overflow:hidden}.country-phone-picker .phone-input .drop{-ms-flex-align:center;align-items:center;cursor:pointer;display:-ms-flexbox;display:flex}.country-phone-picker .phone-input .drop .drop-flag{margin-left:12px}.country-phone-picker .phone-input .drop .drop-icon{font-size:12px;margin:0 8px}.country-phone-picker .phone-input .phone-ddi{margin:8px 0}.country-phone-picker .phone-input input{border:none;-ms-flex-positive:1;flex-grow:1;font-family:\"Open Sans\",sans-serif;font-size:14px;font-weight:400;line-height:150%;margin-left:8px}.country-phone-picker .phone-input input:focus{color:#697882;outline:0}.country-phone-picker .dropdown{background-color:#fff;border-radius:4px;box-shadow:0 4px 5px #00000033;padding:4px 0;position:absolute;margin:2px 0;z-index:999999}.country-phone-picker .dropdown .search{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;padding:8px 12px}.country-phone-picker .dropdown .search .search-field{border:1px solid #d8d8d8;border-radius:4px;-ms-flex-positive:1;flex-grow:1;font-family:\"Open Sans\",sans-serif;font-size:14px;font-weight:400;height:36px;line-height:150%;padding:0 32px 0 8px}.country-phone-picker .dropdown .search .search-icon{color:#333;font-size:12px;position:relative;right:24px}.country-phone-picker .dropdown .search .search-clear{color:#333;cursor:pointer;font-size:1rem}.country-phone-picker .dropdown .select-list{list-style:none;max-height:234px;min-width:360px;max-width:100vw;overflow:scroll;padding:0}.country-phone-picker .dropdown .select-list .select-option{cursor:pointer;display:-ms-flexbox;display:flex;padding:12px;-webkit-user-select:none;-ms-user-select:none;user-select:none}.country-phone-picker .dropdown .select-list .select-option .select-option__flag{margin-right:12px}.country-phone-picker .dropdown .select-list .select-option .select-option__name{margin-right:.5rem;max-width:100%;overflow:hidden;text-overflow:ellipsis}.country-phone-picker .dropdown .select-list .select-option .select-option__ddi{color:#697882;font-size:14px;font-family:\"Open Sans\",sans-serif;font-weight:400;line-height:150%}.country-phone-picker .dropdown .select-list .select-option--focused,.country-phone-picker .dropdown .select-list .select-option:hover{background-color:#e5eaea}"]
         })
     ], CountryPhonePickerComponent);
     return CountryPhonePickerComponent;
@@ -9898,10 +9898,29 @@ var DynamicField = /** @class */ (function (_super) {
         component.instance.field = this.field;
         // Must be this way because some teams use name like "e070emp.codemp"
         component.instance.formControl = this.group["controls"][this.field.name];
+        this._switchEmptyStringToNull(component);
         component.instance.errorMessages = this.errorMessages;
         this.setVariablesByType(component);
         return component;
     };
+    DynamicField.prototype._switchEmptyStringToNull = function (component) {
+        switch (component.instance.field.type) {
+            case FieldType.Password:
+            case FieldType.String:
+            case FieldType.Text:
+            case FieldType.TextIA:
+                var valueChanges$_1 = component.instance.formControl.valueChanges
+                    .subscribe(function (value) {
+                    if (value === "") {
+                        component.instance.formControl.setValue(null, { emitEvent: false });
+                    }
+                });
+                component.onDestroy(function () {
+                    valueChanges$_1.unsubscribe();
+                });
+                return;
+        }
+    };
     DynamicField.prototype.setVariablesByType = function (component) {
         if (this.field.type == FieldType.Time) {
             component.instance.timeOnly = true;
@@ -10083,6 +10102,9 @@ var DynamicFormDirective = /** @class */ (function () {
             this.component.instance.errorMessages = this.errorMessages;
         }
     };
+    DynamicFormDirective.prototype.ngOnDestroy = function () {
+        this.component.destroy();
+    };
     DynamicFormDirective.prototype.isField = function () {
         return FieldType[this.config.type];
     };
@@ -14699,2327 +14721,2436 @@ var KanbanModule = /** @class */ (function () {
     return KanbanModule;
 }());
 
-var ObjectCardFieldComponent = /** @class */ (function () {
-    function ObjectCardFieldComponent() {
-        this.id = "s-object-card-field-" + ObjectCardFieldComponent_1.nextId++;
-        this.buttonClick = new EventEmitter();
+var NavigationButtonComponent = /** @class */ (function () {
+    function NavigationButtonComponent() {
+        this.stepChanged = new EventEmitter();
+        this.currentIndex = 0;
+        this.isDisabled = false;
+        this.tieredMenuItems = [];
     }
-    ObjectCardFieldComponent_1 = ObjectCardFieldComponent;
-    var ObjectCardFieldComponent_1;
-    ObjectCardFieldComponent.nextId = 0;
-    __decorate([
-        Input()
-    ], ObjectCardFieldComponent.prototype, "id", void 0);
-    __decorate([
-        Input()
-    ], ObjectCardFieldComponent.prototype, "imageSource", void 0);
-    __decorate([
-        Input()
-    ], ObjectCardFieldComponent.prototype, "imageAlt", void 0);
-    __decorate([
-        Input()
-    ], ObjectCardFieldComponent.prototype, "iconClass", void 0);
-    __decorate([
-        Input()
-    ], ObjectCardFieldComponent.prototype, "label", void 0);
+    NavigationButtonComponent_1 = NavigationButtonComponent;
+    NavigationButtonComponent.prototype.ngOnInit = function () {
+        var _this = this;
+        var index = this.steps.findIndex(function (step) { return step.value === _this._value; });
+        this.currentIndex = index !== -1 ? index : 0;
+        this.stepChanged.emit({
+            previous: undefined,
+            current: this.steps[this.currentIndex],
+        });
+        this._createTieredMenuItems();
+    };
+    NavigationButtonComponent.prototype.writeValue = function (value) {
+        var _this = this;
+        this._value = value;
+        var index = this.steps.findIndex(function (step) { return step.value === _this._value; });
+        this.currentIndex = index !== -1 ? index : 0;
+    };
+    NavigationButtonComponent.prototype.registerOnChange = function (onChange) {
+        this._onChange = onChange;
+    };
+    NavigationButtonComponent.prototype.registerOnTouched = function (onTouched) {
+        this._onTouched = onTouched;
+    };
+    NavigationButtonComponent.prototype.setDisabledState = function (isDisabled) {
+        this.isDisabled = isDisabled;
+    };
+    NavigationButtonComponent.prototype.onNext = function () {
+        if (this.isDisabled)
+            return;
+        var previous = this.steps[this.currentIndex];
+        if (this.currentIndex < this.steps.length - 1) {
+            this.currentIndex++;
+        }
+        var current = this.steps[this.currentIndex];
+        this._onTouched && this._onTouched();
+        this._onChange && this._onChange(current.value);
+        this.stepChanged.emit({ previous: previous, current: current });
+    };
+    NavigationButtonComponent.prototype.onPrevious = function () {
+        if (this.isDisabled)
+            return;
+        var previous = this.steps[this.currentIndex];
+        if (this.currentIndex > 0) {
+            this.currentIndex--;
+        }
+        var current = this.steps[this.currentIndex];
+        this._onTouched && this._onTouched();
+        this._onChange && this._onChange(current.value);
+        this.stepChanged.emit({ previous: previous, current: current });
+    };
+    NavigationButtonComponent.prototype._createTieredMenuItems = function () {
+        var _this = this;
+        this.steps.forEach(function (step) {
+            _this.tieredMenuItems.push({
+                label: step.label,
+                command: function () { return _this.currentIndex = _this.steps.findIndex(function (s) { return s === step; }); },
+            });
+        });
+    };
+    var NavigationButtonComponent_1;
     __decorate([
         Input()
-    ], ObjectCardFieldComponent.prototype, "description", void 0);
+    ], NavigationButtonComponent.prototype, "steps", void 0);
     __decorate([
         Input()
-    ], ObjectCardFieldComponent.prototype, "buttonLabel", void 0);
+    ], NavigationButtonComponent.prototype, "defaultValue", void 0);
     __decorate([
         Input()
-    ], ObjectCardFieldComponent.prototype, "buttonModel", void 0);
+    ], NavigationButtonComponent.prototype, "tooltip", void 0);
     __decorate([
         Output()
-    ], ObjectCardFieldComponent.prototype, "buttonClick", void 0);
-    __decorate([
-        ContentChild(ThumbnailComponent, { static: true })
-    ], ObjectCardFieldComponent.prototype, "thumbnailComponent", void 0);
-    __decorate([
-        ViewChild(TemplateRef, { static: true })
-    ], ObjectCardFieldComponent.prototype, "content", void 0);
-    ObjectCardFieldComponent = ObjectCardFieldComponent_1 = __decorate([
+    ], NavigationButtonComponent.prototype, "stepChanged", void 0);
+    NavigationButtonComponent = NavigationButtonComponent_1 = __decorate([
         Component({
-            selector: "s-object-card-field",
-            template: "<ng-template>\n    <div class=\"container\">\n        <ng-content select=\"s-thumbnail\"></ng-content>\n        <s-thumbnail\n            [id]=\"id + '-thumbnail'\"\n            *ngIf=\"!thumbnailComponent && (imageSource || iconClass)\"\n            [imageSource]=\"imageSource\"\n            [imageAlt]=\"imageAlt || label\"\n            [iconClass]=\"iconClass\"\n            size=\"small\"\n        ></s-thumbnail>\n\n        <div class=\"info-container\">\n            <div #labelTemplate><ng-content select=\"[labelTemplate]\"></ng-content></div>\n            <span\n                [id]=\"id + '-label'\"\n                *ngIf=\"!labelTemplate.children.length\"\n                class=\"label\"\n                [pTooltip]=\"label\"\n                tooltipPosition=\"top\"\n                showDelay=\"500\"\n                >{{ label }}</span\n            >\n\n            <div #descriptionTemplate><ng-content select=\"[descriptionTemplate]\"></ng-content></div>\n            <span\n                [id]=\"id + '-description'\"\n                *ngIf=\"!descriptionTemplate.children.length\"\n                class=\"description\"\n                [pTooltip]=\"description\"\n                tooltipPosition=\"top\"\n                showDelay=\"500\"\n                >{{ description }}</span\n            >\n\n            <s-button\n                [id]=\"id + '-button'\"\n                *ngIf=\"buttonLabel\"\n                styleClass=\"object-card-button\"\n                priority=\"link\"\n                [label]=\"buttonLabel\"\n                [model]=\"buttonModel\"\n                size=\"small\"\n                (onClick)=\"buttonClick.emit($event)\"\n            ></s-button>\n        </div>\n    </div>\n</ng-template>\n",
-            styles: [".container{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;height:100%}.info-container{margin-left:10px}.info-container,.info-container span{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.info-container .label{color:#999;display:block}.info-container .description{display:block}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){.info-container{-ms-flex:1;flex:1}}@media (max-width:767px){.info-container,.info-container span{white-space:normal}}.info-container:only-child{margin-left:0}"]
+            selector: "s-navigation-button",
+            template: "<div class=\"navigation-button\" [ngClass]=\"{ 'navigation-button--disabled': isDisabled}\">\n    <button\n        class=\"option option--previous\"\n        [ngClass]=\"{ 'option--disabled': currentIndex === 0 }\"\n        (click)=\"onPrevious()\">\n        <i class=\"fas fa-chevron-left\"></i>\n    </button>\n\n    <ng-container *ngIf=\"steps[currentIndex].tooltip || tooltip; then tooltipBlock; else noTooltipBlock\"></ng-container>\n\n    <ng-template #tooltipBlock>\n        <button\n            [sTooltip]=\"steps[currentIndex].tooltip || tooltip\"\n            class=\"step\"\n            sTieredMenu [items]=\"tieredMenuItems\">\n            {{ steps[currentIndex].label }}\n        </button>\n    </ng-template>\n\n    <ng-template #noTooltipBlock>\n        <button class=\"step\">\n            {{ steps[currentIndex].label }}\n        </button>\n    </ng-template>\n\n    <button\n        class=\"option option--next\"\n        [ngClass]=\"{ 'option--disabled': currentIndex === steps.length - 1 }\"\n        (click)=\"onNext()\">\n        <i class=\"fas fa-chevron-right\"></i>\n    </button>\n</div>\n",
+            providers: [
+                {
+                    provide: NG_VALUE_ACCESSOR,
+                    useExisting: forwardRef(function () { return NavigationButtonComponent_1; }),
+                    multi: true,
+                },
+            ],
+            styles: [".navigation-button{display:-ms-inline-flexbox;display:inline-flex}.navigation-button .option,.navigation-button .step{background-color:#428bca;border:none;color:#fff}.navigation-button:not(.navigation-button--disabled) .step{cursor:pointer}.navigation-button:not(.navigation-button--disabled) .step:hover{background-color:#063951}.navigation-button .option{padding:8px 12px}.navigation-button .option--previous{border-radius:16px 0 0 16px}.navigation-button .option--next{border-radius:0 16px 16px 0}.navigation-button .option--disabled{opacity:.5}.navigation-button .option:not(.option--disabled):hover{cursor:pointer;background-color:#063951}.navigation-button .step{font-family:\"Open Sans\",sans-serif;font-size:14px;padding:8px 16px;text-align:center}.navigation-button--disabled{opacity:.5}"]
         })
-    ], ObjectCardFieldComponent);
-    return ObjectCardFieldComponent;
+    ], NavigationButtonComponent);
+    return NavigationButtonComponent;
 }());
 
-var ObjectCardMainComponent = /** @class */ (function () {
-    function ObjectCardMainComponent() {
-        this.id = "s-object-card-main-" + ObjectCardMainComponent_1.nextId++;
-        this.iconClass = "fa fa-picture-o";
-        this.hasThumbnail = true;
-        this.hasDescription = true;
-        this.isBrand = false;
-        this.buttonClick = new EventEmitter();
-        this._thumbnailSize = ThumbnailSize.Medium;
+var TieredMenuDividerComponent = /** @class */ (function () {
+    function TieredMenuDividerComponent() {
     }
-    ObjectCardMainComponent_1 = ObjectCardMainComponent;
-    Object.defineProperty(ObjectCardMainComponent.prototype, "thumbnailSize", {
-        get: function () {
-            return this._thumbnailSize;
-        },
-        set: function (value) {
-            this._thumbnailSize = value;
-            if (this.thumbnailComponent)
-                this.thumbnailComponent.size = value;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    ObjectCardMainComponent.prototype.onResize = function () {
-        this.update();
+    TieredMenuDividerComponent = __decorate([
+        Component({
+            selector: "s-tiered-menu-divider",
+            template: "<div class=\"divider\"></div>",
+            styles: [".divider{margin:2px 0;height:1px;background-color:#ccc}"]
+        })
+    ], TieredMenuDividerComponent);
+    return TieredMenuDividerComponent;
+}());
+
+var TieredMenuEventService = /** @class */ (function () {
+    function TieredMenuEventService() {
+        this.incrementCurrentItemEvent = new EventEmitter();
+        this.decrementCurrentItemEvent = new EventEmitter();
+        this.closeAllMenusEvent = new EventEmitter();
+        this.selectItemEvent = new EventEmitter();
+        this.openItemMenuEvent = new EventEmitter();
+        this.closeItemMenuEvent = new EventEmitter();
+        this.createMenuEvent = new EventEmitter();
+    }
+    TieredMenuEventService = __decorate([
+        Injectable()
+    ], TieredMenuEventService);
+    return TieredMenuEventService;
+}());
+
+var TieredMenuItemComponent = /** @class */ (function () {
+    function TieredMenuItemComponent(_tieredMenuEventService) {
+        this._tieredMenuEventService = _tieredMenuEventService;
+        this.focused = false;
+        this.highlight = false;
+        this.triggerEvent = "click";
+        this.closeOnClick = false;
+    }
+    TieredMenuItemComponent.prototype.onClick = function () {
+        if (this.item.disabled)
+            return;
+        if (this.item.submenu) {
+            if (!this.item.isOpen) {
+                this._tieredMenuEventService.openItemMenuEvent.emit(this.item);
+            }
+            else if (this.closeOnClick) {
+                this._tieredMenuEventService.closeItemMenuEvent.emit(this.item);
+            }
+        }
+        else {
+            this._tieredMenuEventService.selectItemEvent.emit(this.item);
+        }
     };
-    ObjectCardMainComponent.prototype.ngAfterContentInit = function () {
-        this.update();
+    TieredMenuItemComponent.prototype.onMouseEnter = function () {
+        var _this = this;
+        if (this.item.disabled)
+            return;
+        if (this.triggerEvent === "hover" && !this.item.isOpen) {
+            this._showTimeout = window.setTimeout(function () {
+                _this._tieredMenuEventService.openItemMenuEvent.emit(_this.item);
+            }, 300);
+        }
     };
-    ObjectCardMainComponent.prototype.update = function () {
-        var windowWidth = window.innerWidth;
-        if (windowWidth <= Breakpoints.SM_MAX)
-            this.thumbnailSize = ThumbnailSize.Small;
-        else
-            this.thumbnailSize = ThumbnailSize.Medium;
+    TieredMenuItemComponent.prototype.onMouseLeave = function () {
+        window.clearTimeout(this._showTimeout);
     };
-    var ObjectCardMainComponent_1;
-    ObjectCardMainComponent.nextId = 0;
-    __decorate([
-        Input()
-    ], ObjectCardMainComponent.prototype, "id", void 0);
-    __decorate([
-        Input()
-    ], ObjectCardMainComponent.prototype, "imageSource", void 0);
-    __decorate([
-        Input()
-    ], ObjectCardMainComponent.prototype, "imageFallback", void 0);
-    __decorate([
-        Input()
-    ], ObjectCardMainComponent.prototype, "imageAlt", void 0);
-    __decorate([
-        Input()
-    ], ObjectCardMainComponent.prototype, "iconClass", void 0);
-    __decorate([
-        Input()
-    ], ObjectCardMainComponent.prototype, "hasThumbnail", void 0);
-    __decorate([
-        Input()
-    ], ObjectCardMainComponent.prototype, "hasDescription", void 0);
+    TieredMenuItemComponent.ctorParameters = function () { return [
+        { type: TieredMenuEventService }
+    ]; };
     __decorate([
         Input()
-    ], ObjectCardMainComponent.prototype, "isBrand", void 0);
+    ], TieredMenuItemComponent.prototype, "item", void 0);
     __decorate([
         Input()
-    ], ObjectCardMainComponent.prototype, "label", void 0);
+    ], TieredMenuItemComponent.prototype, "focused", void 0);
     __decorate([
         Input()
-    ], ObjectCardMainComponent.prototype, "description", void 0);
+    ], TieredMenuItemComponent.prototype, "highlight", void 0);
     __decorate([
         Input()
-    ], ObjectCardMainComponent.prototype, "buttonLabel", void 0);
+    ], TieredMenuItemComponent.prototype, "triggerEvent", void 0);
     __decorate([
         Input()
-    ], ObjectCardMainComponent.prototype, "buttonModel", void 0);
+    ], TieredMenuItemComponent.prototype, "closeOnClick", void 0);
     __decorate([
-        Output()
-    ], ObjectCardMainComponent.prototype, "buttonClick", void 0);
+        HostListener("click"),
+        HostListener("touchend")
+    ], TieredMenuItemComponent.prototype, "onClick", null);
     __decorate([
-        ContentChild(ThumbnailComponent, { static: true })
-    ], ObjectCardMainComponent.prototype, "thumbnailComponent", void 0);
+        HostListener("mouseenter")
+    ], TieredMenuItemComponent.prototype, "onMouseEnter", null);
     __decorate([
-        HostListener("window:resize")
-    ], ObjectCardMainComponent.prototype, "onResize", null);
-    ObjectCardMainComponent = ObjectCardMainComponent_1 = __decorate([
+        HostListener("mouseleave")
+    ], TieredMenuItemComponent.prototype, "onMouseLeave", null);
+    TieredMenuItemComponent = __decorate([
         Component({
-            selector: "s-object-card-main",
-            template: "<ng-container *ngIf=\"hasThumbnail\">\n    <ng-content select=\"s-thumbnail\"></ng-content>\n    <s-thumbnail\n        [id]=\"id + '-thumbnail'\"\n        [imageSource]=\"imageSource\"\n        [imageFallback]=\"imageFallback\"\n        [imageAlt]=\"imageAlt || label\"\n        [iconClass]=\"iconClass\"\n        [size]=\"thumbnailSize\"\n        *ngIf=\"!thumbnailComponent\"\n        [isBrand]=\"isBrand\"\n    ></s-thumbnail>\n</ng-container>\n\n<ng-container *ngIf=\"hasDescription\">\n    <div class=\"info-container\">\n            <div #labelTemplate><ng-content select=\"[labelTemplate]\"></ng-content></div>\n            <span\n                [id]=\"id + '-label'\"\n                *ngIf=\"!labelTemplate.children.length\"\n                class=\"label\"\n                [pTooltip]=\"label\"\n                tooltipPosition=\"top\"\n                showDelay=\"500\"\n                >{{ label }}</span\n            >\n\n            <div #descriptionTemplate><ng-content select=\"[descriptionTemplate]\"></ng-content></div>\n            <span\n                [id]=\"id + '-description'\"\n                *ngIf=\"!descriptionTemplate.children.length\"\n                class=\"description\"\n                [pTooltip]=\"description\"\n                tooltipPosition=\"top\"\n                showDelay=\"500\"\n                >{{ description }}</span\n            >\n            <s-button\n                [id]=\"id + '-button'\"\n                *ngIf=\"buttonLabel\"\n                styleClass=\"object-card-button\"\n                priority=\"link\"\n                [label]=\"buttonLabel\"\n                [model]=\"buttonModel\"\n                size=\"small\"\n                (onClick)=\"buttonClick.emit($event)\"\n            ></s-button>\n        </div>\n</ng-container>\n",
-            styles: [":host{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;min-height:70px}.info-container{margin-left:10px;-ms-flex:1;flex:1}.info-container,.info-container span{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.info-container .label{display:block;font-weight:700}.info-container .description{color:#999;display:block}@media (max-width:767px){.info-container,.info-container span{white-space:normal}}"]
+            selector: "s-tiered-menu-item",
+            template: "<div\n    [id]=\"item.id\"\n    class=\"tiered-menu-item\"\n    [ngClass]=\"{\n        'tiered-menu-item--open': item.isOpen,\n        'tiered-menu-item--focused': focused,\n        'tiered-menu-item--disabled': item.disabled\n    }\">\n    <div class=\"tiered-menu-item-content\">\n        <span class=\"icon\" [ngClass]=\"item.iconClass\"></span>\n        <span class=\"label\">{{ item.label }}</span>\n    </div>\n    <span\n        *ngIf=\"item.submenu\"\n        class=\"submenu-icon\"\n        [ngClass]=\"{\n            'fas': true,\n            'fa-chevron-left': item.isOpen,\n            'fa-chevron-right': !item.isOpen\n        }\">\n    </span>\n</div>",
+            styles: [".tiered-menu-item{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;padding:8px 16px;-webkit-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}.tiered-menu-item .tiered-menu-item-content .label{margin:0 12px}.tiered-menu-item:hover{background-color:#e9e6e6}.tiered-menu-item--focused{background-color:#ccc!important}.tiered-menu-item--open{background-color:#e4e2e2}.tiered-menu-item--disabled{opacity:50%;cursor:default}"]
         })
-    ], ObjectCardMainComponent);
-    return ObjectCardMainComponent;
+    ], TieredMenuItemComponent);
+    return TieredMenuItemComponent;
 }());
 
-var EnumSeverity;
-(function (EnumSeverity) {
-    EnumSeverity["Default"] = "Default";
-    EnumSeverity["Info"] = "Info";
-    EnumSeverity["Warn"] = "Warn";
-    EnumSeverity["Error"] = "Error";
-    EnumSeverity["Success"] = "Success";
-})(EnumSeverity || (EnumSeverity = {}));
-
-var elementResizeDetectorMaker = elementResizeDetectorMaker_; // @HACK Necessary because of https://github.com/rollup/rollup/issues/670
-var ObjectCardComponent = /** @class */ (function () {
-    function ObjectCardComponent(cdr, elementRef) {
-        this.cdr = cdr;
-        this.elementRef = elementRef;
-        this.id = "s-object-card-" + ObjectCardComponent_1.nextId++;
-        this.expanded = false;
-        this.expandTooltip = "Abrir painel";
-        this.collapseTooltip = "Fechar painel";
-        this.fieldsMinWidth = 200;
-        this.expandedChange = new EventEmitter();
-        this.maxVisibleFields = 0;
-        this.severity = EnumSeverity.Default;
-        this.EnumSeverity = EnumSeverity;
+var TieredMenuService = /** @class */ (function () {
+    function TieredMenuService() {
+        this.currentItems = [];
+        this.items = [];
     }
-    ObjectCardComponent_1 = ObjectCardComponent;
-    ObjectCardComponent.prototype.ngAfterViewInit = function () {
+    TieredMenuService.prototype.normalizeData = function (items, parent) {
         var _this = this;
-        this.update();
-        this.cdr.detectChanges();
-        this.fields.changes.subscribe(function () {
-            _this.update();
+        return items.map(function (i) {
+            var item = __assign({ visible: true }, i);
+            if (item.submenu) {
+                item.submenu = _this.normalizeData(item.submenu, item);
+            }
+            item.id = _this._generateId();
+            item.parent = parent;
+            item.isOpen = false;
+            return item;
         });
-        var erd = elementResizeDetectorMaker({
-            strategy: "scroll",
+    };
+    TieredMenuService.prototype.markAllItemsAsClosed = function (items) {
+        var _this = this;
+        return items.map(function (i) {
+            var item = __assign({}, i);
+            if (item.submenu) {
+                item.submenu = _this.markAllItemsAsClosed(item.submenu);
+            }
+            item.isOpen = false;
+            return item;
         });
-        erd.listenTo(this.elementRef.nativeElement, function () { return _this.update(); });
     };
-    ObjectCardComponent.prototype.update = function () {
-        var e_1, _a;
-        var windowWidth = window.innerWidth;
-        var containerWidth = this.elementRef.nativeElement.offsetWidth;
-        var mainFieldWidth = containerWidth * 0.3 > 260 ? containerWidth * 0.3 : 260;
-        var fieldsMinWidth = this.fieldsMinWidth;
-        var expandIconWidth = 50;
-        var fieldElementList = this.elementRef.nativeElement.getElementsByClassName("s-object-card-field");
-        try {
-            for (var fieldElementList_1 = __values(fieldElementList), fieldElementList_1_1 = fieldElementList_1.next(); !fieldElementList_1_1.done; fieldElementList_1_1 = fieldElementList_1.next()) {
-                var element = fieldElementList_1_1.value;
-                element.style.minWidth = this.fieldsMinWidth + "px";
+    TieredMenuService.prototype.searchTheHierarchy = function (itemA, itemB) {
+        var item = itemB;
+        while (item) {
+            if (item === itemA) {
+                return true;
             }
+            item = item.parent;
         }
-        catch (e_1_1) { e_1 = { error: e_1_1 }; }
-        finally {
-            try {
-                if (fieldElementList_1_1 && !fieldElementList_1_1.done && (_a = fieldElementList_1.return)) _a.call(fieldElementList_1);
-            }
-            finally { if (e_1) throw e_1.error; }
+        return false;
+    };
+    TieredMenuService.prototype.cloneItems = function (items) {
+        return JSON.parse(JSON.stringify(items));
+    };
+    TieredMenuService.prototype._generateId = function () {
+        return "id-" + Math.random().toString(36).substring(2, 9) + "-" + Math.random().toString(36).substring(2, 9) + "-" + Math.random().toString(36).substring(2, 9);
+    };
+    TieredMenuService = __decorate([
+        Injectable()
+    ], TieredMenuService);
+    return TieredMenuService;
+}());
+
+var TieredMenuNestedComponent = /** @class */ (function () {
+    function TieredMenuNestedComponent(tieredMenuService, _tieredMenuEventService) {
+        this.tieredMenuService = tieredMenuService;
+        this._tieredMenuEventService = _tieredMenuEventService;
+        this.top = 0;
+        this.left = 0;
+        this._unsubscribe$ = new Subject();
+    }
+    TieredMenuNestedComponent.prototype.onResize = function () {
+        this._tieredMenuEventService.closeAllMenusEvent.emit();
+    };
+    TieredMenuNestedComponent.prototype.onDocumentClick = function (event) {
+        // Closing menu when clicked outside.
+        var target = event.target;
+        var clickedInside = target.closest("s-tiered-menu-item") || target.closest("s-tiered-menu-divider");
+        if (!clickedInside) {
+            this._tieredMenuEventService.closeAllMenusEvent.emit();
         }
-        var maxFieldQtd;
-        if (windowWidth <= Breakpoints.SM_MAX)
-            maxFieldQtd = 0;
-        else
-            maxFieldQtd = Math.floor((containerWidth - mainFieldWidth) / fieldsMinWidth);
-        if (maxFieldQtd && maxFieldQtd < this.fields.length) {
-            maxFieldQtd = Math.floor((containerWidth - mainFieldWidth - expandIconWidth) / fieldsMinWidth);
+    };
+    TieredMenuNestedComponent.prototype.onKeydownHandler = function (event) {
+        switch (event.key) {
+            case "Escape":
+                this._tieredMenuEventService.closeAllMenusEvent.emit();
+                break;
+            case " ":
+            case "Enter":
+                this._tieredMenuEventService.selectItemEvent.emit(this.tieredMenuService.currentItem);
+                break;
+            case "ArrowLeft":
+                // When nested I need a reference to the current item's parent item, otherwise just the current item.
+                this._tieredMenuEventService.closeItemMenuEvent.emit(this.tieredMenuService.currentItem.parent);
+                break;
+            case "ArrowRight":
+                this._tieredMenuEventService.openItemMenuEvent.emit(this.tieredMenuService.currentItem);
+                break;
+            case "ArrowUp":
+                this._tieredMenuEventService.decrementCurrentItemEvent.emit();
+                break;
+            case "ArrowDown":
+                this._tieredMenuEventService.incrementCurrentItemEvent.emit();
+                break;
         }
-        this.maxVisibleFields = maxFieldQtd;
-        if (maxFieldQtd >= this.fields.length && this.expanded)
-            this.collapse();
     };
-    ObjectCardComponent.prototype.toggle = function () {
-        this.expanded ? this.collapse() : this.expand();
+    TieredMenuNestedComponent.prototype.ngOnInit = function () {
+        this.tieredMenuService.currentItems = this.items;
+        this._subscribeEvents();
     };
-    ObjectCardComponent.prototype.expand = function () {
-        this.expanded = true;
-        this.expandedChange.emit(this.expanded);
+    TieredMenuNestedComponent.prototype.ngOnDestroy = function () {
+        this._unsubscribe$.next();
+        this._unsubscribe$.complete();
     };
-    ObjectCardComponent.prototype.collapse = function () {
-        this.expanded = false;
-        this.expandedChange.emit(this.expanded);
+    TieredMenuNestedComponent.prototype._incrementCurItem = function () {
+        if (!this.tieredMenuService.currentItem) {
+            this.tieredMenuService.currentItem = this.tieredMenuService.currentItems[0];
+            return;
+        }
+        var curIndex = this.tieredMenuService.currentItems.indexOf(this.tieredMenuService.currentItem) + 1;
+        if (curIndex < this.tieredMenuService.currentItems.length) {
+            this.tieredMenuService.currentItem = this.tieredMenuService.currentItems[curIndex];
+        }
+        else {
+            this.tieredMenuService.currentItem = this.tieredMenuService.currentItems[0];
+        }
+        if (this.tieredMenuService.currentItem.divider) {
+            this._incrementCurItem();
+        }
     };
-    ObjectCardComponent.prototype.getExpandedFieldWidth = function () {
-        var containerWidth = this.elementRef.nativeElement.offsetWidth;
-        var fieldsPerRow;
-        if (containerWidth <= Breakpoints.SM_MAX)
-            fieldsPerRow = 1;
-        else if (containerWidth <= Breakpoints.MD_MAX)
-            fieldsPerRow = 2;
-        else if (containerWidth <= Breakpoints.LG_MAX)
-            fieldsPerRow = 4;
-        else
-            fieldsPerRow = 6;
-        return 12 / fieldsPerRow;
+    TieredMenuNestedComponent.prototype._decrementCurItem = function () {
+        if (!this.tieredMenuService.currentItem) {
+            this.tieredMenuService.currentItem = this.tieredMenuService.currentItems[0];
+            return;
+        }
+        var curIndex = this.tieredMenuService.currentItems.indexOf(this.tieredMenuService.currentItem) - 1;
+        if (curIndex >= 0) {
+            this.tieredMenuService.currentItem = this.tieredMenuService.currentItems[curIndex];
+        }
+        else {
+            this.tieredMenuService.currentItem = this.tieredMenuService.currentItems[this.tieredMenuService.currentItems.length - 1];
+        }
+        if (this.tieredMenuService.currentItem.divider) {
+            this._decrementCurItem();
+        }
     };
-    var ObjectCardComponent_1;
-    ObjectCardComponent.nextId = 0;
-    ObjectCardComponent.ctorParameters = function () { return [
-        { type: ChangeDetectorRef },
-        { type: ElementRef }
+    TieredMenuNestedComponent.prototype._closeItem = function (item) {
+        var _a;
+        var itemAux = this._lastOpenItem;
+        while (itemAux && itemAux != item) {
+            itemAux.isOpen = false;
+            itemAux = itemAux.parent;
+        }
+        item.isOpen = false;
+        this.tieredMenuService.currentItem = itemAux !== null && itemAux !== void 0 ? itemAux : this.tieredMenuService.items[0];
+        this.tieredMenuService.currentItems = ((_a = itemAux === null || itemAux === void 0 ? void 0 : itemAux.parent) === null || _a === void 0 ? void 0 : _a.submenu) || this.tieredMenuService.items;
+    };
+    TieredMenuNestedComponent.prototype._openItem = function (item) {
+        if (item === null || item === void 0 ? void 0 : item.submenu) {
+            item.isOpen = true;
+            this.tieredMenuService.currentItems = item.submenu;
+            // Only has focus if there has already been interaction.
+            if (this.tieredMenuService.currentItem) {
+                this.tieredMenuService.currentItem = item.submenu[0];
+            }
+            this._lastOpenItem = item;
+        }
+    };
+    TieredMenuNestedComponent.prototype._subscribeEvents = function () {
+        var _this = this;
+        this._tieredMenuEventService.incrementCurrentItemEvent
+            .pipe(takeUntil(this._unsubscribe$))
+            .subscribe(function () {
+            _this._incrementCurItem();
+        });
+        this._tieredMenuEventService.decrementCurrentItemEvent
+            .pipe(takeUntil(this._unsubscribe$))
+            .subscribe(function () {
+            _this._decrementCurItem();
+        });
+        this._tieredMenuEventService.selectItemEvent
+            .pipe(takeUntil(this._unsubscribe$))
+            .subscribe(function (item) {
+            if (item.command) {
+                item.command();
+                // Close all menus after the item was selected.
+                _this._tieredMenuEventService.closeAllMenusEvent.emit();
+            }
+        });
+        this._tieredMenuEventService.openItemMenuEvent
+            .pipe(takeUntil(this._unsubscribe$))
+            .subscribe(function (item) {
+            var _a, _b;
+            if (!_this.tieredMenuService.currentItems.includes(item)) {
+                var itemAux = _this._lastOpenItem;
+                while ((_a = itemAux === null || itemAux === void 0 ? void 0 : itemAux.parent) === null || _a === void 0 ? void 0 : _a.parent) {
+                    itemAux = itemAux.parent;
+                }
+                _this._tieredMenuEventService.closeItemMenuEvent.emit((_b = itemAux.parent) !== null && _b !== void 0 ? _b : itemAux);
+            }
+            _this._lastOpenItem = item;
+            _this._openItem(item);
+        });
+        this._tieredMenuEventService.closeItemMenuEvent
+            .pipe(takeUntil(this._unsubscribe$))
+            .subscribe(function (item) {
+            if (item) {
+                _this._closeItem(item);
+            }
+        });
+    };
+    TieredMenuNestedComponent.ctorParameters = function () { return [
+        { type: TieredMenuService },
+        { type: TieredMenuEventService }
     ]; };
     __decorate([
-        Input()
-    ], ObjectCardComponent.prototype, "id", void 0);
+        HostListener("window:resize")
+    ], TieredMenuNestedComponent.prototype, "onResize", null);
     __decorate([
-        Input()
-    ], ObjectCardComponent.prototype, "expanded", void 0);
+        HostListener("document:click", ["$event"])
+    ], TieredMenuNestedComponent.prototype, "onDocumentClick", null);
     __decorate([
-        Input()
-    ], ObjectCardComponent.prototype, "expandTooltip", void 0);
-    __decorate([
-        Input()
-    ], ObjectCardComponent.prototype, "collapseTooltip", void 0);
-    __decorate([
-        Input()
-    ], ObjectCardComponent.prototype, "fieldsMinWidth", void 0);
-    __decorate([
-        Output()
-    ], ObjectCardComponent.prototype, "expandedChange", void 0);
-    __decorate([
-        ContentChild(ObjectCardMainComponent, { static: true })
-    ], ObjectCardComponent.prototype, "main", void 0);
-    __decorate([
-        ContentChildren(ObjectCardFieldComponent, { descendants: true })
-    ], ObjectCardComponent.prototype, "fields", void 0);
-    __decorate([
-        Input()
-    ], ObjectCardComponent.prototype, "severity", void 0);
-    __decorate([
-        Input()
-    ], ObjectCardComponent.prototype, "borderButtonOptions", void 0);
-    ObjectCardComponent = ObjectCardComponent_1 = __decorate([
-        Component({
-            selector: "s-object-card",
-            template: "<div [id]=\"id\" class=\"container\">\n    <s-border-button\n        *ngIf=\"\n            borderButtonOptions?.visible\n                ? borderButtonOptions?.visible(severity)\n                : false\n        \"\n        [severity]=\"severity\"\n        [options]=\"borderButtonOptions\"\n        class=\"object-card__border-button\"\n        [@BorderButtonAnimation]\n    ></s-border-button>\n\n    <div\n        [id]=\"id + '-main-container'\"\n        class=\"main-container\"\n        [ngClass]=\"{\n            'with-hidden-fields': fields.length > maxVisibleFields,\n            'with-visible-fields': fields.length && maxVisibleFields,\n            'main-container--severity-default': severity === EnumSeverity.Default,\n            'main-container--severity-info': severity === EnumSeverity.Info,\n            'main-container--severity-warn': severity === EnumSeverity.Warn,\n            'main-container--severity-error': severity === EnumSeverity.Error,\n            'main-container--severity-success': severity == EnumSeverity.Success\n        }\"\n    >\n        <div class=\"object-content\">\n            <div class=\"s-object-card-main\"><ng-content select=\"s-object-card-main\"></ng-content></div>\n\n            <div class=\"divider\" *ngIf=\"maxVisibleFields && fields.length\"></div>\n\n            <div *ngFor=\"let field of (fields.toArray() | slice: 0:maxVisibleFields)\" class=\"s-object-card-field\">\n                <ng-container *ngTemplateOutlet=\"field.content\"></ng-container>\n            </div>\n        </div>\n\n        <div\n            [id]=\"id + '-expand-icon-container'\"\n            class=\"expand-icon-container\"\n            (click)=\"toggle()\"\n            [pTooltip]=\"expanded ? collapseTooltip : expandTooltip\"\n            tooltipPosition=\"top\"\n            [showDelay]=\"500\"\n        >\n            <span [id]=\"id + '-expand-icon'\" class=\"expand-icon fa\" [ngClass]=\"{ 'fa-minus': expanded, 'fa-plus': !expanded }\"></span>\n        </div>\n    </div>\n\n    <div\n        [id]=\"id + '-expandable-container'\"\n        [@expandableContent]=\"expanded\"\n        class=\"expandable-container\"\n        [ngClass]=\"{\n            'expandable-container--severity-default':\n                severity === EnumSeverity.Default,\n            'expandable-container--severity-info': severity === EnumSeverity.Info,\n            'expandable-container--severity-warn': severity === EnumSeverity.Warn,\n            'expandable-container--severity-error': severity === EnumSeverity.Error,\n            'expandable-container--severity-success':\n                severity == EnumSeverity.Success\n        }\"\n    >\n        <div class=\"ui-g ui-g-12\">\n            <ng-container\n                *ngFor=\"\n                    let field of fields.toArray()\n                        | slice : maxVisibleFields : fields.length\n                \"\n            >\n                <div class=\"ui-g-{{ getExpandedFieldWidth() }}\">\n                    <div class=\"s-object-card-field\">\n                        <ng-container\n                            *ngTemplateOutlet=\"field.content\"\n                        ></ng-container>\n                    </div>\n                </div>\n            </ng-container>\n        </div>\n    </div>\n</div>\n",
-            animations: [
-                trigger("expandableContent", [
-                    state("*", style$7({
-                        height: "0",
-                    })),
-                    state("false", style$7({
-                        height: "0",
-                    })),
-                    state("true", style$7({
-                        height: "*",
-                    })),
-                    transition("* => true", animate("200ms ease-out")),
-                    transition("false <=> true", animate("200ms ease-out")),
-                ]),
-                trigger("BorderButtonAnimation", [
-                    transition(":enter", [
-                        style$7({ transform: "scaleY(0)", opacity: 0 }),
-                        animate("300ms ease", style$7({ transform: "scaleY(1)", opacity: 1 })),
-                    ]),
-                    transition(":leave", [
-                        style$7({ transform: "scaleY(1)", opacity: 1 }),
-                        animate("300ms ease", style$7({ transform: "scaleY(0)", opacity: 0 })),
-                    ]),
-                ]),
-            ],
-            styles: [":host{display:block}.container{margin-bottom:20px;position:relative}.main-container{display:-ms-flexbox;display:flex}.expandable-container,.main-container{background-color:#fff;border:1px solid #ccc;position:relative;overflow:hidden;width:100%}.expandable-container--severity-default{border-color:#ccc;border-top:initial}.expandable-container--severity-info{transition:border-color .5s;border-color:#428bca;border-top:initial}.expandable-container--severity-warn{transition:border-color .5s;border-color:#f8931f;border-top:initial}.expandable-container--severity-error{transition:border-color .5s;border-color:#c13018;border-top:initial}.expandable-container--severity-success{transition:border-color .5s;border-color:#0c9348;border-top:initial}.main-container--severity-default{border-color:#ccc}.main-container--severity-info{transition:border-color .5s;border-color:#428bca}.main-container--severity-warn{transition:border-color .5s;border-color:#f8931f}.main-container--severity-error{transition:border-color .5s;border-color:#c13018}.main-container--severity-success{transition:border-color .5s;border-color:#0c9348}.object-card__border-button{position:absolute;top:-13px;right:15px;z-index:1}.expandable-container{border-top:none;box-shadow:inset 0 6px 4px -4px #ddd;margin-top:-1px}.expand-icon-container{display:none;text-align:center;-ms-flex-align:center;align-items:center;cursor:pointer;width:25px;position:absolute;right:15px;height:25px;top:calc(50% - 12px)}.expand-icon{-ms-flex:1;flex:1}.object-content{display:-ms-flexbox;display:flex;width:100%}.s-object-card-main{-ms-flex-negative:0;flex-shrink:0;-ms-flex-positive:1;flex-grow:1;overflow:hidden;padding:15px}.main-container.with-visible-fields .s-object-card-main{max-width:30%}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){.main-container.with-visible-fields .s-object-card-main{width:20%}}.s-object-card-field{overflow:hidden;height:100%}.main-container .s-object-card-field{padding:15px}.main-container .divider{width:1px;-ms-flex-negative:0;flex-shrink:0;background-color:#ccc;margin:15px -1px 15px 0}.main-container.with-hidden-fields .object-content{width:calc(100% - 35px)}.main-container.with-hidden-fields .expand-icon-container{display:-ms-flexbox;display:flex}::ng-deep .object-card-button{padding-left:0!important;padding-right:10px!important;border:none!important;height:auto!important;min-width:auto!important;text-align:left!important}@media (max-width:767px){.s-object-card-main{max-width:calc(100% - 50px)}}"]
-        })
-    ], ObjectCardComponent);
-    return ObjectCardComponent;
-}());
-
-var BorderButtonComponent = /** @class */ (function () {
-    function BorderButtonComponent() {
-        this.severity = EnumSeverity.Default;
-        this.EnumSeverity = EnumSeverity;
-        this.TooltipPosition = TooltipPosition;
-    }
-    __decorate([
-        Input()
-    ], BorderButtonComponent.prototype, "severity", void 0);
-    __decorate([
-        Input()
-    ], BorderButtonComponent.prototype, "options", void 0);
-    BorderButtonComponent = __decorate([
-        Component({
-            selector: "s-border-button",
-            template: "<button\n    class=\"border-button\"\n    [ngClass]=\"{\n        'border-button--severity-default': severity === EnumSeverity.Default,\n        'border-button--severity-info': severity === EnumSeverity.Info,\n        'border-button--severity-warn': severity === EnumSeverity.Warn,\n        'border-button--severity-error': severity === EnumSeverity.Error,\n        'border-button--severity-success': severity == EnumSeverity.Success,\n        'border-button--disabled': options?.disabled\n            ? options?.disabled(severity)\n            : false\n    }\"\n    (click)=\"options?.onClick ? options?.onClick(severity) : null\"\n    [sTooltip]=\"options?.tooltip ? options?.tooltip(severity) : null\"\n    [tooltipPosition]=\"TooltipPosition.Left\"\n    [disabled]=\"options?.disabled ? options?.disabled(severity) : false\"\n>\n    <span class=\"border-button__label\">\n        {{ options?.label ? options?.label(severity) : null }}\n    </span>\n    <span\n        *ngIf=\"options?.icon ? options?.icon(severity) : false\"\n        class=\"border-button__icon {{ options?.icon(severity) }}\"\n    ></span>\n</button>",
-            styles: [".border-button{padding:0 8px;border:1px solid;border-radius:12px;height:23px;max-width:320px;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.border-button__label{font-family:Open Sans,sans-serif;font-size:12px;line-height:150%;width:100%;display:block;color:#333;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.border-button__icon{font-size:12px;color:#333;margin-left:8px}.border-button--severity-default{border-color:#ccc;background-color:#fff}.border-button--severity-info{border-color:#428bca;background-color:#d5e8ec;transition:background-color .5s,border-color .5s}.border-button--severity-info:enabled:hover{background-color:#9ecad4;cursor:pointer}.border-button--severity-info:enabled:active{transition:none;background-color:#67acbc;border-color:#67acbc}.border-button--severity-warn{border-color:#f8931f;background-color:#fce3ba;transition:background-color .5s,border-color .5s}.border-button--severity-warn:enabled:hover{background-color:#f8bf5e;cursor:pointer}.border-button--severity-warn:enabled:active{transition:none;background-color:#f5a319;border-color:#f5a319}.border-button--severity-error{border-color:#c13018;background-color:#fcd2d2;transition:background-color .5s,border-color .5s}.border-button--severity-error:enabled:hover{background-color:#f89696;cursor:pointer}.border-button--severity-error:enabled:active{transition:none;background-color:#f45b5b;border-color:#f45b5b}.border-button--severity-success{border-color:#0c9348;background-color:#e6ffb3;transition:background-color .5s,border-color .5s}.border-button--severity-success:enabled:hover{background-color:#c8ff5c;cursor:pointer}.border-button--severity-success:enabled:active{transition:none;background-color:#ade500;border-color:#ade500}.border-button--disabled:disabled:hover{cursor:default}"]
-        })
-    ], BorderButtonComponent);
-    return BorderButtonComponent;
-}());
-
-var BorderButtonModule = /** @class */ (function () {
-    function BorderButtonModule() {
-    }
-    BorderButtonModule = __decorate([
-        NgModule({
-            imports: [CommonModule, TooltipModule],
-            declarations: [BorderButtonComponent],
-            exports: [BorderButtonComponent]
-        })
-    ], BorderButtonModule);
-    return BorderButtonModule;
-}());
-
-var ObjectCardModule = /** @class */ (function () {
-    function ObjectCardModule() {
-    }
-    ObjectCardModule = __decorate([
-        NgModule({
-            imports: [CommonModule, TooltipModule$1, ThumbnailModule, ButtonModule, BorderButtonModule],
-            declarations: [ObjectCardComponent, ObjectCardMainComponent, ObjectCardFieldComponent],
-            exports: [ThumbnailModule, ObjectCardComponent, ObjectCardMainComponent, ObjectCardFieldComponent],
-        })
-    ], ObjectCardModule);
-    return ObjectCardModule;
-}());
-
-var ProductHeaderComponent = /** @class */ (function () {
-    function ProductHeaderComponent() {
-        this.id = "s-product-header-" + ProductHeaderComponent_1.nextId++;
-        this.baseZIndex = 0;
-        this.isHeaderFrame = true;
-    }
-    ProductHeaderComponent_1 = ProductHeaderComponent;
-    ProductHeaderComponent.prototype.ngAfterViewInit = function () {
-        this.container.nativeElement.style.zIndex = String(this.baseZIndex + ++DomHandler.zindex);
-        if (this.isHeaderFrame) {
-            this.container.nativeElement.style.borderBottom = "1px solid $default-secondary-color";
-        }
-        else {
-            this.container.nativeElement.style.borderTop = "1px solid $default-secondary-color";
-        }
-    };
-    var ProductHeaderComponent_1;
-    ProductHeaderComponent.nextId = 0;
-    __decorate([
-        Input()
-    ], ProductHeaderComponent.prototype, "id", void 0);
-    __decorate([
-        Input()
-    ], ProductHeaderComponent.prototype, "header", void 0);
-    __decorate([
-        Input()
-    ], ProductHeaderComponent.prototype, "baseZIndex", void 0);
-    __decorate([
-        Input()
-    ], ProductHeaderComponent.prototype, "isHeaderFrame", void 0);
-    __decorate([
-        ViewChild("headerContainer", { static: false })
-    ], ProductHeaderComponent.prototype, "container", void 0);
-    ProductHeaderComponent = ProductHeaderComponent_1 = __decorate([
+        HostListener("document:keydown", ["$event"])
+    ], TieredMenuNestedComponent.prototype, "onKeydownHandler", null);
+    TieredMenuNestedComponent = __decorate([
         Component({
-            selector: "s-product-header",
-            template: "<div [id]=\"id\" class=\"box\">\n    <div\n      #headerContainer\n      class=\"sds-container\"\n      [class]=\"isHeaderFrame ? 'header-frame' : 'primary-header'\"\n    >\n      <h1 [class]=\"isHeaderFrame ? 'title' : 'primary-title'\">{{ header }}</h1>\n      <div class=\"content\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n",
-            styles: [".box{position:relative;width:100%;height:70px}.header-frame{padding-top:15px;padding-bottom:15px;width:100%;top:0;left:0;height:70px;background-color:#fff;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;position:fixed}.title{color:#999;font-weight:400;font-size:16pt;margin-right:15px;min-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.content{display:-ms-flexbox;display:flex;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.primary-header{display:-ms-flexbox;display:flex;width:100%;height:70px;padding:15px 20px;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;border-bottom:1px solid #ddd;background-color:#fff;gap:24px}@media (max-width:768px){.primary-header{width:100%}}.primary-header .primary-title{color:#999;font-weight:400;font-size:16pt;margin-right:15px;min-width:140px;overflow:hidden;text-overflow:ellipsis}"]
-        })
-    ], ProductHeaderComponent);
-    return ProductHeaderComponent;
-}());
-
-var ProductHeaderModule = /** @class */ (function () {
-    function ProductHeaderModule() {
-    }
-    ProductHeaderModule = __decorate([
-        NgModule({
-            imports: [CommonModule, TooltipModule$1, ThumbnailModule],
-            declarations: [ProductHeaderComponent],
-            exports: [ProductHeaderComponent, ThumbnailModule],
+            template: "<div\n    class=\"menu menu--nested\"\n    [ngStyle]=\"{\n        'top': top + 'px',\n        'left': left + 'px'\n    }\">\n    <ng-container *ngTemplateOutlet=\"itemsTemplate; context: { $implicit: items }\"></ng-container>\n</div>\n\n<ng-template #itemsTemplate let-items>\n    <div *ngFor=\"let item of items\">\n        <s-tiered-menu-item\n            *ngIf=\"item.visible && !item.divider\"\n            [item]=\"item\"\n            [focused]=\"item === tieredMenuService.currentItem\"\n            [closeOnClick]=\"true\">\n        </s-tiered-menu-item>\n\n        <s-tiered-menu-divider *ngIf=\"item.divider\"></s-tiered-menu-divider>\n\n        <div *ngIf=\"item.submenu && item.isOpen\">\n            <div class=\"submenu\">\n                <ng-container *ngTemplateOutlet=\"itemsTemplate; context: { $implicit: item.submenu }\"></ng-container>\n            </div>\n        </div>\n    </div>\n</ng-template>\n",
+            styles: [".menu{background-color:#fff;border:1px solid #ccc;border-radius:6px;box-shadow:0 2px 12px 0 rgba(0,0,0,.1);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:column;flex-direction:column;min-width:176px;padding:4px 0;position:absolute;z-index:9999;overflow:auto;width:calc(100vw - 8px)}.menu .submenu{margin-left:24px}"]
         })
-    ], ProductHeaderModule);
-    return ProductHeaderModule;
+    ], TieredMenuNestedComponent);
+    return TieredMenuNestedComponent;
 }());
 
-var ProgressBarColors;
-(function (ProgressBarColors) {
-    ProgressBarColors["Blue"] = "blue";
-    ProgressBarColors["Green"] = "green";
-    ProgressBarColors["Red"] = "red";
-    ProgressBarColors["Yellow"] = "yellow";
-})(ProgressBarColors || (ProgressBarColors = {}));
-
-var ProgressBarMode;
-(function (ProgressBarMode) {
-    ProgressBarMode["Determinate"] = "determinate";
-    ProgressBarMode["Indeterminate"] = "indeterminate";
-})(ProgressBarMode || (ProgressBarMode = {}));
-
-var ProgressBarComponent = /** @class */ (function () {
-    function ProgressBarComponent() {
-        this.numberFormatOptions = {
-            style: "decimal",
-            minimumFractionDigits: 0,
-            maximumFractionDigits: 2,
-        };
-        this.showValue = true;
-        this.mode = ProgressBarMode.Determinate;
+var TieredMenuComponent = /** @class */ (function () {
+    function TieredMenuComponent(_appRef, _componentFactoryResolver, _injector, _changeDetectorRef, tieredMenuService, _tieredMenuEventService) {
+        this._appRef = _appRef;
+        this._componentFactoryResolver = _componentFactoryResolver;
+        this._injector = _injector;
+        this._changeDetectorRef = _changeDetectorRef;
+        this.tieredMenuService = tieredMenuService;
+        this._tieredMenuEventService = _tieredMenuEventService;
+        this.top = 0;
+        this.left = 0;
+        this.menuTriggerEvent = "hover";
+        this._componentRef = null;
+        this._unsubscribe$ = new Subject();
+        this.destroyRequest = new EventEmitter();
     }
-    ProgressBarComponent.prototype.ngOnInit = function () {
-        this.validateInputs();
+    TieredMenuComponent_1 = TieredMenuComponent;
+    TieredMenuComponent.prototype.onResize = function () {
+        this._tieredMenuEventService.closeAllMenusEvent.emit();
     };
-    ProgressBarComponent.prototype.validateInputs = function () {
-        if (this.value < 0 || this.value > 100) {
-            throw new Error("Invalid value for value");
-        }
-        if (this.targetValue < 0 || this.targetValue > 100) {
-            throw new Error("Invalid value for targetValue");
+    TieredMenuComponent.prototype.onDocumentClick = function (event) {
+        // Closing menu when clicked outside.
+        var target = event.target;
+        var clickedInside = target.closest("s-tiered-menu-item") || target.closest("s-tiered-menu-divider");
+        if (!clickedInside) {
+            this._tieredMenuEventService.closeAllMenusEvent.emit();
         }
-        if (this.mode === ProgressBarMode.Indeterminate && (this.value || this.targetValue || this.targetLabel)) {
-            throw new Error("When the mode is indeterminate, the value, targetValue and targetLabel parameters are not expected.");
+    };
+    TieredMenuComponent.prototype.onKeydownHandler = function (event) {
+        switch (event.key) {
+            case "Escape":
+                this._tieredMenuEventService.closeAllMenusEvent.emit();
+                break;
+            case " ":
+            case "Enter":
+                if (!this.tieredMenuService.currentItem.disabled) {
+                    this._tieredMenuEventService.selectItemEvent.emit(this.tieredMenuService.currentItem);
+                }
+                break;
+            case "ArrowLeft":
+                if (this.items.includes(this.tieredMenuService.currentItem)) {
+                    this._tieredMenuEventService.closeItemMenuEvent.emit(this.tieredMenuService.currentItem);
+                    this._changeDetectorRef.detectChanges();
+                }
+                break;
+            case "ArrowRight":
+                if (!this.tieredMenuService.currentItem.disabled && this.items.includes(this.tieredMenuService.currentItem)) {
+                    this._tieredMenuEventService.openItemMenuEvent.emit(this.tieredMenuService.currentItem);
+                    event.stopImmediatePropagation();
+                }
+                break;
+            case "ArrowUp":
+                if (!this.tieredMenuService.currentItem || this.items.includes(this.tieredMenuService.currentItem)) {
+                    this._tieredMenuEventService.decrementCurrentItemEvent.emit();
+                    event.stopImmediatePropagation();
+                }
+                break;
+            case "ArrowDown":
+                if (!this.tieredMenuService.currentItem || this.items.includes(this.tieredMenuService.currentItem)) {
+                    this._tieredMenuEventService.incrementCurrentItemEvent.emit();
+                    event.stopImmediatePropagation();
+                }
+                break;
         }
     };
-    __decorate([
-        Input()
-    ], ProgressBarComponent.prototype, "value", void 0);
-    __decorate([
-        Input()
-    ], ProgressBarComponent.prototype, "numberFormatOptions", void 0);
-    __decorate([
-        Input()
-    ], ProgressBarComponent.prototype, "targetValue", void 0);
-    __decorate([
-        Input()
-    ], ProgressBarComponent.prototype, "label", void 0);
-    __decorate([
-        Input()
-    ], ProgressBarComponent.prototype, "targetLabel", void 0);
-    __decorate([
-        Input()
-    ], ProgressBarComponent.prototype, "activeColor", void 0);
-    __decorate([
-        Input()
-    ], ProgressBarComponent.prototype, "showValue", void 0);
-    __decorate([
-        Input()
-    ], ProgressBarComponent.prototype, "mode", void 0);
-    ProgressBarComponent = __decorate([
-        Component({
-            selector: "s-progressbar",
-            template: "<ng-container *ngIf=\"mode === 'determinate'; then pbDeterminateTemplate else pbIndeterminateTemplate\"></ng-container>\n\n<ng-template #pbDeterminateTemplate>\n   <s-progressbar-determinate\n      [value]=\"value\"\n      [numberFormatOptions]=\"numberFormatOptions\"\n      [targetValue]=\"targetValue\"\n      [targetLabel]=\"targetLabel\"\n      [activeColor]=\"activeColor\"\n      [showValue]=\"showValue\">\n   </s-progressbar-determinate>\n</ng-template>\n\n<ng-template #pbIndeterminateTemplate>\n   <s-progressbar-indeterminate\n      [activeColor]=\"activeColor\"\n      [label]=\"label\">\n   </s-progressbar-indeterminate>\n</ng-template>",
-            styles: [".progress-bar{position:relative}.progress-bar .progress-bar-all{background-color:#d8d8d8;border-radius:4px;height:24px;overflow:hidden;width:100%}.progress-bar .progress-bar-all .progress-bar-active{-ms-flex-align:center;align-items:center;color:#fff;display:-ms-flexbox;display:flex;font-family:\"Open Sans\",sans-serif;font-size:14px;height:100%;-ms-flex-pack:center;justify-content:center;line-height:150%;-webkit-user-select:none;-ms-user-select:none;user-select:none;width:80%}.progress-bar .progress-bar-all .progress-bar-active--blue{background-color:#428bca}.progress-bar .progress-bar-all .progress-bar-active--green{background-color:#0c9348}.progress-bar .progress-bar-all .progress-bar-active--red{background-color:#c13018}.progress-bar .progress-bar-all .progress-bar-active--yellow{background-color:#fcbf10}.progress-bar .target{-ms-flex-align:start;align-items:flex-start;bottom:-38px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:absolute}.progress-bar .target .target-line{background-color:#333;height:40px;margin:8px 0;width:1px}.progress-bar .target .target-label{background-color:#426e78;border-radius:10px;color:#e5eaea;font-family:\"Open Sans\",sans-serif;font-size:12px;line-height:150%;padding:2px 12px}"]
-        })
-    ], ProgressBarComponent);
-    return ProgressBarComponent;
-}());
-
-var ProgressBarDeterminateComponent = /** @class */ (function () {
-    function ProgressBarDeterminateComponent(localeService) {
-        this.localeService = localeService;
-        this.showValue = true;
-    }
-    ProgressBarDeterminateComponent.prototype.ngOnInit = function () {
-        this.validateValues();
-        this.onGetLocale();
+    TieredMenuComponent.prototype.ngOnInit = function () {
+        this.tieredMenuService.currentItems = this.items;
+        this._subscribeEvents();
     };
-    ProgressBarDeterminateComponent.prototype.onGetLocale = function () {
-        var _this = this;
-        this.localeService.getLocale().subscribe({
-            next: function (locale) {
-                _this.numberFormat = new Intl.NumberFormat(locale !== null && locale !== void 0 ? locale : "pt-BR", _this.numberFormatOptions);
-            },
-            error: function () {
-                _this.numberFormat = new Intl.NumberFormat("pt-BR", _this.numberFormatOptions);
-            },
-        });
+    TieredMenuComponent.prototype.ngOnDestroy = function () {
+        this._unsubscribe$.next();
+        this._unsubscribe$.complete();
     };
-    ProgressBarDeterminateComponent.prototype.validateValues = function () {
-        if (this.value < 0 || this.value > 100) {
-            throw new Error("Invalid value for value");
+    TieredMenuComponent.prototype._incrementCurItem = function () {
+        if (!this.tieredMenuService.currentItem) {
+            this.tieredMenuService.currentItem = this.tieredMenuService.currentItems[0];
+            return;
         }
-        if (this.targetValue < 0 || this.targetValue > 100) {
-            throw new Error("Invalid value for targetValue");
+        else if (!this.items.includes(this.tieredMenuService.currentItem)) {
+            // Checking if it is the current menu.
+            return;
+        }
+        var currentIndex = this.tieredMenuService.currentItems.indexOf(this.tieredMenuService.currentItem) + 1;
+        if (currentIndex < this.tieredMenuService.currentItems.length) {
+            this.tieredMenuService.currentItem = this.tieredMenuService.currentItems[currentIndex];
+        }
+        else {
+            this.tieredMenuService.currentItem = this.tieredMenuService.currentItems[0];
+        }
+        if (this.tieredMenuService.currentItem.divider) {
+            this._incrementCurItem();
         }
     };
-    ProgressBarDeterminateComponent.ctorParameters = function () { return [
-        { type: LocaleService }
-    ]; };
-    __decorate([
-        Input()
-    ], ProgressBarDeterminateComponent.prototype, "value", void 0);
-    __decorate([
-        Input()
-    ], ProgressBarDeterminateComponent.prototype, "numberFormatOptions", void 0);
-    __decorate([
-        Input()
-    ], ProgressBarDeterminateComponent.prototype, "targetValue", void 0);
-    __decorate([
-        Input()
-    ], ProgressBarDeterminateComponent.prototype, "targetLabel", void 0);
-    __decorate([
-        Input()
-    ], ProgressBarDeterminateComponent.prototype, "activeColor", void 0);
-    __decorate([
-        Input()
-    ], ProgressBarDeterminateComponent.prototype, "showValue", void 0);
-    ProgressBarDeterminateComponent = __decorate([
-        Component({
-            selector: "s-progressbar-determinate",
-            template: "<div class=\"progressbar-determinate\">\n    <div class=\"progressbar-container\">\n       <div\n          class=\"progressbar-active\"\n          [ngClass]=\"{\n             'progressbar-active--blue' : activeColor === 'blue',\n             'progressbar-active--green': activeColor === 'green',\n             'progressbar-active--red': activeColor === 'red',\n             'progressbar-active--yellow': activeColor === 'yellow'\n          }\"\n          [ngStyle]=\"{ 'width': value + '%' }\">\n\n          {{ showValue && value ? numberFormat.format(value) + '%' : '' }}\n       </div>\n    </div>\n    <div\n       *ngIf=\"targetValue\"\n       class=\"target\"\n       [ngStyle]=\"{\n          'left': targetValue <= 50 ? targetValue + '%' : 'unset',\n          'right': targetValue > 50 ? 100 - targetValue + '%' : 'unset',\n          'align-items': targetValue > 50 ? 'flex-end' : 'flex-start'\n       }\">\n       <span class=\"target-line\"></span>\n       <span class=\"target-label\">\n           {{ targetLabel || numberFormat.format(value) + '%' }}\n       </span>\n    </div>\n </div>\n",
-            styles: [".progressbar-determinate{position:relative}.progressbar-determinate .progressbar-container{background-color:#d8d8d8;border-radius:4px;height:24px;overflow:hidden;width:100%}.progressbar-determinate .progressbar-container .progressbar-active{-ms-flex-align:center;align-items:center;color:#fff;display:-ms-flexbox;display:flex;font-family:\"Open Sans\",sans-serif;font-size:14px;height:100%;-ms-flex-pack:center;justify-content:center;line-height:150%;-webkit-user-select:none;-ms-user-select:none;user-select:none;width:80%}.progressbar-determinate .progressbar-container .progressbar-active--blue{background-color:#428bca}.progressbar-determinate .progressbar-container .progressbar-active--green{background-color:#0c9348}.progressbar-determinate .progressbar-container .progressbar-active--red{background-color:#c13018}.progressbar-determinate .progressbar-container .progressbar-active--yellow{background-color:#fcbf10;color:#212533}.progressbar-determinate .target{-ms-flex-align:start;align-items:flex-start;bottom:-38px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:absolute}.progressbar-determinate .target .target-line{background-color:#333;height:40px;margin:8px 0;width:1px}.progressbar-determinate .target .target-label{background-color:#426e78;border-radius:10px;color:#e5eaea;font-family:\"Open Sans\",sans-serif;font-size:12px;line-height:150%;padding:2px 12px}"]
-        })
-    ], ProgressBarDeterminateComponent);
-    return ProgressBarDeterminateComponent;
-}());
-
-var ProgressBarIndeterminateComponent = /** @class */ (function () {
-    function ProgressBarIndeterminateComponent() {
-    }
-    __decorate([
-        Input()
-    ], ProgressBarIndeterminateComponent.prototype, "activeColor", void 0);
-    __decorate([
-        Input()
-    ], ProgressBarIndeterminateComponent.prototype, "label", void 0);
-    ProgressBarIndeterminateComponent = __decorate([
-        Component({
-            selector: "s-progressbar-indeterminate",
-            template: "<div class=\"progressbar-indeterminate\">\n    <div class=\"progressbar-container\">\n        <div class=\"indeterminate-bar\" [ngClass]=\"{\n            'indeterminate-bar--blue': activeColor === 'blue',\n            'indeterminate-bar--green': activeColor === 'green',\n            'indeterminate-bar--red': activeColor === 'red',\n            'indeterminate-bar--yellow': activeColor === 'yellow'\n        }\"></div>\n    </div>\n\n    <span *ngIf=\"label\" class=\"progressbar-label\">{{ label }}</span>\n</div>\n",
-            styles: [".progressbar-indeterminate{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center}.progressbar-indeterminate .progressbar-container{background-color:#d8d8d8;border-radius:4px;height:24px;margin:8px 0;overflow:hidden;width:100%}.progressbar-indeterminate .indeterminate-bar{animation:5s infinite indeterminate-progress;background-color:#428bca;height:100%;width:40%}.progressbar-indeterminate .indeterminate-bar--blue{background-color:#428bca}.progressbar-indeterminate .indeterminate-bar--green{background-color:#0c9348}.progressbar-indeterminate .indeterminate-bar--red{background-color:#c13018}.progressbar-indeterminate .indeterminate-bar--yellow{background-color:#fcbf10}.progressbar-indeterminate .progressbar-label{font-family:\"Open Sans\" sans-serif;font-size:12px;line-height:150%;color:#212533}@keyframes indeterminate-progress{0%{transform:translateX(-250%)}100%{transform:translateX(250%)}}"]
-        })
-    ], ProgressBarIndeterminateComponent);
-    return ProgressBarIndeterminateComponent;
-}());
-
-var ProgressBarModule = /** @class */ (function () {
-    function ProgressBarModule() {
-    }
-    ProgressBarModule = __decorate([
-        NgModule({
-            imports: [CommonModule],
-            declarations: [
-                ProgressBarComponent,
-                ProgressBarDeterminateComponent,
-                ProgressBarIndeterminateComponent,
-            ],
-            exports: [ProgressBarComponent],
-        })
-    ], ProgressBarModule);
-    return ProgressBarModule;
-}());
-
-var PanelComponent = /** @class */ (function () {
-    function PanelComponent() {
-        this.toggleable = true;
-        this.collapsed = false;
-        this.severity = EnumSeverity.Default;
-        this.collapsedChange = new EventEmitter();
-        this.EnumSeverity = EnumSeverity;
-    }
-    PanelComponent.prototype.onCollapsedChange = function (collapsed) {
-        this.collapsed = collapsed;
-        this.collapsedChange.emit(this.collapsed);
-    };
-    __decorate([
-        Input()
-    ], PanelComponent.prototype, "header", void 0);
-    __decorate([
-        Input()
-    ], PanelComponent.prototype, "toggleable", void 0);
-    __decorate([
-        Input()
-    ], PanelComponent.prototype, "collapsed", void 0);
-    __decorate([
-        Input()
-    ], PanelComponent.prototype, "severity", void 0);
-    __decorate([
-        Input()
-    ], PanelComponent.prototype, "borderButtonOptions", void 0);
-    __decorate([
-        Output()
-    ], PanelComponent.prototype, "collapsedChange", void 0);
-    PanelComponent = __decorate([
-        Component({
-            selector: "s-panel",
-            template: "<p-panel\n    [toggleable]=\"toggleable\"\n    [collapsed]=\"collapsed\"\n    [ngClass]=\"{\n        'panel--severity-default': severity === EnumSeverity.Default,\n        'panel--severity-info': severity === EnumSeverity.Info,\n        'panel--severity-warn': severity === EnumSeverity.Warn,\n        'panel--severity-error': severity === EnumSeverity.Error,\n        'panel--severity-success': severity == EnumSeverity.Success\n    }\"\n    (collapsedChange)=\"onCollapsedChange($event)\"\n>\n    <p-header>\n        <s-border-button\n            *ngIf=\"\n                borderButtonOptions?.visible\n                    ? borderButtonOptions?.visible(severity)\n                    : false\n            \"\n            [severity]=\"severity\"\n            [options]=\"borderButtonOptions\"\n            class=\"panel__border-button\"\n            [@BorderButtonAnimation]\n        ></s-border-button>\n        <span>\n            {{ header }}\n        </span>\n    </p-header>\n\n    <ng-content></ng-content>\n</p-panel>",
-            animations: [
-                trigger("BorderButtonAnimation", [
-                    transition(":enter", [
-                        style$7({ transform: "scaleY(0)", opacity: 0 }),
-                        animate("300ms ease", style$7({ transform: "scaleY(1)", opacity: 1 })),
-                    ]),
-                    transition(":leave", [
-                        style$7({ transform: "scaleY(1)", opacity: 1 }),
-                        animate("300ms ease", style$7({ transform: "scaleY(0)", opacity: 0 })),
-                    ]),
-                ]),
-            ],
-            styles: [":host{display:block}:host ::ng-deep .ui-panel{position:relative}:host ::ng-deep .panel--severity-default .ui-panel{border-color:#ccc}:host ::ng-deep .panel--severity-info .ui-panel{border-color:#428bca;transition:border-color .5s}:host ::ng-deep .panel--severity-warn .ui-panel{border-color:#f8931f;transition:border-color .5s}:host ::ng-deep .panel--severity-error .ui-panel{border-color:#c13018;transition:border-color .5s}:host ::ng-deep .panel--severity-success .ui-panel{border-color:#0c9348;transition:border-color .5s}.panel__border-button{position:absolute;top:-13px;right:15px;z-index:1}"]
-        })
-    ], PanelComponent);
-    return PanelComponent;
-}());
-
-var PanelModule = /** @class */ (function () {
-    function PanelModule() {
-    }
-    PanelModule = __decorate([
-        NgModule({
-            imports: [CommonModule, PanelModule$1, BorderButtonModule],
-            declarations: [PanelComponent],
-            exports: [PanelComponent],
-        })
-    ], PanelModule);
-    return PanelModule;
-}());
-
-var RatingScaleComponent = /** @class */ (function () {
-    function RatingScaleComponent() {
-        this.disabled = false;
-    }
-    RatingScaleComponent_1 = RatingScaleComponent;
-    RatingScaleComponent.prototype.writeValue = function (value) {
-        if (!this.disabled) {
-            this.value = value;
+    TieredMenuComponent.prototype._decrementCurItem = function () {
+        if (!this.tieredMenuService.currentItem) {
+            this.tieredMenuService.currentItem = this.tieredMenuService.currentItems[0];
+            return;
+            // Checking if it is the current menu.
+        }
+        else if (!this.items.includes(this.tieredMenuService.currentItem)) {
+            return;
+        }
+        var curIndex = this.tieredMenuService.currentItems.indexOf(this.tieredMenuService.currentItem) - 1;
+        if (curIndex >= 0) {
+            this.tieredMenuService.currentItem = this.tieredMenuService.currentItems[curIndex];
+        }
+        else {
+            this.tieredMenuService.currentItem = this.tieredMenuService.currentItems[this.tieredMenuService.currentItems.length - 1];
+        }
+        if (this.tieredMenuService.currentItem.divider) {
+            this._decrementCurItem();
         }
     };
-    RatingScaleComponent.prototype.registerOnChange = function (onChange) {
-        this._onChange = onChange;
+    TieredMenuComponent.prototype._createMenu = function (items, position) {
+        var _this = this;
+        if (!this._componentRef && items) {
+            var componentFactory = this._componentFactoryResolver.resolveComponentFactory(TieredMenuComponent_1);
+            this._componentRef = componentFactory.create(this._injector);
+            this._appRef.attachView(this._componentRef.hostView);
+            var domElem = this._componentRef.hostView.rootNodes[0];
+            document.body.appendChild(domElem);
+            // Setting the menu items.
+            this._componentRef.instance.items = items;
+            // Subscribe menu events.
+            this._componentRef.instance.destroyRequest.subscribe(function (propagate) {
+                _this._destroy(propagate);
+            });
+            this._menuDivElement = domElem.querySelector(".menu");
+            this._setMenuPosition(position);
+        }
     };
-    RatingScaleComponent.prototype.registerOnTouched = function (onTouched) {
-        this._onTouched = onTouched;
+    TieredMenuComponent.prototype._destroy = function (propagate) {
+        if (propagate === void 0) { propagate = true; }
+        if (this._componentRef !== null) {
+            this._appRef.detachView(this._componentRef.hostView);
+            this._componentRef.destroy();
+            this._componentRef = null;
+            this._menuDivElement = null;
+        }
+        if (propagate) {
+            this.destroyRequest.emit();
+        }
     };
-    RatingScaleComponent.prototype.onSelect = function (rating) {
-        this.value = rating;
-        if (this._onChange) {
-            this._onChange(this.value);
+    TieredMenuComponent.prototype._setMenuPosition = function (position) {
+        var _a, _b;
+        var ITEM_HEIGHT = 37;
+        var DIVIDER_HEIGHT = 5;
+        var PADDING = 8;
+        if (this._componentRef !== null) {
+            var top_1 = position.top, right = position.right, bottom = position.bottom, left = position.left;
+            var itemsCount = (_a = this._componentRef.instance.items) === null || _a === void 0 ? void 0 : _a.reduce(function (count, item) {
+                return !item.divider ? count + 1 : count;
+            }, 0);
+            var dividersCount = (_b = this._componentRef.instance.items) === null || _b === void 0 ? void 0 : _b.reduce(function (count, item) {
+                return item.divider ? count + 1 : count;
+            }, 0);
+            // I need to calculate the height of the component because the internal elements have not been created yet.
+            var menuHeight = itemsCount * ITEM_HEIGHT + dividersCount * DIVIDER_HEIGHT + PADDING + 8;
+            var menuWidth = this._menuDivElement.getBoundingClientRect().width;
+            var rightFreeSpace = window.innerWidth - right;
+            var bottomFreeSpace = window.innerHeight - bottom;
+            if (rightFreeSpace > menuWidth) {
+                this._componentRef.instance.left = right;
+            }
+            else {
+                this._componentRef.instance.left = left - menuWidth;
+            }
+            if (bottomFreeSpace <= menuHeight) {
+                this._componentRef.instance.top = Math.max(window.innerHeight - menuHeight, window.scrollY);
+            }
+            else {
+                this._componentRef.instance.top = window.scrollY + top_1;
+            }
         }
     };
-    var RatingScaleComponent_1;
+    TieredMenuComponent.prototype._subscribeEvents = function () {
+        var _this = this;
+        // Increment current item event.
+        this._tieredMenuEventService.incrementCurrentItemEvent.pipe(takeUntil(this._unsubscribe$)).subscribe(function () {
+            _this._incrementCurItem();
+        });
+        // Decrement current item event.
+        this._tieredMenuEventService.decrementCurrentItemEvent.pipe(takeUntil(this._unsubscribe$)).subscribe(function () {
+            _this._decrementCurItem();
+        });
+        // Select item event.
+        this._tieredMenuEventService.selectItemEvent.pipe(takeUntil(this._unsubscribe$)).subscribe(function (item) {
+            if (item.submenu) {
+                _this._tieredMenuEventService.openItemMenuEvent.emit(item);
+            }
+            else if (item.command) {
+                _this._tieredMenuEventService.closeAllMenusEvent.emit();
+                item.command();
+            }
+        });
+        // Close all menus event.
+        this._tieredMenuEventService.closeAllMenusEvent.pipe(takeUntil(this._unsubscribe$)).subscribe(function () {
+            _this._destroy();
+            _this.tieredMenuService.currentItem = null;
+            _this.tieredMenuService.currentItems = _this.tieredMenuService.items;
+            _this.tieredMenuService.markAllItemsAsClosed(_this.tieredMenuService.items);
+        });
+        // Open item menu event.
+        this._tieredMenuEventService.openItemMenuEvent.pipe(takeUntil(this._unsubscribe$)).subscribe(function (item) {
+            if (_this.tieredMenuService.currentItem) {
+                if (_this.tieredMenuService.currentItem.parent === item) {
+                    return;
+                }
+                if (!_this.tieredMenuService.searchTheHierarchy(_this.tieredMenuService.currentItem.parent, item)) {
+                    var current = _this.tieredMenuService.currentItem;
+                    current.isOpen = false;
+                    while ((current === null || current === void 0 ? void 0 : current.parent) !== item.parent) {
+                        _this._tieredMenuEventService.closeItemMenuEvent.emit(current);
+                        _this._changeDetectorRef.detectChanges();
+                        current = current.parent;
+                    }
+                    if (current) {
+                        current.isOpen = false;
+                    }
+                }
+            }
+            if (item.submenu && !item.isOpen && _this.items.includes(item)) {
+                var _a = document.querySelector("#" + item.id).getBoundingClientRect(), top_2 = _a.top, right = _a.right, left = _a.left, bottom = _a.bottom;
+                var position = { top: top_2, right: right, left: left, bottom: bottom };
+                _this._createMenu(item.submenu, position);
+                _this.tieredMenuService.currentItems = item.submenu;
+                _this.tieredMenuService.currentItem = item.submenu[0];
+                item.isOpen = true;
+            }
+        });
+        // Close item menu event.
+        this._tieredMenuEventService.closeItemMenuEvent
+            .pipe(takeUntil(this._unsubscribe$))
+            .subscribe(function (item) {
+            var _a, _b;
+            if (_this.items.some(function (i) { return i.id === item.id; })) {
+                if (item.parent) {
+                    item.parent.isOpen = false;
+                }
+                _this.tieredMenuService.currentItems = ((_b = (_a = item === null || item === void 0 ? void 0 : item.parent) === null || _a === void 0 ? void 0 : _a.parent) === null || _b === void 0 ? void 0 : _b.submenu) || _this.tieredMenuService.items;
+                _this.tieredMenuService.currentItem = item.parent;
+                _this.destroyRequest.emit(false);
+            }
+        });
+    };
+    var TieredMenuComponent_1;
+    TieredMenuComponent.ctorParameters = function () { return [
+        { type: ApplicationRef },
+        { type: ComponentFactoryResolver },
+        { type: Injector },
+        { type: ChangeDetectorRef },
+        { type: TieredMenuService },
+        { type: TieredMenuEventService }
+    ]; };
     __decorate([
-        Input()
-    ], RatingScaleComponent.prototype, "nodes", void 0);
+        Output()
+    ], TieredMenuComponent.prototype, "destroyRequest", void 0);
     __decorate([
-        Input()
-    ], RatingScaleComponent.prototype, "startLabel", void 0);
+        HostListener("window:resize")
+    ], TieredMenuComponent.prototype, "onResize", null);
     __decorate([
-        Input()
-    ], RatingScaleComponent.prototype, "endLabel", void 0);
+        HostListener("document:click", ["$event"])
+    ], TieredMenuComponent.prototype, "onDocumentClick", null);
     __decorate([
-        Input()
-    ], RatingScaleComponent.prototype, "disabled", void 0);
-    RatingScaleComponent = RatingScaleComponent_1 = __decorate([
+        HostListener("document:keydown", ["$event"])
+    ], TieredMenuComponent.prototype, "onKeydownHandler", null);
+    TieredMenuComponent = TieredMenuComponent_1 = __decorate([
         Component({
-            selector: "s-rating-scale",
-            template: "<div\n    class=\"rating-scale\"\n    [ngClass]=\"{ 'rating-scale--disabled': disabled }\">\n    <div class=\"nodes\">\n        <button\n            *ngFor=\"let node of nodes; index as i\"\n            class=\"node\"\n            [ngClass]=\"{ 'node--selected': value?.id === node.id && !disabled }\"\n            tabindex=\"0\"\n            (click)=\"onSelect(node)\">            \n            <span\n                *ngIf=\"node.icon\"\n                class=\"icon fas\"\n                [ngClass]=\"node.icon\">\n            </span>\n            <span\n                *ngIf=\"node.title\"\n                class=\"label\">\n                {{ node.title }}\n            </span>\n        </button>\n    </div>\n    <div class=\"labels\">\n        <span>{{ startLabel }}</span>\n        <span>{{ endLabel }}</span>\n    </div>\n</div>",
-            providers: [{
-                    provide: NG_VALUE_ACCESSOR,
-                    useExisting: forwardRef(function () { return RatingScaleComponent_1; }),
-                    multi: true,
-                }],
-            styles: [".rating-scale{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.rating-scale .nodes{display:-ms-flexbox;display:flex}.rating-scale .nodes .node{-ms-flex-align:center;align-items:center;background-color:#fff;border-radius:6px;display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-pack:center;justify-content:center;margin:0 2px;padding:8px;border:1px solid #7892a1}.rating-scale .nodes .node .icon{color:#6e7280;font-size:1rem}.rating-scale .nodes .node .label{color:#212533;font-size:.875rem;font-weight:400;line-height:150%}.rating-scale .nodes .node .icon,.rating-scale .nodes .node .label{margin:6px}.rating-scale .nodes .node--selected{background-color:#d5e8ec;border-color:#428bca;color:#428bca}.rating-scale .nodes .node:first-child{margin-left:0}.rating-scale .nodes .node:last-child{margin-right:0}.rating-scale .labels{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;padding:12px 0}.rating-scale .labels span{color:#080808;font-family:\"Open Sans\" sans-serif;font-size:.875rem;font-weight:400;line-height:150%}.rating-scale--disabled{opacity:.5}.rating-scale:not(.rating-scale--disabled) .node{cursor:pointer}.rating-scale:not(.rating-scale--disabled) .node:hover{background-color:#dedce5}.rating-scale:not(.rating-scale--disabled) .node:focus{border-width:2px;outline:0}"]
+            selector: "s-tiered-menu",
+            template: "<div\n    class=\"menu\"\n    [ngStyle]=\"{\n        'left': left + 'px',\n        'top': top + 'px'\n    }\">\n\n    <div *ngFor=\"let item of items\">\n        <s-tiered-menu-item\n            *ngIf=\"item.visible && !item.divider\"\n            [item]=\"item\"\n            [focused]=\"item === tieredMenuService.currentItem\"\n            [highlight]=\"item.isOpen\"\n            triggerEvent=\"hover\"\n            [closeOnClick]=\"false\">\n        </s-tiered-menu-item>\n        <s-tiered-menu-divider *ngIf=\"item.divider\"></s-tiered-menu-divider>\n    </div>\n</div>",
+            styles: [".menu{background-color:#fff;border:1px solid #ccc;border-radius:6px;box-shadow:0 2px 12px 0 rgba(0,0,0,.1);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:column;flex-direction:column;max-height:100vh;min-width:176px;padding:4px 0;overflow-y:auto;position:absolute;z-index:9999}"]
         })
-    ], RatingScaleComponent);
-    return RatingScaleComponent;
+    ], TieredMenuComponent);
+    return TieredMenuComponent;
 }());
 
-var RatingScaleModule = /** @class */ (function () {
-    function RatingScaleModule() {
+var TieredMenuGlobalService = /** @class */ (function () {
+    function TieredMenuGlobalService() {
     }
-    RatingScaleModule = __decorate([
-        NgModule({
-            imports: [
-                CommonModule,
-                ReactiveFormsModule,
-            ],
-            declarations: [RatingScaleComponent],
-            exports: [RatingScaleComponent],
-        })
-    ], RatingScaleModule);
-    return RatingScaleModule;
+    TieredMenuGlobalService = __decorate([
+        Injectable()
+    ], TieredMenuGlobalService);
+    return TieredMenuGlobalService;
 }());
 
-var SelectButtonComponent = /** @class */ (function () {
-    function SelectButtonComponent() {
-        this.multiple = false;
-        this.itemSelected = new EventEmitter();
-        this.itemClicked = new EventEmitter();
-        this.disabled = false;
-        this.activeItems = new Set();
+var TieredMenuDirective = /** @class */ (function () {
+    function TieredMenuDirective(_elementRef, _appRef, _componentFactoryResolver, _injector, _tieredMenuEventService, _tieredMenuService, _tieredMenuGlobalService, _changeDetectorRef) {
+        this._elementRef = _elementRef;
+        this._appRef = _appRef;
+        this._componentFactoryResolver = _componentFactoryResolver;
+        this._injector = _injector;
+        this._tieredMenuEventService = _tieredMenuEventService;
+        this._tieredMenuService = _tieredMenuService;
+        this._tieredMenuGlobalService = _tieredMenuGlobalService;
+        this._changeDetectorRef = _changeDetectorRef;
+        this.items = [];
+        this.triggerEvent = "click";
+        this._componentRef = null;
+        this._isNested = false;
+        this._isOpen = false;
+        this._unsubscribe$ = new Subject();
     }
-    SelectButtonComponent_1 = SelectButtonComponent;
-    SelectButtonComponent.prototype.writeValue = function (value) {
-        var _this = this;
-        if (!value)
-            return;
-        this.activeItems.clear();
-        if (Array.isArray(value)) {
-            value.forEach(function (item) {
-                _this.items.forEach(function (iItem) {
-                    if (_this._compareItems(item, iItem)) {
-                        _this.activeItems.add(iItem);
-                    }
-                });
-            });
+    TieredMenuDirective.prototype.onClick = function (event) {
+        if (this.triggerEvent === "click" && !this._isOpen) {
+            this._lastActiveElement = document.activeElement;
+            this._createMenu();
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    };
+    TieredMenuDirective.prototype.ngOnInit = function () {
+        this._subscribeEvents();
+    };
+    TieredMenuDirective.prototype.ngDoCheck = function () {
+        if (!this.previousItems) {
+            this.previousItems = this._tieredMenuService.cloneItems(this.items);
+        }
+        var hasChanges = false;
+        if (this.items.length !== this.previousItems.length) {
+            hasChanges = true;
         }
         else {
-            this.items.forEach(function (iItem) {
-                if (_this._compareItems(value, iItem)) {
-                    _this.activeItems.add(iItem);
+            for (var i = 0; i < this.items.length; i++) {
+                if (!this._compareItems(this.items[i], this.previousItems[i])) {
+                    hasChanges = true;
+                    break;
                 }
-            });
+            }
         }
+        if (hasChanges) {
+            this._updateServiceItems();
+            this._changeDetectorRef.detectChanges();
+            this._rebuildMenu();
+        }
+        this.previousItems = this._tieredMenuService.cloneItems(this.items);
     };
-    SelectButtonComponent.prototype.registerOnChange = function (onChange) {
-        this.onChange = onChange;
+    TieredMenuDirective.prototype.ngOnDestroy = function () {
+        this._unsubscribe$.next();
+        this._unsubscribe$.complete();
+        this._destroy();
     };
-    SelectButtonComponent.prototype.registerOnTouched = function (onTouched) {
-        this.onTouched = onTouched;
+    TieredMenuDirective.prototype._createMenu = function () {
+        var _a, _b, _c;
+        this._updateServiceItems();
+        if (!this._componentRef && ((_a = this._tieredMenuService.items) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+            (_b = this._tieredMenuGlobalService.lastInstance) === null || _b === void 0 ? void 0 : _b._destroy();
+            this._tieredMenuGlobalService.lastInstance = this;
+            (_c = this._lastActiveElement) === null || _c === void 0 ? void 0 : _c.blur();
+            this._isOpen = true;
+            this._isNested = document.body.clientWidth < 600;
+            this._isNested ? this._createNestedMenu() : this._createTieredMenu();
+        }
     };
-    SelectButtonComponent.prototype.setDisabledState = function (disabled) {
-        this.disabled = disabled;
+    TieredMenuDirective.prototype._createTieredMenu = function () {
+        var _this = this;
+        var _a;
+        if (!this._componentRef && ((_a = this._tieredMenuService.items) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+            var componentFactory = this._componentFactoryResolver.resolveComponentFactory(TieredMenuComponent);
+            this._componentRef = componentFactory.create(this._injector);
+            this._appRef.attachView(this._componentRef.hostView);
+            var domElem = this._componentRef.hostView.rootNodes[0];
+            document.body.appendChild(domElem);
+            this._setMenuComponentProperties();
+            this._componentRef.instance.destroyRequest.pipe(takeUntil(this._unsubscribe$)).subscribe(function () {
+                _this._destroy();
+            });
+            this._setMenuPosition();
+        }
     };
-    SelectButtonComponent.prototype.onItemSelect = function (item) {
-        var _a, _b;
-        if (this.disabled || item.disabled)
-            return;
-        this.itemClicked.emit(item);
-        if (!this.multiple) {
-            this.activeItems.clear();
+    TieredMenuDirective.prototype._createNestedMenu = function () {
+        var _a;
+        if (!this._componentRef && ((_a = this._tieredMenuService.items) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+            var componentFactory = this._componentFactoryResolver.resolveComponentFactory(TieredMenuNestedComponent);
+            this._componentRef = componentFactory.create(this._injector);
+            this._appRef.attachView(this._componentRef.hostView);
+            var domElem = this._componentRef.hostView.rootNodes[0];
+            document.body.appendChild(domElem);
+            this._setMenuComponentProperties();
+            this._setMenuPosition();
         }
-        this.activeItems.add(item);
-        this.itemSelected.emit(__spread(this.activeItems));
-        (_a = this.onChange) === null || _a === void 0 ? void 0 : _a.call(this, __spread(this.activeItems));
-        (_b = this.onTouched) === null || _b === void 0 ? void 0 : _b.call(this, __spread(this.activeItems));
     };
-    SelectButtonComponent.prototype._compareItems = function (item1, item2) {
-        var _compare = function (a, b) {
-            var e_1, _a;
-            if (a === b) {
-                return true;
-            }
-            if (a === undefined || b === undefined || typeof a !== "object" || a === null || typeof b !== "object" || b === null) {
-                return false;
-            }
-            if (Array.isArray(a) !== Array.isArray(b)) {
-                return false;
-            }
-            var keysA = Object.keys(a);
-            var keysB = Object.keys(b);
-            if (keysA.length !== keysB.length) {
-                return false;
+    TieredMenuDirective.prototype._destroy = function () {
+        if (this._componentRef) {
+            this._isOpen = false;
+            window.clearTimeout(this._showTimeout);
+            this._appRef.detachView(this._componentRef.hostView);
+            this._componentRef.destroy();
+            this._componentRef = null;
+            this._tieredMenuService.currentItems = this._tieredMenuService.items;
+            this._tieredMenuService.currentItem = this._tieredMenuService.items[0];
+            this._tieredMenuEventService.closeAllMenusEvent.emit();
+        }
+    };
+    TieredMenuDirective.prototype._setMenuPosition = function () {
+        var _a, _b;
+        var ITEM_HEIGHT = 37;
+        var ITEM_WIDTH = 176;
+        var DIVIDER_HEIGHT = 5;
+        var PADDING = 8;
+        var MARGIN = 4;
+        if (this._componentRef !== null) {
+            this._componentRef.instance.top = 8;
+            var _c = this._elementRef.nativeElement.getBoundingClientRect(), bottom = _c.bottom, left = _c.left, right = _c.right;
+            var itemsCount = (_a = this._componentRef.instance.items) === null || _a === void 0 ? void 0 : _a.reduce(function (count, item) {
+                return !item.divider ? count + 1 : count;
+            }, 0);
+            var dividersCount = (_b = this._componentRef.instance.items) === null || _b === void 0 ? void 0 : _b.reduce(function (count, item) {
+                return item.divider ? count + 1 : count;
+            }, 0);
+            var menuHeight = itemsCount * ITEM_HEIGHT + dividersCount * DIVIDER_HEIGHT + PADDING + MARGIN;
+            var rightFreeSpace = window.innerWidth - right;
+            var bottomFreeSpace = window.innerHeight - bottom;
+            this._componentRef.instance.top = bottom;
+            this._componentRef.instance.left = left;
+            if (bottomFreeSpace <= menuHeight) {
+                this._componentRef.instance.top = Math.max(scrollY + bottom - menuHeight, 0);
             }
-            try {
-                for (var keysA_1 = __values(keysA), keysA_1_1 = keysA_1.next(); !keysA_1_1.done; keysA_1_1 = keysA_1.next()) {
-                    var key = keysA_1_1.value;
-                    if (!keysB.includes(key) || !_compare(a[key], b[key])) {
-                        return false;
-                    }
-                }
+            else {
+                this._componentRef.instance.top = window.scrollY + bottom + MARGIN;
             }
-            catch (e_1_1) { e_1 = { error: e_1_1 }; }
-            finally {
-                try {
-                    if (keysA_1_1 && !keysA_1_1.done && (_a = keysA_1.return)) _a.call(keysA_1);
-                }
-                finally { if (e_1) throw e_1.error; }
+            if (rightFreeSpace > 176) {
+                this._componentRef.instance.left = window.scrollX + left;
             }
-            for (var key in a) {
-                if (a.hasOwnProperty(key) !== b.hasOwnProperty(key)) {
-                    return false;
-                }
+            else {
+                this._componentRef.instance.left = window.scrollX + right - ITEM_WIDTH;
             }
-            return true;
-        };
-        return _compare(item1, item2);
+            if (this._isNested) {
+                this._componentRef.instance.left = MARGIN;
+            }
+        }
     };
-    var SelectButtonComponent_1;
+    TieredMenuDirective.prototype._setMenuComponentProperties = function () {
+        if (this._componentRef != null) {
+            this._componentRef.instance.items = this._tieredMenuService.items;
+        }
+    };
+    TieredMenuDirective.prototype._subscribeEvents = function () {
+        var _this = this;
+        this._tieredMenuEventService.closeAllMenusEvent.pipe(takeUntil(this._unsubscribe$)).subscribe(function () {
+            _this._tieredMenuService.items = _this._tieredMenuService.markAllItemsAsClosed(_this._tieredMenuService.items);
+            _this._destroy();
+        });
+    };
+    TieredMenuDirective.prototype._compareItems = function (item1, item2) {
+        return JSON.stringify(item1) === JSON.stringify(item2);
+    };
+    TieredMenuDirective.prototype._rebuildMenu = function () {
+        this._destroy();
+    };
+    TieredMenuDirective.prototype._updateServiceItems = function () {
+        this._tieredMenuService.items = this._tieredMenuService.normalizeData(this.items);
+        this._tieredMenuService.currentItems = this._tieredMenuService.items;
+        this._tieredMenuService.currentItem = this._tieredMenuService.items[0];
+    };
+    TieredMenuDirective.ctorParameters = function () { return [
+        { type: ElementRef },
+        { type: ApplicationRef },
+        { type: ComponentFactoryResolver },
+        { type: Injector },
+        { type: TieredMenuEventService },
+        { type: TieredMenuService },
+        { type: TieredMenuGlobalService },
+        { type: ChangeDetectorRef }
+    ]; };
     __decorate([
         Input()
-    ], SelectButtonComponent.prototype, "items", void 0);
+    ], TieredMenuDirective.prototype, "items", void 0);
     __decorate([
         Input()
-    ], SelectButtonComponent.prototype, "multiple", void 0);
-    __decorate([
-        Output()
-    ], SelectButtonComponent.prototype, "itemSelected", void 0);
+    ], TieredMenuDirective.prototype, "triggerEvent", void 0);
     __decorate([
-        Output()
-    ], SelectButtonComponent.prototype, "itemClicked", void 0);
-    SelectButtonComponent = SelectButtonComponent_1 = __decorate([
-        Component({
-            selector: "s-select-button",
-            template: "<div\n    class=\"select-button\"\n    [ngClass]=\"{ 'select-button--disabled': disabled }\">\n    <s-select-button-item\n        *ngFor=\"let item of items; index as i\"\n        [label]=\"item.label\"\n        [active]=\"activeItems?.has(item)\"\n        [disabled]=\"disabled || item.disabled\"\n        [first]=\"i === 0\"\n        [last]=\"i === items.length - 1\"\n        (click)=\"onItemSelect(item)\">\n    </s-select-button-item>\n</div>",
-            providers: [
-                {
-                    provide: NG_VALUE_ACCESSOR,
-                    useExisting: forwardRef(function () { return SelectButtonComponent_1; }),
-                    multi: true,
-                },
+        HostListener("click", ["$event"])
+    ], TieredMenuDirective.prototype, "onClick", null);
+    TieredMenuDirective = __decorate([
+        Directive({
+            selector: "[sTieredMenu]",
+            providers: [TieredMenuEventService, TieredMenuService],
+        })
+    ], TieredMenuDirective);
+    return TieredMenuDirective;
+}());
+
+var TieredMenuModule = /** @class */ (function () {
+    function TieredMenuModule() {
+    }
+    TieredMenuModule = __decorate([
+        NgModule({
+            imports: [
+                CommonModule,
             ],
-            styles: [".select-button{overflow:hidden}"]
+            declarations: [
+                TieredMenuDirective,
+                TieredMenuComponent,
+                TieredMenuNestedComponent,
+                TieredMenuItemComponent,
+                TieredMenuDividerComponent,
+            ],
+            exports: [TieredMenuDirective],
+            providers: [TieredMenuGlobalService],
         })
-    ], SelectButtonComponent);
-    return SelectButtonComponent;
+    ], TieredMenuModule);
+    return TieredMenuModule;
 }());
 
-var SelectButtonItemComponent = /** @class */ (function () {
-    function SelectButtonItemComponent() {
-        this.active = false;
-        this.first = false;
-        this.last = false;
-        this.disabled = false;
+var NavigationButtonModule = /** @class */ (function () {
+    function NavigationButtonModule() {
+    }
+    NavigationButtonModule = __decorate([
+        NgModule({
+            imports: [CommonModule, TieredMenuModule, TooltipModule],
+            declarations: [NavigationButtonComponent],
+            exports: [NavigationButtonComponent],
+        })
+    ], NavigationButtonModule);
+    return NavigationButtonModule;
+}());
+
+var ObjectCardFieldComponent = /** @class */ (function () {
+    function ObjectCardFieldComponent() {
+        this.id = "s-object-card-field-" + ObjectCardFieldComponent_1.nextId++;
+        this.buttonClick = new EventEmitter();
     }
+    ObjectCardFieldComponent_1 = ObjectCardFieldComponent;
+    var ObjectCardFieldComponent_1;
+    ObjectCardFieldComponent.nextId = 0;
     __decorate([
         Input()
-    ], SelectButtonItemComponent.prototype, "label", void 0);
+    ], ObjectCardFieldComponent.prototype, "id", void 0);
     __decorate([
         Input()
-    ], SelectButtonItemComponent.prototype, "active", void 0);
+    ], ObjectCardFieldComponent.prototype, "imageSource", void 0);
     __decorate([
         Input()
-    ], SelectButtonItemComponent.prototype, "first", void 0);
+    ], ObjectCardFieldComponent.prototype, "imageAlt", void 0);
     __decorate([
         Input()
-    ], SelectButtonItemComponent.prototype, "last", void 0);
+    ], ObjectCardFieldComponent.prototype, "iconClass", void 0);
     __decorate([
         Input()
-    ], SelectButtonItemComponent.prototype, "disabled", void 0);
-    SelectButtonItemComponent = __decorate([
+    ], ObjectCardFieldComponent.prototype, "label", void 0);
+    __decorate([
+        Input()
+    ], ObjectCardFieldComponent.prototype, "description", void 0);
+    __decorate([
+        Input()
+    ], ObjectCardFieldComponent.prototype, "buttonLabel", void 0);
+    __decorate([
+        Input()
+    ], ObjectCardFieldComponent.prototype, "buttonModel", void 0);
+    __decorate([
+        Output()
+    ], ObjectCardFieldComponent.prototype, "buttonClick", void 0);
+    __decorate([
+        ContentChild(ThumbnailComponent, { static: true })
+    ], ObjectCardFieldComponent.prototype, "thumbnailComponent", void 0);
+    __decorate([
+        ViewChild(TemplateRef, { static: true })
+    ], ObjectCardFieldComponent.prototype, "content", void 0);
+    ObjectCardFieldComponent = ObjectCardFieldComponent_1 = __decorate([
         Component({
-            selector: "s-select-button-item",
-            template: "<button\n    class=\"select-button-item\"\n    [ngClass]=\"{\n        'select-button-item--active': active,\n        'select-button-item--disabled': disabled,\n        'select-button-item--first': first,\n        'select-button-item--last': last\n    }\">\n    <span class=\"select-button-item__label\">{{ label }}</span>\n</button>",
-            styles: [".select-button-item{padding:8px 12px;cursor:pointer;background-color:#fff;border:none;border-left:1px solid #c1c1cc;border-top:1px solid #c1c1cc;border-bottom:1px solid #c1c1cc}.select-button-item__label{font-family:\"Open Sans\" sans-serif;font-size:14px}.select-button-item:not(.select-button-item--disabled):not(.select-button-item--active):hover{background-color:#eeebf2}.select-button-item--active,.select-button-item--active:hover{background-color:#c1c1cc;font-weight:700}.select-button-item--disabled{opacity:.5;cursor:default}.select-button-item--first{border-top-left-radius:2px;border-bottom-left-radius:2px}.select-button-item--last{border-right:1px solid #c1c1cc;border-top-right-radius:2px;border-bottom-right-radius:2px}"]
-        })
-    ], SelectButtonItemComponent);
-    return SelectButtonItemComponent;
-}());
-
-var SelectButtonModule = /** @class */ (function () {
-    function SelectButtonModule() {
-    }
-    SelectButtonModule = __decorate([
-        NgModule({
-            imports: [CommonModule],
-            declarations: [
-                SelectButtonComponent,
-                SelectButtonItemComponent,
-            ],
-            exports: [SelectButtonComponent],
+            selector: "s-object-card-field",
+            template: "<ng-template>\n    <div class=\"container\">\n        <ng-content select=\"s-thumbnail\"></ng-content>\n        <s-thumbnail\n            [id]=\"id + '-thumbnail'\"\n            *ngIf=\"!thumbnailComponent && (imageSource || iconClass)\"\n            [imageSource]=\"imageSource\"\n            [imageAlt]=\"imageAlt || label\"\n            [iconClass]=\"iconClass\"\n            size=\"small\"\n        ></s-thumbnail>\n\n        <div class=\"info-container\">\n            <div #labelTemplate><ng-content select=\"[labelTemplate]\"></ng-content></div>\n            <span\n                [id]=\"id + '-label'\"\n                *ngIf=\"!labelTemplate.children.length\"\n                class=\"label\"\n                [pTooltip]=\"label\"\n                tooltipPosition=\"top\"\n                showDelay=\"500\"\n                >{{ label }}</span\n            >\n\n            <div #descriptionTemplate><ng-content select=\"[descriptionTemplate]\"></ng-content></div>\n            <span\n                [id]=\"id + '-description'\"\n                *ngIf=\"!descriptionTemplate.children.length\"\n                class=\"description\"\n                [pTooltip]=\"description\"\n                tooltipPosition=\"top\"\n                showDelay=\"500\"\n                >{{ description }}</span\n            >\n\n            <s-button\n                [id]=\"id + '-button'\"\n                *ngIf=\"buttonLabel\"\n                styleClass=\"object-card-button\"\n                priority=\"link\"\n                [label]=\"buttonLabel\"\n                [model]=\"buttonModel\"\n                size=\"small\"\n                (onClick)=\"buttonClick.emit($event)\"\n            ></s-button>\n        </div>\n    </div>\n</ng-template>\n",
+            styles: [".container{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;height:100%}.info-container{margin-left:10px}.info-container,.info-container span{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.info-container .label{color:#999;display:block}.info-container .description{display:block}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){.info-container{-ms-flex:1;flex:1}}@media (max-width:767px){.info-container,.info-container span{white-space:normal}}.info-container:only-child{margin-left:0}"]
         })
-    ], SelectButtonModule);
-    return SelectButtonModule;
+    ], ObjectCardFieldComponent);
+    return ObjectCardFieldComponent;
 }());
 
-var SidebarComponent = /** @class */ (function () {
-    function SidebarComponent(focusTrapFactory) {
-        this.focusTrapFactory = focusTrapFactory;
-        this.id = "s-sidebar-" + SidebarComponent_1.nextId++;
-        this.visible = false;
-        this.baseZIndex = 0;
-        this.largeSized = false;
-        this.visibleChange = new EventEmitter();
+var ObjectCardMainComponent = /** @class */ (function () {
+    function ObjectCardMainComponent() {
+        this.id = "s-object-card-main-" + ObjectCardMainComponent_1.nextId++;
+        this.iconClass = "fa fa-picture-o";
+        this.hasThumbnail = true;
+        this.hasDescription = true;
+        this.isBrand = false;
+        this.buttonClick = new EventEmitter();
+        this._thumbnailSize = ThumbnailSize.Medium;
     }
-    SidebarComponent_1 = SidebarComponent;
-    SidebarComponent.prototype.onShow = function () {
-        DomHandler.addClass(document.body, "ui-overflow-hidden-sidebar");
-        var focusTrap = this.focusTrapFactory.create(this.innerSidebar.containerViewChild.nativeElement, false);
-        focusTrap.focusInitialElementWhenReady();
+    ObjectCardMainComponent_1 = ObjectCardMainComponent;
+    Object.defineProperty(ObjectCardMainComponent.prototype, "thumbnailSize", {
+        get: function () {
+            return this._thumbnailSize;
+        },
+        set: function (value) {
+            this._thumbnailSize = value;
+            if (this.thumbnailComponent)
+                this.thumbnailComponent.size = value;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    ObjectCardMainComponent.prototype.onResize = function () {
+        this.update();
     };
-    SidebarComponent.prototype.onHide = function () {
-        DomHandler.removeClass(document.body, "ui-overflow-hidden-sidebar");
+    ObjectCardMainComponent.prototype.ngAfterContentInit = function () {
+        this.update();
     };
-    SidebarComponent.prototype.close = function (event) {
-        DomHandler.removeClass(document.body, "ui-overflow-hidden-sidebar");
-        this.visibleChange.emit(false);
-        event.preventDefault();
+    ObjectCardMainComponent.prototype.update = function () {
+        var windowWidth = window.innerWidth;
+        if (windowWidth <= Breakpoints.SM_MAX)
+            this.thumbnailSize = ThumbnailSize.Small;
+        else
+            this.thumbnailSize = ThumbnailSize.Medium;
     };
-    var SidebarComponent_1;
-    SidebarComponent.nextId = 0;
-    SidebarComponent.ctorParameters = function () { return [
-        { type: FocusTrapFactory }
-    ]; };
+    var ObjectCardMainComponent_1;
+    ObjectCardMainComponent.nextId = 0;
     __decorate([
         Input()
-    ], SidebarComponent.prototype, "id", void 0);
+    ], ObjectCardMainComponent.prototype, "id", void 0);
     __decorate([
         Input()
-    ], SidebarComponent.prototype, "visible", void 0);
+    ], ObjectCardMainComponent.prototype, "imageSource", void 0);
     __decorate([
         Input()
-    ], SidebarComponent.prototype, "header", void 0);
+    ], ObjectCardMainComponent.prototype, "imageFallback", void 0);
     __decorate([
         Input()
-    ], SidebarComponent.prototype, "baseZIndex", void 0);
+    ], ObjectCardMainComponent.prototype, "imageAlt", void 0);
     __decorate([
         Input()
-    ], SidebarComponent.prototype, "largeSized", void 0);
+    ], ObjectCardMainComponent.prototype, "iconClass", void 0);
+    __decorate([
+        Input()
+    ], ObjectCardMainComponent.prototype, "hasThumbnail", void 0);
+    __decorate([
+        Input()
+    ], ObjectCardMainComponent.prototype, "hasDescription", void 0);
+    __decorate([
+        Input()
+    ], ObjectCardMainComponent.prototype, "isBrand", void 0);
+    __decorate([
+        Input()
+    ], ObjectCardMainComponent.prototype, "label", void 0);
+    __decorate([
+        Input()
+    ], ObjectCardMainComponent.prototype, "description", void 0);
+    __decorate([
+        Input()
+    ], ObjectCardMainComponent.prototype, "buttonLabel", void 0);
+    __decorate([
+        Input()
+    ], ObjectCardMainComponent.prototype, "buttonModel", void 0);
     __decorate([
         Output()
-    ], SidebarComponent.prototype, "visibleChange", void 0);
-    __decorate([
-        ViewChild(Sidebar, { static: true })
-    ], SidebarComponent.prototype, "innerSidebar", void 0);
+    ], ObjectCardMainComponent.prototype, "buttonClick", void 0);
     __decorate([
-        ContentChild(HeaderComponent, { static: true })
-    ], SidebarComponent.prototype, "headerSection", void 0);
+        ContentChild(ThumbnailComponent, { static: true })
+    ], ObjectCardMainComponent.prototype, "thumbnailComponent", void 0);
     __decorate([
-        ContentChild(FooterComponent, { static: true })
-    ], SidebarComponent.prototype, "footerSection", void 0);
-    SidebarComponent = SidebarComponent_1 = __decorate([
+        HostListener("window:resize")
+    ], ObjectCardMainComponent.prototype, "onResize", null);
+    ObjectCardMainComponent = ObjectCardMainComponent_1 = __decorate([
         Component({
-            selector: "s-sidebar",
-            template: "<p-sidebar\n    [id]=\"id\"\n    [visible]=\"visible\"\n    (visibleChange)=\"visibleChange.emit($event)\"\n    [blockScroll]=\"true\"\n    [baseZIndex]=\"baseZIndex\"\n    [modal]=\"true\"\n    [dismissible]=\"false\"\n    [showCloseIcon]=\"false\"\n    position=\"right\"\n    appendTo=\"body\"\n    [styleClass]=\"largeSized ? 's-sidebar-panel s-sidebar-panel-lg' : 's-sidebar-panel'\"\n    (onShow)=\"onShow()\"\n    (onHide)=\"onHide()\">\n    <div\n        [id]=\"id + '-container'\"\n        class=\"s-sidebar-container\">\n        <a\n            href=\"#\"\n            role=\"button\"\n            class=\"s-sidebar-close\"\n            (click)=\"close($event)\">\n            <span\n                class=\"fa fa-times\"\n                aria-hidden=\"true\">\n            </span></a>\n        <div\n            *ngIf=\"header && !headerSection\"    \n            [id]=\"id + '-header'\"\n            class=\"s-sidebar-header\">\n            <h2 class=\"sds-panel-title s-sidebar-header__title\">{{header}}</h2>\n        </div>\n        <div\n            *ngIf=\"headerSection\"    \n            [id]=\"id + '-header'\"\n            class=\"s-sidebar-header\">\n            <ng-content select=\"s-header\"></ng-content>\n        </div>\n        <p-scrollPanel\n            [id]=\"id + '-content-container'\"\n            class=\"s-sidebar-content-container\"\n            styleClass=\"s-sidebar-content\">\n            <ng-content></ng-content>\n        </p-scrollPanel>\n        <div\n            *ngIf=\"footerSection\"\n            [id]=\"id + '-footer'\"\n            class=\"s-sidebar-footer\">\n            <ng-content select=\"s-footer\"></ng-content>\n        </div>\n    </div>\n</p-sidebar>\n",
-            encapsulation: ViewEncapsulation.None,
-            styles: [".ui-overflow-hidden-sidebar{overflow:hidden}body .ui-sidebar.s-sidebar-panel{width:50%;padding:0}@media (max-width:767px){body .ui-sidebar.s-sidebar-panel{width:100%}}@media (min-width:768px){body .ui-sidebar.s-sidebar-panel{width:75%}}@media (min-width:992px){body .ui-sidebar.s-sidebar-panel{width:50%}body .ui-sidebar.s-sidebar-panel.s-sidebar-panel-lg{width:75%}}body .ui-sidebar.s-sidebar-panel .s-sidebar-container{height:100%;width:100%;padding:20px;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-direction:column;flex-direction:column}body .ui-sidebar.s-sidebar-panel .s-sidebar-close{position:absolute;right:20px;top:20px;color:#333}body .ui-sidebar.s-sidebar-panel .s-sidebar-header{border-bottom:1px solid #ccc;padding-bottom:15px;padding-right:20px;margin-bottom:15px;-ms-flex-negative:0;flex-shrink:0}body .ui-sidebar.s-sidebar-panel .s-sidebar-content-container{-ms-flex:1;flex:1;overflow:hidden}body .ui-sidebar.s-sidebar-panel .s-sidebar-content{height:100%}body .ui-sidebar.s-sidebar-panel .s-sidebar-footer{border-top:1px solid #ccc;padding-top:15px;margin-top:15px;-ms-flex-negative:0;flex-shrink:0}body .ui-sidebar.s-sidebar-panel p-scrollpanel{padding-top:30px}body .ui-sidebar.s-sidebar-panel .s-sidebar-header+p-scrollpanel{padding-top:0}p-scrollPanel{display:block}.s-sidebar-header__title{font-weight:400}"]
-        })
-    ], SidebarComponent);
-    return SidebarComponent;
-}());
-
-var SidebarModule = /** @class */ (function () {
-    function SidebarModule() {
-    }
-    SidebarModule = __decorate([
-        NgModule({
-            imports: [CommonModule, A11yModule, SidebarModule$1, ScrollPanelModule, StructureModule],
-            declarations: [SidebarComponent],
-            exports: [StructureModule, SidebarComponent],
+            selector: "s-object-card-main",
+            template: "<ng-container *ngIf=\"hasThumbnail\">\n    <ng-content select=\"s-thumbnail\"></ng-content>\n    <s-thumbnail\n        [id]=\"id + '-thumbnail'\"\n        [imageSource]=\"imageSource\"\n        [imageFallback]=\"imageFallback\"\n        [imageAlt]=\"imageAlt || label\"\n        [iconClass]=\"iconClass\"\n        [size]=\"thumbnailSize\"\n        *ngIf=\"!thumbnailComponent\"\n        [isBrand]=\"isBrand\"\n    ></s-thumbnail>\n</ng-container>\n\n<ng-container *ngIf=\"hasDescription\">\n    <div class=\"info-container\">\n            <div #labelTemplate><ng-content select=\"[labelTemplate]\"></ng-content></div>\n            <span\n                [id]=\"id + '-label'\"\n                *ngIf=\"!labelTemplate.children.length\"\n                class=\"label\"\n                [pTooltip]=\"label\"\n                tooltipPosition=\"top\"\n                showDelay=\"500\"\n                >{{ label }}</span\n            >\n\n            <div #descriptionTemplate><ng-content select=\"[descriptionTemplate]\"></ng-content></div>\n            <span\n                [id]=\"id + '-description'\"\n                *ngIf=\"!descriptionTemplate.children.length\"\n                class=\"description\"\n                [pTooltip]=\"description\"\n                tooltipPosition=\"top\"\n                showDelay=\"500\"\n                >{{ description }}</span\n            >\n            <s-button\n                [id]=\"id + '-button'\"\n                *ngIf=\"buttonLabel\"\n                styleClass=\"object-card-button\"\n                priority=\"link\"\n                [label]=\"buttonLabel\"\n                [model]=\"buttonModel\"\n                size=\"small\"\n                (onClick)=\"buttonClick.emit($event)\"\n            ></s-button>\n        </div>\n</ng-container>\n",
+            styles: [":host{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;min-height:70px}.info-container{margin-left:10px;-ms-flex:1;flex:1}.info-container,.info-container span{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.info-container .label{display:block;font-weight:700}.info-container .description{color:#999;display:block}@media (max-width:767px){.info-container,.info-container span{white-space:normal}}"]
         })
-    ], SidebarModule);
-    return SidebarModule;
+    ], ObjectCardMainComponent);
+    return ObjectCardMainComponent;
 }());
 
-var SlidePanelService = /** @class */ (function () {
-    function SlidePanelService() {
-        this.modalCloseMap = new Map();
-    }
-    SlidePanelService.prototype.createSlidePanel = function (id) {
-        var panelSubject = new Subject();
-        this.modalCloseMap.set(id, panelSubject);
-        return panelSubject.asObservable();
-    };
-    SlidePanelService.prototype.getModalCloseObservable = function (id) {
-        return this.modalCloseMap.get(id).asObservable();
-    };
-    SlidePanelService.prototype.closeModal = function (id) {
-        var subject = this.modalCloseMap.get(id);
-        if (subject) {
-            subject.next();
-        }
-    };
-    SlidePanelService = __decorate([
-        Injectable()
-    ], SlidePanelService);
-    return SlidePanelService;
-}());
+var EnumSeverity;
+(function (EnumSeverity) {
+    EnumSeverity["Default"] = "Default";
+    EnumSeverity["Info"] = "Info";
+    EnumSeverity["Warn"] = "Warn";
+    EnumSeverity["Error"] = "Error";
+    EnumSeverity["Success"] = "Success";
+})(EnumSeverity || (EnumSeverity = {}));
 
-var SMALL_DEVICE_BREAKPOINT = 420;
-var SlidePanelComponent = /** @class */ (function () {
-    function SlidePanelComponent(slidePanelService) {
-        this.slidePanelService = slidePanelService;
-        this.id = "slide-panel-" + ++SlidePanelComponent_1.nextId;
-        this.openIcon = "fas fa-chevron-right";
-        this.closeIcon = "fas fa-chevron-left";
-        this.cache = false;
-        this.createOpen = false;
-        this.panelOpened = new EventEmitter();
-        this.panelClosed = new EventEmitter();
-        this.isOpen = false;
-        this.isSlideOver = false;
-        this.isAnimating = false;
-        this.isContentAnimationDisabled = true;
-        this.slideHeight = 0;
-        this.sideContentWidth = 0;
-        this._unsubscribe$ = new Subject();
+var elementResizeDetectorMaker = elementResizeDetectorMaker_; // @HACK Necessary because of https://github.com/rollup/rollup/issues/670
+var ObjectCardComponent = /** @class */ (function () {
+    function ObjectCardComponent(cdr, elementRef) {
+        this.cdr = cdr;
+        this.elementRef = elementRef;
+        this.id = "s-object-card-" + ObjectCardComponent_1.nextId++;
+        this.expanded = false;
+        this.expandTooltip = "Abrir painel";
+        this.collapseTooltip = "Fechar painel";
+        this.fieldsMinWidth = 200;
+        this.expandedChange = new EventEmitter();
+        this.maxVisibleFields = 0;
+        this.severity = EnumSeverity.Default;
+        this.EnumSeverity = EnumSeverity;
     }
-    SlidePanelComponent_1 = SlidePanelComponent;
-    SlidePanelComponent.prototype.onResize = function () {
-        this._checkOverBehavior();
-    };
-    SlidePanelComponent.prototype.ngOnInit = function () {
-        var _this = this;
-        this._checkOverBehavior();
-        this.slidePanelService.createSlidePanel(this.id)
-            .pipe(takeUntil(this._unsubscribe$))
-            .subscribe(function () {
-            _this.isOpen = false;
-        });
-    };
-    SlidePanelComponent.prototype.ngAfterViewInit = function () {
+    ObjectCardComponent_1 = ObjectCardComponent;
+    ObjectCardComponent.prototype.ngAfterViewInit = function () {
         var _this = this;
-        queueMicrotask(function () {
-            if (_this.createOpen) {
-                _this.isOpen = true;
-            }
+        this.update();
+        this.cdr.detectChanges();
+        this.fields.changes.subscribe(function () {
+            _this.update();
         });
-    };
-    SlidePanelComponent.prototype.ngAfterViewChecked = function () {
-        var _this = this;
-        // to executed at a safe time prior to control returning to the browser's event loop
-        queueMicrotask(function () {
-            _this._calculateSlideHeight();
-            _this._calculateSideContentWidth();
-            _this.isContentAnimationDisabled = false;
+        var erd = elementResizeDetectorMaker({
+            strategy: "scroll",
         });
+        erd.listenTo(this.elementRef.nativeElement, function () { return _this.update(); });
     };
-    SlidePanelComponent.prototype.ngOnDestroy = function () {
-        this._unsubscribe$.next();
-        this._unsubscribe$.complete();
-    };
-    SlidePanelComponent.prototype.onClickButton = function () {
-        if (this.isAnimating) {
-            return;
+    ObjectCardComponent.prototype.update = function () {
+        var e_1, _a;
+        var windowWidth = window.innerWidth;
+        var containerWidth = this.elementRef.nativeElement.offsetWidth;
+        var mainFieldWidth = containerWidth * 0.3 > 260 ? containerWidth * 0.3 : 260;
+        var fieldsMinWidth = this.fieldsMinWidth;
+        var expandIconWidth = 50;
+        var fieldElementList = this.elementRef.nativeElement.getElementsByClassName("s-object-card-field");
+        try {
+            for (var fieldElementList_1 = __values(fieldElementList), fieldElementList_1_1 = fieldElementList_1.next(); !fieldElementList_1_1.done; fieldElementList_1_1 = fieldElementList_1.next()) {
+                var element = fieldElementList_1_1.value;
+                element.style.minWidth = this.fieldsMinWidth + "px";
+            }
         }
-        this.isOpen = !this.isOpen;
-        if (this.isOpen) {
-            this.panelOpened.emit();
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (fieldElementList_1_1 && !fieldElementList_1_1.done && (_a = fieldElementList_1.return)) _a.call(fieldElementList_1);
+            }
+            finally { if (e_1) throw e_1.error; }
         }
-        else {
-            this.panelClosed.emit();
+        var maxFieldQtd;
+        if (windowWidth <= Breakpoints.SM_MAX)
+            maxFieldQtd = 0;
+        else
+            maxFieldQtd = Math.floor((containerWidth - mainFieldWidth) / fieldsMinWidth);
+        if (maxFieldQtd && maxFieldQtd < this.fields.length) {
+            maxFieldQtd = Math.floor((containerWidth - mainFieldWidth - expandIconWidth) / fieldsMinWidth);
         }
+        this.maxVisibleFields = maxFieldQtd;
+        if (maxFieldQtd >= this.fields.length && this.expanded)
+            this.collapse();
     };
-    SlidePanelComponent.prototype.onContentAnimationStart = function () {
-        this.isAnimating = true;
-    };
-    SlidePanelComponent.prototype.onContentAnimationDone = function () {
-        this.isAnimating = false;
-        this._calculateSideContentWidth();
+    ObjectCardComponent.prototype.toggle = function () {
+        this.expanded ? this.collapse() : this.expand();
     };
-    SlidePanelComponent.prototype._checkOverBehavior = function () {
-        this.isSlideOver = window.innerWidth <= SMALL_DEVICE_BREAKPOINT;
+    ObjectCardComponent.prototype.expand = function () {
+        this.expanded = true;
+        this.expandedChange.emit(this.expanded);
     };
-    SlidePanelComponent.prototype._calculateSlideHeight = function () {
-        this.slideHeight = this._sideContentRef.nativeElement.clientHeight;
+    ObjectCardComponent.prototype.collapse = function () {
+        this.expanded = false;
+        this.expandedChange.emit(this.expanded);
     };
-    SlidePanelComponent.prototype._calculateSideContentWidth = function () {
-        var slidePanelWidth = this._slidePanelRef.nativeElement.getBoundingClientRect().width;
-        var slideContentWidth = this._slideContentRef.nativeElement.getBoundingClientRect().width;
-        this.sideContentWidth = slidePanelWidth - slideContentWidth;
+    ObjectCardComponent.prototype.getExpandedFieldWidth = function () {
+        var containerWidth = this.elementRef.nativeElement.offsetWidth;
+        var fieldsPerRow;
+        if (containerWidth <= Breakpoints.SM_MAX)
+            fieldsPerRow = 1;
+        else if (containerWidth <= Breakpoints.MD_MAX)
+            fieldsPerRow = 2;
+        else if (containerWidth <= Breakpoints.LG_MAX)
+            fieldsPerRow = 4;
+        else
+            fieldsPerRow = 6;
+        return 12 / fieldsPerRow;
     };
-    var SlidePanelComponent_1;
-    SlidePanelComponent.nextId = 0;
-    SlidePanelComponent.ctorParameters = function () { return [
-        { type: SlidePanelService }
+    var ObjectCardComponent_1;
+    ObjectCardComponent.nextId = 0;
+    ObjectCardComponent.ctorParameters = function () { return [
+        { type: ChangeDetectorRef },
+        { type: ElementRef }
     ]; };
     __decorate([
         Input()
-    ], SlidePanelComponent.prototype, "id", void 0);
+    ], ObjectCardComponent.prototype, "id", void 0);
     __decorate([
         Input()
-    ], SlidePanelComponent.prototype, "openIcon", void 0);
+    ], ObjectCardComponent.prototype, "expanded", void 0);
     __decorate([
         Input()
-    ], SlidePanelComponent.prototype, "closeIcon", void 0);
+    ], ObjectCardComponent.prototype, "expandTooltip", void 0);
     __decorate([
         Input()
-    ], SlidePanelComponent.prototype, "cache", void 0);
+    ], ObjectCardComponent.prototype, "collapseTooltip", void 0);
     __decorate([
         Input()
-    ], SlidePanelComponent.prototype, "createOpen", void 0);
-    __decorate([
-        Output()
-    ], SlidePanelComponent.prototype, "panelOpened", void 0);
+    ], ObjectCardComponent.prototype, "fieldsMinWidth", void 0);
     __decorate([
         Output()
-    ], SlidePanelComponent.prototype, "panelClosed", void 0);
+    ], ObjectCardComponent.prototype, "expandedChange", void 0);
     __decorate([
-        ViewChild("slidePanel")
-    ], SlidePanelComponent.prototype, "_slidePanelRef", void 0);
+        ContentChild(ObjectCardMainComponent, { static: true })
+    ], ObjectCardComponent.prototype, "main", void 0);
     __decorate([
-        ViewChild("slideContent")
-    ], SlidePanelComponent.prototype, "_slideContentRef", void 0);
+        ContentChildren(ObjectCardFieldComponent, { descendants: true })
+    ], ObjectCardComponent.prototype, "fields", void 0);
     __decorate([
-        ViewChild("sideContent")
-    ], SlidePanelComponent.prototype, "_sideContentRef", void 0);
+        Input()
+    ], ObjectCardComponent.prototype, "severity", void 0);
     __decorate([
-        HostListener("window:resize")
-    ], SlidePanelComponent.prototype, "onResize", null);
-    SlidePanelComponent = SlidePanelComponent_1 = __decorate([
+        Input()
+    ], ObjectCardComponent.prototype, "borderButtonOptions", void 0);
+    ObjectCardComponent = ObjectCardComponent_1 = __decorate([
         Component({
-            selector: "s-slide-panel",
-            template: "<div #slidePanel class=\"slide-panel\">\n    <div\n        #slideContent\n        class=\"slide-content\"\n        [ngClass]=\"{\n            'slide-content--closed': !isOpen,\n            'slide-content--over': isSlideOver\n        }\">\n        <div\n            #mainContainer\n            class=\"main-container\"\n            [style.maxHeight]=\"slideHeight + 'px'\">\n            <ng-container *ngIf=\"cache; then cacheTemplate else cachelessTemplate\"></ng-container>\n        </div>\n        <button\n            class=\"button\"\n            [ngClass]=\"isOpen ? closeIcon : openIcon\"\n            (click)=\"onClickButton()\">\n        </button>\n    </div>\n    <div    \n        #sideContent\n        class=\"side-content\"\n        [ngStyle]=\"{ 'width.px': sideContentWidth }\">\n        <ng-content select=\"[side-content]\"></ng-content>\n    </div>\n</div>\n\n<ng-template #cacheTemplate>\n    <div\n        class=\"content-container\"\n        [@cacheAnimation]=\"isOpen\"\n        [@.disabled]=\"isContentAnimationDisabled\"\n        (@cacheAnimation.start)=\"onContentAnimationStart()\"\n        (@cacheAnimation.done)=\"onContentAnimationDone()\">\n        <ng-container [ngTemplateOutlet]=\"slideContentTemplate\"></ng-container>\n    </div>\n</ng-template>\n\n<ng-template #cachelessTemplate>\n    <div\n        *ngIf=\"isOpen\"\n        class=\"content-container\"\n        @cachelessAnimation\n        [@.disabled]=\"isContentAnimationDisabled\"\n        (@cachelessAnimation.start)=\"onContentAnimationStart()\"\n        (@cachelessAnimation.done)=\"onContentAnimationDone()\">\n        <ng-container [ngTemplateOutlet]=\"slideContentTemplate\"></ng-container>\n    </div>\n</ng-template>\n\n<ng-template #slideContentTemplate>\n    <ng-content select=\"[slide-content]\"></ng-content>\n</ng-template>",
+            selector: "s-object-card",
+            template: "<div [id]=\"id\" class=\"container\">\n    <s-border-button\n        *ngIf=\"\n            borderButtonOptions?.visible\n                ? borderButtonOptions?.visible(severity)\n                : false\n        \"\n        [severity]=\"severity\"\n        [options]=\"borderButtonOptions\"\n        class=\"object-card__border-button\"\n        [@BorderButtonAnimation]\n    ></s-border-button>\n\n    <div\n        [id]=\"id + '-main-container'\"\n        class=\"main-container\"\n        [ngClass]=\"{\n            'with-hidden-fields': fields.length > maxVisibleFields,\n            'with-visible-fields': fields.length && maxVisibleFields,\n            'main-container--severity-default': severity === EnumSeverity.Default,\n            'main-container--severity-info': severity === EnumSeverity.Info,\n            'main-container--severity-warn': severity === EnumSeverity.Warn,\n            'main-container--severity-error': severity === EnumSeverity.Error,\n            'main-container--severity-success': severity == EnumSeverity.Success\n        }\"\n    >\n        <div class=\"object-content\">\n            <div class=\"s-object-card-main\"><ng-content select=\"s-object-card-main\"></ng-content></div>\n\n            <div class=\"divider\" *ngIf=\"maxVisibleFields && fields.length\"></div>\n\n            <div *ngFor=\"let field of (fields.toArray() | slice: 0:maxVisibleFields)\" class=\"s-object-card-field\">\n                <ng-container *ngTemplateOutlet=\"field.content\"></ng-container>\n            </div>\n        </div>\n\n        <div\n            [id]=\"id + '-expand-icon-container'\"\n            class=\"expand-icon-container\"\n            (click)=\"toggle()\"\n            [pTooltip]=\"expanded ? collapseTooltip : expandTooltip\"\n            tooltipPosition=\"top\"\n            [showDelay]=\"500\"\n        >\n            <span [id]=\"id + '-expand-icon'\" class=\"expand-icon fa\" [ngClass]=\"{ 'fa-minus': expanded, 'fa-plus': !expanded }\"></span>\n        </div>\n    </div>\n\n    <div\n        [id]=\"id + '-expandable-container'\"\n        [@expandableContent]=\"expanded\"\n        class=\"expandable-container\"\n        [ngClass]=\"{\n            'expandable-container--severity-default':\n                severity === EnumSeverity.Default,\n            'expandable-container--severity-info': severity === EnumSeverity.Info,\n            'expandable-container--severity-warn': severity === EnumSeverity.Warn,\n            'expandable-container--severity-error': severity === EnumSeverity.Error,\n            'expandable-container--severity-success':\n                severity == EnumSeverity.Success\n        }\"\n    >\n        <div class=\"ui-g ui-g-12\">\n            <ng-container\n                *ngFor=\"\n                    let field of fields.toArray()\n                        | slice : maxVisibleFields : fields.length\n                \"\n            >\n                <div class=\"ui-g-{{ getExpandedFieldWidth() }}\">\n                    <div class=\"s-object-card-field\">\n                        <ng-container\n                            *ngTemplateOutlet=\"field.content\"\n                        ></ng-container>\n                    </div>\n                </div>\n            </ng-container>\n        </div>\n    </div>\n</div>\n",
             animations: [
-                trigger("cachelessAnimation", [
+                trigger("expandableContent", [
+                    state("*", style$7({
+                        height: "0",
+                    })),
+                    state("false", style$7({
+                        height: "0",
+                    })),
+                    state("true", style$7({
+                        height: "*",
+                    })),
+                    transition("* => true", animate("200ms ease-out")),
+                    transition("false <=> true", animate("200ms ease-out")),
+                ]),
+                trigger("BorderButtonAnimation", [
                     transition(":enter", [
-                        style$7({ width: "0" }),
-                        animate("200ms linear", style$7({ width: "*" })),
+                        style$7({ transform: "scaleY(0)", opacity: 0 }),
+                        animate("300ms ease", style$7({ transform: "scaleY(1)", opacity: 1 })),
                     ]),
                     transition(":leave", [
-                        style$7({ width: "*" }),
-                        animate("200ms linear", style$7({ width: "0" })),
+                        style$7({ transform: "scaleY(1)", opacity: 1 }),
+                        animate("300ms ease", style$7({ transform: "scaleY(0)", opacity: 0 })),
                     ]),
                 ]),
-                trigger("cacheAnimation", [
-                    state("true", style$7({ width: "*", padding: '0 16px' })),
-                    state("false", style$7({ width: '0px', padding: '0' })),
-                    transition("* => *", animate("200ms")),
-                ]),
             ],
-            styles: [".slide-panel{display:-ms-flexbox;display:flex;width:100%}.slide-panel .slide-content{display:-ms-flexbox;display:flex;position:relative}.slide-panel .slide-content .main-container{background-color:#eeebf2;display:-ms-flexbox;display:flex;border:1px solid #ccc;overflow:hidden;position:relative}.slide-panel .slide-content .main-container .content-container{overflow-y:auto;overflow-x:hidden;padding:16px}.slide-panel .slide-content .button{-ms-flex-align:center;align-items:center;background-color:#eeebf2;border:1px solid #ccc;border-left:none;border-radius:0 4px 4px 0;cursor:pointer;display:-ms-flexbox;display:flex;font-family:\"Font Awesome 5 Pro\";font-size:16px;height:32px;-ms-flex-pack:center;justify-content:center;position:absolute;right:-32px;top:16px;width:32px;z-index:99}.slide-panel .slide-content--closed .main-container{border:none}.slide-panel .slide-content--over{position:absolute}.slide-panel .side-content{display:-ms-flexbox;display:flex;height:-webkit-max-content;height:max-content;overflow:auto;transition:width .1s linear}"]
+            styles: [":host{display:block}.container{margin-bottom:20px;position:relative}.main-container{display:-ms-flexbox;display:flex}.expandable-container,.main-container{background-color:#fff;border:1px solid #ccc;position:relative;overflow:hidden;width:100%}.expandable-container--severity-default{border-color:#ccc;border-top:initial}.expandable-container--severity-info{transition:border-color .5s;border-color:#428bca;border-top:initial}.expandable-container--severity-warn{transition:border-color .5s;border-color:#f8931f;border-top:initial}.expandable-container--severity-error{transition:border-color .5s;border-color:#c13018;border-top:initial}.expandable-container--severity-success{transition:border-color .5s;border-color:#0c9348;border-top:initial}.main-container--severity-default{border-color:#ccc}.main-container--severity-info{transition:border-color .5s;border-color:#428bca}.main-container--severity-warn{transition:border-color .5s;border-color:#f8931f}.main-container--severity-error{transition:border-color .5s;border-color:#c13018}.main-container--severity-success{transition:border-color .5s;border-color:#0c9348}.object-card__border-button{position:absolute;top:-13px;right:15px;z-index:1}.expandable-container{border-top:none;box-shadow:inset 0 6px 4px -4px #ddd;margin-top:-1px}.expand-icon-container{display:none;text-align:center;-ms-flex-align:center;align-items:center;cursor:pointer;width:25px;position:absolute;right:15px;height:25px;top:calc(50% - 12px)}.expand-icon{-ms-flex:1;flex:1}.object-content{display:-ms-flexbox;display:flex;width:100%}.s-object-card-main{-ms-flex-negative:0;flex-shrink:0;-ms-flex-positive:1;flex-grow:1;overflow:hidden;padding:15px}.main-container.with-visible-fields .s-object-card-main{max-width:30%}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){.main-container.with-visible-fields .s-object-card-main{width:20%}}.s-object-card-field{overflow:hidden;height:100%}.main-container .s-object-card-field{padding:15px}.main-container .divider{width:1px;-ms-flex-negative:0;flex-shrink:0;background-color:#ccc;margin:15px -1px 15px 0}.main-container.with-hidden-fields .object-content{width:calc(100% - 35px)}.main-container.with-hidden-fields .expand-icon-container{display:-ms-flexbox;display:flex}::ng-deep .object-card-button{padding-left:0!important;padding-right:10px!important;border:none!important;height:auto!important;min-width:auto!important;text-align:left!important}@media (max-width:767px){.s-object-card-main{max-width:calc(100% - 50px)}}"]
         })
-    ], SlidePanelComponent);
-    return SlidePanelComponent;
+    ], ObjectCardComponent);
+    return ObjectCardComponent;
 }());
 
-var SlidePanelModule = /** @class */ (function () {
-    function SlidePanelModule() {
+var BorderButtonComponent = /** @class */ (function () {
+    function BorderButtonComponent() {
+        this.severity = EnumSeverity.Default;
+        this.EnumSeverity = EnumSeverity;
+        this.TooltipPosition = TooltipPosition;
     }
-    SlidePanelModule = __decorate([
+    __decorate([
+        Input()
+    ], BorderButtonComponent.prototype, "severity", void 0);
+    __decorate([
+        Input()
+    ], BorderButtonComponent.prototype, "options", void 0);
+    BorderButtonComponent = __decorate([
+        Component({
+            selector: "s-border-button",
+            template: "<button\n    class=\"border-button\"\n    [ngClass]=\"{\n        'border-button--severity-default': severity === EnumSeverity.Default,\n        'border-button--severity-info': severity === EnumSeverity.Info,\n        'border-button--severity-warn': severity === EnumSeverity.Warn,\n        'border-button--severity-error': severity === EnumSeverity.Error,\n        'border-button--severity-success': severity == EnumSeverity.Success,\n        'border-button--disabled': options?.disabled\n            ? options?.disabled(severity)\n            : false\n    }\"\n    (click)=\"options?.onClick ? options?.onClick(severity) : null\"\n    [sTooltip]=\"options?.tooltip ? options?.tooltip(severity) : null\"\n    [tooltipPosition]=\"TooltipPosition.Left\"\n    [disabled]=\"options?.disabled ? options?.disabled(severity) : false\"\n>\n    <span class=\"border-button__label\">\n        {{ options?.label ? options?.label(severity) : null }}\n    </span>\n    <span\n        *ngIf=\"options?.icon ? options?.icon(severity) : false\"\n        class=\"border-button__icon {{ options?.icon(severity) }}\"\n    ></span>\n</button>",
+            styles: [".border-button{padding:0 8px;border:1px solid;border-radius:12px;height:23px;max-width:320px;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.border-button__label{font-family:Open Sans,sans-serif;font-size:12px;line-height:150%;width:100%;display:block;color:#333;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.border-button__icon{font-size:12px;color:#333;margin-left:8px}.border-button--severity-default{border-color:#ccc;background-color:#fff}.border-button--severity-info{border-color:#428bca;background-color:#d5e8ec;transition:background-color .5s,border-color .5s}.border-button--severity-info:enabled:hover{background-color:#9ecad4;cursor:pointer}.border-button--severity-info:enabled:active{transition:none;background-color:#67acbc;border-color:#67acbc}.border-button--severity-warn{border-color:#f8931f;background-color:#fce3ba;transition:background-color .5s,border-color .5s}.border-button--severity-warn:enabled:hover{background-color:#f8bf5e;cursor:pointer}.border-button--severity-warn:enabled:active{transition:none;background-color:#f5a319;border-color:#f5a319}.border-button--severity-error{border-color:#c13018;background-color:#fcd2d2;transition:background-color .5s,border-color .5s}.border-button--severity-error:enabled:hover{background-color:#f89696;cursor:pointer}.border-button--severity-error:enabled:active{transition:none;background-color:#f45b5b;border-color:#f45b5b}.border-button--severity-success{border-color:#0c9348;background-color:#e6ffb3;transition:background-color .5s,border-color .5s}.border-button--severity-success:enabled:hover{background-color:#c8ff5c;cursor:pointer}.border-button--severity-success:enabled:active{transition:none;background-color:#ade500;border-color:#ade500}.border-button--disabled:disabled:hover{cursor:default}"]
+        })
+    ], BorderButtonComponent);
+    return BorderButtonComponent;
+}());
+
+var BorderButtonModule = /** @class */ (function () {
+    function BorderButtonModule() {
+    }
+    BorderButtonModule = __decorate([
         NgModule({
-            imports: [CommonModule],
-            declarations: [SlidePanelComponent],
-            exports: [SlidePanelComponent],
-            providers: [SlidePanelService],
+            imports: [CommonModule, TooltipModule],
+            declarations: [BorderButtonComponent],
+            exports: [BorderButtonComponent]
         })
-    ], SlidePanelModule);
-    return SlidePanelModule;
+    ], BorderButtonModule);
+    return BorderButtonModule;
 }());
 
-var SplitButtonType;
-(function (SplitButtonType) {
-    SplitButtonType["Primary"] = "primary";
-    SplitButtonType["Secondary"] = "secondary";
-    SplitButtonType["Default"] = "default";
-})(SplitButtonType || (SplitButtonType = {}));
+var ObjectCardModule = /** @class */ (function () {
+    function ObjectCardModule() {
+    }
+    ObjectCardModule = __decorate([
+        NgModule({
+            imports: [CommonModule, TooltipModule$1, ThumbnailModule, ButtonModule, BorderButtonModule],
+            declarations: [ObjectCardComponent, ObjectCardMainComponent, ObjectCardFieldComponent],
+            exports: [ThumbnailModule, ObjectCardComponent, ObjectCardMainComponent, ObjectCardFieldComponent],
+        })
+    ], ObjectCardModule);
+    return ObjectCardModule;
+}());
 
-var SplitButtonComponent = /** @class */ (function () {
-    function SplitButtonComponent(eRef) {
-        this.eRef = eRef;
-        this.disabled = false;
-        this.type = SplitButtonType.Primary;
-        this.buttonClicked = new EventEmitter();
-        this.open = false;
+var ProductHeaderComponent = /** @class */ (function () {
+    function ProductHeaderComponent() {
+        this.id = "s-product-header-" + ProductHeaderComponent_1.nextId++;
+        this.baseZIndex = 0;
+        this.isHeaderFrame = true;
     }
-    SplitButtonComponent.prototype.onClickout = function (event) {
-        if (!this.eRef.nativeElement.contains(event.target)) {
-            this.closeDropdown();
-        }
-    };
-    SplitButtonComponent.prototype.onButtonClick = function () {
-        if (!this.disabled) {
-            this.buttonClicked.emit();
-            this.closeDropdown();
+    ProductHeaderComponent_1 = ProductHeaderComponent;
+    ProductHeaderComponent.prototype.ngAfterViewInit = function () {
+        this.container.nativeElement.style.zIndex = String(this.baseZIndex + ++DomHandler.zindex);
+        if (this.isHeaderFrame) {
+            this.container.nativeElement.style.borderBottom = "1px solid $default-secondary-color";
         }
-    };
-    SplitButtonComponent.prototype.onDropdownClick = function () {
-        if (!this.disabled) {
-            this.open = !this.open;
+        else {
+            this.container.nativeElement.style.borderTop = "1px solid $default-secondary-color";
         }
     };
-    SplitButtonComponent.prototype.onOptionClick = function (option) {
-        option.action && option.action();
-        this.closeDropdown();
-    };
-    SplitButtonComponent.prototype.closeDropdown = function () {
-        this.open = false;
-    };
-    SplitButtonComponent.ctorParameters = function () { return [
-        { type: ElementRef }
-    ]; };
-    __decorate([
-        Input()
-    ], SplitButtonComponent.prototype, "disabled", void 0);
+    var ProductHeaderComponent_1;
+    ProductHeaderComponent.nextId = 0;
     __decorate([
         Input()
-    ], SplitButtonComponent.prototype, "iconClass", void 0);
+    ], ProductHeaderComponent.prototype, "id", void 0);
     __decorate([
         Input()
-    ], SplitButtonComponent.prototype, "label", void 0);
+    ], ProductHeaderComponent.prototype, "header", void 0);
     __decorate([
         Input()
-    ], SplitButtonComponent.prototype, "type", void 0);
+    ], ProductHeaderComponent.prototype, "baseZIndex", void 0);
     __decorate([
         Input()
-    ], SplitButtonComponent.prototype, "options", void 0);
-    __decorate([
-        Output()
-    ], SplitButtonComponent.prototype, "buttonClicked", void 0);
+    ], ProductHeaderComponent.prototype, "isHeaderFrame", void 0);
     __decorate([
-        HostListener("document:click", ["$event"])
-    ], SplitButtonComponent.prototype, "onClickout", null);
-    SplitButtonComponent = __decorate([
+        ViewChild("headerContainer", { static: false })
+    ], ProductHeaderComponent.prototype, "container", void 0);
+    ProductHeaderComponent = ProductHeaderComponent_1 = __decorate([
         Component({
-            selector: "s-split-button",
-            template: "<div class=\"split-button\" [ngClass]=\"{\n        'split-button--primary': type == 'primary',\n        'split-button--secondary': type == 'secondary',\n        'split-button--default': type == 'default',\n        'split-button--disabled': disabled\n    }\">\n    <button class=\"button\" (click)=\"onButtonClick()\">\n        <span class=\"button__icon\" [ngClass]=\"iconClass\"></span>\n        <span class=\"button__label\">{{ label }}</span>\n    </button>\n    <button class=\"dropdown\" (click)=\"onDropdownClick()\">\n        <span class=\"dropdown__icon\" [ngClass]=\"{\n                'far': true,\n                'fa-chevron-down': !open,\n                'fa-chevron-up': open\n            }\">\n        </span>\n    </button>\n</div>\n\n<ul *ngIf=\"this.open\" class=\"options\">\n    <li *ngFor=\"let option of options\" (click)=\"onOptionClick(option)\">\n        {{ option.title }}\n    </li>\n</ul>",
-            styles: [".split-button{display:-ms-flexbox;display:flex;-webkit-user-select:none;-ms-user-select:none;user-select:none}.split-button .button{-ms-flex-align:center;align-items:center;border:none;border-radius:4px 0 0 4px;display:-ms-flexbox;display:flex;padding:8px 8px 8px 12px;transition:.3s ease-in-out}.split-button .button__icon{font-size:16px;padding:0 4px}.split-button .button__title{font-family:\"Open Sans\",sans-serif;font-size:14px;font-weight:400;line-height:21px}.split-button .dropdown{-ms-flex-align:center;align-items:center;border:none;border-left:1px solid #608190;border-radius:0 4px 4px 0;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:12px 8px;transition:.3s ease-in-out}.split-button--disabled{opacity:.5}.split-button--primary .button,.split-button--primary .dropdown{background-color:#428bca;color:#fff}.split-button--primary:not(.split-button--primary--disabled) .button,.split-button--primary:not(.split-button--primary--disabled) .dropdown{cursor:pointer}.split-button--primary:not(.split-button--primary--disabled) .button:hover,.split-button--primary:not(.split-button--primary--disabled) .dropdown:hover{background-color:#063951}.split-button--secondary .button,.split-button--secondary .dropdown{background-color:#7892a1;color:#fff}.split-button--secondary:not(.split-button--secondary--disabled) .button,.split-button--secondary:not(.split-button--secondary--disabled) .dropdown{cursor:pointer}.split-button--secondary:not(.split-button--secondary--disabled) .button:hover,.split-button--secondary:not(.split-button--secondary--disabled) .dropdown:hover{background-color:#697882}.split-button--default .button,.split-button--default .dropdown{background-color:unset;border:1px solid #d8d8d8;color:#333}.split-button--default:not(.split-button--default--disabled) .button,.split-button--default:not(.split-button--default--disabled) .dropdown{cursor:pointer}.split-button--default:not(.split-button--default--disabled) .button:hover,.split-button--default:not(.split-button--default--disabled) .dropdown:hover{background-color:#d8d8d8}.options{background-color:#fff;border-radius:4px;box-shadow:0 1px 5px rgba(0,0,0,.25);display:inline-block;list-style:none;margin:2px 0;padding:8px 0;position:absolute;-webkit-user-select:none;-ms-user-select:none;user-select:none}.options li{color:#333;cursor:pointer;font-family:\"Open Sans\",sans-serif;font-weight:400;font-size:14px;line-height:21px;padding:8px 16px}.options li:hover{background-color:#d8d8d8}"]
-        })
-    ], SplitButtonComponent);
-    return SplitButtonComponent;
-}());
-
-var SplitButtonModule = /** @class */ (function () {
-    function SplitButtonModule() {
-    }
-    SplitButtonModule = __decorate([
-        NgModule({
-            imports: [CommonModule],
-            declarations: [SplitButtonComponent],
-            exports: [SplitButtonComponent],
+            selector: "s-product-header",
+            template: "<div [id]=\"id\" class=\"box\">\n    <div\n      #headerContainer\n      class=\"sds-container\"\n      [class]=\"isHeaderFrame ? 'header-frame' : 'primary-header'\"\n    >\n      <h1 [class]=\"isHeaderFrame ? 'title' : 'primary-title'\">{{ header }}</h1>\n      <div class=\"content\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n",
+            styles: [".box{position:relative;width:100%;height:70px}.header-frame{padding-top:15px;padding-bottom:15px;width:100%;top:0;left:0;height:70px;background-color:#fff;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;position:fixed}.title{color:#999;font-weight:400;font-size:16pt;margin-right:15px;min-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.content{display:-ms-flexbox;display:flex;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.primary-header{display:-ms-flexbox;display:flex;width:100%;height:70px;padding:15px 20px;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;border-bottom:1px solid #ddd;background-color:#fff;gap:24px}@media (max-width:768px){.primary-header{width:100%}}.primary-header .primary-title{color:#999;font-weight:400;font-size:16pt;margin-right:15px;min-width:140px;overflow:hidden;text-overflow:ellipsis}"]
         })
-    ], SplitButtonModule);
-    return SplitButtonModule;
+    ], ProductHeaderComponent);
+    return ProductHeaderComponent;
 }());
-
-var StatsCardComponent = /** @class */ (function () {
-    function StatsCardComponent() {
-        this.id = "s-stats-card-" + StatsCardComponent_1.nextId++;
-        this.alwaysWithBorder = false;
-        this.lightVersion = false;
-        this.lightMode = true;
-        this.iconClass = "fa fa-bar-chart";
-        this.color = "#339966";
-        this.animateNumbers = true;
-        this.clickable = false;
-        this.tooltip = "";
-        this.onClick = new EventEmitter();
-        this.ANIMATION_DURATION_MS = 200;
-        this.STEP_DURATION_MS = 20;
-        this.previousValue = "0";
-        this._value = "0";
-    }
-    StatsCardComponent_1 = StatsCardComponent;
-    Object.defineProperty(StatsCardComponent.prototype, "value", {
-        get: function () {
-            return this._value;
-        },
-        set: function (value) {
-            this.previousValue = this._value;
-            this._value = String(value);
-            if (this.animateNumbers)
-                this.updateDisplayValue();
-            else
-                this.displayValue = this.value;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    StatsCardComponent.prototype.updateDisplayValue = function () {
-        var _this = this;
-        var animationDuration = new BigNumber$1(this.ANIMATION_DURATION_MS);
-        var stepDuration = new BigNumber$1(this.STEP_DURATION_MS);
-        var animationCount = animationDuration.dividedBy(stepDuration);
-        var previousRawValue = new BigNumber$1(this.previousValue.replace(/\D/g, ""));
-        var rawValue = new BigNumber$1(this.value.replace(/\D/g, ""));
-        var incrementValue = rawValue.minus(previousRawValue).absoluteValue().dividedBy(animationCount);
-        var incremental = previousRawValue.isLessThan(rawValue);
-        clearInterval(this.intervalId);
-        this.displayValue = this.replaceNumericPositions(this.value);
-        var counter = previousRawValue;
-        this.intervalId = setInterval(function () {
-            if (incremental && counter.isLessThan(rawValue)) {
-                _this.displayValue = _this.replaceNumericPositions(_this.displayValue, counter);
-                counter = counter.plus(incrementValue);
-            }
-            else if (!incremental && counter.isGreaterThan(rawValue)) {
-                _this.displayValue = _this.replaceNumericPositions(_this.displayValue, counter);
-                counter = counter.minus(incrementValue);
-            }
-            else {
-                _this.displayValue = _this.value;
-                clearInterval(_this.intervalId);
-            }
-        }, this.STEP_DURATION_MS);
-    };
-    StatsCardComponent.prototype.replaceNumericPositions = function (value, newValue) {
-        var rawValue = value.replace(/[^\d]/g, "");
-        var newValueString = newValue ? newValue.toString() : "";
-        var formattedNewValue = newValueString
-            .toString()
-            .replace(/\D/g, "")
-            .padStart(rawValue.length, "0");
-        var newValueIndex = 0;
-        return value
-            .split("")
-            .map(function (char) {
-            var number = Number(char);
-            if (number || char === "0")
-                return formattedNewValue[newValueIndex++];
-            return char;
+
+var ProductHeaderModule = /** @class */ (function () {
+    function ProductHeaderModule() {
+    }
+    ProductHeaderModule = __decorate([
+        NgModule({
+            imports: [CommonModule, TooltipModule$1, ThumbnailModule],
+            declarations: [ProductHeaderComponent],
+            exports: [ProductHeaderComponent, ThumbnailModule],
         })
-            .join("");
+    ], ProductHeaderModule);
+    return ProductHeaderModule;
+}());
+
+var ProgressBarColors;
+(function (ProgressBarColors) {
+    ProgressBarColors["Blue"] = "blue";
+    ProgressBarColors["Green"] = "green";
+    ProgressBarColors["Red"] = "red";
+    ProgressBarColors["Yellow"] = "yellow";
+})(ProgressBarColors || (ProgressBarColors = {}));
+
+var ProgressBarMode;
+(function (ProgressBarMode) {
+    ProgressBarMode["Determinate"] = "determinate";
+    ProgressBarMode["Indeterminate"] = "indeterminate";
+})(ProgressBarMode || (ProgressBarMode = {}));
+
+var ProgressBarComponent = /** @class */ (function () {
+    function ProgressBarComponent() {
+        this.numberFormatOptions = {
+            style: "decimal",
+            minimumFractionDigits: 0,
+            maximumFractionDigits: 2,
+        };
+        this.showValue = true;
+        this.mode = ProgressBarMode.Determinate;
+    }
+    ProgressBarComponent.prototype.ngOnInit = function () {
+        this.validateInputs();
+    };
+    ProgressBarComponent.prototype.validateInputs = function () {
+        if (this.value < 0 || this.value > 100) {
+            throw new Error("Invalid value for value");
+        }
+        if (this.targetValue < 0 || this.targetValue > 100) {
+            throw new Error("Invalid value for targetValue");
+        }
+        if (this.mode === ProgressBarMode.Indeterminate && (this.value || this.targetValue || this.targetLabel)) {
+            throw new Error("When the mode is indeterminate, the value, targetValue and targetLabel parameters are not expected.");
+        }
     };
-    var StatsCardComponent_1;
-    StatsCardComponent.nextId = 0;
     __decorate([
         Input()
-    ], StatsCardComponent.prototype, "id", void 0);
+    ], ProgressBarComponent.prototype, "value", void 0);
     __decorate([
         Input()
-    ], StatsCardComponent.prototype, "label", void 0);
+    ], ProgressBarComponent.prototype, "numberFormatOptions", void 0);
     __decorate([
         Input()
-    ], StatsCardComponent.prototype, "alwaysWithBorder", void 0);
+    ], ProgressBarComponent.prototype, "targetValue", void 0);
     __decorate([
         Input()
-    ], StatsCardComponent.prototype, "lightVersion", void 0);
+    ], ProgressBarComponent.prototype, "label", void 0);
     __decorate([
         Input()
-    ], StatsCardComponent.prototype, "lightMode", void 0);
+    ], ProgressBarComponent.prototype, "targetLabel", void 0);
     __decorate([
         Input()
-    ], StatsCardComponent.prototype, "iconClass", void 0);
+    ], ProgressBarComponent.prototype, "activeColor", void 0);
     __decorate([
         Input()
-    ], StatsCardComponent.prototype, "color", void 0);
+    ], ProgressBarComponent.prototype, "showValue", void 0);
     __decorate([
         Input()
-    ], StatsCardComponent.prototype, "animateNumbers", void 0);
+    ], ProgressBarComponent.prototype, "mode", void 0);
+    ProgressBarComponent = __decorate([
+        Component({
+            selector: "s-progressbar",
+            template: "<ng-container *ngIf=\"mode === 'determinate'; then pbDeterminateTemplate else pbIndeterminateTemplate\"></ng-container>\n\n<ng-template #pbDeterminateTemplate>\n   <s-progressbar-determinate\n      [value]=\"value\"\n      [numberFormatOptions]=\"numberFormatOptions\"\n      [targetValue]=\"targetValue\"\n      [targetLabel]=\"targetLabel\"\n      [activeColor]=\"activeColor\"\n      [showValue]=\"showValue\">\n   </s-progressbar-determinate>\n</ng-template>\n\n<ng-template #pbIndeterminateTemplate>\n   <s-progressbar-indeterminate\n      [activeColor]=\"activeColor\"\n      [label]=\"label\">\n   </s-progressbar-indeterminate>\n</ng-template>",
+            styles: [".progress-bar{position:relative}.progress-bar .progress-bar-all{background-color:#d8d8d8;border-radius:4px;height:24px;overflow:hidden;width:100%}.progress-bar .progress-bar-all .progress-bar-active{-ms-flex-align:center;align-items:center;color:#fff;display:-ms-flexbox;display:flex;font-family:\"Open Sans\",sans-serif;font-size:14px;height:100%;-ms-flex-pack:center;justify-content:center;line-height:150%;-webkit-user-select:none;-ms-user-select:none;user-select:none;width:80%}.progress-bar .progress-bar-all .progress-bar-active--blue{background-color:#428bca}.progress-bar .progress-bar-all .progress-bar-active--green{background-color:#0c9348}.progress-bar .progress-bar-all .progress-bar-active--red{background-color:#c13018}.progress-bar .progress-bar-all .progress-bar-active--yellow{background-color:#fcbf10}.progress-bar .target{-ms-flex-align:start;align-items:flex-start;bottom:-38px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:absolute}.progress-bar .target .target-line{background-color:#333;height:40px;margin:8px 0;width:1px}.progress-bar .target .target-label{background-color:#426e78;border-radius:10px;color:#e5eaea;font-family:\"Open Sans\",sans-serif;font-size:12px;line-height:150%;padding:2px 12px}"]
+        })
+    ], ProgressBarComponent);
+    return ProgressBarComponent;
+}());
+
+var ProgressBarDeterminateComponent = /** @class */ (function () {
+    function ProgressBarDeterminateComponent(localeService) {
+        this.localeService = localeService;
+        this.showValue = true;
+    }
+    ProgressBarDeterminateComponent.prototype.ngOnInit = function () {
+        this.validateValues();
+        this.onGetLocale();
+    };
+    ProgressBarDeterminateComponent.prototype.onGetLocale = function () {
+        var _this = this;
+        this.localeService.getLocale().subscribe({
+            next: function (locale) {
+                _this.numberFormat = new Intl.NumberFormat(locale !== null && locale !== void 0 ? locale : "pt-BR", _this.numberFormatOptions);
+            },
+            error: function () {
+                _this.numberFormat = new Intl.NumberFormat("pt-BR", _this.numberFormatOptions);
+            },
+        });
+    };
+    ProgressBarDeterminateComponent.prototype.validateValues = function () {
+        if (this.value < 0 || this.value > 100) {
+            throw new Error("Invalid value for value");
+        }
+        if (this.targetValue < 0 || this.targetValue > 100) {
+            throw new Error("Invalid value for targetValue");
+        }
+    };
+    ProgressBarDeterminateComponent.ctorParameters = function () { return [
+        { type: LocaleService }
+    ]; };
     __decorate([
         Input()
-    ], StatsCardComponent.prototype, "clickable", void 0);
+    ], ProgressBarDeterminateComponent.prototype, "value", void 0);
     __decorate([
         Input()
-    ], StatsCardComponent.prototype, "value", null);
+    ], ProgressBarDeterminateComponent.prototype, "numberFormatOptions", void 0);
     __decorate([
         Input()
-    ], StatsCardComponent.prototype, "tooltip", void 0);
+    ], ProgressBarDeterminateComponent.prototype, "targetValue", void 0);
     __decorate([
-        Output()
-    ], StatsCardComponent.prototype, "onClick", void 0);
-    StatsCardComponent = StatsCardComponent_1 = __decorate([
+        Input()
+    ], ProgressBarDeterminateComponent.prototype, "targetLabel", void 0);
+    __decorate([
+        Input()
+    ], ProgressBarDeterminateComponent.prototype, "activeColor", void 0);
+    __decorate([
+        Input()
+    ], ProgressBarDeterminateComponent.prototype, "showValue", void 0);
+    ProgressBarDeterminateComponent = __decorate([
         Component({
-            selector: "s-stats-card",
-            template: "<div\n    [id]=\"id\"\n    class=\"s-stats-card\"\n    [ngClass]=\"{\n        's-stats-card--always-border': alwaysWithBorder,\n        's-stats-card--light': lightMode,\n        's-stats-card--color': !lightMode,\n        's-stats-card--light-version': lightVersion,\n        's-stats-card--clickable': clickable\n    }\"\n    (click)=\"clickable && onClick.next($event)\">\n\n    <div\n        [id]=\"id + '-background'\"\n        class=\"s-stats-card-background\"\n        [ngStyle]=\"{ 'background-color': !lightMode && color || '' }\">\n    </div>\n    <div\n        [id]=\"id + '-overlay'\"\n        class=\"s-stats-card-overlay\">\n    </div>\n\n    <div\n        [id]=\"id + '-info-container'\"\n        class=\"s-stats-card-info-container\">\n        <div class=\"s-stats-card-info-inner-container\">\n            <div\n                [id]=\"id + '-icon-container'\"\n                class=\"s-stats-card-icon-container\"\n                [ngStyle]=\"{ 'background-color': lightMode && color || '' }\">\n                <span\n                    [id]=\"id + '-icon'\"\n                    [class]=\"iconClass\"\n                    [ngClass]=\"{ 's-stats-card-icon': true }\"\n                    [ngStyle]=\"{'color': !lightMode && color || ''}\"\n                    aria-hidden=\"true\"></span>\n            </div>\n\n            <div\n                [id]=\"id + '-text-container'\"\n                class=\"s-stats-card-text-container\">\n                <h4\n                    [id]=\"id + '-label'\"\n                    class=\"s-stats-card-label\"\n                    [pTooltip]=\"label\"\n                    tooltipPosition=\"top\"\n                    showDelay=\"500\">\n                    {{ label }}\n                </h4>\n                <span\n                    [id]=\"id + '-value'\"\n                    class=\"s-stats-card-value\"\n                    [pTooltip]=\"displayValue\"\n                    tooltipPosition=\"top\"\n                    showDelay=\"500\">\n                    {{ displayValue }}\n                </span>\n            </div>\n        </div>\n        <div class=\"s-stats-card-content-inner-container\">\n            <div #content class=\"s-stats-card-content-container\">\n                <ng-content></ng-content>\n            </div>\n            <div\n                *ngIf=\"content.children.length\"\n                class=\"s-stats-card-content-separator\">\n            </div>\n        </div>\n        <span\n            *ngIf=\"tooltip\"\n            class=\"s-status-card-tooltip\"\n            [pTooltip]=\"tooltip\"\n            tooltipPosition=\"right\">\n            <i class=\"fa fa-info-circle s-status-card-tooltip-icon\"></i>\n        </span>\n    </div>\n</div>\n",
-            encapsulation: ViewEncapsulation.None,
-            styles: ["s-stats-card{display:block;height:auto;position:relative}s-stats-card .s-stats-card{border:1px solid transparent;min-width:120px;overflow:hidden;position:relative}s-stats-card .s-stats-card .s-stats-card-background,s-stats-card .s-stats-card .s-stats-card-overlay{height:calc(100% - 2px);left:1px;position:absolute;top:1px;width:calc(100% - 2px)}s-stats-card .s-stats-card .s-stats-card-background{background-color:#fff}s-stats-card .s-stats-card .s-stats-card-overlay{background-color:#000;opacity:0;transition:opacity .2s ease-out}s-stats-card .s-stats-card .s-stats-card-info-container{overflow:auto;padding:15px;position:relative}s-stats-card .s-stats-card .s-stats-card-info-container .s-stats-card-info-inner-container{overflow:hidden;position:relative}s-stats-card .s-stats-card .s-stats-card-info-container .s-stats-card-info-inner-container .s-stats-card-icon-container{float:left;font-size:24px;height:50px;line-height:50px;text-align:center;transition:width .2s ease-out;width:50px}s-stats-card .s-stats-card .s-stats-card-info-container .s-stats-card-info-inner-container .s-stats-card-text-container{-ms-flex-align:start;align-items:flex-start;color:#fff;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;float:left;height:50px;-ms-flex-pack:center;justify-content:center;max-width:calc(100% - 65px);padding-left:15px}s-stats-card .s-stats-card .s-stats-card-info-container .s-stats-card-info-inner-container .s-stats-card-text-container .s-stats-card-label{font-weight:400;width:100%}s-stats-card .s-stats-card .s-stats-card-info-container .s-stats-card-info-inner-container .s-stats-card-text-container .s-stats-card-value{display:inline-block;font-size:20px;font-weight:700;width:100%}s-stats-card .s-stats-card .s-stats-card-info-container .s-stats-card-info-inner-container .s-stats-card-text-container,s-stats-card .s-stats-card .s-stats-card-info-container .s-stats-card-info-inner-container .s-stats-card-text-container .s-stats-card-label,s-stats-card .s-stats-card .s-stats-card-info-container .s-stats-card-info-inner-container .s-stats-card-text-container .s-stats-card-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}s-stats-card .s-stats-card .s-stats-card-info-container .s-stats-card-content-inner-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}s-stats-card .s-stats-card .s-stats-card-info-container .s-stats-card-content-inner-container .s-stats-card-content-separator{border-top:1px solid #ccc;margin:15px 0;-ms-flex-order:1;order:1}s-stats-card .s-stats-card .s-stats-card-info-container .s-stats-card-content-inner-container .s-stats-card-content-container{-ms-flex-order:2;order:2}s-stats-card .s-stats-card .s-stats-card-info-container .s-status-card-tooltip{font-size:1rem;line-height:0;margin:.3rem;position:absolute;right:0;top:0}s-stats-card .s-stats-card .s-stats-card-info-container .s-status-card-tooltip .s-status-card-tooltip-icon{color:#fff}s-stats-card .s-stats-card.s-stats-card--color .s-stats-card-icon-container{background-color:#fff}s-stats-card .s-stats-card.s-stats-card--light *{color:#333}s-stats-card .s-stats-card.s-stats-card--light .s-stats-card-icon{color:#fff}s-stats-card .s-stats-card.s-stats-card--light * .s-status-card-tooltip .s-status-card-tooltip-icon,s-stats-card .s-stats-card.s-stats-card--light .s-stats-card-label{color:#999}s-stats-card .s-stats-card.s-stats-card--light-version .s-stats-card-info-inner-container .s-stats-card-icon-container{height:100%;left:0;position:absolute;right:0;width:10px}s-stats-card .s-stats-card.s-stats-card--light-version .s-stats-card-info-inner-container .s-stats-card-icon-container .s-stats-card-icon{display:none}s-stats-card .s-stats-card.s-stats-card--light-version .s-stats-card-info-inner-container .s-stats-card-text-container{height:auto;max-width:calc(100% - 25px);padding-left:25px}s-stats-card .s-stats-card.s-stats-card--clickable{cursor:pointer}s-stats-card .s-stats-card:hover .s-stats-card-overlay{opacity:.2}s-stats-card .s-stats-card.s-stats-card--light:hover .s-stats-card-overlay{opacity:.08}s-stats-card .s-stats-card.s-stats-card--light{border-color:#ccc}.s-sidebar-content .s-stats-card.s-stats-card--light:not(.s-stats-card--always-border),.ui-dialog-content .s-stats-card.s-stats-card--light:not(.s-stats-card--always-border),p-panel .s-stats-card.s-stats-card--light:not(.s-stats-card--always-border){border-color:transparent}@media (max-width:767px){s-stats-card .s-stats-card{height:auto}s-stats-card .s-stats-card .s-stats-card-info-container .s-stats-card-info-inner-container .s-stats-card-icon-container{height:100%;left:0;position:absolute;right:0;width:10px}s-stats-card .s-stats-card .s-stats-card-info-container .s-stats-card-info-inner-container .s-stats-card-icon-container .s-stats-card-icon{display:none}s-stats-card .s-stats-card .s-stats-card-info-container .s-stats-card-info-inner-container .s-stats-card-text-container{height:auto;max-width:calc(100% - 25px);padding-left:25px}s-stats-card .s-stats-card .s-stats-card-info-container .s-stats-card-info-inner-container .s-stats-card-text-container,s-stats-card .s-stats-card .s-stats-card-info-container .s-stats-card-info-inner-container .s-stats-card-text-container .s-stats-card-label,s-stats-card .s-stats-card .s-stats-card-info-container .s-stats-card-info-inner-container .s-stats-card-text-container .s-stats-card-value{overflow:visible;white-space:normal;word-break:break-all}}"]
+            selector: "s-progressbar-determinate",
+            template: "<div class=\"progressbar-determinate\">\n    <div class=\"progressbar-container\">\n       <div\n          class=\"progressbar-active\"\n          [ngClass]=\"{\n             'progressbar-active--blue' : activeColor === 'blue',\n             'progressbar-active--green': activeColor === 'green',\n             'progressbar-active--red': activeColor === 'red',\n             'progressbar-active--yellow': activeColor === 'yellow'\n          }\"\n          [ngStyle]=\"{ 'width': value + '%' }\">\n\n          {{ showValue && value ? numberFormat.format(value) + '%' : '' }}\n       </div>\n    </div>\n    <div\n       *ngIf=\"targetValue\"\n       class=\"target\"\n       [ngStyle]=\"{\n          'left': targetValue <= 50 ? targetValue + '%' : 'unset',\n          'right': targetValue > 50 ? 100 - targetValue + '%' : 'unset',\n          'align-items': targetValue > 50 ? 'flex-end' : 'flex-start'\n       }\">\n       <span class=\"target-line\"></span>\n       <span class=\"target-label\">\n           {{ targetLabel || numberFormat.format(value) + '%' }}\n       </span>\n    </div>\n </div>\n",
+            styles: [".progressbar-determinate{position:relative}.progressbar-determinate .progressbar-container{background-color:#d8d8d8;border-radius:4px;height:24px;overflow:hidden;width:100%}.progressbar-determinate .progressbar-container .progressbar-active{-ms-flex-align:center;align-items:center;color:#fff;display:-ms-flexbox;display:flex;font-family:\"Open Sans\",sans-serif;font-size:14px;height:100%;-ms-flex-pack:center;justify-content:center;line-height:150%;-webkit-user-select:none;-ms-user-select:none;user-select:none;width:80%}.progressbar-determinate .progressbar-container .progressbar-active--blue{background-color:#428bca}.progressbar-determinate .progressbar-container .progressbar-active--green{background-color:#0c9348}.progressbar-determinate .progressbar-container .progressbar-active--red{background-color:#c13018}.progressbar-determinate .progressbar-container .progressbar-active--yellow{background-color:#fcbf10;color:#212533}.progressbar-determinate .target{-ms-flex-align:start;align-items:flex-start;bottom:-38px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:absolute}.progressbar-determinate .target .target-line{background-color:#333;height:40px;margin:8px 0;width:1px}.progressbar-determinate .target .target-label{background-color:#426e78;border-radius:10px;color:#e5eaea;font-family:\"Open Sans\",sans-serif;font-size:12px;line-height:150%;padding:2px 12px}"]
         })
-    ], StatsCardComponent);
-    return StatsCardComponent;
+    ], ProgressBarDeterminateComponent);
+    return ProgressBarDeterminateComponent;
 }());
 
-var StatsCardModule = /** @class */ (function () {
-    function StatsCardModule() {
+var ProgressBarIndeterminateComponent = /** @class */ (function () {
+    function ProgressBarIndeterminateComponent() {
     }
-    StatsCardModule = __decorate([
+    __decorate([
+        Input()
+    ], ProgressBarIndeterminateComponent.prototype, "activeColor", void 0);
+    __decorate([
+        Input()
+    ], ProgressBarIndeterminateComponent.prototype, "label", void 0);
+    ProgressBarIndeterminateComponent = __decorate([
+        Component({
+            selector: "s-progressbar-indeterminate",
+            template: "<div class=\"progressbar-indeterminate\">\n    <div class=\"progressbar-container\">\n        <div class=\"indeterminate-bar\" [ngClass]=\"{\n            'indeterminate-bar--blue': activeColor === 'blue',\n            'indeterminate-bar--green': activeColor === 'green',\n            'indeterminate-bar--red': activeColor === 'red',\n            'indeterminate-bar--yellow': activeColor === 'yellow'\n        }\"></div>\n    </div>\n\n    <span *ngIf=\"label\" class=\"progressbar-label\">{{ label }}</span>\n</div>\n",
+            styles: [".progressbar-indeterminate{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center}.progressbar-indeterminate .progressbar-container{background-color:#d8d8d8;border-radius:4px;height:24px;margin:8px 0;overflow:hidden;width:100%}.progressbar-indeterminate .indeterminate-bar{animation:5s infinite indeterminate-progress;background-color:#428bca;height:100%;width:40%}.progressbar-indeterminate .indeterminate-bar--blue{background-color:#428bca}.progressbar-indeterminate .indeterminate-bar--green{background-color:#0c9348}.progressbar-indeterminate .indeterminate-bar--red{background-color:#c13018}.progressbar-indeterminate .indeterminate-bar--yellow{background-color:#fcbf10}.progressbar-indeterminate .progressbar-label{font-family:\"Open Sans\" sans-serif;font-size:12px;line-height:150%;color:#212533}@keyframes indeterminate-progress{0%{transform:translateX(-250%)}100%{transform:translateX(250%)}}"]
+        })
+    ], ProgressBarIndeterminateComponent);
+    return ProgressBarIndeterminateComponent;
+}());
+
+var ProgressBarModule = /** @class */ (function () {
+    function ProgressBarModule() {
+    }
+    ProgressBarModule = __decorate([
         NgModule({
-            imports: [
-                CommonModule,
-                TooltipModule$1,
-            ],
+            imports: [CommonModule],
             declarations: [
-                StatsCardComponent,
-            ],
-            exports: [
-                StatsCardComponent,
+                ProgressBarComponent,
+                ProgressBarDeterminateComponent,
+                ProgressBarIndeterminateComponent,
             ],
+            exports: [ProgressBarComponent],
         })
-    ], StatsCardModule);
-    return StatsCardModule;
+    ], ProgressBarModule);
+    return ProgressBarModule;
 }());
 
-var StepState;
-(function (StepState) {
-    StepState["Default"] = "default";
-    StepState["Success"] = "success";
-    StepState["Warning"] = "warning";
-})(StepState || (StepState = {}));
-var StepsComponent = /** @class */ (function () {
-    function StepsComponent() {
-        this.id = "s-steps-" + StepsComponent_1.nextId++;
-        this.activeIndex = 0;
-        this.stepSelected = new EventEmitter();
+var PanelComponent = /** @class */ (function () {
+    function PanelComponent() {
+        this.toggleable = true;
+        this.collapsed = false;
+        this.severity = EnumSeverity.Default;
+        this.collapsedChange = new EventEmitter();
+        this.EnumSeverity = EnumSeverity;
     }
-    StepsComponent_1 = StepsComponent;
-    StepsComponent.prototype.stepClick = function (step, index, event) {
-        if (step.disabled || index == this.activeIndex)
-            return;
-        this.stepSelected.emit({ step: step, index: index, event: event });
-    };
-    Object.defineProperty(StepsComponent.prototype, "stepState", {
-        get: function () {
-            return StepState;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    StepsComponent.prototype.barAnimation = function (index, activeIndex) {
-        var visited = index < activeIndex;
-        var activated = index === activeIndex;
-        return visited || activated;
-    };
-    StepsComponent.prototype.afterBarAnimation = function (index, activeIndex) {
-        var visited = index < activeIndex;
-        var activated = index === activeIndex - 1;
-        return visited || activated;
+    PanelComponent.prototype.onCollapsedChange = function (collapsed) {
+        this.collapsed = collapsed;
+        this.collapsedChange.emit(this.collapsed);
     };
-    Object.defineProperty(StepsComponent.prototype, "visibledStep", {
-        get: function () {
-            return this.steps.filter(function (step) { return !step.hidden; });
-        },
-        enumerable: true,
-        configurable: true
-    });
-    var StepsComponent_1;
-    StepsComponent.nextId = 0;
     __decorate([
         Input()
-    ], StepsComponent.prototype, "id", void 0);
+    ], PanelComponent.prototype, "header", void 0);
     __decorate([
         Input()
-    ], StepsComponent.prototype, "steps", void 0);
+    ], PanelComponent.prototype, "toggleable", void 0);
     __decorate([
         Input()
-    ], StepsComponent.prototype, "activeIndex", void 0);
+    ], PanelComponent.prototype, "collapsed", void 0);
+    __decorate([
+        Input()
+    ], PanelComponent.prototype, "severity", void 0);
+    __decorate([
+        Input()
+    ], PanelComponent.prototype, "borderButtonOptions", void 0);
     __decorate([
         Output()
-    ], StepsComponent.prototype, "stepSelected", void 0);
-    StepsComponent = StepsComponent_1 = __decorate([
+    ], PanelComponent.prototype, "collapsedChange", void 0);
+    PanelComponent = __decorate([
         Component({
-            selector: "s-steps",
-            template: "<div [id]=\"id\" class=\"s-steps-container\">\n    <ng-container *ngFor=\"let step of visibledStep; let i = index; let isFirst = first; let isLast = last\">\n        <div *ngIf=\"!isFirst\" class=\"s-step-progress-bar\"\n            [@activeDesative]=\"barAnimation(i, activeIndex) ? 'active': 'desactive'\" [ngClass]=\"{\n            's-step-success': (step.state === stepState.Success),\n            's-step-warning': (step.state === stepState.Warning),\n            's-step-disabled': step.disabled,\n            's-step-visited': (i < activeIndex),\n            's-step-active': (i === activeIndex)\n        }\"></div>\n        <div [id]=\"id + '-step-' + (step.id || i)\" class=\"s-step-header\" (click)=\"stepClick(step, i, $event)\" 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-step-success': (step.state === stepState.Success),\n            's-step-warning': (step.state === stepState.Warning),\n            's-step-visited': (i < activeIndex),\n            's-step-active': (i === activeIndex),\n            's-step-previous': (i === activeIndex - 1)\n        }\">\n            <div *ngIf=\"!isFirst\"\n                [@beforeActiveDesative]=\"barAnimation(i, activeIndex) ? 'active': 'desactive'\"\n                class=\"s-step-progress-bar-before\" [ngClass]=\"{\n                's-step-success': (step.state === stepState.Success),\n                's-step-warning': (step.state === stepState.Warning),\n                's-step-disabled': step.disabled,\n                's-step-visited': (i < activeIndex),\n                's-step-active': (i === activeIndex)\n            }\"></div>\n            <div *ngIf=\"!isLast\"\n                [@afterActiveDesative]=\"afterBarAnimation(i, activeIndex) ? 'active': 'desactive'\"\n                class=\"s-step-progress-bar-after\" [ngClass]=\"{\n                's-step-success': (step.state === stepState.Success),\n                's-step-warning': (step.state === stepState.Warning),\n                's-step-disabled': visibledStep[i + 1].disabled,\n                's-step-visited': ((i + 1) < activeIndex),\n                's-step-active': (i === (activeIndex - 1))\n            }\"></div>\n            <div\n                class=\"s-step-index\"\n                [ngClass]=\"{'s-step-disabled': step.disabled}\"\n                [pTooltip]=\"step.tooltip\"\n                tooltipPosition=\"top\">\n                <div class=\"s-step-index-content\">\n                    <span\n                        *ngIf=\"step.state !== stepState.Warning && (step.state == stepState.Success || activeIndex > i)\"\n                        class=\"fas fa-check\"\n                        aria-hidden=\"true\"\n                        [attr.aria-label]=\"i + 1\"></span>\n                    <span\n                        *ngIf=\"step.state == stepState.Warning\"\n                        class=\"fas fa-exclamation-triangle\"\n                        aria-hidden=\"true\"\n                        [attr.aria-label]=\"i + 1\"></span>\n                    <span\n                        *ngIf=\"step.state != stepState.Success && step.state != stepState.Warning && activeIndex <= i\">\n                        {{i + 1}}\n                    </span>\n                </div>\n            </div>\n            <div\n                [id]=\"'step-label-' + i\"\n                class=\"s-step-label\"\n                [ngClass]=\"{'s-step-disabled': step.disabled}\">\n                <span>\n                    {{step.label}}\n                </span>\n            </div>\n        </div>\n    </ng-container>\n</div>\n",
-            host: {
-                "aria-orientation": "horizontal",
-                role: "tablist",
-                "tab-index": "0",
-            },
+            selector: "s-panel",
+            template: "<p-panel\n    [toggleable]=\"toggleable\"\n    [collapsed]=\"collapsed\"\n    [ngClass]=\"{\n        'panel--severity-default': severity === EnumSeverity.Default,\n        'panel--severity-info': severity === EnumSeverity.Info,\n        'panel--severity-warn': severity === EnumSeverity.Warn,\n        'panel--severity-error': severity === EnumSeverity.Error,\n        'panel--severity-success': severity == EnumSeverity.Success\n    }\"\n    (collapsedChange)=\"onCollapsedChange($event)\"\n>\n    <p-header>\n        <s-border-button\n            *ngIf=\"\n                borderButtonOptions?.visible\n                    ? borderButtonOptions?.visible(severity)\n                    : false\n            \"\n            [severity]=\"severity\"\n            [options]=\"borderButtonOptions\"\n            class=\"panel__border-button\"\n            [@BorderButtonAnimation]\n        ></s-border-button>\n        <span>\n            {{ header }}\n        </span>\n    </p-header>\n\n    <ng-content></ng-content>\n</p-panel>",
             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")]),
+                trigger("BorderButtonAnimation", [
+                    transition(":enter", [
+                        style$7({ transform: "scaleY(0)", opacity: 0 }),
+                        animate("300ms ease", style$7({ transform: "scaleY(1)", opacity: 1 })),
+                    ]),
+                    transition(":leave", [
+                        style$7({ transform: "scaleY(1)", opacity: 1 }),
+                        animate("300ms ease", style$7({ transform: "scaleY(0)", opacity: 0 })),
+                    ]),
                 ]),
             ],
-            styles: ["@keyframes scale-up-center{0%{transform:scale(.5)}100%{transform:scale(1)}}.s-steps-container{display:-ms-flexbox;display:flex;white-space:nowrap;-ms-flex-align:start;align-items:flex-start;overflow:hidden;padding:15px 10px}.s-step-header{box-sizing:border-box;-ms-flex-direction:column;flex-direction:column;cursor:pointer;position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:66px}.s-step-header .s-step-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-step-header .s-step-progress-bar-before{margin:0;position:absolute;top:20px;-ms-flex:auto;flex:auto;height:3px;overflow:hidden;width:calc(50% - 20px);background-color:#ccc;background-image:linear-gradient(to right,#7892a1 50%,#ccc 50%);background-position:right bottom;background-size:300% 100%;left:0}.s-step-header .s-step-progress-bar-before.s-step-active,.s-step-header .s-step-progress-bar-before.s-step-visited{background-position:left bottom}.s-step-header .s-step-progress-bar-after{margin:0;position:absolute;top:20px;-ms-flex:auto;flex:auto;height:3px;overflow:hidden;width:calc(50% - 20px);background-color:#ccc;background-image:linear-gradient(to right,#7892a1 50%,#ccc 50%);background-position:right bottom;background-size:300% 100%;right:0}.s-step-header .s-step-progress-bar-after.s-step-active,.s-step-header .s-step-progress-bar-after.s-step-visited{background-position:left bottom}.s-step-progress-bar{margin:0;position:relative;top:20px;-ms-flex:auto;flex:auto;height:3px;overflow:hidden;width:100%;background-color:#ccc;background-image:linear-gradient(to right,#7892a1 50%,#ccc 50%);background-position:right bottom;background-size:300% 100%}.s-step-disabled{opacity:.5;filter:Alpha(Opacity=50)}.s-step-disabled,.s-step-disabled *{cursor:text!important}.s-step-active.s-step-disabled{opacity:1}.s-step-index{background-color:#fff;border:3px solid #ccc;border-radius:50%;color:#999;display:inline-block;font-weight:700;position:relative;transition:background-color .2s ease-out;height:40px;width:40px;-ms-flex:none;flex:none}.s-step-index .s-step-index-content{line-height:18px;font-size:18px;padding-top:8.5px;text-align:center;position:relative;cursor:pointer}.s-step-index:hover{background-color:#f7f7f7}.s-step-warning .s-step-index .s-step-index-content{padding-top:7px}.s-step-visited .s-step-index{border-color:#7892a1;animation:.1s ease-out alternate scale-up-center;background-color:#7892a1}.s-step-visited .s-step-index-content>span{color:#fff}.s-step-active.s-step-progress-bar,.s-step-visited.s-step-progress-bar{background-position:left bottom}.s-step-active .s-step-index{border-color:#7892a1;color:#7892a1;cursor:default}.s-step-active .s-step-label{color:#333;font-weight:700}@media (max-width:767px){.s-step-label{display:none}}"]
+            styles: [":host{display:block}:host ::ng-deep .ui-panel{position:relative}:host ::ng-deep .panel--severity-default .ui-panel{border-color:#ccc}:host ::ng-deep .panel--severity-info .ui-panel{border-color:#428bca;transition:border-color .5s}:host ::ng-deep .panel--severity-warn .ui-panel{border-color:#f8931f;transition:border-color .5s}:host ::ng-deep .panel--severity-error .ui-panel{border-color:#c13018;transition:border-color .5s}:host ::ng-deep .panel--severity-success .ui-panel{border-color:#0c9348;transition:border-color .5s}.panel__border-button{position:absolute;top:-13px;right:15px;z-index:1}"]
         })
-    ], StepsComponent);
-    return StepsComponent;
+    ], PanelComponent);
+    return PanelComponent;
 }());
 
-var StepsModule = /** @class */ (function () {
-    function StepsModule() {
+var PanelModule = /** @class */ (function () {
+    function PanelModule() {
     }
-    StepsModule = __decorate([
+    PanelModule = __decorate([
         NgModule({
-            imports: [CommonModule, TooltipModule$1],
-            declarations: [StepsComponent],
-            exports: [StepsComponent],
+            imports: [CommonModule, PanelModule$1, BorderButtonModule],
+            declarations: [PanelComponent],
+            exports: [PanelComponent],
         })
-    ], StepsModule);
-    return StepsModule;
-}());
-
-var TieredMenuEventService = /** @class */ (function () {
-    function TieredMenuEventService() {
-        this.incrementCurrentItemEvent = new EventEmitter();
-        this.decrementCurrentItemEvent = new EventEmitter();
-        this.closeAllMenusEvent = new EventEmitter();
-        this.selectItemEvent = new EventEmitter();
-        this.openItemMenuEvent = new EventEmitter();
-        this.closeItemMenuEvent = new EventEmitter();
-        this.createMenuEvent = new EventEmitter();
-    }
-    TieredMenuEventService = __decorate([
-        Injectable()
-    ], TieredMenuEventService);
-    return TieredMenuEventService;
+    ], PanelModule);
+    return PanelModule;
 }());
 
-var TieredMenuService = /** @class */ (function () {
-    function TieredMenuService() {
-        this.currentItems = [];
-        this.items = [];
+var RatingScaleComponent = /** @class */ (function () {
+    function RatingScaleComponent() {
+        this.disabled = false;
     }
-    TieredMenuService.prototype.normalizeData = function (items, parent) {
-        var _this = this;
-        return items.map(function (i) {
-            var item = __assign({ visible: true }, i);
-            if (item.submenu) {
-                item.submenu = _this.normalizeData(item.submenu, item);
-            }
-            item.id = _this._generateId();
-            item.parent = parent;
-            item.isOpen = false;
-            return item;
-        });
-    };
-    TieredMenuService.prototype.markAllItemsAsClosed = function (items) {
-        var _this = this;
-        return items.map(function (i) {
-            var item = __assign({}, i);
-            if (item.submenu) {
-                item.submenu = _this.markAllItemsAsClosed(item.submenu);
-            }
-            item.isOpen = false;
-            return item;
-        });
-    };
-    TieredMenuService.prototype.searchTheHierarchy = function (itemA, itemB) {
-        var item = itemB;
-        while (item) {
-            if (item === itemA) {
-                return true;
-            }
-            item = item.parent;
+    RatingScaleComponent_1 = RatingScaleComponent;
+    RatingScaleComponent.prototype.writeValue = function (value) {
+        if (!this.disabled) {
+            this.value = value;
         }
-        return false;
     };
-    TieredMenuService.prototype.cloneItems = function (items) {
-        return JSON.parse(JSON.stringify(items));
+    RatingScaleComponent.prototype.registerOnChange = function (onChange) {
+        this._onChange = onChange;
     };
-    TieredMenuService.prototype._generateId = function () {
-        return "id-" + Math.random().toString(36).substring(2, 9) + "-" + Math.random().toString(36).substring(2, 9) + "-" + Math.random().toString(36).substring(2, 9);
+    RatingScaleComponent.prototype.registerOnTouched = function (onTouched) {
+        this._onTouched = onTouched;
     };
-    TieredMenuService = __decorate([
-        Injectable()
-    ], TieredMenuService);
-    return TieredMenuService;
+    RatingScaleComponent.prototype.onSelect = function (rating) {
+        this.value = rating;
+        if (this._onChange) {
+            this._onChange(this.value);
+        }
+    };
+    var RatingScaleComponent_1;
+    __decorate([
+        Input()
+    ], RatingScaleComponent.prototype, "nodes", void 0);
+    __decorate([
+        Input()
+    ], RatingScaleComponent.prototype, "startLabel", void 0);
+    __decorate([
+        Input()
+    ], RatingScaleComponent.prototype, "endLabel", void 0);
+    __decorate([
+        Input()
+    ], RatingScaleComponent.prototype, "disabled", void 0);
+    RatingScaleComponent = RatingScaleComponent_1 = __decorate([
+        Component({
+            selector: "s-rating-scale",
+            template: "<div\n    class=\"rating-scale\"\n    [ngClass]=\"{ 'rating-scale--disabled': disabled }\">\n    <div class=\"nodes\">\n        <button\n            *ngFor=\"let node of nodes; index as i\"\n            class=\"node\"\n            [ngClass]=\"{ 'node--selected': value?.id === node.id && !disabled }\"\n            tabindex=\"0\"\n            (click)=\"onSelect(node)\">            \n            <span\n                *ngIf=\"node.icon\"\n                class=\"icon fas\"\n                [ngClass]=\"node.icon\">\n            </span>\n            <span\n                *ngIf=\"node.title\"\n                class=\"label\">\n                {{ node.title }}\n            </span>\n        </button>\n    </div>\n    <div class=\"labels\">\n        <span>{{ startLabel }}</span>\n        <span>{{ endLabel }}</span>\n    </div>\n</div>",
+            providers: [{
+                    provide: NG_VALUE_ACCESSOR,
+                    useExisting: forwardRef(function () { return RatingScaleComponent_1; }),
+                    multi: true,
+                }],
+            styles: [".rating-scale{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.rating-scale .nodes{display:-ms-flexbox;display:flex}.rating-scale .nodes .node{-ms-flex-align:center;align-items:center;background-color:#fff;border-radius:6px;display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-pack:center;justify-content:center;margin:0 2px;padding:8px;border:1px solid #7892a1}.rating-scale .nodes .node .icon{color:#6e7280;font-size:1rem}.rating-scale .nodes .node .label{color:#212533;font-size:.875rem;font-weight:400;line-height:150%}.rating-scale .nodes .node .icon,.rating-scale .nodes .node .label{margin:6px}.rating-scale .nodes .node--selected{background-color:#d5e8ec;border-color:#428bca;color:#428bca}.rating-scale .nodes .node:first-child{margin-left:0}.rating-scale .nodes .node:last-child{margin-right:0}.rating-scale .labels{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;padding:12px 0}.rating-scale .labels span{color:#080808;font-family:\"Open Sans\" sans-serif;font-size:.875rem;font-weight:400;line-height:150%}.rating-scale--disabled{opacity:.5}.rating-scale:not(.rating-scale--disabled) .node{cursor:pointer}.rating-scale:not(.rating-scale--disabled) .node:hover{background-color:#dedce5}.rating-scale:not(.rating-scale--disabled) .node:focus{border-width:2px;outline:0}"]
+        })
+    ], RatingScaleComponent);
+    return RatingScaleComponent;
 }());
 
-var TieredMenuNestedComponent = /** @class */ (function () {
-    function TieredMenuNestedComponent(tieredMenuService, _tieredMenuEventService) {
-        this.tieredMenuService = tieredMenuService;
-        this._tieredMenuEventService = _tieredMenuEventService;
-        this.top = 0;
-        this.left = 0;
-        this._unsubscribe$ = new Subject();
+var RatingScaleModule = /** @class */ (function () {
+    function RatingScaleModule() {
     }
-    TieredMenuNestedComponent.prototype.onResize = function () {
-        this._tieredMenuEventService.closeAllMenusEvent.emit();
-    };
-    TieredMenuNestedComponent.prototype.onDocumentClick = function (event) {
-        // Closing menu when clicked outside.
-        var target = event.target;
-        var clickedInside = target.closest("s-tiered-menu-item") || target.closest("s-tiered-menu-divider");
-        if (!clickedInside) {
-            this._tieredMenuEventService.closeAllMenusEvent.emit();
-        }
-    };
-    TieredMenuNestedComponent.prototype.onKeydownHandler = function (event) {
-        switch (event.key) {
-            case "Escape":
-                this._tieredMenuEventService.closeAllMenusEvent.emit();
-                break;
-            case " ":
-            case "Enter":
-                this._tieredMenuEventService.selectItemEvent.emit(this.tieredMenuService.currentItem);
-                break;
-            case "ArrowLeft":
-                // When nested I need a reference to the current item's parent item, otherwise just the current item.
-                this._tieredMenuEventService.closeItemMenuEvent.emit(this.tieredMenuService.currentItem.parent);
-                break;
-            case "ArrowRight":
-                this._tieredMenuEventService.openItemMenuEvent.emit(this.tieredMenuService.currentItem);
-                break;
-            case "ArrowUp":
-                this._tieredMenuEventService.decrementCurrentItemEvent.emit();
-                break;
-            case "ArrowDown":
-                this._tieredMenuEventService.incrementCurrentItemEvent.emit();
-                break;
-        }
-    };
-    TieredMenuNestedComponent.prototype.ngOnInit = function () {
-        this.tieredMenuService.currentItems = this.items;
-        this._subscribeEvents();
-    };
-    TieredMenuNestedComponent.prototype.ngOnDestroy = function () {
-        this._unsubscribe$.next();
-        this._unsubscribe$.complete();
-    };
-    TieredMenuNestedComponent.prototype._incrementCurItem = function () {
-        if (!this.tieredMenuService.currentItem) {
-            this.tieredMenuService.currentItem = this.tieredMenuService.currentItems[0];
-            return;
-        }
-        var curIndex = this.tieredMenuService.currentItems.indexOf(this.tieredMenuService.currentItem) + 1;
-        if (curIndex < this.tieredMenuService.currentItems.length) {
-            this.tieredMenuService.currentItem = this.tieredMenuService.currentItems[curIndex];
-        }
-        else {
-            this.tieredMenuService.currentItem = this.tieredMenuService.currentItems[0];
-        }
-        if (this.tieredMenuService.currentItem.divider) {
-            this._incrementCurItem();
-        }
-    };
-    TieredMenuNestedComponent.prototype._decrementCurItem = function () {
-        if (!this.tieredMenuService.currentItem) {
-            this.tieredMenuService.currentItem = this.tieredMenuService.currentItems[0];
+    RatingScaleModule = __decorate([
+        NgModule({
+            imports: [
+                CommonModule,
+                ReactiveFormsModule,
+            ],
+            declarations: [RatingScaleComponent],
+            exports: [RatingScaleComponent],
+        })
+    ], RatingScaleModule);
+    return RatingScaleModule;
+}());
+
+var SelectButtonComponent = /** @class */ (function () {
+    function SelectButtonComponent() {
+        this.multiple = false;
+        this.itemSelected = new EventEmitter();
+        this.itemClicked = new EventEmitter();
+        this.disabled = false;
+        this.activeItems = new Set();
+    }
+    SelectButtonComponent_1 = SelectButtonComponent;
+    SelectButtonComponent.prototype.writeValue = function (value) {
+        var _this = this;
+        if (!value)
             return;
-        }
-        var curIndex = this.tieredMenuService.currentItems.indexOf(this.tieredMenuService.currentItem) - 1;
-        if (curIndex >= 0) {
-            this.tieredMenuService.currentItem = this.tieredMenuService.currentItems[curIndex];
+        this.activeItems.clear();
+        if (Array.isArray(value)) {
+            value.forEach(function (item) {
+                _this.items.forEach(function (iItem) {
+                    if (_this._compareItems(item, iItem)) {
+                        _this.activeItems.add(iItem);
+                    }
+                });
+            });
         }
         else {
-            this.tieredMenuService.currentItem = this.tieredMenuService.currentItems[this.tieredMenuService.currentItems.length - 1];
-        }
-        if (this.tieredMenuService.currentItem.divider) {
-            this._decrementCurItem();
+            this.items.forEach(function (iItem) {
+                if (_this._compareItems(value, iItem)) {
+                    _this.activeItems.add(iItem);
+                }
+            });
         }
     };
-    TieredMenuNestedComponent.prototype._closeItem = function (item) {
-        var _a;
-        var itemAux = this._lastOpenItem;
-        while (itemAux && itemAux != item) {
-            itemAux.isOpen = false;
-            itemAux = itemAux.parent;
-        }
-        item.isOpen = false;
-        this.tieredMenuService.currentItem = itemAux !== null && itemAux !== void 0 ? itemAux : this.tieredMenuService.items[0];
-        this.tieredMenuService.currentItems = ((_a = itemAux === null || itemAux === void 0 ? void 0 : itemAux.parent) === null || _a === void 0 ? void 0 : _a.submenu) || this.tieredMenuService.items;
+    SelectButtonComponent.prototype.registerOnChange = function (onChange) {
+        this.onChange = onChange;
     };
-    TieredMenuNestedComponent.prototype._openItem = function (item) {
-        if (item === null || item === void 0 ? void 0 : item.submenu) {
-            item.isOpen = true;
-            this.tieredMenuService.currentItems = item.submenu;
-            // Only has focus if there has already been interaction.
-            if (this.tieredMenuService.currentItem) {
-                this.tieredMenuService.currentItem = item.submenu[0];
-            }
-            this._lastOpenItem = item;
+    SelectButtonComponent.prototype.registerOnTouched = function (onTouched) {
+        this.onTouched = onTouched;
+    };
+    SelectButtonComponent.prototype.setDisabledState = function (disabled) {
+        this.disabled = disabled;
+    };
+    SelectButtonComponent.prototype.onItemSelect = function (item) {
+        var _a, _b;
+        if (this.disabled || item.disabled)
+            return;
+        this.itemClicked.emit(item);
+        if (!this.multiple) {
+            this.activeItems.clear();
         }
+        this.activeItems.add(item);
+        this.itemSelected.emit(__spread(this.activeItems));
+        (_a = this.onChange) === null || _a === void 0 ? void 0 : _a.call(this, __spread(this.activeItems));
+        (_b = this.onTouched) === null || _b === void 0 ? void 0 : _b.call(this, __spread(this.activeItems));
     };
-    TieredMenuNestedComponent.prototype._subscribeEvents = function () {
-        var _this = this;
-        this._tieredMenuEventService.incrementCurrentItemEvent
-            .pipe(takeUntil(this._unsubscribe$))
-            .subscribe(function () {
-            _this._incrementCurItem();
-        });
-        this._tieredMenuEventService.decrementCurrentItemEvent
-            .pipe(takeUntil(this._unsubscribe$))
-            .subscribe(function () {
-            _this._decrementCurItem();
-        });
-        this._tieredMenuEventService.selectItemEvent
-            .pipe(takeUntil(this._unsubscribe$))
-            .subscribe(function (item) {
-            if (item.command) {
-                item.command();
-                // Close all menus after the item was selected.
-                _this._tieredMenuEventService.closeAllMenusEvent.emit();
+    SelectButtonComponent.prototype._compareItems = function (item1, item2) {
+        var _compare = function (a, b) {
+            var e_1, _a;
+            if (a === b) {
+                return true;
             }
-        });
-        this._tieredMenuEventService.openItemMenuEvent
-            .pipe(takeUntil(this._unsubscribe$))
-            .subscribe(function (item) {
-            var _a, _b;
-            if (!_this.tieredMenuService.currentItems.includes(item)) {
-                var itemAux = _this._lastOpenItem;
-                while ((_a = itemAux === null || itemAux === void 0 ? void 0 : itemAux.parent) === null || _a === void 0 ? void 0 : _a.parent) {
-                    itemAux = itemAux.parent;
+            if (a === undefined || b === undefined || typeof a !== "object" || a === null || typeof b !== "object" || b === null) {
+                return false;
+            }
+            if (Array.isArray(a) !== Array.isArray(b)) {
+                return false;
+            }
+            var keysA = Object.keys(a);
+            var keysB = Object.keys(b);
+            if (keysA.length !== keysB.length) {
+                return false;
+            }
+            try {
+                for (var keysA_1 = __values(keysA), keysA_1_1 = keysA_1.next(); !keysA_1_1.done; keysA_1_1 = keysA_1.next()) {
+                    var key = keysA_1_1.value;
+                    if (!keysB.includes(key) || !_compare(a[key], b[key])) {
+                        return false;
+                    }
                 }
-                _this._tieredMenuEventService.closeItemMenuEvent.emit((_b = itemAux.parent) !== null && _b !== void 0 ? _b : itemAux);
             }
-            _this._lastOpenItem = item;
-            _this._openItem(item);
-        });
-        this._tieredMenuEventService.closeItemMenuEvent
-            .pipe(takeUntil(this._unsubscribe$))
-            .subscribe(function (item) {
-            if (item) {
-                _this._closeItem(item);
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (keysA_1_1 && !keysA_1_1.done && (_a = keysA_1.return)) _a.call(keysA_1);
+                }
+                finally { if (e_1) throw e_1.error; }
             }
-        });
+            for (var key in a) {
+                if (a.hasOwnProperty(key) !== b.hasOwnProperty(key)) {
+                    return false;
+                }
+            }
+            return true;
+        };
+        return _compare(item1, item2);
     };
-    TieredMenuNestedComponent.ctorParameters = function () { return [
-        { type: TieredMenuService },
-        { type: TieredMenuEventService }
+    var SelectButtonComponent_1;
+    __decorate([
+        Input()
+    ], SelectButtonComponent.prototype, "items", void 0);
+    __decorate([
+        Input()
+    ], SelectButtonComponent.prototype, "multiple", void 0);
+    __decorate([
+        Output()
+    ], SelectButtonComponent.prototype, "itemSelected", void 0);
+    __decorate([
+        Output()
+    ], SelectButtonComponent.prototype, "itemClicked", void 0);
+    SelectButtonComponent = SelectButtonComponent_1 = __decorate([
+        Component({
+            selector: "s-select-button",
+            template: "<div\n    class=\"select-button\"\n    [ngClass]=\"{ 'select-button--disabled': disabled }\">\n    <s-select-button-item\n        *ngFor=\"let item of items; index as i\"\n        [label]=\"item.label\"\n        [active]=\"activeItems?.has(item)\"\n        [disabled]=\"disabled || item.disabled\"\n        [first]=\"i === 0\"\n        [last]=\"i === items.length - 1\"\n        (click)=\"onItemSelect(item)\">\n    </s-select-button-item>\n</div>",
+            providers: [
+                {
+                    provide: NG_VALUE_ACCESSOR,
+                    useExisting: forwardRef(function () { return SelectButtonComponent_1; }),
+                    multi: true,
+                },
+            ],
+            styles: [".select-button{overflow:hidden}"]
+        })
+    ], SelectButtonComponent);
+    return SelectButtonComponent;
+}());
+
+var SelectButtonItemComponent = /** @class */ (function () {
+    function SelectButtonItemComponent() {
+        this.active = false;
+        this.first = false;
+        this.last = false;
+        this.disabled = false;
+    }
+    __decorate([
+        Input()
+    ], SelectButtonItemComponent.prototype, "label", void 0);
+    __decorate([
+        Input()
+    ], SelectButtonItemComponent.prototype, "active", void 0);
+    __decorate([
+        Input()
+    ], SelectButtonItemComponent.prototype, "first", void 0);
+    __decorate([
+        Input()
+    ], SelectButtonItemComponent.prototype, "last", void 0);
+    __decorate([
+        Input()
+    ], SelectButtonItemComponent.prototype, "disabled", void 0);
+    SelectButtonItemComponent = __decorate([
+        Component({
+            selector: "s-select-button-item",
+            template: "<button\n    class=\"select-button-item\"\n    [ngClass]=\"{\n        'select-button-item--active': active,\n        'select-button-item--disabled': disabled,\n        'select-button-item--first': first,\n        'select-button-item--last': last\n    }\">\n    <span class=\"select-button-item__label\">{{ label }}</span>\n</button>",
+            styles: [".select-button-item{padding:8px 12px;cursor:pointer;background-color:#fff;border:none;border-left:1px solid #c1c1cc;border-top:1px solid #c1c1cc;border-bottom:1px solid #c1c1cc}.select-button-item__label{font-family:\"Open Sans\" sans-serif;font-size:14px}.select-button-item:not(.select-button-item--disabled):not(.select-button-item--active):hover{background-color:#eeebf2}.select-button-item--active,.select-button-item--active:hover{background-color:#c1c1cc;font-weight:700}.select-button-item--disabled{opacity:.5;cursor:default}.select-button-item--first{border-top-left-radius:2px;border-bottom-left-radius:2px}.select-button-item--last{border-right:1px solid #c1c1cc;border-top-right-radius:2px;border-bottom-right-radius:2px}"]
+        })
+    ], SelectButtonItemComponent);
+    return SelectButtonItemComponent;
+}());
+
+var SelectButtonModule = /** @class */ (function () {
+    function SelectButtonModule() {
+    }
+    SelectButtonModule = __decorate([
+        NgModule({
+            imports: [CommonModule],
+            declarations: [
+                SelectButtonComponent,
+                SelectButtonItemComponent,
+            ],
+            exports: [SelectButtonComponent],
+        })
+    ], SelectButtonModule);
+    return SelectButtonModule;
+}());
+
+var SidebarComponent = /** @class */ (function () {
+    function SidebarComponent(focusTrapFactory) {
+        this.focusTrapFactory = focusTrapFactory;
+        this.id = "s-sidebar-" + SidebarComponent_1.nextId++;
+        this.visible = false;
+        this.baseZIndex = 0;
+        this.largeSized = false;
+        this.visibleChange = new EventEmitter();
+    }
+    SidebarComponent_1 = SidebarComponent;
+    SidebarComponent.prototype.onShow = function () {
+        DomHandler.addClass(document.body, "ui-overflow-hidden-sidebar");
+        var focusTrap = this.focusTrapFactory.create(this.innerSidebar.containerViewChild.nativeElement, false);
+        focusTrap.focusInitialElementWhenReady();
+    };
+    SidebarComponent.prototype.onHide = function () {
+        DomHandler.removeClass(document.body, "ui-overflow-hidden-sidebar");
+    };
+    SidebarComponent.prototype.close = function (event) {
+        DomHandler.removeClass(document.body, "ui-overflow-hidden-sidebar");
+        this.visibleChange.emit(false);
+        event.preventDefault();
+    };
+    var SidebarComponent_1;
+    SidebarComponent.nextId = 0;
+    SidebarComponent.ctorParameters = function () { return [
+        { type: FocusTrapFactory }
     ]; };
     __decorate([
-        HostListener("window:resize")
-    ], TieredMenuNestedComponent.prototype, "onResize", null);
+        Input()
+    ], SidebarComponent.prototype, "id", void 0);
+    __decorate([
+        Input()
+    ], SidebarComponent.prototype, "visible", void 0);
+    __decorate([
+        Input()
+    ], SidebarComponent.prototype, "header", void 0);
+    __decorate([
+        Input()
+    ], SidebarComponent.prototype, "baseZIndex", void 0);
     __decorate([
-        HostListener("document:click", ["$event"])
-    ], TieredMenuNestedComponent.prototype, "onDocumentClick", null);
+        Input()
+    ], SidebarComponent.prototype, "largeSized", void 0);
     __decorate([
-        HostListener("document:keydown", ["$event"])
-    ], TieredMenuNestedComponent.prototype, "onKeydownHandler", null);
-    TieredMenuNestedComponent = __decorate([
+        Output()
+    ], SidebarComponent.prototype, "visibleChange", void 0);
+    __decorate([
+        ViewChild(Sidebar, { static: true })
+    ], SidebarComponent.prototype, "innerSidebar", void 0);
+    __decorate([
+        ContentChild(HeaderComponent, { static: true })
+    ], SidebarComponent.prototype, "headerSection", void 0);
+    __decorate([
+        ContentChild(FooterComponent, { static: true })
+    ], SidebarComponent.prototype, "footerSection", void 0);
+    SidebarComponent = SidebarComponent_1 = __decorate([
         Component({
-            template: "<div\n    class=\"menu menu--nested\"\n    [ngStyle]=\"{\n        'top': top + 'px',\n        'left': left + 'px'\n    }\">\n    <ng-container *ngTemplateOutlet=\"itemsTemplate; context: { $implicit: items }\"></ng-container>\n</div>\n\n<ng-template #itemsTemplate let-items>\n    <div *ngFor=\"let item of items\">\n        <s-tiered-menu-item\n            *ngIf=\"item.visible && !item.divider\"\n            [item]=\"item\"\n            [focused]=\"item === tieredMenuService.currentItem\"\n            [closeOnClick]=\"true\">\n        </s-tiered-menu-item>\n\n        <s-tiered-menu-divider *ngIf=\"item.divider\"></s-tiered-menu-divider>\n\n        <div *ngIf=\"item.submenu && item.isOpen\">\n            <div class=\"submenu\">\n                <ng-container *ngTemplateOutlet=\"itemsTemplate; context: { $implicit: item.submenu }\"></ng-container>\n            </div>\n        </div>\n    </div>\n</ng-template>\n",
-            styles: [".menu{background-color:#fff;border:1px solid #ccc;border-radius:6px;box-shadow:0 2px 12px 0 rgba(0,0,0,.1);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:column;flex-direction:column;min-width:176px;padding:4px 0;position:absolute;z-index:9999;overflow:auto;width:calc(100vw - 8px)}.menu .submenu{margin-left:24px}"]
+            selector: "s-sidebar",
+            template: "<p-sidebar\n    [id]=\"id\"\n    [visible]=\"visible\"\n    (visibleChange)=\"visibleChange.emit($event)\"\n    [blockScroll]=\"true\"\n    [baseZIndex]=\"baseZIndex\"\n    [modal]=\"true\"\n    [dismissible]=\"false\"\n    [showCloseIcon]=\"false\"\n    position=\"right\"\n    appendTo=\"body\"\n    [styleClass]=\"largeSized ? 's-sidebar-panel s-sidebar-panel-lg' : 's-sidebar-panel'\"\n    (onShow)=\"onShow()\"\n    (onHide)=\"onHide()\">\n    <div\n        [id]=\"id + '-container'\"\n        class=\"s-sidebar-container\">\n        <a\n            href=\"#\"\n            role=\"button\"\n            class=\"s-sidebar-close\"\n            (click)=\"close($event)\">\n            <span\n                class=\"fa fa-times\"\n                aria-hidden=\"true\">\n            </span></a>\n        <div\n            *ngIf=\"header && !headerSection\"    \n            [id]=\"id + '-header'\"\n            class=\"s-sidebar-header\">\n            <h2 class=\"sds-panel-title s-sidebar-header__title\">{{header}}</h2>\n        </div>\n        <div\n            *ngIf=\"headerSection\"    \n            [id]=\"id + '-header'\"\n            class=\"s-sidebar-header\">\n            <ng-content select=\"s-header\"></ng-content>\n        </div>\n        <p-scrollPanel\n            [id]=\"id + '-content-container'\"\n            class=\"s-sidebar-content-container\"\n            styleClass=\"s-sidebar-content\">\n            <ng-content></ng-content>\n        </p-scrollPanel>\n        <div\n            *ngIf=\"footerSection\"\n            [id]=\"id + '-footer'\"\n            class=\"s-sidebar-footer\">\n            <ng-content select=\"s-footer\"></ng-content>\n        </div>\n    </div>\n</p-sidebar>\n",
+            encapsulation: ViewEncapsulation.None,
+            styles: [".ui-overflow-hidden-sidebar{overflow:hidden}body .ui-sidebar.s-sidebar-panel{width:50%;padding:0}@media (max-width:767px){body .ui-sidebar.s-sidebar-panel{width:100%}}@media (min-width:768px){body .ui-sidebar.s-sidebar-panel{width:75%}}@media (min-width:992px){body .ui-sidebar.s-sidebar-panel{width:50%}body .ui-sidebar.s-sidebar-panel.s-sidebar-panel-lg{width:75%}}body .ui-sidebar.s-sidebar-panel .s-sidebar-container{height:100%;width:100%;padding:20px;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-direction:column;flex-direction:column}body .ui-sidebar.s-sidebar-panel .s-sidebar-close{position:absolute;right:20px;top:20px;color:#333}body .ui-sidebar.s-sidebar-panel .s-sidebar-header{border-bottom:1px solid #ccc;padding-bottom:15px;padding-right:20px;margin-bottom:15px;-ms-flex-negative:0;flex-shrink:0}body .ui-sidebar.s-sidebar-panel .s-sidebar-content-container{-ms-flex:1;flex:1;overflow:hidden}body .ui-sidebar.s-sidebar-panel .s-sidebar-content{height:100%}body .ui-sidebar.s-sidebar-panel .s-sidebar-footer{border-top:1px solid #ccc;padding-top:15px;margin-top:15px;-ms-flex-negative:0;flex-shrink:0}body .ui-sidebar.s-sidebar-panel p-scrollpanel{padding-top:30px}body .ui-sidebar.s-sidebar-panel .s-sidebar-header+p-scrollpanel{padding-top:0}p-scrollPanel{display:block}.s-sidebar-header__title{font-weight:400}"]
         })
-    ], TieredMenuNestedComponent);
-    return TieredMenuNestedComponent;
+    ], SidebarComponent);
+    return SidebarComponent;
 }());
 
-var TieredMenuComponent = /** @class */ (function () {
-    function TieredMenuComponent(_appRef, _componentFactoryResolver, _injector, _changeDetectorRef, tieredMenuService, _tieredMenuEventService) {
-        this._appRef = _appRef;
-        this._componentFactoryResolver = _componentFactoryResolver;
-        this._injector = _injector;
-        this._changeDetectorRef = _changeDetectorRef;
-        this.tieredMenuService = tieredMenuService;
-        this._tieredMenuEventService = _tieredMenuEventService;
-        this.top = 0;
-        this.left = 0;
-        this.menuTriggerEvent = "hover";
-        this._componentRef = null;
-        this._unsubscribe$ = new Subject();
-        this.destroyRequest = new EventEmitter();
+var SidebarModule = /** @class */ (function () {
+    function SidebarModule() {
     }
-    TieredMenuComponent_1 = TieredMenuComponent;
-    TieredMenuComponent.prototype.onResize = function () {
-        this._tieredMenuEventService.closeAllMenusEvent.emit();
-    };
-    TieredMenuComponent.prototype.onDocumentClick = function (event) {
-        // Closing menu when clicked outside.
-        var target = event.target;
-        var clickedInside = target.closest("s-tiered-menu-item") || target.closest("s-tiered-menu-divider");
-        if (!clickedInside) {
-            this._tieredMenuEventService.closeAllMenusEvent.emit();
-        }
-    };
-    TieredMenuComponent.prototype.onKeydownHandler = function (event) {
-        switch (event.key) {
-            case "Escape":
-                this._tieredMenuEventService.closeAllMenusEvent.emit();
-                break;
-            case " ":
-            case "Enter":
-                if (!this.tieredMenuService.currentItem.disabled) {
-                    this._tieredMenuEventService.selectItemEvent.emit(this.tieredMenuService.currentItem);
-                }
-                break;
-            case "ArrowLeft":
-                if (this.items.includes(this.tieredMenuService.currentItem)) {
-                    this._tieredMenuEventService.closeItemMenuEvent.emit(this.tieredMenuService.currentItem);
-                    this._changeDetectorRef.detectChanges();
-                }
-                break;
-            case "ArrowRight":
-                if (!this.tieredMenuService.currentItem.disabled && this.items.includes(this.tieredMenuService.currentItem)) {
-                    this._tieredMenuEventService.openItemMenuEvent.emit(this.tieredMenuService.currentItem);
-                    event.stopImmediatePropagation();
-                }
-                break;
-            case "ArrowUp":
-                if (!this.tieredMenuService.currentItem || this.items.includes(this.tieredMenuService.currentItem)) {
-                    this._tieredMenuEventService.decrementCurrentItemEvent.emit();
-                    event.stopImmediatePropagation();
-                }
-                break;
-            case "ArrowDown":
-                if (!this.tieredMenuService.currentItem || this.items.includes(this.tieredMenuService.currentItem)) {
-                    this._tieredMenuEventService.incrementCurrentItemEvent.emit();
-                    event.stopImmediatePropagation();
-                }
-                break;
-        }
-    };
-    TieredMenuComponent.prototype.ngOnInit = function () {
-        this.tieredMenuService.currentItems = this.items;
-        this._subscribeEvents();
+    SidebarModule = __decorate([
+        NgModule({
+            imports: [CommonModule, A11yModule, SidebarModule$1, ScrollPanelModule, StructureModule],
+            declarations: [SidebarComponent],
+            exports: [StructureModule, SidebarComponent],
+        })
+    ], SidebarModule);
+    return SidebarModule;
+}());
+
+var SlidePanelService = /** @class */ (function () {
+    function SlidePanelService() {
+        this.modalCloseMap = new Map();
+    }
+    SlidePanelService.prototype.createSlidePanel = function (id) {
+        var panelSubject = new Subject();
+        this.modalCloseMap.set(id, panelSubject);
+        return panelSubject.asObservable();
     };
-    TieredMenuComponent.prototype.ngOnDestroy = function () {
-        this._unsubscribe$.next();
-        this._unsubscribe$.complete();
+    SlidePanelService.prototype.getModalCloseObservable = function (id) {
+        return this.modalCloseMap.get(id).asObservable();
     };
-    TieredMenuComponent.prototype._incrementCurItem = function () {
-        if (!this.tieredMenuService.currentItem) {
-            this.tieredMenuService.currentItem = this.tieredMenuService.currentItems[0];
-            return;
-        }
-        else if (!this.items.includes(this.tieredMenuService.currentItem)) {
-            // Checking if it is the current menu.
-            return;
-        }
-        var currentIndex = this.tieredMenuService.currentItems.indexOf(this.tieredMenuService.currentItem) + 1;
-        if (currentIndex < this.tieredMenuService.currentItems.length) {
-            this.tieredMenuService.currentItem = this.tieredMenuService.currentItems[currentIndex];
-        }
-        else {
-            this.tieredMenuService.currentItem = this.tieredMenuService.currentItems[0];
-        }
-        if (this.tieredMenuService.currentItem.divider) {
-            this._incrementCurItem();
+    SlidePanelService.prototype.closeModal = function (id) {
+        var subject = this.modalCloseMap.get(id);
+        if (subject) {
+            subject.next();
         }
     };
-    TieredMenuComponent.prototype._decrementCurItem = function () {
-        if (!this.tieredMenuService.currentItem) {
-            this.tieredMenuService.currentItem = this.tieredMenuService.currentItems[0];
-            return;
-            // Checking if it is the current menu.
-        }
-        else if (!this.items.includes(this.tieredMenuService.currentItem)) {
-            return;
-        }
-        var curIndex = this.tieredMenuService.currentItems.indexOf(this.tieredMenuService.currentItem) - 1;
-        if (curIndex >= 0) {
-            this.tieredMenuService.currentItem = this.tieredMenuService.currentItems[curIndex];
-        }
-        else {
-            this.tieredMenuService.currentItem = this.tieredMenuService.currentItems[this.tieredMenuService.currentItems.length - 1];
-        }
-        if (this.tieredMenuService.currentItem.divider) {
-            this._decrementCurItem();
-        }
+    SlidePanelService = __decorate([
+        Injectable()
+    ], SlidePanelService);
+    return SlidePanelService;
+}());
+
+var SMALL_DEVICE_BREAKPOINT = 420;
+var SlidePanelComponent = /** @class */ (function () {
+    function SlidePanelComponent(slidePanelService) {
+        this.slidePanelService = slidePanelService;
+        this.id = "slide-panel-" + ++SlidePanelComponent_1.nextId;
+        this.openIcon = "fas fa-chevron-right";
+        this.closeIcon = "fas fa-chevron-left";
+        this.cache = false;
+        this.createOpen = false;
+        this.panelOpened = new EventEmitter();
+        this.panelClosed = new EventEmitter();
+        this.isOpen = false;
+        this.isSlideOver = false;
+        this.isAnimating = false;
+        this.isContentAnimationDisabled = true;
+        this.slideHeight = 0;
+        this.sideContentWidth = 0;
+        this._unsubscribe$ = new Subject();
+    }
+    SlidePanelComponent_1 = SlidePanelComponent;
+    SlidePanelComponent.prototype.onResize = function () {
+        this._checkOverBehavior();
     };
-    TieredMenuComponent.prototype._createMenu = function (items, position) {
+    SlidePanelComponent.prototype.ngOnInit = function () {
         var _this = this;
-        if (!this._componentRef && items) {
-            var componentFactory = this._componentFactoryResolver.resolveComponentFactory(TieredMenuComponent_1);
-            this._componentRef = componentFactory.create(this._injector);
-            this._appRef.attachView(this._componentRef.hostView);
-            var domElem = this._componentRef.hostView.rootNodes[0];
-            document.body.appendChild(domElem);
-            // Setting the menu items.
-            this._componentRef.instance.items = items;
-            // Subscribe menu events.
-            this._componentRef.instance.destroyRequest.subscribe(function (propagate) {
-                _this._destroy(propagate);
-            });
-            this._menuDivElement = domElem.querySelector(".menu");
-            this._setMenuPosition(position);
-        }
-    };
-    TieredMenuComponent.prototype._destroy = function (propagate) {
-        if (propagate === void 0) { propagate = true; }
-        if (this._componentRef !== null) {
-            this._appRef.detachView(this._componentRef.hostView);
-            this._componentRef.destroy();
-            this._componentRef = null;
-            this._menuDivElement = null;
-        }
-        if (propagate) {
-            this.destroyRequest.emit();
-        }
-    };
-    TieredMenuComponent.prototype._setMenuPosition = function (position) {
-        var _a, _b;
-        var ITEM_HEIGHT = 37;
-        var DIVIDER_HEIGHT = 5;
-        var PADDING = 8;
-        if (this._componentRef !== null) {
-            var top_1 = position.top, right = position.right, bottom = position.bottom, left = position.left;
-            var itemsCount = (_a = this._componentRef.instance.items) === null || _a === void 0 ? void 0 : _a.reduce(function (count, item) {
-                return !item.divider ? count + 1 : count;
-            }, 0);
-            var dividersCount = (_b = this._componentRef.instance.items) === null || _b === void 0 ? void 0 : _b.reduce(function (count, item) {
-                return item.divider ? count + 1 : count;
-            }, 0);
-            // I need to calculate the height of the component because the internal elements have not been created yet.
-            var menuHeight = itemsCount * ITEM_HEIGHT + dividersCount * DIVIDER_HEIGHT + PADDING + 8;
-            var menuWidth = this._menuDivElement.getBoundingClientRect().width;
-            var rightFreeSpace = window.innerWidth - right;
-            var bottomFreeSpace = window.innerHeight - bottom;
-            if (rightFreeSpace > menuWidth) {
-                this._componentRef.instance.left = right;
-            }
-            else {
-                this._componentRef.instance.left = left - menuWidth;
-            }
-            if (bottomFreeSpace <= menuHeight) {
-                this._componentRef.instance.top = Math.max(window.innerHeight - menuHeight, window.scrollY);
-            }
-            else {
-                this._componentRef.instance.top = window.scrollY + top_1;
-            }
-        }
+        this._checkOverBehavior();
+        this.slidePanelService.createSlidePanel(this.id)
+            .pipe(takeUntil(this._unsubscribe$))
+            .subscribe(function () {
+            _this.isOpen = false;
+        });
     };
-    TieredMenuComponent.prototype._subscribeEvents = function () {
+    SlidePanelComponent.prototype.ngAfterViewInit = function () {
         var _this = this;
-        // Increment current item event.
-        this._tieredMenuEventService.incrementCurrentItemEvent.pipe(takeUntil(this._unsubscribe$)).subscribe(function () {
-            _this._incrementCurItem();
-        });
-        // Decrement current item event.
-        this._tieredMenuEventService.decrementCurrentItemEvent.pipe(takeUntil(this._unsubscribe$)).subscribe(function () {
-            _this._decrementCurItem();
-        });
-        // Select item event.
-        this._tieredMenuEventService.selectItemEvent.pipe(takeUntil(this._unsubscribe$)).subscribe(function (item) {
-            if (item.submenu) {
-                _this._tieredMenuEventService.openItemMenuEvent.emit(item);
-            }
-            else if (item.command) {
-                _this._tieredMenuEventService.closeAllMenusEvent.emit();
-                item.command();
-            }
-        });
-        // Close all menus event.
-        this._tieredMenuEventService.closeAllMenusEvent.pipe(takeUntil(this._unsubscribe$)).subscribe(function () {
-            _this._destroy();
-            _this.tieredMenuService.currentItem = null;
-            _this.tieredMenuService.currentItems = _this.tieredMenuService.items;
-            _this.tieredMenuService.markAllItemsAsClosed(_this.tieredMenuService.items);
-        });
-        // Open item menu event.
-        this._tieredMenuEventService.openItemMenuEvent.pipe(takeUntil(this._unsubscribe$)).subscribe(function (item) {
-            if (_this.tieredMenuService.currentItem) {
-                if (_this.tieredMenuService.currentItem.parent === item) {
-                    return;
-                }
-                if (!_this.tieredMenuService.searchTheHierarchy(_this.tieredMenuService.currentItem.parent, item)) {
-                    var current = _this.tieredMenuService.currentItem;
-                    current.isOpen = false;
-                    while ((current === null || current === void 0 ? void 0 : current.parent) !== item.parent) {
-                        _this._tieredMenuEventService.closeItemMenuEvent.emit(current);
-                        _this._changeDetectorRef.detectChanges();
-                        current = current.parent;
-                    }
-                    if (current) {
-                        current.isOpen = false;
-                    }
-                }
-            }
-            if (item.submenu && !item.isOpen && _this.items.includes(item)) {
-                var _a = document.querySelector("#" + item.id).getBoundingClientRect(), top_2 = _a.top, right = _a.right, left = _a.left, bottom = _a.bottom;
-                var position = { top: top_2, right: right, left: left, bottom: bottom };
-                _this._createMenu(item.submenu, position);
-                _this.tieredMenuService.currentItems = item.submenu;
-                _this.tieredMenuService.currentItem = item.submenu[0];
-                item.isOpen = true;
+        queueMicrotask(function () {
+            if (_this.createOpen) {
+                _this.isOpen = true;
             }
         });
-        // Close item menu event.
-        this._tieredMenuEventService.closeItemMenuEvent
-            .pipe(takeUntil(this._unsubscribe$))
-            .subscribe(function (item) {
-            var _a, _b;
-            if (_this.items.some(function (i) { return i.id === item.id; })) {
-                if (item.parent) {
-                    item.parent.isOpen = false;
-                }
-                _this.tieredMenuService.currentItems = ((_b = (_a = item === null || item === void 0 ? void 0 : item.parent) === null || _a === void 0 ? void 0 : _a.parent) === null || _b === void 0 ? void 0 : _b.submenu) || _this.tieredMenuService.items;
-                _this.tieredMenuService.currentItem = item.parent;
-                _this.destroyRequest.emit(false);
-            }
+    };
+    SlidePanelComponent.prototype.ngAfterViewChecked = function () {
+        var _this = this;
+        // to executed at a safe time prior to control returning to the browser's event loop
+        queueMicrotask(function () {
+            _this._calculateSlideHeight();
+            _this._calculateSideContentWidth();
+            _this.isContentAnimationDisabled = false;
         });
     };
-    var TieredMenuComponent_1;
-    TieredMenuComponent.ctorParameters = function () { return [
-        { type: ApplicationRef },
-        { type: ComponentFactoryResolver },
-        { type: Injector },
-        { type: ChangeDetectorRef },
-        { type: TieredMenuService },
-        { type: TieredMenuEventService }
+    SlidePanelComponent.prototype.ngOnDestroy = function () {
+        this._unsubscribe$.next();
+        this._unsubscribe$.complete();
+    };
+    SlidePanelComponent.prototype.onClickButton = function () {
+        if (this.isAnimating) {
+            return;
+        }
+        this.isOpen = !this.isOpen;
+        if (this.isOpen) {
+            this.panelOpened.emit();
+        }
+        else {
+            this.panelClosed.emit();
+        }
+    };
+    SlidePanelComponent.prototype.onContentAnimationStart = function () {
+        this.isAnimating = true;
+    };
+    SlidePanelComponent.prototype.onContentAnimationDone = function () {
+        this.isAnimating = false;
+        this._calculateSideContentWidth();
+    };
+    SlidePanelComponent.prototype._checkOverBehavior = function () {
+        this.isSlideOver = window.innerWidth <= SMALL_DEVICE_BREAKPOINT;
+    };
+    SlidePanelComponent.prototype._calculateSlideHeight = function () {
+        this.slideHeight = this._sideContentRef.nativeElement.clientHeight;
+    };
+    SlidePanelComponent.prototype._calculateSideContentWidth = function () {
+        var slidePanelWidth = this._slidePanelRef.nativeElement.getBoundingClientRect().width;
+        var slideContentWidth = this._slideContentRef.nativeElement.getBoundingClientRect().width;
+        this.sideContentWidth = slidePanelWidth - slideContentWidth;
+    };
+    var SlidePanelComponent_1;
+    SlidePanelComponent.nextId = 0;
+    SlidePanelComponent.ctorParameters = function () { return [
+        { type: SlidePanelService }
     ]; };
+    __decorate([
+        Input()
+    ], SlidePanelComponent.prototype, "id", void 0);
+    __decorate([
+        Input()
+    ], SlidePanelComponent.prototype, "openIcon", void 0);
+    __decorate([
+        Input()
+    ], SlidePanelComponent.prototype, "closeIcon", void 0);
+    __decorate([
+        Input()
+    ], SlidePanelComponent.prototype, "cache", void 0);
+    __decorate([
+        Input()
+    ], SlidePanelComponent.prototype, "createOpen", void 0);
     __decorate([
         Output()
-    ], TieredMenuComponent.prototype, "destroyRequest", void 0);
+    ], SlidePanelComponent.prototype, "panelOpened", void 0);
     __decorate([
-        HostListener("window:resize")
-    ], TieredMenuComponent.prototype, "onResize", null);
+        Output()
+    ], SlidePanelComponent.prototype, "panelClosed", void 0);
     __decorate([
-        HostListener("document:click", ["$event"])
-    ], TieredMenuComponent.prototype, "onDocumentClick", null);
+        ViewChild("slidePanel")
+    ], SlidePanelComponent.prototype, "_slidePanelRef", void 0);
     __decorate([
-        HostListener("document:keydown", ["$event"])
-    ], TieredMenuComponent.prototype, "onKeydownHandler", null);
-    TieredMenuComponent = TieredMenuComponent_1 = __decorate([
+        ViewChild("slideContent")
+    ], SlidePanelComponent.prototype, "_slideContentRef", void 0);
+    __decorate([
+        ViewChild("sideContent")
+    ], SlidePanelComponent.prototype, "_sideContentRef", void 0);
+    __decorate([
+        HostListener("window:resize")
+    ], SlidePanelComponent.prototype, "onResize", null);
+    SlidePanelComponent = SlidePanelComponent_1 = __decorate([
         Component({
-            selector: "s-tiered-menu",
-            template: "<div\n    class=\"menu\"\n    [ngStyle]=\"{\n        'left': left + 'px',\n        'top': top + 'px'\n    }\">\n\n    <div *ngFor=\"let item of items\">\n        <s-tiered-menu-item\n            *ngIf=\"item.visible && !item.divider\"\n            [item]=\"item\"\n            [focused]=\"item === tieredMenuService.currentItem\"\n            [highlight]=\"item.isOpen\"\n            triggerEvent=\"hover\"\n            [closeOnClick]=\"false\">\n        </s-tiered-menu-item>\n        <s-tiered-menu-divider *ngIf=\"item.divider\"></s-tiered-menu-divider>\n    </div>\n</div>",
-            styles: [".menu{background-color:#fff;border:1px solid #ccc;border-radius:6px;box-shadow:0 2px 12px 0 rgba(0,0,0,.1);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:column;flex-direction:column;max-height:100vh;min-width:176px;padding:4px 0;overflow-y:auto;position:absolute;z-index:9999}"]
+            selector: "s-slide-panel",
+            template: "<div #slidePanel class=\"slide-panel\">\n    <div\n        #slideContent\n        class=\"slide-content\"\n        [ngClass]=\"{\n            'slide-content--closed': !isOpen,\n            'slide-content--over': isSlideOver\n        }\">\n        <div\n            #mainContainer\n            class=\"main-container\"\n            [style.maxHeight]=\"slideHeight + 'px'\">\n            <ng-container *ngIf=\"cache; then cacheTemplate else cachelessTemplate\"></ng-container>\n        </div>\n        <button\n            class=\"button\"\n            [ngClass]=\"isOpen ? closeIcon : openIcon\"\n            (click)=\"onClickButton()\">\n        </button>\n    </div>\n    <div    \n        #sideContent\n        class=\"side-content\"\n        [ngStyle]=\"{ 'width.px': sideContentWidth }\">\n        <ng-content select=\"[side-content]\"></ng-content>\n    </div>\n</div>\n\n<ng-template #cacheTemplate>\n    <div\n        class=\"content-container\"\n        [@cacheAnimation]=\"isOpen\"\n        [@.disabled]=\"isContentAnimationDisabled\"\n        (@cacheAnimation.start)=\"onContentAnimationStart()\"\n        (@cacheAnimation.done)=\"onContentAnimationDone()\">\n        <ng-container [ngTemplateOutlet]=\"slideContentTemplate\"></ng-container>\n    </div>\n</ng-template>\n\n<ng-template #cachelessTemplate>\n    <div\n        *ngIf=\"isOpen\"\n        class=\"content-container\"\n        @cachelessAnimation\n        [@.disabled]=\"isContentAnimationDisabled\"\n        (@cachelessAnimation.start)=\"onContentAnimationStart()\"\n        (@cachelessAnimation.done)=\"onContentAnimationDone()\">\n        <ng-container [ngTemplateOutlet]=\"slideContentTemplate\"></ng-container>\n    </div>\n</ng-template>\n\n<ng-template #slideContentTemplate>\n    <ng-content select=\"[slide-content]\"></ng-content>\n</ng-template>",
+            animations: [
+                trigger("cachelessAnimation", [
+                    transition(":enter", [
+                        style$7({ width: "0" }),
+                        animate("200ms linear", style$7({ width: "*" })),
+                    ]),
+                    transition(":leave", [
+                        style$7({ width: "*" }),
+                        animate("200ms linear", style$7({ width: "0" })),
+                    ]),
+                ]),
+                trigger("cacheAnimation", [
+                    state("true", style$7({ width: "*", padding: '0 16px' })),
+                    state("false", style$7({ width: '0px', padding: '0' })),
+                    transition("* => *", animate("200ms")),
+                ]),
+            ],
+            styles: [".slide-panel{display:-ms-flexbox;display:flex;width:100%}.slide-panel .slide-content{display:-ms-flexbox;display:flex;position:relative}.slide-panel .slide-content .main-container{background-color:#eeebf2;display:-ms-flexbox;display:flex;border:1px solid #ccc;overflow:hidden;position:relative}.slide-panel .slide-content .main-container .content-container{overflow-y:auto;overflow-x:hidden;padding:16px}.slide-panel .slide-content .button{-ms-flex-align:center;align-items:center;background-color:#eeebf2;border:1px solid #ccc;border-left:none;border-radius:0 4px 4px 0;cursor:pointer;display:-ms-flexbox;display:flex;font-family:\"Font Awesome 5 Pro\";font-size:16px;height:32px;-ms-flex-pack:center;justify-content:center;position:absolute;right:-32px;top:16px;width:32px;z-index:99}.slide-panel .slide-content--closed .main-container{border:none}.slide-panel .slide-content--over{position:absolute}.slide-panel .side-content{display:-ms-flexbox;display:flex;height:-webkit-max-content;height:max-content;overflow:auto;transition:width .1s linear}"]
         })
-    ], TieredMenuComponent);
-    return TieredMenuComponent;
+    ], SlidePanelComponent);
+    return SlidePanelComponent;
 }());
 
-var TieredMenuGlobalService = /** @class */ (function () {
-    function TieredMenuGlobalService() {
+var SlidePanelModule = /** @class */ (function () {
+    function SlidePanelModule() {
     }
-    TieredMenuGlobalService = __decorate([
-        Injectable()
-    ], TieredMenuGlobalService);
-    return TieredMenuGlobalService;
+    SlidePanelModule = __decorate([
+        NgModule({
+            imports: [CommonModule],
+            declarations: [SlidePanelComponent],
+            exports: [SlidePanelComponent],
+            providers: [SlidePanelService],
+        })
+    ], SlidePanelModule);
+    return SlidePanelModule;
 }());
 
-var TieredMenuDirective = /** @class */ (function () {
-    function TieredMenuDirective(_elementRef, _appRef, _componentFactoryResolver, _injector, _tieredMenuEventService, _tieredMenuService, _tieredMenuGlobalService, _changeDetectorRef) {
-        this._elementRef = _elementRef;
-        this._appRef = _appRef;
-        this._componentFactoryResolver = _componentFactoryResolver;
-        this._injector = _injector;
-        this._tieredMenuEventService = _tieredMenuEventService;
-        this._tieredMenuService = _tieredMenuService;
-        this._tieredMenuGlobalService = _tieredMenuGlobalService;
-        this._changeDetectorRef = _changeDetectorRef;
-        this.items = [];
-        this.triggerEvent = "click";
-        this._componentRef = null;
-        this._isNested = false;
-        this._isOpen = false;
-        this._unsubscribe$ = new Subject();
-    }
-    TieredMenuDirective.prototype.onClick = function (event) {
-        if (this.triggerEvent === "click" && !this._isOpen) {
-            this._lastActiveElement = document.activeElement;
-            this._createMenu();
-            event.preventDefault();
-            event.stopPropagation();
-        }
-    };
-    TieredMenuDirective.prototype.ngOnInit = function () {
-        this._subscribeEvents();
-    };
-    TieredMenuDirective.prototype.ngDoCheck = function () {
-        if (!this.previousItems) {
-            this.previousItems = this._tieredMenuService.cloneItems(this.items);
-        }
-        var hasChanges = false;
-        if (this.items.length !== this.previousItems.length) {
-            hasChanges = true;
-        }
-        else {
-            for (var i = 0; i < this.items.length; i++) {
-                if (!this._compareItems(this.items[i], this.previousItems[i])) {
-                    hasChanges = true;
-                    break;
-                }
-            }
-        }
-        if (hasChanges) {
-            this._updateServiceItems();
-            this._changeDetectorRef.detectChanges();
-            this._rebuildMenu();
+var SplitButtonType;
+(function (SplitButtonType) {
+    SplitButtonType["Primary"] = "primary";
+    SplitButtonType["Secondary"] = "secondary";
+    SplitButtonType["Default"] = "default";
+})(SplitButtonType || (SplitButtonType = {}));
+
+var SplitButtonComponent = /** @class */ (function () {
+    function SplitButtonComponent(eRef) {
+        this.eRef = eRef;
+        this.disabled = false;
+        this.type = SplitButtonType.Primary;
+        this.buttonClicked = new EventEmitter();
+        this.open = false;
+    }
+    SplitButtonComponent.prototype.onClickout = function (event) {
+        if (!this.eRef.nativeElement.contains(event.target)) {
+            this.closeDropdown();
         }
-        this.previousItems = this._tieredMenuService.cloneItems(this.items);
-    };
-    TieredMenuDirective.prototype.ngOnDestroy = function () {
-        this._unsubscribe$.next();
-        this._unsubscribe$.complete();
-        this._destroy();
     };
-    TieredMenuDirective.prototype._createMenu = function () {
-        var _a, _b, _c;
-        this._updateServiceItems();
-        if (!this._componentRef && ((_a = this._tieredMenuService.items) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-            (_b = this._tieredMenuGlobalService.lastInstance) === null || _b === void 0 ? void 0 : _b._destroy();
-            this._tieredMenuGlobalService.lastInstance = this;
-            (_c = this._lastActiveElement) === null || _c === void 0 ? void 0 : _c.blur();
-            this._isOpen = true;
-            this._isNested = document.body.clientWidth < 600;
-            this._isNested ? this._createNestedMenu() : this._createTieredMenu();
+    SplitButtonComponent.prototype.onButtonClick = function () {
+        if (!this.disabled) {
+            this.buttonClicked.emit();
+            this.closeDropdown();
         }
     };
-    TieredMenuDirective.prototype._createTieredMenu = function () {
-        var _this = this;
-        var _a;
-        if (!this._componentRef && ((_a = this._tieredMenuService.items) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-            var componentFactory = this._componentFactoryResolver.resolveComponentFactory(TieredMenuComponent);
-            this._componentRef = componentFactory.create(this._injector);
-            this._appRef.attachView(this._componentRef.hostView);
-            var domElem = this._componentRef.hostView.rootNodes[0];
-            document.body.appendChild(domElem);
-            this._setMenuComponentProperties();
-            this._componentRef.instance.destroyRequest.pipe(takeUntil(this._unsubscribe$)).subscribe(function () {
-                _this._destroy();
-            });
-            this._setMenuPosition();
+    SplitButtonComponent.prototype.onDropdownClick = function () {
+        if (!this.disabled) {
+            this.open = !this.open;
         }
     };
-    TieredMenuDirective.prototype._createNestedMenu = function () {
-        var _a;
-        if (!this._componentRef && ((_a = this._tieredMenuService.items) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-            var componentFactory = this._componentFactoryResolver.resolveComponentFactory(TieredMenuNestedComponent);
-            this._componentRef = componentFactory.create(this._injector);
-            this._appRef.attachView(this._componentRef.hostView);
-            var domElem = this._componentRef.hostView.rootNodes[0];
-            document.body.appendChild(domElem);
-            this._setMenuComponentProperties();
-            this._setMenuPosition();
-        }
+    SplitButtonComponent.prototype.onOptionClick = function (option) {
+        option.action && option.action();
+        this.closeDropdown();
     };
-    TieredMenuDirective.prototype._destroy = function () {
-        if (this._componentRef) {
-            this._isOpen = false;
-            window.clearTimeout(this._showTimeout);
-            this._appRef.detachView(this._componentRef.hostView);
-            this._componentRef.destroy();
-            this._componentRef = null;
-            this._tieredMenuService.currentItems = this._tieredMenuService.items;
-            this._tieredMenuService.currentItem = this._tieredMenuService.items[0];
-            this._tieredMenuEventService.closeAllMenusEvent.emit();
-        }
+    SplitButtonComponent.prototype.closeDropdown = function () {
+        this.open = false;
     };
-    TieredMenuDirective.prototype._setMenuPosition = function () {
-        var _a, _b;
-        var ITEM_HEIGHT = 37;
-        var ITEM_WIDTH = 176;
-        var DIVIDER_HEIGHT = 5;
-        var PADDING = 8;
-        var MARGIN = 4;
-        if (this._componentRef !== null) {
-            this._componentRef.instance.top = 8;
-            var _c = this._elementRef.nativeElement.getBoundingClientRect(), bottom = _c.bottom, left = _c.left, right = _c.right;
-            var itemsCount = (_a = this._componentRef.instance.items) === null || _a === void 0 ? void 0 : _a.reduce(function (count, item) {
-                return !item.divider ? count + 1 : count;
-            }, 0);
-            var dividersCount = (_b = this._componentRef.instance.items) === null || _b === void 0 ? void 0 : _b.reduce(function (count, item) {
-                return item.divider ? count + 1 : count;
-            }, 0);
-            var menuHeight = itemsCount * ITEM_HEIGHT + dividersCount * DIVIDER_HEIGHT + PADDING + MARGIN;
-            var rightFreeSpace = window.innerWidth - right;
-            var bottomFreeSpace = window.innerHeight - bottom;
-            this._componentRef.instance.top = bottom;
-            this._componentRef.instance.left = left;
-            if (bottomFreeSpace <= menuHeight) {
-                this._componentRef.instance.top = Math.max(scrollY + bottom - menuHeight, 0);
-            }
-            else {
-                this._componentRef.instance.top = window.scrollY + bottom + MARGIN;
+    SplitButtonComponent.ctorParameters = function () { return [
+        { type: ElementRef }
+    ]; };
+    __decorate([
+        Input()
+    ], SplitButtonComponent.prototype, "disabled", void 0);
+    __decorate([
+        Input()
+    ], SplitButtonComponent.prototype, "iconClass", void 0);
+    __decorate([
+        Input()
+    ], SplitButtonComponent.prototype, "label", void 0);
+    __decorate([
+        Input()
+    ], SplitButtonComponent.prototype, "type", void 0);
+    __decorate([
+        Input()
+    ], SplitButtonComponent.prototype, "options", void 0);
+    __decorate([
+        Output()
+    ], SplitButtonComponent.prototype, "buttonClicked", void 0);
+    __decorate([
+        HostListener("document:click", ["$event"])
+    ], SplitButtonComponent.prototype, "onClickout", null);
+    SplitButtonComponent = __decorate([
+        Component({
+            selector: "s-split-button",
+            template: "<div class=\"split-button\" [ngClass]=\"{\n        'split-button--primary': type == 'primary',\n        'split-button--secondary': type == 'secondary',\n        'split-button--default': type == 'default',\n        'split-button--disabled': disabled\n    }\">\n    <button class=\"button\" (click)=\"onButtonClick()\">\n        <span class=\"button__icon\" [ngClass]=\"iconClass\"></span>\n        <span class=\"button__label\">{{ label }}</span>\n    </button>\n    <button class=\"dropdown\" (click)=\"onDropdownClick()\">\n        <span class=\"dropdown__icon\" [ngClass]=\"{\n                'far': true,\n                'fa-chevron-down': !open,\n                'fa-chevron-up': open\n            }\">\n        </span>\n    </button>\n</div>\n\n<ul *ngIf=\"this.open\" class=\"options\">\n    <li *ngFor=\"let option of options\" (click)=\"onOptionClick(option)\">\n        {{ option.title }}\n    </li>\n</ul>",
+            styles: [".split-button{display:-ms-flexbox;display:flex;-webkit-user-select:none;-ms-user-select:none;user-select:none}.split-button .button{-ms-flex-align:center;align-items:center;border:none;border-radius:4px 0 0 4px;display:-ms-flexbox;display:flex;padding:8px 8px 8px 12px;transition:.3s ease-in-out}.split-button .button__icon{font-size:16px;padding:0 4px}.split-button .button__title{font-family:\"Open Sans\",sans-serif;font-size:14px;font-weight:400;line-height:21px}.split-button .dropdown{-ms-flex-align:center;align-items:center;border:none;border-left:1px solid #608190;border-radius:0 4px 4px 0;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:12px 8px;transition:.3s ease-in-out}.split-button--disabled{opacity:.5}.split-button--primary .button,.split-button--primary .dropdown{background-color:#428bca;color:#fff}.split-button--primary:not(.split-button--primary--disabled) .button,.split-button--primary:not(.split-button--primary--disabled) .dropdown{cursor:pointer}.split-button--primary:not(.split-button--primary--disabled) .button:hover,.split-button--primary:not(.split-button--primary--disabled) .dropdown:hover{background-color:#063951}.split-button--secondary .button,.split-button--secondary .dropdown{background-color:#7892a1;color:#fff}.split-button--secondary:not(.split-button--secondary--disabled) .button,.split-button--secondary:not(.split-button--secondary--disabled) .dropdown{cursor:pointer}.split-button--secondary:not(.split-button--secondary--disabled) .button:hover,.split-button--secondary:not(.split-button--secondary--disabled) .dropdown:hover{background-color:#697882}.split-button--default .button,.split-button--default .dropdown{background-color:unset;border:1px solid #d8d8d8;color:#333}.split-button--default:not(.split-button--default--disabled) .button,.split-button--default:not(.split-button--default--disabled) .dropdown{cursor:pointer}.split-button--default:not(.split-button--default--disabled) .button:hover,.split-button--default:not(.split-button--default--disabled) .dropdown:hover{background-color:#d8d8d8}.options{background-color:#fff;border-radius:4px;box-shadow:0 1px 5px rgba(0,0,0,.25);display:inline-block;list-style:none;margin:2px 0;padding:8px 0;position:absolute;-webkit-user-select:none;-ms-user-select:none;user-select:none}.options li{color:#333;cursor:pointer;font-family:\"Open Sans\",sans-serif;font-weight:400;font-size:14px;line-height:21px;padding:8px 16px}.options li:hover{background-color:#d8d8d8}"]
+        })
+    ], SplitButtonComponent);
+    return SplitButtonComponent;
+}());
+
+var SplitButtonModule = /** @class */ (function () {
+    function SplitButtonModule() {
+    }
+    SplitButtonModule = __decorate([
+        NgModule({
+            imports: [CommonModule],
+            declarations: [SplitButtonComponent],
+            exports: [SplitButtonComponent],
+        })
+    ], SplitButtonModule);
+    return SplitButtonModule;
+}());
+
+var StatsCardComponent = /** @class */ (function () {
+    function StatsCardComponent() {
+        this.id = "s-stats-card-" + StatsCardComponent_1.nextId++;
+        this.alwaysWithBorder = false;
+        this.lightVersion = false;
+        this.lightMode = true;
+        this.iconClass = "fa fa-bar-chart";
+        this.color = "#339966";
+        this.animateNumbers = true;
+        this.clickable = false;
+        this.tooltip = "";
+        this.onClick = new EventEmitter();
+        this.ANIMATION_DURATION_MS = 200;
+        this.STEP_DURATION_MS = 20;
+        this.previousValue = "0";
+        this._value = "0";
+    }
+    StatsCardComponent_1 = StatsCardComponent;
+    Object.defineProperty(StatsCardComponent.prototype, "value", {
+        get: function () {
+            return this._value;
+        },
+        set: function (value) {
+            this.previousValue = this._value;
+            this._value = String(value);
+            if (this.animateNumbers)
+                this.updateDisplayValue();
+            else
+                this.displayValue = this.value;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    StatsCardComponent.prototype.updateDisplayValue = function () {
+        var _this = this;
+        var animationDuration = new BigNumber$1(this.ANIMATION_DURATION_MS);
+        var stepDuration = new BigNumber$1(this.STEP_DURATION_MS);
+        var animationCount = animationDuration.dividedBy(stepDuration);
+        var previousRawValue = new BigNumber$1(this.previousValue.replace(/\D/g, ""));
+        var rawValue = new BigNumber$1(this.value.replace(/\D/g, ""));
+        var incrementValue = rawValue.minus(previousRawValue).absoluteValue().dividedBy(animationCount);
+        var incremental = previousRawValue.isLessThan(rawValue);
+        clearInterval(this.intervalId);
+        this.displayValue = this.replaceNumericPositions(this.value);
+        var counter = previousRawValue;
+        this.intervalId = setInterval(function () {
+            if (incremental && counter.isLessThan(rawValue)) {
+                _this.displayValue = _this.replaceNumericPositions(_this.displayValue, counter);
+                counter = counter.plus(incrementValue);
             }
-            if (rightFreeSpace > 176) {
-                this._componentRef.instance.left = window.scrollX + left;
+            else if (!incremental && counter.isGreaterThan(rawValue)) {
+                _this.displayValue = _this.replaceNumericPositions(_this.displayValue, counter);
+                counter = counter.minus(incrementValue);
             }
             else {
-                this._componentRef.instance.left = window.scrollX + right - ITEM_WIDTH;
-            }
-            if (this._isNested) {
-                this._componentRef.instance.left = MARGIN;
+                _this.displayValue = _this.value;
+                clearInterval(_this.intervalId);
             }
-        }
-    };
-    TieredMenuDirective.prototype._setMenuComponentProperties = function () {
-        if (this._componentRef != null) {
-            this._componentRef.instance.items = this._tieredMenuService.items;
-        }
-    };
-    TieredMenuDirective.prototype._subscribeEvents = function () {
-        var _this = this;
-        this._tieredMenuEventService.closeAllMenusEvent.pipe(takeUntil(this._unsubscribe$)).subscribe(function () {
-            _this._tieredMenuService.items = _this._tieredMenuService.markAllItemsAsClosed(_this._tieredMenuService.items);
-            _this._destroy();
-        });
-    };
-    TieredMenuDirective.prototype._compareItems = function (item1, item2) {
-        return JSON.stringify(item1) === JSON.stringify(item2);
-    };
-    TieredMenuDirective.prototype._rebuildMenu = function () {
-        this._destroy();
+        }, this.STEP_DURATION_MS);
     };
-    TieredMenuDirective.prototype._updateServiceItems = function () {
-        this._tieredMenuService.items = this._tieredMenuService.normalizeData(this.items);
-        this._tieredMenuService.currentItems = this._tieredMenuService.items;
-        this._tieredMenuService.currentItem = this._tieredMenuService.items[0];
+    StatsCardComponent.prototype.replaceNumericPositions = function (value, newValue) {
+        var rawValue = value.replace(/[^\d]/g, "");
+        var newValueString = newValue ? newValue.toString() : "";
+        var formattedNewValue = newValueString
+            .toString()
+            .replace(/\D/g, "")
+            .padStart(rawValue.length, "0");
+        var newValueIndex = 0;
+        return value
+            .split("")
+            .map(function (char) {
+            var number = Number(char);
+            if (number || char === "0")
+                return formattedNewValue[newValueIndex++];
+            return char;
+        })
+            .join("");
     };
-    TieredMenuDirective.ctorParameters = function () { return [
-        { type: ElementRef },
-        { type: ApplicationRef },
-        { type: ComponentFactoryResolver },
-        { type: Injector },
-        { type: TieredMenuEventService },
-        { type: TieredMenuService },
-        { type: TieredMenuGlobalService },
-        { type: ChangeDetectorRef }
-    ]; };
+    var StatsCardComponent_1;
+    StatsCardComponent.nextId = 0;
     __decorate([
         Input()
-    ], TieredMenuDirective.prototype, "items", void 0);
+    ], StatsCardComponent.prototype, "id", void 0);
     __decorate([
         Input()
-    ], TieredMenuDirective.prototype, "triggerEvent", void 0);
+    ], StatsCardComponent.prototype, "label", void 0);
     __decorate([
-        HostListener("click", ["$event"])
-    ], TieredMenuDirective.prototype, "onClick", null);
-    TieredMenuDirective = __decorate([
-        Directive({
-            selector: "[sTieredMenu]",
-            providers: [TieredMenuEventService, TieredMenuService],
+        Input()
+    ], StatsCardComponent.prototype, "alwaysWithBorder", void 0);
+    __decorate([
+        Input()
+    ], StatsCardComponent.prototype, "lightVersion", void 0);
+    __decorate([
+        Input()
+    ], StatsCardComponent.prototype, "lightMode", void 0);
+    __decorate([
+        Input()
+    ], StatsCardComponent.prototype, "iconClass", void 0);
+    __decorate([
+        Input()
+    ], StatsCardComponent.prototype, "color", void 0);
+    __decorate([
+        Input()
+    ], StatsCardComponent.prototype, "animateNumbers", void 0);
+    __decorate([
+        Input()
+    ], StatsCardComponent.prototype, "clickable", void 0);
+    __decorate([
+        Input()
+    ], StatsCardComponent.prototype, "value", null);
+    __decorate([
+        Input()
+    ], StatsCardComponent.prototype, "tooltip", void 0);
+    __decorate([
+        Output()
+    ], StatsCardComponent.prototype, "onClick", void 0);
+    StatsCardComponent = StatsCardComponent_1 = __decorate([
+        Component({
+            selector: "s-stats-card",
+            template: "<div\n    [id]=\"id\"\n    class=\"s-stats-card\"\n    [ngClass]=\"{\n        's-stats-card--always-border': alwaysWithBorder,\n        's-stats-card--light': lightMode,\n        's-stats-card--color': !lightMode,\n        's-stats-card--light-version': lightVersion,\n        's-stats-card--clickable': clickable\n    }\"\n    (click)=\"clickable && onClick.next($event)\">\n\n    <div\n        [id]=\"id + '-background'\"\n        class=\"s-stats-card-background\"\n        [ngStyle]=\"{ 'background-color': !lightMode && color || '' }\">\n    </div>\n    <div\n        [id]=\"id + '-overlay'\"\n        class=\"s-stats-card-overlay\">\n    </div>\n\n    <div\n        [id]=\"id + '-info-container'\"\n        class=\"s-stats-card-info-container\">\n        <div class=\"s-stats-card-info-inner-container\">\n            <div\n                [id]=\"id + '-icon-container'\"\n                class=\"s-stats-card-icon-container\"\n                [ngStyle]=\"{ 'background-color': lightMode && color || '' }\">\n                <span\n                    [id]=\"id + '-icon'\"\n                    [class]=\"iconClass\"\n                    [ngClass]=\"{ 's-stats-card-icon': true }\"\n                    [ngStyle]=\"{'color': !lightMode && color || ''}\"\n                    aria-hidden=\"true\"></span>\n            </div>\n\n            <div\n                [id]=\"id + '-text-container'\"\n                class=\"s-stats-card-text-container\">\n                <h4\n                    [id]=\"id + '-label'\"\n                    class=\"s-stats-card-label\"\n                    [pTooltip]=\"label\"\n                    tooltipPosition=\"top\"\n                    showDelay=\"500\">\n                    {{ label }}\n                </h4>\n                <span\n                    [id]=\"id + '-value'\"\n                    class=\"s-stats-card-value\"\n                    [pTooltip]=\"displayValue\"\n                    tooltipPosition=\"top\"\n                    showDelay=\"500\">\n                    {{ displayValue }}\n                </span>\n            </div>\n        </div>\n        <div class=\"s-stats-card-content-inner-container\">\n            <div #content class=\"s-stats-card-content-container\">\n                <ng-content></ng-content>\n            </div>\n            <div\n                *ngIf=\"content.children.length\"\n                class=\"s-stats-card-content-separator\">\n            </div>\n        </div>\n        <span\n            *ngIf=\"tooltip\"\n            class=\"s-status-card-tooltip\"\n            [pTooltip]=\"tooltip\"\n            tooltipPosition=\"right\">\n            <i class=\"fa fa-info-circle s-status-card-tooltip-icon\"></i>\n        </span>\n    </div>\n</div>\n",
+            encapsulation: ViewEncapsulation.None,
+            styles: ["s-stats-card{display:block;height:auto;position:relative}s-stats-card .s-stats-card{border:1px solid transparent;min-width:120px;overflow:hidden;position:relative}s-stats-card .s-stats-card .s-stats-card-background,s-stats-card .s-stats-card .s-stats-card-overlay{height:calc(100% - 2px);left:1px;position:absolute;top:1px;width:calc(100% - 2px)}s-stats-card .s-stats-card .s-stats-card-background{background-color:#fff}s-stats-card .s-stats-card .s-stats-card-overlay{background-color:#000;opacity:0;transition:opacity .2s ease-out}s-stats-card .s-stats-card .s-stats-card-info-container{overflow:auto;padding:15px;position:relative}s-stats-card .s-stats-card .s-stats-card-info-container .s-stats-card-info-inner-container{overflow:hidden;position:relative}s-stats-card .s-stats-card .s-stats-card-info-container .s-stats-card-info-inner-container .s-stats-card-icon-container{float:left;font-size:24px;height:50px;line-height:50px;text-align:center;transition:width .2s ease-out;width:50px}s-stats-card .s-stats-card .s-stats-card-info-container .s-stats-card-info-inner-container .s-stats-card-text-container{-ms-flex-align:start;align-items:flex-start;color:#fff;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;float:left;height:50px;-ms-flex-pack:center;justify-content:center;max-width:calc(100% - 65px);padding-left:15px}s-stats-card .s-stats-card .s-stats-card-info-container .s-stats-card-info-inner-container .s-stats-card-text-container .s-stats-card-label{font-weight:400;width:100%}s-stats-card .s-stats-card .s-stats-card-info-container .s-stats-card-info-inner-container .s-stats-card-text-container .s-stats-card-value{display:inline-block;font-size:20px;font-weight:700;width:100%}s-stats-card .s-stats-card .s-stats-card-info-container .s-stats-card-info-inner-container .s-stats-card-text-container,s-stats-card .s-stats-card .s-stats-card-info-container .s-stats-card-info-inner-container .s-stats-card-text-container .s-stats-card-label,s-stats-card .s-stats-card .s-stats-card-info-container .s-stats-card-info-inner-container .s-stats-card-text-container .s-stats-card-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}s-stats-card .s-stats-card .s-stats-card-info-container .s-stats-card-content-inner-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}s-stats-card .s-stats-card .s-stats-card-info-container .s-stats-card-content-inner-container .s-stats-card-content-separator{border-top:1px solid #ccc;margin:15px 0;-ms-flex-order:1;order:1}s-stats-card .s-stats-card .s-stats-card-info-container .s-stats-card-content-inner-container .s-stats-card-content-container{-ms-flex-order:2;order:2}s-stats-card .s-stats-card .s-stats-card-info-container .s-status-card-tooltip{font-size:1rem;line-height:0;margin:.3rem;position:absolute;right:0;top:0}s-stats-card .s-stats-card .s-stats-card-info-container .s-status-card-tooltip .s-status-card-tooltip-icon{color:#fff}s-stats-card .s-stats-card.s-stats-card--color .s-stats-card-icon-container{background-color:#fff}s-stats-card .s-stats-card.s-stats-card--light *{color:#333}s-stats-card .s-stats-card.s-stats-card--light .s-stats-card-icon{color:#fff}s-stats-card .s-stats-card.s-stats-card--light * .s-status-card-tooltip .s-status-card-tooltip-icon,s-stats-card .s-stats-card.s-stats-card--light .s-stats-card-label{color:#999}s-stats-card .s-stats-card.s-stats-card--light-version .s-stats-card-info-inner-container .s-stats-card-icon-container{height:100%;left:0;position:absolute;right:0;width:10px}s-stats-card .s-stats-card.s-stats-card--light-version .s-stats-card-info-inner-container .s-stats-card-icon-container .s-stats-card-icon{display:none}s-stats-card .s-stats-card.s-stats-card--light-version .s-stats-card-info-inner-container .s-stats-card-text-container{height:auto;max-width:calc(100% - 25px);padding-left:25px}s-stats-card .s-stats-card.s-stats-card--clickable{cursor:pointer}s-stats-card .s-stats-card:hover .s-stats-card-overlay{opacity:.2}s-stats-card .s-stats-card.s-stats-card--light:hover .s-stats-card-overlay{opacity:.08}s-stats-card .s-stats-card.s-stats-card--light{border-color:#ccc}.s-sidebar-content .s-stats-card.s-stats-card--light:not(.s-stats-card--always-border),.ui-dialog-content .s-stats-card.s-stats-card--light:not(.s-stats-card--always-border),p-panel .s-stats-card.s-stats-card--light:not(.s-stats-card--always-border){border-color:transparent}@media (max-width:767px){s-stats-card .s-stats-card{height:auto}s-stats-card .s-stats-card .s-stats-card-info-container .s-stats-card-info-inner-container .s-stats-card-icon-container{height:100%;left:0;position:absolute;right:0;width:10px}s-stats-card .s-stats-card .s-stats-card-info-container .s-stats-card-info-inner-container .s-stats-card-icon-container .s-stats-card-icon{display:none}s-stats-card .s-stats-card .s-stats-card-info-container .s-stats-card-info-inner-container .s-stats-card-text-container{height:auto;max-width:calc(100% - 25px);padding-left:25px}s-stats-card .s-stats-card .s-stats-card-info-container .s-stats-card-info-inner-container .s-stats-card-text-container,s-stats-card .s-stats-card .s-stats-card-info-container .s-stats-card-info-inner-container .s-stats-card-text-container .s-stats-card-label,s-stats-card .s-stats-card .s-stats-card-info-container .s-stats-card-info-inner-container .s-stats-card-text-container .s-stats-card-value{overflow:visible;white-space:normal;word-break:break-all}}"]
         })
-    ], TieredMenuDirective);
-    return TieredMenuDirective;
+    ], StatsCardComponent);
+    return StatsCardComponent;
 }());
 
-var TieredMenuDividerComponent = /** @class */ (function () {
-    function TieredMenuDividerComponent() {
+var StatsCardModule = /** @class */ (function () {
+    function StatsCardModule() {
     }
-    TieredMenuDividerComponent = __decorate([
-        Component({
-            selector: "s-tiered-menu-divider",
-            template: "<div class=\"divider\"></div>",
-            styles: [".divider{margin:2px 0;height:1px;background-color:#ccc}"]
+    StatsCardModule = __decorate([
+        NgModule({
+            imports: [
+                CommonModule,
+                TooltipModule$1,
+            ],
+            declarations: [
+                StatsCardComponent,
+            ],
+            exports: [
+                StatsCardComponent,
+            ],
         })
-    ], TieredMenuDividerComponent);
-    return TieredMenuDividerComponent;
+    ], StatsCardModule);
+    return StatsCardModule;
 }());
 
-var TieredMenuItemComponent = /** @class */ (function () {
-    function TieredMenuItemComponent(_tieredMenuEventService) {
-        this._tieredMenuEventService = _tieredMenuEventService;
-        this.focused = false;
-        this.highlight = false;
-        this.triggerEvent = "click";
-        this.closeOnClick = false;
+var StepState;
+(function (StepState) {
+    StepState["Default"] = "default";
+    StepState["Success"] = "success";
+    StepState["Warning"] = "warning";
+})(StepState || (StepState = {}));
+var StepsComponent = /** @class */ (function () {
+    function StepsComponent() {
+        this.id = "s-steps-" + StepsComponent_1.nextId++;
+        this.activeIndex = 0;
+        this.stepSelected = new EventEmitter();
     }
-    TieredMenuItemComponent.prototype.onClick = function () {
-        if (this.item.disabled)
+    StepsComponent_1 = StepsComponent;
+    StepsComponent.prototype.stepClick = function (step, index, event) {
+        if (step.disabled || index == this.activeIndex)
             return;
-        if (this.item.submenu) {
-            if (!this.item.isOpen) {
-                this._tieredMenuEventService.openItemMenuEvent.emit(this.item);
-            }
-            else if (this.closeOnClick) {
-                this._tieredMenuEventService.closeItemMenuEvent.emit(this.item);
-            }
-        }
-        else {
-            this._tieredMenuEventService.selectItemEvent.emit(this.item);
-        }
+        this.stepSelected.emit({ step: step, index: index, event: event });
     };
-    TieredMenuItemComponent.prototype.onMouseEnter = function () {
-        var _this = this;
-        if (this.item.disabled)
-            return;
-        if (this.triggerEvent === "hover" && !this.item.isOpen) {
-            this._showTimeout = window.setTimeout(function () {
-                _this._tieredMenuEventService.openItemMenuEvent.emit(_this.item);
-            }, 300);
-        }
+    Object.defineProperty(StepsComponent.prototype, "stepState", {
+        get: function () {
+            return StepState;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    StepsComponent.prototype.barAnimation = function (index, activeIndex) {
+        var visited = index < activeIndex;
+        var activated = index === activeIndex;
+        return visited || activated;
     };
-    TieredMenuItemComponent.prototype.onMouseLeave = function () {
-        window.clearTimeout(this._showTimeout);
+    StepsComponent.prototype.afterBarAnimation = function (index, activeIndex) {
+        var visited = index < activeIndex;
+        var activated = index === activeIndex - 1;
+        return visited || activated;
     };
-    TieredMenuItemComponent.ctorParameters = function () { return [
-        { type: TieredMenuEventService }
-    ]; };
-    __decorate([
-        Input()
-    ], TieredMenuItemComponent.prototype, "item", void 0);
-    __decorate([
-        Input()
-    ], TieredMenuItemComponent.prototype, "focused", void 0);
+    Object.defineProperty(StepsComponent.prototype, "visibledStep", {
+        get: function () {
+            return this.steps.filter(function (step) { return !step.hidden; });
+        },
+        enumerable: true,
+        configurable: true
+    });
+    var StepsComponent_1;
+    StepsComponent.nextId = 0;
     __decorate([
         Input()
-    ], TieredMenuItemComponent.prototype, "highlight", void 0);
+    ], StepsComponent.prototype, "id", void 0);
     __decorate([
         Input()
-    ], TieredMenuItemComponent.prototype, "triggerEvent", void 0);
+    ], StepsComponent.prototype, "steps", void 0);
     __decorate([
         Input()
-    ], TieredMenuItemComponent.prototype, "closeOnClick", void 0);
-    __decorate([
-        HostListener("click"),
-        HostListener("touchend")
-    ], TieredMenuItemComponent.prototype, "onClick", null);
-    __decorate([
-        HostListener("mouseenter")
-    ], TieredMenuItemComponent.prototype, "onMouseEnter", null);
+    ], StepsComponent.prototype, "activeIndex", void 0);
     __decorate([
-        HostListener("mouseleave")
-    ], TieredMenuItemComponent.prototype, "onMouseLeave", null);
-    TieredMenuItemComponent = __decorate([
+        Output()
+    ], StepsComponent.prototype, "stepSelected", void 0);
+    StepsComponent = StepsComponent_1 = __decorate([
         Component({
-            selector: "s-tiered-menu-item",
-            template: "<div\n    [id]=\"item.id\"\n    class=\"tiered-menu-item\"\n    [ngClass]=\"{\n        'tiered-menu-item--open': item.isOpen,\n        'tiered-menu-item--focused': focused,\n        'tiered-menu-item--disabled': item.disabled\n    }\">\n    <div class=\"tiered-menu-item-content\">\n        <span class=\"icon\" [ngClass]=\"item.iconClass\"></span>\n        <span class=\"label\">{{ item.label }}</span>\n    </div>\n    <span\n        *ngIf=\"item.submenu\"\n        class=\"submenu-icon\"\n        [ngClass]=\"{\n            'fas': true,\n            'fa-chevron-left': item.isOpen,\n            'fa-chevron-right': !item.isOpen\n        }\">\n    </span>\n</div>",
-            styles: [".tiered-menu-item{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;padding:8px 16px;-webkit-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}.tiered-menu-item .tiered-menu-item-content .label{margin:0 12px}.tiered-menu-item:hover{background-color:#e9e6e6}.tiered-menu-item--focused{background-color:#ccc!important}.tiered-menu-item--open{background-color:#e4e2e2}.tiered-menu-item--disabled{opacity:50%;cursor:default}"]
+            selector: "s-steps",
+            template: "<div [id]=\"id\" class=\"s-steps-container\">\n    <ng-container *ngFor=\"let step of visibledStep; let i = index; let isFirst = first; let isLast = last\">\n        <div *ngIf=\"!isFirst\" class=\"s-step-progress-bar\"\n            [@activeDesative]=\"barAnimation(i, activeIndex) ? 'active': 'desactive'\" [ngClass]=\"{\n            's-step-success': (step.state === stepState.Success),\n            's-step-warning': (step.state === stepState.Warning),\n            's-step-disabled': step.disabled,\n            's-step-visited': (i < activeIndex),\n            's-step-active': (i === activeIndex)\n        }\"></div>\n        <div [id]=\"id + '-step-' + (step.id || i)\" class=\"s-step-header\" (click)=\"stepClick(step, i, $event)\" 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-step-success': (step.state === stepState.Success),\n            's-step-warning': (step.state === stepState.Warning),\n            's-step-visited': (i < activeIndex),\n            's-step-active': (i === activeIndex),\n            's-step-previous': (i === activeIndex - 1)\n        }\">\n            <div *ngIf=\"!isFirst\"\n                [@beforeActiveDesative]=\"barAnimation(i, activeIndex) ? 'active': 'desactive'\"\n                class=\"s-step-progress-bar-before\" [ngClass]=\"{\n                's-step-success': (step.state === stepState.Success),\n                's-step-warning': (step.state === stepState.Warning),\n                's-step-disabled': step.disabled,\n                's-step-visited': (i < activeIndex),\n                's-step-active': (i === activeIndex)\n            }\"></div>\n            <div *ngIf=\"!isLast\"\n                [@afterActiveDesative]=\"afterBarAnimation(i, activeIndex) ? 'active': 'desactive'\"\n                class=\"s-step-progress-bar-after\" [ngClass]=\"{\n                's-step-success': (step.state === stepState.Success),\n                's-step-warning': (step.state === stepState.Warning),\n                's-step-disabled': visibledStep[i + 1].disabled,\n                's-step-visited': ((i + 1) < activeIndex),\n                's-step-active': (i === (activeIndex - 1))\n            }\"></div>\n            <div\n                class=\"s-step-index\"\n                [ngClass]=\"{'s-step-disabled': step.disabled}\"\n                [pTooltip]=\"step.tooltip\"\n                tooltipPosition=\"top\">\n                <div class=\"s-step-index-content\">\n                    <span\n                        *ngIf=\"step.state !== stepState.Warning && (step.state == stepState.Success || activeIndex > i)\"\n                        class=\"fas fa-check\"\n                        aria-hidden=\"true\"\n                        [attr.aria-label]=\"i + 1\"></span>\n                    <span\n                        *ngIf=\"step.state == stepState.Warning\"\n                        class=\"fas fa-exclamation-triangle\"\n                        aria-hidden=\"true\"\n                        [attr.aria-label]=\"i + 1\"></span>\n                    <span\n                        *ngIf=\"step.state != stepState.Success && step.state != stepState.Warning && activeIndex <= i\">\n                        {{i + 1}}\n                    </span>\n                </div>\n            </div>\n            <div\n                [id]=\"'step-label-' + i\"\n                class=\"s-step-label\"\n                [ngClass]=\"{'s-step-disabled': step.disabled}\">\n                <span>\n                    {{step.label}}\n                </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-steps-container{display:-ms-flexbox;display:flex;white-space:nowrap;-ms-flex-align:start;align-items:flex-start;overflow:hidden;padding:15px 10px}.s-step-header{box-sizing:border-box;-ms-flex-direction:column;flex-direction:column;cursor:pointer;position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:66px}.s-step-header .s-step-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-step-header .s-step-progress-bar-before{margin:0;position:absolute;top:20px;-ms-flex:auto;flex:auto;height:3px;overflow:hidden;width:calc(50% - 20px);background-color:#ccc;background-image:linear-gradient(to right,#7892a1 50%,#ccc 50%);background-position:right bottom;background-size:300% 100%;left:0}.s-step-header .s-step-progress-bar-before.s-step-active,.s-step-header .s-step-progress-bar-before.s-step-visited{background-position:left bottom}.s-step-header .s-step-progress-bar-after{margin:0;position:absolute;top:20px;-ms-flex:auto;flex:auto;height:3px;overflow:hidden;width:calc(50% - 20px);background-color:#ccc;background-image:linear-gradient(to right,#7892a1 50%,#ccc 50%);background-position:right bottom;background-size:300% 100%;right:0}.s-step-header .s-step-progress-bar-after.s-step-active,.s-step-header .s-step-progress-bar-after.s-step-visited{background-position:left bottom}.s-step-progress-bar{margin:0;position:relative;top:20px;-ms-flex:auto;flex:auto;height:3px;overflow:hidden;width:100%;background-color:#ccc;background-image:linear-gradient(to right,#7892a1 50%,#ccc 50%);background-position:right bottom;background-size:300% 100%}.s-step-disabled{opacity:.5;filter:Alpha(Opacity=50)}.s-step-disabled,.s-step-disabled *{cursor:text!important}.s-step-active.s-step-disabled{opacity:1}.s-step-index{background-color:#fff;border:3px solid #ccc;border-radius:50%;color:#999;display:inline-block;font-weight:700;position:relative;transition:background-color .2s ease-out;height:40px;width:40px;-ms-flex:none;flex:none}.s-step-index .s-step-index-content{line-height:18px;font-size:18px;padding-top:8.5px;text-align:center;position:relative;cursor:pointer}.s-step-index:hover{background-color:#f7f7f7}.s-step-warning .s-step-index .s-step-index-content{padding-top:7px}.s-step-visited .s-step-index{border-color:#7892a1;animation:.1s ease-out alternate scale-up-center;background-color:#7892a1}.s-step-visited .s-step-index-content>span{color:#fff}.s-step-active.s-step-progress-bar,.s-step-visited.s-step-progress-bar{background-position:left bottom}.s-step-active .s-step-index{border-color:#7892a1;color:#7892a1;cursor:default}.s-step-active .s-step-label{color:#333;font-weight:700}@media (max-width:767px){.s-step-label{display:none}}"]
         })
-    ], TieredMenuItemComponent);
-    return TieredMenuItemComponent;
+    ], StepsComponent);
+    return StepsComponent;
 }());
 
-var TieredMenuModule = /** @class */ (function () {
-    function TieredMenuModule() {
+var StepsModule = /** @class */ (function () {
+    function StepsModule() {
     }
-    TieredMenuModule = __decorate([
+    StepsModule = __decorate([
         NgModule({
-            imports: [
-                CommonModule,
-            ],
-            declarations: [
-                TieredMenuDirective,
-                TieredMenuComponent,
-                TieredMenuNestedComponent,
-                TieredMenuItemComponent,
-                TieredMenuDividerComponent,
-            ],
-            exports: [TieredMenuDirective],
-            providers: [TieredMenuGlobalService],
+            imports: [CommonModule, TooltipModule$1],
+            declarations: [StepsComponent],
+            exports: [StepsComponent],
         })
-    ], TieredMenuModule);
-    return TieredMenuModule;
+    ], StepsModule);
+    return StepsModule;
 }());
 
 var TileComponent = /** @class */ (function () {
@@ -17984,5 +18115,5 @@ var fallback = {
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionComponent, AccordionModule, AccordionPanelComponent, AlertComponent, AlertModule, AngularComponentsModule, AutocompleteField, BadgeColors, BadgeComponent, BadgeModule, BaseFieldComponent, BignumberField, BignumberInputDirective, BignumberInputModule, BooleanField, BooleanOptionsLabel, BreadcrumbComponent, BreadcrumbModule, Breakpoints, ButtonComponent, ButtonModule, ButtonPriority, ButtonSize, CalendarField, CalendarLocaleOptions, CalendarMaskDirective, CalendarMaskModule, CardComponent, CardModule, CardTemplateTypes, ChipsField, CodeEditorModule, CollapseLinkComponent, CollapseLinkModule, ControlErrorsComponent, ControlErrorsModule, CountryPhonePickerComponent, CountryPhonePickerModule, CurrencyField, CustomFieldsComponent, CustomFieldsModule, CustomFieldsService, DEFAULT_CALENDAR_LOCALE_OPTIONS, DEFAULT_LOCALE_OPTIONS, DEFAULT_NUMBER_LOCALE_OPTIONS, DebounceUtils, DoubleClickDirective, DynamicConfig, DynamicFormComponent, DynamicFormModule, DynamicType, EditableOverlayDirective, EditableOverlayModule, EmptyStateComponent, EmptyStateModule, EnumBadgeColors, EnumColumnFieldType, EnumSeverity, ExportUtils, Field, FieldType, Fieldset, FileUploadComponent, FileUploadModule, FileUploadPermissions, FileValidation, FormField, GanttComponent, GanttModule, GlobalSearchComponent, GlobalSearchDropdownItemComponent, GlobalSearchModule, GlobalSearchSizeEnum, HostProjectConfigsInjectionToken, IAInsightComponent, IAInsightModule, IAInsightTemplateTypes, ImageCropperComponent, ImageCropperModule, ImageCropperService, InfoSignDirective, InfoSignModule, KanbanComponent, KanbanModule, KanbanTemplateTypes, 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, Ordination, PanelComponent, PanelModule, PasswordField, PasswordStrengthComponent, PasswordStrengthDirective, PasswordStrengthModule, PasswordStrengthPositions, PasswordStrengths, ProductHeaderComponent, ProductHeaderModule, ProfilePicturePickerComponent, ProfilePicturePickerModule, ProgressBarColors, ProgressBarComponent, ProgressBarModule, RadioButtonField, RatingScaleComponent, RatingScaleModule, RationButtonOption, RowTogllerDirective, SVGFactoryDirective, SVGFactoryModule, Section, SelectButtonComponent, SelectButtonModule, SelectField, SelectOption, SidebarComponent, SidebarModule, SlidePanelComponent, SlidePanelModule, SplitButtonComponent, SplitButtonModule, SplitButtonType, StatsCardComponent, StatsCardModule, StepState, StepsComponent, StepsModule, Structure, SwitchComponent, SwitchModule, TableFrozenPositionDirective, TableHeaderCheckboxComponent, TableHeaderCheckboxModule, TableModule, TaxCalculationLanguageConfigs, TextAreaField, TextField, Themes, ThumbnailComponent, ThumbnailModule, ThumbnailSize, TieredMenuDirective, TieredMenuModule, TileComponent, TileModule, TimelineComponent, TimelineItem, TimelineItemSeverity, TimelineItemSize, TimelineModule, TokenListComponent, TokenListModule, TooltipModule, TooltipPosition, ValidateErrors, ViewMode, WorkspaceSwitchComponent, WorkspaceSwitchModule, convertToMomentDateFormat, countries, fallback, TooltipComponent as ɵa, TooltipDirective as ɵb, TextFieldComponent as ɵba, NumberFieldModule as ɵbb, LocalizedNumberInputModule as ɵbc, NumberInputModule as ɵbd, NumberFieldComponent as ɵbe, CurrencyFieldModule as ɵbf, CurrencyFieldComponent as ɵbg, NumberFieldModule$1 as ɵbh, BignumberInputModule as ɵbi, BignumberFieldComponent as ɵbj, ProfilePictureModule as ɵbk, ThumbnailService as ɵbl, StructureModule as ɵbm, HeaderComponent as ɵbn, FooterComponent as ɵbo, ProfilePictureFieldComponent as ɵbp, AutocompleteFieldComponent as ɵbq, BooleanFieldComponent as ɵbr, BooleanSwitchFieldComponent as ɵbs, CalendarFieldComponent as ɵbt, ChipsFieldComponent as ɵbu, CountryPhonePickerFieldComponent as ɵbv, DynamicFieldComponent as ɵbw, DynamicFormDirective as ɵbx, FieldsetComponent as ɵby, FileUploadComponent$1 as ɵbz, TemplateDirective as ɵc, LookupFieldComponent as ɵca, RadioButtonComponent as ɵcb, RowComponent as ɵcc, SectionComponent as ɵcd, SelectFieldComponent as ɵce, SliderFieldComponent as ɵcf, TextAreaFieldComponent as ɵcg, TextAreaIAFieldComponent as ɵch, IAssistService as ɵci, DecimalField as ɵck, SideTableComponent as ɵcl, InfiniteScrollModule as ɵcm, InfiniteScrollDirective as ɵcn, IAInsightSidebarComponent as ɵco, IAInsightCardComponent as ɵcp, IAInsightCardLoaderComponent as ɵcq, KanbanEventService as ɵcr, KanbanItemComponent as ɵcs, KanbanColumnComponent as ɵct, KanbanItemDraggingComponent as ɵcu, NumberLocaleOptions as ɵcv, BorderButtonModule as ɵcw, BorderButtonComponent as ɵcx, ProgressBarDeterminateComponent as ɵcy, ProgressBarIndeterminateComponent as ɵcz, TemplateModule as ɵd, SelectButtonItemComponent as ɵda, SlidePanelService as ɵdb, TieredMenuEventService as ɵdc, TieredMenuService as ɵdd, TieredMenuGlobalService as ɵde, TieredMenuComponent as ɵdf, TieredMenuNestedComponent as ɵdg, TieredMenuItemComponent as ɵdh, TieredMenuDividerComponent as ɵdi, TimelineItemModule as ɵdj, TimelineIconItemComponent as ɵdk, HorizontalTimelineModule as ɵdl, HorizontalTimelineComponent as ɵdm, VerticalTimelineModule as ɵdn, VerticalTimelineComponent as ɵdo, RangeLineComponent as ɵdp, CollapseOptionComponent as ɵdq, CollapsedItemsComponent as ɵdr, VerticalItemsComponent as ɵds, CustomTranslationsModule as ɵe, CodeEditorComponent as ɵf, CoreFacade as ɵg, CodeMirror6Core as ɵh, CountryPhonePickerService as ɵi, LocalizedCurrencyImpurePipe as ɵj, LocalizedBignumberPipe as ɵk, LocalizedBignumberImpurePipe as ɵl, NumericPipe as ɵm, NumericService as ɵn, EmptyStateGoBackComponent as ɵo, IAssistIconComponent as ɵp, SeniorIconComponent as ɵq, DotsIndicatorComponent as ɵr, LoadingIndicatorComponent as ɵs, FileUploadService as ɵt, InfoSignComponent as ɵu, TableColumnsComponent as ɵv, TablePagingComponent as ɵw, PasswordFieldModule as ɵx, PasswordFieldComponent as ɵy, TextFieldModule as ɵz };
+export { AccordionComponent, AccordionModule, AccordionPanelComponent, AlertComponent, AlertModule, AngularComponentsModule, AutocompleteField, BadgeColors, BadgeComponent, BadgeModule, BaseFieldComponent, BignumberField, BignumberInputDirective, BignumberInputModule, BooleanField, BooleanOptionsLabel, BreadcrumbComponent, BreadcrumbModule, Breakpoints, ButtonComponent, ButtonModule, ButtonPriority, ButtonSize, CalendarField, CalendarLocaleOptions, CalendarMaskDirective, CalendarMaskModule, CardComponent, CardModule, CardTemplateTypes, ChipsField, CodeEditorModule, CollapseLinkComponent, CollapseLinkModule, ControlErrorsComponent, ControlErrorsModule, CountryPhonePickerComponent, CountryPhonePickerModule, CurrencyField, CustomFieldsComponent, CustomFieldsModule, CustomFieldsService, DEFAULT_CALENDAR_LOCALE_OPTIONS, DEFAULT_LOCALE_OPTIONS, DEFAULT_NUMBER_LOCALE_OPTIONS, DebounceUtils, DoubleClickDirective, DynamicConfig, DynamicFormComponent, DynamicFormModule, DynamicType, EditableOverlayDirective, EditableOverlayModule, EmptyStateComponent, EmptyStateModule, EnumBadgeColors, EnumColumnFieldType, EnumSeverity, ExportUtils, Field, FieldType, Fieldset, FileUploadComponent, FileUploadModule, FileUploadPermissions, FileValidation, FormField, GanttComponent, GanttModule, GlobalSearchComponent, GlobalSearchDropdownItemComponent, GlobalSearchModule, GlobalSearchSizeEnum, HostProjectConfigsInjectionToken, IAInsightComponent, IAInsightModule, IAInsightTemplateTypes, ImageCropperComponent, ImageCropperModule, ImageCropperService, InfoSignDirective, InfoSignModule, KanbanComponent, KanbanModule, KanbanTemplateTypes, Languages, LoadingStateComponent, LoadingStateDirective, LoadingStateModule, LocaleModule, LocaleOptions, LocaleService, LocalizedCurrencyPipe, LocalizedCurrencyPipeOptions, LocalizedDateImpurePipe, LocalizedDatePipe, LocalizedNumberInputDirective, LocalizedNumberInputModule, LocalizedNumberPipe, LocalizedTimeImpurePipe, LocalizedTimePipe, LongPressDirective, LookupComponent, LookupField, MaskFormatterModule, MaskFormatterPipe, MouseEventsModule, NavigationButtonComponent, NavigationButtonModule, NavigationDirective, NumberAlignmentOption, NumberField, NumberInputDirective, NumberInputModule, NumberLocaleOptions, ObjectCardComponent, ObjectCardFieldComponent, ObjectCardMainComponent, ObjectCardModule, Option, Ordination, PanelComponent, PanelModule, PasswordField, PasswordStrengthComponent, PasswordStrengthDirective, PasswordStrengthModule, PasswordStrengthPositions, PasswordStrengths, ProductHeaderComponent, ProductHeaderModule, ProfilePicturePickerComponent, ProfilePicturePickerModule, ProgressBarColors, ProgressBarComponent, ProgressBarModule, RadioButtonField, RatingScaleComponent, RatingScaleModule, RationButtonOption, RowTogllerDirective, SVGFactoryDirective, SVGFactoryModule, Section, SelectButtonComponent, SelectButtonModule, SelectField, SelectOption, SidebarComponent, SidebarModule, SlidePanelComponent, SlidePanelModule, SplitButtonComponent, SplitButtonModule, SplitButtonType, StatsCardComponent, StatsCardModule, StepState, StepsComponent, StepsModule, Structure, SwitchComponent, SwitchModule, TableFrozenPositionDirective, TableHeaderCheckboxComponent, TableHeaderCheckboxModule, TableModule, TaxCalculationLanguageConfigs, TextAreaField, TextField, Themes, ThumbnailComponent, ThumbnailModule, ThumbnailSize, TieredMenuDirective, TieredMenuModule, TileComponent, TileModule, TimelineComponent, TimelineItem, TimelineItemSeverity, TimelineItemSize, TimelineModule, TokenListComponent, TokenListModule, TooltipModule, TooltipPosition, ValidateErrors, ViewMode, WorkspaceSwitchComponent, WorkspaceSwitchModule, convertToMomentDateFormat, countries, fallback, TooltipComponent as ɵa, TooltipDirective as ɵb, TextFieldComponent as ɵba, NumberFieldModule as ɵbb, LocalizedNumberInputModule as ɵbc, NumberInputModule as ɵbd, NumberFieldComponent as ɵbe, CurrencyFieldModule as ɵbf, CurrencyFieldComponent as ɵbg, NumberFieldModule$1 as ɵbh, BignumberInputModule as ɵbi, BignumberFieldComponent as ɵbj, ProfilePictureModule as ɵbk, ThumbnailService as ɵbl, StructureModule as ɵbm, HeaderComponent as ɵbn, FooterComponent as ɵbo, ProfilePictureFieldComponent as ɵbp, AutocompleteFieldComponent as ɵbq, BooleanFieldComponent as ɵbr, BooleanSwitchFieldComponent as ɵbs, CalendarFieldComponent as ɵbt, ChipsFieldComponent as ɵbu, CountryPhonePickerFieldComponent as ɵbv, DynamicFieldComponent as ɵbw, DynamicFormDirective as ɵbx, FieldsetComponent as ɵby, FileUploadComponent$1 as ɵbz, TemplateDirective as ɵc, LookupFieldComponent as ɵca, RadioButtonComponent as ɵcb, RowComponent as ɵcc, SectionComponent as ɵcd, SelectFieldComponent as ɵce, SliderFieldComponent as ɵcf, TextAreaFieldComponent as ɵcg, TextAreaIAFieldComponent as ɵch, IAssistService as ɵci, DecimalField as ɵck, SideTableComponent as ɵcl, InfiniteScrollModule as ɵcm, InfiniteScrollDirective as ɵcn, IAInsightSidebarComponent as ɵco, IAInsightCardComponent as ɵcp, IAInsightCardLoaderComponent as ɵcq, KanbanEventService as ɵcr, KanbanItemComponent as ɵcs, KanbanColumnComponent as ɵct, KanbanItemDraggingComponent as ɵcu, NumberLocaleOptions as ɵcv, TieredMenuEventService as ɵcw, TieredMenuService as ɵcx, TieredMenuGlobalService as ɵcy, TieredMenuComponent as ɵcz, TemplateModule as ɵd, TieredMenuNestedComponent as ɵda, TieredMenuItemComponent as ɵdb, TieredMenuDividerComponent as ɵdc, BorderButtonModule as ɵdd, BorderButtonComponent as ɵde, ProgressBarDeterminateComponent as ɵdf, ProgressBarIndeterminateComponent as ɵdg, SelectButtonItemComponent as ɵdh, SlidePanelService as ɵdi, TimelineItemModule as ɵdj, TimelineIconItemComponent as ɵdk, HorizontalTimelineModule as ɵdl, HorizontalTimelineComponent as ɵdm, VerticalTimelineModule as ɵdn, VerticalTimelineComponent as ɵdo, RangeLineComponent as ɵdp, CollapseOptionComponent as ɵdq, CollapsedItemsComponent as ɵdr, VerticalItemsComponent as ɵds, CustomTranslationsModule as ɵe, CodeEditorComponent as ɵf, CoreFacade as ɵg, CodeMirror6Core as ɵh, CountryPhonePickerService as ɵi, LocalizedCurrencyImpurePipe as ɵj, LocalizedBignumberPipe as ɵk, LocalizedBignumberImpurePipe as ɵl, NumericPipe as ɵm, NumericService as ɵn, EmptyStateGoBackComponent as ɵo, IAssistIconComponent as ɵp, SeniorIconComponent as ɵq, DotsIndicatorComponent as ɵr, LoadingIndicatorComponent as ɵs, FileUploadService as ɵt, InfoSignComponent as ɵu, TableColumnsComponent as ɵv, TablePagingComponent as ɵw, PasswordFieldModule as ɵx, PasswordFieldComponent as ɵy, TextFieldModule as ɵz };
 //# sourceMappingURL=seniorsistemas-angular-components.js.map