ngx-sfc-components 0.0.28 → 0.0.30

package/fesm2015/ngx-sfc-components.mjs

@@ -3,13 +3,13 @@ import { CommonModule } from '@angular/common';
 import * as i0 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, 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 * as i1$1 from 'ngx-sfc-common';
+import { isDefined, firstOrDefault, CommonConstants, TemplateReferenceDirective, UIClass, getCalcValue, UIConstants, any, Position, isNullOrEmptyString, MediaLimits, WINDOW, all, getCssLikeValue, ButtonType, replaceRgbOpacity, Theme, mergeDeep, ObservableModel, removeItem, addItem, CheckmarkType, SortingDirection, LoadContainerType, PaginationConstants, LoadContainerLoadType, generateGuid, where, sum, 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';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { trigger, transition, style, animate, state } from '@angular/animations';
+import { faAngleUp, faAngleDown, faArrowRight, faArrowLeft, faPauseCircle, faPlayCircle, faEye, faEyeSlash, faChevronUp, faChevronDown, faTableList, faBorderAll } from '@fortawesome/free-solid-svg-icons';
 
 class TabService {
     constructor() {
@@ -35,6 +35,7 @@ class TabsComponent {
         this.tabs = [];
         // End Template references
         this.selected = new EventEmitter();
+        this.data = null;
     }
     ngOnInit() {
         this.tabsSubject = new BehaviorSubject(this.tabs);
@@ -70,11 +71,14 @@ class TabsComponent {
     updateSelected(tabs, selectedIndex) {
         tabs.forEach((item, index) => {
             item.selected = index == selectedIndex;
+            if (item.selected) {
+                this.data = item.data;
+            }
         });
     }
 }
 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" }, 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" }] });
+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: i1$1.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\">\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"] }]
@@ -98,9 +102,6 @@ class TabLabelContentBase {
         this.disabled = false;
         this.selected = false;
     }
-    get tabIcon() {
-        return isDefined(this.icon) ? this.icon : faCircle;
-    }
 }
 TabLabelContentBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TabLabelContentBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
 TabLabelContentBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: TabLabelContentBase, inputs: { label: "label", icon: "icon", disabled: "disabled", selected: "selected" }, host: { properties: { "class.disabled": "this.disabled", "class.selected": "this.selected" } }, ngImport: i0 });
@@ -127,15 +128,12 @@ class TabLabelLineComponent extends TabLabelContentBase {
         super(...arguments);
         this.image = null;
     }
-    get tabLineIcon() {
-        return isNullOrEmptyString(this.image) ? this.tabIcon : null;
-    }
 }
 TabLabelLineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TabLabelLineComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-TabLabelLineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TabLabelLineComponent, selector: "sfc-tab-label-line", inputs: { image: "image" }, usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\r\n  <div class=\"content\">\r\n    <sfc-icon [icon]=\"tabLineIcon\" [imageSrc]=\"image\"></sfc-icon>\r\n    <span>{{label}}</span>\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>", styles: [":host{width:100%;cursor:pointer}:host.disabled{cursor:default;pointer-events:none}:host.disabled .container .content{transition:color .5s ease}:host.disabled .container .content,:host-context(.sfc-default-theme) :host.disabled .container .content{color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .container .content{color:#656d78}:host.selected:not(.disabled) .container .content,:host:hover:not(.disabled) .container .content{color:#ffce54}:host .container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;transition:color .2s ease;border-bottom:1px solid #e6e9ed}:host .container .content{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;text-align:center;padding:1.25em 0;overflow:hidden;font-weight:700;-webkit-user-select:none;user-select:none;transition:color .5s ease}: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{text-overflow:ellipsis;overflow:hidden}:host .container .content sfc-icon{display:none}@media (max-width: 425px){:host{padding-bottom:.6em}:host .container .content{padding:.8em;border-radius:.3em;text-overflow:initial}:host .container .content sfc-icon{display:block}:host .container .content span{display:none}}\n"], dependencies: [{ kind: "component", type: i3.IconComponent, selector: "sfc-icon", inputs: ["icon", "imageSrc"] }] });
+TabLabelLineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TabLabelLineComponent, selector: "sfc-tab-label-line", inputs: { image: "image" }, usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\r\n  <div class=\"content\">\r\n    <sfc-icon [icon]=\"icon\" [imageSrc]=\"image\" [sfcComponentSize] [customSize]=\"1.8\"></sfc-icon>\r\n    <span>{{label}}</span>\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>", styles: [":host{width:100%;cursor:pointer}:host.disabled{cursor:default;pointer-events:none}:host.disabled .container .content{transition:color .5s ease}:host.disabled .container .content,:host-context(.sfc-default-theme) :host.disabled .container .content{color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .container .content{color:#656d78}:host.selected:not(.disabled) .container .content,:host:hover:not(.disabled) .container .content{color:#ffce54}:host .container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;transition:color .2s ease;border-bottom:1px solid #e6e9ed}:host .container .content{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;flex-wrap:wrap;text-align:center;padding:1.25em 0;overflow:hidden;font-weight:700;-webkit-user-select:none;user-select:none;transition:color .5s ease}: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{text-overflow:ellipsis;overflow:hidden;font-size:.8em}:host .container .content sfc-icon{margin:.2em 0}@media (max-width: 425px){:host{padding-bottom:.6em}:host .container .content{padding:.8em;border-radius:.3em;text-overflow:initial}:host .container .content sfc-icon{display:block}:host .container .content span{display:none}}\n"], dependencies: [{ kind: "directive", type: i1$1.ComponentSizeDirective, selector: "[sfcComponentSize]", inputs: ["sfcComponentSize", "customSize"] }, { kind: "component", type: i1$1.IconComponent, selector: "sfc-icon", inputs: ["icon", "imageSrc"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TabLabelLineComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-tab-label-line', template: "<div class=\"container\">\r\n  <div class=\"content\">\r\n    <sfc-icon [icon]=\"tabLineIcon\" [imageSrc]=\"image\"></sfc-icon>\r\n    <span>{{label}}</span>\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>", styles: [":host{width:100%;cursor:pointer}:host.disabled{cursor:default;pointer-events:none}:host.disabled .container .content{transition:color .5s ease}:host.disabled .container .content,:host-context(.sfc-default-theme) :host.disabled .container .content{color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .container .content{color:#656d78}:host.selected:not(.disabled) .container .content,:host:hover:not(.disabled) .container .content{color:#ffce54}:host .container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;transition:color .2s ease;border-bottom:1px solid #e6e9ed}:host .container .content{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;text-align:center;padding:1.25em 0;overflow:hidden;font-weight:700;-webkit-user-select:none;user-select:none;transition:color .5s ease}: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{text-overflow:ellipsis;overflow:hidden}:host .container .content sfc-icon{display:none}@media (max-width: 425px){:host{padding-bottom:.6em}:host .container .content{padding:.8em;border-radius:.3em;text-overflow:initial}:host .container .content sfc-icon{display:block}:host .container .content span{display:none}}\n"] }]
+            args: [{ selector: 'sfc-tab-label-line', template: "<div class=\"container\">\r\n  <div class=\"content\">\r\n    <sfc-icon [icon]=\"icon\" [imageSrc]=\"image\" [sfcComponentSize] [customSize]=\"1.8\"></sfc-icon>\r\n    <span>{{label}}</span>\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>", styles: [":host{width:100%;cursor:pointer}:host.disabled{cursor:default;pointer-events:none}:host.disabled .container .content{transition:color .5s ease}:host.disabled .container .content,:host-context(.sfc-default-theme) :host.disabled .container .content{color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .container .content{color:#656d78}:host.selected:not(.disabled) .container .content,:host:hover:not(.disabled) .container .content{color:#ffce54}:host .container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;transition:color .2s ease;border-bottom:1px solid #e6e9ed}:host .container .content{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;flex-wrap:wrap;text-align:center;padding:1.25em 0;overflow:hidden;font-weight:700;-webkit-user-select:none;user-select:none;transition:color .5s ease}: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{text-overflow:ellipsis;overflow:hidden;font-size:.8em}:host .container .content sfc-icon{margin:.2em 0}@media (max-width: 425px){:host{padding-bottom:.6em}:host .container .content{padding:.8em;border-radius:.3em;text-overflow:initial}:host .container .content sfc-icon{display:block}:host .container .content span{display:none}}\n"] }]
         }], propDecorators: { image: [{
                 type: Input
             }] } });
@@ -143,10 +141,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
 class TabLabelIconComponent extends TabLabelContentBase {
 }
 TabLabelIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TabLabelIconComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-TabLabelIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TabLabelIconComponent, selector: "sfc-tab-label-icon", usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\r\n  <fa-icon [icon]=\"tabIcon\"></fa-icon>\r\n  <span>{{label}}</span>\r\n  <ng-content></ng-content>\r\n</div>", styles: [":host{width:100%;cursor:pointer;transition:color .5s ease;font-weight:700;-webkit-user-select:none;user-select:none;padding-bottom:1.25em;display:inline-block;transition:all .2s ease-in-out}:host,:host-context(.sfc-default-theme) :host{color:#545e61}:host-context(.sfc-dark-theme) :host{color:#fff}:host.selected:not(.disabled),:host:hover:not(.disabled){color:#ffce54}:host.disabled{transition:color .5s ease;cursor:default;pointer-events:none}:host.disabled,:host-context(.sfc-default-theme) :host.disabled{color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled{color:#656d78}:host .container{display:inline-flex;align-items:center;flex-flow:column wrap;justify-content:center;text-align:center;overflow:hidden;text-overflow:ellipsis}:host .container fa-icon{height:1.2em;margin-bottom:.2em}:host .container span{font-size:.8em}@media (max-width: 425px){:host{padding-bottom:.6em}:host .container{padding:.8em;border-radius:.3em;text-overflow:initial}:host .container fa-icon{height:auto;margin-bottom:0}:host .container span{display:none}:host.selected .container{transition:background .5s ease}:host.selected .container,:host-context(.sfc-default-theme) :host.selected .container{background:#e6e9ed}:host-context(.sfc-dark-theme) :host.selected .container{background:#f5f7fa}}\n"], dependencies: [{ 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"] }] });
+TabLabelIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TabLabelIconComponent, selector: "sfc-tab-label-icon", usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\r\n  <fa-icon *ngIf=\"icon\" [icon]=\"icon\"></fa-icon>\r\n  <span>{{label}}</span>\r\n  <ng-content></ng-content>\r\n</div>", styles: [":host{width:100%;cursor:pointer;transition:color .5s ease;font-weight:700;-webkit-user-select:none;user-select:none;padding-bottom:1.25em;display:inline-block;transition:all .2s ease-in-out}:host,:host-context(.sfc-default-theme) :host{color:#545e61}:host-context(.sfc-dark-theme) :host{color:#fff}:host.selected:not(.disabled),:host:hover:not(.disabled){color:#ffce54}:host.disabled{transition:color .5s ease;cursor:default;pointer-events:none}:host.disabled,:host-context(.sfc-default-theme) :host.disabled{color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled{color:#656d78}:host .container{display:inline-flex;align-items:center;flex-flow:column wrap;justify-content:center;text-align:center;overflow:hidden;text-overflow:ellipsis}:host .container fa-icon{height:1.2em;margin-bottom:.2em}:host .container span{font-size:.8em}@media (max-width: 425px){:host{padding-bottom:.6em}:host .container{padding:.8em;border-radius:.3em;text-overflow:initial}:host .container fa-icon{height:auto;margin-bottom:0}:host .container span{display:none}:host.selected .container{transition:background .5s ease}:host.selected .container,:host-context(.sfc-default-theme) :host.selected .container{background:#e6e9ed}:host-context(.sfc-dark-theme) :host.selected .container{background:#f5f7fa}}\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: TabLabelIconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-tab-label-icon', template: "<div class=\"container\">\r\n  <fa-icon [icon]=\"tabIcon\"></fa-icon>\r\n  <span>{{label}}</span>\r\n  <ng-content></ng-content>\r\n</div>", styles: [":host{width:100%;cursor:pointer;transition:color .5s ease;font-weight:700;-webkit-user-select:none;user-select:none;padding-bottom:1.25em;display:inline-block;transition:all .2s ease-in-out}:host,:host-context(.sfc-default-theme) :host{color:#545e61}:host-context(.sfc-dark-theme) :host{color:#fff}:host.selected:not(.disabled),:host:hover:not(.disabled){color:#ffce54}:host.disabled{transition:color .5s ease;cursor:default;pointer-events:none}:host.disabled,:host-context(.sfc-default-theme) :host.disabled{color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled{color:#656d78}:host .container{display:inline-flex;align-items:center;flex-flow:column wrap;justify-content:center;text-align:center;overflow:hidden;text-overflow:ellipsis}:host .container fa-icon{height:1.2em;margin-bottom:.2em}:host .container span{font-size:.8em}@media (max-width: 425px){:host{padding-bottom:.6em}:host .container{padding:.8em;border-radius:.3em;text-overflow:initial}:host .container fa-icon{height:auto;margin-bottom:0}:host .container span{display:none}:host.selected .container{transition:background .5s ease}:host.selected .container,:host-context(.sfc-default-theme) :host.selected .container{background:#e6e9ed}:host-context(.sfc-dark-theme) :host.selected .container{background:#f5f7fa}}\n"] }]
+            args: [{ selector: 'sfc-tab-label-icon', template: "<div class=\"container\">\r\n  <fa-icon *ngIf=\"icon\" [icon]=\"icon\"></fa-icon>\r\n  <span>{{label}}</span>\r\n  <ng-content></ng-content>\r\n</div>", styles: [":host{width:100%;cursor:pointer;transition:color .5s ease;font-weight:700;-webkit-user-select:none;user-select:none;padding-bottom:1.25em;display:inline-block;transition:all .2s ease-in-out}:host,:host-context(.sfc-default-theme) :host{color:#545e61}:host-context(.sfc-dark-theme) :host{color:#fff}:host.selected:not(.disabled),:host:hover:not(.disabled){color:#ffce54}:host.disabled{transition:color .5s ease;cursor:default;pointer-events:none}:host.disabled,:host-context(.sfc-default-theme) :host.disabled{color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled{color:#656d78}:host .container{display:inline-flex;align-items:center;flex-flow:column wrap;justify-content:center;text-align:center;overflow:hidden;text-overflow:ellipsis}:host .container fa-icon{height:1.2em;margin-bottom:.2em}:host .container span{font-size:.8em}@media (max-width: 425px){:host{padding-bottom:.6em}:host .container{padding:.8em;border-radius:.3em;text-overflow:initial}:host .container fa-icon{height:auto;margin-bottom:0}:host .container span{display:none}:host.selected .container{transition:background .5s ease}:host.selected .container,:host-context(.sfc-default-theme) :host.selected .container{background:#e6e9ed}:host-context(.sfc-dark-theme) :host.selected .container{background:#f5f7fa}}\n"] }]
         }] });
 
 class TabSliderBase {
@@ -218,7 +216,7 @@ class SideMenuHeaderComponent {
     }
 }
 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", 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" }] });
