ngx-sfc-components 0.0.22 → 0.0.24

package/fesm2015/ngx-sfc-components.mjs

@@ -1,10 +1,10 @@
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Component, Input, ContentChildren, Directive, HostBinding, EventEmitter, Output, HostListener, Inject, ViewChild, Injectable, ViewChildren, NgModule } from '@angular/core';
+import { EventEmitter, Component, Input, Output, ContentChildren, Directive, HostBinding, HostListener, Inject, ViewChild, Injectable, ViewChildren, NgModule } from '@angular/core';
 import { Chart, Title, Tooltip, Filler, Legend, LineController, LineElement, PointElement, LinearScale, CategoryScale, BarController, BarElement, DoughnutController, ArcElement, RadarController, RadialLinearScale, PieController, PolarAreaController, BubbleController, ScatterController, TimeSeriesScale } from 'chart.js';
 import * as i3 from 'ngx-sfc-common';
-import { isDefined, firstOrDefault, CommonConstants, TemplateReferenceDirective, UIClass, isNullOrEmptyString, getCalcValue, UIConstants, any, Position, MediaLimits, WINDOW, getCssLikeValue, ButtonType, replaceRgbOpacity, Theme, mergeDeep, removeItem, addItem, CheckmarkType, SortingDirection, LoadContainerType, PaginationConstants, LoadContainerLoadType, generateGuid, all, hasItem, SortingService, ResizeService, isNumeric, DOCUMENT, NgxSfcCommonModule } from 'ngx-sfc-common';
+import { isDefined, firstOrDefault, CommonConstants, TemplateReferenceDirective, UIClass, isNullOrEmptyString, getCalcValue, UIConstants, any, Position, MediaLimits, WINDOW, all, getCssLikeValue, ButtonType, replaceRgbOpacity, Theme, mergeDeep, ObservableModel, removeItem, addItem, CheckmarkType, SortingDirection, LoadContainerType, PaginationConstants, LoadContainerLoadType, generateGuid, hasItem, SortingService, ResizeService, isNumeric, DOCUMENT, NgxSfcCommonModule } from 'ngx-sfc-common';
 import { Subject, BehaviorSubject, startWith, combineLatest, map, filter, distinctUntilChanged, fromEvent, tap, merge, of, switchMap, first, from, skip, take, toArray, delay } from 'rxjs';
 import { faCircle, faAngleUp, faAngleDown, faArrowRight, faArrowLeft, faPauseCircle, faPlayCircle, faEye, faEyeSlash, faChevronUp, faChevronDown, faTableList, faBorderAll } from '@fortawesome/free-solid-svg-icons';
 import * as i2 from '@fortawesome/angular-fontawesome';
@@ -33,6 +33,8 @@ class TabsComponent {
         this.tabService = tabService;
         this.TabsTemplate = TabsTemplate;
         this.tabs = [];
+        // End Template references
+        this.selected = new EventEmitter();
     }
     ngOnInit() {
         this.tabsSubject = new BehaviorSubject(this.tabs);
@@ -54,6 +56,7 @@ class TabsComponent {
     selectTab(tab, index) {
         if (!tab.disabled && !tab.selected) {
             this.tabService.select(index);
+            this.selected.emit(tab);
         }
     }
     getSelectedIndex(tabs) {
@@ -71,10 +74,10 @@ class TabsComponent {
     }
 }
 TabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TabsComponent, deps: [{ token: TabService }], target: i0.ɵɵFactoryTarget.Component });
-TabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TabsComponent, selector: "sfc-tabs", inputs: { tabs: "tabs", label: "label", slider: "slider", body: "body" }, providers: [TabService], queries: [{ propertyName: "templates", predicate: TemplateReferenceDirective, read: TemplateReferenceDirective }], ngImport: i0, template: "<div class=\"container\" *ngIf=\"vm$ | async as vm\">\r\n    <div class=\"tabs-container\">\r\n        <div class=\"tabs\">\r\n            <div class=\"tab\" [style.width.%]=\"vm.tabWidth\" *ngFor=\"let tab of vm.tabs; index as index\"\r\n                (click)=\"selectTab(tab, index)\">\r\n\r\n                <sfc-template-content [referenceContent]=\"label\" [templatesContent]=\"templates\"\r\n                    [templateType]=\"TabsTemplate.Label\" [defaultContent]=\"defaultLabel\" [contextData]=\"tab\">\r\n                </sfc-template-content>\r\n\r\n                <ng-template #defaultLabel>{{ tab.label }}</ng-template>\r\n            </div>\r\n        </div>\r\n\r\n        <sfc-template-content [referenceContent]=\"slider\" [templatesContent]=\"templates\"\r\n            [templateType]=\"TabsTemplate.Slider\" [contextData]=\"vm.sliderContextData\"></sfc-template-content>\r\n\r\n    </div>\r\n\r\n    <div class=\"body-container\">\r\n        <ng-container *ngIf=\"vm.selectedTab\">\r\n\r\n            <sfc-template-content [referenceContent]=\"body\" [templatesContent]=\"templates\"\r\n                [templateType]=\"TabsTemplate.Body\" [contextData]=\"vm.selectedTab.data\">\r\n            </sfc-template-content>\r\n\r\n        </ng-container>\r\n    </div>\r\n</div>", styles: [":host{width:100%}:host .container .tabs{display:flex;flex-wrap:wrap}:host .container .tabs .tab{transition:color .5s ease;text-align:center}:host .container .tabs .tab,:host-context(.sfc-default-theme) :host .container .tabs .tab{color:#545e61}:host-context(.sfc-dark-theme) :host .container .tabs .tab{color:#fff}:host .container .body-container{transition:color .5s ease;margin-top:.6em}:host .container .body-container,:host-context(.sfc-default-theme) :host .container .body-container{color:#545e61}:host-context(.sfc-dark-theme) :host .container .body-container{color:#fff}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.TemplateContentComponent, selector: "sfc-template-content", inputs: ["contextData", "referenceContent", "templateType", "templatesContent", "defaultContent"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
+TabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TabsComponent, selector: "sfc-tabs", inputs: { tabs: "tabs", label: "label", slider: "slider", body: "body" }, outputs: { selected: "selected" }, providers: [TabService], queries: [{ propertyName: "templates", predicate: TemplateReferenceDirective, read: TemplateReferenceDirective }], ngImport: i0, template: "<div class=\"container\" *ngIf=\"vm$ | async as vm\">\r\n    <div class=\"tabs-container\">\r\n        <div class=\"tabs\">\r\n            <div class=\"tab\" [style.width.%]=\"vm.tabWidth\" *ngFor=\"let tab of vm.tabs; index as index\"\r\n                (click)=\"selectTab(tab, index)\">\r\n\r\n                <sfc-template-content [referenceContent]=\"label\" [templatesContent]=\"templates\"\r\n                    [templateType]=\"TabsTemplate.Label\" [defaultContent]=\"defaultLabel\" [contextData]=\"tab\">\r\n                </sfc-template-content>\r\n\r\n                <ng-template #defaultLabel>{{ tab.label }}</ng-template>\r\n            </div>\r\n        </div>\r\n\r\n        <sfc-template-content [referenceContent]=\"slider\" [templatesContent]=\"templates\"\r\n            [templateType]=\"TabsTemplate.Slider\" [contextData]=\"vm.sliderContextData\">\r\n        </sfc-template-content>\r\n\r\n    </div>\r\n\r\n    <div class=\"body-container\">\r\n        <ng-container *ngIf=\"vm.selectedTab\">\r\n\r\n            <sfc-template-content [referenceContent]=\"body\" [templatesContent]=\"templates\"\r\n                [templateType]=\"TabsTemplate.Body\" [contextData]=\"vm.selectedTab.data\">\r\n            </sfc-template-content>\r\n\r\n        </ng-container>\r\n    </div>\r\n</div>", styles: [":host{width:100%}:host .container .tabs{display:flex;flex-wrap:wrap}:host .container .tabs .tab{transition:color .5s ease;text-align:center}:host .container .tabs .tab,:host-context(.sfc-default-theme) :host .container .tabs .tab{color:#545e61}:host-context(.sfc-dark-theme) :host .container .tabs .tab{color:#fff}:host .container .body-container{transition:color .5s ease;margin-top:.6em}:host .container .body-container,:host-context(.sfc-default-theme) :host .container .body-container{color:#545e61}:host-context(.sfc-dark-theme) :host .container .body-container{color:#fff}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.TemplateContentComponent, selector: "sfc-template-content", inputs: ["contextData", "referenceContent", "templateType", "templatesContent", "defaultContent"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-tabs', providers: [TabService], template: "<div class=\"container\" *ngIf=\"vm$ | async as vm\">\r\n    <div class=\"tabs-container\">\r\n        <div class=\"tabs\">\r\n            <div class=\"tab\" [style.width.%]=\"vm.tabWidth\" *ngFor=\"let tab of vm.tabs; index as index\"\r\n                (click)=\"selectTab(tab, index)\">\r\n\r\n                <sfc-template-content [referenceContent]=\"label\" [templatesContent]=\"templates\"\r\n                    [templateType]=\"TabsTemplate.Label\" [defaultContent]=\"defaultLabel\" [contextData]=\"tab\">\r\n                </sfc-template-content>\r\n\r\n                <ng-template #defaultLabel>{{ tab.label }}</ng-template>\r\n            </div>\r\n        </div>\r\n\r\n        <sfc-template-content [referenceContent]=\"slider\" [templatesContent]=\"templates\"\r\n            [templateType]=\"TabsTemplate.Slider\" [contextData]=\"vm.sliderContextData\"></sfc-template-content>\r\n\r\n    </div>\r\n\r\n    <div class=\"body-container\">\r\n        <ng-container *ngIf=\"vm.selectedTab\">\r\n\r\n            <sfc-template-content [referenceContent]=\"body\" [templatesContent]=\"templates\"\r\n                [templateType]=\"TabsTemplate.Body\" [contextData]=\"vm.selectedTab.data\">\r\n            </sfc-template-content>\r\n\r\n        </ng-container>\r\n    </div>\r\n</div>", styles: [":host{width:100%}:host .container .tabs{display:flex;flex-wrap:wrap}:host .container .tabs .tab{transition:color .5s ease;text-align:center}:host .container .tabs .tab,:host-context(.sfc-default-theme) :host .container .tabs .tab{color:#545e61}:host-context(.sfc-dark-theme) :host .container .tabs .tab{color:#fff}:host .container .body-container{transition:color .5s ease;margin-top:.6em}:host .container .body-container,:host-context(.sfc-default-theme) :host .container .body-container{color:#545e61}:host-context(.sfc-dark-theme) :host .container .body-container{color:#fff}\n"] }]
+            args: [{ selector: 'sfc-tabs', providers: [TabService], template: "<div class=\"container\" *ngIf=\"vm$ | async as vm\">\r\n    <div class=\"tabs-container\">\r\n        <div class=\"tabs\">\r\n            <div class=\"tab\" [style.width.%]=\"vm.tabWidth\" *ngFor=\"let tab of vm.tabs; index as index\"\r\n                (click)=\"selectTab(tab, index)\">\r\n\r\n                <sfc-template-content [referenceContent]=\"label\" [templatesContent]=\"templates\"\r\n                    [templateType]=\"TabsTemplate.Label\" [defaultContent]=\"defaultLabel\" [contextData]=\"tab\">\r\n                </sfc-template-content>\r\n\r\n                <ng-template #defaultLabel>{{ tab.label }}</ng-template>\r\n            </div>\r\n        </div>\r\n\r\n        <sfc-template-content [referenceContent]=\"slider\" [templatesContent]=\"templates\"\r\n            [templateType]=\"TabsTemplate.Slider\" [contextData]=\"vm.sliderContextData\">\r\n        </sfc-template-content>\r\n\r\n    </div>\r\n\r\n    <div class=\"body-container\">\r\n        <ng-container *ngIf=\"vm.selectedTab\">\r\n\r\n            <sfc-template-content [referenceContent]=\"body\" [templatesContent]=\"templates\"\r\n                [templateType]=\"TabsTemplate.Body\" [contextData]=\"vm.selectedTab.data\">\r\n            </sfc-template-content>\r\n\r\n        </ng-container>\r\n    </div>\r\n</div>", styles: [":host{width:100%}:host .container .tabs{display:flex;flex-wrap:wrap}:host .container .tabs .tab{transition:color .5s ease;text-align:center}:host .container .tabs .tab,:host-context(.sfc-default-theme) :host .container .tabs .tab{color:#545e61}:host-context(.sfc-dark-theme) :host .container .tabs .tab{color:#fff}:host .container .body-container{transition:color .5s ease;margin-top:.6em}:host .container .body-container,:host-context(.sfc-default-theme) :host .container .body-container{color:#545e61}:host-context(.sfc-dark-theme) :host .container .body-container{color:#fff}\n"] }]
         }], ctorParameters: function () { return [{ type: TabService }]; }, propDecorators: { tabs: [{
                 type: Input
             }], label: [{
@@ -83,6 +86,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Input
             }], body: [{
                 type: Input
+            }], selected: [{
+                type: Output
             }], templates: [{
                 type: ContentChildren,
                 args: [TemplateReferenceDirective, { read: TemplateReferenceDirective }]
@@ -190,6 +195,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             args: [{ selector: 'sfc-tab-label-line-slider', template: "<div class=\"slider\" [ngStyle]=\"style\"></div>", styles: [":host{position:relative;display:flex}:host .slider{background:#ffce54;height:.125em;position:absolute;left:0;top:calc(100% - .1em);transition:left .3s ease-out}\n"] }]
         }] });
 
+class SideMenuConstants {
+}
+SideMenuConstants.CSS_SWITCH_CLASS = 'switch';
+
 var SideMenuItemType;
 (function (SideMenuItemType) {
     SideMenuItemType["Item"] = "item";
@@ -200,20 +209,23 @@ class SideMenuHeaderComponent {
     constructor() {
         this.DEFAULT_MENU_HEADER_TEXT = 'Menu';
         this.label = CommonConstants.EMPTY_STRING;
+        this.switch = true;
         this.open = false;
         this.toggle = new EventEmitter();
     }
     ngOnInit() {
-        this.label = this.label || this.DEFAULT_MENU_HEADER_TEXT;
+        this.label = isDefined(this.label) ? this.label : this.DEFAULT_MENU_HEADER_TEXT;
     }
 }
 SideMenuHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SideMenuHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SideMenuHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SideMenuHeaderComponent, selector: "sfc-side-menu-header", inputs: { label: "label", open: "open" }, outputs: { toggle: "toggle" }, host: { properties: { "class.open": "this.open" } }, ngImport: i0, template: "<li>\r\n    <span>{{label}}</span>\r\n    <sfc-hamburger [open]=\"open\" (click)=\"toggle.emit()\"></sfc-hamburger>\r\n</li>", styles: [":host li{display:flex;align-items:center;justify-content:center;padding:1.25em}:host li span{display:none;transition:color .5s ease;text-transform:uppercase;font-weight:700;font-size:.8em;-webkit-user-select:none;user-select:none}:host li span,:host-context(.sfc-default-theme) :host li span{color:#545e61}:host-context(.sfc-dark-theme) :host li span{color:#fff}:host.open li{justify-content:space-between}:host.open li span{display:block}\n"], dependencies: [{ kind: "component", type: i3.HamburgerComponent, selector: "sfc-hamburger" }] });
+SideMenuHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SideMenuHeaderComponent, selector: "sfc-side-menu-header", inputs: { label: "label", switch: "switch", open: "open" }, outputs: { toggle: "toggle" }, host: { properties: { "class.open": "this.open" } }, ngImport: i0, template: "<li>\r\n    <span>{{label}}</span>\r\n    <sfc-hamburger *ngIf=\"switch\" [open]=\"open\" (click)=\"toggle.emit()\"></sfc-hamburger>\r\n</li>", styles: [":host li{display:flex;align-items:center;justify-content:center;padding:1.25em}:host li span{display:none;transition:color .5s ease;font-weight:700;font-size:.9em;-webkit-user-select:none;user-select:none}:host li span,:host-context(.sfc-default-theme) :host li span{color:#545e61}:host-context(.sfc-dark-theme) :host li span{color:#fff}:host.open li{justify-content:space-between}:host.open li span{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.HamburgerComponent, selector: "sfc-hamburger" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SideMenuHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-side-menu-header', template: "<li>\r\n    <span>{{label}}</span>\r\n    <sfc-hamburger [open]=\"open\" (click)=\"toggle.emit()\"></sfc-hamburger>\r\n</li>", styles: [":host li{display:flex;align-items:center;justify-content:center;padding:1.25em}:host li span{display:none;transition:color .5s ease;text-transform:uppercase;font-weight:700;font-size:.8em;-webkit-user-select:none;user-select:none}:host li span,:host-context(.sfc-default-theme) :host li span{color:#545e61}:host-context(.sfc-dark-theme) :host li span{color:#fff}:host.open li{justify-content:space-between}:host.open li span{display:block}\n"] }]
+            args: [{ selector: 'sfc-side-menu-header', template: "<li>\r\n    <span>{{label}}</span>\r\n    <sfc-hamburger *ngIf=\"switch\" [open]=\"open\" (click)=\"toggle.emit()\"></sfc-hamburger>\r\n</li>", styles: [":host li{display:flex;align-items:center;justify-content:center;padding:1.25em}:host li span{display:none;transition:color .5s ease;font-weight:700;font-size:.9em;-webkit-user-select:none;user-select:none}:host li span,:host-context(.sfc-default-theme) :host li span{color:#545e61}:host-context(.sfc-dark-theme) :host li span{color:#fff}:host.open li{justify-content:space-between}:host.open li span{display:block}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
+            }], switch: [{
+                type: Input
             }], open: [{
                 type: Input
             }, {
@@ -228,8 +240,9 @@ class SideMenuItemContentComponent {
         this.ANGLE_UP_ICON = faAngleUp;
         this.ANGLE_DOWM_ICON = faAngleDown;
         this.item = {
-            icon: undefined,
+            id: CommonConstants.EMPTY_STRING,
             label: CommonConstants.EMPTY_STRING,
+            icon: null,
             type: SideMenuItemType.Item,
             active: false
         };
@@ -241,16 +254,18 @@ class SideMenuItemContentComponent {
     }
     onClick() {
         this.selectItem.emit(this.item);
+        if (this.item.click)
+            this.item.click(this.item);
     }
     get expandIcon() {
         return this.openParent ? this.ANGLE_UP_ICON : this.ANGLE_DOWM_ICON;
     }
 }
 SideMenuItemContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SideMenuItemContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SideMenuItemContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SideMenuItemContentComponent, selector: "sfc-side-menu-item-content", inputs: { item: "item", active: "active", open: "open", openParent: "openParent", hasChildren: "hasChildren" }, outputs: { selectItem: "selectItem" }, host: { listeners: { "click": "onClick()" }, properties: { "class.active": "this.active", "class.open": "this.open" } }, ngImport: i0, template: "<li>\r\n    <div class=\"item-container\">\r\n        <div class=\"item\">\r\n            <a>\r\n                <fa-icon *ngIf=\"item.icon\" [icon]=\"item.icon\"></fa-icon>\r\n            </a>\r\n        </div>\r\n        <span class=\"label\">{{item.label}}</span>\r\n    </div>\r\n\r\n    <div *ngIf=\"hasChildren\" class=\"expand-container\">\r\n        <fa-icon [icon]=\"expandIcon\"></fa-icon>\r\n    </div>\r\n</li>", styles: [":host li{display:inline-flex;align-items:center;padding:0 1.25em 0 1.5em;cursor:pointer;width:calc(100% - 2.75em);justify-content:space-between;transition:color .5s ease}:host li,:host-context(.sfc-default-theme) :host li{color:#545e61}:host-context(.sfc-dark-theme) :host li{color:#fff}:host li .expand-container{visibility:hidden;opacity:0;transition:color .5s ease;width:0}:host li .expand-container>fa-icon{font-weight:700}:host li .item-container{display:inline-flex;align-items:center}:host li .item-container .item{width:2em;height:1.9em;display:flex;justify-content:center;border-radius:.7em;align-items:center}:host li .item-container .item a{border-radius:.45em;display:flex;align-items:center;justify-content:center;font-size:1.3em;padding:.3em;transition:background-color .5s ease,color .5s ease,margin-right .3s ease-in-out}:host li .item-container .item a>fa-icon{font-size:1em}:host li .item-container .label{font-weight:700;font-size:.9em;visibility:hidden;opacity:0;transition:color .5s,visibility .3s,opacity .5s ease-in-out;-webkit-user-select:none;user-select:none;width:0}:host.active li,:host:hover li{color:#fff}:host.active li .item-container .item a,:host:hover li .item-container .item a{background-color:#ffce54;box-shadow:0 .3em 1em #2bbbad1a}:host.active li .item-container .label,:host:hover li .item-container .label{color:#ffce54}:host.active li .expand-container,:host:hover li .expand-container{color:#ffce54}:host.open li .item-container .item a{margin-right:1em}:host.open li .item-container .label{visibility:visible;opacity:1;width:auto}:host.open li .expand-container{width:auto;visibility:visible;opacity:1}:host :host-context(.children) li{margin:.2em 0}:host :host-context(.children) li .item-container .item a{padding:.3em;border-radius:.35em}:host :host-context(.children) li .item-container .item a>fa-icon{font-size:.5em}:host :host-context(.children) li .item-container .label{font-size:.8em}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
+SideMenuItemContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SideMenuItemContentComponent, selector: "sfc-side-menu-item-content", inputs: { item: "item", active: "active", open: "open", openParent: "openParent", hasChildren: "hasChildren" }, outputs: { selectItem: "selectItem" }, host: { listeners: { "click": "onClick()" }, properties: { "class.active": "this.active", "class.open": "this.open" } }, ngImport: i0, template: "<li>\r\n    <div class=\"item-container\">\r\n        <div class=\"item\">\r\n            <a>\r\n                <fa-icon *ngIf=\"item.icon\" [icon]=\"item.icon\"></fa-icon>\r\n            </a>\r\n        </div>\r\n        <span class=\"label\">{{item.label}}</span>\r\n    </div>\r\n\r\n    <div *ngIf=\"hasChildren\" class=\"expand-container\">\r\n        <fa-icon [icon]=\"expandIcon\"></fa-icon>\r\n    </div>\r\n</li>", styles: [":host li{display:inline-flex;align-items:center;padding:0 1.25em 0 1.5em;cursor:pointer;width:calc(100% - 2.75em);justify-content:space-between;transition:color .5s ease}:host li,:host-context(.sfc-default-theme) :host li{color:#545e61}:host-context(.sfc-dark-theme) :host li{color:#fff}:host li .expand-container{visibility:hidden;opacity:0;transition:color .5s ease;width:0;font-size:.8em;margin-left:1em}:host li .expand-container>fa-icon{font-weight:700}:host li .item-container{display:inline-flex;align-items:center}:host li .item-container .item{width:2em;height:1.9em;display:flex;justify-content:center;border-radius:.7em;align-items:center}:host li .item-container .item a{border-radius:.45em;display:flex;align-items:center;justify-content:center;font-size:1.3em;padding:.3em;transition:background-color .5s ease,color .5s ease,margin-right .3s ease-in-out}:host li .item-container .item a>fa-icon{font-size:1em}:host li .item-container .label{font-weight:700;font-size:.9em;visibility:hidden;opacity:0;transition:color .5s,visibility .3s,opacity .5s ease-in-out;-webkit-user-select:none;user-select:none;width:0}:host.active li{color:#fff}:host.active li .item-container .item a{background-color:#ffce54;box-shadow:0 .3em 1em #2bbbad1a}:host.active li .item-container .label{color:#ffce54}:host.active li .expand-container{color:#ffce54}:host.open li .item-container .item a{margin-right:1em}:host.open li .item-container .label{visibility:visible;opacity:1;width:auto}:host.open li .expand-container{width:auto;visibility:visible;opacity:1}:host :host-context(.children) li{margin:.2em 0}:host :host-context(.children) li .item-container .item a{padding:.3em;border-radius:.35em}:host :host-context(.children) li .item-container .item a>fa-icon{font-size:.5em}:host :host-context(.children) li .item-container .label{font-size:.8em}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SideMenuItemContentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-side-menu-item-content', template: "<li>\r\n    <div class=\"item-container\">\r\n        <div class=\"item\">\r\n            <a>\r\n                <fa-icon *ngIf=\"item.icon\" [icon]=\"item.icon\"></fa-icon>\r\n            </a>\r\n        </div>\r\n        <span class=\"label\">{{item.label}}</span>\r\n    </div>\r\n\r\n    <div *ngIf=\"hasChildren\" class=\"expand-container\">\r\n        <fa-icon [icon]=\"expandIcon\"></fa-icon>\r\n    </div>\r\n</li>", styles: [":host li{display:inline-flex;align-items:center;padding:0 1.25em 0 1.5em;cursor:pointer;width:calc(100% - 2.75em);justify-content:space-between;transition:color .5s ease}:host li,:host-context(.sfc-default-theme) :host li{color:#545e61}:host-context(.sfc-dark-theme) :host li{color:#fff}:host li .expand-container{visibility:hidden;opacity:0;transition:color .5s ease;width:0}:host li .expand-container>fa-icon{font-weight:700}:host li .item-container{display:inline-flex;align-items:center}:host li .item-container .item{width:2em;height:1.9em;display:flex;justify-content:center;border-radius:.7em;align-items:center}:host li .item-container .item a{border-radius:.45em;display:flex;align-items:center;justify-content:center;font-size:1.3em;padding:.3em;transition:background-color .5s ease,color .5s ease,margin-right .3s ease-in-out}:host li .item-container .item a>fa-icon{font-size:1em}:host li .item-container .label{font-weight:700;font-size:.9em;visibility:hidden;opacity:0;transition:color .5s,visibility .3s,opacity .5s ease-in-out;-webkit-user-select:none;user-select:none;width:0}:host.active li,:host:hover li{color:#fff}:host.active li .item-container .item a,:host:hover li .item-container .item a{background-color:#ffce54;box-shadow:0 .3em 1em #2bbbad1a}:host.active li .item-container .label,:host:hover li .item-container .label{color:#ffce54}:host.active li .expand-container,:host:hover li .expand-container{color:#ffce54}:host.open li .item-container .item a{margin-right:1em}:host.open li .item-container .label{visibility:visible;opacity:1;width:auto}:host.open li .expand-container{width:auto;visibility:visible;opacity:1}:host :host-context(.children) li{margin:.2em 0}:host :host-context(.children) li .item-container .item a{padding:.3em;border-radius:.35em}:host :host-context(.children) li .item-container .item a>fa-icon{font-size:.5em}:host :host-context(.children) li .item-container .label{font-size:.8em}\n"] }]
+            args: [{ selector: 'sfc-side-menu-item-content', template: "<li>\r\n    <div class=\"item-container\">\r\n        <div class=\"item\">\r\n            <a>\r\n                <fa-icon *ngIf=\"item.icon\" [icon]=\"item.icon\"></fa-icon>\r\n            </a>\r\n        </div>\r\n        <span class=\"label\">{{item.label}}</span>\r\n    </div>\r\n\r\n    <div *ngIf=\"hasChildren\" class=\"expand-container\">\r\n        <fa-icon [icon]=\"expandIcon\"></fa-icon>\r\n    </div>\r\n</li>", styles: [":host li{display:inline-flex;align-items:center;padding:0 1.25em 0 1.5em;cursor:pointer;width:calc(100% - 2.75em);justify-content:space-between;transition:color .5s ease}:host li,:host-context(.sfc-default-theme) :host li{color:#545e61}:host-context(.sfc-dark-theme) :host li{color:#fff}:host li .expand-container{visibility:hidden;opacity:0;transition:color .5s ease;width:0;font-size:.8em;margin-left:1em}:host li .expand-container>fa-icon{font-weight:700}:host li .item-container{display:inline-flex;align-items:center}:host li .item-container .item{width:2em;height:1.9em;display:flex;justify-content:center;border-radius:.7em;align-items:center}:host li .item-container .item a{border-radius:.45em;display:flex;align-items:center;justify-content:center;font-size:1.3em;padding:.3em;transition:background-color .5s ease,color .5s ease,margin-right .3s ease-in-out}:host li .item-container .item a>fa-icon{font-size:1em}:host li .item-container .label{font-weight:700;font-size:.9em;visibility:hidden;opacity:0;transition:color .5s,visibility .3s,opacity .5s ease-in-out;-webkit-user-select:none;user-select:none;width:0}:host.active li{color:#fff}:host.active li .item-container .item a{background-color:#ffce54;box-shadow:0 .3em 1em #2bbbad1a}:host.active li .item-container .label{color:#ffce54}:host.active li .expand-container{color:#ffce54}:host.open li .item-container .item a{margin-right:1em}:host.open li .item-container .label{visibility:visible;opacity:1;width:auto}:host.open li .expand-container{width:auto;visibility:visible;opacity:1}:host :host-context(.children) li{margin:.2em 0}:host :host-context(.children) li .item-container .item a{padding:.3em;border-radius:.35em}:host :host-context(.children) li .item-container .item a>fa-icon{font-size:.5em}:host :host-context(.children) li .item-container .label{font-size:.8em}\n"] }]
         }], propDecorators: { item: [{
                 type: Input
             }], active: [{
@@ -277,8 +292,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
 class SideMenuItemComponent {
     constructor() {
         this.item = {
-            icon: undefined,
+            id: CommonConstants.EMPTY_STRING,
             label: CommonConstants.EMPTY_STRING,
+            icon: null,
             type: SideMenuItemType.Item,
             items: [],
             active: false
@@ -288,7 +304,7 @@ class SideMenuItemComponent {
         this.openParent = false;
     }
     get hasActiveChild() {
-        return isDefined(firstOrDefault(this.item.items, (item) => item.active));
+        return isDefined(firstOrDefault(this.item.items, (item) => item.active || false));
     }
     hasChildren(item) {
         return any(item.items);
@@ -296,10 +312,10 @@ class SideMenuItemComponent {
     isActive(item) {
         return this.hasChildren(item)
             ? this.hasActiveChild && !this.openParent
-            : item.active;
+            : item.active || false;
     }
     ngOnInit() {
-        this.openParent = this.hasActiveChild;
+        this.openParent = this.hasActiveChild || (this.item.open || false);
     }
     onParentClick(item) {
         this.openParent = !this.openParent;
@@ -376,11 +392,14 @@ class SideMenuComponent {
         this.selected = new EventEmitter();
     }
     get open() {
-        return this.model.open;
+        return this.model.open || !this.switch;
     }
     set open(value) {
         this.model.open = value;
     }
+    get switch() {
+        return isDefined(this.model.switch) ? this.model.switch : true;
+    }
     onItemSelect(item) {
         // handle only items without childrens
         if (!any(item.items)) {
@@ -396,10 +415,10 @@ class SideMenuComponent {
     }
 }
 SideMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SideMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SideMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SideMenuComponent, selector: "sfc-side-menu", inputs: { model: "model" }, outputs: { selected: "selected" }, host: { properties: { "class.open": "this.open" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <ul>\r\n        <sfc-side-menu-header [open]=\"open\" (toggle)=\"open =!open\"></sfc-side-menu-header>\r\n\r\n        <ng-container *ngFor=\"let item of model.items\" [ngSwitch]=\"item.type\">\r\n            <sfc-side-menu-item *ngSwitchCase=\"SideMenuItemType.Item\" [item]=\"item\" [open]=\"open\"\r\n                (selectItem)=\"onItemSelect($event)\">\r\n            </sfc-side-menu-item>\r\n\r\n            <sfc-side-menu-title *ngSwitchCase=\"SideMenuItemType.Title\" [label]=\"item.label\" [open]=\"open\">\r\n            </sfc-side-menu-title>\r\n        </ng-container>\r\n    </ul>\r\n</div>", styles: [":host .container{width:5em;height:inherit;overflow:hidden;transition:background .5s ease,width .5s ease-in-out}:host .container ul{margin:0;padding:0;list-style:none;overflow:hidden;display:flex;flex-direction:column}:host.open .container{width:11.25em}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: SideMenuHeaderComponent, selector: "sfc-side-menu-header", inputs: ["label", "open"], outputs: ["toggle"] }, { kind: "component", type: SideMenuItemComponent, selector: "sfc-side-menu-item", inputs: ["item", "open"], outputs: ["selectItem"] }, { kind: "component", type: SideMenuTitleComponent, selector: "sfc-side-menu-title", inputs: ["label", "open"] }] });
+SideMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SideMenuComponent, selector: "sfc-side-menu", inputs: { model: "model" }, outputs: { selected: "selected" }, host: { properties: { "class.open": "this.open", "class.switch": "this.switch" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <ul>\r\n        <sfc-side-menu-header [label]=\"model.label\" [open]=\"open\" [switch]=\"switch\" (toggle)=\"open =!open\">\r\n        </sfc-side-menu-header>\r\n\r\n        <ng-container *ngFor=\"let item of model.items\" [ngSwitch]=\"item.type\">\r\n            <sfc-side-menu-item *ngSwitchCase=\"SideMenuItemType.Item\" [item]=\"item\" [open]=\"open\"\r\n                (selectItem)=\"onItemSelect($event)\">\r\n            </sfc-side-menu-item>\r\n\r\n            <sfc-side-menu-title *ngSwitchCase=\"SideMenuItemType.Title\" [label]=\"item.label\" [open]=\"open\">\r\n            </sfc-side-menu-title>\r\n        </ng-container>\r\n    </ul>\r\n</div>", styles: [":host .container{width:5em;height:inherit;overflow:hidden}:host .container ul{margin:0;padding:0;list-style:none;overflow:hidden;display:flex;flex-direction:column}:host.open .container{width:11.25em}:host.switch .container{transition:background .5s ease,width .5s ease-in-out}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: SideMenuHeaderComponent, selector: "sfc-side-menu-header", inputs: ["label", "switch", "open"], outputs: ["toggle"] }, { kind: "component", type: SideMenuItemComponent, selector: "sfc-side-menu-item", inputs: ["item", "open"], outputs: ["selectItem"] }, { kind: "component", type: SideMenuTitleComponent, selector: "sfc-side-menu-title", inputs: ["label", "open"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SideMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-side-menu', template: "<div class=\"container\">\r\n    <ul>\r\n        <sfc-side-menu-header [open]=\"open\" (toggle)=\"open =!open\"></sfc-side-menu-header>\r\n\r\n        <ng-container *ngFor=\"let item of model.items\" [ngSwitch]=\"item.type\">\r\n            <sfc-side-menu-item *ngSwitchCase=\"SideMenuItemType.Item\" [item]=\"item\" [open]=\"open\"\r\n                (selectItem)=\"onItemSelect($event)\">\r\n            </sfc-side-menu-item>\r\n\r\n            <sfc-side-menu-title *ngSwitchCase=\"SideMenuItemType.Title\" [label]=\"item.label\" [open]=\"open\">\r\n            </sfc-side-menu-title>\r\n        </ng-container>\r\n    </ul>\r\n</div>", styles: [":host .container{width:5em;height:inherit;overflow:hidden;transition:background .5s ease,width .5s ease-in-out}:host .container ul{margin:0;padding:0;list-style:none;overflow:hidden;display:flex;flex-direction:column}:host.open .container{width:11.25em}\n"] }]
+            args: [{ selector: 'sfc-side-menu', template: "<div class=\"container\">\r\n    <ul>\r\n        <sfc-side-menu-header [label]=\"model.label\" [open]=\"open\" [switch]=\"switch\" (toggle)=\"open =!open\">\r\n        </sfc-side-menu-header>\r\n\r\n        <ng-container *ngFor=\"let item of model.items\" [ngSwitch]=\"item.type\">\r\n            <sfc-side-menu-item *ngSwitchCase=\"SideMenuItemType.Item\" [item]=\"item\" [open]=\"open\"\r\n                (selectItem)=\"onItemSelect($event)\">\r\n            </sfc-side-menu-item>\r\n\r\n            <sfc-side-menu-title *ngSwitchCase=\"SideMenuItemType.Title\" [label]=\"item.label\" [open]=\"open\">\r\n            </sfc-side-menu-title>\r\n        </ng-container>\r\n    </ul>\r\n</div>", styles: [":host .container{width:5em;height:inherit;overflow:hidden}:host .container ul{margin:0;padding:0;list-style:none;overflow:hidden;display:flex;flex-direction:column}:host.open .container{width:11.25em}:host.switch .container{transition:background .5s ease,width .5s ease-in-out}\n"] }]
         }], propDecorators: { model: [{
                 type: Input
             }], selected: [{
@@ -407,23 +426,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             }], open: [{
                 type: HostBinding,
                 args: ['class.' + UIClass.Open]
+            }], switch: [{
+                type: HostBinding,
+                args: [`class.${SideMenuConstants.CSS_SWITCH_CLASS}`]
             }] } });
 
 class DropdownMenuItemComponent {
     constructor() {
+        /* Inputs */
         this.item = { label: CommonConstants.EMPTY_STRING };
     }
+    /* End Inputs */
+    /* Host bindings */
     get _active() { return this.item.active || false; }
+    /* End Host bindings */
+    /* Host listeners */
     click() {
         if (this.item.click)
             this.item.click(this.item);
     }
 }
 DropdownMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DropdownMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DropdownMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DropdownMenuItemComponent, selector: "sfc-dropdown-menu-item", inputs: { item: "item" }, host: { listeners: { "click": "click()" }, properties: { "class.active": "this._active" } }, ngImport: i0, template: "<li>\r\n    <sfc-icon [icon]=\"item.icon\" [imageSrc]=\"item.image\"></sfc-icon>\r\n    <a>{{item.label}}</a>\r\n</li>\r\n\r\n<sfc-delimeter *ngIf=\"item.delimeter\"></sfc-delimeter>", styles: [":host{display:flex;flex-direction:column;padding:.1em 0}:host li{color:#545e61;display:flex;align-items:center;flex-wrap:wrap;padding:.4em;border:.0063em solid transparent;border-radius:.31em;font-weight:700;font-size:.8em;-webkit-user-select:none;user-select:none;transition:color .5s ease,border-color .5s ease,background .5s ease}:host li:hover,:host li:focus-within{background:#f5f7fa;border-color:#f5f7fa;color:#2bbbad;cursor:pointer;outline:none}:host li sfc-icon{padding-right:.625em;width:10%}:host.active li{background:#e6e9ed;border-color:#e6e9ed;color:#2bbbad}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.DelimeterComponent, selector: "sfc-delimeter", inputs: ["label", "direction"] }, { kind: "component", type: i3.IconComponent, selector: "sfc-icon", inputs: ["icon", "imageSrc"] }] });
+DropdownMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DropdownMenuItemComponent, selector: "sfc-dropdown-menu-item", inputs: { item: "item" }, host: { listeners: { "click": "click()" }, properties: { "class.active": "this._active" } }, ngImport: i0, template: "<li>\r\n    <sfc-icon [icon]=\"item.icon\" [imageSrc]=\"item.image\"></sfc-icon>\r\n    <a>{{item.label}}</a>\r\n</li>\r\n\r\n<sfc-delimeter *ngIf=\"item.delimeter\"></sfc-delimeter>", styles: [":host{display:flex;flex-direction:column;padding:.1em 0}:host li{color:#545e61;display:flex;align-items:center;padding:.4em;border:.0063em solid transparent;border-radius:.31em;font-weight:700;font-size:.8em;-webkit-user-select:none;user-select:none;transition:color .5s ease,border-color .5s ease,background .5s ease}:host li:hover,:host li:focus-within{background:#f5f7fa;border-color:#f5f7fa;color:#2bbbad;cursor:pointer;outline:none}:host li sfc-icon{padding-right:.625em;width:10%}:host.active li{background:#e6e9ed;border-color:#e6e9ed;color:#2bbbad}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.DelimeterComponent, selector: "sfc-delimeter", inputs: ["label", "direction"] }, { kind: "component", type: i3.IconComponent, selector: "sfc-icon", inputs: ["icon", "imageSrc"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DropdownMenuItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-dropdown-menu-item', template: "<li>\r\n    <sfc-icon [icon]=\"item.icon\" [imageSrc]=\"item.image\"></sfc-icon>\r\n    <a>{{item.label}}</a>\r\n</li>\r\n\r\n<sfc-delimeter *ngIf=\"item.delimeter\"></sfc-delimeter>", styles: [":host{display:flex;flex-direction:column;padding:.1em 0}:host li{color:#545e61;display:flex;align-items:center;flex-wrap:wrap;padding:.4em;border:.0063em solid transparent;border-radius:.31em;font-weight:700;font-size:.8em;-webkit-user-select:none;user-select:none;transition:color .5s ease,border-color .5s ease,background .5s ease}:host li:hover,:host li:focus-within{background:#f5f7fa;border-color:#f5f7fa;color:#2bbbad;cursor:pointer;outline:none}:host li sfc-icon{padding-right:.625em;width:10%}:host.active li{background:#e6e9ed;border-color:#e6e9ed;color:#2bbbad}\n"] }]
+            args: [{ selector: 'sfc-dropdown-menu-item', template: "<li>\r\n    <sfc-icon [icon]=\"item.icon\" [imageSrc]=\"item.image\"></sfc-icon>\r\n    <a>{{item.label}}</a>\r\n</li>\r\n\r\n<sfc-delimeter *ngIf=\"item.delimeter\"></sfc-delimeter>", styles: [":host{display:flex;flex-direction:column;padding:.1em 0}:host li{color:#545e61;display:flex;align-items:center;padding:.4em;border:.0063em solid transparent;border-radius:.31em;font-weight:700;font-size:.8em;-webkit-user-select:none;user-select:none;transition:color .5s ease,border-color .5s ease,background .5s ease}:host li:hover,:host li:focus-within{background:#f5f7fa;border-color:#f5f7fa;color:#2bbbad;cursor:pointer;outline:none}:host li sfc-icon{padding-right:.625em;width:10%}:host.active li{background:#e6e9ed;border-color:#e6e9ed;color:#2bbbad}\n"] }]
         }], propDecorators: { item: [{
                 type: Input
             }], _active: [{
@@ -492,7 +519,7 @@ class DropdownMenuComponent {
     }
 }
 DropdownMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DropdownMenuComponent, deps: [{ token: i3.ResizeService }, { token: WINDOW }], target: i0.ɵɵFactoryTarget.Component });
-DropdownMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DropdownMenuComponent, selector: "sfc-dropdown-menu", inputs: { items: "items", icon: "icon", defaultDots: "defaultDots", label: "label", hideOnClick: "hideOnClick", hideOnClickOutside: "hideOnClickOutside", bordered: "bordered", filled: "filled", position: "position", open: "open", autoResize: "autoResize" }, outputs: { selected: "selected" }, host: { properties: { "class.bordered": "this.bordered", "class.filled": "this.filled", "class": "this.position", "class.open": "this.open" } }, ngImport: i0, template: "<ul [sfcClickOutside]=\"hideOnClickOutside\" (action)=\"onClickOutside($event)\">\r\n    <li>\r\n        <div class=\"container\" (click)=\"toggle($event)\">\r\n            <span *ngIf=\"label\">{{label}}</span>\r\n            <fa-icon *ngIf=\"icon\" [icon]=\"icon\"></fa-icon>\r\n            <sfc-dots *ngIf=\"showDots\" [open]=\"open\"></sfc-dots>\r\n            <ng-content></ng-content>\r\n        </div>\r\n\r\n        <ul *ngIf=\"items.length\" [@openClose]=\"open\" class=\"dropdown-container\">\r\n            <sfc-dropdown-menu-item *ngFor=\"let item of items\" [item]=\"item\" (click)=\"onClick(item, $event)\">\r\n            </sfc-dropdown-menu-item>\r\n        </ul>\r\n    </li>\r\n</ul>", styles: [":host{display:inline-flex}:host ul{list-style:none;margin:0;padding-left:0}:host ul li{position:relative}:host ul li .container{display:flex;justify-content:center;align-items:center;cursor:pointer;transition:color .5s ease,background .5s ease;transition:color .5s ease;padding:.3em}:host ul li .container,:host-context(.sfc-default-theme) :host ul li .container{color:#545e61}:host-context(.sfc-dark-theme) :host ul li .container{color:#fff}:host ul li .container span,:host ul li .container fa-icon{font-size:.8em;font-weight:700}:host ul li .container span~fa-icon{margin-left:.3em}:host ul li .container:hover{color:#ffce54}:host ul li .dropdown-container{flex-direction:column;width:max-content;background:#fff;transition:color .5s ease;position:absolute;right:0;transition:opacity .5s ease;margin-top:1em;display:none;padding:.6em;border:.0063em solid #f5f7fa;border-radius:.1875em;box-shadow:0 .125em .625em;z-index:9999}:host ul li .dropdown-container,:host-context(.sfc-default-theme) :host ul li .dropdown-container{color:#e6e9ed}:host-context(.sfc-dark-theme) :host ul li .dropdown-container{color:#656d78}:host.open ul li .dropdown-container{display:flex}:host.bordered ul li .container{width:1.3em;height:1.3em;border:.1em solid;transition:border-color .5s ease;border-radius:.3em;padding:0}:host.bordered ul li .container,:host-context(.sfc-default-theme) :host.bordered ul li .container{border-color:#545e61}:host-context(.sfc-dark-theme) :host.bordered ul li .container{border-color:#fff}:host.bordered ul li .container:hover{border-color:#ffce54}:host.bordered ul li .container:hover ::ng-deep sfc-dots .dot{background:#ffce54}:host.filled ul li .container{width:1.3em;height:1.3em;border:.1em solid transparent;border-radius:1.3em;padding:0}:host.filled ul li .container sfc-dots ::ng-deep>.container>.dots-container>.dot{transition:background .5s ease}:host.filled ul li .container sfc-dots ::ng-deep>.container>.dots-container>.dot,:host-context(.sfc-default-theme) :host.filled ul li .container sfc-dots ::ng-deep>.container>.dots-container>.dot{background:#545e61}:host-context(.sfc-dark-theme) :host.filled ul li .container sfc-dots ::ng-deep>.container>.dots-container>.dot{background:#fff}:host.filled ul li .container:hover{background:#ffce54}:host.top ul li .dropdown-container{bottom:0;margin-bottom:2.18em;margin-top:0}:host.center ul li .dropdown-container{left:50%;transform:translate(-50%)}:host.left ul li .dropdown-container{right:0}:host.right ul li .dropdown-container{left:0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: i3.ClickOutsideDirective, selector: "[sfcClickOutside]", inputs: ["sfcClickOutside"], outputs: ["action"] }, { kind: "component", type: i3.DotsComponent, selector: "sfc-dots", inputs: ["open", "direction"] }, { kind: "component", type: DropdownMenuItemComponent, selector: "sfc-dropdown-menu-item", inputs: ["item"] }], animations: [
+DropdownMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DropdownMenuComponent, selector: "sfc-dropdown-menu", inputs: { items: "items", icon: "icon", defaultDots: "defaultDots", label: "label", hideOnClick: "hideOnClick", hideOnClickOutside: "hideOnClickOutside", bordered: "bordered", filled: "filled", position: "position", open: "open", autoResize: "autoResize" }, outputs: { selected: "selected" }, host: { properties: { "class.bordered": "this.bordered", "class.filled": "this.filled", "class": "this.position", "class.open": "this.open" } }, ngImport: i0, template: "<ul [sfcClickOutside]=\"hideOnClickOutside\" (action)=\"onClickOutside($event)\">\r\n    <li>\r\n        <div class=\"container\" (click)=\"toggle($event)\">\r\n            <span *ngIf=\"label\">{{label}}</span>\r\n            <fa-icon *ngIf=\"icon\" [icon]=\"icon\"></fa-icon>\r\n            <sfc-dots *ngIf=\"showDots\" [open]=\"open\"></sfc-dots>\r\n            <ng-content></ng-content>\r\n        </div>\r\n\r\n        <ul *ngIf=\"items.length\" [@openClose]=\"open\" class=\"dropdown-container\">\r\n            <sfc-dropdown-menu-item *ngFor=\"let item of items\" [item]=\"item\" (click)=\"onClick(item, $event)\">\r\n            </sfc-dropdown-menu-item>\r\n        </ul>\r\n    </li>\r\n</ul>", styles: [":host{display:inline-flex}:host ul{list-style:none;margin:0;padding-left:0}:host ul li{position:relative}:host ul li .container{display:flex;justify-content:center;align-items:center;cursor:pointer;transition:color .5s ease,background .5s ease;transition:color .5s ease;padding:.3em}:host ul li .container,:host-context(.sfc-default-theme) :host ul li .container{color:#545e61}:host-context(.sfc-dark-theme) :host ul li .container{color:#fff}:host ul li .container span,:host ul li .container fa-icon{font-size:.8em;font-weight:700}:host ul li .container span~fa-icon{margin-left:.3em}:host ul li .container:hover{color:#ffce54}:host ul li .dropdown-container{flex-direction:column;width:max-content;background:#fff;transition:color .5s ease;position:absolute;right:0;transition:opacity .5s ease;margin-top:1em;display:none;padding:.6em;border:.0063em solid #f5f7fa;border-radius:.1875em;box-shadow:0 .125em .625em;z-index:9999}:host ul li .dropdown-container,:host-context(.sfc-default-theme) :host ul li .dropdown-container{color:#e6e9ed}:host-context(.sfc-dark-theme) :host ul li .dropdown-container{color:#656d78}:host.open ul li .dropdown-container{display:flex}:host.bordered ul li .container{width:1.3em;height:1.3em;border:.1em solid;transition:border-color .5s ease;border-radius:.3em;padding:0}:host.bordered ul li .container,:host-context(.sfc-default-theme) :host.bordered ul li .container{border-color:#545e61}:host-context(.sfc-dark-theme) :host.bordered ul li .container{border-color:#fff}:host.bordered ul li .container:hover{border-color:#ffce54}:host.bordered ul li .container:hover ::ng-deep sfc-dots .dot{background:#ffce54}:host.filled ul li .container{width:1.3em;height:1.3em;border:.1em solid transparent;border-radius:1.3em;padding:0}:host.filled ul li .container sfc-dots ::ng-deep>.container>.dots-container>sfc-dot{transition:background .5s ease}:host.filled ul li .container sfc-dots ::ng-deep>.container>.dots-container>sfc-dot,:host-context(.sfc-default-theme) :host.filled ul li .container sfc-dots ::ng-deep>.container>.dots-container>sfc-dot{background:#545e61}:host-context(.sfc-dark-theme) :host.filled ul li .container sfc-dots ::ng-deep>.container>.dots-container>sfc-dot{background:#fff}:host.filled ul li .container:hover{background:#ffce54}:host.filled ul li .container:hover sfc-dots ::ng-deep>.container>.dots-container>sfc-dot{transition:background .5s ease}:host.filled ul li .container:hover sfc-dots ::ng-deep>.container>.dots-container>sfc-dot,:host-context(.sfc-default-theme) :host.filled ul li .container:hover sfc-dots ::ng-deep>.container>.dots-container>sfc-dot{background:#fff}:host-context(.sfc-dark-theme) :host.filled ul li .container:hover sfc-dots ::ng-deep>.container>.dots-container>sfc-dot{background:#fff}:host.top ul li .dropdown-container{bottom:0;margin-bottom:2.18em;margin-top:0}:host.center ul li .dropdown-container{left:50%;transform:translate(-50%)}:host.left ul li .dropdown-container{right:0}:host.right ul li .dropdown-container{left:0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: i3.ClickOutsideDirective, selector: "[sfcClickOutside]", inputs: ["sfcClickOutside"], outputs: ["action"] }, { kind: "component", type: i3.DotsComponent, selector: "sfc-dots", inputs: ["open", "direction"] }, { kind: "component", type: DropdownMenuItemComponent, selector: "sfc-dropdown-menu-item", inputs: ["item"] }], animations: [
         trigger('openClose', [
             state('true', style({
                 opacity: 1
@@ -519,7 +546,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                                 animate('0.1s')
                             ])
                         ])
-                    ], template: "<ul [sfcClickOutside]=\"hideOnClickOutside\" (action)=\"onClickOutside($event)\">\r\n    <li>\r\n        <div class=\"container\" (click)=\"toggle($event)\">\r\n            <span *ngIf=\"label\">{{label}}</span>\r\n            <fa-icon *ngIf=\"icon\" [icon]=\"icon\"></fa-icon>\r\n            <sfc-dots *ngIf=\"showDots\" [open]=\"open\"></sfc-dots>\r\n            <ng-content></ng-content>\r\n        </div>\r\n\r\n        <ul *ngIf=\"items.length\" [@openClose]=\"open\" class=\"dropdown-container\">\r\n            <sfc-dropdown-menu-item *ngFor=\"let item of items\" [item]=\"item\" (click)=\"onClick(item, $event)\">\r\n            </sfc-dropdown-menu-item>\r\n        </ul>\r\n    </li>\r\n</ul>", styles: [":host{display:inline-flex}:host ul{list-style:none;margin:0;padding-left:0}:host ul li{position:relative}:host ul li .container{display:flex;justify-content:center;align-items:center;cursor:pointer;transition:color .5s ease,background .5s ease;transition:color .5s ease;padding:.3em}:host ul li .container,:host-context(.sfc-default-theme) :host ul li .container{color:#545e61}:host-context(.sfc-dark-theme) :host ul li .container{color:#fff}:host ul li .container span,:host ul li .container fa-icon{font-size:.8em;font-weight:700}:host ul li .container span~fa-icon{margin-left:.3em}:host ul li .container:hover{color:#ffce54}:host ul li .dropdown-container{flex-direction:column;width:max-content;background:#fff;transition:color .5s ease;position:absolute;right:0;transition:opacity .5s ease;margin-top:1em;display:none;padding:.6em;border:.0063em solid #f5f7fa;border-radius:.1875em;box-shadow:0 .125em .625em;z-index:9999}:host ul li .dropdown-container,:host-context(.sfc-default-theme) :host ul li .dropdown-container{color:#e6e9ed}:host-context(.sfc-dark-theme) :host ul li .dropdown-container{color:#656d78}:host.open ul li .dropdown-container{display:flex}:host.bordered ul li .container{width:1.3em;height:1.3em;border:.1em solid;transition:border-color .5s ease;border-radius:.3em;padding:0}:host.bordered ul li .container,:host-context(.sfc-default-theme) :host.bordered ul li .container{border-color:#545e61}:host-context(.sfc-dark-theme) :host.bordered ul li .container{border-color:#fff}:host.bordered ul li .container:hover{border-color:#ffce54}:host.bordered ul li .container:hover ::ng-deep sfc-dots .dot{background:#ffce54}:host.filled ul li .container{width:1.3em;height:1.3em;border:.1em solid transparent;border-radius:1.3em;padding:0}:host.filled ul li .container sfc-dots ::ng-deep>.container>.dots-container>.dot{transition:background .5s ease}:host.filled ul li .container sfc-dots ::ng-deep>.container>.dots-container>.dot,:host-context(.sfc-default-theme) :host.filled ul li .container sfc-dots ::ng-deep>.container>.dots-container>.dot{background:#545e61}:host-context(.sfc-dark-theme) :host.filled ul li .container sfc-dots ::ng-deep>.container>.dots-container>.dot{background:#fff}:host.filled ul li .container:hover{background:#ffce54}:host.top ul li .dropdown-container{bottom:0;margin-bottom:2.18em;margin-top:0}:host.center ul li .dropdown-container{left:50%;transform:translate(-50%)}:host.left ul li .dropdown-container{right:0}:host.right ul li .dropdown-container{left:0}\n"] }]
+                    ], template: "<ul [sfcClickOutside]=\"hideOnClickOutside\" (action)=\"onClickOutside($event)\">\r\n    <li>\r\n        <div class=\"container\" (click)=\"toggle($event)\">\r\n            <span *ngIf=\"label\">{{label}}</span>\r\n            <fa-icon *ngIf=\"icon\" [icon]=\"icon\"></fa-icon>\r\n            <sfc-dots *ngIf=\"showDots\" [open]=\"open\"></sfc-dots>\r\n            <ng-content></ng-content>\r\n        </div>\r\n\r\n        <ul *ngIf=\"items.length\" [@openClose]=\"open\" class=\"dropdown-container\">\r\n            <sfc-dropdown-menu-item *ngFor=\"let item of items\" [item]=\"item\" (click)=\"onClick(item, $event)\">\r\n            </sfc-dropdown-menu-item>\r\n        </ul>\r\n    </li>\r\n</ul>", styles: [":host{display:inline-flex}:host ul{list-style:none;margin:0;padding-left:0}:host ul li{position:relative}:host ul li .container{display:flex;justify-content:center;align-items:center;cursor:pointer;transition:color .5s ease,background .5s ease;transition:color .5s ease;padding:.3em}:host ul li .container,:host-context(.sfc-default-theme) :host ul li .container{color:#545e61}:host-context(.sfc-dark-theme) :host ul li .container{color:#fff}:host ul li .container span,:host ul li .container fa-icon{font-size:.8em;font-weight:700}:host ul li .container span~fa-icon{margin-left:.3em}:host ul li .container:hover{color:#ffce54}:host ul li .dropdown-container{flex-direction:column;width:max-content;background:#fff;transition:color .5s ease;position:absolute;right:0;transition:opacity .5s ease;margin-top:1em;display:none;padding:.6em;border:.0063em solid #f5f7fa;border-radius:.1875em;box-shadow:0 .125em .625em;z-index:9999}:host ul li .dropdown-container,:host-context(.sfc-default-theme) :host ul li .dropdown-container{color:#e6e9ed}:host-context(.sfc-dark-theme) :host ul li .dropdown-container{color:#656d78}:host.open ul li .dropdown-container{display:flex}:host.bordered ul li .container{width:1.3em;height:1.3em;border:.1em solid;transition:border-color .5s ease;border-radius:.3em;padding:0}:host.bordered ul li .container,:host-context(.sfc-default-theme) :host.bordered ul li .container{border-color:#545e61}:host-context(.sfc-dark-theme) :host.bordered ul li .container{border-color:#fff}:host.bordered ul li .container:hover{border-color:#ffce54}:host.bordered ul li .container:hover ::ng-deep sfc-dots .dot{background:#ffce54}:host.filled ul li .container{width:1.3em;height:1.3em;border:.1em solid transparent;border-radius:1.3em;padding:0}:host.filled ul li .container sfc-dots ::ng-deep>.container>.dots-container>sfc-dot{transition:background .5s ease}:host.filled ul li .container sfc-dots ::ng-deep>.container>.dots-container>sfc-dot,:host-context(.sfc-default-theme) :host.filled ul li .container sfc-dots ::ng-deep>.container>.dots-container>sfc-dot{background:#545e61}:host-context(.sfc-dark-theme) :host.filled ul li .container sfc-dots ::ng-deep>.container>.dots-container>sfc-dot{background:#fff}:host.filled ul li .container:hover{background:#ffce54}:host.filled ul li .container:hover sfc-dots ::ng-deep>.container>.dots-container>sfc-dot{transition:background .5s ease}:host.filled ul li .container:hover sfc-dots ::ng-deep>.container>.dots-container>sfc-dot,:host-context(.sfc-default-theme) :host.filled ul li .container:hover sfc-dots ::ng-deep>.container>.dots-container>sfc-dot{background:#fff}:host-context(.sfc-dark-theme) :host.filled ul li .container:hover sfc-dots ::ng-deep>.container>.dots-container>sfc-dot{background:#fff}:host.top ul li .dropdown-container{bottom:0;margin-bottom:2.18em;margin-top:0}:host.center ul li .dropdown-container{left:50%;transform:translate(-50%)}:host.left ul li .dropdown-container{right:0}:host.right ul li .dropdown-container{left:0}\n"] }]
         }], ctorParameters: function () {
         return [{ type: i3.ResizeService }, { type: Window, decorators: [{
                         type: Inject,
@@ -612,6 +639,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Output
             }] } });
 
+class RouterMenuItemComponent {
+    constructor() {
+        this.item = { id: CommonConstants.EMPTY_STRING, label: CommonConstants.EMPTY_STRING, selected: false };
+    }
+    get _selected() {
+        var _a;
+        return (_a = this.item.selected) !== null && _a !== void 0 ? _a : false;
+    }
+    click() {
+        if (this.item.click)
+            this.item.click(this.item);
+    }
+}
+RouterMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: RouterMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+RouterMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: RouterMenuItemComponent, selector: "sfc-router-menu-item", inputs: { item: "item" }, host: { listeners: { "click": "click()" }, properties: { "class.selected": "this._selected" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"content\">\r\n        <sfc-icon [icon]=\"item.icon\" [imageSrc]=\"item.image\"></sfc-icon>\r\n        <span>{{item.label}}</span>\r\n    </div>\r\n</div>", styles: [":host{cursor:pointer;-webkit-user-select:none;user-select:none}:host .container{display:flex;align-items:center;justify-content:center;height:100%}:host .container .content{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;transition:color .5s ease;padding:.5em .8em;width:100%}:host .container .content,:host-context(.sfc-default-theme) :host .container .content{color:#545e61}:host-context(.sfc-dark-theme) :host .container .content{color:#fff}:host .container .content span{font-size:.7em;font-weight:700}:host .container .content sfc-icon{margin-right:.5em}:host.selected .container .content,:host:hover .container .content{color:#ffce54}:host.selected .container .content{border:1px solid #ffce54;border-radius:3em;background:#ffce54;color:#fff}\n"], dependencies: [{ kind: "component", type: i3.IconComponent, selector: "sfc-icon", inputs: ["icon", "imageSrc"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: RouterMenuItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-router-menu-item', template: "<div class=\"container\">\r\n    <div class=\"content\">\r\n        <sfc-icon [icon]=\"item.icon\" [imageSrc]=\"item.image\"></sfc-icon>\r\n        <span>{{item.label}}</span>\r\n    </div>\r\n</div>", styles: [":host{cursor:pointer;-webkit-user-select:none;user-select:none}:host .container{display:flex;align-items:center;justify-content:center;height:100%}:host .container .content{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;transition:color .5s ease;padding:.5em .8em;width:100%}:host .container .content,:host-context(.sfc-default-theme) :host .container .content{color:#545e61}:host-context(.sfc-dark-theme) :host .container .content{color:#fff}:host .container .content span{font-size:.7em;font-weight:700}:host .container .content sfc-icon{margin-right:.5em}:host.selected .container .content,:host:hover .container .content{color:#ffce54}:host.selected .container .content{border:1px solid #ffce54;border-radius:3em;background:#ffce54;color:#fff}\n"] }]
+        }], propDecorators: { item: [{
+                type: Input
+            }], _selected: [{
+                type: HostBinding,
+                args: ['class.' + UIClass.Selected]
+            }], click: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+class RouterMenuComponent {
+    constructor() {
+        this.items = [];
+        this.selected = new EventEmitter();
+    }
+    ngOnInit() {
+        if (all(this.items, (item) => { var _a; return !((_a = item.selected) !== null && _a !== void 0 ? _a : false); })) {
+            this.items[0].selected = true;
+        }
+    }
+    onClick(item) {
+        this.items.forEach((item) => item.selected = false);
+        item.selected = true;
+        this.selected.emit(item);
+    }
+}
+RouterMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: RouterMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+RouterMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: RouterMenuComponent, selector: "sfc-router-menu", inputs: { items: "items" }, outputs: { selected: "selected" }, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"content\">\r\n        <div class=\"items\">\r\n            <sfc-router-menu-item *ngFor=\"let item of items\" [item]=\"item\" (click)=\"onClick(item)\">\r\n            </sfc-router-menu-item>\r\n        </div>\r\n    </div>    \r\n</div>", styles: [":host{width:100%}:host .container .content .items{display:flex;flex-wrap:wrap;justify-content:space-evenly;padding:.625em}:host .container .content .items sfc-router-menu-item{flex:50%}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: RouterMenuItemComponent, selector: "sfc-router-menu-item", inputs: ["item"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: RouterMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-router-menu', template: "<div class=\"container\">\r\n    <div class=\"content\">\r\n        <div class=\"items\">\r\n            <sfc-router-menu-item *ngFor=\"let item of items\" [item]=\"item\" (click)=\"onClick(item)\">\r\n            </sfc-router-menu-item>\r\n        </div>\r\n    </div>    \r\n</div>", styles: [":host{width:100%}:host .container .content .items{display:flex;flex-wrap:wrap;justify-content:space-evenly;padding:.625em}:host .container .content .items sfc-router-menu-item{flex:50%}\n"] }]
+        }], propDecorators: { items: [{
+                type: Input
+            }], selected: [{
+                type: Output
+            }] } });
+
 var StarType;
 (function (StarType) {
     StarType["None"] = "none";
@@ -813,7 +895,7 @@ class AvatarComponent {
          * Progress colors model
          */
         this._progressModel = this.PROGRESS_MODEL_DEFAULT;
-        this.data = this.DATA_MODEL_DEFAULT;
+        this._data = this.DATA_MODEL_DEFAULT;
         this.stars = false;
         this.starsValue = 0;
         this.badges = [];
@@ -824,19 +906,25 @@ class AvatarComponent {
     set progressModel(value) {
         this._progressModel = Object.assign(Object.assign({}, this.PROGRESS_MODEL_DEFAULT), value);
     }
+    set data(value) {
+        this._data = Object.assign(Object.assign({}, this.DATA_MODEL_DEFAULT), value);
+        if (!isDefined(this._data.image)) {
+            this._data.image = AvatarConstants.DATA_DEFAULT_IMAGE;
+        }
+    }
+    get data() { return this._data; }
     ngOnInit() {
         this.imageModel = new AvatarImageModel(this.radius, this.stroke, this.data.image);
-        this.data = Object.assign(Object.assign({}, this.DATA_MODEL_DEFAULT), this.data);
     }
     get strokeDashOffset() {
         return Math.round(this.imageModel.Circumference - (this.progress / 100 * this.imageModel.Circumference));
     }
 }
 AvatarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: AvatarComponent, selector: "sfc-avatar", inputs: { radius: "radius", stroke: "stroke", progress: "progress", progressModel: "progressModel", data: "data", stars: "stars", starsValue: "starsValue", badges: "badges" }, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"avatar-image-container\">\r\n        <div class=\"avatar\" (mouseenter)=\"stroke = imageModel.Stroke * STROKE_HOVER_VALUE\"\r\n            (mouseleave)=\"stroke = imageModel.Stroke\">\r\n\r\n            <div class=\"avatar-image\">\r\n                <svg [attr.height]=\"imageModel.Height\" [attr.width]=\"imageModel.Width\">\r\n                    <defs>\r\n                        <pattern id=\"{{imageModel.ImageId}}\" patternUnits=\"userSpaceOnUse\"\r\n                            [attr.height]=\"imageModel.Height\" [attr.width]=\"imageModel.Width\">\r\n                            <image [attr.height]=\"imageModel.Height\" [attr.width]=\"imageModel.Width\"\r\n                                [attr.xlink:href]=\"data.image\" preserveAspectRatio=\"xMidYMid slice\"></image>\r\n                        </pattern>\r\n                    </defs>\r\n                    <circle class=\"progress\" [attr.stroke]=\"progressModel.color\" [attr.stroke-width]=\"stroke\"\r\n                        fill=\"transparent\" [attr.r]=\"imageModel.NormalizedRadius\" [attr.cx]=\"radius\"\r\n                        [attr.cy]=\"radius\" />\r\n                    <circle class=\"progress\" [attr.stroke]=\"progressModel.filledColor\"\r\n                        [attr.stroke-dasharray]=\"imageModel.Circumference + ' ' + imageModel.Circumference\"\r\n                        [ngStyle]=\"{'stroke-dashoffset':strokeDashOffset}\" [attr.stroke-width]=\"stroke\"\r\n                        fill=\"transparent\" [attr.r]=\"imageModel.NormalizedRadius\" [attr.cx]=\"radius\"\r\n                        [attr.cy]=\"radius\" />\r\n\r\n                    <circle [attr.cx]=\"radius\" [attr.cy]=\"radius\" [attr.r]=\"imageModel.ImageRadius\"\r\n                        attr.fill=\"url('#{{imageModel.ImageId}}')\" />\r\n                </svg>\r\n            </div>\r\n\r\n            <sfc-avatar-badge *ngFor=\"let badge of badges\" [model]=\"badge\" [radius]=\"radius\"\r\n                [stroke]=\"imageModel.Stroke\" [normalizedRadius]=\"imageModel.NormalizedRadius\"\r\n                [background]=\"progressModel.filledColor\">\r\n            </sfc-avatar-badge>\r\n\r\n        </div>\r\n\r\n        <sfc-stars *ngIf=\"stars\" [value]=\"starsValue\"></sfc-stars>\r\n    </div>\r\n\r\n    <div class=\"avatar-data-container\">\r\n        <div class=\"fullname\" [style.fontSize.px]=\"radius / FULLNAME_PART_VALUE\">\r\n            <span>{{data.firstName}} {{data.lastName}}</span>\r\n        </div>\r\n        <div class=\"title\" [style.fontSize.px]=\"radius / TITLE_PART_VALUE\">\r\n            <span>{{data.title}}</span>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host .container .avatar-image-container{display:flex;align-items:center;justify-content:center;flex-direction:column}:host .container .avatar-image-container .avatar{position:relative}:host .container .avatar-image-container .avatar .avatar-image{display:flex;align-items:center;justify-content:center;overflow:hidden}:host .container .avatar-image-container .avatar .avatar-image circle{transform-origin:50% 50%;transition:stroke-dashoffset .35s,stroke-width .3s}:host .container .avatar-image-container .avatar .avatar-image circle.progress{transform:rotate(-90deg)}:host .container .avatar-image-container sfc-stars{margin-top:.5em}:host .container .avatar-data-container{display:flex;flex-direction:column;align-items:center;font-size:1em;font-weight:700;-webkit-user-select:none;user-select:none}:host .container .avatar-data-container .fullname{transition:color .5s ease}:host .container .avatar-data-container .fullname,:host-context(.sfc-default-theme) :host .container .avatar-data-container .fullname{color:#545e61}:host-context(.sfc-dark-theme) :host .container .avatar-data-container .fullname{color:#f5f7fa}:host .container .avatar-data-container .title{color:#aab2bd}:host .container .avatar-data-container .fullname,:host .container .avatar-data-container .title{transition:color .5s ease}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: StarsComponent, selector: "sfc-stars", inputs: ["value", "count"] }, { kind: "component", type: AvatarBadgeComponent, selector: "sfc-avatar-badge", inputs: ["background", "model", "radius", "normalizedRadius", "stroke"] }] });
+AvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: AvatarComponent, selector: "sfc-avatar", inputs: { radius: "radius", stroke: "stroke", progress: "progress", progressModel: "progressModel", data: "data", stars: "stars", starsValue: "starsValue", badges: "badges" }, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"avatar-image-container\">\r\n        <div class=\"avatar\" (mouseenter)=\"stroke = imageModel.Stroke * STROKE_HOVER_VALUE\"\r\n            (mouseleave)=\"stroke = imageModel.Stroke\">\r\n\r\n            <div class=\"avatar-image\">\r\n                <svg [attr.height]=\"imageModel.Height\" [attr.width]=\"imageModel.Width\">\r\n                    <defs>\r\n                        <pattern id=\"{{imageModel.ImageId}}\" patternUnits=\"userSpaceOnUse\"\r\n                            [attr.height]=\"imageModel.Height\" [attr.width]=\"imageModel.Width\">\r\n                            <image [attr.height]=\"imageModel.Height\" [attr.width]=\"imageModel.Width\"\r\n                                [attr.xlink:href]=\"data.image\" preserveAspectRatio=\"xMidYMid slice\"></image>\r\n                        </pattern>\r\n                    </defs>\r\n                    <circle class=\"progress\" [attr.stroke]=\"progressModel.color\" [attr.stroke-width]=\"stroke\"\r\n                        fill=\"transparent\" [attr.r]=\"imageModel.NormalizedRadius\" [attr.cx]=\"radius\"\r\n                        [attr.cy]=\"radius\" />\r\n                    <circle class=\"progress\" [attr.stroke]=\"progressModel.filledColor\"\r\n                        [attr.stroke-dasharray]=\"imageModel.Circumference + ' ' + imageModel.Circumference\"\r\n                        [ngStyle]=\"{'stroke-dashoffset':strokeDashOffset}\" [attr.stroke-width]=\"stroke\"\r\n                        fill=\"transparent\" [attr.r]=\"imageModel.NormalizedRadius\" [attr.cx]=\"radius\"\r\n                        [attr.cy]=\"radius\" />\r\n\r\n                    <circle [attr.cx]=\"radius\" [attr.cy]=\"radius\" [attr.r]=\"imageModel.ImageRadius\"\r\n                        attr.fill=\"url('#{{imageModel.ImageId}}')\" />\r\n                </svg>\r\n\r\n                <ng-content></ng-content>\r\n            </div>            \r\n\r\n            <sfc-avatar-badge *ngFor=\"let badge of badges\" [model]=\"badge\" [radius]=\"radius\"\r\n                [stroke]=\"imageModel.Stroke\" [normalizedRadius]=\"imageModel.NormalizedRadius\"\r\n                [background]=\"progressModel.filledColor\">\r\n            </sfc-avatar-badge>\r\n        </div>\r\n\r\n        <sfc-stars *ngIf=\"stars\" [value]=\"starsValue\"></sfc-stars>\r\n    </div>\r\n\r\n    <div class=\"avatar-data-container\">\r\n        <div class=\"fullname\" [style.fontSize.px]=\"radius / FULLNAME_PART_VALUE\">\r\n            <span>{{data.firstName}} {{data.lastName}}</span>\r\n        </div>\r\n        <div class=\"title\" [style.fontSize.px]=\"radius / TITLE_PART_VALUE\">\r\n            <span>{{data.title}}</span>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host .container .avatar-image-container{display:flex;align-items:center;justify-content:center;flex-direction:column}:host .container .avatar-image-container .avatar{position:relative}:host .container .avatar-image-container .avatar .avatar-image{display:flex;align-items:center;justify-content:center;overflow:hidden}:host .container .avatar-image-container .avatar .avatar-image circle{transform-origin:50% 50%;transition:stroke-dashoffset .35s,stroke-width .3s}:host .container .avatar-image-container .avatar .avatar-image circle.progress{transform:rotate(-90deg)}:host .container .avatar-data-container{display:flex;flex-direction:column;align-items:center;font-size:1em;font-weight:700;-webkit-user-select:none;user-select:none}:host .container .avatar-data-container .fullname{transition:color .5s ease}:host .container .avatar-data-container .fullname,:host-context(.sfc-default-theme) :host .container .avatar-data-container .fullname{color:#545e61}:host-context(.sfc-dark-theme) :host .container .avatar-data-container .fullname{color:#f5f7fa}:host .container .avatar-data-container .title{color:#aab2bd}:host .container .avatar-data-container .fullname,:host .container .avatar-data-container .title{transition:color .5s ease}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: StarsComponent, selector: "sfc-stars", inputs: ["value", "count"] }, { kind: "component", type: AvatarBadgeComponent, selector: "sfc-avatar-badge", inputs: ["background", "model", "radius", "normalizedRadius", "stroke"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AvatarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-avatar', template: "<div class=\"container\">\r\n    <div class=\"avatar-image-container\">\r\n        <div class=\"avatar\" (mouseenter)=\"stroke = imageModel.Stroke * STROKE_HOVER_VALUE\"\r\n            (mouseleave)=\"stroke = imageModel.Stroke\">\r\n\r\n            <div class=\"avatar-image\">\r\n                <svg [attr.height]=\"imageModel.Height\" [attr.width]=\"imageModel.Width\">\r\n                    <defs>\r\n                        <pattern id=\"{{imageModel.ImageId}}\" patternUnits=\"userSpaceOnUse\"\r\n                            [attr.height]=\"imageModel.Height\" [attr.width]=\"imageModel.Width\">\r\n                            <image [attr.height]=\"imageModel.Height\" [attr.width]=\"imageModel.Width\"\r\n                                [attr.xlink:href]=\"data.image\" preserveAspectRatio=\"xMidYMid slice\"></image>\r\n                        </pattern>\r\n                    </defs>\r\n                    <circle class=\"progress\" [attr.stroke]=\"progressModel.color\" [attr.stroke-width]=\"stroke\"\r\n                        fill=\"transparent\" [attr.r]=\"imageModel.NormalizedRadius\" [attr.cx]=\"radius\"\r\n                        [attr.cy]=\"radius\" />\r\n                    <circle class=\"progress\" [attr.stroke]=\"progressModel.filledColor\"\r\n                        [attr.stroke-dasharray]=\"imageModel.Circumference + ' ' + imageModel.Circumference\"\r\n                        [ngStyle]=\"{'stroke-dashoffset':strokeDashOffset}\" [attr.stroke-width]=\"stroke\"\r\n                        fill=\"transparent\" [attr.r]=\"imageModel.NormalizedRadius\" [attr.cx]=\"radius\"\r\n                        [attr.cy]=\"radius\" />\r\n\r\n                    <circle [attr.cx]=\"radius\" [attr.cy]=\"radius\" [attr.r]=\"imageModel.ImageRadius\"\r\n                        attr.fill=\"url('#{{imageModel.ImageId}}')\" />\r\n                </svg>\r\n            </div>\r\n\r\n            <sfc-avatar-badge *ngFor=\"let badge of badges\" [model]=\"badge\" [radius]=\"radius\"\r\n                [stroke]=\"imageModel.Stroke\" [normalizedRadius]=\"imageModel.NormalizedRadius\"\r\n                [background]=\"progressModel.filledColor\">\r\n            </sfc-avatar-badge>\r\n\r\n        </div>\r\n\r\n        <sfc-stars *ngIf=\"stars\" [value]=\"starsValue\"></sfc-stars>\r\n    </div>\r\n\r\n    <div class=\"avatar-data-container\">\r\n        <div class=\"fullname\" [style.fontSize.px]=\"radius / FULLNAME_PART_VALUE\">\r\n            <span>{{data.firstName}} {{data.lastName}}</span>\r\n        </div>\r\n        <div class=\"title\" [style.fontSize.px]=\"radius / TITLE_PART_VALUE\">\r\n            <span>{{data.title}}</span>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host .container .avatar-image-container{display:flex;align-items:center;justify-content:center;flex-direction:column}:host .container .avatar-image-container .avatar{position:relative}:host .container .avatar-image-container .avatar .avatar-image{display:flex;align-items:center;justify-content:center;overflow:hidden}:host .container .avatar-image-container .avatar .avatar-image circle{transform-origin:50% 50%;transition:stroke-dashoffset .35s,stroke-width .3s}:host .container .avatar-image-container .avatar .avatar-image circle.progress{transform:rotate(-90deg)}:host .container .avatar-image-container sfc-stars{margin-top:.5em}:host .container .avatar-data-container{display:flex;flex-direction:column;align-items:center;font-size:1em;font-weight:700;-webkit-user-select:none;user-select:none}:host .container .avatar-data-container .fullname{transition:color .5s ease}:host .container .avatar-data-container .fullname,:host-context(.sfc-default-theme) :host .container .avatar-data-container .fullname{color:#545e61}:host-context(.sfc-dark-theme) :host .container .avatar-data-container .fullname{color:#f5f7fa}:host .container .avatar-data-container .title{color:#aab2bd}:host .container .avatar-data-container .fullname,:host .container .avatar-data-container .title{transition:color .5s ease}\n"] }]
+            args: [{ selector: 'sfc-avatar', template: "<div class=\"container\">\r\n    <div class=\"avatar-image-container\">\r\n        <div class=\"avatar\" (mouseenter)=\"stroke = imageModel.Stroke * STROKE_HOVER_VALUE\"\r\n            (mouseleave)=\"stroke = imageModel.Stroke\">\r\n\r\n            <div class=\"avatar-image\">\r\n                <svg [attr.height]=\"imageModel.Height\" [attr.width]=\"imageModel.Width\">\r\n                    <defs>\r\n                        <pattern id=\"{{imageModel.ImageId}}\" patternUnits=\"userSpaceOnUse\"\r\n                            [attr.height]=\"imageModel.Height\" [attr.width]=\"imageModel.Width\">\r\n                            <image [attr.height]=\"imageModel.Height\" [attr.width]=\"imageModel.Width\"\r\n                                [attr.xlink:href]=\"data.image\" preserveAspectRatio=\"xMidYMid slice\"></image>\r\n                        </pattern>\r\n                    </defs>\r\n                    <circle class=\"progress\" [attr.stroke]=\"progressModel.color\" [attr.stroke-width]=\"stroke\"\r\n                        fill=\"transparent\" [attr.r]=\"imageModel.NormalizedRadius\" [attr.cx]=\"radius\"\r\n                        [attr.cy]=\"radius\" />\r\n                    <circle class=\"progress\" [attr.stroke]=\"progressModel.filledColor\"\r\n                        [attr.stroke-dasharray]=\"imageModel.Circumference + ' ' + imageModel.Circumference\"\r\n                        [ngStyle]=\"{'stroke-dashoffset':strokeDashOffset}\" [attr.stroke-width]=\"stroke\"\r\n                        fill=\"transparent\" [attr.r]=\"imageModel.NormalizedRadius\" [attr.cx]=\"radius\"\r\n                        [attr.cy]=\"radius\" />\r\n\r\n                    <circle [attr.cx]=\"radius\" [attr.cy]=\"radius\" [attr.r]=\"imageModel.ImageRadius\"\r\n                        attr.fill=\"url('#{{imageModel.ImageId}}')\" />\r\n                </svg>\r\n\r\n                <ng-content></ng-content>\r\n            </div>            \r\n\r\n            <sfc-avatar-badge *ngFor=\"let badge of badges\" [model]=\"badge\" [radius]=\"radius\"\r\n                [stroke]=\"imageModel.Stroke\" [normalizedRadius]=\"imageModel.NormalizedRadius\"\r\n                [background]=\"progressModel.filledColor\">\r\n            </sfc-avatar-badge>\r\n        </div>\r\n\r\n        <sfc-stars *ngIf=\"stars\" [value]=\"starsValue\"></sfc-stars>\r\n    </div>\r\n\r\n    <div class=\"avatar-data-container\">\r\n        <div class=\"fullname\" [style.fontSize.px]=\"radius / FULLNAME_PART_VALUE\">\r\n            <span>{{data.firstName}} {{data.lastName}}</span>\r\n        </div>\r\n        <div class=\"title\" [style.fontSize.px]=\"radius / TITLE_PART_VALUE\">\r\n            <span>{{data.title}}</span>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host .container .avatar-image-container{display:flex;align-items:center;justify-content:center;flex-direction:column}:host .container .avatar-image-container .avatar{position:relative}:host .container .avatar-image-container .avatar .avatar-image{display:flex;align-items:center;justify-content:center;overflow:hidden}:host .container .avatar-image-container .avatar .avatar-image circle{transform-origin:50% 50%;transition:stroke-dashoffset .35s,stroke-width .3s}:host .container .avatar-image-container .avatar .avatar-image circle.progress{transform:rotate(-90deg)}:host .container .avatar-data-container{display:flex;flex-direction:column;align-items:center;font-size:1em;font-weight:700;-webkit-user-select:none;user-select:none}:host .container .avatar-data-container .fullname{transition:color .5s ease}:host .container .avatar-data-container .fullname,:host-context(.sfc-default-theme) :host .container .avatar-data-container .fullname{color:#545e61}:host-context(.sfc-dark-theme) :host .container .avatar-data-container .fullname{color:#f5f7fa}:host .container .avatar-data-container .title{color:#aab2bd}:host .container .avatar-data-container .fullname,:host .container .avatar-data-container .title{transition:color .5s ease}\n"] }]
         }], propDecorators: { radius: [{
                 type: Input
             }], stroke: [{
@@ -898,7 +986,7 @@ function getProgressColorDefaultFunc(value) {
     }
 }
 function getProgressColorDynamicallyFunc(value, total) {
-    const colorsCount = Object.keys(ProgressColor).length, part = Math.ceil((total || CommonConstants.FULL_PERCENTAGE) / colorsCount);
+    const colorsCount = Object.keys(ProgressColor).length, part = (total || CommonConstants.FULL_PERCENTAGE) / colorsCount;
     if (value < part) {
         return ProgressColor.MIN_LOW;
     }
@@ -1027,6 +1115,7 @@ class ProgressCircleComponent extends ProgressBaseComponent {
     constructor() {
         super(...arguments);
         this.total = CommonConstants.FULL_PERCENTAGE;
+        this.partition = false;
     }
     get reversed() {
         return (this.progress / this.total) * CommonConstants.FULL_PERCENTAGE > 50;
@@ -1036,12 +1125,14 @@ class ProgressCircleComponent extends ProgressBaseComponent {
     }
 }
 ProgressCircleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ProgressCircleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ProgressCircleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ProgressCircleComponent, selector: "sfc-progress-circle", inputs: { total: "total" }, host: { properties: { "class.reversed": "this.reversed" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"container\" [style.background]=\"background\">\r\n    <span>{{progress}}</span>\r\n    <div class=\"circle\">\r\n        <div class=\"bar\" [ngStyle]=\"{'transform': transformRotate, \r\n            'border-color': getColor(progress, total)}\"></div>\r\n        <div class=\"fill\" [ngStyle]=\"{'border-color': getColor(progress, total)}\"></div>\r\n    </div>\r\n</div>", styles: [":host.reversed .container .circle .fill,:host .container .circle .bar{position:absolute;border:.09em solid;clip:rect(0,.5em,1em,0);border-radius:50%;width:.82em;height:.82em}:host{display:inline-block}:host .container{position:relative;border-radius:50%;background:#e6e9ed;font-size:5em;text-align:initial;width:1em;height:1em}:host .container:after{position:absolute;top:.082em;left:.09em;content:\" \";border-radius:50%;background:#fff;transition-property:all;transition-duration:.2s;transition-timing-function:ease-in;width:.83em;height:.83em}:host .container span{position:absolute;z-index:1;width:5em;line-height:5em;font-size:.2em;color:#545e61;font-weight:700;text-align:center;white-space:nowrap;-webkit-user-select:none;user-select:none;transition-property:all;transition-duration:.2s;transition-timing-function:ease-out}:host .container:hover:after{top:.07em;left:.07em;width:.86em;height:.86em}:host .container:hover span{width:3.33em;line-height:3.33em;font-size:.3em}:host .container .circle{position:absolute;clip:rect(0,1em,1em,.5em);width:1em;height:1em}:host .container .circle .bar{transition:transform .2s ease-out,border-color .2s ease-out}:host.reversed .container .circle{clip:rect(auto,auto,auto,auto)}:host.reversed .container .circle .fill{transform:rotate(180deg)}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+ProgressCircleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ProgressCircleComponent, selector: "sfc-progress-circle", inputs: { total: "total", partition: "partition" }, host: { properties: { "class.reversed": "this.reversed" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"container\" [style.background]=\"background\">\r\n    <span>{{progress}}<ng-container *ngIf=\"partition\">/{{total}}</ng-container></span>\r\n    <div class=\"circle\">\r\n        <div class=\"bar\" [ngStyle]=\"{'transform': transformRotate, \r\n            'border-color': getColor(progress, total)}\"></div>\r\n        <div class=\"fill\" [ngStyle]=\"{'border-color': getColor(progress, total)}\"></div>\r\n    </div>\r\n</div>", styles: [":host.reversed .container .circle .fill,:host .container .circle .bar{position:absolute;border:.09em solid;clip:rect(0,.5em,1em,0);border-radius:50%;width:.82em;height:.82em}:host{display:inline-block}:host .container{position:relative;border-radius:50%;background:#e6e9ed;font-size:5em;text-align:initial;width:1em;height:1em}:host .container:after{position:absolute;top:.082em;left:.09em;content:\" \";border-radius:50%;background:#fff;transition-property:all;transition-duration:.2s;transition-timing-function:ease-in;width:.83em;height:.83em}:host .container span{position:absolute;z-index:1;width:5em;line-height:5em;font-size:.2em;color:#545e61;font-weight:700;text-align:center;white-space:nowrap;-webkit-user-select:none;user-select:none;transition-property:all;transition-duration:.2s;transition-timing-function:ease-out}:host .container:hover:after{top:.07em;left:.07em;width:.86em;height:.86em}:host .container:hover span{width:3.33em;line-height:3.33em;font-size:.3em}:host .container .circle{position:absolute;clip:rect(0,1em,1em,.5em);width:1em;height:1em}:host .container .circle .bar{transition:transform .2s ease-out,border-color .2s ease-out}:host.reversed .container .circle{clip:rect(auto,auto,auto,auto)}:host.reversed .container .circle .fill{transform:rotate(180deg)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ProgressCircleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-progress-circle', template: "<div class=\"container\" [style.background]=\"background\">\r\n    <span>{{progress}}</span>\r\n    <div class=\"circle\">\r\n        <div class=\"bar\" [ngStyle]=\"{'transform': transformRotate, \r\n            'border-color': getColor(progress, total)}\"></div>\r\n        <div class=\"fill\" [ngStyle]=\"{'border-color': getColor(progress, total)}\"></div>\r\n    </div>\r\n</div>", styles: [":host.reversed .container .circle .fill,:host .container .circle .bar{position:absolute;border:.09em solid;clip:rect(0,.5em,1em,0);border-radius:50%;width:.82em;height:.82em}:host{display:inline-block}:host .container{position:relative;border-radius:50%;background:#e6e9ed;font-size:5em;text-align:initial;width:1em;height:1em}:host .container:after{position:absolute;top:.082em;left:.09em;content:\" \";border-radius:50%;background:#fff;transition-property:all;transition-duration:.2s;transition-timing-function:ease-in;width:.83em;height:.83em}:host .container span{position:absolute;z-index:1;width:5em;line-height:5em;font-size:.2em;color:#545e61;font-weight:700;text-align:center;white-space:nowrap;-webkit-user-select:none;user-select:none;transition-property:all;transition-duration:.2s;transition-timing-function:ease-out}:host .container:hover:after{top:.07em;left:.07em;width:.86em;height:.86em}:host .container:hover span{width:3.33em;line-height:3.33em;font-size:.3em}:host .container .circle{position:absolute;clip:rect(0,1em,1em,.5em);width:1em;height:1em}:host .container .circle .bar{transition:transform .2s ease-out,border-color .2s ease-out}:host.reversed .container .circle{clip:rect(auto,auto,auto,auto)}:host.reversed .container .circle .fill{transform:rotate(180deg)}\n"] }]
+            args: [{ selector: 'sfc-progress-circle', template: "<div class=\"container\" [style.background]=\"background\">\r\n    <span>{{progress}}<ng-container *ngIf=\"partition\">/{{total}}</ng-container></span>\r\n    <div class=\"circle\">\r\n        <div class=\"bar\" [ngStyle]=\"{'transform': transformRotate, \r\n            'border-color': getColor(progress, total)}\"></div>\r\n        <div class=\"fill\" [ngStyle]=\"{'border-color': getColor(progress, total)}\"></div>\r\n    </div>\r\n</div>", styles: [":host.reversed .container .circle .fill,:host .container .circle .bar{position:absolute;border:.09em solid;clip:rect(0,.5em,1em,0);border-radius:50%;width:.82em;height:.82em}:host{display:inline-block}:host .container{position:relative;border-radius:50%;background:#e6e9ed;font-size:5em;text-align:initial;width:1em;height:1em}:host .container:after{position:absolute;top:.082em;left:.09em;content:\" \";border-radius:50%;background:#fff;transition-property:all;transition-duration:.2s;transition-timing-function:ease-in;width:.83em;height:.83em}:host .container span{position:absolute;z-index:1;width:5em;line-height:5em;font-size:.2em;color:#545e61;font-weight:700;text-align:center;white-space:nowrap;-webkit-user-select:none;user-select:none;transition-property:all;transition-duration:.2s;transition-timing-function:ease-out}:host .container:hover:after{top:.07em;left:.07em;width:.86em;height:.86em}:host .container:hover span{width:3.33em;line-height:3.33em;font-size:.3em}:host .container .circle{position:absolute;clip:rect(0,1em,1em,.5em);width:1em;height:1em}:host .container .circle .bar{transition:transform .2s ease-out,border-color .2s ease-out}:host.reversed .container .circle{clip:rect(auto,auto,auto,auto)}:host.reversed .container .circle .fill{transform:rotate(180deg)}\n"] }]
         }], propDecorators: { total: [{
                 type: Input
+            }], partition: [{
+                type: Input
             }], reversed: [{
                 type: HostBinding,
                 args: ['class.reversed']
@@ -1053,10 +1144,10 @@ class TagComponent {
     }
 }
 TagComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TagComponent, selector: "sfc-tag", inputs: { model: "model" }, ngImport: i0, template: "<div class=\"container\">\r\n    <a class=\"tag\">\r\n        <div class=\"content\">\r\n            <fa-icon *ngIf=\"model.icon\" [icon]=\"model.icon\"></fa-icon>\r\n            <span>{{model.label}}</span>\r\n        </div>\r\n    </a>\r\n</div>", styles: [":host{display:inline-flex;margin:0 .18em}:host .container{margin-top:.3em;font-size:.8em;-webkit-user-select:none;user-select:none}:host .container .tag{display:inline-flex;border-radius:1em;font-weight:700;color:#545e61;transition:color .5s ease;transition:background-color .5s ease;transition:color .5s ease,background-color .5s ease;border:.125em solid transparent;padding:.3em}:host .container .tag,:host-context(.sfc-default-theme) :host .container .tag{color:#fff}:host-context(.sfc-dark-theme) :host .container .tag{color:#545e61}:host .container .tag,:host-context(.sfc-default-theme) :host .container .tag{background-color:#545e61}:host-context(.sfc-dark-theme) :host .container .tag{background-color:#fff}:host .container .tag .content{display:flex;align-items:center;text-align:center;padding:0 .8em}:host .container .tag .content fa-icon{margin-right:.18em}:host .container:hover .tag{background-color:#ffce54;color:#fff}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
+TagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TagComponent, selector: "sfc-tag", inputs: { model: "model" }, ngImport: i0, template: "<div class=\"container\">\r\n    <a class=\"tag\">\r\n        <div class=\"content\">\r\n            <sfc-icon *ngIf=\"model.icon || model.imageSrc\" [icon]=\"model.icon\" [imageSrc]=\"model.imageSrc\"></sfc-icon>\r\n            <span>{{model.label}}</span>\r\n        </div>\r\n    </a>\r\n</div>", styles: [":host{display:inline-flex;margin:0 .18em}:host .container{margin-top:.3em;font-size:.8em;-webkit-user-select:none;user-select:none}:host .container .tag{display:inline-flex;border-radius:1em;font-weight:700;color:#545e61;transition:color .5s ease;transition:background-color .5s ease;transition:color .5s ease,background-color .5s ease;border:.125em solid transparent;padding:.3em}:host .container .tag,:host-context(.sfc-default-theme) :host .container .tag{color:#fff}:host-context(.sfc-dark-theme) :host .container .tag{color:#545e61}:host .container .tag,:host-context(.sfc-default-theme) :host .container .tag{background-color:#545e61}:host-context(.sfc-dark-theme) :host .container .tag{background-color:#fff}:host .container .tag .content{display:flex;align-items:center;text-align:center;padding:0 .8em}:host .container .tag .content fa-icon{margin-right:.18em}:host .container:hover .tag{background-color:#ffce54;color:#fff}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.IconComponent, selector: "sfc-icon", inputs: ["icon", "imageSrc"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TagComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-tag', template: "<div class=\"container\">\r\n    <a class=\"tag\">\r\n        <div class=\"content\">\r\n            <fa-icon *ngIf=\"model.icon\" [icon]=\"model.icon\"></fa-icon>\r\n            <span>{{model.label}}</span>\r\n        </div>\r\n    </a>\r\n</div>", styles: [":host{display:inline-flex;margin:0 .18em}:host .container{margin-top:.3em;font-size:.8em;-webkit-user-select:none;user-select:none}:host .container .tag{display:inline-flex;border-radius:1em;font-weight:700;color:#545e61;transition:color .5s ease;transition:background-color .5s ease;transition:color .5s ease,background-color .5s ease;border:.125em solid transparent;padding:.3em}:host .container .tag,:host-context(.sfc-default-theme) :host .container .tag{color:#fff}:host-context(.sfc-dark-theme) :host .container .tag{color:#545e61}:host .container .tag,:host-context(.sfc-default-theme) :host .container .tag{background-color:#545e61}:host-context(.sfc-dark-theme) :host .container .tag{background-color:#fff}:host .container .tag .content{display:flex;align-items:center;text-align:center;padding:0 .8em}:host .container .tag .content fa-icon{margin-right:.18em}:host .container:hover .tag{background-color:#ffce54;color:#fff}\n"] }]
+            args: [{ selector: 'sfc-tag', template: "<div class=\"container\">\r\n    <a class=\"tag\">\r\n        <div class=\"content\">\r\n            <sfc-icon *ngIf=\"model.icon || model.imageSrc\" [icon]=\"model.icon\" [imageSrc]=\"model.imageSrc\"></sfc-icon>\r\n            <span>{{model.label}}</span>\r\n        </div>\r\n    </a>\r\n</div>", styles: [":host{display:inline-flex;margin:0 .18em}:host .container{margin-top:.3em;font-size:.8em;-webkit-user-select:none;user-select:none}:host .container .tag{display:inline-flex;border-radius:1em;font-weight:700;color:#545e61;transition:color .5s ease;transition:background-color .5s ease;transition:color .5s ease,background-color .5s ease;border:.125em solid transparent;padding:.3em}:host .container .tag,:host-context(.sfc-default-theme) :host .container .tag{color:#fff}:host-context(.sfc-dark-theme) :host .container .tag{color:#545e61}:host .container .tag,:host-context(.sfc-default-theme) :host .container .tag{background-color:#545e61}:host-context(.sfc-dark-theme) :host .container .tag{background-color:#fff}:host .container .tag .content{display:flex;align-items:center;text-align:center;padding:0 .8em}:host .container .tag .content fa-icon{margin-right:.18em}:host .container:hover .tag{background-color:#ffce54;color:#fff}\n"] }]
         }], propDecorators: { model: [{
                 type: Input
             }] } });
@@ -1067,10 +1158,10 @@ class TagsComponent {
     }
 }
 TagsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TagsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TagsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TagsComponent, selector: "sfc-tags", inputs: { tags: "tags" }, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"tags\">\r\n        <sfc-tag *ngFor=\"let tag of tags\" [model]=\"tag\"></sfc-tag>\r\n    </div>\r\n</div>", styles: [":host .container .tags{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: TagComponent, selector: "sfc-tag", inputs: ["model"] }] });
+TagsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TagsComponent, selector: "sfc-tags", inputs: { tags: "tags" }, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"tags\">\r\n        <sfc-tag *ngFor=\"let tag of tags\" [model]=\"tag\"></sfc-tag>\r\n    </div>\r\n</div>", styles: [":host{display:inline-block}:host .container .tags{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: TagComponent, selector: "sfc-tag", inputs: ["model"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TagsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-tags', template: "<div class=\"container\">\r\n    <div class=\"tags\">\r\n        <sfc-tag *ngFor=\"let tag of tags\" [model]=\"tag\"></sfc-tag>\r\n    </div>\r\n</div>", styles: [":host .container .tags{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}\n"] }]
+            args: [{ selector: 'sfc-tags', template: "<div class=\"container\">\r\n    <div class=\"tags\">\r\n        <sfc-tag *ngFor=\"let tag of tags\" [model]=\"tag\"></sfc-tag>\r\n    </div>\r\n</div>", styles: [":host{display:inline-block}:host .container .tags{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}\n"] }]
         }], propDecorators: { tags: [{
                 type: Input
             }] } });
