@seniorsistemas/angular-components 17.8.10 → 17.8.11

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

@@ -14867,2327 +14867,2436 @@
         return KanbanModule;
     }());
 
-    var ObjectCardFieldComponent = /** @class */ (function () {
-        function ObjectCardFieldComponent() {
-            this.id = "s-object-card-field-" + ObjectCardFieldComponent_1.nextId++;
-            this.buttonClick = new core.EventEmitter();
-        }
-        ObjectCardFieldComponent_1 = ObjectCardFieldComponent;
-        var ObjectCardFieldComponent_1;
-        ObjectCardFieldComponent.nextId = 0;
-        __decorate([
-            core.Input()
-        ], ObjectCardFieldComponent.prototype, "id", void 0);
-        __decorate([
-            core.Input()
-        ], ObjectCardFieldComponent.prototype, "imageSource", void 0);
-        __decorate([
-            core.Input()
-        ], ObjectCardFieldComponent.prototype, "imageAlt", void 0);
-        __decorate([
-            core.Input()
-        ], ObjectCardFieldComponent.prototype, "iconClass", void 0);
-        __decorate([
-            core.Input()
-        ], ObjectCardFieldComponent.prototype, "label", void 0);
+    var NavigationButtonComponent = /** @class */ (function () {
+        function NavigationButtonComponent() {
+            this.stepChanged = new core.EventEmitter();
+            this.currentIndex = 0;
+            this.isDisabled = false;
+            this.tieredMenuItems = [];
+        }
+        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([
             core.Input()
-        ], ObjectCardFieldComponent.prototype, "description", void 0);
+        ], NavigationButtonComponent.prototype, "steps", void 0);
         __decorate([
             core.Input()
-        ], ObjectCardFieldComponent.prototype, "buttonLabel", void 0);
+        ], NavigationButtonComponent.prototype, "defaultValue", void 0);
         __decorate([
             core.Input()
-        ], ObjectCardFieldComponent.prototype, "buttonModel", void 0);
+        ], NavigationButtonComponent.prototype, "tooltip", void 0);
         __decorate([
             core.Output()
-        ], ObjectCardFieldComponent.prototype, "buttonClick", void 0);
-        __decorate([
-            core.ContentChild(ThumbnailComponent, { static: true })
-        ], ObjectCardFieldComponent.prototype, "thumbnailComponent", void 0);
-        __decorate([
-            core.ViewChild(core.TemplateRef, { static: true })
-        ], ObjectCardFieldComponent.prototype, "content", void 0);
-        ObjectCardFieldComponent = ObjectCardFieldComponent_1 = __decorate([
+        ], NavigationButtonComponent.prototype, "stepChanged", void 0);
+        NavigationButtonComponent = NavigationButtonComponent_1 = __decorate([
             core.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: forms.NG_VALUE_ACCESSOR,
+                        useExisting: core.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 core.EventEmitter();
-            this._thumbnailSize = exports.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([
+            core.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 core.EventEmitter();
+            this.decrementCurrentItemEvent = new core.EventEmitter();
+            this.closeAllMenusEvent = new core.EventEmitter();
+            this.selectItemEvent = new core.EventEmitter();
+            this.openItemMenuEvent = new core.EventEmitter();
+            this.closeItemMenuEvent = new core.EventEmitter();
+            this.createMenuEvent = new core.EventEmitter();
+        }
+        TieredMenuEventService = __decorate([
+            core.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 = exports.ThumbnailSize.Small;
-            else
-                this.thumbnailSize = exports.ThumbnailSize.Medium;
+        TieredMenuItemComponent.prototype.onMouseLeave = function () {
+            window.clearTimeout(this._showTimeout);
         };
-        var ObjectCardMainComponent_1;
-        ObjectCardMainComponent.nextId = 0;
-        __decorate([
-            core.Input()
-        ], ObjectCardMainComponent.prototype, "id", void 0);
-        __decorate([
-            core.Input()
-        ], ObjectCardMainComponent.prototype, "imageSource", void 0);
-        __decorate([
-            core.Input()
-        ], ObjectCardMainComponent.prototype, "imageFallback", void 0);
-        __decorate([
-            core.Input()
-        ], ObjectCardMainComponent.prototype, "imageAlt", void 0);
-        __decorate([
-            core.Input()
-        ], ObjectCardMainComponent.prototype, "iconClass", void 0);
-        __decorate([
-            core.Input()
-        ], ObjectCardMainComponent.prototype, "hasThumbnail", void 0);
-        __decorate([
-            core.Input()
-        ], ObjectCardMainComponent.prototype, "hasDescription", void 0);
+        TieredMenuItemComponent.ctorParameters = function () { return [
+            { type: TieredMenuEventService }
+        ]; };
         __decorate([
             core.Input()
-        ], ObjectCardMainComponent.prototype, "isBrand", void 0);
+        ], TieredMenuItemComponent.prototype, "item", void 0);
         __decorate([
             core.Input()
-        ], ObjectCardMainComponent.prototype, "label", void 0);
+        ], TieredMenuItemComponent.prototype, "focused", void 0);
         __decorate([
             core.Input()
-        ], ObjectCardMainComponent.prototype, "description", void 0);
+        ], TieredMenuItemComponent.prototype, "highlight", void 0);
         __decorate([
             core.Input()
-        ], ObjectCardMainComponent.prototype, "buttonLabel", void 0);
+        ], TieredMenuItemComponent.prototype, "triggerEvent", void 0);
         __decorate([
             core.Input()
-        ], ObjectCardMainComponent.prototype, "buttonModel", void 0);
+        ], TieredMenuItemComponent.prototype, "closeOnClick", void 0);
         __decorate([
-            core.Output()
-        ], ObjectCardMainComponent.prototype, "buttonClick", void 0);
+            core.HostListener("click"),
+            core.HostListener("touchend")
+        ], TieredMenuItemComponent.prototype, "onClick", null);
         __decorate([
-            core.ContentChild(ThumbnailComponent, { static: true })
-        ], ObjectCardMainComponent.prototype, "thumbnailComponent", void 0);
+            core.HostListener("mouseenter")
+        ], TieredMenuItemComponent.prototype, "onMouseEnter", null);
         __decorate([
-            core.HostListener("window:resize")
-        ], ObjectCardMainComponent.prototype, "onResize", null);
-        ObjectCardMainComponent = ObjectCardMainComponent_1 = __decorate([
+            core.HostListener("mouseleave")
+        ], TieredMenuItemComponent.prototype, "onMouseLeave", null);
+        TieredMenuItemComponent = __decorate([
             core.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;
     }());
 
-
-    (function (EnumSeverity) {
-        EnumSeverity["Default"] = "Default";
-        EnumSeverity["Info"] = "Info";
-        EnumSeverity["Warn"] = "Warn";
-        EnumSeverity["Error"] = "Error";
-        EnumSeverity["Success"] = "Success";
-    })(exports.EnumSeverity || (exports.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 core.EventEmitter();
-            this.maxVisibleFields = 0;
-            this.severity = exports.EnumSeverity.Default;
-            this.EnumSeverity = exports.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();
-            });
-            var erd = elementResizeDetectorMaker({
-                strategy: "scroll",
+            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;
             });
-            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.markAllItemsAsClosed = function (items) {
+            var _this = this;
+            return items.map(function (i) {
+                var item = __assign({}, i);
+                if (item.submenu) {
+                    item.submenu = _this.markAllItemsAsClosed(item.submenu);
                 }
-            }
-            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);
+                item.isOpen = false;
+                return item;
+            });
+        };
+        TieredMenuService.prototype.searchTheHierarchy = function (itemA, itemB) {
+            var item = itemB;
+            while (item) {
+                if (item === itemA) {
+                    return true;
                 }
-                finally { if (e_1) throw e_1.error; }
+                item = item.parent;
             }
-            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);
+            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([
+            core.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 rxjs.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();
             }
-            this.maxVisibleFields = maxFieldQtd;
-            if (maxFieldQtd >= this.fields.length && this.expanded)
-                this.collapse();
         };
-        ObjectCardComponent.prototype.toggle = function () {
-            this.expanded ? this.collapse() : this.expand();
+        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;
+            }
         };
-        ObjectCardComponent.prototype.expand = function () {
-            this.expanded = true;
-            this.expandedChange.emit(this.expanded);
+        TieredMenuNestedComponent.prototype.ngOnInit = function () {
+            this.tieredMenuService.currentItems = this.items;
+            this._subscribeEvents();
         };
-        ObjectCardComponent.prototype.collapse = function () {
-            this.expanded = false;
-            this.expandedChange.emit(this.expanded);
+        TieredMenuNestedComponent.prototype.ngOnDestroy = function () {
+            this._unsubscribe$.next();
+            this._unsubscribe$.complete();
         };
-        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._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();
+            }
         };