+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: i1$1.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 *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"] }]
@@ -372,7 +370,7 @@ class SideMenuTitleComponent {
     }
 }
 SideMenuTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SideMenuTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SideMenuTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SideMenuTitleComponent, selector: "sfc-side-menu-title", inputs: { label: "label", open: "open" }, host: { properties: { "class.open": "this.open" } }, ngImport: i0, template: "<sfc-delimeter></sfc-delimeter>\r\n<li><span>{{label}}</span></li>", styles: [":host li{transition:color .5s ease;text-transform:uppercase;font-weight:700;font-size:.65em;padding:1.25em 0;transform:translate(7%);display:inline-block;transition:transform .5s ease-in-out}:host li,:host-context(.sfc-default-theme) :host li{color:#545e61}:host-context(.sfc-dark-theme) :host li{color:#fff}:host.open li{transform:translate(30%)}\n"], dependencies: [{ kind: "component", type: i3.DelimeterComponent, selector: "sfc-delimeter", inputs: ["label", "direction"] }] });
+SideMenuTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SideMenuTitleComponent, selector: "sfc-side-menu-title", inputs: { label: "label", open: "open" }, host: { properties: { "class.open": "this.open" } }, ngImport: i0, template: "<sfc-delimeter></sfc-delimeter>\r\n<li><span>{{label}}</span></li>", styles: [":host li{transition:color .5s ease;text-transform:uppercase;font-weight:700;font-size:.65em;padding:1.25em 0;transform:translate(7%);display:inline-block;transition:transform .5s ease-in-out}:host li,:host-context(.sfc-default-theme) :host li{color:#545e61}:host-context(.sfc-dark-theme) :host li{color:#fff}:host.open li{transform:translate(30%)}\n"], dependencies: [{ kind: "component", type: i1$1.DelimeterComponent, selector: "sfc-delimeter", inputs: ["label", "direction"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SideMenuTitleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sfc-side-menu-title', template: "<sfc-delimeter></sfc-delimeter>\r\n<li><span>{{label}}</span></li>", styles: [":host li{transition:color .5s ease;text-transform:uppercase;font-weight:700;font-size:.65em;padding:1.25em 0;transform:translate(7%);display:inline-block;transition:transform .5s ease-in-out}:host li,:host-context(.sfc-default-theme) :host li{color:#545e61}:host-context(.sfc-dark-theme) :host li{color:#fff}:host.open li{transform:translate(30%)}\n"] }]
@@ -447,7 +445,7 @@ class DropdownMenuItemComponent {
     }
 }
 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;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: i1$1.DelimeterComponent, selector: "sfc-delimeter", inputs: ["label", "direction"] }, { kind: "component", type: i1$1.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;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"] }]
@@ -518,8 +516,8 @@ class DropdownMenuComponent {
         event.stopPropagation();
     }
 }
-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>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: [
+DropdownMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DropdownMenuComponent, deps: [{ token: i1$1.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>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: i1$1.ClickOutsideDirective, selector: "[sfcClickOutside]", inputs: ["sfcClickOutside"], outputs: ["action"] }, { kind: "component", type: i1$1.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
@@ -548,7 +546,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                         ])
                     ], 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: [{
+        return [{ type: i1$1.ResizeService }, { type: Window, decorators: [{
                         type: Inject,
                         args: [WINDOW]
                     }] }];
@@ -653,7 +651,7 @@ class RouterMenuItemComponent {
     }
 }
 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"] }] });
+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: i1$1.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"] }]
@@ -848,7 +846,7 @@ class AvatarBadgeComponent {
     }
 }
 AvatarBadgeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AvatarBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AvatarBadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: AvatarBadgeComponent, selector: "sfc-avatar-badge", inputs: { background: "background", model: "model", radius: "radius", normalizedRadius: "normalizedRadius", stroke: "stroke" }, host: { properties: { "style": "this.styles" } }, ngImport: i0, template: "<span class=\"container\">\r\n    <ng-template #content>\r\n        <span *ngIf=\"model.label\" class=\"label\">{{model.label}}</span>\r\n        <fa-icon *ngIf=\"model.icon\" [icon]=\"model.icon\"></fa-icon>\r\n    </ng-template>\r\n\r\n    <ng-container *ngIf=\"model.tooltip?.value\">\r\n        <span class=\"tooltip\" [sfc-tooltip]=\"model.tooltip?.value\" [tooltipPosition]=\"model.tooltip?.position!\">\r\n            <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n        </span>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"!model.tooltip?.value\">\r\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n    </ng-container>\r\n</span>", styles: [":host{display:flex;position:absolute;flex-wrap:wrap;align-items:center;justify-content:center;font-weight:700;box-shadow:0 0 0 2px #fff;-webkit-user-select:none;user-select:none;border-radius:50%;color:#fff}\n"], dependencies: [{ 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: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "component", type: i3.TooltipComponent, selector: "[sfc-tooltip]", inputs: ["sfc-tooltip", "tooltipType", "tooltipPosition", "tooltipShow", "resize"] }] });
+AvatarBadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: AvatarBadgeComponent, selector: "sfc-avatar-badge", inputs: { background: "background", model: "model", radius: "radius", normalizedRadius: "normalizedRadius", stroke: "stroke" }, host: { properties: { "style": "this.styles" } }, ngImport: i0, template: "<span class=\"container\">\r\n    <ng-template #content>\r\n        <span *ngIf=\"model.label\" class=\"label\">{{model.label}}</span>\r\n        <fa-icon *ngIf=\"model.icon\" [icon]=\"model.icon\"></fa-icon>\r\n    </ng-template>\r\n\r\n    <ng-container *ngIf=\"model.tooltip?.value\">\r\n        <span class=\"tooltip\" [sfc-tooltip]=\"model.tooltip?.value\" [tooltipPosition]=\"model.tooltip?.position!\">\r\n            <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n        </span>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"!model.tooltip?.value\">\r\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n    </ng-container>\r\n</span>", styles: [":host{display:flex;position:absolute;flex-wrap:wrap;align-items:center;justify-content:center;font-weight:700;box-shadow:0 0 0 2px #fff;-webkit-user-select:none;user-select:none;border-radius:50%;color:#fff}\n"], dependencies: [{ 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: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "component", type: i1$1.TooltipComponent, selector: "[sfc-tooltip]", inputs: ["sfc-tooltip", "tooltipType", "tooltipPosition", "tooltipShow", "resize"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AvatarBadgeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sfc-avatar-badge', template: "<span class=\"container\">\r\n    <ng-template #content>\r\n        <span *ngIf=\"model.label\" class=\"label\">{{model.label}}</span>\r\n        <fa-icon *ngIf=\"model.icon\" [icon]=\"model.icon\"></fa-icon>\r\n    </ng-template>\r\n\r\n    <ng-container *ngIf=\"model.tooltip?.value\">\r\n        <span class=\"tooltip\" [sfc-tooltip]=\"model.tooltip?.value\" [tooltipPosition]=\"model.tooltip?.position!\">\r\n            <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n        </span>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"!model.tooltip?.value\">\r\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n    </ng-container>\r\n</span>", styles: [":host{display:flex;position:absolute;flex-wrap:wrap;align-items:center;justify-content:center;font-weight:700;box-shadow:0 0 0 2px #fff;-webkit-user-select:none;user-select:none;border-radius:50%;color:#fff}\n"] }]
@@ -1141,18 +1139,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
 class TagsComponent {
     constructor() {
         this.tags = [];
-        this.tags1 = [];
+        this.remove = new EventEmitter();
+    }
+    onRemove(model) {
+        this.remove.emit(model);
     }
 }
 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", tags1: "tags1" }, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"tags\">\r\n        <sfc-tag *ngFor=\"let tag of tags1\" [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: i3.TagComponent, selector: "sfc-tag", inputs: ["close", "model"], outputs: ["remove"] }] });
+TagsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TagsComponent, selector: "sfc-tags", inputs: { tags: "tags" }, outputs: { remove: "remove" }, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"content\">\r\n        <sfc-tag *ngFor=\"let tag of tags\" [model]=\"tag\" [sfcComponentSize] [customSize]=\"0.8\"\r\n            (remove)=\"onRemove($event)\">\r\n        </sfc-tag>\r\n    </div>\r\n</div>", styles: [":host{display:inline-block}:host .container .content{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}:host .container .content sfc-tag{margin:.2em}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.ComponentSizeDirective, selector: "[sfcComponentSize]", inputs: ["sfcComponentSize", "customSize"] }, { kind: "component", type: i1$1.TagComponent, selector: "sfc-tag", inputs: ["model"], outputs: ["remove"] }] });
 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 tags1\" [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"] }]
+            args: [{ selector: 'sfc-tags', template: "<div class=\"container\">\r\n    <div class=\"content\">\r\n        <sfc-tag *ngFor=\"let tag of tags\" [model]=\"tag\" [sfcComponentSize] [customSize]=\"0.8\"\r\n            (remove)=\"onRemove($event)\">\r\n        </sfc-tag>\r\n    </div>\r\n</div>", styles: [":host{display:inline-block}:host .container .content{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}:host .container .content sfc-tag{margin:.2em}\n"] }]
         }], propDecorators: { tags: [{
                 type: Input
-            }], tags1: [{
-                type: Input
+            }], remove: [{
+                type: Output
             }] } });
 
 var SliderButtonType;