@@ -1854,15 +1945,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
 
 class TableSelectService {
     constructor() {
-        this.selectSubject = new Subject();
-        this.select$ = this.selectSubject.asObservable();
+        this.model = new ObservableModel();
         this.selectedItems = [];
         this.unselectedItems = [];
     }
+    get select$() { return this.model.value$; }
     selectAll(selected) {
         this.unselectedItems = [];
         this.selectedItems = [];
-        this.selectSubject.next({ index: null, selected: selected });
+        this.model.subject.next({ index: null, selected: selected });
     }
     select(index, selected) {
         if (selected) {
@@ -1873,7 +1964,18 @@ class TableSelectService {
             addItem(this.unselectedItems, index);
             removeItem(this.selectedItems, index);
         }
-        this.selectSubject.next({ index, selected });
+        this.model.subject.next({ index, selected });
+    }
+    selectSingle(event) {
+        if (event.selected) {
+            this.unselectedItems = [];
+            this.selectedItems = [event.index];
+        }
+        else {
+            this.selectedItems = [];
+            this.unselectedItems = [event.index];
+        }
+        this.model.subject.next(event);
     }
 }
 TableSelectService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TableSelectService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
@@ -2212,6 +2314,7 @@ class TableComponent {
         // Selection
         this.selectable = false;
         this.selectOnClick = false;
+        this.selectMultiple = true;
         this.selected = new EventEmitter();
         this.allSelected = false;
         // End Selection
@@ -2294,21 +2397,42 @@ class TableComponent {
             return {
                 index: index,
                 sequence: sequence,
-                selected: this.getItemSelected(sequence),
+                selected: result.reset ? false : this.getItemSelected(sequence),
                 data: item
             };
         });
-        if (result.reset)
+        if (result.reset) {
             this.items = items;
-        else
+            if (this.selectable) {
+                this.selectedService.selectAll(false);
+            }
+        }
+        else {
             this.items = this.items.concat(items);
+        }
     }
     selectionSubscribe() {
         this._allSelectionSubscription = this.selectedService.select$
             .subscribe((event) => {
-            if (event.index == null) {
-                this.allSelected = event.selected;
-                this.items.forEach(item => item.selected = event.selected);
+            if (this.selectMultiple) {
+                if (event.index == null) {
+                    this.allSelected = event.selected;
+                    this.items.forEach((item) => item.selected = event.selected);
+                }
+                else {
+                    this.items.forEach((item) => {
+                        if (item.sequence === event.index)
+                            item.selected = event.selected;
+                    });
+                }
+            }
+            else {
+                this.items.forEach((item) => {
+                    if (item.sequence === event.index)
+                        item.selected = event.selected;
+                    else
+                        item.selected = false;
+                });
             }
             this.selected.emit(event);
         });
@@ -2322,7 +2446,7 @@ class TableComponent {
             let tableColumns = JSON.parse(JSON.stringify(columns));
             if (this.sequence)
                 tableColumns.unshift(TableConstants.SEQUENCE_COLUMN);
-            if (this.selectable)
+            if (this.selectable && this.selectMultiple)
                 tableColumns.unshift(TableConstants.SELECTABLE_COLUMN);
             if (this.expanded)
                 tableColumns.push(TableConstants.EXPANDED_COLUMN);
@@ -2368,10 +2492,10 @@ class TableComponent {
     }
 }
 TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TableComponent, deps: [{ token: ColumnsToggleService }, { token: WINDOW }, { token: TableSelectService }, { token: i3.SortingService }, { token: i0.ChangeDetectorRef }, { token: i3.ResizeService }, { token: i0.IterableDiffers }], target: i0.ɵɵFactoryTarget.Component });
-TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TableComponent, selector: "sfc-table", inputs: { position: "position", delimeter: "delimeter", dataType: "dataType", dataToggle: "dataToggle", showColumns: "showColumns", columnsToggle: "columnsToggle", pagination: "pagination", sequence: "sequence", expanded: "expanded", notFoundLabel: "notFoundLabel", loadMoreLabel: "loadMoreLabel", showTotal: "showTotal", totalLabel: "totalLabel", paginationCount: "paginationCount", paginationLimits: "paginationLimits", showLoading: "showLoading", columnContent: "columnContent", rowContent: "rowContent", cardContent: "cardContent", data: "data", data$: "data$", columns: "columns", showColumnsLabel: "showColumnsLabel", hideColumnsLabel: "hideColumnsLabel", resize: "resize", loadType: "loadType", loader: "loader", filter: "filter", predicate$: "predicate$", selectable: "selectable", selectOnClick: "selectOnClick", dataListLabel: "dataListLabel", dataCardsLabel: "dataCardsLabel" }, outputs: { selected: "selected" }, host: { properties: { "class": "this.dataType", "class.loading": "this.loading" } }, providers: [SortingService, TableSelectService, ColumnsToggleService, ResizeService], queries: [{ propertyName: "templates", predicate: TemplateReferenceDirective, read: TemplateReferenceDirective }], ngImport: i0, template: "<div class=\"container\">\r\n    <div *ngIf=\"showLoading\" class=\"table-loader\"></div>\r\n    <div class=\"columns-container\">\r\n        <div class=\"columns-actions\">\r\n            <div class=\"left\">\r\n                <sfc-columns-toggle *ngIf=\"columnsToggle\" [showLabel]=\"showColumnsLabel\" [hideLabel]=\"hideColumnsLabel\">\r\n                </sfc-columns-toggle>\r\n            </div>\r\n\r\n            <div class=\"right\">\r\n                <p *ngIf=\"showTotal\">{{totalLabel}}: <span>{{total}}</span></p>\r\n                <sfc-toggle-switcher *ngIf=\"dataToggle\" [active]=\"dataType === TableDataType.Cards\"\r\n                    [leftModel]=\"toggleSwitcherLeftModel\" [rightModel]=\"toggleSwitcherRightModel\"\r\n                    (click)=\"onDataTypeToggle()\">\r\n                </sfc-toggle-switcher>\r\n            </div>\r\n        </div>\r\n\r\n        <div *ngIf=\"showColumns && columnsToggleService.show\" class=\"columns\">\r\n            <div class=\"column\" [style.justifyContent]=\"position\" [style.minWidth]=\"column.calculatedWidth\"\r\n                *ngFor=\"let column of tableColumns\">\r\n                <ng-container [ngSwitch]=\"column.type\">\r\n                    <sfc-selectable-table-column *ngSwitchCase=\"TableColumnType.Selectable\"\r\n                        [selected]=\"allRowsSelected\">\r\n                    </sfc-selectable-table-column>\r\n\r\n                    <sfc-sorting-column *ngSwitchDefault [model]=\"column.sorting!\" [id]=\"column.field\">\r\n\r\n                        <sfc-template-content [referenceContent]=\"columnContent\" [templatesContent]=\"templates\"\r\n                            [templateType]=\"TableTemplate.Column\" [defaultContent]=\"defaultColumn\"\r\n                            [contextData]=\"column\">\r\n                        </sfc-template-content>\r\n\r\n                        <ng-template #defaultColumn>\r\n                            <sfc-default-table-column [model]=\"column\"></sfc-default-table-column>\r\n                        </ng-template>\r\n\r\n                    </sfc-sorting-column>\r\n                </ng-container>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <sfc-delimeter *ngIf=\"delimeter\" class=\"table-delimeter\"></sfc-delimeter>\r\n\r\n    <div class=\"rows-container\">\r\n        <sfc-load-container [id]=\"loadContainerId\" [type]=\"LoadContainerType.Table\" [model]=\"loadModel\"\r\n            [paginationCount]=\"paginationCount\" [paginationLimits]=\"paginationLimits\" [showLoading]=\"showLoading\"\r\n            (handleSuccess)=\"handleSuccess($event)\" (handleLoading)=\"loading = $event\" [emptyLabel]=\"notFoundLabel\" [loadMoreLabel]=\"loadMoreLabel\">\r\n            <div class=\"row\" *ngFor=\"let item of items; index as i;\">\r\n                <ng-container [ngSwitch]=\"dataType\">\r\n                    <sfc-template-content *ngSwitchCase=\"TableDataType.Rows\" [referenceContent]=\"rowContent\"\r\n                        [templatesContent]=\"templates\" [templateType]=\"TableTemplate.Row\" [defaultContent]=\"defaultRow\"\r\n                        [contextData]=\"{model: item, columns: tableColumns, position: position}\">\r\n                    </sfc-template-content>\r\n\r\n                    <ng-template #defaultRow>\r\n                        <sfc-default-table-row [columns]=\"tableColumns\" [model]=\"item\" [position]=\"position\"\r\n                            [selectOnClick]=\"selectOnClick\">\r\n                        </sfc-default-table-row>\r\n                    </ng-template>\r\n\r\n                    <sfc-template-content *ngSwitchCase=\"TableDataType.Cards\" [referenceContent]=\"cardContent\"\r\n                        [templatesContent]=\"templates\" [templateType]=\"TableTemplate.Card\"\r\n                        [defaultContent]=\"defaultCard\" [contextData]=\"{model: item, columns: tableColumns}\">\r\n                    </sfc-template-content>\r\n\r\n                    <ng-template #defaultCard>\r\n                        <sfc-default-table-card [columns]=\"tableColumns\" [model]=\"item\" [selectOnClick]=\"selectOnClick\">\r\n                        </sfc-default-table-card>\r\n                    </ng-template>\r\n                </ng-container>\r\n            </div>\r\n\r\n        </sfc-load-container>\r\n    </div>\r\n</div>", styles: [":host .container{display:block;margin:2em auto;width:90%;position:relative}:host .container .columns-container{display:flex;flex-flow:row wrap;transition:.5s;justify-content:space-between}:host .container .columns-container .columns-actions{display:flex;align-items:center;width:100%}:host .container .columns-container .columns-actions .right{display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:center;margin-left:auto}:host .container .columns-container .columns-actions .right>p{transition:color .5s ease;margin:0;font-size:.8em;padding-right:1em;font-weight:700;-webkit-user-select:none;user-select:none;text-align:center}:host .container .columns-container .columns-actions .right>p,:host-context(.sfc-default-theme) :host .container .columns-container .columns-actions .right>p{color:#545e61}:host-context(.sfc-dark-theme) :host .container .columns-container .columns-actions .right>p{color:#fff}:host .container .columns-container .columns-actions .right>p span{font-size:1.1em;color:#ffce54}:host .container .columns-container .columns{text-align:center;padding:.5em;width:100%;display:flex;flex-flow:row wrap}:host .container .columns-container .columns .column{text-align:center;padding:.5em;display:flex;align-items:center;justify-content:center;box-sizing:border-box}:host .container .rows-container{display:flex;flex-wrap:wrap;justify-content:center;transition:.5s;gap:1em;margin-block:1em 2em}:host .container .rows-container sfc-load-container ::ng-deep>.content{background:transparent}:host .container .rows-container sfc-load-container.loading{cursor:initial;z-index:9999}:host .container .rows-container sfc-load-container.loading .preloader{transition:background .5s ease}:host .container .rows-container sfc-load-container.loading .preloader,:host-context(.sfc-default-theme) :host .container .rows-container sfc-load-container.loading .preloader{background:#fff}:host-context(.sfc-dark-theme) :host .container .rows-container sfc-load-container.loading .preloader{background:transparent}:host .container .rows-container .row{display:contents}:host.loading .container .table-loader{position:relative;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;z-index:9998;position:absolute;transition:background-color .5s ease;opacity:.7}:host.loading .container .table-loader,:host-context(.sfc-default-theme) :host.loading .container .table-loader{background-color:#fff}:host-context(.sfc-dark-theme) :host.loading .container .table-loader{background-color:transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i3.DelimeterComponent, selector: "sfc-delimeter", inputs: ["label", "direction"] }, { kind: "component", type: i3.TemplateContentComponent, selector: "sfc-template-content", inputs: ["contextData", "referenceContent", "templateType", "templatesContent", "defaultContent"] }, { kind: "component", type: i3.ToggleSwitcherComponent, selector: "sfc-toggle-switcher", inputs: ["active", "disabled", "leftModel", "rightModel"] }, { kind: "component", type: i3.LoadContainerComponent, selector: "sfc-load-container", inputs: ["id", "type", "open", "loadMore", "loadMoreLabel", "showEmpty", "emptyLabel", "model", "scrollTarget", "paginationCount", "paginationLimits", "showLoading"], outputs: ["handleError", "handleSuccess", "handleLoading"] }, { kind: "component", type: DefaultTableColumnComponent, selector: "sfc-default-table-column", inputs: ["model"] }, { kind: "component", type: SelectableTableColumnComponent, selector: "sfc-selectable-table-column", inputs: ["selected"] }, { kind: "component", type: ColumnsToggleComponent, selector: "sfc-columns-toggle", inputs: ["showLabel", "hideLabel"] }, { kind: "component", type: SortingColumnComponent, selector: "sfc-sorting-column", inputs: ["id", "model"] }, { kind: "component", type: DefaultTableRowComponent, selector: "sfc-default-table-row" }, { kind: "component", type: DefaultTableCardComponent, selector: "sfc-default-table-card" }] });
+TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TableComponent, selector: "sfc-table", inputs: { position: "position", delimeter: "delimeter", dataType: "dataType", dataToggle: "dataToggle", showColumns: "showColumns", columnsToggle: "columnsToggle", pagination: "pagination", sequence: "sequence", expanded: "expanded", notFoundLabel: "notFoundLabel", loadMoreLabel: "loadMoreLabel", showTotal: "showTotal", totalLabel: "totalLabel", paginationCount: "paginationCount", paginationLimits: "paginationLimits", showLoading: "showLoading", columnContent: "columnContent", rowContent: "rowContent", cardContent: "cardContent", data: "data", data$: "data$", columns: "columns", showColumnsLabel: "showColumnsLabel", hideColumnsLabel: "hideColumnsLabel", resize: "resize", loadType: "loadType", loader: "loader", filter: "filter", predicate$: "predicate$", selectable: "selectable", selectOnClick: "selectOnClick", selectMultiple: "selectMultiple", dataListLabel: "dataListLabel", dataCardsLabel: "dataCardsLabel" }, outputs: { selected: "selected" }, host: { properties: { "class": "this.dataType", "class.loading": "this.loading" } }, providers: [SortingService, TableSelectService, ColumnsToggleService, ResizeService], queries: [{ propertyName: "templates", predicate: TemplateReferenceDirective, read: TemplateReferenceDirective }], ngImport: i0, template: "<div class=\"container\">\r\n    <div *ngIf=\"showLoading\" class=\"table-loader\"></div>\r\n    <div class=\"columns-container\">\r\n        <div class=\"columns-actions\">\r\n            <div class=\"left\">\r\n                <sfc-columns-toggle *ngIf=\"columnsToggle\" [showLabel]=\"showColumnsLabel\" [hideLabel]=\"hideColumnsLabel\">\r\n                </sfc-columns-toggle>\r\n            </div>\r\n\r\n            <div class=\"right\">\r\n                <p *ngIf=\"showTotal\">{{totalLabel}}: <span>{{total}}</span></p>\r\n                <sfc-toggle-switcher *ngIf=\"dataToggle\" [active]=\"dataType === TableDataType.Cards\"\r\n                    [leftModel]=\"toggleSwitcherLeftModel\" [rightModel]=\"toggleSwitcherRightModel\"\r\n                    (click)=\"onDataTypeToggle()\">\r\n                </sfc-toggle-switcher>\r\n            </div>\r\n        </div>\r\n\r\n        <div *ngIf=\"showColumns && columnsToggleService.show\" class=\"columns\">\r\n            <div class=\"column\" [style.justifyContent]=\"position\" [style.minWidth]=\"column.calculatedWidth\"\r\n                *ngFor=\"let column of tableColumns\">\r\n                <ng-container [ngSwitch]=\"column.type\">\r\n                    <sfc-selectable-table-column *ngSwitchCase=\"TableColumnType.Selectable\"\r\n                        [selected]=\"allRowsSelected\">\r\n                    </sfc-selectable-table-column>\r\n\r\n                    <sfc-sorting-column *ngSwitchDefault [model]=\"column.sorting!\" [id]=\"column.field\">\r\n\r\n                        <sfc-template-content [referenceContent]=\"columnContent\" [templatesContent]=\"templates\"\r\n                            [templateType]=\"TableTemplate.Column\" [defaultContent]=\"defaultColumn\"\r\n                            [contextData]=\"column\">\r\n                        </sfc-template-content>\r\n\r\n                        <ng-template #defaultColumn>\r\n                            <sfc-default-table-column [model]=\"column\"></sfc-default-table-column>\r\n                        </ng-template>\r\n\r\n                    </sfc-sorting-column>\r\n                </ng-container>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <sfc-delimeter *ngIf=\"delimeter\" class=\"table-delimeter\"></sfc-delimeter>\r\n\r\n    <div class=\"rows-container\">\r\n        <sfc-load-container [id]=\"loadContainerId\" [type]=\"LoadContainerType.Table\" [model]=\"loadModel\"\r\n            [paginationCount]=\"paginationCount\" [paginationLimits]=\"paginationLimits\" [showLoading]=\"showLoading\"\r\n            (handleSuccess)=\"handleSuccess($event)\" (handleLoading)=\"loading = $event\" [emptyLabel]=\"notFoundLabel\"\r\n            [loadMoreLabel]=\"loadMoreLabel\">\r\n            <div class=\"row\" *ngFor=\"let item of items; index as i;\">\r\n                <ng-container [ngSwitch]=\"dataType\">\r\n                    <sfc-template-content *ngSwitchCase=\"TableDataType.Rows\" [referenceContent]=\"rowContent\"\r\n                        [templatesContent]=\"templates\" [templateType]=\"TableTemplate.Row\" [defaultContent]=\"defaultRow\"\r\n                        [contextData]=\"{model: item, columns: tableColumns, position: position}\">\r\n                    </sfc-template-content>\r\n\r\n                    <ng-template #defaultRow>\r\n                        <sfc-default-table-row [columns]=\"tableColumns\" [model]=\"item\" [position]=\"position\"\r\n                            [selectOnClick]=\"selectOnClick\">\r\n                        </sfc-default-table-row>\r\n                    </ng-template>\r\n\r\n                    <sfc-template-content *ngSwitchCase=\"TableDataType.Cards\" [referenceContent]=\"cardContent\"\r\n                        [templatesContent]=\"templates\" [templateType]=\"TableTemplate.Card\"\r\n                        [defaultContent]=\"defaultCard\" [contextData]=\"{model: item, columns: tableColumns}\">\r\n                    </sfc-template-content>\r\n\r\n                    <ng-template #defaultCard>\r\n                        <sfc-default-table-card [columns]=\"tableColumns\" [model]=\"item\" [selectOnClick]=\"selectOnClick\">\r\n                        </sfc-default-table-card>\r\n                    </ng-template>\r\n                </ng-container>\r\n            </div>\r\n\r\n        </sfc-load-container>\r\n    </div>\r\n</div>", styles: [":host .container{display:block;margin:2em auto;width:90%;position:relative}:host .container .columns-container{display:flex;flex-flow:row wrap;transition:.5s;justify-content:space-between}:host .container .columns-container .columns-actions{display:flex;align-items:center;width:100%}:host .container .columns-container .columns-actions .right{display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:center;margin-left:auto}:host .container .columns-container .columns-actions .right>p{transition:color .5s ease;margin:0;font-size:.8em;padding-right:1em;font-weight:700;-webkit-user-select:none;user-select:none;text-align:center}:host .container .columns-container .columns-actions .right>p,:host-context(.sfc-default-theme) :host .container .columns-container .columns-actions .right>p{color:#545e61}:host-context(.sfc-dark-theme) :host .container .columns-container .columns-actions .right>p{color:#fff}:host .container .columns-container .columns-actions .right>p span{font-size:1.1em;color:#ffce54}:host .container .columns-container .columns{text-align:center;padding:.5em;width:100%;display:flex;flex-flow:row wrap}:host .container .columns-container .columns .column{text-align:center;padding:.5em;display:flex;align-items:center;justify-content:center;box-sizing:border-box}:host .container .rows-container{display:flex;flex-wrap:wrap;justify-content:center;transition:.5s;gap:1em;margin-block:1em 2em}:host .container .rows-container sfc-load-container ::ng-deep>.content{background:transparent}:host .container .rows-container sfc-load-container.loading{cursor:initial;z-index:9999}:host .container .rows-container sfc-load-container.loading .preloader{transition:background .5s ease}:host .container .rows-container sfc-load-container.loading .preloader,:host-context(.sfc-default-theme) :host .container .rows-container sfc-load-container.loading .preloader{background:#fff}:host-context(.sfc-dark-theme) :host .container .rows-container sfc-load-container.loading .preloader{background:transparent}:host .container .rows-container .row{display:contents}:host.loading .container .table-loader{position:relative;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;z-index:9998;position:absolute;transition:background-color .5s ease;opacity:.7}:host.loading .container .table-loader,:host-context(.sfc-default-theme) :host.loading .container .table-loader{background-color:#fff}:host-context(.sfc-dark-theme) :host.loading .container .table-loader{background-color:transparent}:host.rows .container .rows-container .row{display:block;width:100%;margin:.5em 0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i3.DelimeterComponent, selector: "sfc-delimeter", inputs: ["label", "direction"] }, { kind: "component", type: i3.TemplateContentComponent, selector: "sfc-template-content", inputs: ["contextData", "referenceContent", "templateType", "templatesContent", "defaultContent"] }, { kind: "component", type: i3.ToggleSwitcherComponent, selector: "sfc-toggle-switcher", inputs: ["active", "disabled", "leftModel", "rightModel"], outputs: ["toggle"] }, { kind: "component", type: i3.LoadContainerComponent, selector: "sfc-load-container", inputs: ["id", "type", "open", "loadMore", "loadMoreLabel", "showEmpty", "emptyLabel", "model", "scrollTarget", "paginationCount", "paginationLimits", "showLoading"], outputs: ["handleError", "handleSuccess", "handleLoading"] }, { kind: "component", type: DefaultTableColumnComponent, selector: "sfc-default-table-column", inputs: ["model"] }, { kind: "component", type: SelectableTableColumnComponent, selector: "sfc-selectable-table-column", inputs: ["selected"] }, { kind: "component", type: ColumnsToggleComponent, selector: "sfc-columns-toggle", inputs: ["showLabel", "hideLabel"] }, { kind: "component", type: SortingColumnComponent, selector: "sfc-sorting-column", inputs: ["id", "model"] }, { kind: "component", type: DefaultTableRowComponent, selector: "sfc-default-table-row" }, { kind: "component", type: DefaultTableCardComponent, selector: "sfc-default-table-card" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-table', providers: [SortingService, TableSelectService, ColumnsToggleService, ResizeService], template: "<div class=\"container\">\r\n    <div *ngIf=\"showLoading\" class=\"table-loader\"></div>\r\n    <div class=\"columns-container\">\r\n        <div class=\"columns-actions\">\r\n            <div class=\"left\">\r\n                <sfc-columns-toggle *ngIf=\"columnsToggle\" [showLabel]=\"showColumnsLabel\" [hideLabel]=\"hideColumnsLabel\">\r\n                </sfc-columns-toggle>\r\n            </div>\r\n\r\n            <div class=\"right\">\r\n                <p *ngIf=\"showTotal\">{{totalLabel}}: <span>{{total}}</span></p>\r\n                <sfc-toggle-switcher *ngIf=\"dataToggle\" [active]=\"dataType === TableDataType.Cards\"\r\n                    [leftModel]=\"toggleSwitcherLeftModel\" [rightModel]=\"toggleSwitcherRightModel\"\r\n                    (click)=\"onDataTypeToggle()\">\r\n                </sfc-toggle-switcher>\r\n            </div>\r\n        </div>\r\n\r\n        <div *ngIf=\"showColumns && columnsToggleService.show\" class=\"columns\">\r\n            <div class=\"column\" [style.justifyContent]=\"position\" [style.minWidth]=\"column.calculatedWidth\"\r\n                *ngFor=\"let column of tableColumns\">\r\n                <ng-container [ngSwitch]=\"column.type\">\r\n                    <sfc-selectable-table-column *ngSwitchCase=\"TableColumnType.Selectable\"\r\n                        [selected]=\"allRowsSelected\">\r\n                    </sfc-selectable-table-column>\r\n\r\n                    <sfc-sorting-column *ngSwitchDefault [model]=\"column.sorting!\" [id]=\"column.field\">\r\n\r\n                        <sfc-template-content [referenceContent]=\"columnContent\" [templatesContent]=\"templates\"\r\n                            [templateType]=\"TableTemplate.Column\" [defaultContent]=\"defaultColumn\"\r\n                            [contextData]=\"column\">\r\n                        </sfc-template-content>\r\n\r\n                        <ng-template #defaultColumn>\r\n                            <sfc-default-table-column [model]=\"column\"></sfc-default-table-column>\r\n                        </ng-template>\r\n\r\n                    </sfc-sorting-column>\r\n                </ng-container>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <sfc-delimeter *ngIf=\"delimeter\" class=\"table-delimeter\"></sfc-delimeter>\r\n\r\n    <div class=\"rows-container\">\r\n        <sfc-load-container [id]=\"loadContainerId\" [type]=\"LoadContainerType.Table\" [model]=\"loadModel\"\r\n            [paginationCount]=\"paginationCount\" [paginationLimits]=\"paginationLimits\" [showLoading]=\"showLoading\"\r\n            (handleSuccess)=\"handleSuccess($event)\" (handleLoading)=\"loading = $event\" [emptyLabel]=\"notFoundLabel\" [loadMoreLabel]=\"loadMoreLabel\">\r\n            <div class=\"row\" *ngFor=\"let item of items; index as i;\">\r\n                <ng-container [ngSwitch]=\"dataType\">\r\n                    <sfc-template-content *ngSwitchCase=\"TableDataType.Rows\" [referenceContent]=\"rowContent\"\r\n                        [templatesContent]=\"templates\" [templateType]=\"TableTemplate.Row\" [defaultContent]=\"defaultRow\"\r\n                        [contextData]=\"{model: item, columns: tableColumns, position: position}\">\r\n                    </sfc-template-content>\r\n\r\n                    <ng-template #defaultRow>\r\n                        <sfc-default-table-row [columns]=\"tableColumns\" [model]=\"item\" [position]=\"position\"\r\n                            [selectOnClick]=\"selectOnClick\">\r\n                        </sfc-default-table-row>\r\n                    </ng-template>\r\n\r\n                    <sfc-template-content *ngSwitchCase=\"TableDataType.Cards\" [referenceContent]=\"cardContent\"\r\n                        [templatesContent]=\"templates\" [templateType]=\"TableTemplate.Card\"\r\n                        [defaultContent]=\"defaultCard\" [contextData]=\"{model: item, columns: tableColumns}\">\r\n                    </sfc-template-content>\r\n\r\n                    <ng-template #defaultCard>\r\n                        <sfc-default-table-card [columns]=\"tableColumns\" [model]=\"item\" [selectOnClick]=\"selectOnClick\">\r\n                        </sfc-default-table-card>\r\n                    </ng-template>\r\n                </ng-container>\r\n            </div>\r\n\r\n        </sfc-load-container>\r\n    </div>\r\n</div>", styles: [":host .container{display:block;margin:2em auto;width:90%;position:relative}:host .container .columns-container{display:flex;flex-flow:row wrap;transition:.5s;justify-content:space-between}:host .container .columns-container .columns-actions{display:flex;align-items:center;width:100%}:host .container .columns-container .columns-actions .right{display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:center;margin-left:auto}:host .container .columns-container .columns-actions .right>p{transition:color .5s ease;margin:0;font-size:.8em;padding-right:1em;font-weight:700;-webkit-user-select:none;user-select:none;text-align:center}:host .container .columns-container .columns-actions .right>p,:host-context(.sfc-default-theme) :host .container .columns-container .columns-actions .right>p{color:#545e61}:host-context(.sfc-dark-theme) :host .container .columns-container .columns-actions .right>p{color:#fff}:host .container .columns-container .columns-actions .right>p span{font-size:1.1em;color:#ffce54}:host .container .columns-container .columns{text-align:center;padding:.5em;width:100%;display:flex;flex-flow:row wrap}:host .container .columns-container .columns .column{text-align:center;padding:.5em;display:flex;align-items:center;justify-content:center;box-sizing:border-box}:host .container .rows-container{display:flex;flex-wrap:wrap;justify-content:center;transition:.5s;gap:1em;margin-block:1em 2em}:host .container .rows-container sfc-load-container ::ng-deep>.content{background:transparent}:host .container .rows-container sfc-load-container.loading{cursor:initial;z-index:9999}:host .container .rows-container sfc-load-container.loading .preloader{transition:background .5s ease}:host .container .rows-container sfc-load-container.loading .preloader,:host-context(.sfc-default-theme) :host .container .rows-container sfc-load-container.loading .preloader{background:#fff}:host-context(.sfc-dark-theme) :host .container .rows-container sfc-load-container.loading .preloader{background:transparent}:host .container .rows-container .row{display:contents}:host.loading .container .table-loader{position:relative;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;z-index:9998;position:absolute;transition:background-color .5s ease;opacity:.7}:host.loading .container .table-loader,:host-context(.sfc-default-theme) :host.loading .container .table-loader{background-color:#fff}:host-context(.sfc-dark-theme) :host.loading .container .table-loader{background-color:transparent}\n"] }]
+            args: [{ selector: 'sfc-table', providers: [SortingService, TableSelectService, ColumnsToggleService, ResizeService], template: "<div class=\"container\">\r\n    <div *ngIf=\"showLoading\" class=\"table-loader\"></div>\r\n    <div class=\"columns-container\">\r\n        <div class=\"columns-actions\">\r\n            <div class=\"left\">\r\n                <sfc-columns-toggle *ngIf=\"columnsToggle\" [showLabel]=\"showColumnsLabel\" [hideLabel]=\"hideColumnsLabel\">\r\n                </sfc-columns-toggle>\r\n            </div>\r\n\r\n            <div class=\"right\">\r\n                <p *ngIf=\"showTotal\">{{totalLabel}}: <span>{{total}}</span></p>\r\n                <sfc-toggle-switcher *ngIf=\"dataToggle\" [active]=\"dataType === TableDataType.Cards\"\r\n                    [leftModel]=\"toggleSwitcherLeftModel\" [rightModel]=\"toggleSwitcherRightModel\"\r\n                    (click)=\"onDataTypeToggle()\">\r\n                </sfc-toggle-switcher>\r\n            </div>\r\n        </div>\r\n\r\n        <div *ngIf=\"showColumns && columnsToggleService.show\" class=\"columns\">\r\n            <div class=\"column\" [style.justifyContent]=\"position\" [style.minWidth]=\"column.calculatedWidth\"\r\n                *ngFor=\"let column of tableColumns\">\r\n                <ng-container [ngSwitch]=\"column.type\">\r\n                    <sfc-selectable-table-column *ngSwitchCase=\"TableColumnType.Selectable\"\r\n                        [selected]=\"allRowsSelected\">\r\n                    </sfc-selectable-table-column>\r\n\r\n                    <sfc-sorting-column *ngSwitchDefault [model]=\"column.sorting!\" [id]=\"column.field\">\r\n\r\n                        <sfc-template-content [referenceContent]=\"columnContent\" [templatesContent]=\"templates\"\r\n                            [templateType]=\"TableTemplate.Column\" [defaultContent]=\"defaultColumn\"\r\n                            [contextData]=\"column\">\r\n                        </sfc-template-content>\r\n\r\n                        <ng-template #defaultColumn>\r\n                            <sfc-default-table-column [model]=\"column\"></sfc-default-table-column>\r\n                        </ng-template>\r\n\r\n                    </sfc-sorting-column>\r\n                </ng-container>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <sfc-delimeter *ngIf=\"delimeter\" class=\"table-delimeter\"></sfc-delimeter>\r\n\r\n    <div class=\"rows-container\">\r\n        <sfc-load-container [id]=\"loadContainerId\" [type]=\"LoadContainerType.Table\" [model]=\"loadModel\"\r\n            [paginationCount]=\"paginationCount\" [paginationLimits]=\"paginationLimits\" [showLoading]=\"showLoading\"\r\n            (handleSuccess)=\"handleSuccess($event)\" (handleLoading)=\"loading = $event\" [emptyLabel]=\"notFoundLabel\"\r\n            [loadMoreLabel]=\"loadMoreLabel\">\r\n            <div class=\"row\" *ngFor=\"let item of items; index as i;\">\r\n                <ng-container [ngSwitch]=\"dataType\">\r\n                    <sfc-template-content *ngSwitchCase=\"TableDataType.Rows\" [referenceContent]=\"rowContent\"\r\n                        [templatesContent]=\"templates\" [templateType]=\"TableTemplate.Row\" [defaultContent]=\"defaultRow\"\r\n                        [contextData]=\"{model: item, columns: tableColumns, position: position}\">\r\n                    </sfc-template-content>\r\n\r\n                    <ng-template #defaultRow>\r\n                        <sfc-default-table-row [columns]=\"tableColumns\" [model]=\"item\" [position]=\"position\"\r\n                            [selectOnClick]=\"selectOnClick\">\r\n                        </sfc-default-table-row>\r\n                    </ng-template>\r\n\r\n                    <sfc-template-content *ngSwitchCase=\"TableDataType.Cards\" [referenceContent]=\"cardContent\"\r\n                        [templatesContent]=\"templates\" [templateType]=\"TableTemplate.Card\"\r\n                        [defaultContent]=\"defaultCard\" [contextData]=\"{model: item, columns: tableColumns}\">\r\n                    </sfc-template-content>\r\n\r\n                    <ng-template #defaultCard>\r\n                        <sfc-default-table-card [columns]=\"tableColumns\" [model]=\"item\" [selectOnClick]=\"selectOnClick\">\r\n                        </sfc-default-table-card>\r\n                    </ng-template>\r\n                </ng-container>\r\n            </div>\r\n\r\n        </sfc-load-container>\r\n    </div>\r\n</div>", styles: [":host .container{display:block;margin:2em auto;width:90%;position:relative}:host .container .columns-container{display:flex;flex-flow:row wrap;transition:.5s;justify-content:space-between}:host .container .columns-container .columns-actions{display:flex;align-items:center;width:100%}:host .container .columns-container .columns-actions .right{display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:center;margin-left:auto}:host .container .columns-container .columns-actions .right>p{transition:color .5s ease;margin:0;font-size:.8em;padding-right:1em;font-weight:700;-webkit-user-select:none;user-select:none;text-align:center}:host .container .columns-container .columns-actions .right>p,:host-context(.sfc-default-theme) :host .container .columns-container .columns-actions .right>p{color:#545e61}:host-context(.sfc-dark-theme) :host .container .columns-container .columns-actions .right>p{color:#fff}:host .container .columns-container .columns-actions .right>p span{font-size:1.1em;color:#ffce54}:host .container .columns-container .columns{text-align:center;padding:.5em;width:100%;display:flex;flex-flow:row wrap}:host .container .columns-container .columns .column{text-align:center;padding:.5em;display:flex;align-items:center;justify-content:center;box-sizing:border-box}:host .container .rows-container{display:flex;flex-wrap:wrap;justify-content:center;transition:.5s;gap:1em;margin-block:1em 2em}:host .container .rows-container sfc-load-container ::ng-deep>.content{background:transparent}:host .container .rows-container sfc-load-container.loading{cursor:initial;z-index:9999}:host .container .rows-container sfc-load-container.loading .preloader{transition:background .5s ease}:host .container .rows-container sfc-load-container.loading .preloader,:host-context(.sfc-default-theme) :host .container .rows-container sfc-load-container.loading .preloader{background:#fff}:host-context(.sfc-dark-theme) :host .container .rows-container sfc-load-container.loading .preloader{background:transparent}:host .container .rows-container .row{display:contents}:host.loading .container .table-loader{position:relative;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;z-index:9998;position:absolute;transition:background-color .5s ease;opacity:.7}:host.loading .container .table-loader,:host-context(.sfc-default-theme) :host.loading .container .table-loader{background-color:#fff}:host-context(.sfc-dark-theme) :host.loading .container .table-loader{background-color:transparent}:host.rows .container .rows-container .row{display:block;width:100%;margin:.5em 0}\n"] }]
         }], ctorParameters: function () {
         return [{ type: ColumnsToggleService }, { type: Window, decorators: [{
                         type: Inject,
@@ -2445,6 +2569,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Input
             }], selectOnClick: [{
                 type: Input
+            }], selectMultiple: [{
+                type: Input
             }], selected: [{
                 type: Output
             }], dataListLabel: [{
@@ -2479,10 +2605,10 @@ class ExpandedTableRowComponent extends BaseDefaultTableContentComponent {
     }
 }
 ExpandedTableRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ExpandedTableRowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ExpandedTableRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ExpandedTableRowComponent, selector: "sfc-expanded-table-row", inputs: { expanded: "expanded", row: "row", content: "content" }, host: { properties: { "class.expanded": "this.expanded" } }, queries: [{ propertyName: "templates", predicate: TemplateReferenceDirective, read: TemplateReferenceDirective }], usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"content\" (click)=\"expanded = !expanded\">\r\n        <sfc-template-content [referenceContent]=\"row\" [templatesContent]=\"templates\"\r\n            [templateType]=\"ExpandedTemplate.Row\" [contextData]=\"contextData\">\r\n        </sfc-template-content>\r\n    </div>\r\n    <div class=\"expanded\">\r\n        <sfc-template-content [referenceContent]=\"content\" [templatesContent]=\"templates\"\r\n            [templateType]=\"ExpandedTemplate.Content\" [contextData]=\"contextData\">\r\n        </sfc-template-content>\r\n    </div>\r\n</div>", styles: [":host{display:block;width:100%;cursor:pointer;-webkit-user-select:none;user-select:none;margin-top:1em}:host .expanded{max-height:0;overflow:hidden}:host.expanded .expanded{max-height:3000px}\n"], dependencies: [{ kind: "component", type: i3.TemplateContentComponent, selector: "sfc-template-content", inputs: ["contextData", "referenceContent", "templateType", "templatesContent", "defaultContent"] }] });
+ExpandedTableRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ExpandedTableRowComponent, selector: "sfc-expanded-table-row", inputs: { expanded: "expanded", row: "row", content: "content" }, host: { properties: { "class.expanded": "this.expanded" } }, queries: [{ propertyName: "templates", predicate: TemplateReferenceDirective, read: TemplateReferenceDirective }], usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"content\" (click)=\"expanded = !expanded\">\r\n        <sfc-template-content [referenceContent]=\"row\" [templatesContent]=\"templates\"\r\n            [templateType]=\"ExpandedTemplate.Row\" [contextData]=\"contextData\">\r\n        </sfc-template-content>\r\n    </div>\r\n    <div class=\"expanded\">\r\n        <sfc-template-content [referenceContent]=\"content\" [templatesContent]=\"templates\"\r\n            [templateType]=\"ExpandedTemplate.Content\" [contextData]=\"contextData\">\r\n        </sfc-template-content>\r\n    </div>\r\n</div>", styles: [":host{display:block;width:100%;cursor:pointer;-webkit-user-select:none;user-select:none}:host .expanded{max-height:0;overflow:hidden}:host.expanded .expanded{max-height:3000px}\n"], dependencies: [{ kind: "component", type: i3.TemplateContentComponent, selector: "sfc-template-content", inputs: ["contextData", "referenceContent", "templateType", "templatesContent", "defaultContent"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ExpandedTableRowComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-expanded-table-row', template: "<div class=\"container\">\r\n    <div class=\"content\" (click)=\"expanded = !expanded\">\r\n        <sfc-template-content [referenceContent]=\"row\" [templatesContent]=\"templates\"\r\n            [templateType]=\"ExpandedTemplate.Row\" [contextData]=\"contextData\">\r\n        </sfc-template-content>\r\n    </div>\r\n    <div class=\"expanded\">\r\n        <sfc-template-content [referenceContent]=\"content\" [templatesContent]=\"templates\"\r\n            [templateType]=\"ExpandedTemplate.Content\" [contextData]=\"contextData\">\r\n        </sfc-template-content>\r\n    </div>\r\n</div>", styles: [":host{display:block;width:100%;cursor:pointer;-webkit-user-select:none;user-select:none;margin-top:1em}:host .expanded{max-height:0;overflow:hidden}:host.expanded .expanded{max-height:3000px}\n"] }]
+            args: [{ selector: 'sfc-expanded-table-row', template: "<div class=\"container\">\r\n    <div class=\"content\" (click)=\"expanded = !expanded\">\r\n        <sfc-template-content [referenceContent]=\"row\" [templatesContent]=\"templates\"\r\n            [templateType]=\"ExpandedTemplate.Row\" [contextData]=\"contextData\">\r\n        </sfc-template-content>\r\n    </div>\r\n    <div class=\"expanded\">\r\n        <sfc-template-content [referenceContent]=\"content\" [templatesContent]=\"templates\"\r\n            [templateType]=\"ExpandedTemplate.Content\" [contextData]=\"contextData\">\r\n        </sfc-template-content>\r\n    </div>\r\n</div>", styles: [":host{display:block;width:100%;cursor:pointer;-webkit-user-select:none;user-select:none}:host .expanded{max-height:0;overflow:hidden}:host.expanded .expanded{max-height:3000px}\n"] }]
         }], propDecorators: { expanded: [{
                 type: Input
             }, {
@@ -2561,6 +2687,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
 class CarouselServiceConstants {
 }
 CarouselServiceConstants.CLONE_ID_PREFIX = 'cloned-';
+CarouselServiceConstants.DEFAULT_NAV_TEXT = ['prev', 'next'];
 CarouselServiceConstants.DEFAULT_OPTIONS = {
     items: 3,
     skip_validateItems: false,
@@ -2578,8 +2705,10 @@ CarouselServiceConstants.DEFAULT_OPTIONS = {
     responsiveRefreshRate: 200,
     // defaults to Navigation
     nav: false,
-    navText: ['prev', 'next'],
+    navText: [],
+    navIcons: [],
     navSpeed: false,
+    navBottom: true,
     slideBy: 1,
     dots: true,
     dotsEach: false,
@@ -3640,6 +3769,14 @@ class CarouselNavigationService {
             this.navigationModel.previous.label = this.carouselService.settings.navText[0];
             this.navigationModel.next.label = this.carouselService.settings.navText[1];
         }
+        if (this.carouselService.settings.navIcons) {
+            this.navigationModel.previous.icon = this.carouselService.settings.navIcons[0];
+            this.navigationModel.next.icon = this.carouselService.settings.navIcons[1];
+        }
+        if (!this.carouselService.settings.navText && !this.carouselService.settings.navIcons) {
+            this.navigationModel.previous.label = CarouselServiceConstants.DEFAULT_NAV_TEXT[0];
+            this.navigationModel.next.label = CarouselServiceConstants.DEFAULT_NAV_TEXT[1];
+        }
         this.navigationDotsModel.disabled = true;
         this.carouselService.navigationModel = this.navigationModel;
         this.carouselService.navigationDotsModel = this.navigationDotsModel;
@@ -3812,7 +3949,7 @@ class CarouselStageComponent {
     }
 }
 CarouselStageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CarouselStageComponent, deps: [{ token: CarouselService }, { token: CarouselAnimateService }], target: i0.ɵɵFactoryTarget.Component });
-CarouselStageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: CarouselStageComponent, selector: "sfc-carousel-stage", inputs: { stageModel: "stageModel", slidesModel: "slidesModel" }, ngImport: i0, template: "<div class=\"container\" [ngStyle]=\"styles\" (transitionend)=\"onTransitionEnd()\">\r\n    <ng-container *ngFor=\"let slide of slidesModel; let i = index\">\r\n        <div class=\"item\" [ngClass]=\"slide.classes\" [ngStyle]=\"getItemStyles(slide)\" (animationend)=\"clear(slide.id)\"\r\n            [@autoHeight]=\"slide.heightState\">\r\n            <ng-template *ngIf=\"slide.load\" [ngTemplateOutlet]=\"slide.tplRef\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: preparePublicSlide(slide), index: i }\">\r\n            </ng-template>\r\n        </div>\r\n    </ng-container>\r\n</div>", styles: [":host .container{position:relative;touch-action:pan-y;touch-action:manipulation;-webkit-backface-visibility:hidden;backface-visibility:hidden}:host .container:after{content:\".\";display:block;clear:both;visibility:hidden;line-height:0;height:0}:host .container .item{-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translateZ(0);position:relative;min-height:1px;float:left;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}:host .container .item.center{z-index:5}:host .container .item img{display:block;width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], animations: [
+CarouselStageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: CarouselStageComponent, selector: "sfc-carousel-stage", inputs: { stageModel: "stageModel", slidesModel: "slidesModel" }, ngImport: i0, template: "<div class=\"container\" [ngStyle]=\"styles\" (transitionend)=\"onTransitionEnd()\">\r\n    <ng-container *ngFor=\"let slide of slidesModel; let i = index\">\r\n        <div class=\"item\" [ngClass]=\"slide.classes\" [ngStyle]=\"getItemStyles(slide)\" (animationend)=\"clear(slide.id)\"\r\n            [@autoHeight]=\"slide.heightState\">\r\n            <ng-template *ngIf=\"slide.load\" [ngTemplateOutlet]=\"slide.tplRef\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: preparePublicSlide(slide), index: i }\">\r\n            </ng-template>\r\n        </div>\r\n    </ng-container>\r\n</div>", styles: [":host .container{position:relative;touch-action:pan-y;touch-action:manipulation;-webkit-backface-visibility:hidden;backface-visibility:hidden}:host .container:after{content:\".\";display:block;clear:both;visibility:hidden;line-height:0;height:0}:host .container .item{display:grid;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translateZ(0);position:relative;min-height:1px;float:left;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}:host .container .item.center{z-index:5}:host .container .item img{display:block;width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], animations: [
         trigger('autoHeight', [
             state('nulled', style({ height: 0 })),
             state('full', style({ height: '*' })),
@@ -3837,7 +3974,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                                 animate(350)
                             ]),
                         ])
-                    ], template: "<div class=\"container\" [ngStyle]=\"styles\" (transitionend)=\"onTransitionEnd()\">\r\n    <ng-container *ngFor=\"let slide of slidesModel; let i = index\">\r\n        <div class=\"item\" [ngClass]=\"slide.classes\" [ngStyle]=\"getItemStyles(slide)\" (animationend)=\"clear(slide.id)\"\r\n            [@autoHeight]=\"slide.heightState\">\r\n            <ng-template *ngIf=\"slide.load\" [ngTemplateOutlet]=\"slide.tplRef\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: preparePublicSlide(slide), index: i }\">\r\n            </ng-template>\r\n        </div>\r\n    </ng-container>\r\n</div>", styles: [":host .container{position:relative;touch-action:pan-y;touch-action:manipulation;-webkit-backface-visibility:hidden;backface-visibility:hidden}:host .container:after{content:\".\";display:block;clear:both;visibility:hidden;line-height:0;height:0}:host .container .item{-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translateZ(0);position:relative;min-height:1px;float:left;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}:host .container .item.center{z-index:5}:host .container .item img{display:block;width:100%}\n"] }]
+                    ], template: "<div class=\"container\" [ngStyle]=\"styles\" (transitionend)=\"onTransitionEnd()\">\r\n    <ng-container *ngFor=\"let slide of slidesModel; let i = index\">\r\n        <div class=\"item\" [ngClass]=\"slide.classes\" [ngStyle]=\"getItemStyles(slide)\" (animationend)=\"clear(slide.id)\"\r\n            [@autoHeight]=\"slide.heightState\">\r\n            <ng-template *ngIf=\"slide.load\" [ngTemplateOutlet]=\"slide.tplRef\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: preparePublicSlide(slide), index: i }\">\r\n            </ng-template>\r\n        </div>\r\n    </ng-container>\r\n</div>", styles: [":host .container{position:relative;touch-action:pan-y;touch-action:manipulation;-webkit-backface-visibility:hidden;backface-visibility:hidden}:host .container:after{content:\".\";display:block;clear:both;visibility:hidden;line-height:0;height:0}:host .container .item{display:grid;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translateZ(0);position:relative;min-height:1px;float:left;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}:host .container .item.center{z-index:5}:host .container .item img{display:block;width:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: CarouselService }, { type: CarouselAnimateService }]; }, propDecorators: { stageModel: [{
                 type: Input
             }], slidesModel: [{
@@ -3854,6 +3991,8 @@ class CarouselComponent {
         this.lazyLoadService = lazyLoadService;
         this.animateService = animateService;
         this.changeDetectorRef = changeDetectorRef;
+        this.ButtonType = ButtonType;
+        this.disabled = false;
         this.translated = new EventEmitter();
         this.initialized = new EventEmitter();
         this.changing = new EventEmitter();
@@ -3914,6 +4053,7 @@ class CarouselComponent {
     }
     initDataStreams() {
         const _viewCurSettings$ = this.carouselService.viewCurrrentSettings.pipe(tap(data => {
+            var _a, _b;
             this.carouselDOMModel = data.carouselDOMModel;
             this.stageModel = data.stageModel;
             this.slidesModel = data.slidesModel;
@@ -3922,6 +4062,10 @@ class CarouselComponent {
             }
             this.navigationModel = data.navigationModel;
             this.navigationDotsModel = data.navigationDotsModel;
+            this.navigationContext = {
+                previous: { model: (_a = this.navigationModel) === null || _a === void 0 ? void 0 : _a.previous, action: this.previous.bind(this) },
+                next: { model: (_b = this.navigationModel) === null || _b === void 0 ? void 0 : _b.next, action: this.next.bind(this) }
+            };
             this.changeDetectorRef.markForCheck();
         }));
         const _initializedCarousel$ = this.carouselService.initializedState.pipe(tap(() => {
@@ -4015,13 +4159,13 @@ class CarouselComponent {
     }
 }
 CarouselComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CarouselComponent, deps: [{ token: i0.ElementRef }, { token: i3.ResizeService }, { token: CarouselService }, { token: CarouselNavigationService }, { token: CarouselAutoplayService }, { token: CarouselLazyLoadService }, { token: CarouselAnimateService }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
-CarouselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: CarouselComponent, selector: "sfc-carousel", inputs: { options: "options" }, outputs: { translated: "translated", initialized: "initialized", changing: "changing", changed: "changed" }, host: { listeners: { "document:visibilitychange": "onVisibilityChange()" }, properties: { "class.rtl": "this.rtl" } }, providers: [
+CarouselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: CarouselComponent, selector: "sfc-carousel", inputs: { options: "options", disabled: "disabled" }, outputs: { translated: "translated", initialized: "initialized", changing: "changing", changed: "changed" }, host: { listeners: { "document:visibilitychange": "onVisibilityChange()" }, properties: { "class.rtl": "this.rtl" } }, providers: [
         CarouselNavigationService,
         CarouselAutoplayService,
         CarouselService,
         CarouselAnimateService,
         CarouselLazyLoadService
-    ], queries: [{ propertyName: "slides", predicate: CarouselSlideDirective }], ngImport: i0, template: "<div class=\"container\" (mouseover)=\"pause()\" (mouseleave)=\"play()\">\r\n    <div *ngIf=\"carouselLoaded\" class=\"stage\">\r\n        <sfc-carousel-stage [stageModel]=\"stageModel\" [slidesModel]=\"slidesModel\"></sfc-carousel-stage>\r\n    </div>\r\n    <ng-container *ngIf=\"slides.toArray().length\">\r\n        <div class=\"navigation\" [class.disabled]=\"navigationModel.disabled\">\r\n            <div class=\"action previous\" [class.disabled]=\"navigationModel.previous.disabled\" (click)=\"previous()\">\r\n                {{navigationModel.previous.label}}\r\n            </div>\r\n            <div class=\"action next\" [class.disabled]=\"navigationModel.next.disabled\" (click)=\"next()\">\r\n                {{navigationModel.next.label}}\r\n            </div>\r\n        </div>\r\n        <div class=\"dots\" [class.disabled]=\"navigationDotsModel.disabled\">\r\n            <div *ngFor=\"let dot of navigationDotsModel?.dots\" class=\"dot\" [class.active]=\"dot.active\"\r\n                (click)=\"moveByDot(dot.id)\">\r\n                <span></span>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n</div>", styles: [":host .container{display:block;width:100%;-webkit-tap-highlight-color:transparent;position:relative;z-index:1}:host .container .stage{position:relative;overflow:hidden;transform:translateZ(0)}:host .container .dots{text-align:center;-webkit-tap-highlight-color:transparent}:host .container .dots.disabled{display:none}:host .container .dots .dot{display:inline-block;zoom:1;cursor:pointer;-webkit-user-select:none;user-select:none}:host .container .dots .dot span{width:10px;height:10px;margin:5px 7px;transition:background .5s ease;display:block;-webkit-backface-visibility:visible;backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}:host .container .dots .dot span,:host-context(.sfc-default-theme) :host .container .dots .dot span{background:#d8d7d7}:host-context(.sfc-dark-theme) :host .container .dots .dot span{background:#f6f6f6}:host .container .dots .dot.active span,:host .container .dots .dot:hover span{transition:background .5s ease}:host .container .dots .dot.active span,:host-context(.sfc-default-theme) :host .container .dots .dot.active span,:host .container .dots .dot:hover span,:host-context(.sfc-default-theme) :host .container .dots .dot:hover span{background:#656d78}:host-context(.sfc-dark-theme) :host .container .dots .dot.active span,:host-context(.sfc-dark-theme) :host .container .dots .dot:hover span{background:#aab2bd}:host .container .navigation{margin-top:10px;text-align:center;-webkit-tap-highlight-color:transparent}:host .container .navigation .action{transition:color .5s ease;font-size:14px;margin:5px;padding:4px 7px;transition:background .5s ease;display:inline-block;cursor:pointer;border-radius:3px}:host .container .navigation .action,:host-context(.sfc-default-theme) :host .container .navigation .action{color:#fff}:host-context(.sfc-dark-theme) :host .container .navigation .action{color:#545e61}:host .container .navigation .action,:host-context(.sfc-default-theme) :host .container .navigation .action{background:#d8d7d7}:host-context(.sfc-dark-theme) :host .container .navigation .action{background:#f6f6f6}:host .container .navigation .action:hover{transition:background .5s ease;text-decoration:none}:host .container .navigation .action:hover,:host-context(.sfc-default-theme) :host .container .navigation .action:hover{background:rgba(0,0,0,.1019607843)}:host-context(.sfc-dark-theme) :host .container .navigation .action:hover{background:#d8d7d7}:host .container .navigation .action.previous,:host .container .navigation .action.next{cursor:pointer;-webkit-user-select:none;user-select:none}:host .container .navigation .action.disabled{opacity:.5;cursor:default}:host .container .navigation.disabled{display:none}:host .container .navigation.disabled+.dots{margin-top:10px}:host.rtl .container{direction:rtl}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CarouselStageComponent, selector: "sfc-carousel-stage", inputs: ["stageModel", "slidesModel"] }] });
+    ], queries: [{ propertyName: "slides", predicate: CarouselSlideDirective, descendants: true }], ngImport: i0, template: "<div class=\"container\" (mouseover)=\"pause()\" (mouseleave)=\"play()\">\r\n    <div class=\"upside\">\r\n        <ng-container *ngIf=\"slides.toArray().length && !options.navBottom\">\r\n            <div class=\"navigation\" [class.disabled]=\"navigationModel.disabled\">\r\n                <ng-container *ngTemplateOutlet=\"navigationAction;context:{$implicit: navigationContext.previous}\">\r\n                </ng-container>\r\n            </div>\r\n        </ng-container>\r\n\r\n        <div *ngIf=\"carouselLoaded\" class=\"stage\">\r\n            <sfc-carousel-stage [stageModel]=\"stageModel\" [slidesModel]=\"slidesModel\"></sfc-carousel-stage>\r\n        </div>\r\n\r\n        <ng-container *ngIf=\"slides.toArray().length && !options.navBottom\">\r\n            <div class=\"navigation\" [class.disabled]=\"navigationModel.disabled\">\r\n                <ng-container *ngTemplateOutlet=\"navigationAction;context:{$implicit: navigationContext.next}\">\r\n                </ng-container>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n\r\n    <div class=\"downside\">\r\n        <ng-container *ngIf=\"slides.toArray().length\">\r\n            <div class=\"navigation\" *ngIf=\"options.navBottom\" [class.disabled]=\"navigationModel.disabled\">\r\n                <ng-container *ngTemplateOutlet=\"navigationAction;context:{$implicit: navigationContext.previous}\">\r\n                </ng-container>\r\n                <ng-container *ngTemplateOutlet=\"navigationAction;context:{$implicit: navigationContext.next}\">\r\n                </ng-container>\r\n            </div>\r\n            <div class=\"dots\" *ngIf=\"!navigationDotsModel.disabled\">\r\n                <sfc-dot *ngFor=\"let dot of navigationDotsModel?.dots\" [disabled]=\"disabled\" [active]=\"dot.active\"\r\n                    (click)=\"moveByDot(dot.id)\">\r\n                </sfc-dot>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n\r\n    <ng-template #navigationAction let-context>\r\n        <sfc-button [disabled]=\"disabled\" [text]=\"context.model?.label\" [iconBefore]=\"context.model?.icon\"\r\n            [types]=\"[ButtonType.Rounded]\" (click)=\"context.action()\">\r\n        </sfc-button>\r\n    </ng-template>\r\n</div>", styles: [":host .container .navigation{text-align:center;align-self:stretch;-webkit-tap-highlight-color:transparent}:host .container .navigation sfc-button{font-size:.6em;height:-webkit-fill-available;height:-moz-available;height:stretch}:host .container .navigation sfc-button ::ng-deep>.button{height:inherit}:host .container .navigation.disabled{display:none}:host .container .upside{display:flex;align-items:center;width:100%;-webkit-tap-highlight-color:transparent;position:relative;z-index:1}:host .container .upside .stage{position:relative;overflow:hidden;transform:translateZ(0)}:host .container .downside .dots{text-align:center;-webkit-tap-highlight-color:transparent}:host .container .downside .dots sfc-dot{cursor:pointer;zoom:1;-webkit-user-select:none;user-select:none;margin:5px 7px;transition:background .5s ease}:host .container .downside .dots sfc-dot,:host-context(.sfc-default-theme) :host .container .downside .dots sfc-dot{background:#d8d7d7}:host-context(.sfc-dark-theme) :host .container .downside .dots sfc-dot{background:#656d78}:host .container .downside .dots sfc-dot.active,:host .container .downside .dots sfc-dot:hover{transition:background .5s ease}:host .container .downside .dots sfc-dot.active,:host-context(.sfc-default-theme) :host .container .downside .dots sfc-dot.active,:host .container .downside .dots sfc-dot:hover,:host-context(.sfc-default-theme) :host .container .downside .dots sfc-dot:hover{background:#656d78}:host-context(.sfc-dark-theme) :host .container .downside .dots sfc-dot.active,:host-context(.sfc-dark-theme) :host .container .downside .dots sfc-dot:hover{background:#f6f6f6}:host .container .downside .navigation{margin:.5em 0}:host .container .downside .navigation sfc-button{margin:0 .5em}:host .container .downside .navigation.disabled+.dots{margin-top:10px}:host .container .downside:not(:empty){margin-top:1em}:host.rtl .container{direction:rtl}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.ButtonComponent, selector: "sfc-button", inputs: ["text", "iconBefore", "iconAfter", "disabled", "types"] }, { kind: "component", type: i3.DotComponent, selector: "sfc-dot", inputs: ["active", "disabled"] }, { kind: "component", type: CarouselStageComponent, selector: "sfc-carousel-stage", inputs: ["stageModel", "slidesModel"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CarouselComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sfc-carousel', providers: [
@@ -4030,7 +4174,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                         CarouselService,
                         CarouselAnimateService,
                         CarouselLazyLoadService
-                    ], template: "<div class=\"container\" (mouseover)=\"pause()\" (mouseleave)=\"play()\">\r\n    <div *ngIf=\"carouselLoaded\" class=\"stage\">\r\n        <sfc-carousel-stage [stageModel]=\"stageModel\" [slidesModel]=\"slidesModel\"></sfc-carousel-stage>\r\n    </div>\r\n    <ng-container *ngIf=\"slides.toArray().length\">\r\n        <div class=\"navigation\" [class.disabled]=\"navigationModel.disabled\">\r\n            <div class=\"action previous\" [class.disabled]=\"navigationModel.previous.disabled\" (click)=\"previous()\">\r\n                {{navigationModel.previous.label}}\r\n            </div>\r\n            <div class=\"action next\" [class.disabled]=\"navigationModel.next.disabled\" (click)=\"next()\">\r\n                {{navigationModel.next.label}}\r\n            </div>\r\n        </div>\r\n        <div class=\"dots\" [class.disabled]=\"navigationDotsModel.disabled\">\r\n            <div *ngFor=\"let dot of navigationDotsModel?.dots\" class=\"dot\" [class.active]=\"dot.active\"\r\n                (click)=\"moveByDot(dot.id)\">\r\n                <span></span>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n</div>", styles: [":host .container{display:block;width:100%;-webkit-tap-highlight-color:transparent;position:relative;z-index:1}:host .container .stage{position:relative;overflow:hidden;transform:translateZ(0)}:host .container .dots{text-align:center;-webkit-tap-highlight-color:transparent}:host .container .dots.disabled{display:none}:host .container .dots .dot{display:inline-block;zoom:1;cursor:pointer;-webkit-user-select:none;user-select:none}:host .container .dots .dot span{width:10px;height:10px;margin:5px 7px;transition:background .5s ease;display:block;-webkit-backface-visibility:visible;backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}:host .container .dots .dot span,:host-context(.sfc-default-theme) :host .container .dots .dot span{background:#d8d7d7}:host-context(.sfc-dark-theme) :host .container .dots .dot span{background:#f6f6f6}:host .container .dots .dot.active span,:host .container .dots .dot:hover span{transition:background .5s ease}:host .container .dots .dot.active span,:host-context(.sfc-default-theme) :host .container .dots .dot.active span,:host .container .dots .dot:hover span,:host-context(.sfc-default-theme) :host .container .dots .dot:hover span{background:#656d78}:host-context(.sfc-dark-theme) :host .container .dots .dot.active span,:host-context(.sfc-dark-theme) :host .container .dots .dot:hover span{background:#aab2bd}:host .container .navigation{margin-top:10px;text-align:center;-webkit-tap-highlight-color:transparent}:host .container .navigation .action{transition:color .5s ease;font-size:14px;margin:5px;padding:4px 7px;transition:background .5s ease;display:inline-block;cursor:pointer;border-radius:3px}:host .container .navigation .action,:host-context(.sfc-default-theme) :host .container .navigation .action{color:#fff}:host-context(.sfc-dark-theme) :host .container .navigation .action{color:#545e61}:host .container .navigation .action,:host-context(.sfc-default-theme) :host .container .navigation .action{background:#d8d7d7}:host-context(.sfc-dark-theme) :host .container .navigation .action{background:#f6f6f6}:host .container .navigation .action:hover{transition:background .5s ease;text-decoration:none}:host .container .navigation .action:hover,:host-context(.sfc-default-theme) :host .container .navigation .action:hover{background:rgba(0,0,0,.1019607843)}:host-context(.sfc-dark-theme) :host .container .navigation .action:hover{background:#d8d7d7}:host .container .navigation .action.previous,:host .container .navigation .action.next{cursor:pointer;-webkit-user-select:none;user-select:none}:host .container .navigation .action.disabled{opacity:.5;cursor:default}:host .container .navigation.disabled{display:none}:host .container .navigation.disabled+.dots{margin-top:10px}:host.rtl .container{direction:rtl}\n"] }]
+                    ], template: "<div class=\"container\" (mouseover)=\"pause()\" (mouseleave)=\"play()\">\r\n    <div class=\"upside\">\r\n        <ng-container *ngIf=\"slides.toArray().length && !options.navBottom\">\r\n            <div class=\"navigation\" [class.disabled]=\"navigationModel.disabled\">\r\n                <ng-container *ngTemplateOutlet=\"navigationAction;context:{$implicit: navigationContext.previous}\">\r\n                </ng-container>\r\n            </div>\r\n        </ng-container>\r\n\r\n        <div *ngIf=\"carouselLoaded\" class=\"stage\">\r\n            <sfc-carousel-stage [stageModel]=\"stageModel\" [slidesModel]=\"slidesModel\"></sfc-carousel-stage>\r\n        </div>\r\n\r\n        <ng-container *ngIf=\"slides.toArray().length && !options.navBottom\">\r\n            <div class=\"navigation\" [class.disabled]=\"navigationModel.disabled\">\r\n                <ng-container *ngTemplateOutlet=\"navigationAction;context:{$implicit: navigationContext.next}\">\r\n                </ng-container>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n\r\n    <div class=\"downside\">\r\n        <ng-container *ngIf=\"slides.toArray().length\">\r\n            <div class=\"navigation\" *ngIf=\"options.navBottom\" [class.disabled]=\"navigationModel.disabled\">\r\n                <ng-container *ngTemplateOutlet=\"navigationAction;context:{$implicit: navigationContext.previous}\">\r\n                </ng-container>\r\n                <ng-container *ngTemplateOutlet=\"navigationAction;context:{$implicit: navigationContext.next}\">\r\n                </ng-container>\r\n            </div>\r\n            <div class=\"dots\" *ngIf=\"!navigationDotsModel.disabled\">\r\n                <sfc-dot *ngFor=\"let dot of navigationDotsModel?.dots\" [disabled]=\"disabled\" [active]=\"dot.active\"\r\n                    (click)=\"moveByDot(dot.id)\">\r\n                </sfc-dot>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n\r\n    <ng-template #navigationAction let-context>\r\n        <sfc-button [disabled]=\"disabled\" [text]=\"context.model?.label\" [iconBefore]=\"context.model?.icon\"\r\n            [types]=\"[ButtonType.Rounded]\" (click)=\"context.action()\">\r\n        </sfc-button>\r\n    </ng-template>\r\n</div>", styles: [":host .container .navigation{text-align:center;align-self:stretch;-webkit-tap-highlight-color:transparent}:host .container .navigation sfc-button{font-size:.6em;height:-webkit-fill-available;height:-moz-available;height:stretch}:host .container .navigation sfc-button ::ng-deep>.button{height:inherit}:host .container .navigation.disabled{display:none}:host .container .upside{display:flex;align-items:center;width:100%;-webkit-tap-highlight-color:transparent;position:relative;z-index:1}:host .container .upside .stage{position:relative;overflow:hidden;transform:translateZ(0)}:host .container .downside .dots{text-align:center;-webkit-tap-highlight-color:transparent}:host .container .downside .dots sfc-dot{cursor:pointer;zoom:1;-webkit-user-select:none;user-select:none;margin:5px 7px;transition:background .5s ease}:host .container .downside .dots sfc-dot,:host-context(.sfc-default-theme) :host .container .downside .dots sfc-dot{background:#d8d7d7}:host-context(.sfc-dark-theme) :host .container .downside .dots sfc-dot{background:#656d78}:host .container .downside .dots sfc-dot.active,:host .container .downside .dots sfc-dot:hover{transition:background .5s ease}:host .container .downside .dots sfc-dot.active,:host-context(.sfc-default-theme) :host .container .downside .dots sfc-dot.active,:host .container .downside .dots sfc-dot:hover,:host-context(.sfc-default-theme) :host .container .downside .dots sfc-dot:hover{background:#656d78}:host-context(.sfc-dark-theme) :host .container .downside .dots sfc-dot.active,:host-context(.sfc-dark-theme) :host .container .downside .dots sfc-dot:hover{background:#f6f6f6}:host .container .downside .navigation{margin:.5em 0}:host .container .downside .navigation sfc-button{margin:0 .5em}:host .container .downside .navigation.disabled+.dots{margin-top:10px}:host .container .downside:not(:empty){margin-top:1em}:host.rtl .container{direction:rtl}\n"] }]
         }], ctorParameters: function () {
         return [{ type: i0.ElementRef }, { type: i3.ResizeService }, { type: CarouselService }, { type: CarouselNavigationService }, { type: CarouselAutoplayService }, { type: CarouselLazyLoadService }, { type: CarouselAnimateService }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                         type: Inject,
@@ -4038,6 +4182,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                     }] }];
     }, propDecorators: { options: [{
                 type: Input
+            }], disabled: [{
+                type: Input
             }], translated: [{
                 type: Output
             }], initialized: [{
@@ -4048,7 +4194,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Output
             }], slides: [{
                 type: ContentChildren,
-                args: [CarouselSlideDirective]
+                args: [CarouselSlideDirective, { descendants: true }]
             }], rtl: [{
                 type: HostBinding,
                 args: ['class.rtl']
@@ -4078,6 +4224,8 @@ NgxSfcComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         DropdownMenuItemComponent,
         NavigationMenuComponent,
         NavigationMenuItemComponent,
+        RouterMenuComponent,
+        RouterMenuItemComponent,
         // Stars
         StarsComponent,
         // Avatar
@@ -4129,6 +4277,7 @@ NgxSfcComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         SideMenuComponent,
         DropdownMenuComponent,
         NavigationMenuComponent,
+        RouterMenuComponent,
         // Stars
         StarsComponent,
         // Avatar
@@ -4177,6 +4326,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                         DropdownMenuItemComponent,
                         NavigationMenuComponent,
                         NavigationMenuItemComponent,
+                        RouterMenuComponent,
+                        RouterMenuItemComponent,
                         // Stars
                         StarsComponent,
                         // Avatar
@@ -4232,6 +4383,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                         SideMenuComponent,
                         DropdownMenuComponent,
                         NavigationMenuComponent,
+                        RouterMenuComponent,
                         // Stars
                         StarsComponent,
                         // Avatar
@@ -4268,5 +4420,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AvatarBadgePosition, AvatarComponent, CarouselComponent, CarouselSlideDirective, ChartComponent, ChartThemeService, ColumnsToggleComponent, DefaultTableCardComponent, DefaultTableColumnComponent, DefaultTableRowComponent, DropdownMenuComponent, ExpandedTableRowComponent, ExpandedTableRowTemplate, NavigationMenuComponent, NgxSfcComponentsModule, NotificationComponent, NotificationTemplate, NotificationType, ProgressCircleComponent, ProgressLineComponent, ProgressSemiCircleComponent, SelectableTableColumnComponent, SideMenuComponent, SideMenuItemType, SliderComponent, SliderType, StarsComponent, TabLabelIconComponent, TabLabelIconSliderComponent, TabLabelLineComponent, TabLabelLineSliderComponent, TableColumnType, TableComponent, TableDataType, TableSelectService, TableTemplate, TabsComponent, TabsTemplate, TagsComponent, TimelineComponent, TimelineItemPosition, getProgressColorDefaultFunc, getProgressColorDynamicallyFunc };
+export { AvatarBadgePosition, AvatarComponent, CarouselComponent, CarouselSlideDirective, ChartComponent, ChartThemeService, ColumnsToggleComponent, DefaultTableCardComponent, DefaultTableColumnComponent, DefaultTableRowComponent, DropdownMenuComponent, ExpandedTableRowComponent, ExpandedTableRowTemplate, NavigationMenuComponent, NgxSfcComponentsModule, NotificationComponent, NotificationTemplate, NotificationType, ProgressCircleComponent, ProgressColor, ProgressLineComponent, ProgressSemiCircleComponent, RouterMenuComponent, SelectableTableColumnComponent, SideMenuComponent, SideMenuItemType, SliderComponent, SliderType, StarsComponent, TabLabelIconComponent, TabLabelIconSliderComponent, TabLabelLineComponent, TabLabelLineSliderComponent, TableColumnType, TableComponent, TableDataType, TableSelectService, TableTemplate, TabsComponent, TabsTemplate, TagsComponent, TimelineComponent, TimelineItemPosition, getProgressColorDefaultFunc, getProgressColorDynamicallyFunc };
 //# sourceMappingURL=ngx-sfc-components.mjs.map