-        var ObjectCardComponent_1;
-        ObjectCardComponent.nextId = 0;
-        ObjectCardComponent.ctorParameters = function () { return [
-            { type: core.ChangeDetectorRef },
-            { type: core.ElementRef }
+        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();
+            }
+        };
+        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(operators.takeUntil(this._unsubscribe$))
+                .subscribe(function () {
+                _this._incrementCurItem();
+            });
+            this._tieredMenuEventService.decrementCurrentItemEvent
+                .pipe(operators.takeUntil(this._unsubscribe$))
+                .subscribe(function () {
+                _this._decrementCurItem();
+            });
+            this._tieredMenuEventService.selectItemEvent
+                .pipe(operators.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(operators.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(operators.takeUntil(this._unsubscribe$))
+                .subscribe(function (item) {
+                if (item) {
+                    _this._closeItem(item);
+                }
+            });
+        };
+        TieredMenuNestedComponent.ctorParameters = function () { return [
+            { type: TieredMenuService },
+            { type: TieredMenuEventService }
         ]; };
         __decorate([
-            core.Input()
-        ], ObjectCardComponent.prototype, "id", void 0);
-        __decorate([
-            core.Input()
-        ], ObjectCardComponent.prototype, "expanded", void 0);
-        __decorate([
-            core.Input()
-        ], ObjectCardComponent.prototype, "expandTooltip", void 0);
-        __decorate([
-            core.Input()
-        ], ObjectCardComponent.prototype, "collapseTooltip", void 0);
+            core.HostListener("window:resize")
+        ], TieredMenuNestedComponent.prototype, "onResize", null);
         __decorate([
-            core.Input()
-        ], ObjectCardComponent.prototype, "fieldsMinWidth", void 0);
+            core.HostListener("document:click", ["$event"])
+        ], TieredMenuNestedComponent.prototype, "onDocumentClick", null);
         __decorate([
-            core.Output()
-        ], ObjectCardComponent.prototype, "expandedChange", void 0);
-        __decorate([
-            core.ContentChild(ObjectCardMainComponent, { static: true })
-        ], ObjectCardComponent.prototype, "main", void 0);
-        __decorate([
-            core.ContentChildren(ObjectCardFieldComponent, { descendants: true })
-        ], ObjectCardComponent.prototype, "fields", void 0);
-        __decorate([
-            core.Input()
-        ], ObjectCardComponent.prototype, "severity", void 0);
-        __decorate([
-            core.Input()
-        ], ObjectCardComponent.prototype, "borderButtonOptions", void 0);
-        ObjectCardComponent = ObjectCardComponent_1 = __decorate([
-            core.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: [
-                    animations.trigger("expandableContent", [
-                        animations.state("*", animations.style({
-                            height: "0",
-                        })),
-                        animations.state("false", animations.style({
-                            height: "0",
-                        })),
-                        animations.state("true", animations.style({
-                            height: "*",
-                        })),
-                        animations.transition("* => true", animations.animate("200ms ease-out")),
-                        animations.transition("false <=> true", animations.animate("200ms ease-out")),
-                    ]),
-                    animations.trigger("BorderButtonAnimation", [
-                        animations.transition(":enter", [
-                            animations.style({ transform: "scaleY(0)", opacity: 0 }),
-                            animations.animate("300ms ease", animations.style({ transform: "scaleY(1)", opacity: 1 })),
-                        ]),
-                        animations.transition(":leave", [
-                            animations.style({ transform: "scaleY(1)", opacity: 1 }),
-                            animations.animate("300ms ease", animations.style({ 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 = exports.EnumSeverity.Default;
-            this.EnumSeverity = exports.EnumSeverity;
-            this.TooltipPosition = exports.TooltipPosition;
-        }
-        __decorate([
-            core.Input()
-        ], BorderButtonComponent.prototype, "severity", void 0);
-        __decorate([
-            core.Input()
-        ], BorderButtonComponent.prototype, "options", void 0);
-        BorderButtonComponent = __decorate([
+            core.HostListener("document:keydown", ["$event"])
+        ], TieredMenuNestedComponent.prototype, "onKeydownHandler", null);
+        TieredMenuNestedComponent = __decorate([
             core.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([
-            core.NgModule({
-                imports: [common.CommonModule, TooltipModule],
-                declarations: [BorderButtonComponent],
-                exports: [BorderButtonComponent]
-            })
-        ], BorderButtonModule);
-        return BorderButtonModule;
-    }());
-
-    var ObjectCardModule = /** @class */ (function () {
-        function ObjectCardModule() {
-        }
-        ObjectCardModule = __decorate([
-            core.NgModule({
-                imports: [common.CommonModule, tooltip.TooltipModule, ThumbnailModule, ButtonModule, BorderButtonModule],
-                declarations: [ObjectCardComponent, ObjectCardMainComponent, ObjectCardFieldComponent],
-                exports: [ThumbnailModule, ObjectCardComponent, ObjectCardMainComponent, ObjectCardFieldComponent],
+                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}"]
             })
-        ], ObjectCardModule);
-        return ObjectCardModule;
+        ], TieredMenuNestedComponent);
+        return TieredMenuNestedComponent;
     }());
 
-    var ProductHeaderComponent = /** @class */ (function () {
-        function ProductHeaderComponent() {
-            this.id = "s-product-header-" + ProductHeaderComponent_1.nextId++;
-            this.baseZIndex = 0;
-            this.isHeaderFrame = true;
+    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 rxjs.Subject();
+            this.destroyRequest = new core.EventEmitter();
         }
-        ProductHeaderComponent_1 = ProductHeaderComponent;
-        ProductHeaderComponent.prototype.ngAfterViewInit = function () {
-            this.container.nativeElement.style.zIndex = String(this.baseZIndex + ++dom.DomHandler.zindex);
-            if (this.isHeaderFrame) {
-                this.container.nativeElement.style.borderBottom = "1px solid $default-secondary-color";
+        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();
             }
-            else {
-                this.container.nativeElement.style.borderTop = "1px solid $default-secondary-color";
+        };
+        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;
             }
         };
-        var ProductHeaderComponent_1;
-        ProductHeaderComponent.nextId = 0;
-        __decorate([
-            core.Input()
-        ], ProductHeaderComponent.prototype, "id", void 0);
-        __decorate([
-            core.Input()
-        ], ProductHeaderComponent.prototype, "header", void 0);
-        __decorate([
-            core.Input()
-        ], ProductHeaderComponent.prototype, "baseZIndex", void 0);
-        __decorate([
-            core.Input()
-        ], ProductHeaderComponent.prototype, "isHeaderFrame", void 0);
-        __decorate([
-            core.ViewChild("headerContainer", { static: false })
-        ], ProductHeaderComponent.prototype, "container", void 0);
-        ProductHeaderComponent = ProductHeaderComponent_1 = __decorate([
-            core.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([
-            core.NgModule({
-                imports: [common.CommonModule, tooltip.TooltipModule, ThumbnailModule],
-                declarations: [ProductHeaderComponent],
-                exports: [ProductHeaderComponent, ThumbnailModule],
-            })
-        ], ProductHeaderModule);
-        return ProductHeaderModule;
-    }());
-
-
-    (function (ProgressBarColors) {
-        ProgressBarColors["Blue"] = "blue";
-        ProgressBarColors["Green"] = "green";
-        ProgressBarColors["Red"] = "red";
-        ProgressBarColors["Yellow"] = "yellow";
-    })(exports.ProgressBarColors || (exports.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();
+        TieredMenuComponent.prototype.ngOnInit = function () {
+            this.tieredMenuService.currentItems = this.items;
+            this._subscribeEvents();
         };
-        ProgressBarComponent.prototype.validateInputs = function () {
-            if (this.value < 0 || this.value > 100) {
-                throw new Error("Invalid value for value");
+        TieredMenuComponent.prototype.ngOnDestroy = function () {
+            this._unsubscribe$.next();
+            this._unsubscribe$.complete();
+        };
+        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;
             }
-            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 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();
             }
         };
-        __decorate([
-            core.Input()
-        ], ProgressBarComponent.prototype, "value", void 0);
-        __decorate([
-            core.Input()
-        ], ProgressBarComponent.prototype, "numberFormatOptions", void 0);
-        __decorate([
-            core.Input()
-        ], ProgressBarComponent.prototype, "targetValue", void 0);
-        __decorate([
-            core.Input()
-        ], ProgressBarComponent.prototype, "label", void 0);
-        __decorate([
-            core.Input()
-        ], ProgressBarComponent.prototype, "targetLabel", void 0);
-        __decorate([
-            core.Input()
-        ], ProgressBarComponent.prototype, "activeColor", void 0);
-        __decorate([
-            core.Input()
-        ], ProgressBarComponent.prototype, "showValue", void 0);
-        __decorate([
-            core.Input()
-        ], ProgressBarComponent.prototype, "mode", void 0);
-        ProgressBarComponent = __decorate([
-            core.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._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();
+            }
         };
-        ProgressBarDeterminateComponent.prototype.onGetLocale = function () {
+        TieredMenuComponent.prototype._createMenu = function (items, position) {
             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);
-                },
-            });
+            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);
+            }
         };
-        ProgressBarDeterminateComponent.prototype.validateValues = function () {
-            if (this.value < 0 || this.value > 100) {
-                throw new Error("Invalid value for value");
+        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 (this.targetValue < 0 || this.targetValue > 100) {
-                throw new Error("Invalid value for targetValue");
+            if (propagate) {
+                this.destroyRequest.emit();
             }
         };
-        ProgressBarDeterminateComponent.ctorParameters = function () { return [
-            { type: LocaleService }
-        ]; };
-        __decorate([
-            core.Input()
-        ], ProgressBarDeterminateComponent.prototype, "value", void 0);
-        __decorate([
-            core.Input()
-        ], ProgressBarDeterminateComponent.prototype, "numberFormatOptions", void 0);
-        __decorate([
-            core.Input()
-        ], ProgressBarDeterminateComponent.prototype, "targetValue", void 0);
-        __decorate([
-            core.Input()
-        ], ProgressBarDeterminateComponent.prototype, "targetLabel", void 0);
-        __decorate([
-            core.Input()
-        ], ProgressBarDeterminateComponent.prototype, "activeColor", void 0);
-        __decorate([
-            core.Input()
-        ], ProgressBarDeterminateComponent.prototype, "showValue", void 0);
-        ProgressBarDeterminateComponent = __decorate([
-            core.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([
-            core.Input()
-        ], ProgressBarIndeterminateComponent.prototype, "activeColor", void 0);
-        __decorate([
-            core.Input()
-        ], ProgressBarIndeterminateComponent.prototype, "label", void 0);
-        ProgressBarIndeterminateComponent = __decorate([
-            core.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([
-            core.NgModule({
-                imports: [common.CommonModule],
-                declarations: [
-                    ProgressBarComponent,
-                    ProgressBarDeterminateComponent,
-                    ProgressBarIndeterminateComponent,
-                ],
-                exports: [ProgressBarComponent],
-            })
-        ], ProgressBarModule);
-        return ProgressBarModule;
-    }());
-
-    var PanelComponent = /** @class */ (function () {
-        function PanelComponent() {
-            this.toggleable = true;
-            this.collapsed = false;
-            this.severity = exports.EnumSeverity.Default;
-            this.collapsedChange = new core.EventEmitter();
-            this.EnumSeverity = exports.EnumSeverity;
-        }
-        PanelComponent.prototype.onCollapsedChange = function (collapsed) {
-            this.collapsed = collapsed;
-            this.collapsedChange.emit(this.collapsed);
-        };
-        __decorate([
-            core.Input()
-        ], PanelComponent.prototype, "header", void 0);
-        __decorate([
-            core.Input()
-        ], PanelComponent.prototype, "toggleable", void 0);
-        __decorate([
-            core.Input()
-        ], PanelComponent.prototype, "collapsed", void 0);
-        __decorate([
-            core.Input()
-        ], PanelComponent.prototype, "severity", void 0);
-        __decorate([
-            core.Input()
-        ], PanelComponent.prototype, "borderButtonOptions", void 0);
-        __decorate([
-            core.Output()
-        ], PanelComponent.prototype, "collapsedChange", void 0);
-        PanelComponent = __decorate([
-            core.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: [
-                    animations.trigger("BorderButtonAnimation", [
-                        animations.transition(":enter", [
-                            animations.style({ transform: "scaleY(0)", opacity: 0 }),
-                            animations.animate("300ms ease", animations.style({ transform: "scaleY(1)", opacity: 1 })),
-                        ]),
-                        animations.transition(":leave", [
-                            animations.style({ transform: "scaleY(1)", opacity: 1 }),
-                            animations.animate("300ms ease", animations.style({ 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([
-            core.NgModule({
-                imports: [common.CommonModule, panel.PanelModule, 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._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;
+                }
             }
         };
-        RatingScaleComponent.prototype.registerOnChange = function (onChange) {
-            this._onChange = onChange;
-        };
-        RatingScaleComponent.prototype.registerOnTouched = function (onTouched) {
-            this._onTouched = onTouched;
-        };
-        RatingScaleComponent.prototype.onSelect = function (rating) {
-            this.value = rating;
-            if (this._onChange) {
-                this._onChange(this.value);
-            }
+        TieredMenuComponent.prototype._subscribeEvents = function () {
+            var _this = this;
+            // Increment current item event.
+            this._tieredMenuEventService.incrementCurrentItemEvent.pipe(operators.takeUntil(this._unsubscribe$)).subscribe(function () {
+                _this._incrementCurItem();
+            });
+            // Decrement current item event.
+            this._tieredMenuEventService.decrementCurrentItemEvent.pipe(operators.takeUntil(this._unsubscribe$)).subscribe(function () {
+                _this._decrementCurItem();
+            });
+            // Select item event.
+            this._tieredMenuEventService.selectItemEvent.pipe(operators.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(operators.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(operators.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(operators.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 RatingScaleComponent_1;
+        var TieredMenuComponent_1;
+        TieredMenuComponent.ctorParameters = function () { return [
+            { type: core.ApplicationRef },
+            { type: core.ComponentFactoryResolver },
+            { type: core.Injector },
+            { type: core.ChangeDetectorRef },
+            { type: TieredMenuService },
+            { type: TieredMenuEventService }
+        ]; };
         __decorate([
-            core.Input()
-        ], RatingScaleComponent.prototype, "nodes", void 0);
+            core.Output()
+        ], TieredMenuComponent.prototype, "destroyRequest", void 0);
         __decorate([
-            core.Input()
-        ], RatingScaleComponent.prototype, "startLabel", void 0);
+            core.HostListener("window:resize")
+        ], TieredMenuComponent.prototype, "onResize", null);
         __decorate([
-            core.Input()
-        ], RatingScaleComponent.prototype, "endLabel", void 0);
+            core.HostListener("document:click", ["$event"])
+        ], TieredMenuComponent.prototype, "onDocumentClick", null);
         __decorate([
-            core.Input()
-        ], RatingScaleComponent.prototype, "disabled", void 0);
-        RatingScaleComponent = RatingScaleComponent_1 = __decorate([
+            core.HostListener("document:keydown", ["$event"])
+        ], TieredMenuComponent.prototype, "onKeydownHandler", null);
+        TieredMenuComponent = TieredMenuComponent_1 = __decorate([
             core.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: forms.NG_VALUE_ACCESSOR,
-                        useExisting: core.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([
-            core.NgModule({
-                imports: [
-                    common.CommonModule,
-                    forms.ReactiveFormsModule,
-                ],
-                declarations: [RatingScaleComponent],
-                exports: [RatingScaleComponent],
-            })
-        ], RatingScaleModule);
-        return RatingScaleModule;
+        TieredMenuGlobalService = __decorate([
+            core.Injectable()
+        ], TieredMenuGlobalService);
+        return TieredMenuGlobalService;
     }());
 
-    var SelectButtonComponent = /** @class */ (function () {
-        function SelectButtonComponent() {
-            this.multiple = false;
-            this.itemSelected = new core.EventEmitter();
-            this.itemClicked = new core.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 rxjs.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(operators.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;
+        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);
                 }
-                var keysA = Object.keys(a);
-                var keysB = Object.keys(b);
-                if (keysA.length !== keysB.length) {
-                    return false;
+                else {
+                    this._componentRef.instance.top = window.scrollY + bottom + MARGIN;
                 }
-                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;
-                        }
-                    }
+                if (rightFreeSpace > 176) {
+                    this._componentRef.instance.left = window.scrollX + left;
                 }
-                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; }
+                else {
+                    this._componentRef.instance.left = window.scrollX + right - ITEM_WIDTH;
                 }
-                for (var key in a) {
-                    if (a.hasOwnProperty(key) !== b.hasOwnProperty(key)) {
-                        return false;
-                    }
+                if (this._isNested) {
+                    this._componentRef.instance.left = MARGIN;
                 }
-                return true;
-            };
-            return _compare(item1, item2);
+            }
         };
-        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(operators.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: core.ElementRef },
+            { type: core.ApplicationRef },
+            { type: core.ComponentFactoryResolver },
+            { type: core.Injector },
+            { type: TieredMenuEventService },
+            { type: TieredMenuService },
+            { type: TieredMenuGlobalService },
+            { type: core.ChangeDetectorRef }
+        ]; };
         __decorate([
             core.Input()
-        ], SelectButtonComponent.prototype, "items", void 0);
+        ], TieredMenuDirective.prototype, "items", void 0);
         __decorate([
             core.Input()
-        ], SelectButtonComponent.prototype, "multiple", void 0);
-        __decorate([
-            core.Output()
-        ], SelectButtonComponent.prototype, "itemSelected", void 0);
+        ], TieredMenuDirective.prototype, "triggerEvent", void 0);
         __decorate([
-            core.Output()
-        ], SelectButtonComponent.prototype, "itemClicked", void 0);
-        SelectButtonComponent = SelectButtonComponent_1 = __decorate([
-            core.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: forms.NG_VALUE_ACCESSOR,
-                        useExisting: core.forwardRef(function () { return SelectButtonComponent_1; }),
-                        multi: true,
-                    },
+            core.HostListener("click", ["$event"])
+        ], TieredMenuDirective.prototype, "onClick", null);
+        TieredMenuDirective = __decorate([
+            core.Directive({
+                selector: "[sTieredMenu]",
+                providers: [TieredMenuEventService, TieredMenuService],
+            })
+        ], TieredMenuDirective);
+        return TieredMenuDirective;
+    }());
+
+    var TieredMenuModule = /** @class */ (function () {
+        function TieredMenuModule() {
+        }
+        TieredMenuModule = __decorate([
+            core.NgModule({
+                imports: [
+                    common.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([
+            core.NgModule({
+                imports: [common.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 core.EventEmitter();
         }
+        ObjectCardFieldComponent_1 = ObjectCardFieldComponent;
+        var ObjectCardFieldComponent_1;
+        ObjectCardFieldComponent.nextId = 0;
         __decorate([
             core.Input()
-        ], SelectButtonItemComponent.prototype, "label", void 0);
+        ], ObjectCardFieldComponent.prototype, "id", void 0);
         __decorate([
             core.Input()
-        ], SelectButtonItemComponent.prototype, "active", void 0);
+        ], ObjectCardFieldComponent.prototype, "imageSource", void 0);
         __decorate([
             core.Input()
-        ], SelectButtonItemComponent.prototype, "first", void 0);
+        ], ObjectCardFieldComponent.prototype, "imageAlt", void 0);
         __decorate([
             core.Input()
-        ], SelectButtonItemComponent.prototype, "last", void 0);
+        ], ObjectCardFieldComponent.prototype, "iconClass", void 0);
         __decorate([
             core.Input()
-        ], SelectButtonItemComponent.prototype, "disabled", void 0);
-        SelectButtonItemComponent = __decorate([
+        ], ObjectCardFieldComponent.prototype, "label", void 0);
+        __decorate([
+            core.Input()
+        ], ObjectCardFieldComponent.prototype, "description", void 0);
+        __decorate([
+            core.Input()
+        ], ObjectCardFieldComponent.prototype, "buttonLabel", void 0);
+        __decorate([
+            core.Input()
+        ], ObjectCardFieldComponent.prototype, "buttonModel", void 0);
+        __decorate([
+            core.Output()
+        ], ObjectCardFieldComponent.prototype, "buttonClick", void 0);
+        __decorate([
+            core.ContentChild(ThumbnailComponent, { static: true })
+        ], ObjectCardFieldComponent.prototype, "thumbnailComponent", void 0);
+        __decorate([
+            core.ViewChild(core.TemplateRef, { static: true })
+        ], ObjectCardFieldComponent.prototype, "content", void 0);
+        ObjectCardFieldComponent = ObjectCardFieldComponent_1 = __decorate([
             core.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([
-            core.NgModule({
-                imports: [common.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 core.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 core.EventEmitter();
+            this._thumbnailSize = exports.ThumbnailSize.Medium;
         }
-        SidebarComponent_1 = SidebarComponent;
-        SidebarComponent.prototype.onShow = function () {
-            dom.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 () {
-            dom.DomHandler.removeClass(document.body, "ui-overflow-hidden-sidebar");
+        ObjectCardMainComponent.prototype.ngAfterContentInit = function () {
+            this.update();
         };
-        SidebarComponent.prototype.close = function (event) {
-            dom.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 = exports.ThumbnailSize.Small;
+            else
+                this.thumbnailSize = exports.ThumbnailSize.Medium;
         };
-        var SidebarComponent_1;
-        SidebarComponent.nextId = 0;
-        SidebarComponent.ctorParameters = function () { return [
-            { type: a11y.FocusTrapFactory }
-        ]; };
+        var ObjectCardMainComponent_1;
+        ObjectCardMainComponent.nextId = 0;
         __decorate([
             core.Input()
-        ], SidebarComponent.prototype, "id", void 0);
+        ], ObjectCardMainComponent.prototype, "id", void 0);
         __decorate([
             core.Input()
-        ], SidebarComponent.prototype, "visible", void 0);
+        ], ObjectCardMainComponent.prototype, "imageSource", void 0);
         __decorate([
             core.Input()
-        ], SidebarComponent.prototype, "header", void 0);
+        ], ObjectCardMainComponent.prototype, "imageFallback", void 0);
         __decorate([
             core.Input()
-        ], SidebarComponent.prototype, "baseZIndex", void 0);
+        ], ObjectCardMainComponent.prototype, "imageAlt", void 0);
+        __decorate([
+            core.Input()
+        ], ObjectCardMainComponent.prototype, "iconClass", void 0);
+        __decorate([
+            core.Input()
+        ], ObjectCardMainComponent.prototype, "hasThumbnail", void 0);
+        __decorate([
+            core.Input()
+        ], ObjectCardMainComponent.prototype, "hasDescription", void 0);
+        __decorate([
+            core.Input()
+        ], ObjectCardMainComponent.prototype, "isBrand", void 0);
+        __decorate([
+            core.Input()
+        ], ObjectCardMainComponent.prototype, "label", void 0);
+        __decorate([
+            core.Input()
+        ], ObjectCardMainComponent.prototype, "description", void 0);
+        __decorate([
+            core.Input()
+        ], ObjectCardMainComponent.prototype, "buttonLabel", void 0);
         __decorate([
             core.Input()
-        ], SidebarComponent.prototype, "largeSized", void 0);
+        ], ObjectCardMainComponent.prototype, "buttonModel", void 0);
         __decorate([
             core.Output()
-        ], SidebarComponent.prototype, "visibleChange", void 0);
-        __decorate([
-            core.ViewChild(sidebar.Sidebar, { static: true })
-        ], SidebarComponent.prototype, "innerSidebar", void 0);
+        ], ObjectCardMainComponent.prototype, "buttonClick", void 0);
         __decorate([
-            core.ContentChild(HeaderComponent, { static: true })
-        ], SidebarComponent.prototype, "headerSection", void 0);
+            core.ContentChild(ThumbnailComponent, { static: true })
+        ], ObjectCardMainComponent.prototype, "thumbnailComponent", void 0);
         __decorate([
-            core.ContentChild(FooterComponent, { static: true })
-        ], SidebarComponent.prototype, "footerSection", void 0);
-        SidebarComponent = SidebarComponent_1 = __decorate([
+            core.HostListener("window:resize")
+        ], ObjectCardMainComponent.prototype, "onResize", null);
+        ObjectCardMainComponent = ObjectCardMainComponent_1 = __decorate([
             core.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: core.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}"]
+                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}}"]
             })
-        ], SidebarComponent);
-        return SidebarComponent;
+        ], ObjectCardMainComponent);
+        return ObjectCardMainComponent;
     }());
 
