@seniorsistemas/angular-components 17.8.10 → 17.8.11

package/fesm2015/seniorsistemas-angular-components.js

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