@@ -1172,7 +1173,7 @@ class SliderItemComponent {
     ;
 }
 SliderItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SliderItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SliderItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SliderItemComponent, selector: "sfc-slider-item", inputs: { model: "model" }, host: { properties: { "style.height.px": "this._height" } }, viewQueries: [{ propertyName: "imageEl", first: true, predicate: ["image"], descendants: true }], ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"title\">\r\n        <h2>{{model.title}}</h2>\r\n        <span>{{model.subTitle}}</span>\r\n    </div>\r\n    <div class=\"image\">\r\n        <img #image [src]=\"model.imageSrc\" sfcImageLoad>\r\n    </div>   \r\n</div>", styles: [":host{display:inline-block}:host .container{position:absolute;left:0;top:0;width:100%}:host .container .title{position:absolute;top:10%;left:6%;-webkit-user-select:none;user-select:none;font-size:1.5em;z-index:2}:host .container .title h2{margin:0;text-transform:uppercase}:host .container .image{position:relative;z-index:1}:host .container .image img{max-width:100%;height:auto}\n"], dependencies: [{ kind: "directive", type: i3.ImageLoadDirective, selector: "[sfcImageLoad]", outputs: ["sfcImageLoad"] }] });
+SliderItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SliderItemComponent, selector: "sfc-slider-item", inputs: { model: "model" }, host: { properties: { "style.height.px": "this._height" } }, viewQueries: [{ propertyName: "imageEl", first: true, predicate: ["image"], descendants: true }], ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"title\">\r\n        <h2>{{model.title}}</h2>\r\n        <span>{{model.subTitle}}</span>\r\n    </div>\r\n    <div class=\"image\">\r\n        <img #image [src]=\"model.imageSrc\" sfcImageLoad>\r\n    </div>   \r\n</div>", styles: [":host{display:inline-block}:host .container{position:absolute;left:0;top:0;width:100%}:host .container .title{position:absolute;top:10%;left:6%;-webkit-user-select:none;user-select:none;font-size:1.5em;z-index:2}:host .container .title h2{margin:0;text-transform:uppercase}:host .container .image{position:relative;z-index:1}:host .container .image img{max-width:100%;height:auto}\n"], dependencies: [{ kind: "directive", type: i1$1.ImageLoadDirective, selector: "[sfcImageLoad]", outputs: ["sfcImageLoad"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SliderItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sfc-slider-item', template: "<div class=\"container\">\r\n    <div class=\"title\">\r\n        <h2>{{model.title}}</h2>\r\n        <span>{{model.subTitle}}</span>\r\n    </div>\r\n    <div class=\"image\">\r\n        <img #image [src]=\"model.imageSrc\" sfcImageLoad>\r\n    </div>   \r\n</div>", styles: [":host{display:inline-block}:host .container{position:absolute;left:0;top:0;width:100%}:host .container .title{position:absolute;top:10%;left:6%;-webkit-user-select:none;user-select:none;font-size:1.5em;z-index:2}:host .container .title h2{margin:0;text-transform:uppercase}:host .container .image{position:relative;z-index:1}:host .container .image img{max-width:100%;height:auto}\n"] }]
@@ -1401,12 +1402,12 @@ class SliderComponent {
         return value * this.SIZE_FACTOR;
     }
 }
-SliderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SliderComponent, deps: [{ token: SliderService }, { token: SliderAutomaticService }, { token: i3.ResizeService }, { token: i3.ImageLoadService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-SliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SliderComponent, selector: "sfc-slider", inputs: { items: "items", type: "type", showCount: "showCount", pagination: "pagination", handlers: "handlers", showAutomaticToggle: "showAutomaticToggle" }, host: { listeners: { "mouseenter": "onEnter()", "mouseleave": "onLeave()" }, properties: { "style.font-size.em": "this._sizeFactor", "style.max-width.px": "this._maxWidth" } }, providers: [SliderService, SliderAutomaticService], viewQueries: [{ propertyName: "itemsEl", first: true, predicate: ["itemsContainer"], descendants: true }, { propertyName: "sliderItems", predicate: SliderItemComponent, descendants: true }], ngImport: i0, template: "<div class=\"container\" *ngIf=\"vm$ | async as vm\">\r\n    <div #itemsContainer class=\"items\">\r\n        <sfc-slider-item *ngFor=\"let item of items; let itemIndex = index;\" [model]=\"item\"\r\n            [sfcShowHideElement]=\"itemIndex === vm.index\"></sfc-slider-item>\r\n    </div>\r\n\r\n    <div *ngIf=\"handlers\" class=\"buttons\">\r\n        <sfc-slider-button [active]=\"active\" [type]=\"SliderButtonType.Next\" (click)=\"move(SliderMoveType.Next)\">\r\n        </sfc-slider-button>\r\n        <sfc-slider-button [active]=\"active\" [type]=\"SliderButtonType.Previous\" (click)=\"move(SliderMoveType.Previous)\">\r\n        </sfc-slider-button>\r\n    </div>\r\n\r\n    <div class=\"counter\" *ngIf=\"showCount\">{{vm.label}}</div>\r\n\r\n    <div class=\"actions\">\r\n        <sfc-slider-pagination *ngIf=\"pagination\" [count]=\"vm.count\" [index]=\"vm.index\" (selected)=\"select($event)\">\r\n        </sfc-slider-pagination>\r\n\r\n        <div *ngIf=\"isAutomatic && showAutomaticToggle\" class=\"automatic\" (click)=\"toggleAutomatic()\">\r\n            <fa-icon [icon]=\"automaticIcon\"></fa-icon>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{display:inline-block;width:100%}:host .container{position:relative;color:#fff}:host .container .counter{top:10%;right:6%;position:absolute;font-weight:700;-webkit-user-select:none;user-select:none}:host .container .actions{cursor:pointer;display:flex;flex-direction:column;justify-content:center;position:absolute;top:85%;align-items:center;width:100%}:host .container .actions .automatic{margin-top:.3em}:host .container .buttons,:host .container .counter,:host .container .actions{z-index:2}\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.ShowHideElementDirective, selector: "[sfcShowHideElement]", inputs: ["sfcShowHideElement", "delay"] }, { kind: "component", type: SliderItemComponent, selector: "sfc-slider-item", inputs: ["model"] }, { kind: "component", type: SliderButtonComponent, selector: "sfc-slider-button", inputs: ["type", "active"] }, { kind: "component", type: SliderPaginationComponent, selector: "sfc-slider-pagination", inputs: ["count", "index"], outputs: ["selected"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
+SliderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SliderComponent, deps: [{ token: SliderService }, { token: SliderAutomaticService }, { token: i1$1.ResizeService }, { token: i1$1.ImageLoadService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+SliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SliderComponent, selector: "sfc-slider", inputs: { items: "items", type: "type", showCount: "showCount", pagination: "pagination", handlers: "handlers", showAutomaticToggle: "showAutomaticToggle" }, host: { listeners: { "mouseenter": "onEnter()", "mouseleave": "onLeave()" }, properties: { "style.font-size.em": "this._sizeFactor", "style.max-width.px": "this._maxWidth" } }, providers: [SliderService, SliderAutomaticService], viewQueries: [{ propertyName: "itemsEl", first: true, predicate: ["itemsContainer"], descendants: true }, { propertyName: "sliderItems", predicate: SliderItemComponent, descendants: true }], ngImport: i0, template: "<div class=\"container\" *ngIf=\"vm$ | async as vm\">\r\n    <div #itemsContainer class=\"items\">\r\n        <sfc-slider-item *ngFor=\"let item of items; let itemIndex = index;\" [model]=\"item\"\r\n            [sfcShowHideElement]=\"itemIndex === vm.index\"></sfc-slider-item>\r\n    </div>\r\n\r\n    <div *ngIf=\"handlers\" class=\"buttons\">\r\n        <sfc-slider-button [active]=\"active\" [type]=\"SliderButtonType.Next\" (click)=\"move(SliderMoveType.Next)\">\r\n        </sfc-slider-button>\r\n        <sfc-slider-button [active]=\"active\" [type]=\"SliderButtonType.Previous\" (click)=\"move(SliderMoveType.Previous)\">\r\n        </sfc-slider-button>\r\n    </div>\r\n\r\n    <div class=\"counter\" *ngIf=\"showCount\">{{vm.label}}</div>\r\n\r\n    <div class=\"actions\">\r\n        <sfc-slider-pagination *ngIf=\"pagination\" [count]=\"vm.count\" [index]=\"vm.index\" (selected)=\"select($event)\">\r\n        </sfc-slider-pagination>\r\n\r\n        <div *ngIf=\"isAutomatic && showAutomaticToggle\" class=\"automatic\" (click)=\"toggleAutomatic()\">\r\n            <fa-icon [icon]=\"automaticIcon\"></fa-icon>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{display:inline-block;width:100%}:host .container{position:relative;color:#fff}:host .container .counter{top:10%;right:6%;position:absolute;font-weight:700;-webkit-user-select:none;user-select:none}:host .container .actions{cursor:pointer;display:flex;flex-direction:column;justify-content:center;position:absolute;top:85%;align-items:center;width:100%}:host .container .actions .automatic{margin-top:.3em}:host .container .buttons,:host .container .counter,:host .container .actions{z-index:2}\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: i1$1.ShowHideElementDirective, selector: "[sfcShowHideElement]", inputs: ["sfcShowHideElement", "delay"] }, { kind: "component", type: SliderItemComponent, selector: "sfc-slider-item", inputs: ["model"] }, { kind: "component", type: SliderButtonComponent, selector: "sfc-slider-button", inputs: ["type", "active"] }, { kind: "component", type: SliderPaginationComponent, selector: "sfc-slider-pagination", inputs: ["count", "index"], outputs: ["selected"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SliderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sfc-slider', providers: [SliderService, SliderAutomaticService], template: "<div class=\"container\" *ngIf=\"vm$ | async as vm\">\r\n    <div #itemsContainer class=\"items\">\r\n        <sfc-slider-item *ngFor=\"let item of items; let itemIndex = index;\" [model]=\"item\"\r\n            [sfcShowHideElement]=\"itemIndex === vm.index\"></sfc-slider-item>\r\n    </div>\r\n\r\n    <div *ngIf=\"handlers\" class=\"buttons\">\r\n        <sfc-slider-button [active]=\"active\" [type]=\"SliderButtonType.Next\" (click)=\"move(SliderMoveType.Next)\">\r\n        </sfc-slider-button>\r\n        <sfc-slider-button [active]=\"active\" [type]=\"SliderButtonType.Previous\" (click)=\"move(SliderMoveType.Previous)\">\r\n        </sfc-slider-button>\r\n    </div>\r\n\r\n    <div class=\"counter\" *ngIf=\"showCount\">{{vm.label}}</div>\r\n\r\n    <div class=\"actions\">\r\n        <sfc-slider-pagination *ngIf=\"pagination\" [count]=\"vm.count\" [index]=\"vm.index\" (selected)=\"select($event)\">\r\n        </sfc-slider-pagination>\r\n\r\n        <div *ngIf=\"isAutomatic && showAutomaticToggle\" class=\"automatic\" (click)=\"toggleAutomatic()\">\r\n            <fa-icon [icon]=\"automaticIcon\"></fa-icon>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{display:inline-block;width:100%}:host .container{position:relative;color:#fff}:host .container .counter{top:10%;right:6%;position:absolute;font-weight:700;-webkit-user-select:none;user-select:none}:host .container .actions{cursor:pointer;display:flex;flex-direction:column;justify-content:center;position:absolute;top:85%;align-items:center;width:100%}:host .container .actions .automatic{margin-top:.3em}:host .container .buttons,:host .container .counter,:host .container .actions{z-index:2}\n"] }]
-        }], ctorParameters: function () { return [{ type: SliderService }, { type: SliderAutomaticService }, { type: i3.ResizeService }, { type: i3.ImageLoadService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { items: [{
+        }], ctorParameters: function () { return [{ type: SliderService }, { type: SliderAutomaticService }, { type: i1$1.ResizeService }, { type: i1$1.ImageLoadService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { items: [{
                 type: Input
             }], type: [{
                 type: Input
@@ -1456,7 +1457,7 @@ class TimelineItemComponent {
     }
 }
 TimelineItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimelineItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TimelineItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TimelineItemComponent, selector: "sfc-timeline-item", inputs: { model: "model" }, host: { properties: { "class": "this.position", "class.period": "this.period" } }, ngImport: i0, template: "<li class=\"container\">\r\n    <div class=\"date-time\">\r\n        <span>{{model.dateTimeLabel}}</span>\r\n    </div>\r\n    <div class=\"marker\">\r\n        <div class=\"delimeter\"></div>\r\n    </div>\r\n    <div class=\"content\">\r\n        <div class=\"title\">\r\n            <sfc-icon [icon]=\"model.icon\" [imageSrc]=\"model.image\"></sfc-icon>\r\n            <span>{{model.title}}</span>\r\n        </div>        \r\n        <p>{{model.description}}</p>\r\n    </div>\r\n</li>", styles: [":host{display:block}:host .container{padding:0 0 .5em 2.5em;position:relative}:host .container .date-time{font-size:.8em;font-weight:700;letter-spacing:.06em;margin:0 0 .5em;text-transform:uppercase;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;transition:color .5s ease}:host .container .date-time,:host-context(.sfc-default-theme) :host .container .date-time{color:#545e61}:host-context(.sfc-dark-theme) :host .container .date-time{color:#fff}:host .container .marker{position:absolute;top:0;bottom:0;left:0}:host .container .marker:before{box-sizing:border-box;background:#2bbbad;border:.18em solid transparent;border-radius:100%;content:\"\";display:block;position:absolute;top:.25em;width:1em;height:1em;transition:background .3s ease-in-out,border .3s ease-in-out}:host .container .marker:after{content:\"\";width:.18em;display:block;position:absolute;top:1.5em;bottom:0;left:.375em;transition:background .5s ease;box-sizing:border-box}:host .container .marker:after,:host-context(.sfc-default-theme) :host .container .marker:after{background:#545e61}:host-context(.sfc-dark-theme) :host .container .marker:after{background:#fff}:host .container .marker .delimeter{display:none;width:1em;bottom:0;position:absolute;border-bottom:.18em solid;transition:border-color .5s ease}:host .container .marker .delimeter,:host-context(.sfc-default-theme) :host .container .marker .delimeter{border-color:#545e61}:host-context(.sfc-dark-theme) :host .container .marker .delimeter{border-color:#fff}:host .container .content{transition:color .5s ease;font-size:1em;font-weight:700;line-height:initial;padding-bottom:2.5em;-webkit-user-select:none;user-select:none;box-sizing:border-box;display:flex;flex-flow:column wrap;align-items:flex-start}: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 p{font-size:.8em;line-height:1em;color:#aab2bd;margin:0}:host .container .content sfc-icon{margin-right:.31em}:host.period .container{padding:0}:host.period .container .date-time{display:none}:host.period .container .marker:before{background:transparent;content:\"\";height:auto;border:none;border-radius:0;top:0;bottom:1.875em;border-top:.18em solid;border-bottom:.18em solid;transition:border-color .5s ease;transition:none}:host.period .container .marker:before,:host-context(.sfc-default-theme) :host.period .container .marker:before{border-color:#545e61}:host-context(.sfc-dark-theme) :host.period .container .marker:before{border-color:#fff}:host.period .container .marker:after{content:\"\";height:2em;top:auto}:host.period .container .content{padding:2.5em 0 4.375em;justify-content:start}:host.period .container .content .title{width:100%}:host.period .container .content .title span{margin:0;font-size:1.875em;text-align:center}:host:not(.period):hover .container .marker:before{transition:background .5s ease;border:.18em solid #2bbbad}:host:not(.period):hover .container .marker:before,:host-context(.sfc-default-theme) :host:not(.period):hover .container .marker:before{background:transparent}:host-context(.sfc-dark-theme) :host:not(.period):hover .container .marker:before{background:#fff}@media (min-width: 435px){:host .container{padding:0 0 .31em;overflow:hidden}:host .container .date-time{width:50%}:host .container .marker{left:50%;margin-left:-.46em}:host .container .content{padding:0;width:50%}:host.period .container{padding:2em 0 3.5em}:host.period .container .content{padding:0;width:100%;text-align:center;justify-content:center;align-items:center}:host:not(.period).right .container .date-time{float:left;text-align:right;padding-right:1.875em}:host:not(.period).right .container .content{padding-left:1.5em;justify-content:start}:host:not(.period).left .container .date-time{float:right;padding-left:1.875em}:host:not(.period).left .container .content{padding-right:1.5em;justify-content:end;align-items:end}:host:not(.period).left .container .content .title{text-align:end}:host:not(.period).left .container .content span,:host:not(.period).left .container .content p{text-align:end}}\n"], dependencies: [{ kind: "component", type: i3.IconComponent, selector: "sfc-icon", inputs: ["icon", "imageSrc"] }] });
+TimelineItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TimelineItemComponent, selector: "sfc-timeline-item", inputs: { model: "model" }, host: { properties: { "class": "this.position", "class.period": "this.period" } }, ngImport: i0, template: "<li class=\"container\">\r\n    <div class=\"date-time\">\r\n        <span>{{model.dateTimeLabel}}</span>\r\n    </div>\r\n    <div class=\"marker\">\r\n        <div class=\"delimeter\"></div>\r\n    </div>\r\n    <div class=\"content\">\r\n        <div class=\"title\">\r\n            <sfc-icon [icon]=\"model.icon\" [imageSrc]=\"model.image\"></sfc-icon>\r\n            <span>{{model.title}}</span>\r\n        </div>        \r\n        <p>{{model.description}}</p>\r\n    </div>\r\n</li>", styles: [":host{display:block}:host .container{padding:0 0 .5em 2.5em;position:relative}:host .container .date-time{font-size:.8em;font-weight:700;letter-spacing:.06em;margin:0 0 .5em;text-transform:uppercase;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;transition:color .5s ease}:host .container .date-time,:host-context(.sfc-default-theme) :host .container .date-time{color:#545e61}:host-context(.sfc-dark-theme) :host .container .date-time{color:#fff}:host .container .marker{position:absolute;top:0;bottom:0;left:0}:host .container .marker:before{box-sizing:border-box;background:#2bbbad;border:.18em solid transparent;border-radius:100%;content:\"\";display:block;position:absolute;top:.25em;width:1em;height:1em;transition:background .3s ease-in-out,border .3s ease-in-out}:host .container .marker:after{content:\"\";width:.18em;display:block;position:absolute;top:1.5em;bottom:0;left:.375em;transition:background .5s ease;box-sizing:border-box}:host .container .marker:after,:host-context(.sfc-default-theme) :host .container .marker:after{background:#545e61}:host-context(.sfc-dark-theme) :host .container .marker:after{background:#fff}:host .container .marker .delimeter{display:none;width:1em;bottom:0;position:absolute;border-bottom:.18em solid;transition:border-color .5s ease}:host .container .marker .delimeter,:host-context(.sfc-default-theme) :host .container .marker .delimeter{border-color:#545e61}:host-context(.sfc-dark-theme) :host .container .marker .delimeter{border-color:#fff}:host .container .content{transition:color .5s ease;font-size:1em;font-weight:700;line-height:initial;padding-bottom:2.5em;-webkit-user-select:none;user-select:none;box-sizing:border-box;display:flex;flex-flow:column wrap;align-items:flex-start}: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 p{font-size:.8em;line-height:1em;color:#aab2bd;margin:0}:host .container .content sfc-icon{margin-right:.31em}:host.period .container{padding:0}:host.period .container .date-time{display:none}:host.period .container .marker:before{background:transparent;content:\"\";height:auto;border:none;border-radius:0;top:0;bottom:1.875em;border-top:.18em solid;border-bottom:.18em solid;transition:border-color .5s ease;transition:none}:host.period .container .marker:before,:host-context(.sfc-default-theme) :host.period .container .marker:before{border-color:#545e61}:host-context(.sfc-dark-theme) :host.period .container .marker:before{border-color:#fff}:host.period .container .marker:after{content:\"\";height:2em;top:auto}:host.period .container .content{padding:2.5em 0 4.375em;justify-content:start}:host.period .container .content .title{width:100%}:host.period .container .content .title span{margin:0;font-size:1.875em;text-align:center}:host:not(.period):hover .container .marker:before{transition:background .5s ease;border:.18em solid #2bbbad}:host:not(.period):hover .container .marker:before,:host-context(.sfc-default-theme) :host:not(.period):hover .container .marker:before{background:transparent}:host-context(.sfc-dark-theme) :host:not(.period):hover .container .marker:before{background:#fff}@media (min-width: 435px){:host .container{padding:0 0 .31em;overflow:hidden}:host .container .date-time{width:50%}:host .container .marker{left:50%;margin-left:-.46em}:host .container .content{padding:0;width:50%}:host.period .container{padding:2em 0 3.5em}:host.period .container .content{padding:0;width:100%;text-align:center;justify-content:center;align-items:center}:host:not(.period).right .container .date-time{float:left;text-align:right;padding-right:1.875em}:host:not(.period).right .container .content{padding-left:1.5em;justify-content:start}:host:not(.period).left .container .date-time{float:right;padding-left:1.875em}:host:not(.period).left .container .content{padding-right:1.5em;justify-content:end;align-items:end}:host:not(.period).left .container .content .title{text-align:end}:host:not(.period).left .container .content span,:host:not(.period).left .container .content p{text-align:end}}\n"], dependencies: [{ kind: "component", type: i1$1.IconComponent, selector: "sfc-icon", inputs: ["icon", "imageSrc"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimelineItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sfc-timeline-item', template: "<li class=\"container\">\r\n    <div class=\"date-time\">\r\n        <span>{{model.dateTimeLabel}}</span>\r\n    </div>\r\n    <div class=\"marker\">\r\n        <div class=\"delimeter\"></div>\r\n    </div>\r\n    <div class=\"content\">\r\n        <div class=\"title\">\r\n            <sfc-icon [icon]=\"model.icon\" [imageSrc]=\"model.image\"></sfc-icon>\r\n            <span>{{model.title}}</span>\r\n        </div>        \r\n        <p>{{model.description}}</p>\r\n    </div>\r\n</li>", styles: [":host{display:block}:host .container{padding:0 0 .5em 2.5em;position:relative}:host .container .date-time{font-size:.8em;font-weight:700;letter-spacing:.06em;margin:0 0 .5em;text-transform:uppercase;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;transition:color .5s ease}:host .container .date-time,:host-context(.sfc-default-theme) :host .container .date-time{color:#545e61}:host-context(.sfc-dark-theme) :host .container .date-time{color:#fff}:host .container .marker{position:absolute;top:0;bottom:0;left:0}:host .container .marker:before{box-sizing:border-box;background:#2bbbad;border:.18em solid transparent;border-radius:100%;content:\"\";display:block;position:absolute;top:.25em;width:1em;height:1em;transition:background .3s ease-in-out,border .3s ease-in-out}:host .container .marker:after{content:\"\";width:.18em;display:block;position:absolute;top:1.5em;bottom:0;left:.375em;transition:background .5s ease;box-sizing:border-box}:host .container .marker:after,:host-context(.sfc-default-theme) :host .container .marker:after{background:#545e61}:host-context(.sfc-dark-theme) :host .container .marker:after{background:#fff}:host .container .marker .delimeter{display:none;width:1em;bottom:0;position:absolute;border-bottom:.18em solid;transition:border-color .5s ease}:host .container .marker .delimeter,:host-context(.sfc-default-theme) :host .container .marker .delimeter{border-color:#545e61}:host-context(.sfc-dark-theme) :host .container .marker .delimeter{border-color:#fff}:host .container .content{transition:color .5s ease;font-size:1em;font-weight:700;line-height:initial;padding-bottom:2.5em;-webkit-user-select:none;user-select:none;box-sizing:border-box;display:flex;flex-flow:column wrap;align-items:flex-start}: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 p{font-size:.8em;line-height:1em;color:#aab2bd;margin:0}:host .container .content sfc-icon{margin-right:.31em}:host.period .container{padding:0}:host.period .container .date-time{display:none}:host.period .container .marker:before{background:transparent;content:\"\";height:auto;border:none;border-radius:0;top:0;bottom:1.875em;border-top:.18em solid;border-bottom:.18em solid;transition:border-color .5s ease;transition:none}:host.period .container .marker:before,:host-context(.sfc-default-theme) :host.period .container .marker:before{border-color:#545e61}:host-context(.sfc-dark-theme) :host.period .container .marker:before{border-color:#fff}:host.period .container .marker:after{content:\"\";height:2em;top:auto}:host.period .container .content{padding:2.5em 0 4.375em;justify-content:start}:host.period .container .content .title{width:100%}:host.period .container .content .title span{margin:0;font-size:1.875em;text-align:center}:host:not(.period):hover .container .marker:before{transition:background .5s ease;border:.18em solid #2bbbad}:host:not(.period):hover .container .marker:before,:host-context(.sfc-default-theme) :host:not(.period):hover .container .marker:before{background:transparent}:host-context(.sfc-dark-theme) :host:not(.period):hover .container .marker:before{background:#fff}@media (min-width: 435px){:host .container{padding:0 0 .31em;overflow:hidden}:host .container .date-time{width:50%}:host .container .marker{left:50%;margin-left:-.46em}:host .container .content{padding:0;width:50%}:host.period .container{padding:2em 0 3.5em}:host.period .container .content{padding:0;width:100%;text-align:center;justify-content:center;align-items:center}:host:not(.period).right .container .date-time{float:left;text-align:right;padding-right:1.875em}:host:not(.period).right .container .content{padding-left:1.5em;justify-content:start}:host:not(.period).left .container .date-time{float:right;padding-left:1.875em}:host:not(.period).left .container .content{padding-right:1.5em;justify-content:end;align-items:end}:host:not(.period).left .container .content .title{text-align:end}:host:not(.period).left .container .content span,:host:not(.period).left .container .content p{text-align:end}}\n"] }]
@@ -1508,7 +1509,7 @@ class NotificationContentComponent {
     }
 }
 NotificationContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NotificationContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NotificationContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: NotificationContentComponent, selector: "sfc-notification-content", inputs: { type: "type", model: "model" }, outputs: { buttonClicked: "buttonClicked" }, host: { properties: { "class": "this.type" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"illustration\">\r\n        <div *ngIf=\"model.icon\">\r\n            <fa-icon [icon]=\"model.icon\"></fa-icon>\r\n        </div>\r\n        <div *ngIf=\"showImage\">\r\n            <img [src]=\"model.image\">\r\n        </div>\r\n    </div>\r\n    <div class=\"message\">\r\n        <h1>{{model.title}}</h1>\r\n        <p>{{model.subTitle}}</p>\r\n    </div>\r\n    <div *ngIf=\"model.showButton\" class=\"action\">\r\n        <sfc-button text=\"{{model.buttonText || type}}\" [types]=\"[ButtonType.Rounded, ButtonType.Filled]\"\r\n            (click)=\"buttonClicked.emit()\"></sfc-button>\r\n    </div>\r\n</div>", styles: [":host{display:inline-block;font-size:3em}:host.info ::ng-deep sfc-button .button.filled{color:#4fc1e9!important}:host.success ::ng-deep sfc-button .button.filled{color:#4ec07d!important}:host.failed ::ng-deep sfc-button .button.filled{color:#e96075!important}:host .container{display:flex;flex-direction:column;justify-content:center;align-items:center}:host .container .illustration{color:#f5f7fa;display:flex;justify-content:center;align-items:center;font-size:.7em}:host .container .illustration img{object-fit:contain;width:3em;height:3em}:host .container .message{text-align:center;-webkit-user-select:none;user-select:none}:host .container .message h1{font-size:.4em;color:#f5f7fa;font-weight:700;letter-spacing:.3em;text-transform:uppercase}:host .container .message p{font-size:.2em;font-weight:100;color:#434a54;letter-spacing:.1em}:host .container .action{font-size:.25em}:host .container .action ::ng-deep sfc-button{transition:transform .3s ease-in-out}:host .container .action ::ng-deep sfc-button .button.filled{background:#f5f7fa;border:solid .125em #f5f7fa}:host .container .action ::ng-deep sfc-button:hover{transform:scale(1.05)}\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"] }, { kind: "component", type: i3.ButtonComponent, selector: "sfc-button", inputs: ["text", "iconBefore", "iconAfter", "disabled", "types"] }] });
+NotificationContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: NotificationContentComponent, selector: "sfc-notification-content", inputs: { type: "type", model: "model" }, outputs: { buttonClicked: "buttonClicked" }, host: { properties: { "class": "this.type" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"illustration\">\r\n        <div *ngIf=\"model.icon\">\r\n            <fa-icon [icon]=\"model.icon\"></fa-icon>\r\n        </div>\r\n        <div *ngIf=\"showImage\">\r\n            <img [src]=\"model.image\">\r\n        </div>\r\n    </div>\r\n    <div class=\"message\">\r\n        <h1>{{model.title}}</h1>\r\n        <p>{{model.subTitle}}</p>\r\n    </div>\r\n    <div *ngIf=\"model.showButton\" class=\"action\">\r\n        <sfc-button text=\"{{model.buttonText || type}}\" [types]=\"[ButtonType.Rounded, ButtonType.Filled]\"\r\n            (click)=\"buttonClicked.emit()\"></sfc-button>\r\n    </div>\r\n</div>", styles: [":host{display:inline-block;font-size:3em}:host.info ::ng-deep sfc-button .button.filled{color:#4fc1e9!important}:host.success ::ng-deep sfc-button .button.filled{color:#4ec07d!important}:host.failed ::ng-deep sfc-button .button.filled{color:#e96075!important}:host .container{display:flex;flex-direction:column;justify-content:center;align-items:center}:host .container .illustration{color:#f5f7fa;display:flex;justify-content:center;align-items:center;font-size:.7em}:host .container .illustration img{object-fit:contain;width:3em;height:3em}:host .container .message{text-align:center;-webkit-user-select:none;user-select:none}:host .container .message h1{font-size:.4em;color:#f5f7fa;font-weight:700;letter-spacing:.3em;text-transform:uppercase}:host .container .message p{font-size:.2em;font-weight:100;color:#434a54;letter-spacing:.1em}:host .container .action{font-size:.25em}:host .container .action ::ng-deep sfc-button{transition:transform .3s ease-in-out}:host .container .action ::ng-deep sfc-button .button.filled{background:#f5f7fa;border:solid .125em #f5f7fa}:host .container .action ::ng-deep sfc-button:hover{transform:scale(1.05)}\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"] }, { kind: "component", type: i1$1.ButtonComponent, selector: "sfc-button", inputs: ["text", "iconBefore", "iconAfter", "disabled", "types"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NotificationContentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sfc-notification-content', template: "<div class=\"container\">\r\n    <div class=\"illustration\">\r\n        <div *ngIf=\"model.icon\">\r\n            <fa-icon [icon]=\"model.icon\"></fa-icon>\r\n        </div>\r\n        <div *ngIf=\"showImage\">\r\n            <img [src]=\"model.image\">\r\n        </div>\r\n    </div>\r\n    <div class=\"message\">\r\n        <h1>{{model.title}}</h1>\r\n        <p>{{model.subTitle}}</p>\r\n    </div>\r\n    <div *ngIf=\"model.showButton\" class=\"action\">\r\n        <sfc-button text=\"{{model.buttonText || type}}\" [types]=\"[ButtonType.Rounded, ButtonType.Filled]\"\r\n            (click)=\"buttonClicked.emit()\"></sfc-button>\r\n    </div>\r\n</div>", styles: [":host{display:inline-block;font-size:3em}:host.info ::ng-deep sfc-button .button.filled{color:#4fc1e9!important}:host.success ::ng-deep sfc-button .button.filled{color:#4ec07d!important}:host.failed ::ng-deep sfc-button .button.filled{color:#e96075!important}:host .container{display:flex;flex-direction:column;justify-content:center;align-items:center}:host .container .illustration{color:#f5f7fa;display:flex;justify-content:center;align-items:center;font-size:.7em}:host .container .illustration img{object-fit:contain;width:3em;height:3em}:host .container .message{text-align:center;-webkit-user-select:none;user-select:none}:host .container .message h1{font-size:.4em;color:#f5f7fa;font-weight:700;letter-spacing:.3em;text-transform:uppercase}:host .container .message p{font-size:.2em;font-weight:100;color:#434a54;letter-spacing:.1em}:host .container .action{font-size:.25em}:host .container .action ::ng-deep sfc-button{transition:transform .3s ease-in-out}:host .container .action ::ng-deep sfc-button .button.filled{background:#f5f7fa;border:solid .125em #f5f7fa}:host .container .action ::ng-deep sfc-button:hover{transform:scale(1.05)}\n"] }]
@@ -1564,7 +1565,7 @@ class NotificationComponent {
     }
 }
 NotificationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NotificationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: NotificationComponent, selector: "sfc-notification", inputs: { showClose: "showClose", autoCloseModel: "autoCloseModel", type: "type", model: "model", content: "content" }, outputs: { closed: "closed", buttonClicked: "buttonClicked" }, host: { properties: { "class": "this.type" } }, queries: [{ propertyName: "templates", predicate: TemplateReferenceDirective, read: TemplateReferenceDirective }], ngImport: i0, template: "<div class=\"container\" [sfcDestroyParent]=\"destroy\" [delay]=\"DESTROY_HOST_INTERVAL\">\r\n    <div class=\"notification\" [sfcShowHideElement]=\"show\">\r\n        <sfc-close *ngIf=\"showClose\" (click)=\"close()\"></sfc-close>\r\n\r\n        <sfc-template-content [referenceContent]=\"content\" [templatesContent]=\"templates\"\r\n            [templateType]=\"NotificationTemplate.Content\" [defaultContent]=\"defaultContent\">\r\n        </sfc-template-content>\r\n\r\n        <ng-template #defaultContent>\r\n            <sfc-notification-content [type]=\"type\" [model]=\"model\" (buttonClicked)=\"buttonClicked.emit()\">\r\n            </sfc-notification-content>\r\n        </ng-template>\r\n    </div>\r\n</div>", styles: [":host{position:relative;z-index:9998;display:inline-block}:host .container .notification{border-radius:1.25em;box-shadow:5px 5px 20px #656d78;padding:1em;display:flex;justify-content:center;align-items:center;flex-direction:column;color:#f5f7fa}:host .container .notification sfc-close{align-self:end}:host .container .notification ::ng-deep sfc-close{color:#f5f7fa}:host .container .notification ::ng-deep sfc-close:hover{color:#fff}:host.info .container .notification{background:linear-gradient(to bottom right,#4fc1e9 40%,#4a89dc 100%)}:host.success .container .notification{background:linear-gradient(to bottom right,#b0db7d 40%,#99dbb4 100%)}:host.failed .container .notification{background:linear-gradient(to bottom left,#ef8d9c 40%,#ffc39e 100%)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ShowHideElementDirective, selector: "[sfcShowHideElement]", inputs: ["sfcShowHideElement", "delay"] }, { kind: "directive", type: i3.DestroyParentDirective, selector: "[sfcDestroyParent]", inputs: ["sfcDestroyParent", "delay"] }, { kind: "component", type: i3.CloseComponent, selector: "sfc-close" }, { kind: "component", type: i3.TemplateContentComponent, selector: "sfc-template-content", inputs: ["contextData", "referenceContent", "templateType", "templatesContent", "defaultContent"] }, { kind: "component", type: NotificationContentComponent, selector: "sfc-notification-content", inputs: ["type", "model"], outputs: ["buttonClicked"] }] });
+NotificationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: NotificationComponent, selector: "sfc-notification", inputs: { showClose: "showClose", autoCloseModel: "autoCloseModel", type: "type", model: "model", content: "content" }, outputs: { closed: "closed", buttonClicked: "buttonClicked" }, host: { properties: { "class": "this.type" } }, queries: [{ propertyName: "templates", predicate: TemplateReferenceDirective, read: TemplateReferenceDirective }], ngImport: i0, template: "<div class=\"container\" [sfcDestroyParent]=\"destroy\" [delay]=\"DESTROY_HOST_INTERVAL\">\r\n    <div class=\"notification\" [sfcShowHideElement]=\"show\">\r\n        <sfc-close *ngIf=\"showClose\" (click)=\"close()\"></sfc-close>\r\n\r\n        <sfc-template-content [referenceContent]=\"content\" [templatesContent]=\"templates\"\r\n            [templateType]=\"NotificationTemplate.Content\" [defaultContent]=\"defaultContent\">\r\n        </sfc-template-content>\r\n\r\n        <ng-template #defaultContent>\r\n            <sfc-notification-content [type]=\"type\" [model]=\"model\" (buttonClicked)=\"buttonClicked.emit()\">\r\n            </sfc-notification-content>\r\n        </ng-template>\r\n    </div>\r\n</div>", styles: [":host{position:relative;z-index:9998;display:inline-block}:host .container .notification{border-radius:1.25em;box-shadow:5px 5px 20px #656d78;padding:1em;display:flex;justify-content:center;align-items:center;flex-direction:column;color:#f5f7fa}:host .container .notification sfc-close{align-self:end}:host .container .notification ::ng-deep sfc-close{color:#f5f7fa}:host .container .notification ::ng-deep sfc-close:hover{color:#fff}:host.info .container .notification{background:linear-gradient(to bottom right,#4fc1e9 40%,#4a89dc 100%)}:host.success .container .notification{background:linear-gradient(to bottom right,#b0db7d 40%,#99dbb4 100%)}:host.failed .container .notification{background:linear-gradient(to bottom left,#ef8d9c 40%,#ffc39e 100%)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.ShowHideElementDirective, selector: "[sfcShowHideElement]", inputs: ["sfcShowHideElement", "delay"] }, { kind: "directive", type: i1$1.DestroyParentDirective, selector: "[sfcDestroyParent]", inputs: ["sfcDestroyParent", "delay"] }, { kind: "component", type: i1$1.CloseComponent, selector: "sfc-close" }, { kind: "component", type: i1$1.TemplateContentComponent, selector: "sfc-template-content", inputs: ["contextData", "referenceContent", "templateType", "templatesContent", "defaultContent"] }, { kind: "component", type: NotificationContentComponent, selector: "sfc-notification-content", inputs: ["type", "model"], outputs: ["buttonClicked"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NotificationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sfc-notification', template: "<div class=\"container\" [sfcDestroyParent]=\"destroy\" [delay]=\"DESTROY_HOST_INTERVAL\">\r\n    <div class=\"notification\" [sfcShowHideElement]=\"show\">\r\n        <sfc-close *ngIf=\"showClose\" (click)=\"close()\"></sfc-close>\r\n\r\n        <sfc-template-content [referenceContent]=\"content\" [templatesContent]=\"templates\"\r\n            [templateType]=\"NotificationTemplate.Content\" [defaultContent]=\"defaultContent\">\r\n        </sfc-template-content>\r\n\r\n        <ng-template #defaultContent>\r\n            <sfc-notification-content [type]=\"type\" [model]=\"model\" (buttonClicked)=\"buttonClicked.emit()\">\r\n            </sfc-notification-content>\r\n        </ng-template>\r\n    </div>\r\n</div>", styles: [":host{position:relative;z-index:9998;display:inline-block}:host .container .notification{border-radius:1.25em;box-shadow:5px 5px 20px #656d78;padding:1em;display:flex;justify-content:center;align-items:center;flex-direction:column;color:#f5f7fa}:host .container .notification sfc-close{align-self:end}:host .container .notification ::ng-deep sfc-close{color:#f5f7fa}:host .container .notification ::ng-deep sfc-close:hover{color:#fff}:host.info .container .notification{background:linear-gradient(to bottom right,#4fc1e9 40%,#4a89dc 100%)}:host.success .container .notification{background:linear-gradient(to bottom right,#b0db7d 40%,#99dbb4 100%)}:host.failed .container .notification{background:linear-gradient(to bottom left,#ef8d9c 40%,#ffc39e 100%)}\n"] }]
@@ -1909,12 +1910,13 @@ var TableColumnType;
     TableColumnType["Sequence"] = "sequence";
     TableColumnType["Selectable"] = "selectable";
     TableColumnType["Expanded"] = "expanded";
+    TableColumnType["Action"] = "action";
 })(TableColumnType || (TableColumnType = {}));
 
 class ColumnsToggleService {
     constructor() {
         // current state of toggle 
-        this.show = true;
+        this.show = false;
         this.toggleSubject = new BehaviorSubject(this.show);
         // toggle state observable
         this.toggle$ = this.toggleSubject.asObservable();
@@ -2043,7 +2045,7 @@ class SelectableTableColumnComponent {
     }
 }
 SelectableTableColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SelectableTableColumnComponent, deps: [{ token: TableSelectService }], target: i0.ɵɵFactoryTarget.Component });
-SelectableTableColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SelectableTableColumnComponent, selector: "sfc-selectable-table-column", inputs: { selected: "selected" }, host: { listeners: { "click": "selectAll()" }, properties: { "class.active": "this.selected" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <sfc-checkmark [active]=\"selected\" [type]=\"CheckmarkType.Circle\"></sfc-checkmark>\r\n    <span>{{label}}</span>\r\n</div>", styles: [":host{display:inline-block}:host .container{font-size:1em;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .5s ease}:host .container,:host-context(.sfc-default-theme) :host .container{color:#545e61}:host-context(.sfc-dark-theme) :host .container{color:#fff}:host .container span{padding-left:.31em}:host:hover .container,:host.active .container{color:#ffce54!important}:host:hover .container sfc-checkmark ::ng-deep>.container .check,:host.active .container sfc-checkmark ::ng-deep>.container .check{border-color:#ffce54}\n"], dependencies: [{ kind: "component", type: i3.CheckmarkComponent, selector: "sfc-checkmark", inputs: ["active", "disabled", "icon", "type"] }] });
+SelectableTableColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SelectableTableColumnComponent, selector: "sfc-selectable-table-column", inputs: { selected: "selected" }, host: { listeners: { "click": "selectAll()" }, properties: { "class.active": "this.selected" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <sfc-checkmark [active]=\"selected\" [type]=\"CheckmarkType.Circle\"></sfc-checkmark>\r\n    <span>{{label}}</span>\r\n</div>", styles: [":host{display:inline-block}:host .container{font-size:1em;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .5s ease}:host .container,:host-context(.sfc-default-theme) :host .container{color:#545e61}:host-context(.sfc-dark-theme) :host .container{color:#fff}:host .container span{padding-left:.31em}:host:hover .container,:host.active .container{color:#ffce54!important}:host:hover .container sfc-checkmark ::ng-deep>.container .check,:host.active .container sfc-checkmark ::ng-deep>.container .check{border-color:#ffce54}\n"], dependencies: [{ kind: "component", type: i1$1.CheckmarkComponent, selector: "sfc-checkmark", inputs: ["active", "disabled", "icon", "type"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SelectableTableColumnComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sfc-selectable-table-column', template: "<div class=\"container\">\r\n    <sfc-checkmark [active]=\"selected\" [type]=\"CheckmarkType.Circle\"></sfc-checkmark>\r\n    <span>{{label}}</span>\r\n</div>", styles: [":host{display:inline-block}:host .container{font-size:1em;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .5s ease}:host .container,:host-context(.sfc-default-theme) :host .container{color:#545e61}:host-context(.sfc-dark-theme) :host .container{color:#fff}:host .container span{padding-left:.31em}:host:hover .container,:host.active .container{color:#ffce54!important}:host:hover .container sfc-checkmark ::ng-deep>.container .check,:host.active .container sfc-checkmark ::ng-deep>.container .check{border-color:#ffce54}\n"] }]
@@ -2079,7 +2081,7 @@ class ColumnsToggleComponent {
     }
 }
 ColumnsToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ColumnsToggleComponent, deps: [{ token: ColumnsToggleService }], target: i0.ɵɵFactoryTarget.Component });
-ColumnsToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ColumnsToggleComponent, selector: "sfc-columns-toggle", inputs: { showLabel: "showLabel", hideLabel: "hideLabel" }, host: { listeners: { "click": "onToggle()" } }, ngImport: i0, template: "<div class=\"container\" *ngIf=\"vm$ | async as vm\">\r\n    <div>\r\n        <span class=\"icon\" [sfcShowHideElement]=\"!vm.show\">\r\n            <fa-icon [icon]=\"vm.model.ICON\"></fa-icon>\r\n        </span>\r\n        <span class=\"icon\" [sfcShowHideElement]=\"vm.show\">\r\n            <fa-icon [icon]=\"vm.model.ICON\"></fa-icon>\r\n        </span>\r\n        <span class=\"label\">{{vm.model.LABEL}}</span>\r\n    </div>\r\n</div>", styles: [":host{display:flex;align-items:center}:host .container{transition:color .5s ease;font-size:.625em;font-weight:700;text-transform:uppercase;width:100%;text-align:end;cursor:pointer;-webkit-user-select:none;user-select:none}:host .container,:host-context(.sfc-default-theme) :host .container{color:#545e61}:host-context(.sfc-dark-theme) :host .container{color:#fff}:host .container:hover{color:#ffce54}:host .container span.icon{position:absolute}:host .container span.label{padding-left:2em}\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"] }, { kind: "directive", type: i3.ShowHideElementDirective, selector: "[sfcShowHideElement]", inputs: ["sfcShowHideElement", "delay"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
+ColumnsToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ColumnsToggleComponent, selector: "sfc-columns-toggle", inputs: { showLabel: "showLabel", hideLabel: "hideLabel" }, host: { listeners: { "click": "onToggle()" } }, ngImport: i0, template: "<div class=\"container\" *ngIf=\"vm$ | async as vm\">\r\n    <div>\r\n        <span class=\"icon\" [sfcShowHideElement]=\"!vm.show\">\r\n            <fa-icon [icon]=\"vm.model.ICON\"></fa-icon>\r\n        </span>\r\n        <span class=\"icon\" [sfcShowHideElement]=\"vm.show\">\r\n            <fa-icon [icon]=\"vm.model.ICON\"></fa-icon>\r\n        </span>\r\n        <span class=\"label\">{{vm.model.LABEL}}</span>\r\n    </div>\r\n</div>", styles: [":host{display:flex;align-items:center}:host .container{transition:color .5s ease;font-size:.625em;font-weight:700;text-transform:uppercase;width:100%;text-align:end;cursor:pointer;-webkit-user-select:none;user-select:none}:host .container,:host-context(.sfc-default-theme) :host .container{color:#545e61}:host-context(.sfc-dark-theme) :host .container{color:#fff}:host .container:hover{color:#ffce54}:host .container span.icon{position:absolute}:host .container span.label{padding-left:2em}\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"] }, { kind: "directive", type: i1$1.ShowHideElementDirective, selector: "[sfcShowHideElement]", inputs: ["sfcShowHideElement", "delay"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ColumnsToggleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sfc-columns-toggle', template: "<div class=\"container\" *ngIf=\"vm$ | async as vm\">\r\n    <div>\r\n        <span class=\"icon\" [sfcShowHideElement]=\"!vm.show\">\r\n            <fa-icon [icon]=\"vm.model.ICON\"></fa-icon>\r\n        </span>\r\n        <span class=\"icon\" [sfcShowHideElement]=\"vm.show\">\r\n            <fa-icon [icon]=\"vm.model.ICON\"></fa-icon>\r\n        </span>\r\n        <span class=\"label\">{{vm.model.LABEL}}</span>\r\n    </div>\r\n</div>", styles: [":host{display:flex;align-items:center}:host .container{transition:color .5s ease;font-size:.625em;font-weight:700;text-transform:uppercase;width:100%;text-align:end;cursor:pointer;-webkit-user-select:none;user-select:none}:host .container,:host-context(.sfc-default-theme) :host .container{color:#545e61}:host-context(.sfc-dark-theme) :host .container{color:#fff}:host .container:hover{color:#ffce54}:host .container span.icon{position:absolute}:host .container span.label{padding-left:2em}\n"] }]
@@ -2139,12 +2141,12 @@ class SortingColumnComponent {
         this._subscription.unsubscribe();
     }
 }
-SortingColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SortingColumnComponent, deps: [{ token: i3.SortingService }], target: i0.ɵɵFactoryTarget.Component });
+SortingColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SortingColumnComponent, deps: [{ token: i1$1.SortingService }], target: i0.ɵɵFactoryTarget.Component });
 SortingColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SortingColumnComponent, selector: "sfc-sorting-column", inputs: { id: "id", model: "model" }, host: { listeners: { "click": "sort()" }, properties: { "class.enabled": "this.enabled", "class.active": "this.active" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"content\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n    <div *ngIf=\"enabled\" class=\"icons\">\r\n        <fa-icon [icon]=\"icon\"></fa-icon>\r\n    </div>\r\n</div>", styles: [":host{cursor:default;text-overflow:ellipsis;overflow:hidden}:host.enabled{cursor:pointer}:host .container{display:flex;flex-wrap:wrap;justify-content:center;min-width:0;transition:color .5s ease}:host .container,:host-context(.sfc-default-theme) :host .container{color:#545e61}:host-context(.sfc-dark-theme) :host .container{color:#fff}:host .container:hover{color:#ffce54}:host .container .content{display:flex;-webkit-user-select:none;user-select:none}:host .container .icons{margin:0 .31em;font-size:.7em;display:flex;align-items:center}:host.active .container{color:#ffce54}\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: SortingColumnComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sfc-sorting-column', template: "<div class=\"container\">\r\n    <div class=\"content\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n    <div *ngIf=\"enabled\" class=\"icons\">\r\n        <fa-icon [icon]=\"icon\"></fa-icon>\r\n    </div>\r\n</div>", styles: [":host{cursor:default;text-overflow:ellipsis;overflow:hidden}:host.enabled{cursor:pointer}:host .container{display:flex;flex-wrap:wrap;justify-content:center;min-width:0;transition:color .5s ease}:host .container,:host-context(.sfc-default-theme) :host .container{color:#545e61}:host-context(.sfc-dark-theme) :host .container{color:#fff}:host .container:hover{color:#ffce54}:host .container .content{display:flex;-webkit-user-select:none;user-select:none}:host .container .icons{margin:0 .31em;font-size:.7em;display:flex;align-items:center}:host.active .container{color:#ffce54}\n"] }]
-        }], ctorParameters: function () { return [{ type: i3.SortingService }]; }, propDecorators: { id: [{
+        }], ctorParameters: function () { return [{ type: i1$1.SortingService }]; }, propDecorators: { id: [{
                 type: Input
             }], model: [{
                 type: Input
@@ -2237,7 +2239,7 @@ class DefaultTableRowComponent extends BaseDefaultTableContentComponent {
     }
 }
 DefaultTableRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DefaultTableRowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DefaultTableRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DefaultTableRowComponent, selector: "sfc-default-table-row", usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\r\n    <div [style.width]=\"column.calculatedWidth\" [style.text-align]=\"position\" class=\"content-container\"\r\n        *ngFor=\"let column of columns\">\r\n        <div class=\"content\" [style.align-items]=\"contentPosition\">\r\n            <ng-container [ngSwitch]=\"column.type\">\r\n                <div class=\"checkmark\" #columnCheckmark *ngSwitchCase=\"TableColumnType.Selectable\">\r\n                    <sfc-checkmark [active]=\"model.selected || false\" [type]=\"CheckmarkType.Circle\"></sfc-checkmark>\r\n                </div>\r\n                <div *ngSwitchCase=\"TableColumnType.Sequence\">\r\n                    <span class=\"name\">{{column.name}}</span>\r\n                    <span>{{model.sequence}}</span>\r\n                </div>\r\n                <div *ngSwitchDefault>\r\n                    <span class=\"name\">{{column.name}}</span>\r\n                    <span>{{model.data[column.field]}}</span>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{display:block;width:100%;border-radius:1.25em;box-shadow:0 .625em 1em #00000005;transition:background-color .3s,box-shadow .6s cubic-bezier(.25,1,.5,.1);margin:1em 0;cursor:default;-webkit-user-select:none;user-select:none}:host .container{flex-flow:row wrap;padding:0 .31em;display:flex;align-items:center}:host .container .content-container{color:#545e61;font-weight:700;text-overflow:ellipsis;overflow:hidden;-webkit-user-select:none;user-select:none}:host .container .content-container .content{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:.7em .5em}:host .container .content-container .content .name{display:none;font-size:.625em;line-height:.625em;font-weight:700;text-transform:uppercase;color:#656d78}@media all and (max-width: 767px){:host .container{align-items:flex-start}:host .container .content-container .content{align-items:flex-start;padding:.625em 1.25em}:host .container .content-container .content .name{display:block}}\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: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i3.CheckmarkComponent, selector: "sfc-checkmark", inputs: ["active", "disabled", "icon", "type"] }] });
+DefaultTableRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DefaultTableRowComponent, selector: "sfc-default-table-row", usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\r\n    <div [style.width]=\"column.calculatedWidth\" [style.text-align]=\"position\" class=\"content-container\"\r\n        *ngFor=\"let column of columns\">\r\n        <div class=\"content\" [style.align-items]=\"contentPosition\">\r\n            <ng-container [ngSwitch]=\"column.type\">\r\n                <div class=\"checkmark\" #columnCheckmark *ngSwitchCase=\"TableColumnType.Selectable\">\r\n                    <sfc-checkmark [active]=\"model.selected || false\" [type]=\"CheckmarkType.Circle\"></sfc-checkmark>\r\n                </div>\r\n                <div *ngSwitchCase=\"TableColumnType.Sequence\">\r\n                    <span class=\"name\">{{column.name}}</span>\r\n                    <span>{{model.sequence}}</span>\r\n                </div>\r\n                <div *ngSwitchDefault>\r\n                    <span class=\"name\">{{column.name}}</span>\r\n                    <span>{{model.data[column.field]}}</span>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{display:block;width:100%;border-radius:1.25em;box-shadow:0 .625em 1em #00000005;transition:background-color .3s,box-shadow .6s cubic-bezier(.25,1,.5,.1);margin:1em 0;cursor:default;-webkit-user-select:none;user-select:none}:host .container{flex-flow:row wrap;padding:0 .31em;display:flex;align-items:center}:host .container .content-container{color:#545e61;font-weight:700;text-overflow:ellipsis;overflow:hidden;-webkit-user-select:none;user-select:none}:host .container .content-container .content{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:.7em .5em}:host .container .content-container .content .name{display:none;font-size:.625em;line-height:.625em;font-weight:700;text-transform:uppercase;color:#656d78}@media all and (max-width: 767px){:host .container{align-items:flex-start}:host .container .content-container .content{align-items:flex-start;padding:.625em 1.25em}:host .container .content-container .content .name{display:block}}\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: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i1$1.CheckmarkComponent, selector: "sfc-checkmark", inputs: ["active", "disabled", "icon", "type"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DefaultTableRowComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sfc-default-table-row', template: "<div class=\"container\">\r\n    <div [style.width]=\"column.calculatedWidth\" [style.text-align]=\"position\" class=\"content-container\"\r\n        *ngFor=\"let column of columns\">\r\n        <div class=\"content\" [style.align-items]=\"contentPosition\">\r\n            <ng-container [ngSwitch]=\"column.type\">\r\n                <div class=\"checkmark\" #columnCheckmark *ngSwitchCase=\"TableColumnType.Selectable\">\r\n                    <sfc-checkmark [active]=\"model.selected || false\" [type]=\"CheckmarkType.Circle\"></sfc-checkmark>\r\n                </div>\r\n                <div *ngSwitchCase=\"TableColumnType.Sequence\">\r\n                    <span class=\"name\">{{column.name}}</span>\r\n                    <span>{{model.sequence}}</span>\r\n                </div>\r\n                <div *ngSwitchDefault>\r\n                    <span class=\"name\">{{column.name}}</span>\r\n                    <span>{{model.data[column.field]}}</span>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{display:block;width:100%;border-radius:1.25em;box-shadow:0 .625em 1em #00000005;transition:background-color .3s,box-shadow .6s cubic-bezier(.25,1,.5,.1);margin:1em 0;cursor:default;-webkit-user-select:none;user-select:none}:host .container{flex-flow:row wrap;padding:0 .31em;display:flex;align-items:center}:host .container .content-container{color:#545e61;font-weight:700;text-overflow:ellipsis;overflow:hidden;-webkit-user-select:none;user-select:none}:host .container .content-container .content{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:.7em .5em}:host .container .content-container .content .name{display:none;font-size:.625em;line-height:.625em;font-weight:700;text-transform:uppercase;color:#656d78}@media all and (max-width: 767px){:host .container{align-items:flex-start}:host .container .content-container .content{align-items:flex-start;padding:.625em 1.25em}:host .container .content-container .content .name{display:block}}\n"] }]
@@ -2246,10 +2248,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
 class DefaultTableCardComponent extends BaseDefaultTableContentComponent {
 }
 DefaultTableCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DefaultTableCardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DefaultTableCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DefaultTableCardComponent, selector: "sfc-default-table-card", usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"content-container\" *ngFor=\"let column of columns\">\r\n        <div class=\"content\">\r\n            <ng-container [ngSwitch]=\"column.type\">\r\n                <div #columnCheckmark *ngSwitchCase=\"TableColumnType.Selectable\">\r\n                    <sfc-checkmark [active]=\"model.selected || false\" [type]=\"CheckmarkType.Circle\"></sfc-checkmark>\r\n                </div>\r\n                <div *ngSwitchCase=\"TableColumnType.Sequence\">\r\n                    <span class=\"name\">{{column.name}}</span>\r\n                    <span>{{model.sequence}}</span>\r\n                </div>\r\n                <div *ngSwitchDefault>\r\n                    <span class=\"name\">{{column.name}}</span>\r\n                    <span>{{model.data[column.field]}}</span>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{display:inline-block;box-shadow:0 .625em 1.25em #00000030,0 .3753em .3753em #0000003b;transition:all .2s ease-in-out;border-radius:.75em;margin:.5em;cursor:default;-webkit-user-select:none;user-select:none}:host .container{flex-flow:column wrap;justify-content:center;width:min-content;display:flex;align-items:center}:host .container .content-container{color:#545e61;font-weight:700;text-overflow:ellipsis;overflow:hidden;-webkit-user-select:none;user-select:none;text-align:center;text-align:left}:host .container .content-container .content{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:.625em 1.25em}:host .container .content-container .content div{width:100%;padding:0 5em}:host .container .content-container .content .name{display:block;font-size:.625em;line-height:.625em;font-weight:700;text-transform:uppercase;color:#656d78}@media all and (max-width: 430px){:host .container{width:initial}:host .container .content-container .content div{width:initial;padding:0}}\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: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i3.CheckmarkComponent, selector: "sfc-checkmark", inputs: ["active", "disabled", "icon", "type"] }] });
+DefaultTableCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DefaultTableCardComponent, selector: "sfc-default-table-card", usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"content-container\" *ngFor=\"let column of columns\">\r\n        <div class=\"content\">\r\n            <ng-container [ngSwitch]=\"column.type\">\r\n                <div #columnCheckmark *ngSwitchCase=\"TableColumnType.Selectable\">\r\n                    <sfc-checkmark [active]=\"model.selected || false\" [type]=\"CheckmarkType.Circle\"></sfc-checkmark>\r\n                </div>\r\n                <div *ngSwitchCase=\"TableColumnType.Sequence\">\r\n                    <span class=\"name\">{{column.name}}</span>\r\n                    <span>{{model.sequence}}</span>\r\n                </div>\r\n                <div *ngSwitchDefault>\r\n                    <span class=\"name\">{{column.name}}</span>\r\n                    <span>{{model.data[column.field]}}</span>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{display:inline-block;box-shadow:0 .625em 1.25em #00000030,0 .3753em .3753em #0000003b;transition:all .2s ease-in-out;border-radius:.75em;width:calc(33.3% - 1em);cursor:default;-webkit-user-select:none;user-select:none}:host .container{flex-flow:column wrap;justify-content:center;display:flex;align-items:center}:host .container .content-container{color:#545e61;font-weight:700;text-overflow:ellipsis;overflow:hidden;-webkit-user-select:none;user-select:none;text-align:center;text-align:left}:host .container .content-container .content{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:.625em 1.25em}:host .container .content-container .content div{width:100%;padding:0 5em}:host .container .content-container .content .name{display:block;font-size:.625em;line-height:.625em;font-weight:700;text-transform:uppercase;color:#656d78}@media all and (max-width: 430px){:host .container{width:initial}:host .container .content-container .content div{width:initial;padding:0}}\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: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i1$1.CheckmarkComponent, selector: "sfc-checkmark", inputs: ["active", "disabled", "icon", "type"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DefaultTableCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-default-table-card', template: "<div class=\"container\">\r\n    <div class=\"content-container\" *ngFor=\"let column of columns\">\r\n        <div class=\"content\">\r\n            <ng-container [ngSwitch]=\"column.type\">\r\n                <div #columnCheckmark *ngSwitchCase=\"TableColumnType.Selectable\">\r\n                    <sfc-checkmark [active]=\"model.selected || false\" [type]=\"CheckmarkType.Circle\"></sfc-checkmark>\r\n                </div>\r\n                <div *ngSwitchCase=\"TableColumnType.Sequence\">\r\n                    <span class=\"name\">{{column.name}}</span>\r\n                    <span>{{model.sequence}}</span>\r\n                </div>\r\n                <div *ngSwitchDefault>\r\n                    <span class=\"name\">{{column.name}}</span>\r\n                    <span>{{model.data[column.field]}}</span>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{display:inline-block;box-shadow:0 .625em 1.25em #00000030,0 .3753em .3753em #0000003b;transition:all .2s ease-in-out;border-radius:.75em;margin:.5em;cursor:default;-webkit-user-select:none;user-select:none}:host .container{flex-flow:column wrap;justify-content:center;width:min-content;display:flex;align-items:center}:host .container .content-container{color:#545e61;font-weight:700;text-overflow:ellipsis;overflow:hidden;-webkit-user-select:none;user-select:none;text-align:center;text-align:left}:host .container .content-container .content{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:.625em 1.25em}:host .container .content-container .content div{width:100%;padding:0 5em}:host .container .content-container .content .name{display:block;font-size:.625em;line-height:.625em;font-weight:700;text-transform:uppercase;color:#656d78}@media all and (max-width: 430px){:host .container{width:initial}:host .container .content-container .content div{width:initial;padding:0}}\n"] }]
+            args: [{ selector: 'sfc-default-table-card', template: "<div class=\"container\">\r\n    <div class=\"content-container\" *ngFor=\"let column of columns\">\r\n        <div class=\"content\">\r\n            <ng-container [ngSwitch]=\"column.type\">\r\n                <div #columnCheckmark *ngSwitchCase=\"TableColumnType.Selectable\">\r\n                    <sfc-checkmark [active]=\"model.selected || false\" [type]=\"CheckmarkType.Circle\"></sfc-checkmark>\r\n                </div>\r\n                <div *ngSwitchCase=\"TableColumnType.Sequence\">\r\n                    <span class=\"name\">{{column.name}}</span>\r\n                    <span>{{model.sequence}}</span>\r\n                </div>\r\n                <div *ngSwitchDefault>\r\n                    <span class=\"name\">{{column.name}}</span>\r\n                    <span>{{model.data[column.field]}}</span>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{display:inline-block;box-shadow:0 .625em 1.25em #00000030,0 .3753em .3753em #0000003b;transition:all .2s ease-in-out;border-radius:.75em;width:calc(33.3% - 1em);cursor:default;-webkit-user-select:none;user-select:none}:host .container{flex-flow:column wrap;justify-content:center;display:flex;align-items:center}:host .container .content-container{color:#545e61;font-weight:700;text-overflow:ellipsis;overflow:hidden;-webkit-user-select:none;user-select:none;text-align:center;text-align:left}:host .container .content-container .content{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:.625em 1.25em}:host .container .content-container .content div{width:100%;padding:0 5em}:host .container .content-container .content .name{display:block;font-size:.625em;line-height:.625em;font-weight:700;text-transform:uppercase;color:#656d78}@media all and (max-width: 430px){:host .container{width:initial}:host .container .content-container .content div{width:initial;padding:0}}\n"] }]
         }] });
 
 class TableComponent {
@@ -2272,6 +2274,7 @@ class TableComponent {
         this.dataToggle = true;
         this.showColumns = true;
         this.columnsToggle = false;
+        this.columnsShowOnInit = true;
         this.pagination = PaginationConstants.DEFAULT_PAGINATION;
         this.sequence = false;
         this.expanded = false;
@@ -2351,6 +2354,9 @@ class TableComponent {
         };
         this.toggleSwitcherLeftModel = { label: this.dataListLabel, icon: faTableList };
         this.toggleSwitcherRightModel = { label: this.dataCardsLabel, icon: faBorderAll };
+        if (this.columnsShowOnInit) {
+            this.columnsToggleService.toggle();
+        }
     }
     ngAfterViewChecked() {
         this.changeDetector.detectChanges();
@@ -2457,8 +2463,17 @@ class TableComponent {
     }
     calculateColumnWidth(column, columnsLength) {
         // defined width for all columns
-        if (all(this.columns, column => isDefined(column.width)))
+        if (all(this.columns, column => isDefined(column.width))) {
             return getCssLikeValue(column.width, UIConstants.CSS_PERCENTAGE);
+        }
+        if (isDefined(column.width)) {
+            return getCssLikeValue(column.width, UIConstants.CSS_PERCENTAGE);
+        }
+        const columnsWithWidth = where(this.columns, column => isDefined(column.width)), columnsWidth = sum(columnsWithWidth, column => column.width);
+        if (columnsWidth > 0) {
+            const proportionalWidth = (CommonConstants.FULL_PERCENTAGE - columnsWidth) / (this.columns.length - columnsWithWidth.length);
+            return getCssLikeValue(proportionalWidth, UIConstants.CSS_PERCENTAGE);
+        }
         let width = columnsLength;
         if (this.window.innerWidth <= MediaLimits.MobileLarge)
             width = 1;
@@ -2480,16 +2495,16 @@ class TableComponent {
             : hasItem(this.selectedService.selectedItems, sequence);
     }
 }
-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", 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" }] });
+TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TableComponent, deps: [{ token: ColumnsToggleService }, { token: WINDOW }, { token: TableSelectService }, { token: i1$1.SortingService }, { token: i0.ChangeDetectorRef }, { token: i1$1.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", columnsShowOnInit: "columnsShowOnInit", 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;margin-block:1em 2em}:host .container .rows-container sfc-load-container ::ng-deep>.container .content{background:transparent}:host .container .rows-container sfc-load-container ::ng-deep>.container .content .items{gap:1em;margin:1em 0}: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%}\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: i1$1.DelimeterComponent, selector: "sfc-delimeter", inputs: ["label", "direction"] }, { kind: "component", type: i1$1.TemplateContentComponent, selector: "sfc-template-content", inputs: ["contextData", "referenceContent", "templateType", "templatesContent", "defaultContent"] }, { kind: "component", type: i1$1.ToggleSwitcherComponent, selector: "sfc-toggle-switcher", inputs: ["active", "disabled", "leftModel", "rightModel"], outputs: ["toggle"] }, { kind: "component", type: i1$1.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\"\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"] }]
+            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;margin-block:1em 2em}:host .container .rows-container sfc-load-container ::ng-deep>.container .content{background:transparent}:host .container .rows-container sfc-load-container ::ng-deep>.container .content .items{gap:1em;margin:1em 0}: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%}\n"] }]
         }], ctorParameters: function () {
         return [{ type: ColumnsToggleService }, { type: Window, decorators: [{
                         type: Inject,
                         args: [WINDOW]
-                    }] }, { type: TableSelectService }, { type: i3.SortingService }, { type: i0.ChangeDetectorRef }, { type: i3.ResizeService }, { type: i0.IterableDiffers }];
+                    }] }, { type: TableSelectService }, { type: i1$1.SortingService }, { type: i0.ChangeDetectorRef }, { type: i1$1.ResizeService }, { type: i0.IterableDiffers }];
     }, propDecorators: { position: [{
                 type: Input
             }], delimeter: [{
@@ -2505,6 +2520,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Input
             }], columnsToggle: [{
                 type: Input
+            }], columnsShowOnInit: [{
+                type: Input
             }], pagination: [{
                 type: Input
             }], sequence: [{
@@ -2594,7 +2611,7 @@ 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}: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: i1$1.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}:host .expanded{max-height:0;overflow:hidden}:host.expanded .expanded{max-height:3000px}\n"] }]
@@ -4147,14 +4164,14 @@ 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CarouselComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.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", 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, 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"] }] });
+    ], 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: i1$1.ButtonComponent, selector: "sfc-button", inputs: ["text", "iconBefore", "iconAfter", "disabled", "types"] }, { kind: "component", type: i1$1.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: [
@@ -4165,7 +4182,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                         CarouselLazyLoadService
                     ], 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: [{
+        return [{ type: i0.ElementRef }, { type: i1$1.ResizeService }, { type: CarouselService }, { type: CarouselNavigationService }, { type: CarouselAutoplayService }, { type: CarouselLazyLoadService }, { type: CarouselAnimateService }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                         type: Inject,
                         args: [DOCUMENT]
                     }] }];