-    var SidebarModule = /** @class */ (function () {
-        function SidebarModule() {
-        }
-        SidebarModule = __decorate([
-            core.NgModule({
-                imports: [common.CommonModule, a11y.A11yModule, sidebar.SidebarModule, scrollpanel.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 rxjs.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([
-            core.Injectable()
-        ], SlidePanelService);
-        return SlidePanelService;
-    }());
+    (function (EnumSeverity) {
+        EnumSeverity["Default"] = "Default";
+        EnumSeverity["Info"] = "Info";
+        EnumSeverity["Warn"] = "Warn";
+        EnumSeverity["Error"] = "Error";
+        EnumSeverity["Success"] = "Success";
+    })(exports.EnumSeverity || (exports.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 core.EventEmitter();
-            this.panelClosed = new core.EventEmitter();
-            this.isOpen = false;
-            this.isSlideOver = false;
-            this.isAnimating = false;
-            this.isContentAnimationDisabled = true;
-            this.slideHeight = 0;
-            this.sideContentWidth = 0;
-            this._unsubscribe$ = new rxjs.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 core.EventEmitter();
+            this.maxVisibleFields = 0;
+            this.severity = exports.EnumSeverity.Default;
+            this.EnumSeverity = exports.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(operators.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: core.ChangeDetectorRef },
+            { type: core.ElementRef }
         ]; };
         __decorate([
             core.Input()
-        ], SlidePanelComponent.prototype, "id", void 0);
+        ], ObjectCardComponent.prototype, "id", void 0);
         __decorate([
             core.Input()
-        ], SlidePanelComponent.prototype, "openIcon", void 0);
+        ], ObjectCardComponent.prototype, "expanded", void 0);
         __decorate([
             core.Input()
-        ], SlidePanelComponent.prototype, "closeIcon", void 0);
+        ], ObjectCardComponent.prototype, "expandTooltip", void 0);
         __decorate([
             core.Input()
-        ], SlidePanelComponent.prototype, "cache", void 0);
+        ], ObjectCardComponent.prototype, "collapseTooltip", void 0);
         __decorate([
             core.Input()
-        ], SlidePanelComponent.prototype, "createOpen", void 0);
-        __decorate([
-            core.Output()
-        ], SlidePanelComponent.prototype, "panelOpened", void 0);
+        ], ObjectCardComponent.prototype, "fieldsMinWidth", void 0);
         __decorate([
             core.Output()
-        ], SlidePanelComponent.prototype, "panelClosed", void 0);
+        ], ObjectCardComponent.prototype, "expandedChange", void 0);
         __decorate([
-            core.ViewChild("slidePanel")
-        ], SlidePanelComponent.prototype, "_slidePanelRef", void 0);
+            core.ContentChild(ObjectCardMainComponent, { static: true })
+        ], ObjectCardComponent.prototype, "main", void 0);
         __decorate([
-            core.ViewChild("slideContent")
-        ], SlidePanelComponent.prototype, "_slideContentRef", void 0);
+            core.ContentChildren(ObjectCardFieldComponent, { descendants: true })
+        ], ObjectCardComponent.prototype, "fields", void 0);
         __decorate([
-            core.ViewChild("sideContent")
-        ], SlidePanelComponent.prototype, "_sideContentRef", void 0);
+            core.Input()
+        ], ObjectCardComponent.prototype, "severity", void 0);
         __decorate([
-            core.HostListener("window:resize")
-        ], SlidePanelComponent.prototype, "onResize", null);
-        SlidePanelComponent = SlidePanelComponent_1 = __decorate([
+            core.Input()
+        ], ObjectCardComponent.prototype, "borderButtonOptions", void 0);
+        ObjectCardComponent = ObjectCardComponent_1 = __decorate([
             core.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: [
-                    animations.trigger("cachelessAnimation", [
+                    animations.trigger("expandableContent", [
+                        animations.state("*", animations.style({
+                            height: "0",
+                        })),
+                        animations.state("false", animations.style({
+                            height: "0",
+                        })),
+                        animations.state("true", animations.style({
+                            height: "*",
+                        })),
+                        animations.transition("* => true", animations.animate("200ms ease-out")),
+                        animations.transition("false <=> true", animations.animate("200ms ease-out")),
+                    ]),
+                    animations.trigger("BorderButtonAnimation", [
                         animations.transition(":enter", [
-                            animations.style({ width: "0" }),
-                            animations.animate("200ms linear", animations.style({ width: "*" })),
+                            animations.style({ transform: "scaleY(0)", opacity: 0 }),
+                            animations.animate("300ms ease", animations.style({ transform: "scaleY(1)", opacity: 1 })),
                         ]),
                         animations.transition(":leave", [
-                            animations.style({ width: "*" }),
-                            animations.animate("200ms linear", animations.style({ width: "0" })),
+                            animations.style({ transform: "scaleY(1)", opacity: 1 }),
+                            animations.animate("300ms ease", animations.style({ transform: "scaleY(0)", opacity: 0 })),
                         ]),
                     ]),
-                    animations.trigger("cacheAnimation", [
-                        animations.state("true", animations.style({ width: "*", padding: '0 16px' })),
-                        animations.state("false", animations.style({ width: '0px', padding: '0' })),
-                        animations.transition("* => *", animations.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 = exports.EnumSeverity.Default;
+            this.EnumSeverity = exports.EnumSeverity;
+            this.TooltipPosition = exports.TooltipPosition;
         }
-        SlidePanelModule = __decorate([
-            core.NgModule({
-                imports: [common.CommonModule],
-                declarations: [SlidePanelComponent],
-                exports: [SlidePanelComponent],
-                providers: [SlidePanelService],
+        __decorate([
+            core.Input()
+        ], BorderButtonComponent.prototype, "severity", void 0);
+        __decorate([
+            core.Input()
+        ], BorderButtonComponent.prototype, "options", void 0);
+        BorderButtonComponent = __decorate([
+            core.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}"]
             })
-        ], SlidePanelModule);
-        return SlidePanelModule;
+        ], BorderButtonComponent);
+        return BorderButtonComponent;
     }());
 
+    var BorderButtonModule = /** @class */ (function () {
+        function BorderButtonModule() {
+        }
+        BorderButtonModule = __decorate([
+            core.NgModule({
+                imports: [common.CommonModule, TooltipModule],
+                declarations: [BorderButtonComponent],
+                exports: [BorderButtonComponent]
+            })
+        ], BorderButtonModule);
+        return BorderButtonModule;
+    }());
 
-    (function (SplitButtonType) {
-        SplitButtonType["Primary"] = "primary";
-        SplitButtonType["Secondary"] = "secondary";
-        SplitButtonType["Default"] = "default";
-    })(exports.SplitButtonType || (exports.SplitButtonType = {}));
+    var ObjectCardModule = /** @class */ (function () {
+        function ObjectCardModule() {
+        }
+        ObjectCardModule = __decorate([
+            core.NgModule({
+                imports: [common.CommonModule, tooltip.TooltipModule, 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 = exports.SplitButtonType.Primary;
-            this.buttonClicked = new core.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 + ++dom.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: core.ElementRef }
-        ]; };
-        __decorate([
-            core.Input()
-        ], SplitButtonComponent.prototype, "disabled", void 0);
+        var ProductHeaderComponent_1;
+        ProductHeaderComponent.nextId = 0;
         __decorate([
             core.Input()
-        ], SplitButtonComponent.prototype, "iconClass", void 0);
+        ], ProductHeaderComponent.prototype, "id", void 0);
         __decorate([
             core.Input()
-        ], SplitButtonComponent.prototype, "label", void 0);
+        ], ProductHeaderComponent.prototype, "header", void 0);
         __decorate([
             core.Input()
-        ], SplitButtonComponent.prototype, "type", void 0);
+        ], ProductHeaderComponent.prototype, "baseZIndex", void 0);
         __decorate([
             core.Input()
-        ], SplitButtonComponent.prototype, "options", void 0);
-        __decorate([
-            core.Output()
-        ], SplitButtonComponent.prototype, "buttonClicked", void 0);
+        ], ProductHeaderComponent.prototype, "isHeaderFrame", void 0);
         __decorate([
-            core.HostListener("document:click", ["$event"])
-        ], SplitButtonComponent.prototype, "onClickout", null);
-        SplitButtonComponent = __decorate([
+            core.ViewChild("headerContainer", { static: false })
+        ], ProductHeaderComponent.prototype, "container", void 0);
+        ProductHeaderComponent = ProductHeaderComponent_1 = __decorate([
             core.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([
-            core.NgModule({
-                imports: [common.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 core.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.BigNumber(this.ANIMATION_DURATION_MS);
-            var stepDuration = new BigNumber.BigNumber(this.STEP_DURATION_MS);
-            var animationCount = animationDuration.dividedBy(stepDuration);
-            var previousRawValue = new BigNumber.BigNumber(this.previousValue.replace(/\D/g, ""));
-            var rawValue = new BigNumber.BigNumber(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([
+            core.NgModule({
+                imports: [common.CommonModule, tooltip.TooltipModule, ThumbnailModule],
+                declarations: [ProductHeaderComponent],
+                exports: [ProductHeaderComponent, ThumbnailModule],
             })
-                .join("");
+        ], ProductHeaderModule);
+        return ProductHeaderModule;
+    }());
+
+
+    (function (ProgressBarColors) {
+        ProgressBarColors["Blue"] = "blue";
+        ProgressBarColors["Green"] = "green";
+        ProgressBarColors["Red"] = "red";
+        ProgressBarColors["Yellow"] = "yellow";
+    })(exports.ProgressBarColors || (exports.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([
             core.Input()
-        ], StatsCardComponent.prototype, "id", void 0);
+        ], ProgressBarComponent.prototype, "value", void 0);
         __decorate([
             core.Input()
-        ], StatsCardComponent.prototype, "label", void 0);
+        ], ProgressBarComponent.prototype, "numberFormatOptions", void 0);
         __decorate([
             core.Input()
-        ], StatsCardComponent.prototype, "alwaysWithBorder", void 0);
+        ], ProgressBarComponent.prototype, "targetValue", void 0);
         __decorate([
             core.Input()
-        ], StatsCardComponent.prototype, "lightVersion", void 0);
+        ], ProgressBarComponent.prototype, "label", void 0);
         __decorate([
             core.Input()
-        ], StatsCardComponent.prototype, "lightMode", void 0);
+        ], ProgressBarComponent.prototype, "targetLabel", void 0);
         __decorate([
             core.Input()
-        ], StatsCardComponent.prototype, "iconClass", void 0);
+        ], ProgressBarComponent.prototype, "activeColor", void 0);
         __decorate([
             core.Input()
-        ], StatsCardComponent.prototype, "color", void 0);
+        ], ProgressBarComponent.prototype, "showValue", void 0);
         __decorate([
             core.Input()
-        ], StatsCardComponent.prototype, "animateNumbers", void 0);
+        ], ProgressBarComponent.prototype, "mode", void 0);
+        ProgressBarComponent = __decorate([
+            core.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([
             core.Input()
-        ], StatsCardComponent.prototype, "clickable", void 0);
+        ], ProgressBarDeterminateComponent.prototype, "value", void 0);
         __decorate([
             core.Input()
-        ], StatsCardComponent.prototype, "value", null);
+        ], ProgressBarDeterminateComponent.prototype, "numberFormatOptions", void 0);
         __decorate([
             core.Input()
-        ], StatsCardComponent.prototype, "tooltip", void 0);
+        ], ProgressBarDeterminateComponent.prototype, "targetValue", void 0);
         __decorate([
-            core.Output()
-        ], StatsCardComponent.prototype, "onClick", void 0);
-        StatsCardComponent = StatsCardComponent_1 = __decorate([
+            core.Input()
+        ], ProgressBarDeterminateComponent.prototype, "targetLabel", void 0);
+        __decorate([
+            core.Input()
+        ], ProgressBarDeterminateComponent.prototype, "activeColor", void 0);
+        __decorate([
+            core.Input()
+        ], ProgressBarDeterminateComponent.prototype, "showValue", void 0);
+        ProgressBarDeterminateComponent = __decorate([
             core.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: core.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([
+            core.Input()
+        ], ProgressBarIndeterminateComponent.prototype, "activeColor", void 0);
+        __decorate([
+            core.Input()
+        ], ProgressBarIndeterminateComponent.prototype, "label", void 0);
+        ProgressBarIndeterminateComponent = __decorate([
+            core.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([
             core.NgModule({
-                imports: [
-                    common.CommonModule,
-                    tooltip.TooltipModule,
-                ],
+                imports: [common.CommonModule],
                 declarations: [
-                    StatsCardComponent,
-                ],
-                exports: [
-                    StatsCardComponent,
+                    ProgressBarComponent,
+                    ProgressBarDeterminateComponent,
+                    ProgressBarIndeterminateComponent,
                 ],
+                exports: [ProgressBarComponent],
             })
-        ], StatsCardModule);
-        return StatsCardModule;
+        ], ProgressBarModule);
+        return ProgressBarModule;
     }());
 
-
-    (function (StepState) {
-        StepState["Default"] = "default";
-        StepState["Success"] = "success";
-        StepState["Warning"] = "warning";
-    })(exports.StepState || (exports.StepState = {}));
-    var StepsComponent = /** @class */ (function () {
-        function StepsComponent() {
-            this.id = "s-steps-" + StepsComponent_1.nextId++;
-            this.activeIndex = 0;
-            this.stepSelected = new core.EventEmitter();
+    var PanelComponent = /** @class */ (function () {
+        function PanelComponent() {
+            this.toggleable = true;
+            this.collapsed = false;
+            this.severity = exports.EnumSeverity.Default;
+            this.collapsedChange = new core.EventEmitter();
+            this.EnumSeverity = exports.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 exports.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([
             core.Input()
-        ], StepsComponent.prototype, "id", void 0);
+        ], PanelComponent.prototype, "header", void 0);
         __decorate([
             core.Input()
-        ], StepsComponent.prototype, "steps", void 0);
+        ], PanelComponent.prototype, "toggleable", void 0);
         __decorate([
             core.Input()
-        ], StepsComponent.prototype, "activeIndex", void 0);
+        ], PanelComponent.prototype, "collapsed", void 0);
+        __decorate([
+            core.Input()
+        ], PanelComponent.prototype, "severity", void 0);
+        __decorate([
+            core.Input()
+        ], PanelComponent.prototype, "borderButtonOptions", void 0);
         __decorate([
             core.Output()
-        ], StepsComponent.prototype, "stepSelected", void 0);
-        StepsComponent = StepsComponent_1 = __decorate([
+        ], PanelComponent.prototype, "collapsedChange", void 0);
+        PanelComponent = __decorate([
             core.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: [
-                    animations.trigger("beforeActiveDesative", [
-                        animations.state("active", animations.style({
-                            "background-position": "left bottom",
-                        })),
-                        animations.state("desactive", animations.style({
-                            "background-position": "right bottom",
-                        })),
-                        animations.transition("active => desactive", [animations.animate("50ms 100ms linear")]),
-                        animations.transition("desactive => active", [animations.animate("50ms 250ms linear")]),
-                    ]),
-                    animations.trigger("activeDesative", [
-                        animations.state("active", animations.style({
-                            "background-position": "left bottom",
-                        })),
-                        animations.state("desactive", animations.style({
-                            "background-position": "right bottom",
-                        })),
-                        animations.transition("active => desactive", [animations.animate("100ms 150ms linear")]),
-                        animations.transition("desactive => active", [animations.animate("100ms 150ms linear")]),
-                    ]),
-                    animations.trigger("afterActiveDesative", [
-                        animations.state("active", animations.style({
-                            "background-position": "left bottom",
-                        })),
-                        animations.state("desactive", animations.style({
-                            "background-position": "right bottom",
-                        })),
-                        animations.transition("active => desactive", [animations.animate("50ms 250ms linear")]),
-                        animations.transition("desactive => active", [animations.animate("50ms 100ms linear")]),
+                    animations.trigger("BorderButtonAnimation", [
+                        animations.transition(":enter", [
+                            animations.style({ transform: "scaleY(0)", opacity: 0 }),
+                            animations.animate("300ms ease", animations.style({ transform: "scaleY(1)", opacity: 1 })),
+                        ]),
+                        animations.transition(":leave", [
+                            animations.style({ transform: "scaleY(1)", opacity: 1 }),
+                            animations.animate("300ms ease", animations.style({ 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([
             core.NgModule({
-                imports: [common.CommonModule, tooltip.TooltipModule],
-                declarations: [StepsComponent],
-                exports: [StepsComponent],
+                imports: [common.CommonModule, panel.PanelModule, BorderButtonModule],
+                declarations: [PanelComponent],
+                exports: [PanelComponent],
             })
-        ], StepsModule);
-        return StepsModule;
-    }());
-
-    var TieredMenuEventService = /** @class */ (function () {
-        function TieredMenuEventService() {
-            this.incrementCurrentItemEvent = new core.EventEmitter();
-            this.decrementCurrentItemEvent = new core.EventEmitter();
-            this.closeAllMenusEvent = new core.EventEmitter();
-            this.selectItemEvent = new core.EventEmitter();
-            this.openItemMenuEvent = new core.EventEmitter();
-            this.closeItemMenuEvent = new core.EventEmitter();
-            this.createMenuEvent = new core.EventEmitter();
-        }
-        TieredMenuEventService = __decorate([
-            core.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([
-            core.Injectable()
-        ], TieredMenuService);
-        return TieredMenuService;
+        RatingScaleComponent.prototype.onSelect = function (rating) {
+            this.value = rating;
+            if (this._onChange) {
+                this._onChange(this.value);
+            }
+        };
+        var RatingScaleComponent_1;
+        __decorate([
+            core.Input()
+        ], RatingScaleComponent.prototype, "nodes", void 0);
+        __decorate([
+            core.Input()
+        ], RatingScaleComponent.prototype, "startLabel", void 0);
+        __decorate([
+            core.Input()
+        ], RatingScaleComponent.prototype, "endLabel", void 0);
+        __decorate([
+            core.Input()
+        ], RatingScaleComponent.prototype, "disabled", void 0);
+        RatingScaleComponent = RatingScaleComponent_1 = __decorate([
+            core.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: forms.NG_VALUE_ACCESSOR,
+                        useExisting: core.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 rxjs.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([
+            core.NgModule({
+                imports: [
+                    common.CommonModule,
+                    forms.ReactiveFormsModule,
+                ],
+                declarations: [RatingScaleComponent],
+                exports: [RatingScaleComponent],
+            })
+        ], RatingScaleModule);
+        return RatingScaleModule;
+    }());
+
+    var SelectButtonComponent = /** @class */ (function () {
+        function SelectButtonComponent() {
+            this.multiple = false;
+            this.itemSelected = new core.EventEmitter();
+            this.itemClicked = new core.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(operators.takeUntil(this._unsubscribe$))
-                .subscribe(function () {
-                _this._incrementCurItem();
-            });
-            this._tieredMenuEventService.decrementCurrentItemEvent
-                .pipe(operators.takeUntil(this._unsubscribe$))
-                .subscribe(function () {
-                _this._decrementCurItem();
-            });
-            this._tieredMenuEventService.selectItemEvent
-                .pipe(operators.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(operators.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(operators.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([
+            core.Input()
+        ], SelectButtonComponent.prototype, "items", void 0);
+        __decorate([
+            core.Input()
+        ], SelectButtonComponent.prototype, "multiple", void 0);
+        __decorate([
+            core.Output()
+        ], SelectButtonComponent.prototype, "itemSelected", void 0);
+        __decorate([
+            core.Output()
+        ], SelectButtonComponent.prototype, "itemClicked", void 0);
+        SelectButtonComponent = SelectButtonComponent_1 = __decorate([
+            core.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: forms.NG_VALUE_ACCESSOR,
+                        useExisting: core.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([
+            core.Input()
+        ], SelectButtonItemComponent.prototype, "label", void 0);
+        __decorate([
+            core.Input()
+        ], SelectButtonItemComponent.prototype, "active", void 0);
+        __decorate([
+            core.Input()
+        ], SelectButtonItemComponent.prototype, "first", void 0);
+        __decorate([
+            core.Input()
+        ], SelectButtonItemComponent.prototype, "last", void 0);
+        __decorate([
+            core.Input()
+        ], SelectButtonItemComponent.prototype, "disabled", void 0);
+        SelectButtonItemComponent = __decorate([
+            core.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([
+            core.NgModule({
+                imports: [common.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 core.EventEmitter();
+        }
+        SidebarComponent_1 = SidebarComponent;
+        SidebarComponent.prototype.onShow = function () {
+            dom.DomHandler.addClass(document.body, "ui-overflow-hidden-sidebar");
+            var focusTrap = this.focusTrapFactory.create(this.innerSidebar.containerViewChild.nativeElement, false);
+            focusTrap.focusInitialElementWhenReady();
+        };
+        SidebarComponent.prototype.onHide = function () {
+            dom.DomHandler.removeClass(document.body, "ui-overflow-hidden-sidebar");
+        };
+        SidebarComponent.prototype.close = function (event) {
+            dom.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: a11y.FocusTrapFactory }
         ]; };
         __decorate([
-            core.HostListener("window:resize")
-        ], TieredMenuNestedComponent.prototype, "onResize", null);
+            core.Input()
+        ], SidebarComponent.prototype, "id", void 0);
+        __decorate([
+            core.Input()
+        ], SidebarComponent.prototype, "visible", void 0);
+        __decorate([
+            core.Input()
+        ], SidebarComponent.prototype, "header", void 0);
+        __decorate([
+            core.Input()
+        ], SidebarComponent.prototype, "baseZIndex", void 0);
         __decorate([
-            core.HostListener("document:click", ["$event"])
-        ], TieredMenuNestedComponent.prototype, "onDocumentClick", null);
+            core.Input()
+        ], SidebarComponent.prototype, "largeSized", void 0);
         __decorate([
-            core.HostListener("document:keydown", ["$event"])
-        ], TieredMenuNestedComponent.prototype, "onKeydownHandler", null);
-        TieredMenuNestedComponent = __decorate([
+            core.Output()
+        ], SidebarComponent.prototype, "visibleChange", void 0);
+        __decorate([
+            core.ViewChild(sidebar.Sidebar, { static: true })
+        ], SidebarComponent.prototype, "innerSidebar", void 0);
+        __decorate([
+            core.ContentChild(HeaderComponent, { static: true })
+        ], SidebarComponent.prototype, "headerSection", void 0);
+        __decorate([
+            core.ContentChild(FooterComponent, { static: true })
+        ], SidebarComponent.prototype, "footerSection", void 0);
+        SidebarComponent = SidebarComponent_1 = __decorate([
             core.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: core.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 rxjs.Subject();
-            this.destroyRequest = new core.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([
+            core.NgModule({
+                imports: [common.CommonModule, a11y.A11yModule, sidebar.SidebarModule, scrollpanel.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 rxjs.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([
+            core.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 core.EventEmitter();
+            this.panelClosed = new core.EventEmitter();
+            this.isOpen = false;
+            this.isSlideOver = false;
+            this.isAnimating = false;
+            this.isContentAnimationDisabled = true;
+            this.slideHeight = 0;
+            this.sideContentWidth = 0;
+            this._unsubscribe$ = new rxjs.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(operators.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(operators.takeUntil(this._unsubscribe$)).subscribe(function () {
-                _this._incrementCurItem();
-            });
-            // Decrement current item event.
-            this._tieredMenuEventService.decrementCurrentItemEvent.pipe(operators.takeUntil(this._unsubscribe$)).subscribe(function () {
-                _this._decrementCurItem();
-            });
-            // Select item event.
-            this._tieredMenuEventService.selectItemEvent.pipe(operators.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(operators.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(operators.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(operators.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: core.ApplicationRef },
-            { type: core.ComponentFactoryResolver },
-            { type: core.Injector },
-            { type: core.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([
+            core.Input()
+        ], SlidePanelComponent.prototype, "id", void 0);
+        __decorate([
+            core.Input()
+        ], SlidePanelComponent.prototype, "openIcon", void 0);
+        __decorate([
+            core.Input()
+        ], SlidePanelComponent.prototype, "closeIcon", void 0);
+        __decorate([
+            core.Input()
+        ], SlidePanelComponent.prototype, "cache", void 0);
+        __decorate([
+            core.Input()
+        ], SlidePanelComponent.prototype, "createOpen", void 0);
         __decorate([
             core.Output()
-        ], TieredMenuComponent.prototype, "destroyRequest", void 0);
+        ], SlidePanelComponent.prototype, "panelOpened", void 0);
         __decorate([
-            core.HostListener("window:resize")
-        ], TieredMenuComponent.prototype, "onResize", null);
+            core.Output()
+        ], SlidePanelComponent.prototype, "panelClosed", void 0);
         __decorate([
-            core.HostListener("document:click", ["$event"])
-        ], TieredMenuComponent.prototype, "onDocumentClick", null);
+            core.ViewChild("slidePanel")
+        ], SlidePanelComponent.prototype, "_slidePanelRef", void 0);
         __decorate([
-            core.HostListener("document:keydown", ["$event"])
-        ], TieredMenuComponent.prototype, "onKeydownHandler", null);
-        TieredMenuComponent = TieredMenuComponent_1 = __decorate([
+            core.ViewChild("slideContent")
+        ], SlidePanelComponent.prototype, "_slideContentRef", void 0);
+        __decorate([
+            core.ViewChild("sideContent")
+        ], SlidePanelComponent.prototype, "_sideContentRef", void 0);
+        __decorate([
+            core.HostListener("window:resize")
+        ], SlidePanelComponent.prototype, "onResize", null);
+        SlidePanelComponent = SlidePanelComponent_1 = __decorate([
             core.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: [
+                    animations.trigger("cachelessAnimation", [
+                        animations.transition(":enter", [
+                            animations.style({ width: "0" }),
+                            animations.animate("200ms linear", animations.style({ width: "*" })),
+                        ]),
+                        animations.transition(":leave", [
+                            animations.style({ width: "*" }),
+                            animations.animate("200ms linear", animations.style({ width: "0" })),
+                        ]),
+                    ]),
+                    animations.trigger("cacheAnimation", [
+                        animations.state("true", animations.style({ width: "*", padding: '0 16px' })),
+                        animations.state("false", animations.style({ width: '0px', padding: '0' })),
+                        animations.transition("* => *", animations.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([
-            core.Injectable()
-        ], TieredMenuGlobalService);
-        return TieredMenuGlobalService;
+        SlidePanelModule = __decorate([
+            core.NgModule({
+                imports: [common.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 rxjs.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();
+
+    (function (SplitButtonType) {
+        SplitButtonType["Primary"] = "primary";
+        SplitButtonType["Secondary"] = "secondary";
+        SplitButtonType["Default"] = "default";
+    })(exports.SplitButtonType || (exports.SplitButtonType = {}));
+
+    var SplitButtonComponent = /** @class */ (function () {
+        function SplitButtonComponent(eRef) {
+            this.eRef = eRef;
+            this.disabled = false;
+            this.type = exports.SplitButtonType.Primary;
+            this.buttonClicked = new core.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(operators.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: core.ElementRef }
+        ]; };
+        __decorate([
+            core.Input()
+        ], SplitButtonComponent.prototype, "disabled", void 0);
+        __decorate([
+            core.Input()
+        ], SplitButtonComponent.prototype, "iconClass", void 0);
+        __decorate([
+            core.Input()
+        ], SplitButtonComponent.prototype, "label", void 0);
+        __decorate([
+            core.Input()
+        ], SplitButtonComponent.prototype, "type", void 0);
+        __decorate([
+            core.Input()
+        ], SplitButtonComponent.prototype, "options", void 0);
+        __decorate([
+            core.Output()
+        ], SplitButtonComponent.prototype, "buttonClicked", void 0);
+        __decorate([
+            core.HostListener("document:click", ["$event"])
+        ], SplitButtonComponent.prototype, "onClickout", null);
+        SplitButtonComponent = __decorate([
+            core.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([
+            core.NgModule({
+                imports: [common.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 core.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.BigNumber(this.ANIMATION_DURATION_MS);
+            var stepDuration = new BigNumber.BigNumber(this.STEP_DURATION_MS);
+            var animationCount = animationDuration.dividedBy(stepDuration);
+            var previousRawValue = new BigNumber.BigNumber(this.previousValue.replace(/\D/g, ""));
+            var rawValue = new BigNumber.BigNumber(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(operators.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: core.ElementRef },
-            { type: core.ApplicationRef },
-            { type: core.ComponentFactoryResolver },
-            { type: core.Injector },
-            { type: TieredMenuEventService },
-            { type: TieredMenuService },
-            { type: TieredMenuGlobalService },
-            { type: core.ChangeDetectorRef }
-        ]; };
+        var StatsCardComponent_1;
+        StatsCardComponent.nextId = 0;
         __decorate([
             core.Input()
-        ], TieredMenuDirective.prototype, "items", void 0);
+        ], StatsCardComponent.prototype, "id", void 0);
         __decorate([
             core.Input()
-        ], TieredMenuDirective.prototype, "triggerEvent", void 0);
+        ], StatsCardComponent.prototype, "label", void 0);
         __decorate([
-            core.HostListener("click", ["$event"])
-        ], TieredMenuDirective.prototype, "onClick", null);
-        TieredMenuDirective = __decorate([
-            core.Directive({
-                selector: "[sTieredMenu]",
-                providers: [TieredMenuEventService, TieredMenuService],
+            core.Input()
+        ], StatsCardComponent.prototype, "alwaysWithBorder", void 0);
+        __decorate([
+            core.Input()
+        ], StatsCardComponent.prototype, "lightVersion", void 0);
+        __decorate([
+            core.Input()
+        ], StatsCardComponent.prototype, "lightMode", void 0);
+        __decorate([
+            core.Input()
+        ], StatsCardComponent.prototype, "iconClass", void 0);
+        __decorate([
+            core.Input()
+        ], StatsCardComponent.prototype, "color", void 0);
+        __decorate([
+            core.Input()
+        ], StatsCardComponent.prototype, "animateNumbers", void 0);
+        __decorate([
+            core.Input()
+        ], StatsCardComponent.prototype, "clickable", void 0);
+        __decorate([
+            core.Input()
+        ], StatsCardComponent.prototype, "value", null);
+        __decorate([
+            core.Input()
+        ], StatsCardComponent.prototype, "tooltip", void 0);
+        __decorate([
+            core.Output()
+        ], StatsCardComponent.prototype, "onClick", void 0);
+        StatsCardComponent = StatsCardComponent_1 = __decorate([
+            core.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: core.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([
-            core.Component({
-                selector: "s-tiered-menu-divider",
-                template: "<div class=\"divider\"></div>",
-                styles: [".divider{margin:2px 0;height:1px;background-color:#ccc}"]
+        StatsCardModule = __decorate([
+            core.NgModule({
+                imports: [
+                    common.CommonModule,
+                    tooltip.TooltipModule,
+                ],
+                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;
+
+    (function (StepState) {
+        StepState["Default"] = "default";
+        StepState["Success"] = "success";
+        StepState["Warning"] = "warning";
+    })(exports.StepState || (exports.StepState = {}));
+    var StepsComponent = /** @class */ (function () {
+        function StepsComponent() {
+            this.id = "s-steps-" + StepsComponent_1.nextId++;
+            this.activeIndex = 0;
+            this.stepSelected = new core.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 exports.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([
-            core.Input()
-        ], TieredMenuItemComponent.prototype, "item", void 0);
-        __decorate([
-            core.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([
             core.Input()
-        ], TieredMenuItemComponent.prototype, "highlight", void 0);
+        ], StepsComponent.prototype, "id", void 0);
         __decorate([
             core.Input()
-        ], TieredMenuItemComponent.prototype, "triggerEvent", void 0);
+        ], StepsComponent.prototype, "steps", void 0);
         __decorate([
             core.Input()
-        ], TieredMenuItemComponent.prototype, "closeOnClick", void 0);
-        __decorate([
-            core.HostListener("click"),
-            core.HostListener("touchend")
-        ], TieredMenuItemComponent.prototype, "onClick", null);
-        __decorate([
-            core.HostListener("mouseenter")
-        ], TieredMenuItemComponent.prototype, "onMouseEnter", null);
+        ], StepsComponent.prototype, "activeIndex", void 0);
         __decorate([
-            core.HostListener("mouseleave")
-        ], TieredMenuItemComponent.prototype, "onMouseLeave", null);
-        TieredMenuItemComponent = __decorate([
+            core.Output()
+        ], StepsComponent.prototype, "stepSelected", void 0);
+        StepsComponent = StepsComponent_1 = __decorate([
             core.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: [
+                    animations.trigger("beforeActiveDesative", [
+                        animations.state("active", animations.style({
+                            "background-position": "left bottom",
+                        })),
+                        animations.state("desactive", animations.style({
+                            "background-position": "right bottom",
+                        })),
+                        animations.transition("active => desactive", [animations.animate("50ms 100ms linear")]),
+                        animations.transition("desactive => active", [animations.animate("50ms 250ms linear")]),
+                    ]),
+                    animations.trigger("activeDesative", [
+                        animations.state("active", animations.style({
+                            "background-position": "left bottom",
+                        })),
+                        animations.state("desactive", animations.style({
+                            "background-position": "right bottom",
+                        })),
+                        animations.transition("active => desactive", [animations.animate("100ms 150ms linear")]),
+                        animations.transition("desactive => active", [animations.animate("100ms 150ms linear")]),
+                    ]),
+                    animations.trigger("afterActiveDesative", [
+                        animations.state("active", animations.style({
+                            "background-position": "left bottom",
+                        })),
+                        animations.state("desactive", animations.style({
+                            "background-position": "right bottom",
+                        })),
+                        animations.transition("active => desactive", [animations.animate("50ms 250ms linear")]),
+                        animations.transition("desactive => active", [animations.animate("50ms 100ms linear")]),
+                    ]),
+                ],
+                styles: ["@keyframes scale-up-center{0%{transform:scale(.5)}100%{transform:scale(1)}}.s-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([
             core.NgModule({
-                imports: [
-                    common.CommonModule,
-                ],
-                declarations: [
-                    TieredMenuDirective,
-                    TieredMenuComponent,
-                    TieredMenuNestedComponent,
-                    TieredMenuItemComponent,
-                    TieredMenuDividerComponent,
-                ],
-                exports: [TieredMenuDirective],
-                providers: [TieredMenuGlobalService],
+                imports: [common.CommonModule, tooltip.TooltipModule],
+                declarations: [StepsComponent],
+                exports: [StepsComponent],
             })
-        ], TieredMenuModule);
-        return TieredMenuModule;
+        ], StepsModule);
+        return StepsModule;
     }());
 
     var TileComponent = /** @class */ (function () {
@@ -18240,6 +18349,8 @@
     exports.MaskFormatterModule = MaskFormatterModule;
     exports.MaskFormatterPipe = MaskFormatterPipe;
     exports.MouseEventsModule = MouseEventsModule;
+    exports.NavigationButtonComponent = NavigationButtonComponent;
+    exports.NavigationButtonModule = NavigationButtonModule;
     exports.NavigationDirective = NavigationDirective;
     exports.NumberField = NumberField;
     exports.NumberInputDirective = NumberInputDirective;
@@ -18361,20 +18472,20 @@
     exports.ɵct = KanbanColumnComponent;
     exports.ɵcu = KanbanItemDraggingComponent;
     exports.ɵcv = NumberLocaleOptions;
-    exports.ɵcw = BorderButtonModule;
-    exports.ɵcx = BorderButtonComponent;
-    exports.ɵcy = ProgressBarDeterminateComponent;
-    exports.ɵcz = ProgressBarIndeterminateComponent;
+    exports.ɵcw = TieredMenuEventService;
+    exports.ɵcx = TieredMenuService;
+    exports.ɵcy = TieredMenuGlobalService;
+    exports.ɵcz = TieredMenuComponent;
     exports.ɵd = TemplateModule;
-    exports.ɵda = SelectButtonItemComponent;
-    exports.ɵdb = SlidePanelService;
-    exports.ɵdc = TieredMenuEventService;
-    exports.ɵdd = TieredMenuService;
-    exports.ɵde = TieredMenuGlobalService;
-    exports.ɵdf = TieredMenuComponent;
-    exports.ɵdg = TieredMenuNestedComponent;
-    exports.ɵdh = TieredMenuItemComponent;
-    exports.ɵdi = TieredMenuDividerComponent;
+    exports.ɵda = TieredMenuNestedComponent;
+    exports.ɵdb = TieredMenuItemComponent;
+    exports.ɵdc = TieredMenuDividerComponent;
+    exports.ɵdd = BorderButtonModule;
+    exports.ɵde = BorderButtonComponent;
+    exports.ɵdf = ProgressBarDeterminateComponent;
+    exports.ɵdg = ProgressBarIndeterminateComponent;
+    exports.ɵdh = SelectButtonItemComponent;
+    exports.ɵdi = SlidePanelService;
     exports.ɵdj = TimelineItemModule;
     exports.ɵdk = TimelineIconItemComponent;
     exports.ɵdl = HorizontalTimelineModule;