@@ -4192,20 +4209,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 args: ['document:visibilitychange']
             }] } });
 
-class Tag2Component {
-    constructor() {
-        this.model = { label: CommonConstants.EMPTY_STRING };
-    }
-}
-Tag2Component.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: Tag2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
-Tag2Component.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: Tag2Component, selector: "sfc-tag2", 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: Tag2Component, decorators: [{
-            type: Component,
-            args: [{ selector: 'sfc-tag2', 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
-            }] } });
-
 Chart.register(Title, Tooltip, Filler, Legend, LineController, LineElement, PointElement, LinearScale, CategoryScale, BarController, BarElement, DoughnutController, ArcElement, RadarController, RadialLinearScale, PieController, PolarAreaController, BubbleController, ScatterController, TimeSeriesScale);
 class NgxSfcComponentsModule {
 }
@@ -4240,7 +4243,6 @@ NgxSfcComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         ProgressCircleComponent,
         // Tags
         TagsComponent,
-        Tag2Component,
         // Slider
         SliderComponent,
         SliderItemComponent,
@@ -4342,7 +4344,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                         ProgressCircleComponent,
                         // Tags
                         TagsComponent,
-                        Tag2Component,
                         // Slider
                         SliderComponent,
                         SliderItemComponent,
@@ -4425,3 +4426,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
 
 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
+//# sourceMappingURL=ngx-sfc-components.mjs.map