ngx-sfc-components 0.0.3 → 0.0.5

package/fesm2015/ngx-sfc-components.mjs

@@ -1,12 +1,12 @@
-import * as i2 from '@angular/common';
+import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { Component, Input, ContentChildren, Directive, HostBinding, EventEmitter, Output, HostListener, Inject, QueryList, Injectable, ViewChild, 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 i1 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, getCssLikeValue, ButtonType, replaceRgbOpacity, Theme, mergeDeep, SortingDirection, all, hasItemBy, sortByPath, PaginationService, SortingService, ResizeService, isNumeric, DOCUMENT, NgxSfcCommonModule } from 'ngx-sfc-common';
-import { Subject, BehaviorSubject, startWith, combineLatest, map, distinctUntilChanged, tap, shareReplay, merge, fromEvent, of, switchMap, first, filter, from, skip, take, toArray, delay } from 'rxjs';
-import * as i1$1 from '@fortawesome/angular-fontawesome';
+import { Subject, BehaviorSubject, startWith, combineLatest, map, filter, distinctUntilChanged, tap, shareReplay, merge, fromEvent, of, switchMap, first, from, skip, take, toArray, delay } from 'rxjs';
+import * as i2 from '@fortawesome/angular-fontawesome';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { faCircle, faAngleUp, faAngleDown, faArrowRight, faArrowLeft, faPauseCircle, faPlayCircle, faTableList, faBorderAll, faEyeSlash, faEye } from '@fortawesome/free-solid-svg-icons';
 import { trigger, transition, style, animate, state } from '@angular/animations';
@@ -70,11 +70,11 @@ class TabsComponent {
         });
     }
 }
-TabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TabsComponent, deps: [{ token: TabService }], target: i0.ɵɵFactoryTarget.Component });
-TabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: TabsComponent, selector: "sfc-tabs", inputs: { tabs: "tabs", label: "label", slider: "slider", body: "body" }, providers: [TabService], queries: [{ propertyName: "templates", predicate: TemplateReferenceDirective, read: TemplateReferenceDirective }], ngImport: i0, template: "<div class=\"container\" *ngIf=\"vm$ | async as vm\">\r\n    <div class=\"tabs-container\">\r\n        <div class=\"tabs\">\r\n            <div class=\"tab\" [style.width.%]=\"vm.tabWidth\" *ngFor=\"let tab of vm.tabs; index as index\"\r\n                (click)=\"selectTab(tab, index)\">\r\n\r\n                <sfc-template-content [referenceContent]=\"label\" [templatesContent]=\"templates\"\r\n                    [templateType]=\"TabsTemplate.Label\" [defaultContent]=\"defaultLabel\" [contextData]=\"tab\">\r\n                </sfc-template-content>\r\n\r\n                <ng-template #defaultLabel>{{ tab.label }}</ng-template>\r\n            </div>\r\n        </div>\r\n\r\n        <sfc-template-content [referenceContent]=\"slider\" [templatesContent]=\"templates\"\r\n            [templateType]=\"TabsTemplate.Slider\" [contextData]=\"vm.sliderContextData\"></sfc-template-content>\r\n\r\n    </div>\r\n\r\n    <div class=\"body-container\">\r\n        <ng-container *ngIf=\"vm.selectedTab\">\r\n\r\n            <sfc-template-content [referenceContent]=\"body\" [templatesContent]=\"templates\"\r\n                [templateType]=\"TabsTemplate.Body\" [contextData]=\"vm.selectedTab.data\">\r\n            </sfc-template-content>\r\n\r\n        </ng-container>\r\n    </div>\r\n</div>", styles: [":host{width:100%}:host .container .tabs{display:flex;flex-wrap:wrap}:host .container .tabs .tab{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:#ccd1d9}:host .container .body-container{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:#ccd1d9}\n"], components: [{ type: i1.TemplateContentComponent, selector: "sfc-template-content", inputs: ["contextData", "referenceContent", "templateType", "templatesContent", "defaultContent"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i2.AsyncPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TabsComponent, decorators: [{
+TabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TabsComponent, deps: [{ token: TabService }], target: i0.ɵɵFactoryTarget.Component });
+TabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TabsComponent, selector: "sfc-tabs", inputs: { tabs: "tabs", label: "label", slider: "slider", body: "body" }, providers: [TabService], queries: [{ propertyName: "templates", predicate: TemplateReferenceDirective, read: TemplateReferenceDirective }], ngImport: i0, template: "<div class=\"container\" *ngIf=\"vm$ | async as vm\">\r\n    <div class=\"tabs-container\">\r\n        <div class=\"tabs\">\r\n            <div class=\"tab\" [style.width.%]=\"vm.tabWidth\" *ngFor=\"let tab of vm.tabs; index as index\"\r\n                (click)=\"selectTab(tab, index)\">\r\n\r\n                <sfc-template-content [referenceContent]=\"label\" [templatesContent]=\"templates\"\r\n                    [templateType]=\"TabsTemplate.Label\" [defaultContent]=\"defaultLabel\" [contextData]=\"tab\">\r\n                </sfc-template-content>\r\n\r\n                <ng-template #defaultLabel>{{ tab.label }}</ng-template>\r\n            </div>\r\n        </div>\r\n\r\n        <sfc-template-content [referenceContent]=\"slider\" [templatesContent]=\"templates\"\r\n            [templateType]=\"TabsTemplate.Slider\" [contextData]=\"vm.sliderContextData\"></sfc-template-content>\r\n\r\n    </div>\r\n\r\n    <div class=\"body-container\">\r\n        <ng-container *ngIf=\"vm.selectedTab\">\r\n\r\n            <sfc-template-content [referenceContent]=\"body\" [templatesContent]=\"templates\"\r\n                [templateType]=\"TabsTemplate.Body\" [contextData]=\"vm.selectedTab.data\">\r\n            </sfc-template-content>\r\n\r\n        </ng-container>\r\n    </div>\r\n</div>", styles: [":host{width:100%}:host .container .tabs{display:flex;flex-wrap:wrap}:host .container .tabs .tab{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{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\"></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{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:#ccd1d9}:host .container .body-container{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:#ccd1d9}\n"] }]
+            args: [{ selector: 'sfc-tabs', providers: [TabService], template: "<div class=\"container\" *ngIf=\"vm$ | async as vm\">\r\n    <div class=\"tabs-container\">\r\n        <div class=\"tabs\">\r\n            <div class=\"tab\" [style.width.%]=\"vm.tabWidth\" *ngFor=\"let tab of vm.tabs; index as index\"\r\n                (click)=\"selectTab(tab, index)\">\r\n\r\n                <sfc-template-content [referenceContent]=\"label\" [templatesContent]=\"templates\"\r\n                    [templateType]=\"TabsTemplate.Label\" [defaultContent]=\"defaultLabel\" [contextData]=\"tab\">\r\n                </sfc-template-content>\r\n\r\n                <ng-template #defaultLabel>{{ tab.label }}</ng-template>\r\n            </div>\r\n        </div>\r\n\r\n        <sfc-template-content [referenceContent]=\"slider\" [templatesContent]=\"templates\"\r\n            [templateType]=\"TabsTemplate.Slider\" [contextData]=\"vm.sliderContextData\"></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{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{margin-top:.6em}:host .container .body-container,:host-context(.sfc-default-theme) :host .container .body-container{color:#545e61}:host-context(.sfc-dark-theme) :host .container .body-container{color:#fff}\n"] }]
         }], ctorParameters: function () { return [{ type: TabService }]; }, propDecorators: { tabs: [{
                 type: Input
             }], label: [{
@@ -94,9 +94,9 @@ class TabLabelContentBase {
         this.selected = false;
     }
 }
-TabLabelContentBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TabLabelContentBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-TabLabelContentBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: TabLabelContentBase, inputs: { label: "label", icon: "icon", disabled: "disabled", selected: "selected" }, host: { properties: { "class.disabled": "this.disabled", "class.selected": "this.selected" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TabLabelContentBase, decorators: [{
+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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TabLabelContentBase, decorators: [{
             type: Directive
         }], propDecorators: { label: [{
                 type: Input
@@ -116,11 +116,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
 
 class TabLabelLineComponent extends TabLabelContentBase {
 }
-TabLabelLineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TabLabelLineComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-TabLabelLineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: TabLabelLineComponent, selector: "sfc-tab-label-line", usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\r\n  <div class=\"content\">\r\n    <fa-icon *ngIf=\"icon\" [icon]=\"icon\"></fa-icon>\r\n    <span>{{label}}</span>\r\n  </div>\r\n</div>", styles: [":host{width:100%;cursor:pointer;font-weight:700;-webkit-user-select:none;user-select:none}:host,:host-context(.sfc-default-theme) :host{color:#545e61}:host-context(.sfc-dark-theme) :host{color:#ccd1d9}:host.disabled{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.selected:not(.disabled),:host:hover:not(.disabled){color:#2bbbad}:host .container{width: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}:host .container .content fa-icon{margin-right:.18em}@media (max-width: 430px){:host .container .content fa-icon{display:none}}\n"], components: [{ type: i1$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TabLabelLineComponent, decorators: [{
+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", usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\r\n  <div class=\"content\">\r\n    <fa-icon *ngIf=\"icon\" [icon]=\"icon\"></fa-icon>\r\n    <span>{{label}}</span>\r\n  </div>\r\n</div>", styles: [":host{width:100%;cursor:pointer;font-weight:700;-webkit-user-select:none;user-select:none}:host,:host-context(.sfc-default-theme) :host{color:#545e61}:host-context(.sfc-dark-theme) :host{color:#fff}:host.disabled{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.selected:not(.disabled),:host:hover:not(.disabled){color:#ffce54}:host .container{width: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}:host .container .content fa-icon{margin-right:.18em}@media (max-width: 430px){:host .container .content fa-icon{display:none}}\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: TabLabelLineComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-tab-label-line', template: "<div class=\"container\">\r\n  <div class=\"content\">\r\n    <fa-icon *ngIf=\"icon\" [icon]=\"icon\"></fa-icon>\r\n    <span>{{label}}</span>\r\n  </div>\r\n</div>", styles: [":host{width:100%;cursor:pointer;font-weight:700;-webkit-user-select:none;user-select:none}:host,:host-context(.sfc-default-theme) :host{color:#545e61}:host-context(.sfc-dark-theme) :host{color:#ccd1d9}:host.disabled{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.selected:not(.disabled),:host:hover:not(.disabled){color:#2bbbad}:host .container{width: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}:host .container .content fa-icon{margin-right:.18em}@media (max-width: 430px){:host .container .content fa-icon{display:none}}\n"] }]
+            args: [{ selector: 'sfc-tab-label-line', template: "<div class=\"container\">\r\n  <div class=\"content\">\r\n    <fa-icon *ngIf=\"icon\" [icon]=\"icon\"></fa-icon>\r\n    <span>{{label}}</span>\r\n  </div>\r\n</div>", styles: [":host{width:100%;cursor:pointer;font-weight:700;-webkit-user-select:none;user-select:none}:host,:host-context(.sfc-default-theme) :host{color:#545e61}:host-context(.sfc-dark-theme) :host{color:#fff}:host.disabled{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.selected:not(.disabled),:host:hover:not(.disabled){color:#ffce54}:host .container{width: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}:host .container .content fa-icon{margin-right:.18em}@media (max-width: 430px){:host .container .content fa-icon{display:none}}\n"] }]
         }] });
 
 class TabLabelIconComponent extends TabLabelContentBase {
@@ -128,11 +128,11 @@ class TabLabelIconComponent extends TabLabelContentBase {
         return isDefined(this.icon) ? this.icon : faCircle;
     }
 }
-TabLabelIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TabLabelIconComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-TabLabelIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", 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</div>", styles: [":host{width:100%;cursor:pointer;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:#ccd1d9}:host.selected:not(.disabled),:host:hover:not(.disabled){color:#2bbbad}:host.disabled{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: 430px){: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,:host-context(.sfc-default-theme) :host.selected .container{background:#e6e9ed}:host-context(.sfc-dark-theme) :host.selected .container{background:#f5f7fa}}\n"], components: [{ type: i1$1.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: "13.2.7", ngImport: i0, type: TabLabelIconComponent, decorators: [{
+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</div>", styles: [":host{width:100%;cursor:pointer;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{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: 430px){: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,: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"] }] });
+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</div>", styles: [":host{width:100%;cursor:pointer;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:#ccd1d9}:host.selected:not(.disabled),:host:hover:not(.disabled){color:#2bbbad}:host.disabled{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: 430px){: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,: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 [icon]=\"tabIcon\"></fa-icon>\r\n  <span>{{label}}</span>\r\n</div>", styles: [":host{width:100%;cursor:pointer;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{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: 430px){: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,:host-context(.sfc-default-theme) :host.selected .container{background:#e6e9ed}:host-context(.sfc-dark-theme) :host.selected .container{background:#f5f7fa}}\n"] }]
         }] });
 
 class TabSliderBase {
@@ -141,9 +141,9 @@ class TabSliderBase {
         this.index = 0;
     }
 }
-TabSliderBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TabSliderBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-TabSliderBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: TabSliderBase, inputs: { count: "count", index: "index" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TabSliderBase, decorators: [{
+TabSliderBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TabSliderBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+TabSliderBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: TabSliderBase, inputs: { count: "count", index: "index" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TabSliderBase, decorators: [{
             type: Directive
         }], propDecorators: { count: [{
                 type: Input
@@ -159,11 +159,11 @@ class TabLabelIconSliderComponent extends TabSliderBase {
         };
     }
 }
-TabLabelIconSliderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TabLabelIconSliderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-TabLabelIconSliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: TabLabelIconSliderComponent, selector: "sfc-tab-label-icon-slider", usesInheritance: true, ngImport: i0, template: "<div class=\"slider\" [ngStyle]=\"style\">\r\n    <div class=\"indicator\"></div>\r\n</div>", styles: [".slider{transition:all .33s cubic-bezier(.38,.8,.32,1.07)}.slider .indicator{width:50%;margin:0 auto;height:.25em;background:#2bbbad;border-radius:.0625em}@media (max-width: 430px){.slider{display:none}}\n"], directives: [{ type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TabLabelIconSliderComponent, decorators: [{
+TabLabelIconSliderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TabLabelIconSliderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+TabLabelIconSliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TabLabelIconSliderComponent, selector: "sfc-tab-label-icon-slider", usesInheritance: true, ngImport: i0, template: "<div class=\"slider\" [ngStyle]=\"style\">\r\n    <div class=\"indicator\"></div>\r\n</div>", styles: [".slider{transition:all .33s cubic-bezier(.38,.8,.32,1.07)}.slider .indicator{width:50%;margin:0 auto;height:.25em;background:#ffce54;border-radius:.0625em}@media (max-width: 430px){.slider{display:none}}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TabLabelIconSliderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-tab-label-icon-slider', template: "<div class=\"slider\" [ngStyle]=\"style\">\r\n    <div class=\"indicator\"></div>\r\n</div>", styles: [".slider{transition:all .33s cubic-bezier(.38,.8,.32,1.07)}.slider .indicator{width:50%;margin:0 auto;height:.25em;background:#2bbbad;border-radius:.0625em}@media (max-width: 430px){.slider{display:none}}\n"] }]
+            args: [{ selector: 'sfc-tab-label-icon-slider', template: "<div class=\"slider\" [ngStyle]=\"style\">\r\n    <div class=\"indicator\"></div>\r\n</div>", styles: [".slider{transition:all .33s cubic-bezier(.38,.8,.32,1.07)}.slider .indicator{width:50%;margin:0 auto;height:.25em;background:#ffce54;border-radius:.0625em}@media (max-width: 430px){.slider{display:none}}\n"] }]
         }] });
 
 class TabLabelLineSliderComponent extends TabSliderBase {
@@ -174,11 +174,11 @@ class TabLabelLineSliderComponent extends TabSliderBase {
         };
     }
 }
-TabLabelLineSliderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TabLabelLineSliderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-TabLabelLineSliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: TabLabelLineSliderComponent, selector: "sfc-tab-label-line-slider", usesInheritance: true, ngImport: i0, template: "<div class=\"slider\" [ngStyle]=\"style\"></div>", styles: [":host{position:relative;display:flex}:host .slider{background:#2bbbad;height:.125em;position:absolute;left:0;top:calc(100% - .1em);transition:left .3s ease-out}\n"], directives: [{ type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TabLabelLineSliderComponent, decorators: [{
+TabLabelLineSliderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TabLabelLineSliderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+TabLabelLineSliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TabLabelLineSliderComponent, selector: "sfc-tab-label-line-slider", usesInheritance: true, ngImport: i0, template: "<div class=\"slider\" [ngStyle]=\"style\"></div>", styles: [":host{position:relative;display:flex}:host .slider{background:#ffce54;height:.125em;position:absolute;left:0;top:calc(100% - .1em);transition:left .3s ease-out}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TabLabelLineSliderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-tab-label-line-slider', template: "<div class=\"slider\" [ngStyle]=\"style\"></div>", styles: [":host{position:relative;display:flex}:host .slider{background:#2bbbad;height:.125em;position:absolute;left:0;top:calc(100% - .1em);transition:left .3s ease-out}\n"] }]
+            args: [{ selector: 'sfc-tab-label-line-slider', template: "<div class=\"slider\" [ngStyle]=\"style\"></div>", styles: [":host{position:relative;display:flex}:host .slider{background:#ffce54;height:.125em;position:absolute;left:0;top:calc(100% - .1em);transition:left .3s ease-out}\n"] }]
         }] });
 
 var SideMenuItemType;
@@ -198,11 +198,11 @@ class SideMenuHeaderComponent {
         this.label = this.label || this.DEFAULT_MENU_HEADER_TEXT;
     }
 }
-SideMenuHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SideMenuHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SideMenuHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SideMenuHeaderComponent, selector: "sfc-side-menu-header", inputs: { label: "label", open: "open" }, outputs: { toggle: "toggle" }, host: { properties: { "class.open": "this.open" } }, ngImport: i0, template: "<li>\r\n    <span>{{label}}</span>\r\n    <sfc-hamburger [open]=\"open\" (click)=\"toggle.emit()\"></sfc-hamburger>\r\n</li>", styles: [":host li{display:flex;align-items:center;justify-content:center;padding:1.25em}:host li span{display:none;text-transform:uppercase;font-weight:700;font-size:.8em;-webkit-user-select:none;user-select:none}:host li span,:host-context(.sfc-default-theme) :host li span{color:#545e61}:host-context(.sfc-dark-theme) :host li span{color:#ccd1d9}:host.open li{justify-content:space-between}:host.open li span{display:block}\n"], components: [{ type: i1.HamburgerComponent, selector: "sfc-hamburger", inputs: ["open"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SideMenuHeaderComponent, decorators: [{
+SideMenuHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SideMenuHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SideMenuHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SideMenuHeaderComponent, selector: "sfc-side-menu-header", inputs: { label: "label", open: "open" }, outputs: { toggle: "toggle" }, host: { properties: { "class.open": "this.open" } }, ngImport: i0, template: "<li>\r\n    <span>{{label}}</span>\r\n    <sfc-hamburger [open]=\"open\" (click)=\"toggle.emit()\"></sfc-hamburger>\r\n</li>", styles: [":host li{display:flex;align-items:center;justify-content:center;padding:1.25em}:host li span{display:none;text-transform:uppercase;font-weight:700;font-size:.8em;-webkit-user-select:none;user-select:none}:host li span,:host-context(.sfc-default-theme) :host li span{color:#545e61}:host-context(.sfc-dark-theme) :host li span{color:#fff}:host.open li{justify-content:space-between}:host.open li span{display:block}\n"], dependencies: [{ kind: "component", type: 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 [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;text-transform:uppercase;font-weight:700;font-size:.8em;-webkit-user-select:none;user-select:none}:host li span,:host-context(.sfc-default-theme) :host li span{color:#545e61}:host-context(.sfc-dark-theme) :host li span{color:#ccd1d9}:host.open li{justify-content:space-between}:host.open li span{display:block}\n"] }]
+            args: [{ selector: 'sfc-side-menu-header', template: "<li>\r\n    <span>{{label}}</span>\r\n    <sfc-hamburger [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;text-transform:uppercase;font-weight:700;font-size:.8em;-webkit-user-select:none;user-select:none}:host li span,:host-context(.sfc-default-theme) :host li span{color:#545e61}:host-context(.sfc-dark-theme) :host li span{color:#fff}:host.open li{justify-content:space-between}:host.open li span{display:block}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], open: [{
@@ -237,11 +237,11 @@ class SideMenuItemContentComponent {
         return this.openParent ? this.ANGLE_UP_ICON : this.ANGLE_DOWM_ICON;
     }
 }
-SideMenuItemContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SideMenuItemContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SideMenuItemContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SideMenuItemContentComponent, selector: "sfc-side-menu-item-content", inputs: { item: "item", active: "active", open: "open", openParent: "openParent", hasChildren: "hasChildren" }, outputs: { selectItem: "selectItem" }, host: { listeners: { "click": "onClick()" }, properties: { "class.active": "this.active", "class.open": "this.open" } }, ngImport: i0, template: "<li>\r\n    <div class=\"item-container\">\r\n        <div class=\"item\">\r\n            <a>\r\n                <fa-icon *ngIf=\"item.icon\" [icon]=\"item.icon\"></fa-icon>\r\n            </a>\r\n        </div>\r\n        <span class=\"label\">{{item.label}}</span>\r\n    </div>\r\n\r\n    <div *ngIf=\"hasChildren\" class=\"expand-container\">\r\n        <fa-icon [icon]=\"expandIcon\"></fa-icon>\r\n    </div>\r\n</li>", styles: [":host li{display:inline-flex;align-items:center;padding:0 1.25em 0 1.5em;cursor:pointer;width:calc(100% - 2.75em);justify-content:space-between}:host li,:host-context(.sfc-default-theme) :host li{color:#545e61}:host-context(.sfc-dark-theme) :host li{color:#ccd1d9}:host li .expand-container{visibility:hidden;opacity:0;width:0}:host li .expand-container>fa-icon{font-weight:700}:host li .item-container{display:inline-flex;align-items:center}:host li .item-container .item{width:2em;height:1.9em;display:flex;justify-content:center;border-radius:.7em;align-items:center}:host li .item-container .item a{border-radius:.45em;display:flex;align-items:center;justify-content:center;transition:.3s ease-in-out;font-size:1.3em;padding:.3em}:host li .item-container .item a>fa-icon{font-size:1em}:host li .item-container .label{font-weight:700;font-size:.9em;visibility:hidden;opacity:0;transition:color .3s,visibility .3s,opacity .5s ease-in-out;-webkit-user-select:none;user-select:none;width:0}:host.active li,:host:hover li{color:#fff}:host.active li .item-container .item a,:host:hover li .item-container .item a{background-color:#2bbbad;box-shadow:0 .3em 1em #2bbbad1a}:host.active li .item-container .label,:host:hover li .item-container .label{color:#2bbbad}:host.active li .expand-container,:host:hover li .expand-container{color:#2bbbad}:host.open li .item-container .item a{margin-right:1em}:host.open li .item-container .label{visibility:visible;opacity:1;width:auto}:host.open li .expand-container{width:auto;visibility:visible;opacity:1}:host :host-context(.children) li{margin:.2em 0}:host :host-context(.children) li .item-container .item a{padding:.3em;border-radius:.35em}:host :host-context(.children) li .item-container .item a>fa-icon{font-size:.5em}:host :host-context(.children) li .item-container .label{font-size:.8em}\n"], components: [{ type: i1$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SideMenuItemContentComponent, decorators: [{
+SideMenuItemContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SideMenuItemContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SideMenuItemContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SideMenuItemContentComponent, selector: "sfc-side-menu-item-content", inputs: { item: "item", active: "active", open: "open", openParent: "openParent", hasChildren: "hasChildren" }, outputs: { selectItem: "selectItem" }, host: { listeners: { "click": "onClick()" }, properties: { "class.active": "this.active", "class.open": "this.open" } }, ngImport: i0, template: "<li>\r\n    <div class=\"item-container\">\r\n        <div class=\"item\">\r\n            <a>\r\n                <fa-icon *ngIf=\"item.icon\" [icon]=\"item.icon\"></fa-icon>\r\n            </a>\r\n        </div>\r\n        <span class=\"label\">{{item.label}}</span>\r\n    </div>\r\n\r\n    <div *ngIf=\"hasChildren\" class=\"expand-container\">\r\n        <fa-icon [icon]=\"expandIcon\"></fa-icon>\r\n    </div>\r\n</li>", styles: [":host li{display:inline-flex;align-items:center;padding:0 1.25em 0 1.5em;cursor:pointer;width:calc(100% - 2.75em);justify-content:space-between}:host li,:host-context(.sfc-default-theme) :host li{color:#545e61}:host-context(.sfc-dark-theme) :host li{color:#fff}:host li .expand-container{visibility:hidden;opacity:0;width:0}:host li .expand-container>fa-icon{font-weight:700}:host li .item-container{display:inline-flex;align-items:center}:host li .item-container .item{width:2em;height:1.9em;display:flex;justify-content:center;border-radius:.7em;align-items:center}:host li .item-container .item a{border-radius:.45em;display:flex;align-items:center;justify-content:center;transition:.3s ease-in-out;font-size:1.3em;padding:.3em}:host li .item-container .item a>fa-icon{font-size:1em}:host li .item-container .label{font-weight:700;font-size:.9em;visibility:hidden;opacity:0;transition:color .3s,visibility .3s,opacity .5s ease-in-out;-webkit-user-select:none;user-select:none;width:0}:host.active li,:host:hover li{color:#fff}:host.active li .item-container .item a,:host:hover li .item-container .item a{background-color:#ffce54;box-shadow:0 .3em 1em #2bbbad1a}:host.active li .item-container .label,:host:hover li .item-container .label{color:#ffce54}:host.active li .expand-container,:host:hover li .expand-container{color:#ffce54}:host.open li .item-container .item a{margin-right:1em}:host.open li .item-container .label{visibility:visible;opacity:1;width:auto}:host.open li .expand-container{width:auto;visibility:visible;opacity:1}:host :host-context(.children) li{margin:.2em 0}:host :host-context(.children) li .item-container .item a{padding:.3em;border-radius:.35em}:host :host-context(.children) li .item-container .item a>fa-icon{font-size:.5em}:host :host-context(.children) li .item-container .label{font-size:.8em}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SideMenuItemContentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-side-menu-item-content', template: "<li>\r\n    <div class=\"item-container\">\r\n        <div class=\"item\">\r\n            <a>\r\n                <fa-icon *ngIf=\"item.icon\" [icon]=\"item.icon\"></fa-icon>\r\n            </a>\r\n        </div>\r\n        <span class=\"label\">{{item.label}}</span>\r\n    </div>\r\n\r\n    <div *ngIf=\"hasChildren\" class=\"expand-container\">\r\n        <fa-icon [icon]=\"expandIcon\"></fa-icon>\r\n    </div>\r\n</li>", styles: [":host li{display:inline-flex;align-items:center;padding:0 1.25em 0 1.5em;cursor:pointer;width:calc(100% - 2.75em);justify-content:space-between}:host li,:host-context(.sfc-default-theme) :host li{color:#545e61}:host-context(.sfc-dark-theme) :host li{color:#ccd1d9}:host li .expand-container{visibility:hidden;opacity:0;width:0}:host li .expand-container>fa-icon{font-weight:700}:host li .item-container{display:inline-flex;align-items:center}:host li .item-container .item{width:2em;height:1.9em;display:flex;justify-content:center;border-radius:.7em;align-items:center}:host li .item-container .item a{border-radius:.45em;display:flex;align-items:center;justify-content:center;transition:.3s ease-in-out;font-size:1.3em;padding:.3em}:host li .item-container .item a>fa-icon{font-size:1em}:host li .item-container .label{font-weight:700;font-size:.9em;visibility:hidden;opacity:0;transition:color .3s,visibility .3s,opacity .5s ease-in-out;-webkit-user-select:none;user-select:none;width:0}:host.active li,:host:hover li{color:#fff}:host.active li .item-container .item a,:host:hover li .item-container .item a{background-color:#2bbbad;box-shadow:0 .3em 1em #2bbbad1a}:host.active li .item-container .label,:host:hover li .item-container .label{color:#2bbbad}:host.active li .expand-container,:host:hover li .expand-container{color:#2bbbad}:host.open li .item-container .item a{margin-right:1em}:host.open li .item-container .label{visibility:visible;opacity:1;width:auto}:host.open li .expand-container{width:auto;visibility:visible;opacity:1}:host :host-context(.children) li{margin:.2em 0}:host :host-context(.children) li .item-container .item a{padding:.3em;border-radius:.35em}:host :host-context(.children) li .item-container .item a>fa-icon{font-size:.5em}:host :host-context(.children) li .item-container .label{font-size:.8em}\n"] }]
+            args: [{ selector: 'sfc-side-menu-item-content', template: "<li>\r\n    <div class=\"item-container\">\r\n        <div class=\"item\">\r\n            <a>\r\n                <fa-icon *ngIf=\"item.icon\" [icon]=\"item.icon\"></fa-icon>\r\n            </a>\r\n        </div>\r\n        <span class=\"label\">{{item.label}}</span>\r\n    </div>\r\n\r\n    <div *ngIf=\"hasChildren\" class=\"expand-container\">\r\n        <fa-icon [icon]=\"expandIcon\"></fa-icon>\r\n    </div>\r\n</li>", styles: [":host li{display:inline-flex;align-items:center;padding:0 1.25em 0 1.5em;cursor:pointer;width:calc(100% - 2.75em);justify-content:space-between}:host li,:host-context(.sfc-default-theme) :host li{color:#545e61}:host-context(.sfc-dark-theme) :host li{color:#fff}:host li .expand-container{visibility:hidden;opacity:0;width:0}:host li .expand-container>fa-icon{font-weight:700}:host li .item-container{display:inline-flex;align-items:center}:host li .item-container .item{width:2em;height:1.9em;display:flex;justify-content:center;border-radius:.7em;align-items:center}:host li .item-container .item a{border-radius:.45em;display:flex;align-items:center;justify-content:center;transition:.3s ease-in-out;font-size:1.3em;padding:.3em}:host li .item-container .item a>fa-icon{font-size:1em}:host li .item-container .label{font-weight:700;font-size:.9em;visibility:hidden;opacity:0;transition:color .3s,visibility .3s,opacity .5s ease-in-out;-webkit-user-select:none;user-select:none;width:0}:host.active li,:host:hover li{color:#fff}:host.active li .item-container .item a,:host:hover li .item-container .item a{background-color:#ffce54;box-shadow:0 .3em 1em #2bbbad1a}:host.active li .item-container .label,:host:hover li .item-container .label{color:#ffce54}:host.active li .expand-container,:host:hover li .expand-container{color:#ffce54}:host.open li .item-container .item a{margin-right:1em}:host.open li .item-container .label{visibility:visible;opacity:1;width:auto}:host.open li .expand-container{width:auto;visibility:visible;opacity:1}:host :host-context(.children) li{margin:.2em 0}:host :host-context(.children) li .item-container .item a{padding:.3em;border-radius:.35em}:host :host-context(.children) li .item-container .item a>fa-icon{font-size:.5em}:host :host-context(.children) li .item-container .label{font-size:.8em}\n"] }]
         }], propDecorators: { item: [{
                 type: Input
             }], active: [{
@@ -302,8 +302,8 @@ class SideMenuItemComponent {
         this.selectItem.emit(child);
     }
 }
-SideMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SideMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SideMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SideMenuItemComponent, selector: "sfc-side-menu-item", inputs: { item: "item", open: "open" }, outputs: { selectItem: "selectItem" }, host: { properties: { "class.open": "this.open" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <sfc-side-menu-item-content [item]=\"item\" [active]=\"isActive(item)\" [open]=\"open\" [openParent]=\"openParent\"\r\n        [hasChildren]=\"hasChildren(item)\" (selectItem)=\"onParentClick(item)\">\r\n    </sfc-side-menu-item-content>\r\n\r\n    <div class=\"children\" *ngIf=\"hasChildren(item) && openParent\" [@enterAnimation]>\r\n\r\n        <sfc-side-menu-item-content *ngFor=\"let child of item.items\" [item]=\"child\" [open]=\"open\"\r\n            [active]=\"isActive(child)\" [openParent]=\"true\" (selectItem)=\"onChildClick(item, child)\">\r\n        </sfc-side-menu-item-content>\r\n    </div>\r\n</div>", styles: [":host .container{margin-bottom:1em}:host .container .children{margin:1em 0}\n"], components: [{ type: SideMenuItemContentComponent, selector: "sfc-side-menu-item-content", inputs: ["item", "active", "open", "openParent", "hasChildren"], outputs: ["selectItem"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], animations: [
+SideMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SideMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SideMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SideMenuItemComponent, selector: "sfc-side-menu-item", inputs: { item: "item", open: "open" }, outputs: { selectItem: "selectItem" }, host: { properties: { "class.open": "this.open" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <sfc-side-menu-item-content [item]=\"item\" [active]=\"isActive(item)\" [open]=\"open\" [openParent]=\"openParent\"\r\n        [hasChildren]=\"hasChildren(item)\" (selectItem)=\"onParentClick(item)\">\r\n    </sfc-side-menu-item-content>\r\n\r\n    <div class=\"children\" *ngIf=\"hasChildren(item) && openParent\" [@enterAnimation]>\r\n\r\n        <sfc-side-menu-item-content *ngFor=\"let child of item.items\" [item]=\"child\" [open]=\"open\"\r\n            [active]=\"isActive(child)\" [openParent]=\"true\" (selectItem)=\"onChildClick(item, child)\">\r\n        </sfc-side-menu-item-content>\r\n    </div>\r\n</div>", styles: [":host .container{margin-bottom:1em}:host .container .children{margin:1em 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: SideMenuItemContentComponent, selector: "sfc-side-menu-item-content", inputs: ["item", "active", "open", "openParent", "hasChildren"], outputs: ["selectItem"] }], animations: [
         trigger('enterAnimation', [
             transition(':enter', [
                 style({ transform: 'translateX(-20%)', opacity: 0 }),
@@ -315,7 +315,7 @@ SideMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             ])
         ])
     ] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SideMenuItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SideMenuItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sfc-side-menu-item', animations: [
                         trigger('enterAnimation', [
@@ -346,11 +346,11 @@ class SideMenuTitleComponent {
         this.open = false;
     }
 }
-SideMenuTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SideMenuTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SideMenuTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", 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{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:#ccd1d9}:host.open li{transform:translate(30%)}\n"], components: [{ type: i1.DelimeterComponent, selector: "sfc-delimeter" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SideMenuTitleComponent, decorators: [{
+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{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: ["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{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:#ccd1d9}:host.open li{transform:translate(30%)}\n"] }]
+            args: [{ selector: 'sfc-side-menu-title', template: "<sfc-delimeter></sfc-delimeter>\r\n<li><span>{{label}}</span></li>", styles: [":host li{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"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], open: [{
@@ -386,9 +386,9 @@ class SideMenuComponent {
         this.selected.emit(item);
     }
 }
-SideMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SideMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SideMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SideMenuComponent, selector: "sfc-side-menu", inputs: { model: "model" }, outputs: { selected: "selected" }, host: { properties: { "class.open": "this.open" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <ul>\r\n        <sfc-side-menu-header [open]=\"open\" (toggle)=\"open =!open\"></sfc-side-menu-header>\r\n\r\n        <ng-container *ngFor=\"let item of model.items\" [ngSwitch]=\"item.type\">\r\n            <sfc-side-menu-item *ngSwitchCase=\"SideMenuItemType.Item\" [item]=\"item\" [open]=\"open\"\r\n                (selectItem)=\"onItemSelect($event)\">\r\n            </sfc-side-menu-item>\r\n\r\n            <sfc-side-menu-title *ngSwitchCase=\"SideMenuItemType.Title\" [label]=\"item.label\" [open]=\"open\">\r\n            </sfc-side-menu-title>\r\n        </ng-container>\r\n    </ul>\r\n</div>", styles: [":host .container{width:5em;overflow:hidden;transition:width .5s ease-in-out}:host .container,:host-context(.sfc-default-theme) :host .container{background:#f5f7fa}:host-context(.sfc-dark-theme) :host .container{background:#1b1d1f}:host .container ul{margin:0;padding:0;list-style:none;overflow:hidden;display:flex;flex-direction:column}:host.open .container{width:11.25em}\n"], components: [{ type: SideMenuHeaderComponent, selector: "sfc-side-menu-header", inputs: ["label", "open"], outputs: ["toggle"] }, { type: SideMenuItemComponent, selector: "sfc-side-menu-item", inputs: ["item", "open"], outputs: ["selectItem"] }, { type: SideMenuTitleComponent, selector: "sfc-side-menu-title", inputs: ["label", "open"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SideMenuComponent, decorators: [{
+SideMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SideMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SideMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SideMenuComponent, selector: "sfc-side-menu", inputs: { model: "model" }, outputs: { selected: "selected" }, host: { properties: { "class.open": "this.open" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <ul>\r\n        <sfc-side-menu-header [open]=\"open\" (toggle)=\"open =!open\"></sfc-side-menu-header>\r\n\r\n        <ng-container *ngFor=\"let item of model.items\" [ngSwitch]=\"item.type\">\r\n            <sfc-side-menu-item *ngSwitchCase=\"SideMenuItemType.Item\" [item]=\"item\" [open]=\"open\"\r\n                (selectItem)=\"onItemSelect($event)\">\r\n            </sfc-side-menu-item>\r\n\r\n            <sfc-side-menu-title *ngSwitchCase=\"SideMenuItemType.Title\" [label]=\"item.label\" [open]=\"open\">\r\n            </sfc-side-menu-title>\r\n        </ng-container>\r\n    </ul>\r\n</div>", styles: [":host .container{width:5em;overflow:hidden;transition:width .5s ease-in-out}:host .container,:host-context(.sfc-default-theme) :host .container{background:#f5f7fa}:host-context(.sfc-dark-theme) :host .container{background:#1b1d1f}:host .container ul{margin:0;padding:0;list-style:none;overflow:hidden;display:flex;flex-direction:column}:host.open .container{width:11.25em}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: SideMenuHeaderComponent, selector: "sfc-side-menu-header", inputs: ["label", "open"], outputs: ["toggle"] }, { kind: "component", type: SideMenuItemComponent, selector: "sfc-side-menu-item", inputs: ["item", "open"], outputs: ["selectItem"] }, { kind: "component", type: SideMenuTitleComponent, selector: "sfc-side-menu-title", inputs: ["label", "open"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SideMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sfc-side-menu', template: "<div class=\"container\">\r\n    <ul>\r\n        <sfc-side-menu-header [open]=\"open\" (toggle)=\"open =!open\"></sfc-side-menu-header>\r\n\r\n        <ng-container *ngFor=\"let item of model.items\" [ngSwitch]=\"item.type\">\r\n            <sfc-side-menu-item *ngSwitchCase=\"SideMenuItemType.Item\" [item]=\"item\" [open]=\"open\"\r\n                (selectItem)=\"onItemSelect($event)\">\r\n            </sfc-side-menu-item>\r\n\r\n            <sfc-side-menu-title *ngSwitchCase=\"SideMenuItemType.Title\" [label]=\"item.label\" [open]=\"open\">\r\n            </sfc-side-menu-title>\r\n        </ng-container>\r\n    </ul>\r\n</div>", styles: [":host .container{width:5em;overflow:hidden;transition:width .5s ease-in-out}:host .container,:host-context(.sfc-default-theme) :host .container{background:#f5f7fa}:host-context(.sfc-dark-theme) :host .container{background:#1b1d1f}:host .container ul{margin:0;padding:0;list-style:none;overflow:hidden;display:flex;flex-direction:column}:host.open .container{width:11.25em}\n"] }]
         }], propDecorators: { model: [{
@@ -404,18 +404,22 @@ class DropdownMenuItemComponent {
     constructor() {
         this.item = { label: CommonConstants.EMPTY_STRING };
     }
+    get _active() { return this.item.active || false; }
     click() {
         if (this.item.click)
             this.item.click(this.item);
     }
 }
-DropdownMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DropdownMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DropdownMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: DropdownMenuItemComponent, selector: "sfc-dropdown-menu-item", inputs: { item: "item" }, host: { listeners: { "click": "click()" } }, ngImport: i0, template: "<li>\r\n    <fa-icon *ngIf=\"item.icon\" [icon]=\"item.icon\"></fa-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}:host li{color:#545e61;display:flex;align-items:center;flex-wrap:wrap;padding:.4em;border:.0063em solid transparent;border-radius:.31em;font-weight:700;font-size:.8em;-webkit-user-select:none;user-select:none}:host li:hover,:host li:focus-within{background:#f5f7fa;border-color:#f5f7fa;color:#2bbbad;cursor:pointer;outline:none}:host li fa-icon{padding-right:.625em;width:10%}:host ::ng-deep sfc-delimeter,:host-context(.sfc-default-theme) :host ::ng-deep sfc-delimeter{background:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 17%,rgba(0,0,0,.3) 83%,rgba(0,0,0,0) 100%)}:host-context(.sfc-dark-theme) :host ::ng-deep sfc-delimeter{background:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 17%,rgba(0,0,0,.3) 83%,rgba(0,0,0,0) 100%)}\n"], components: [{ type: i1$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i1.DelimeterComponent, selector: "sfc-delimeter" }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DropdownMenuItemComponent, decorators: [{
+DropdownMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DropdownMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DropdownMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DropdownMenuItemComponent, selector: "sfc-dropdown-menu-item", inputs: { item: "item" }, host: { listeners: { "click": "click()" }, properties: { "class.active": "this._active" } }, ngImport: i0, template: "<li>\r\n    <sfc-icon [icon]=\"item.icon\" [imageSrc]=\"item.image\"></sfc-icon>\r\n    <a>{{item.label}}</a>\r\n</li>\r\n\r\n<sfc-delimeter *ngIf=\"item.delimeter\"></sfc-delimeter>", styles: [":host{display:flex;flex-direction:column;padding:.1em 0}:host li{color:#545e61;display:flex;align-items:center;flex-wrap:wrap;padding:.4em;border:.0063em solid transparent;border-radius:.31em;font-weight:700;font-size:.8em;-webkit-user-select:none;user-select:none}: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 ::ng-deep sfc-delimeter,:host-context(.sfc-default-theme) :host ::ng-deep sfc-delimeter{background:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 17%,rgba(0,0,0,.3) 83%,rgba(0,0,0,0) 100%)}:host-context(.sfc-dark-theme) :host ::ng-deep sfc-delimeter{background:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 17%,rgba(0,0,0,.3) 83%,rgba(0,0,0,0) 100%)}: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: ["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    <fa-icon *ngIf=\"item.icon\" [icon]=\"item.icon\"></fa-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}:host li{color:#545e61;display:flex;align-items:center;flex-wrap:wrap;padding:.4em;border:.0063em solid transparent;border-radius:.31em;font-weight:700;font-size:.8em;-webkit-user-select:none;user-select:none}:host li:hover,:host li:focus-within{background:#f5f7fa;border-color:#f5f7fa;color:#2bbbad;cursor:pointer;outline:none}:host li fa-icon{padding-right:.625em;width:10%}:host ::ng-deep sfc-delimeter,:host-context(.sfc-default-theme) :host ::ng-deep sfc-delimeter{background:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 17%,rgba(0,0,0,.3) 83%,rgba(0,0,0,0) 100%)}:host-context(.sfc-dark-theme) :host ::ng-deep sfc-delimeter{background:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 17%,rgba(0,0,0,.3) 83%,rgba(0,0,0,0) 100%)}\n"] }]
+            args: [{ selector: 'sfc-dropdown-menu-item', template: "<li>\r\n    <sfc-icon [icon]=\"item.icon\" [imageSrc]=\"item.image\"></sfc-icon>\r\n    <a>{{item.label}}</a>\r\n</li>\r\n\r\n<sfc-delimeter *ngIf=\"item.delimeter\"></sfc-delimeter>", styles: [":host{display:flex;flex-direction:column;padding:.1em 0}:host li{color:#545e61;display:flex;align-items:center;flex-wrap:wrap;padding:.4em;border:.0063em solid transparent;border-radius:.31em;font-weight:700;font-size:.8em;-webkit-user-select:none;user-select:none}: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 ::ng-deep sfc-delimeter,:host-context(.sfc-default-theme) :host ::ng-deep sfc-delimeter{background:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 17%,rgba(0,0,0,.3) 83%,rgba(0,0,0,0) 100%)}:host-context(.sfc-dark-theme) :host ::ng-deep sfc-delimeter{background:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 17%,rgba(0,0,0,.3) 83%,rgba(0,0,0,0) 100%)}:host.active li{background:#e6e9ed;border-color:#e6e9ed;color:#2bbbad}\n"] }]
         }], propDecorators: { item: [{
                 type: Input
+            }], _active: [{
+                type: HostBinding,
+                args: [`class.${UIClass.Active}`]
             }], click: [{
                 type: HostListener,
                 args: ['click']
@@ -431,6 +435,7 @@ class DropdownMenuComponent {
         this.bordered = false;
         this.position = [Position.Left];
         this.open = false;
+        this.autoResize = true;
         this.selected = new EventEmitter();
         // preserved position
         this._position = [Position.Left];
@@ -443,10 +448,10 @@ class DropdownMenuComponent {
     }
     ngAfterContentInit() {
         this._resizeSubscription = this.resizeService.onResize$
-            .pipe(startWith(this.window))
+            .pipe(startWith(this.window), filter(_ => this.autoResize))
             .subscribe(window => {
             this.position = window.innerWidth <= MediaLimits.Tablet
-                ? [Position.Left, Position.Top] : this._position;
+                ? [Position.Bottom, Position.Center] : this._position;
         });
     }
     ngOnDestroy() {
@@ -456,6 +461,8 @@ class DropdownMenuComponent {
     onClick(item) {
         if (this.hideOnClick)
             this.open = false;
+        this.items.forEach(item => item.active = false);
+        item.active = true;
         this.selected.emit(item);
     }
     onClickOutside(event) {
@@ -464,13 +471,13 @@ class DropdownMenuComponent {
         }
     }
 }
-DropdownMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DropdownMenuComponent, deps: [{ token: i1.ResizeService }, { token: WINDOW }], target: i0.ɵɵFactoryTarget.Component });
-DropdownMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: DropdownMenuComponent, selector: "sfc-dropdown-menu", inputs: { items: "items", icon: "icon", label: "label", hideOnClick: "hideOnClick", hideOnClickOutside: "hideOnClickOutside", bordered: "bordered", position: "position", open: "open" }, outputs: { selected: "selected" }, host: { properties: { "class.bordered": "this.bordered", "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)=\"open = !open\">\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        </div>\r\n\r\n        <ul *ngIf=\"items.length\" class=\"dropdown-container\">\r\n            <sfc-dropdown-menu-item *ngFor=\"let item of items\" [item]=\"item\" (click)=\"onClick(item)\">\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;flex-wrap:wrap;cursor:pointer;transition:all .3s 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:#ccd1d9}: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:#2bbbad}:host ul li .dropdown-container{flex-direction:column;width:max-content;background:#fff;visibility:hidden;opacity:0;position:absolute;right:0;transition:all .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{visibility:visible;opacity:1;display:flex}:host.bordered ul li .container{border:.15em solid;border-radius:.3em}: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:#ccd1d9}:host.bordered ul li .container:hover{border-color:#2bbbad}:host.bordered ul li .container:hover ::ng-deep sfc-dots .dot{background:#2bbbad}: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"], components: [{ type: i1$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i1.DotsComponent, selector: "sfc-dots", inputs: ["open", "direction"] }, { type: DropdownMenuItemComponent, selector: "sfc-dropdown-menu-item", inputs: ["item"] }], directives: [{ type: i1.ClickOutsideDirective, selector: "[sfcClickOutside]", inputs: ["sfcClickOutside"], outputs: ["action"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DropdownMenuComponent, decorators: [{
+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", label: "label", hideOnClick: "hideOnClick", hideOnClickOutside: "hideOnClickOutside", bordered: "bordered", position: "position", open: "open", autoResize: "autoResize" }, outputs: { selected: "selected" }, host: { properties: { "class.bordered": "this.bordered", "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)=\"open = !open\">\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        </div>\r\n\r\n        <ul *ngIf=\"items.length\" class=\"dropdown-container\">\r\n            <sfc-dropdown-menu-item *ngFor=\"let item of items\" [item]=\"item\" (click)=\"onClick(item)\">\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:all .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;visibility:hidden;opacity:0;position:absolute;right:0;transition:all .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{visibility:visible;opacity:1;display:flex}:host.bordered ul li .container{border:.15em solid;border-radius:.3em}: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.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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DropdownMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-dropdown-menu', template: "<ul [sfcClickOutside]=\"hideOnClickOutside\" (action)=\"onClickOutside($event)\">\r\n    <li>\r\n        <div class=\"container\" (click)=\"open = !open\">\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        </div>\r\n\r\n        <ul *ngIf=\"items.length\" class=\"dropdown-container\">\r\n            <sfc-dropdown-menu-item *ngFor=\"let item of items\" [item]=\"item\" (click)=\"onClick(item)\">\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;flex-wrap:wrap;cursor:pointer;transition:all .3s 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:#ccd1d9}: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:#2bbbad}:host ul li .dropdown-container{flex-direction:column;width:max-content;background:#fff;visibility:hidden;opacity:0;position:absolute;right:0;transition:all .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{visibility:visible;opacity:1;display:flex}:host.bordered ul li .container{border:.15em solid;border-radius:.3em}: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:#ccd1d9}:host.bordered ul li .container:hover{border-color:#2bbbad}:host.bordered ul li .container:hover ::ng-deep sfc-dots .dot{background:#2bbbad}: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"] }]
+            args: [{ selector: 'sfc-dropdown-menu', template: "<ul [sfcClickOutside]=\"hideOnClickOutside\" (action)=\"onClickOutside($event)\">\r\n    <li>\r\n        <div class=\"container\" (click)=\"open = !open\">\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        </div>\r\n\r\n        <ul *ngIf=\"items.length\" class=\"dropdown-container\">\r\n            <sfc-dropdown-menu-item *ngFor=\"let item of items\" [item]=\"item\" (click)=\"onClick(item)\">\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:all .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;visibility:hidden;opacity:0;position:absolute;right:0;transition:all .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{visibility:visible;opacity:1;display:flex}:host.bordered ul li .container{border:.15em solid;border-radius:.3em}: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.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: i1.ResizeService }, { type: Window, decorators: [{
+        return [{ type: i1$1.ResizeService }, { type: Window, decorators: [{
                         type: Inject,
                         args: [WINDOW]
                     }] }];
@@ -499,6 +506,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
             }, {
                 type: HostBinding,
                 args: ['class.' + UIClass.Open]
+            }], autoResize: [{
+                type: Input
             }], selected: [{
                 type: Output
             }] } });
@@ -515,11 +524,11 @@ class NavigationMenuItemComponent {
             this.item.click(this.item);
     }
 }
-NavigationMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NavigationMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NavigationMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: NavigationMenuItemComponent, selector: "sfc-navigation-menu-item", inputs: { item: "item" }, host: { listeners: { "click": "click()" }, properties: { "class.active": "this.active" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <fa-icon *ngIf=\"item.icon\" [icon]=\"item.icon\"></fa-icon>\r\n    <span>{{item.label}}</span>\r\n</div>", styles: [":host{display:inline-flex;justify-content:center;align-items:center;cursor:pointer;transition:color .2s ease-in-out}:host,:host-context(.sfc-default-theme) :host{color:#545e61}:host-context(.sfc-dark-theme) :host{color:#ccd1d9}:host .container{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:1em .3em;margin:.625em;width:100%;border-radius:.625em;transition:background .2s ease-in-out}:host .container fa-icon{font-size:1.5em}:host .container span{font-size:1em;font-weight:700;margin-top:.625em;text-align:center}:host:hover,:host.active{color:#fff}:host:hover .container,:host.active .container{background:#2bbbad}\n"], components: [{ type: i1$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NavigationMenuItemComponent, decorators: [{
+NavigationMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NavigationMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NavigationMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: NavigationMenuItemComponent, selector: "sfc-navigation-menu-item", inputs: { item: "item" }, host: { listeners: { "click": "click()" }, properties: { "class.active": "this.active" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <fa-icon *ngIf=\"item.icon\" [icon]=\"item.icon\"></fa-icon>\r\n    <span>{{item.label}}</span>\r\n</div>", styles: [":host{display:inline-flex;justify-content:center;align-items:center;cursor:pointer;transition:color .2s ease-in-out}:host,:host-context(.sfc-default-theme) :host{color:#545e61}:host-context(.sfc-dark-theme) :host{color:#fff}:host .container{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:1em .3em;margin:.625em;width:100%;border-radius:.625em;transition:background .2s ease-in-out}:host .container fa-icon{font-size:1.5em}:host .container span{font-size:1em;font-weight:700;margin-top:.625em;text-align:center}:host:hover,:host.active{color:#fff}:host:hover .container,:host.active .container{background:#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: NavigationMenuItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-navigation-menu-item', template: "<div class=\"container\">\r\n    <fa-icon *ngIf=\"item.icon\" [icon]=\"item.icon\"></fa-icon>\r\n    <span>{{item.label}}</span>\r\n</div>", styles: [":host{display:inline-flex;justify-content:center;align-items:center;cursor:pointer;transition:color .2s ease-in-out}:host,:host-context(.sfc-default-theme) :host{color:#545e61}:host-context(.sfc-dark-theme) :host{color:#ccd1d9}:host .container{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:1em .3em;margin:.625em;width:100%;border-radius:.625em;transition:background .2s ease-in-out}:host .container fa-icon{font-size:1.5em}:host .container span{font-size:1em;font-weight:700;margin-top:.625em;text-align:center}:host:hover,:host.active{color:#fff}:host:hover .container,:host.active .container{background:#2bbbad}\n"] }]
+            args: [{ selector: 'sfc-navigation-menu-item', template: "<div class=\"container\">\r\n    <fa-icon *ngIf=\"item.icon\" [icon]=\"item.icon\"></fa-icon>\r\n    <span>{{item.label}}</span>\r\n</div>", styles: [":host{display:inline-flex;justify-content:center;align-items:center;cursor:pointer;transition:color .2s ease-in-out}:host,:host-context(.sfc-default-theme) :host{color:#545e61}:host-context(.sfc-dark-theme) :host{color:#fff}:host .container{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:1em .3em;margin:.625em;width:100%;border-radius:.625em;transition:background .2s ease-in-out}:host .container fa-icon{font-size:1.5em}:host .container span{font-size:1em;font-weight:700;margin-top:.625em;text-align:center}:host:hover,:host.active{color:#fff}:host:hover .container,:host.active .container{background:#ffce54}\n"] }]
         }], propDecorators: { item: [{
                 type: Input
             }], active: [{
@@ -541,9 +550,9 @@ class NavigationMenuComponent {
         this.selected.emit(item);
     }
 }
-NavigationMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NavigationMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NavigationMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: NavigationMenuComponent, selector: "sfc-navigation-menu", inputs: { items: "items" }, outputs: { selected: "selected" }, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"items\">\r\n        <sfc-navigation-menu-item *ngFor=\"let item of items\" [item]=\"item\" (click)=\"onClick(item)\">\r\n        </sfc-navigation-menu-item>\r\n    </div>\r\n</div>", styles: [":host .container,:host-context(.sfc-default-theme) :host .container{background:#f5f7fa}:host-context(.sfc-dark-theme) :host .container{background:#1b1d1f}:host .container .items{display:flex;flex-wrap:wrap;padding:.625em}:host .container .items sfc-navigation-menu-item{flex:50%}\n"], components: [{ type: NavigationMenuItemComponent, selector: "sfc-navigation-menu-item", inputs: ["item"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NavigationMenuComponent, decorators: [{
+NavigationMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NavigationMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NavigationMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: NavigationMenuComponent, selector: "sfc-navigation-menu", inputs: { items: "items" }, outputs: { selected: "selected" }, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"items\">\r\n        <sfc-navigation-menu-item *ngFor=\"let item of items\" [item]=\"item\" (click)=\"onClick(item)\">\r\n        </sfc-navigation-menu-item>\r\n    </div>\r\n</div>", styles: [":host .container,:host-context(.sfc-default-theme) :host .container{background:#f5f7fa}:host-context(.sfc-dark-theme) :host .container{background:#1b1d1f}:host .container .items{display:flex;flex-wrap:wrap;padding:.625em}:host .container .items sfc-navigation-menu-item{flex:50%}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: NavigationMenuItemComponent, selector: "sfc-navigation-menu-item", inputs: ["item"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NavigationMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sfc-navigation-menu', template: "<div class=\"container\">\r\n    <div class=\"items\">\r\n        <sfc-navigation-menu-item *ngFor=\"let item of items\" [item]=\"item\" (click)=\"onClick(item)\">\r\n        </sfc-navigation-menu-item>\r\n    </div>\r\n</div>", styles: [":host .container,:host-context(.sfc-default-theme) :host .container{background:#f5f7fa}:host-context(.sfc-dark-theme) :host .container{background:#1b1d1f}:host .container .items{display:flex;flex-wrap:wrap;padding:.625em}:host .container .items sfc-navigation-menu-item{flex:50%}\n"] }]
         }], propDecorators: { items: [{
@@ -588,9 +597,9 @@ class StarsComponent {
         return StarType.S75;
     }
 }
-StarsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: StarsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-StarsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: StarsComponent, selector: "sfc-stars", inputs: { value: "value", count: "count" }, ngImport: i0, template: "<div class=\"container\">\r\n    <button *ngFor=\"let star of stars; let i = index;\" [ngClass]=\"getStarType(i)\"></button>\r\n</div>", styles: [":host .container button{width:1.8em;height:1.8em;font-size:1em;background:url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat;cursor:pointer;border:0;outline:none;transition:transform .25s,background .25s ease}:host .container button:hover{transform:scale(1.1)}:host .container button.none{background:url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat}:host .container button.s25{background:url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M196.208 415.2v-224.8l-139.504 20.272 100.944 98.384-23.84 138.928z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat,url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat}:host .container button.half{background:url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M258.672 64l-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6v-318.4z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat,url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat}:host .container button.s75{background:url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M321.616 190.496l-0.656-0.096-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 63.024 33.136z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat,url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat}:host .container button.full{background:url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat}\n"], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: StarsComponent, decorators: [{
+StarsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: StarsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+StarsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: StarsComponent, selector: "sfc-stars", inputs: { value: "value", count: "count" }, ngImport: i0, template: "<div class=\"container\">\r\n    <button *ngFor=\"let star of stars; let i = index;\" [ngClass]=\"getStarType(i)\"></button>\r\n</div>", styles: [":host .container button{width:1.8em;height:1.8em;font-size:1em;background:url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat;cursor:pointer;border:0;outline:none;transition:transform .25s,background .25s ease}:host .container button:hover{transform:scale(1.1)}:host .container button.none{background:url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat}:host .container button.s25{background:url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M196.208 415.2v-224.8l-139.504 20.272 100.944 98.384-23.84 138.928z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat,url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat}:host .container button.half{background:url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M258.672 64l-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6v-318.4z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat,url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat}:host .container button.s75{background:url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M321.616 190.496l-0.656-0.096-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 63.024 33.136z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat,url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat}:host .container button.full{background:url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: StarsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sfc-stars', template: "<div class=\"container\">\r\n    <button *ngFor=\"let star of stars; let i = index;\" [ngClass]=\"getStarType(i)\"></button>\r\n</div>", styles: [":host .container button{width:1.8em;height:1.8em;font-size:1em;background:url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat;cursor:pointer;border:0;outline:none;transition:transform .25s,background .25s ease}:host .container button:hover{transform:scale(1.1)}:host .container button.none{background:url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat}:host .container button.s25{background:url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M196.208 415.2v-224.8l-139.504 20.272 100.944 98.384-23.84 138.928z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat,url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat}:host .container button.half{background:url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M258.672 64l-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6v-318.4z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat,url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat}:host .container button.s75{background:url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M321.616 190.496l-0.656-0.096-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 63.024 33.136z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat,url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat}:host .container button.full{background:url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat}\n"] }]
         }], propDecorators: { value: [{
@@ -704,9 +713,9 @@ class AvatarBadgeComponent {
         return this.radius * AvatarBadgeConstants.SIZE_MULTIPLIER;
     }
 }
-AvatarBadgeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AvatarBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AvatarBadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: AvatarBadgeComponent, selector: "sfc-avatar-badge", inputs: { position: "position", background: "background" }, host: { properties: { "style": "this.styles" } }, ngImport: i0, template: "<span class=\"container\">\r\n    <ng-content></ng-content>\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"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AvatarBadgeComponent, decorators: [{
+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: { position: "position", background: "background" }, host: { properties: { "style": "this.styles" } }, ngImport: i0, template: "<span class=\"container\">\r\n    <ng-content></ng-content>\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"] });
+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-content></ng-content>\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"] }]
         }], propDecorators: { position: [{
@@ -769,9 +778,9 @@ class AvatarComponent {
         return Math.round(this.imageModel.Circumference - (this.progress / 100 * this.imageModel.Circumference));
     }
 }
-AvatarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: AvatarComponent, selector: "sfc-avatar", inputs: { radius: "radius", stroke: "stroke", progress: "progress", progressModel: "progressModel", data: "data", stars: "stars", starsValue: "starsValue" }, queries: [{ propertyName: "badges", predicate: AvatarBadgeComponent, read: AvatarBadgeComponent }], ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"avatar-image-container\">\r\n        <div class=\"avatar\" (mouseenter)=\"stroke = stroke * STROKE_HOVER_VALUE\"\r\n            (mouseleave)=\"stroke = stroke / STROKE_HOVER_VALUE\">\r\n\r\n            <div class=\"avatar-image\">\r\n                <svg [attr.height]=\"imageModel.Height\" [attr.width]=\"imageModel.Width\">\r\n                    <defs>\r\n                        <pattern id=\"{{imageModel.ImageId}}\" patternUnits=\"userSpaceOnUse\"\r\n                            [attr.height]=\"imageModel.Height\" [attr.width]=\"imageModel.Width\">\r\n                            <image [attr.height]=\"imageModel.Height\" [attr.width]=\"imageModel.Width\"\r\n                                [attr.xlink:href]=\"data.image\" preserveAspectRatio=\"xMidYMid slice\"></image>\r\n                        </pattern>\r\n                    </defs>\r\n                    <circle class=\"progress\" [attr.stroke]=\"progressModel.color\" [attr.stroke-width]=\"stroke\"\r\n                        fill=\"transparent\" [attr.r]=\"imageModel.NormalizedRadius\" [attr.cx]=\"radius\"\r\n                        [attr.cy]=\"radius\" />\r\n                    <circle class=\"progress\" [attr.stroke]=\"progressModel.filledColor\"\r\n                        [attr.stroke-dasharray]=\"imageModel.Circumference + ' ' + imageModel.Circumference\"\r\n                        [ngStyle]=\"{'stroke-dashoffset':strokeDashOffset}\" [attr.stroke-width]=\"stroke\"\r\n                        fill=\"transparent\" [attr.r]=\"imageModel.NormalizedRadius\" [attr.cx]=\"radius\"\r\n                        [attr.cy]=\"radius\" />\r\n\r\n                    <circle [attr.cx]=\"radius\" [attr.cy]=\"radius\" [attr.r]=\"imageModel.ImageRadius\"\r\n                        attr.fill=\"url('#{{imageModel.ImageId}}')\" />\r\n                </svg>\r\n            </div>\r\n\r\n            <ng-content></ng-content>\r\n\r\n        </div>\r\n\r\n        <sfc-stars *ngIf=\"stars\" [value]=\"starsValue\"></sfc-stars>\r\n    </div>\r\n\r\n    <div class=\"avatar-data-container\">\r\n        <div class=\"fullname\" [style.fontSize.px]=\"radius / FULLNAME_PART_VALUE\">\r\n            <span>{{data.firstName}} {{data.lastName}}</span>\r\n        </div>\r\n        <div class=\"title\" [style.fontSize.px]=\"radius / TITLE_PART_VALUE\">\r\n            <span>{{data.title}}</span>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host .container .avatar-image-container{display:flex;justify-content:center;flex-direction:column;align-items:center}:host .container .avatar-image-container .avatar{position:relative;margin-bottom:.5em}:host .container .avatar-image-container .avatar .avatar-image{display:flex;overflow:hidden;align-items:center;justify-content:center}:host .container .avatar-image-container .avatar .avatar-image circle{transform-origin:50% 50%;transition:stroke-dashoffset .35s,stroke-width .3s}:host .container .avatar-image-container .avatar .avatar-image circle.progress{transform:rotate(-90deg)}:host .container .avatar-data-container{display:flex;flex-direction:column;align-items:center;font-size:1em;font-weight:700;-webkit-user-select:none;user-select:none}:host .container .avatar-data-container .fullname,:host-context(.sfc-default-theme) :host .container .avatar-data-container .fullname{color:#545e61}:host-context(.sfc-dark-theme) :host .container .avatar-data-container .fullname{color:#f5f7fa}:host .container .avatar-data-container .title{color:#aab2bd}\n"], components: [{ type: StarsComponent, selector: "sfc-stars", inputs: ["value", "count"] }], directives: [{ type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AvatarComponent, decorators: [{
+AvatarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: AvatarComponent, selector: "sfc-avatar", inputs: { radius: "radius", stroke: "stroke", progress: "progress", progressModel: "progressModel", data: "data", stars: "stars", starsValue: "starsValue" }, queries: [{ propertyName: "badges", predicate: AvatarBadgeComponent, read: AvatarBadgeComponent }], ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"avatar-image-container\">\r\n        <div class=\"avatar\" (mouseenter)=\"stroke = stroke * STROKE_HOVER_VALUE\"\r\n            (mouseleave)=\"stroke = stroke / STROKE_HOVER_VALUE\">\r\n\r\n            <div class=\"avatar-image\">\r\n                <svg [attr.height]=\"imageModel.Height\" [attr.width]=\"imageModel.Width\">\r\n                    <defs>\r\n                        <pattern id=\"{{imageModel.ImageId}}\" patternUnits=\"userSpaceOnUse\"\r\n                            [attr.height]=\"imageModel.Height\" [attr.width]=\"imageModel.Width\">\r\n                            <image [attr.height]=\"imageModel.Height\" [attr.width]=\"imageModel.Width\"\r\n                                [attr.xlink:href]=\"data.image\" preserveAspectRatio=\"xMidYMid slice\"></image>\r\n                        </pattern>\r\n                    </defs>\r\n                    <circle class=\"progress\" [attr.stroke]=\"progressModel.color\" [attr.stroke-width]=\"stroke\"\r\n                        fill=\"transparent\" [attr.r]=\"imageModel.NormalizedRadius\" [attr.cx]=\"radius\"\r\n                        [attr.cy]=\"radius\" />\r\n                    <circle class=\"progress\" [attr.stroke]=\"progressModel.filledColor\"\r\n                        [attr.stroke-dasharray]=\"imageModel.Circumference + ' ' + imageModel.Circumference\"\r\n                        [ngStyle]=\"{'stroke-dashoffset':strokeDashOffset}\" [attr.stroke-width]=\"stroke\"\r\n                        fill=\"transparent\" [attr.r]=\"imageModel.NormalizedRadius\" [attr.cx]=\"radius\"\r\n                        [attr.cy]=\"radius\" />\r\n\r\n                    <circle [attr.cx]=\"radius\" [attr.cy]=\"radius\" [attr.r]=\"imageModel.ImageRadius\"\r\n                        attr.fill=\"url('#{{imageModel.ImageId}}')\" />\r\n                </svg>\r\n            </div>\r\n\r\n            <ng-content></ng-content>\r\n\r\n        </div>\r\n\r\n        <sfc-stars *ngIf=\"stars\" [value]=\"starsValue\"></sfc-stars>\r\n    </div>\r\n\r\n    <div class=\"avatar-data-container\">\r\n        <div class=\"fullname\" [style.fontSize.px]=\"radius / FULLNAME_PART_VALUE\">\r\n            <span>{{data.firstName}} {{data.lastName}}</span>\r\n        </div>\r\n        <div class=\"title\" [style.fontSize.px]=\"radius / TITLE_PART_VALUE\">\r\n            <span>{{data.title}}</span>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host .container .avatar-image-container{display:flex;justify-content:center;flex-direction:column;align-items:center}:host .container .avatar-image-container .avatar{position:relative;margin-bottom:.5em}:host .container .avatar-image-container .avatar .avatar-image{display:flex;overflow:hidden;align-items:center;justify-content:center}:host .container .avatar-image-container .avatar .avatar-image circle{transform-origin:50% 50%;transition:stroke-dashoffset .35s,stroke-width .3s}:host .container .avatar-image-container .avatar .avatar-image circle.progress{transform:rotate(-90deg)}:host .container .avatar-data-container{display:flex;flex-direction:column;align-items:center;font-size:1em;font-weight:700;-webkit-user-select:none;user-select:none}:host .container .avatar-data-container .fullname,:host-context(.sfc-default-theme) :host .container .avatar-data-container .fullname{color:#545e61}:host-context(.sfc-dark-theme) :host .container .avatar-data-container .fullname{color:#f5f7fa}:host .container .avatar-data-container .title{color:#aab2bd}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: StarsComponent, selector: "sfc-stars", inputs: ["value", "count"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AvatarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sfc-avatar', template: "<div class=\"container\">\r\n    <div class=\"avatar-image-container\">\r\n        <div class=\"avatar\" (mouseenter)=\"stroke = stroke * STROKE_HOVER_VALUE\"\r\n            (mouseleave)=\"stroke = stroke / STROKE_HOVER_VALUE\">\r\n\r\n            <div class=\"avatar-image\">\r\n                <svg [attr.height]=\"imageModel.Height\" [attr.width]=\"imageModel.Width\">\r\n                    <defs>\r\n                        <pattern id=\"{{imageModel.ImageId}}\" patternUnits=\"userSpaceOnUse\"\r\n                            [attr.height]=\"imageModel.Height\" [attr.width]=\"imageModel.Width\">\r\n                            <image [attr.height]=\"imageModel.Height\" [attr.width]=\"imageModel.Width\"\r\n                                [attr.xlink:href]=\"data.image\" preserveAspectRatio=\"xMidYMid slice\"></image>\r\n                        </pattern>\r\n                    </defs>\r\n                    <circle class=\"progress\" [attr.stroke]=\"progressModel.color\" [attr.stroke-width]=\"stroke\"\r\n                        fill=\"transparent\" [attr.r]=\"imageModel.NormalizedRadius\" [attr.cx]=\"radius\"\r\n                        [attr.cy]=\"radius\" />\r\n                    <circle class=\"progress\" [attr.stroke]=\"progressModel.filledColor\"\r\n                        [attr.stroke-dasharray]=\"imageModel.Circumference + ' ' + imageModel.Circumference\"\r\n                        [ngStyle]=\"{'stroke-dashoffset':strokeDashOffset}\" [attr.stroke-width]=\"stroke\"\r\n                        fill=\"transparent\" [attr.r]=\"imageModel.NormalizedRadius\" [attr.cx]=\"radius\"\r\n                        [attr.cy]=\"radius\" />\r\n\r\n                    <circle [attr.cx]=\"radius\" [attr.cy]=\"radius\" [attr.r]=\"imageModel.ImageRadius\"\r\n                        attr.fill=\"url('#{{imageModel.ImageId}}')\" />\r\n                </svg>\r\n            </div>\r\n\r\n            <ng-content></ng-content>\r\n\r\n        </div>\r\n\r\n        <sfc-stars *ngIf=\"stars\" [value]=\"starsValue\"></sfc-stars>\r\n    </div>\r\n\r\n    <div class=\"avatar-data-container\">\r\n        <div class=\"fullname\" [style.fontSize.px]=\"radius / FULLNAME_PART_VALUE\">\r\n            <span>{{data.firstName}} {{data.lastName}}</span>\r\n        </div>\r\n        <div class=\"title\" [style.fontSize.px]=\"radius / TITLE_PART_VALUE\">\r\n            <span>{{data.title}}</span>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host .container .avatar-image-container{display:flex;justify-content:center;flex-direction:column;align-items:center}:host .container .avatar-image-container .avatar{position:relative;margin-bottom:.5em}:host .container .avatar-image-container .avatar .avatar-image{display:flex;overflow:hidden;align-items:center;justify-content:center}:host .container .avatar-image-container .avatar .avatar-image circle{transform-origin:50% 50%;transition:stroke-dashoffset .35s,stroke-width .3s}:host .container .avatar-image-container .avatar .avatar-image circle.progress{transform:rotate(-90deg)}:host .container .avatar-data-container{display:flex;flex-direction:column;align-items:center;font-size:1em;font-weight:700;-webkit-user-select:none;user-select:none}:host .container .avatar-data-container .fullname,:host-context(.sfc-default-theme) :host .container .avatar-data-container .fullname{color:#545e61}:host-context(.sfc-dark-theme) :host .container .avatar-data-container .fullname{color:#f5f7fa}:host .container .avatar-data-container .title{color:#aab2bd}\n"] }]
         }], propDecorators: { radius: [{
@@ -841,9 +850,9 @@ class ProgressBaseComponent {
         }
     }
 }
-ProgressBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ProgressBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-ProgressBaseComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: ProgressBaseComponent, inputs: { progress: "progress", background: "background", getColor: "getColor" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ProgressBaseComponent, decorators: [{
+ProgressBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ProgressBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+ProgressBaseComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: ProgressBaseComponent, inputs: { progress: "progress", background: "background", getColor: "getColor" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ProgressBaseComponent, decorators: [{
             type: Directive
         }], propDecorators: { progress: [{
                 type: Input
@@ -873,11 +882,11 @@ class ProgressLineComponent extends ProgressBaseComponent {
         };
     }
 }
-ProgressLineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ProgressLineComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ProgressLineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: ProgressLineComponent, selector: "sfc-progress-line", inputs: { total: "total", labelStart: "labelStart", labelEnd: "labelEnd", hideEnd: "hideEnd" }, usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"labels\">\r\n        <span>{{labelStart}}</span>\r\n        <span *ngIf=\"!hideEnd\">{{label}}</span>\r\n    </div>\r\n    <div class=\"progress-bar\" [style.background]=\"background\">\r\n        <div class=\"progress\" [ngStyle]=\"progressStyles\"></div>\r\n    </div>\r\n</div>", styles: [":host{width:100%}:host .container .progress-bar{border-radius:.5em;background:#e6e9ed}:host .container .progress-bar .progress{height:.4em;border-radius:.5em;background-image:linear-gradient(to bottom,rgba(255,255,255,.3),rgba(255,255,255,.05));transition:.4s linear;transition-property:width,background-color}:host .container .labels{display:flex;justify-content:space-between;margin-bottom:.3em;font-weight:700;-webkit-user-select:none;user-select:none;font-size:.8em}:host .container .labels,:host-context(.sfc-default-theme) :host .container .labels{color:#545e61}:host-context(.sfc-dark-theme) :host .container .labels{color:#ccd1d9}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ProgressLineComponent, decorators: [{
+ProgressLineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ProgressLineComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+ProgressLineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ProgressLineComponent, selector: "sfc-progress-line", inputs: { total: "total", labelStart: "labelStart", labelEnd: "labelEnd", hideEnd: "hideEnd" }, usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"labels\">\r\n        <span>{{labelStart}}</span>\r\n        <span *ngIf=\"!hideEnd\">{{label}}</span>\r\n    </div>\r\n    <div class=\"progress-bar\" [style.background]=\"background\">\r\n        <div class=\"progress\" [ngStyle]=\"progressStyles\"></div>\r\n    </div>\r\n</div>", styles: [":host{width:100%}:host .container .progress-bar{border-radius:.5em;background:#e6e9ed}:host .container .progress-bar .progress{height:.4em;border-radius:.5em;background-image:linear-gradient(to bottom,rgba(255,255,255,.3),rgba(255,255,255,.05));transition:.4s linear;transition-property:width,background-color}:host .container .labels{display:flex;justify-content:space-between;margin-bottom:.3em;font-weight:700;-webkit-user-select:none;user-select:none;font-size:.8em}:host .container .labels,:host-context(.sfc-default-theme) :host .container .labels{color:#545e61}:host-context(.sfc-dark-theme) :host .container .labels{color:#fff}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ProgressLineComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-progress-line', template: "<div class=\"container\">\r\n    <div class=\"labels\">\r\n        <span>{{labelStart}}</span>\r\n        <span *ngIf=\"!hideEnd\">{{label}}</span>\r\n    </div>\r\n    <div class=\"progress-bar\" [style.background]=\"background\">\r\n        <div class=\"progress\" [ngStyle]=\"progressStyles\"></div>\r\n    </div>\r\n</div>", styles: [":host{width:100%}:host .container .progress-bar{border-radius:.5em;background:#e6e9ed}:host .container .progress-bar .progress{height:.4em;border-radius:.5em;background-image:linear-gradient(to bottom,rgba(255,255,255,.3),rgba(255,255,255,.05));transition:.4s linear;transition-property:width,background-color}:host .container .labels{display:flex;justify-content:space-between;margin-bottom:.3em;font-weight:700;-webkit-user-select:none;user-select:none;font-size:.8em}:host .container .labels,:host-context(.sfc-default-theme) :host .container .labels{color:#545e61}:host-context(.sfc-dark-theme) :host .container .labels{color:#ccd1d9}\n"] }]
+            args: [{ selector: 'sfc-progress-line', template: "<div class=\"container\">\r\n    <div class=\"labels\">\r\n        <span>{{labelStart}}</span>\r\n        <span *ngIf=\"!hideEnd\">{{label}}</span>\r\n    </div>\r\n    <div class=\"progress-bar\" [style.background]=\"background\">\r\n        <div class=\"progress\" [ngStyle]=\"progressStyles\"></div>\r\n    </div>\r\n</div>", styles: [":host{width:100%}:host .container .progress-bar{border-radius:.5em;background:#e6e9ed}:host .container .progress-bar .progress{height:.4em;border-radius:.5em;background-image:linear-gradient(to bottom,rgba(255,255,255,.3),rgba(255,255,255,.05));transition:.4s linear;transition-property:width,background-color}:host .container .labels{display:flex;justify-content:space-between;margin-bottom:.3em;font-weight:700;-webkit-user-select:none;user-select:none;font-size:.8em}:host .container .labels,:host-context(.sfc-default-theme) :host .container .labels{color:#545e61}:host-context(.sfc-dark-theme) :host .container .labels{color:#fff}\n"] }]
         }], propDecorators: { total: [{
                 type: Input
             }], labelStart: [{
@@ -912,11 +921,11 @@ class ProgressSemiCircleComponent extends ProgressBaseComponent {
         };
     }
 }
-ProgressSemiCircleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ProgressSemiCircleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ProgressSemiCircleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: ProgressSemiCircleComponent, selector: "sfc-progress-semi-circle", inputs: { limits: "limits", min: "min", max: "max" }, usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"progress-bar\">\r\n        <div class=\"bar\" [style.border-color]=\"background\" [ngStyle]=\"barStyles\"></div>\r\n    </div>\r\n    <span class=\"value\">{{progress}}</span>\r\n    <div class=\"limits\" *ngIf=\"limits\">\r\n        <span>{{min}}</span>\r\n        <span>{{max}}</span>\r\n    </div>\r\n</div>", styles: [":host .container{position:relative;width:1em;height:.5em;font-size:5em}:host .container,:host-context(.sfc-default-theme) :host .container{color:#545e61}:host-context(.sfc-dark-theme) :host .container{color:#ccd1d9}:host .container .progress-bar{position:relative;overflow:hidden;height:inherit}:host .container .progress-bar .bar{width:1em;height:1em;border-radius:50%;box-sizing:border-box;border:.1em solid;border-color:#e6e9ed;transition-property:all;transition-duration:.2s;transition-timing-function:ease-out}:host .container .value{font-weight:700;font-size:.2em;-webkit-user-select:none;user-select:none;position:absolute;z-index:1;top:50%;width:5em;text-align:center;white-space:nowrap;transition-property:all;transition-duration:.2s;transition-timing-function:ease-out}:host .container .limits{font-size:.06em;font-weight:700;display:flex;justify-content:space-between;align-items:center;margin-top:3px}:host .container:hover .progress-bar .bar{border-width:.08em}:host .container:hover .value{font-size:.3em;width:3.33em;top:30%}\n"], directives: [{ type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ProgressSemiCircleComponent, decorators: [{
+ProgressSemiCircleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ProgressSemiCircleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+ProgressSemiCircleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ProgressSemiCircleComponent, selector: "sfc-progress-semi-circle", inputs: { limits: "limits", min: "min", max: "max" }, usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"progress-bar\">\r\n        <div class=\"bar\" [style.border-color]=\"background\" [ngStyle]=\"barStyles\"></div>\r\n    </div>\r\n    <span class=\"value\">{{progress}}</span>\r\n    <div class=\"limits\" *ngIf=\"limits\">\r\n        <span>{{min}}</span>\r\n        <span>{{max}}</span>\r\n    </div>\r\n</div>", styles: [":host .container{position:relative;width:1em;height:.5em;font-size:5em}:host .container,:host-context(.sfc-default-theme) :host .container{color:#545e61}:host-context(.sfc-dark-theme) :host .container{color:#fff}:host .container .progress-bar{position:relative;overflow:hidden;height:inherit}:host .container .progress-bar .bar{width:1em;height:1em;border-radius:50%;box-sizing:border-box;border:.1em solid;border-color:#e6e9ed;transition-property:all;transition-duration:.2s;transition-timing-function:ease-out}:host .container .value{font-weight:700;font-size:.2em;-webkit-user-select:none;user-select:none;position:absolute;z-index:1;top:50%;width:5em;text-align:center;white-space:nowrap;transition-property:all;transition-duration:.2s;transition-timing-function:ease-out}:host .container .limits{font-size:.06em;font-weight:700;display:flex;justify-content:space-between;align-items:center;margin-top:3px}:host .container:hover .progress-bar .bar{border-width:.08em}:host .container:hover .value{font-size:.3em;width:3.33em;top:30%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ProgressSemiCircleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-progress-semi-circle', template: "<div class=\"container\">\r\n    <div class=\"progress-bar\">\r\n        <div class=\"bar\" [style.border-color]=\"background\" [ngStyle]=\"barStyles\"></div>\r\n    </div>\r\n    <span class=\"value\">{{progress}}</span>\r\n    <div class=\"limits\" *ngIf=\"limits\">\r\n        <span>{{min}}</span>\r\n        <span>{{max}}</span>\r\n    </div>\r\n</div>", styles: [":host .container{position:relative;width:1em;height:.5em;font-size:5em}:host .container,:host-context(.sfc-default-theme) :host .container{color:#545e61}:host-context(.sfc-dark-theme) :host .container{color:#ccd1d9}:host .container .progress-bar{position:relative;overflow:hidden;height:inherit}:host .container .progress-bar .bar{width:1em;height:1em;border-radius:50%;box-sizing:border-box;border:.1em solid;border-color:#e6e9ed;transition-property:all;transition-duration:.2s;transition-timing-function:ease-out}:host .container .value{font-weight:700;font-size:.2em;-webkit-user-select:none;user-select:none;position:absolute;z-index:1;top:50%;width:5em;text-align:center;white-space:nowrap;transition-property:all;transition-duration:.2s;transition-timing-function:ease-out}:host .container .limits{font-size:.06em;font-weight:700;display:flex;justify-content:space-between;align-items:center;margin-top:3px}:host .container:hover .progress-bar .bar{border-width:.08em}:host .container:hover .value{font-size:.3em;width:3.33em;top:30%}\n"] }]
+            args: [{ selector: 'sfc-progress-semi-circle', template: "<div class=\"container\">\r\n    <div class=\"progress-bar\">\r\n        <div class=\"bar\" [style.border-color]=\"background\" [ngStyle]=\"barStyles\"></div>\r\n    </div>\r\n    <span class=\"value\">{{progress}}</span>\r\n    <div class=\"limits\" *ngIf=\"limits\">\r\n        <span>{{min}}</span>\r\n        <span>{{max}}</span>\r\n    </div>\r\n</div>", styles: [":host .container{position:relative;width:1em;height:.5em;font-size:5em}:host .container,:host-context(.sfc-default-theme) :host .container{color:#545e61}:host-context(.sfc-dark-theme) :host .container{color:#fff}:host .container .progress-bar{position:relative;overflow:hidden;height:inherit}:host .container .progress-bar .bar{width:1em;height:1em;border-radius:50%;box-sizing:border-box;border:.1em solid;border-color:#e6e9ed;transition-property:all;transition-duration:.2s;transition-timing-function:ease-out}:host .container .value{font-weight:700;font-size:.2em;-webkit-user-select:none;user-select:none;position:absolute;z-index:1;top:50%;width:5em;text-align:center;white-space:nowrap;transition-property:all;transition-duration:.2s;transition-timing-function:ease-out}:host .container .limits{font-size:.06em;font-weight:700;display:flex;justify-content:space-between;align-items:center;margin-top:3px}:host .container:hover .progress-bar .bar{border-width:.08em}:host .container:hover .value{font-size:.3em;width:3.33em;top:30%}\n"] }]
         }], propDecorators: { limits: [{
                 type: Input
             }], min: [{
@@ -933,11 +942,11 @@ class ProgressCircleComponent extends ProgressBaseComponent {
         return `rotate(${getCssLikeValue((this.progress * 360) / CommonConstants.FULL_PERCENTAGE, UIConstants.CSS_DEGREES)})`;
     }
 }
-ProgressCircleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ProgressCircleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ProgressCircleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: ProgressCircleComponent, selector: "sfc-progress-circle", host: { properties: { "class.reversed": "this.reversed" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"container\" [style.background]=\"background\">\r\n    <span>{{progress}}</span>\r\n    <div class=\"circle\">\r\n        <div class=\"bar\" [ngStyle]=\"{'transform': transformRotate, \r\n            'border-color': getColor(progress)}\"></div>\r\n        <div class=\"fill\" [ngStyle]=\"{'border-color': getColor(progress)}\"></div>\r\n    </div>\r\n</div>", styles: [":host.reversed .container .circle .fill,:host .container .circle .bar{position:absolute;border:.09em solid;clip:rect(0,.5em,1em,0);border-radius:50%;width:.82em;height:.82em}:host .container{position:relative;border-radius:50%;background:#e6e9ed;font-size:5em;text-align:initial;width:1em;height:1em}:host .container:after{position:absolute;top:.082em;left:.09em;content:\" \";border-radius:50%;background:#fff;transition-property:all;transition-duration:.2s;transition-timing-function:ease-in;width:.83em;height:.83em}:host .container span{position:absolute;z-index:1;width:5em;line-height:5em;font-size:.2em;color:#545e61;font-weight:700;text-align:center;white-space:nowrap;-webkit-user-select:none;user-select:none;transition-property:all;transition-duration:.2s;transition-timing-function:ease-out}:host .container:hover:after{top:.07em;left:.07em;width:.86em;height:.86em}:host .container:hover span{width:3.33em;line-height:3.33em;font-size:.3em}:host .container .circle{position:absolute;clip:rect(0,1em,1em,.5em);width:1em;height:1em}:host .container .circle .bar{transition:transform .2s ease-out,border-color .2s ease-out}:host.reversed .container .circle{clip:rect(auto,auto,auto,auto)}:host.reversed .container .circle .fill{transform:rotate(180deg)}\n"], directives: [{ type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ProgressCircleComponent, decorators: [{
+ProgressCircleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ProgressCircleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+ProgressCircleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ProgressCircleComponent, selector: "sfc-progress-circle", host: { properties: { "class.reversed": "this.reversed" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"container\" [style.background]=\"background\">\r\n    <span>{{progress}}</span>\r\n    <div class=\"circle\">\r\n        <div class=\"bar\" [ngStyle]=\"{'transform': transformRotate, \r\n            'border-color': getColor(progress)}\"></div>\r\n        <div class=\"fill\" [ngStyle]=\"{'border-color': getColor(progress)}\"></div>\r\n    </div>\r\n</div>", styles: [":host .container .circle .bar{position:absolute;border:.09em solid;clip:rect(0,.5em,1em,0);border-radius:50%;width:.82em;height:.82em}:host .container{position:relative;border-radius:50%;background:#e6e9ed;font-size:5em;text-align:initial;width:1em;height:1em}:host .container:after{position:absolute;top:.082em;left:.09em;content:\" \";border-radius:50%;background:#fff;transition-property:all;transition-duration:.2s;transition-timing-function:ease-in;width:.83em;height:.83em}:host .container span{position:absolute;z-index:1;width:5em;line-height:5em;font-size:.2em;color:#545e61;font-weight:700;text-align:center;white-space:nowrap;-webkit-user-select:none;user-select:none;transition-property:all;transition-duration:.2s;transition-timing-function:ease-out}:host .container:hover:after{top:.07em;left:.07em;width:.86em;height:.86em}:host .container:hover span{width:3.33em;line-height:3.33em;font-size:.3em}:host .container .circle{position:absolute;clip:rect(0,1em,1em,.5em);width:1em;height:1em}:host .container .circle .bar{transition:transform .2s ease-out,border-color .2s ease-out}:host.reversed .container .circle{clip:rect(auto,auto,auto,auto)}:host.reversed .container .circle .fill{transform:rotate(180deg)}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ProgressCircleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-progress-circle', template: "<div class=\"container\" [style.background]=\"background\">\r\n    <span>{{progress}}</span>\r\n    <div class=\"circle\">\r\n        <div class=\"bar\" [ngStyle]=\"{'transform': transformRotate, \r\n            'border-color': getColor(progress)}\"></div>\r\n        <div class=\"fill\" [ngStyle]=\"{'border-color': getColor(progress)}\"></div>\r\n    </div>\r\n</div>", styles: [":host.reversed .container .circle .fill,:host .container .circle .bar{position:absolute;border:.09em solid;clip:rect(0,.5em,1em,0);border-radius:50%;width:.82em;height:.82em}:host .container{position:relative;border-radius:50%;background:#e6e9ed;font-size:5em;text-align:initial;width:1em;height:1em}:host .container:after{position:absolute;top:.082em;left:.09em;content:\" \";border-radius:50%;background:#fff;transition-property:all;transition-duration:.2s;transition-timing-function:ease-in;width:.83em;height:.83em}:host .container span{position:absolute;z-index:1;width:5em;line-height:5em;font-size:.2em;color:#545e61;font-weight:700;text-align:center;white-space:nowrap;-webkit-user-select:none;user-select:none;transition-property:all;transition-duration:.2s;transition-timing-function:ease-out}:host .container:hover:after{top:.07em;left:.07em;width:.86em;height:.86em}:host .container:hover span{width:3.33em;line-height:3.33em;font-size:.3em}:host .container .circle{position:absolute;clip:rect(0,1em,1em,.5em);width:1em;height:1em}:host .container .circle .bar{transition:transform .2s ease-out,border-color .2s ease-out}:host.reversed .container .circle{clip:rect(auto,auto,auto,auto)}:host.reversed .container .circle .fill{transform:rotate(180deg)}\n"] }]
+            args: [{ selector: 'sfc-progress-circle', template: "<div class=\"container\" [style.background]=\"background\">\r\n    <span>{{progress}}</span>\r\n    <div class=\"circle\">\r\n        <div class=\"bar\" [ngStyle]=\"{'transform': transformRotate, \r\n            'border-color': getColor(progress)}\"></div>\r\n        <div class=\"fill\" [ngStyle]=\"{'border-color': getColor(progress)}\"></div>\r\n    </div>\r\n</div>", styles: [":host .container .circle .bar{position:absolute;border:.09em solid;clip:rect(0,.5em,1em,0);border-radius:50%;width:.82em;height:.82em}:host .container{position:relative;border-radius:50%;background:#e6e9ed;font-size:5em;text-align:initial;width:1em;height:1em}:host .container:after{position:absolute;top:.082em;left:.09em;content:\" \";border-radius:50%;background:#fff;transition-property:all;transition-duration:.2s;transition-timing-function:ease-in;width:.83em;height:.83em}:host .container span{position:absolute;z-index:1;width:5em;line-height:5em;font-size:.2em;color:#545e61;font-weight:700;text-align:center;white-space:nowrap;-webkit-user-select:none;user-select:none;transition-property:all;transition-duration:.2s;transition-timing-function:ease-out}:host .container:hover:after{top:.07em;left:.07em;width:.86em;height:.86em}:host .container:hover span{width:3.33em;line-height:3.33em;font-size:.3em}:host .container .circle{position:absolute;clip:rect(0,1em,1em,.5em);width:1em;height:1em}:host .container .circle .bar{transition:transform .2s ease-out,border-color .2s ease-out}:host.reversed .container .circle{clip:rect(auto,auto,auto,auto)}:host.reversed .container .circle .fill{transform:rotate(180deg)}\n"] }]
         }], propDecorators: { reversed: [{
                 type: HostBinding,
                 args: ['class.reversed']
@@ -948,11 +957,11 @@ class TagComponent {
         this.model = { label: CommonConstants.EMPTY_STRING };
     }
 }
-TagComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: TagComponent, selector: "sfc-tag", inputs: { model: "model" }, ngImport: i0, template: "<div class=\"container\">\r\n    <a class=\"tag\">\r\n        <div class=\"content\">\r\n            <fa-icon *ngIf=\"model.icon\" [icon]=\"model.icon\"></fa-icon>\r\n            <span>{{model.label}}</span>\r\n        </div>\r\n    </a>\r\n</div>", styles: [":host{display:inline-flex;margin:0 .18em}:host .container{margin-top:.3em;font-size:.8em;-webkit-user-select:none;user-select:none}:host .container .tag{display:inline-flex;border-radius:1em;font-weight:700;color:#545e61;background-color:#f5f7fa;border:.125em solid transparent;padding:.3em}: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:#2bbbad;color:#fff}\n"], components: [{ type: i1$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TagComponent, decorators: [{
+TagComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TagComponent, selector: "sfc-tag", inputs: { model: "model" }, ngImport: i0, template: "<div class=\"container\">\r\n    <a class=\"tag\">\r\n        <div class=\"content\">\r\n            <fa-icon *ngIf=\"model.icon\" [icon]=\"model.icon\"></fa-icon>\r\n            <span>{{model.label}}</span>\r\n        </div>\r\n    </a>\r\n</div>", styles: [":host{display:inline-flex;margin:0 .18em}:host .container{margin-top:.3em;font-size:.8em;-webkit-user-select:none;user-select:none}:host .container .tag{display:inline-flex;border-radius:1em;font-weight:700;color:#545e61;background-color:#f5f7fa;border:.125em solid transparent;padding:.3em}:host .container .tag .content{display:flex;align-items:center;text-align:center;padding:0 .8em}:host .container .tag .content fa-icon{margin-right:.18em}:host .container:hover .tag{background-color:#ffce54;color:#fff}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TagComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-tag', template: "<div class=\"container\">\r\n    <a class=\"tag\">\r\n        <div class=\"content\">\r\n            <fa-icon *ngIf=\"model.icon\" [icon]=\"model.icon\"></fa-icon>\r\n            <span>{{model.label}}</span>\r\n        </div>\r\n    </a>\r\n</div>", styles: [":host{display:inline-flex;margin:0 .18em}:host .container{margin-top:.3em;font-size:.8em;-webkit-user-select:none;user-select:none}:host .container .tag{display:inline-flex;border-radius:1em;font-weight:700;color:#545e61;background-color:#f5f7fa;border:.125em solid transparent;padding:.3em}: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:#2bbbad;color:#fff}\n"] }]
+            args: [{ selector: 'sfc-tag', template: "<div class=\"container\">\r\n    <a class=\"tag\">\r\n        <div class=\"content\">\r\n            <fa-icon *ngIf=\"model.icon\" [icon]=\"model.icon\"></fa-icon>\r\n            <span>{{model.label}}</span>\r\n        </div>\r\n    </a>\r\n</div>", styles: [":host{display:inline-flex;margin:0 .18em}:host .container{margin-top:.3em;font-size:.8em;-webkit-user-select:none;user-select:none}:host .container .tag{display:inline-flex;border-radius:1em;font-weight:700;color:#545e61;background-color:#f5f7fa;border:.125em solid transparent;padding:.3em}: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
             }] } });
@@ -962,9 +971,9 @@ class TagsComponent {
         this.tags = [];
     }
 }
-TagsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TagsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TagsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: TagsComponent, selector: "sfc-tags", inputs: { tags: "tags" }, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"tags\">\r\n        <sfc-tag *ngFor=\"let tag of tags\" [model]=\"tag\"></sfc-tag>\r\n    </div>\r\n</div>", components: [{ type: TagComponent, selector: "sfc-tag", inputs: ["model"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TagsComponent, decorators: [{
+TagsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TagsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TagsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TagsComponent, selector: "sfc-tags", inputs: { tags: "tags" }, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"tags\">\r\n        <sfc-tag *ngFor=\"let tag of tags\" [model]=\"tag\"></sfc-tag>\r\n    </div>\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: TagComponent, selector: "sfc-tag", inputs: ["model"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TagsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sfc-tags', template: "<div class=\"container\">\r\n    <div class=\"tags\">\r\n        <sfc-tag *ngFor=\"let tag of tags\" [model]=\"tag\"></sfc-tag>\r\n    </div>\r\n</div>" }]
         }], propDecorators: { tags: [{
@@ -982,9 +991,9 @@ class SliderItemComponent {
         this.model = { imageSrc: CommonConstants.EMPTY_STRING };
     }
 }
-SliderItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SliderItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SliderItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SliderItemComponent, selector: "sfc-slider-item", inputs: { model: "model" }, ngImport: i0, template: "<li>\r\n    <div>\r\n        <h2>{{model.title}}</h2>\r\n        <span>{{model.subTitle}}</span>\r\n    </div>\r\n    <img [src]=\"model.imageSrc\">\r\n</li>", styles: [":host{display:inline-block}:host li{position:relative;width:37.5em;height:25em;background:#434a54}:host li div{position:absolute;top:10%;left:6%;-webkit-user-select:none;user-select:none;font-size:1.5em}:host li div h2{margin:0;text-transform:uppercase}:host li img{width:100%;height:100%;object-fit:fill}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SliderItemComponent, decorators: [{
+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" }, ngImport: i0, template: "<li>\r\n    <div>\r\n        <h2>{{model.title}}</h2>\r\n        <span>{{model.subTitle}}</span>\r\n    </div>\r\n    <img [src]=\"model.imageSrc\">\r\n</li>", styles: [":host{display:inline-block}:host li{position:relative;width:37.5em;height:25em;background:#434a54}:host li div{position:absolute;top:10%;left:6%;-webkit-user-select:none;user-select:none;font-size:1.5em}:host li div h2{margin:0;text-transform:uppercase}:host li img{width:100%;height:100%;object-fit:fill}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SliderItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sfc-slider-item', template: "<li>\r\n    <div>\r\n        <h2>{{model.title}}</h2>\r\n        <span>{{model.subTitle}}</span>\r\n    </div>\r\n    <img [src]=\"model.imageSrc\">\r\n</li>", styles: [":host{display:inline-block}:host li{position:relative;width:37.5em;height:25em;background:#434a54}:host li div{position:absolute;top:10%;left:6%;-webkit-user-select:none;user-select:none;font-size:1.5em}:host li div h2{margin:0;text-transform:uppercase}:host li img{width:100%;height:100%;object-fit:fill}\n"] }]
         }], propDecorators: { model: [{
@@ -1061,9 +1070,9 @@ class SliderAutomaticService {
             this.start();
     }
 }
-SliderAutomaticService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SliderAutomaticService, deps: [{ token: SliderService }], target: i0.ɵɵFactoryTarget.Injectable });
-SliderAutomaticService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SliderAutomaticService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SliderAutomaticService, decorators: [{
+SliderAutomaticService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SliderAutomaticService, deps: [{ token: SliderService }], target: i0.ɵɵFactoryTarget.Injectable });
+SliderAutomaticService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SliderAutomaticService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SliderAutomaticService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: SliderService }]; } });
 
@@ -1086,11 +1095,11 @@ class SliderButtonComponent {
             : this.ICON_PREVIOUS;
     }
 }
-SliderButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SliderButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SliderButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SliderButtonComponent, selector: "sfc-slider-button", inputs: { type: "type", active: "active" }, host: { properties: { "class": "this.type", "class.active": "this.active" } }, ngImport: i0, template: "<div>\r\n    <fa-icon [icon]=\"icon\"></fa-icon>\r\n</div>", styles: [":host{position:absolute;width:3em;height:3.7em;top:50%;margin-top:-1.5em;line-height:3.7em;text-align:center;cursor:pointer;background:#0000001a;transition:all .1s ease}:host:hover{background:#0000004d}:host.next{right:-3em;border-radius:.43em 0 0 .43em}:host.previous{left:-3em;border-radius:0 .43em .43em 0}:host.active.next{right:0}:host.active.previous{left:0}\n"], components: [{ type: i1$1.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: "13.2.7", ngImport: i0, type: SliderButtonComponent, decorators: [{
+SliderButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SliderButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SliderButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SliderButtonComponent, selector: "sfc-slider-button", inputs: { type: "type", active: "active" }, host: { properties: { "class": "this.type", "class.active": "this.active" } }, ngImport: i0, template: "<div>\r\n    <fa-icon [icon]=\"icon\"></fa-icon>\r\n</div>", styles: [":host{position:absolute;width:3em;height:3.7em;top:50%;margin-top:-1.5em;line-height:3.7em;text-align:center;cursor:pointer;background:rgba(0,0,0,.1019607843);transition:all .1s ease}:host:hover{background:rgba(0,0,0,.3019607843)}:host.next{right:-3em;border-radius:.43em 0 0 .43em}:host.previous{left:-3em;border-radius:0 .43em .43em 0}:host.active.next{right:0}:host.active.previous{left:0}\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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SliderButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-slider-button', template: "<div>\r\n    <fa-icon [icon]=\"icon\"></fa-icon>\r\n</div>", styles: [":host{position:absolute;width:3em;height:3.7em;top:50%;margin-top:-1.5em;line-height:3.7em;text-align:center;cursor:pointer;background:#0000001a;transition:all .1s ease}:host:hover{background:#0000004d}:host.next{right:-3em;border-radius:.43em 0 0 .43em}:host.previous{left:-3em;border-radius:0 .43em .43em 0}:host.active.next{right:0}:host.active.previous{left:0}\n"] }]
+            args: [{ selector: 'sfc-slider-button', template: "<div>\r\n    <fa-icon [icon]=\"icon\"></fa-icon>\r\n</div>", styles: [":host{position:absolute;width:3em;height:3.7em;top:50%;margin-top:-1.5em;line-height:3.7em;text-align:center;cursor:pointer;background:rgba(0,0,0,.1019607843);transition:all .1s ease}:host:hover{background:rgba(0,0,0,.3019607843)}:host.next{right:-3em;border-radius:.43em 0 0 .43em}:host.previous{left:-3em;border-radius:0 .43em .43em 0}:host.active.next{right:0}:host.active.previous{left:0}\n"] }]
         }], propDecorators: { type: [{
                 type: Input
             }, {
@@ -1116,9 +1125,9 @@ class SliderPaginationComponent {
         this.selected.emit(index);
     }
 }
-SliderPaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SliderPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SliderPaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SliderPaginationComponent, selector: "sfc-slider-pagination", inputs: { count: "count", index: "index" }, outputs: { selected: "selected" }, ngImport: i0, template: "<ul>\r\n    <li *ngFor=\"let _ of items; let itemIndex = index;\" [class.active]=\"itemIndex === index\"\r\n        (click)=\"selectItem(itemIndex)\"></li>\r\n</ul>", styles: [":host{display:inline-block}:host ul{display:flex;align-items:center;margin:0;padding:0}:host ul li{margin:.3em;display:inline-block;width:.6em;height:.6em;border-radius:50%;background:#fff;opacity:.5;cursor:pointer;transition:all .3s cubic-bezier(1,.01,.32,1)}:host ul li.active{transform:scale(1.7);opacity:1}\n"], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SliderPaginationComponent, decorators: [{
+SliderPaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SliderPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SliderPaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SliderPaginationComponent, selector: "sfc-slider-pagination", inputs: { count: "count", index: "index" }, outputs: { selected: "selected" }, ngImport: i0, template: "<ul>\r\n    <li *ngFor=\"let _ of items; let itemIndex = index;\" [class.active]=\"itemIndex === index\"\r\n        (click)=\"selectItem(itemIndex)\"></li>\r\n</ul>", styles: [":host{display:inline-block}:host ul{display:flex;align-items:center;margin:0;padding:0}:host ul li{margin:.3em;display:inline-block;width:.6em;height:.6em;border-radius:50%;background:#fff;opacity:.5;cursor:pointer;transition:all .3s cubic-bezier(1,.01,.32,1)}:host ul li.active{transform:scale(1.7);opacity:1}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SliderPaginationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sfc-slider-pagination', template: "<ul>\r\n    <li *ngFor=\"let _ of items; let itemIndex = index;\" [class.active]=\"itemIndex === index\"\r\n        (click)=\"selectItem(itemIndex)\"></li>\r\n</ul>", styles: [":host{display:inline-block}:host ul{display:flex;align-items:center;margin:0;padding:0}:host ul li{margin:.3em;display:inline-block;width:.6em;height:.6em;border-radius:50%;background:#fff;opacity:.5;cursor:pointer;transition:all .3s cubic-bezier(1,.01,.32,1)}:host ul li.active{transform:scale(1.7);opacity:1}\n"] }]
         }], propDecorators: { count: [{
@@ -1202,9 +1211,9 @@ class SliderComponent {
         this.automaticService.toggle();
     }
 }
-SliderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SliderComponent, deps: [{ token: SliderService }, { token: SliderAutomaticService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-SliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SliderComponent, selector: "sfc-slider", inputs: { items: "items", type: "type", showCount: "showCount", pagination: "pagination" }, host: { listeners: { "mouseenter": "onEnter()", "mouseleave": "onLeave()" } }, providers: [SliderService, SliderAutomaticService], viewQueries: [{ propertyName: "slider", first: true, predicate: ["slider"], descendants: true }, { propertyName: "sliderItems", predicate: SliderItemComponent, descendants: true }], ngImport: i0, template: "<div class=\"container\">\r\n    <div *ngIf=\"vm$ | async as vm\" #slider class=\"slider\">\r\n        <ul [ngStyle]=\"vm.styles\">\r\n            <sfc-slider-item *ngFor=\"let item of items\" [model]=\"item\"></sfc-slider-item>\r\n        </ul>\r\n\r\n        <div 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\" class=\"automatic\" (click)=\"toggleAutomatic()\">\r\n                <fa-icon [icon]=\"automaticIcon\"></fa-icon>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host .container{width:37.5em;height:25em;color:#fff}:host .container .slider{height:inherit;position:relative;overflow:hidden;background:#434a54;display:flex;justify-content:center;align-items:flex-end}:host .container .slider>ul{position:absolute;list-style:none;margin:0;padding:0;height:inherit;transition:all .3s cubic-bezier(1,.01,.32,1)}:host .container .slider .counter{top:10%;right:6%;position:absolute;font-weight:700;-webkit-user-select:none;user-select:none}:host .container .slider .actions{margin-bottom:1em;cursor:pointer;display:flex;flex-direction:column;justify-content:center;position:relative;align-items:center}:host .container .slider .actions .automatic{margin-top:.3em}\n"], components: [{ type: SliderItemComponent, selector: "sfc-slider-item", inputs: ["model"] }, { type: SliderButtonComponent, selector: "sfc-slider-button", inputs: ["type", "active"] }, { type: SliderPaginationComponent, selector: "sfc-slider-pagination", inputs: ["count", "index"], outputs: ["selected"] }, { type: i1$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i2.AsyncPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SliderComponent, decorators: [{
+SliderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SliderComponent, deps: [{ token: SliderService }, { token: SliderAutomaticService }, { 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" }, host: { listeners: { "mouseenter": "onEnter()", "mouseleave": "onLeave()" } }, providers: [SliderService, SliderAutomaticService], viewQueries: [{ propertyName: "slider", first: true, predicate: ["slider"], descendants: true }, { propertyName: "sliderItems", predicate: SliderItemComponent, descendants: true }], ngImport: i0, template: "<div class=\"container\">\r\n    <div *ngIf=\"vm$ | async as vm\" #slider class=\"slider\">\r\n        <ul [ngStyle]=\"vm.styles\">\r\n            <sfc-slider-item *ngFor=\"let item of items\" [model]=\"item\"></sfc-slider-item>\r\n        </ul>\r\n\r\n        <div 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\" class=\"automatic\" (click)=\"toggleAutomatic()\">\r\n                <fa-icon [icon]=\"automaticIcon\"></fa-icon>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host .container{width:37.5em;height:25em;color:#fff}:host .container .slider{height:inherit;position:relative;overflow:hidden;background:#434a54;display:flex;justify-content:center;align-items:flex-end}:host .container .slider>ul{position:absolute;list-style:none;margin:0;padding:0;height:inherit;transition:all .3s cubic-bezier(1,.01,.32,1)}:host .container .slider .counter{top:10%;right:6%;position:absolute;font-weight:700;-webkit-user-select:none;user-select:none}:host .container .slider .actions{margin-bottom:1em;cursor:pointer;display:flex;flex-direction:column;justify-content:center;position:relative;align-items:center}:host .container .slider .actions .automatic{margin-top:.3em}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: 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: 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\">\r\n    <div *ngIf=\"vm$ | async as vm\" #slider class=\"slider\">\r\n        <ul [ngStyle]=\"vm.styles\">\r\n            <sfc-slider-item *ngFor=\"let item of items\" [model]=\"item\"></sfc-slider-item>\r\n        </ul>\r\n\r\n        <div 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\" class=\"automatic\" (click)=\"toggleAutomatic()\">\r\n                <fa-icon [icon]=\"automaticIcon\"></fa-icon>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host .container{width:37.5em;height:25em;color:#fff}:host .container .slider{height:inherit;position:relative;overflow:hidden;background:#434a54;display:flex;justify-content:center;align-items:flex-end}:host .container .slider>ul{position:absolute;list-style:none;margin:0;padding:0;height:inherit;transition:all .3s cubic-bezier(1,.01,.32,1)}:host .container .slider .counter{top:10%;right:6%;position:absolute;font-weight:700;-webkit-user-select:none;user-select:none}:host .container .slider .actions{margin-bottom:1em;cursor:pointer;display:flex;flex-direction:column;justify-content:center;position:relative;align-items:center}:host .container .slider .actions .automatic{margin-top:.3em}\n"] }]
         }], ctorParameters: function () { return [{ type: SliderService }, { type: SliderAutomaticService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { items: [{
@@ -1245,15 +1254,12 @@ class TimelineItemComponent {
     get period() {
         return this.model.period || false;
     }
-    get showImage() {
-        return !isNullOrEmptyString(this.model.image) && !isDefined(this.model.icon);
-    }
 }
-TimelineItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TimelineItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TimelineItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", 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            <fa-icon *ngIf=\"model.icon\" [icon]=\"model.icon\"></fa-icon>\r\n            <img *ngIf=\"showImage\" [src]=\"model.image\">\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}: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:#ccd1d9}: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;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:#ccd1d9}:host .container .marker .delimeter{display:none;width:1em;bottom:0;position:absolute;border-bottom:.18em solid}: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:#ccd1d9}:host .container .content{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 fa-icon,:host .container .content img{margin-right:.31em}:host .container .content img{width:1em}: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: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:#ccd1d9}: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 span{margin:0;font-size:1.875em}:host:not(.period):hover .container .marker:before{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: 992px){: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"], components: [{ type: i1$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TimelineItemComponent, decorators: [{
+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}: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;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}: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{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: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{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            <fa-icon *ngIf=\"model.icon\" [icon]=\"model.icon\"></fa-icon>\r\n            <img *ngIf=\"showImage\" [src]=\"model.image\">\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}: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:#ccd1d9}: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;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:#ccd1d9}:host .container .marker .delimeter{display:none;width:1em;bottom:0;position:absolute;border-bottom:.18em solid}: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:#ccd1d9}:host .container .content{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 fa-icon,:host .container .content img{margin-right:.31em}:host .container .content img{width:1em}: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: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:#ccd1d9}: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 span{margin:0;font-size:1.875em}:host:not(.period):hover .container .marker:before{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: 992px){: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"] }]
+            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}: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;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}: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{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: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{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"] }]
         }], propDecorators: { model: [{
                 type: Input
             }], position: [{
@@ -1269,9 +1275,9 @@ class TimelineComponent {
         this.items = [];
     }
 }
-TimelineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TimelineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: TimelineComponent, selector: "sfc-timeline", inputs: { items: "items" }, ngImport: i0, template: "<div class=\"container\">\r\n    <ul class=\"timeline\">\r\n        <sfc-timeline-item *ngFor=\"let item of items\" [model]=\"item\"></sfc-timeline-item>\r\n    </ul>\r\n</div>", styles: [":host{display:block}:host .container .timeline{line-height:1.4em;list-style:none;margin:0;padding:0}:host .container .timeline ::ng-deep sfc-timeline-item:first-child.period .container{padding-top:0}:host .container .timeline ::ng-deep sfc-timeline-item:first-child.period .container .marker:before{border-top:none!important}:host .container .timeline ::ng-deep sfc-timeline-item:last-child .delimeter{display:block}\n"], components: [{ type: TimelineItemComponent, selector: "sfc-timeline-item", inputs: ["model"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TimelineComponent, decorators: [{
+TimelineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TimelineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TimelineComponent, selector: "sfc-timeline", inputs: { items: "items" }, ngImport: i0, template: "<div class=\"container\">\r\n    <ul class=\"timeline\">\r\n        <sfc-timeline-item *ngFor=\"let item of items\" [model]=\"item\"></sfc-timeline-item>\r\n    </ul>\r\n</div>", styles: [":host{display:block}:host .container .timeline{line-height:1.4em;list-style:none;margin:0;padding:0}:host .container .timeline ::ng-deep sfc-timeline-item:first-child.period .container{padding-top:0}:host .container .timeline ::ng-deep sfc-timeline-item:first-child.period .container .marker:before{border-top:none!important}:host .container .timeline ::ng-deep sfc-timeline-item:last-child .delimeter{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: TimelineItemComponent, selector: "sfc-timeline-item", inputs: ["model"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimelineComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sfc-timeline', template: "<div class=\"container\">\r\n    <ul class=\"timeline\">\r\n        <sfc-timeline-item *ngFor=\"let item of items\" [model]=\"item\"></sfc-timeline-item>\r\n    </ul>\r\n</div>", styles: [":host{display:block}:host .container .timeline{line-height:1.4em;list-style:none;margin:0;padding:0}:host .container .timeline ::ng-deep sfc-timeline-item:first-child.period .container{padding-top:0}:host .container .timeline ::ng-deep sfc-timeline-item:first-child.period .container .marker:before{border-top:none!important}:host .container .timeline ::ng-deep sfc-timeline-item:last-child .delimeter{display:block}\n"] }]
         }], propDecorators: { items: [{
@@ -1301,9 +1307,9 @@ class NotificationContentComponent {
         return !isNullOrEmptyString(this.model.image) && !isDefined(this.model.icon);
     }
 }
-NotificationContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NotificationContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NotificationContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", 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"], components: [{ type: i1$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i1.ButtonComponent, selector: "sfc-button", inputs: ["text", "iconBefore", "iconAfter", "disabled", "types"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NotificationContentComponent, decorators: [{
+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: 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"] }]
         }], propDecorators: { type: [{
@@ -1349,9 +1355,9 @@ class NotificationComponent {
         this.closed.emit();
     }
 }
-NotificationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NotificationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", 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{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"], components: [{ type: i1.CloseComponent, selector: "sfc-close" }, { type: i1.TemplateContentComponent, selector: "sfc-template-content", inputs: ["contextData", "referenceContent", "templateType", "templatesContent", "defaultContent"] }, { type: NotificationContentComponent, selector: "sfc-notification-content", inputs: ["type", "model"], outputs: ["buttonClicked"] }], directives: [{ type: i1.DestroyParentDirective, selector: "[sfcDestroyParent]", inputs: ["sfcDestroyParent", "delay"] }, { type: i1.ShowHideElementDirective, selector: "[sfcShowHideElement]", inputs: ["sfcShowHideElement", "delay"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NotificationComponent, decorators: [{
+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{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{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"] }]
         }], propDecorators: { showClose: [{
@@ -1483,9 +1489,9 @@ class ChartThemeService {
         return this.model;
     }
 }
-ChartThemeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ChartThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ChartThemeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ChartThemeService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ChartThemeService, decorators: [{
+ChartThemeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ChartThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ChartThemeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ChartThemeService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ChartThemeService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1566,9 +1572,9 @@ class ChartSettingsService {
         return colors;
     }
 }
-ChartSettingsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ChartSettingsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ChartSettingsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ChartSettingsService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ChartSettingsService, decorators: [{
+ChartSettingsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ChartSettingsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ChartSettingsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ChartSettingsService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ChartSettingsService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1663,11 +1669,11 @@ class ChartComponent {
         }
     }
 }
-ChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ChartComponent, deps: [{ token: i0.NgZone }, { token: ChartThemeService }, { token: ChartSettingsService }], target: i0.ɵɵFactoryTarget.Component });
-ChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: ChartComponent, selector: "sfc-chart", inputs: { type: "type", data: "data", options: "options", plugins: "plugins", labels: "labels", datasets: "datasets", chartOptions: "chartOptions", theme: "theme" }, viewQueries: [{ propertyName: "canvas", first: true, predicate: ["chart"], descendants: true }], ngImport: i0, template: "<canvas #chart></canvas>", styles: [":host{height:inherit;width:inherit}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ChartComponent, decorators: [{
+ChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ChartComponent, deps: [{ token: i0.NgZone }, { token: ChartThemeService }, { token: ChartSettingsService }], target: i0.ɵɵFactoryTarget.Component });
+ChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ChartComponent, selector: "sfc-chart", inputs: { type: "type", data: "data", options: "options", plugins: "plugins", labels: "labels", datasets: "datasets", chartOptions: "chartOptions", theme: "theme" }, viewQueries: [{ propertyName: "canvas", first: true, predicate: ["chart"], descendants: true }], ngImport: i0, template: "<canvas #chart></canvas>", styles: [":host{height:inherit;width:inherit}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-chart', styles: [':host { height: inherit; width: inherit;}'], template: "<canvas #chart></canvas>" }]
+            args: [{ selector: 'sfc-chart', template: "<canvas #chart></canvas>", styles: [":host{height:inherit;width:inherit}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: ChartThemeService }, { type: ChartSettingsService }]; }, propDecorators: { type: [{
                 type: Input
             }], data: [{
@@ -1714,9 +1720,9 @@ class ColumnsToggleService {
         this.toggleSubject.next();
     }
 }
-ColumnsToggleService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ColumnsToggleService, deps: [{ token: WINDOW }, { token: i1.ResizeService }], target: i0.ɵɵFactoryTarget.Injectable });
-ColumnsToggleService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ColumnsToggleService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ColumnsToggleService, decorators: [{
+ColumnsToggleService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ColumnsToggleService, deps: [{ token: WINDOW }, { token: i1$1.ResizeService }], target: i0.ɵɵFactoryTarget.Injectable });
+ColumnsToggleService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ColumnsToggleService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ColumnsToggleService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1725,7 +1731,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
         return [{ type: Window, decorators: [{
                         type: Inject,
                         args: [WINDOW]
-                    }] }, { type: i1.ResizeService }];
+                    }] }, { type: i1$1.ResizeService }];
     } });
 
 class TableSelectService {
@@ -1740,9 +1746,9 @@ class TableSelectService {
         this.selectSubject.next({ index, selected });
     }
 }
-TableSelectService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TableSelectService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-TableSelectService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TableSelectService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TableSelectService, decorators: [{
+TableSelectService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TableSelectService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+TableSelectService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TableSelectService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TableSelectService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1772,41 +1778,25 @@ var TableTemplate;
     TableTemplate["Card"] = "card";
 })(TableTemplate || (TableTemplate = {}));
 
-class ColumnsToggleConstants {
-}
-ColumnsToggleConstants.HIDE = {
-    LABEL: 'Hide',
-    ICON: faEyeSlash
-};
-ColumnsToggleConstants.SHOW = {
-    LABEL: 'Show',
-    ICON: faEye
-};
-
-class ColumnsToggleComponent {
-    constructor(service) {
-        this.service = service;
-    }
-    onToggle() {
-        this.service.toggle();
+class DefaultTableColumnComponent {
+    constructor() {
+        this.model = { name: CommonConstants.EMPTY_STRING, field: CommonConstants.EMPTY_STRING };
     }
-    ngOnInit() {
-        this.vm$ = this.service.showColumns$.pipe(map(show => {
-            return {
-                model: show ? ColumnsToggleConstants.HIDE : ColumnsToggleConstants.SHOW,
-                show: show
-            };
-        }));
+    get active() {
+        var _a;
+        return ((_a = this.model.sorting) === null || _a === void 0 ? void 0 : _a.active) || false;
     }
 }
-ColumnsToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ColumnsToggleComponent, deps: [{ token: ColumnsToggleService }], target: i0.ɵɵFactoryTarget.Component });
-ColumnsToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: ColumnsToggleComponent, selector: "sfc-columns-toggle", 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{font-size:.625em;font-weight:700;text-transform:uppercase;width:100%;text-align:end;display:none;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:#ccd1d9}:host .container:hover{color:#2bbbad}:host .container span.icon{position:absolute}:host .container span.label{padding-left:1.3em}@media all and (max-width: 767px){:host .container{display:block}}\n"], components: [{ type: i1$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.ShowHideElementDirective, selector: "[sfcShowHideElement]", inputs: ["sfcShowHideElement", "delay"] }], pipes: { "async": i2.AsyncPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ColumnsToggleComponent, decorators: [{
+DefaultTableColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DefaultTableColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DefaultTableColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DefaultTableColumnComponent, selector: "sfc-default-table-column", inputs: { model: "model" }, host: { properties: { "class.active": "this.active" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <div *ngIf=\"model.icon\" class=\"icon\">\r\n        <fa-icon [icon]=\"model.icon\"></fa-icon>\r\n    </div>\r\n    <div>\r\n        <span>{{model.name}}</span>\r\n    </div>\r\n</div>", styles: [":host{display:inline-block}:host.active{color:#ffce54}:host .container{text-transform:uppercase;font-size:.875em;font-weight:700;display:flex;align-items:center;justify-content:center;color:inherit;transition:color .3s}:host .container .icon{margin-right:5px}\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: DefaultTableColumnComponent, 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{font-size:.625em;font-weight:700;text-transform:uppercase;width:100%;text-align:end;display:none;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:#ccd1d9}:host .container:hover{color:#2bbbad}:host .container span.icon{position:absolute}:host .container span.label{padding-left:1.3em}@media all and (max-width: 767px){:host .container{display:block}}\n"] }]
-        }], ctorParameters: function () { return [{ type: ColumnsToggleService }]; }, propDecorators: { onToggle: [{
-                type: HostListener,
-                args: ['click']
+            args: [{ selector: 'sfc-default-table-column', template: "<div class=\"container\">\r\n    <div *ngIf=\"model.icon\" class=\"icon\">\r\n        <fa-icon [icon]=\"model.icon\"></fa-icon>\r\n    </div>\r\n    <div>\r\n        <span>{{model.name}}</span>\r\n    </div>\r\n</div>", styles: [":host{display:inline-block}:host.active{color:#ffce54}:host .container{text-transform:uppercase;font-size:.875em;font-weight:700;display:flex;align-items:center;justify-content:center;color:inherit;transition:color .3s}:host .container .icon{margin-right:5px}\n"] }]
+        }], propDecorators: { model: [{
+                type: Input
+            }], active: [{
+                type: HostBinding,
+                args: [`class.${UIClass.Active}`]
             }] } });
 
 class SelectableTableColumnComponent {
@@ -1819,11 +1809,11 @@ class SelectableTableColumnComponent {
         this.service.selectAll(this.selected);
     }
 }
-SelectableTableColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SelectableTableColumnComponent, deps: [{ token: TableSelectService }], target: i0.ɵɵFactoryTarget.Component });
-SelectableTableColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", 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\"></sfc-checkmark>\r\n    <span>ALL</span>\r\n</div>", styles: [":host{display:inline-block}:host:hover{color:#2bbbad}:host:hover span{color:#2bbbad}:host .container{text-transform:uppercase;font-size:1em;font-weight:700;display:flex;align-items:center;justify-content:center;transition:color .3s;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:#ccd1d9}:host .container span{padding-left:.31em}\n"], components: [{ type: i1.CheckmarkComponent, selector: "sfc-checkmark", inputs: ["active", "icon"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SelectableTableColumnComponent, decorators: [{
+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\"></sfc-checkmark>\r\n    <span>ALL</span>\r\n</div>", styles: [":host{display:inline-block}:host:hover{color:#ffce54}:host:hover span{color:#ffce54}:host .container{text-transform:uppercase;font-size:1em;font-weight:700;display:flex;align-items:center;justify-content:center;transition:color .3s;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 span{padding-left:.31em}\n"], dependencies: [{ kind: "component", type: i1$1.CheckmarkComponent, selector: "sfc-checkmark", inputs: ["active", "disabled", "icon", "type", "showNotActive"] }] });
+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\"></sfc-checkmark>\r\n    <span>ALL</span>\r\n</div>", styles: [":host{display:inline-block}:host:hover{color:#2bbbad}:host:hover span{color:#2bbbad}:host .container{text-transform:uppercase;font-size:1em;font-weight:700;display:flex;align-items:center;justify-content:center;transition:color .3s;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:#ccd1d9}:host .container span{padding-left:.31em}\n"] }]
+            args: [{ selector: 'sfc-selectable-table-column', template: "<div class=\"container\">\r\n    <sfc-checkmark [active]=\"selected\"></sfc-checkmark>\r\n    <span>ALL</span>\r\n</div>", styles: [":host{display:inline-block}:host:hover{color:#ffce54}:host:hover span{color:#ffce54}:host .container{text-transform:uppercase;font-size:1em;font-weight:700;display:flex;align-items:center;justify-content:center;transition:color .3s;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 span{padding-left:.31em}\n"] }]
         }], ctorParameters: function () { return [{ type: TableSelectService }]; }, propDecorators: { selected: [{
                 type: Input
             }, {
@@ -1834,25 +1824,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                 args: ['click']
             }] } });
 
-class DefaultTableColumnComponent {
-    constructor() {
-        this.model = { name: CommonConstants.EMPTY_STRING, field: CommonConstants.EMPTY_STRING };
+class ColumnsToggleConstants {
+}
+ColumnsToggleConstants.HIDE = {
+    LABEL: 'Hide',
+    ICON: faEyeSlash
+};
+ColumnsToggleConstants.SHOW = {
+    LABEL: 'Show',
+    ICON: faEye
+};
+
+class ColumnsToggleComponent {
+    constructor(service) {
+        this.service = service;
     }
-    get active() {
-        var _a;
-        return ((_a = this.model.sorting) === null || _a === void 0 ? void 0 : _a.active) || false;
+    onToggle() {
+        this.service.toggle();
+    }
+    ngOnInit() {
+        this.vm$ = this.service.showColumns$.pipe(map(show => {
+            return {
+                model: show ? ColumnsToggleConstants.HIDE : ColumnsToggleConstants.SHOW,
+                show: show
+            };
+        }));
     }
 }
-DefaultTableColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DefaultTableColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DefaultTableColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: DefaultTableColumnComponent, selector: "sfc-default-table-column", inputs: { model: "model" }, host: { properties: { "class.active": "this.active" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <div *ngIf=\"model.icon\" class=\"icon\">\r\n        <fa-icon [icon]=\"model.icon\"></fa-icon>\r\n    </div>\r\n    <div>\r\n        <span>{{model.name}}</span>\r\n    </div>\r\n</div>", styles: [":host{display:inline-block}:host.active{color:#2bbbad}:host .container{text-transform:uppercase;font-size:.875em;font-weight:700;display:flex;align-items:center;justify-content:center;color:inherit;transition:color .3s}:host .container .icon{margin-right:5px}\n"], components: [{ type: i1$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DefaultTableColumnComponent, decorators: [{
+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", 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{font-size:.625em;font-weight:700;text-transform:uppercase;width:100%;text-align:end;display:none;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:1.3em}@media all and (max-width: 767px){:host .container{display:block}}\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-default-table-column', template: "<div class=\"container\">\r\n    <div *ngIf=\"model.icon\" class=\"icon\">\r\n        <fa-icon [icon]=\"model.icon\"></fa-icon>\r\n    </div>\r\n    <div>\r\n        <span>{{model.name}}</span>\r\n    </div>\r\n</div>", styles: [":host{display:inline-block}:host.active{color:#2bbbad}:host .container{text-transform:uppercase;font-size:.875em;font-weight:700;display:flex;align-items:center;justify-content:center;color:inherit;transition:color .3s}:host .container .icon{margin-right:5px}\n"] }]
-        }], propDecorators: { model: [{
-                type: Input
-            }], active: [{
-                type: HostBinding,
-                args: [`class.${UIClass.Active}`]
+            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{font-size:.625em;font-weight:700;text-transform:uppercase;width:100%;text-align:end;display:none;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:1.3em}@media all and (max-width: 767px){:host .container{display:block}}\n"] }]
+        }], ctorParameters: function () { return [{ type: ColumnsToggleService }]; }, propDecorators: { onToggle: [{
+                type: HostListener,
+                args: ['click']
             }] } });
 
 class BaseDefaultTableContentComponent {
@@ -1893,9 +1899,9 @@ class BaseDefaultTableContentComponent {
         return { index: this.model.index, selected: !this.model.dataModel.selected };
     }
 }
-BaseDefaultTableContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: BaseDefaultTableContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-BaseDefaultTableContentComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: BaseDefaultTableContentComponent, inputs: { model: "model", columns: "columns", selectOnClick: "selectOnClick", position: "position", columnWidth: "columnWidth" }, outputs: { selected: "selected" }, host: { listeners: { "click": "onContentClick()" }, properties: { "class.even": "this.even", "class.pointer": "this.pointer" } }, viewQueries: [{ propertyName: "columnCheckmark", first: true, predicate: ["columnCheckmark"], descendants: true }], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: BaseDefaultTableContentComponent, decorators: [{
+BaseDefaultTableContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BaseDefaultTableContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+BaseDefaultTableContentComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: BaseDefaultTableContentComponent, inputs: { model: "model", columns: "columns", selectOnClick: "selectOnClick", position: "position", columnWidth: "columnWidth" }, outputs: { selected: "selected" }, host: { listeners: { "click": "onContentClick()" }, properties: { "class.even": "this.even", "class.pointer": "this.pointer" } }, viewQueries: [{ propertyName: "columnCheckmark", first: true, predicate: ["columnCheckmark"], descendants: true }], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BaseDefaultTableContentComponent, decorators: [{
             type: Directive
         }], propDecorators: { model: [{
                 type: Input
@@ -1938,18 +1944,18 @@ class DefaultTableRowComponent extends BaseDefaultTableContentComponent {
         }
     }
 }
-DefaultTableRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DefaultTableRowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DefaultTableRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: DefaultTableRowComponent, selector: "sfc-default-table-row", usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\r\n    <div [ngStyle]=\"width\" [style.text-align]=\"position\" class=\"content-container\" *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.dataModel.selected || false\"></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.dataModel.data[column.field]}}</span>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{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);background-color:#f5f7fa}:host.even{background-color:#e6e9ed}:host.even:hover{background-color:#ccd1d9}:host:hover{background-color:#ccd1d9}:host.pointer{cursor:pointer}: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"], components: [{ type: i1.CheckmarkComponent, selector: "sfc-checkmark", inputs: ["active", "icon"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DefaultTableRowComponent, decorators: [{
+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 [ngStyle]=\"width\" [style.text-align]=\"position\" class=\"content-container\" *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.dataModel.selected || false\"></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.dataModel.data[column.field]}}</span>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{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);background-color:#f5f7fa}:host.even{background-color:#e6e9ed}:host.even:hover{background-color:#ccd1d9}:host:hover{background-color:#ccd1d9}:host.pointer{cursor:pointer}: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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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", "showNotActive"] }] });
+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 [ngStyle]=\"width\" [style.text-align]=\"position\" class=\"content-container\" *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.dataModel.selected || false\"></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.dataModel.data[column.field]}}</span>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{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);background-color:#f5f7fa}:host.even{background-color:#e6e9ed}:host.even:hover{background-color:#ccd1d9}:host:hover{background-color:#ccd1d9}:host.pointer{cursor:pointer}: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"] }]
         }] });
 
 class DefaultTableCardComponent extends BaseDefaultTableContentComponent {
 }
-DefaultTableCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DefaultTableCardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DefaultTableCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", 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.dataModel.selected || false\"></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.dataModel.data[column.field]}}</span>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{box-shadow:0 .625em 1.25em #00000030,0 .3753em .3753em #0000003b;transition:all .2s ease-in-out;border-radius:.75em;background-color:#f5f7fa}:host.even{background-color:#e6e9ed}:host.even:hover{background-color:#ccd1d9}:host:hover{background-color:#ccd1d9}:host.pointer{cursor:pointer}: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"], components: [{ type: i1.CheckmarkComponent, selector: "sfc-checkmark", inputs: ["active", "icon"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DefaultTableCardComponent, decorators: [{
+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.dataModel.selected || false\"></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.dataModel.data[column.field]}}</span>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{box-shadow:0 .625em 1.25em #00000030,0 .3753em .3753em #0000003b;transition:all .2s ease-in-out;border-radius:.75em;background-color:#f5f7fa}:host.even{background-color:#e6e9ed}:host.even:hover{background-color:#ccd1d9}:host:hover{background-color:#ccd1d9}:host.pointer{cursor:pointer}: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: i1$1.CheckmarkComponent, selector: "sfc-checkmark", inputs: ["active", "disabled", "icon", "type", "showNotActive"] }] });
+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.dataModel.selected || false\"></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.dataModel.data[column.field]}}</span>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{box-shadow:0 .625em 1.25em #00000030,0 .3753em .3753em #0000003b;transition:all .2s ease-in-out;border-radius:.75em;background-color:#f5f7fa}:host.even{background-color:#e6e9ed}:host.even:hover{background-color:#ccd1d9}:host:hover{background-color:#ccd1d9}:host.pointer{cursor:pointer}: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"] }]
         }] });
@@ -2098,7 +2104,7 @@ class TableComponent {
         return this.sortingService.sorting$.pipe(startWith(firstSortingColumn ? { id: firstSortingColumn.field, direction: ((_a = firstSortingColumn.sorting) === null || _a === void 0 ? void 0 : _a.direction) || SortingDirection.Ascending } : null));
     }
     getColumnWidth(windowWidth, columnsLength) {
-        if (windowWidth <= MediaLimits.Phone)
+        if (windowWidth <= MediaLimits.MobileLarge)
             return 1;
         if (windowWidth <= MediaLimits.Tablet)
             return Math.ceil(columnsLength / 2);
@@ -2139,16 +2145,16 @@ class TableComponent {
         });
     }
 }
-TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TableComponent, deps: [{ token: WINDOW }, { token: i1.PaginationService }, { token: TableSelectService }, { token: i1.SortingService }, { token: i0.ChangeDetectorRef }, { token: i1.ResizeService }, { token: ColumnsToggleService }, { token: i0.IterableDiffers }], target: i0.ɵɵFactoryTarget.Component });
-TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: TableComponent, selector: "sfc-table", inputs: { position: "position", delimeter: "delimeter", dataType: "dataType", dataToggle: "dataToggle", showColumns: "showColumns", pagination: "pagination", sequence: "sequence", expanded: "expanded", selectable: "selectable", selectOnClick: "selectOnClick", columnContent: "columnContent", rowContent: "rowContent", cardContent: "cardContent", data: "data", data$: "data$", columns: "columns" }, host: { properties: { "class": "this.dataType" } }, providers: [PaginationService, SortingService, TableSelectService, ColumnsToggleService, ResizeService], queries: [{ propertyName: "templates", predicate: TemplateReferenceDirective, read: TemplateReferenceDirective }], ngImport: i0, template: "<div class=\"container\" *ngIf=\"vm$ | async as vm\">\r\n    <div class=\"columns-container\">\r\n        <div class=\"columns-actions\">\r\n            <sfc-columns-toggle *ngIf=\"showColumns\"></sfc-columns-toggle>\r\n            <sfc-toggle-switcher *ngIf=\"dataToggle\" [active]=\"dataType === TableDataType.Cards\"\r\n                [leftModel]=\"Constants.TOGGLE_SWITCHER_LEFT_MODEL\" [rightModel]=\"Constants.TOGGLE_SWITCHER_RIGHT_MODEL\"\r\n                (click)=\"onDataTypeToggle()\">\r\n            </sfc-toggle-switcher>\r\n        </div>\r\n\r\n        <div *ngIf=\"vm.showColumns\" class=\"columns\">\r\n            <div class=\"column\" [ngStyle]=\"vm.columnStyle\" *ngFor=\"let column of vm.columns\">\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 *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>\r\n                </ng-container>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <sfc-delimeter *ngIf=\"delimeter\"></sfc-delimeter>\r\n\r\n    <div class=\"rows-container\">\r\n        <div class=\"row\" *ngFor=\"let item of vm.data\">\r\n\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: vm.columns, columnWidth: vm.columnWidth, position: position}\">\r\n                </sfc-template-content>\r\n\r\n                <ng-template #defaultRow>\r\n                    <sfc-default-table-row [columns]=\"vm.columns\" [model]=\"item\" [position]=\"position\"\r\n                        [columnWidth]=\"vm.columnWidth\" [selectOnClick]=\"selectOnClick\" (selected)=\"selectRow($event)\">\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\" [defaultContent]=\"defaultCard\"\r\n                    [contextData]=\"{model: item, columns: vm.columns}\">\r\n                </sfc-template-content>\r\n\r\n                <ng-template #defaultCard>\r\n                    <sfc-default-table-card [columns]=\"vm.columns\" [model]=\"item\" [selectOnClick]=\"selectOnClick\"\r\n                        (selected)=\"selectRow($event)\">\r\n                    </sfc-default-table-card>\r\n                </ng-template>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"pagination-container\">\r\n        <sfc-pagination *ngIf=\"pagination.enabled\" [limits]=\"false\" [full]=\"false\" [data$]=\"data$\"></sfc-pagination>\r\n    </div>\r\n</div>", styles: [":host .container{display:block;margin:2em auto;width:90%}: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 sfc-toggle-switcher{margin-left:auto}: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 .row{display:contents}\n"], components: [{ type: ColumnsToggleComponent, selector: "sfc-columns-toggle" }, { type: i1.ToggleSwitcherComponent, selector: "sfc-toggle-switcher", inputs: ["active", "leftModel", "rightModel"] }, { type: SelectableTableColumnComponent, selector: "sfc-selectable-table-column", inputs: ["selected"] }, { type: i1.SortingComponent, selector: "sfc-sorting", inputs: ["id", "model"] }, { type: i1.TemplateContentComponent, selector: "sfc-template-content", inputs: ["contextData", "referenceContent", "templateType", "templatesContent", "defaultContent"] }, { type: DefaultTableColumnComponent, selector: "sfc-default-table-column", inputs: ["model"] }, { type: i1.DelimeterComponent, selector: "sfc-delimeter" }, { type: DefaultTableRowComponent, selector: "sfc-default-table-row" }, { type: DefaultTableCardComponent, selector: "sfc-default-table-card" }, { type: i1.PaginationComponent, selector: "sfc-pagination", inputs: ["count", "full", "limits", "data$"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }], pipes: { "async": i2.AsyncPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TableComponent, decorators: [{
+TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TableComponent, deps: [{ token: WINDOW }, { token: i1$1.PaginationService }, { token: TableSelectService }, { token: i1$1.SortingService }, { token: i0.ChangeDetectorRef }, { token: i1$1.ResizeService }, { token: ColumnsToggleService }, { 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", pagination: "pagination", sequence: "sequence", expanded: "expanded", selectable: "selectable", selectOnClick: "selectOnClick", columnContent: "columnContent", rowContent: "rowContent", cardContent: "cardContent", data: "data", data$: "data$", columns: "columns" }, host: { properties: { "class": "this.dataType" } }, providers: [PaginationService, SortingService, TableSelectService, ColumnsToggleService, ResizeService], queries: [{ propertyName: "templates", predicate: TemplateReferenceDirective, read: TemplateReferenceDirective }], ngImport: i0, template: "<div class=\"container\" *ngIf=\"vm$ | async as vm\">\r\n    <div class=\"columns-container\">\r\n        <div class=\"columns-actions\">\r\n            <sfc-columns-toggle *ngIf=\"showColumns\"></sfc-columns-toggle>\r\n            <sfc-toggle-switcher *ngIf=\"dataToggle\" [active]=\"dataType === TableDataType.Cards\"\r\n                [leftModel]=\"Constants.TOGGLE_SWITCHER_LEFT_MODEL\" [rightModel]=\"Constants.TOGGLE_SWITCHER_RIGHT_MODEL\"\r\n                (click)=\"onDataTypeToggle()\">\r\n            </sfc-toggle-switcher>\r\n        </div>\r\n\r\n        <div *ngIf=\"vm.showColumns\" class=\"columns\">\r\n            <div class=\"column\" [ngStyle]=\"vm.columnStyle\" *ngFor=\"let column of vm.columns\">\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 *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>\r\n                </ng-container>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <sfc-delimeter *ngIf=\"delimeter\"></sfc-delimeter>\r\n\r\n    <div class=\"rows-container\">\r\n        <div class=\"row\" *ngFor=\"let item of vm.data\">\r\n\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: vm.columns, columnWidth: vm.columnWidth, position: position}\">\r\n                </sfc-template-content>\r\n\r\n                <ng-template #defaultRow>\r\n                    <sfc-default-table-row [columns]=\"vm.columns\" [model]=\"item\" [position]=\"position\"\r\n                        [columnWidth]=\"vm.columnWidth\" [selectOnClick]=\"selectOnClick\" (selected)=\"selectRow($event)\">\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\" [defaultContent]=\"defaultCard\"\r\n                    [contextData]=\"{model: item, columns: vm.columns}\">\r\n                </sfc-template-content>\r\n\r\n                <ng-template #defaultCard>\r\n                    <sfc-default-table-card [columns]=\"vm.columns\" [model]=\"item\" [selectOnClick]=\"selectOnClick\"\r\n                        (selected)=\"selectRow($event)\">\r\n                    </sfc-default-table-card>\r\n                </ng-template>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"pagination-container\">\r\n        <sfc-pagination *ngIf=\"pagination.enabled\" [limits]=\"false\" [full]=\"false\" [data$]=\"data$\"></sfc-pagination>\r\n    </div>\r\n</div>", styles: [":host .container{display:block;margin:2em auto;width:90%}: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 sfc-toggle-switcher{margin-left:auto}: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 .row{display:contents}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "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: ["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"] }, { kind: "component", type: i1$1.PaginationComponent, selector: "sfc-pagination", inputs: ["count", "full", "limits", "data$"] }, { kind: "component", type: i1$1.SortingComponent, selector: "sfc-sorting", inputs: ["id", "model"] }, { 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" }, { kind: "component", type: DefaultTableRowComponent, selector: "sfc-default-table-row" }, { kind: "component", type: DefaultTableCardComponent, selector: "sfc-default-table-card" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sfc-table', providers: [PaginationService, SortingService, TableSelectService, ColumnsToggleService, ResizeService], template: "<div class=\"container\" *ngIf=\"vm$ | async as vm\">\r\n    <div class=\"columns-container\">\r\n        <div class=\"columns-actions\">\r\n            <sfc-columns-toggle *ngIf=\"showColumns\"></sfc-columns-toggle>\r\n            <sfc-toggle-switcher *ngIf=\"dataToggle\" [active]=\"dataType === TableDataType.Cards\"\r\n                [leftModel]=\"Constants.TOGGLE_SWITCHER_LEFT_MODEL\" [rightModel]=\"Constants.TOGGLE_SWITCHER_RIGHT_MODEL\"\r\n                (click)=\"onDataTypeToggle()\">\r\n            </sfc-toggle-switcher>\r\n        </div>\r\n\r\n        <div *ngIf=\"vm.showColumns\" class=\"columns\">\r\n            <div class=\"column\" [ngStyle]=\"vm.columnStyle\" *ngFor=\"let column of vm.columns\">\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 *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>\r\n                </ng-container>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <sfc-delimeter *ngIf=\"delimeter\"></sfc-delimeter>\r\n\r\n    <div class=\"rows-container\">\r\n        <div class=\"row\" *ngFor=\"let item of vm.data\">\r\n\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: vm.columns, columnWidth: vm.columnWidth, position: position}\">\r\n                </sfc-template-content>\r\n\r\n                <ng-template #defaultRow>\r\n                    <sfc-default-table-row [columns]=\"vm.columns\" [model]=\"item\" [position]=\"position\"\r\n                        [columnWidth]=\"vm.columnWidth\" [selectOnClick]=\"selectOnClick\" (selected)=\"selectRow($event)\">\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\" [defaultContent]=\"defaultCard\"\r\n                    [contextData]=\"{model: item, columns: vm.columns}\">\r\n                </sfc-template-content>\r\n\r\n                <ng-template #defaultCard>\r\n                    <sfc-default-table-card [columns]=\"vm.columns\" [model]=\"item\" [selectOnClick]=\"selectOnClick\"\r\n                        (selected)=\"selectRow($event)\">\r\n                    </sfc-default-table-card>\r\n                </ng-template>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"pagination-container\">\r\n        <sfc-pagination *ngIf=\"pagination.enabled\" [limits]=\"false\" [full]=\"false\" [data$]=\"data$\"></sfc-pagination>\r\n    </div>\r\n</div>", styles: [":host .container{display:block;margin:2em auto;width:90%}: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 sfc-toggle-switcher{margin-left:auto}: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 .row{display:contents}\n"] }]
         }], ctorParameters: function () {
         return [{ type: Window, decorators: [{
                         type: Inject,
                         args: [WINDOW]
-                    }] }, { type: i1.PaginationService }, { type: TableSelectService }, { type: i1.SortingService }, { type: i0.ChangeDetectorRef }, { type: i1.ResizeService }, { type: ColumnsToggleService }, { type: i0.IterableDiffers }];
+                    }] }, { type: i1$1.PaginationService }, { type: TableSelectService }, { type: i1$1.SortingService }, { type: i0.ChangeDetectorRef }, { type: i1$1.ResizeService }, { type: ColumnsToggleService }, { type: i0.IterableDiffers }];
     }, propDecorators: { position: [{
                 type: Input
             }], delimeter: [{
@@ -2212,9 +2218,9 @@ class ExpandedTableRowComponent extends BaseDefaultTableContentComponent {
         };
     }
 }
-ExpandedTableRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ExpandedTableRowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ExpandedTableRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", 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{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"], components: [{ type: i1.TemplateContentComponent, selector: "sfc-template-content", inputs: ["contextData", "referenceContent", "templateType", "templatesContent", "defaultContent"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ExpandedTableRowComponent, decorators: [{
+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{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{width:100%;cursor:pointer;-webkit-user-select:none;user-select:none}:host .expanded{max-height:0;overflow:hidden}:host.expanded .expanded{max-height:3000px}\n"] }]
         }], propDecorators: { expanded: [{
@@ -2279,9 +2285,9 @@ class CarouselSlideDirective {
     ;
     get dataMerge() { return this._dataMerge; }
 }
-CarouselSlideDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CarouselSlideDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-CarouselSlideDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: CarouselSlideDirective, selector: "ng-template[sfcCarouselSlide]", inputs: { id: "id", dataMerge: "dataMerge", width: "width" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CarouselSlideDirective, decorators: [{
+CarouselSlideDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CarouselSlideDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+CarouselSlideDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: CarouselSlideDirective, selector: "ng-template[sfcCarouselSlide]", inputs: { id: "id", dataMerge: "dataMerge", width: "width" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CarouselSlideDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ng-template[sfcCarouselSlide]' }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; }, propDecorators: { id: [{
@@ -3031,9 +3037,9 @@ class CarouselService {
         });
     }
 }
-CarouselService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CarouselService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-CarouselService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CarouselService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CarouselService, decorators: [{
+CarouselService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CarouselService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+CarouselService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CarouselService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CarouselService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -3110,9 +3116,9 @@ class CarouselAnimateService {
     }
     ;
 }
-CarouselAnimateService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CarouselAnimateService, deps: [{ token: CarouselService }], target: i0.ɵɵFactoryTarget.Injectable });
-CarouselAnimateService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CarouselAnimateService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CarouselAnimateService, decorators: [{
+CarouselAnimateService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CarouselAnimateService, deps: [{ token: CarouselService }], target: i0.ɵɵFactoryTarget.Injectable });
+CarouselAnimateService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CarouselAnimateService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CarouselAnimateService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -3227,9 +3233,9 @@ class CarouselAutoplayService {
         of('translated').pipe(switchMap(() => this.carouselService.translatedState), first(), filter(() => this.isArtificialAutoplayTimeout), tap(() => this.setAutoPlayInterval())).subscribe(() => { });
     }
 }
-CarouselAutoplayService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CarouselAutoplayService, deps: [{ token: CarouselService }, { token: WINDOW }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
-CarouselAutoplayService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CarouselAutoplayService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CarouselAutoplayService, decorators: [{
+CarouselAutoplayService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CarouselAutoplayService, deps: [{ token: CarouselService }, { token: WINDOW }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
+CarouselAutoplayService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CarouselAutoplayService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CarouselAutoplayService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -3289,9 +3295,9 @@ class CarouselLazyLoadService {
         this.carouselService.slidesModel[position].load = true;
     }
 }
-CarouselLazyLoadService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CarouselLazyLoadService, deps: [{ token: CarouselService }], target: i0.ɵɵFactoryTarget.Injectable });
-CarouselLazyLoadService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CarouselLazyLoadService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CarouselLazyLoadService, decorators: [{
+CarouselLazyLoadService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CarouselLazyLoadService, deps: [{ token: CarouselService }], target: i0.ɵɵFactoryTarget.Injectable });
+CarouselLazyLoadService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CarouselLazyLoadService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CarouselLazyLoadService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -3494,9 +3500,9 @@ class CarouselNavigationService {
     }
     ;
 }
-CarouselNavigationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CarouselNavigationService, deps: [{ token: CarouselService }], target: i0.ɵɵFactoryTarget.Injectable });
-CarouselNavigationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CarouselNavigationService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CarouselNavigationService, decorators: [{
+CarouselNavigationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CarouselNavigationService, deps: [{ token: CarouselService }], target: i0.ɵɵFactoryTarget.Injectable });
+CarouselNavigationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CarouselNavigationService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CarouselNavigationService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -3545,8 +3551,8 @@ class CarouselStageComponent {
         this.animateService.clear(id);
     }
 }
-CarouselStageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CarouselStageComponent, deps: [{ token: CarouselService }, { token: CarouselAnimateService }], target: i0.ɵɵFactoryTarget.Component });
-CarouselStageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: CarouselStageComponent, selector: "sfc-carousel-stage", inputs: { stageModel: "stageModel", slidesModel: "slidesModel" }, ngImport: i0, template: "<div class=\"container\" [ngStyle]=\"styles\" (transitionend)=\"onTransitionEnd()\">\r\n    <ng-container *ngFor=\"let slide of slidesModel; let i = index\">\r\n        <div class=\"item\" [ngClass]=\"slide.classes\" [ngStyle]=\"getItemStyles(slide)\" (animationend)=\"clear(slide.id)\"\r\n            [@autoHeight]=\"slide.heightState\">\r\n            <ng-template *ngIf=\"slide.load\" [ngTemplateOutlet]=\"slide.tplRef\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: preparePublicSlide(slide), index: i }\">\r\n            </ng-template>\r\n        </div>\r\n    </ng-container>\r\n</div>", styles: [":host .container{position:relative;touch-action:pan-y;touch-action:manipulation;-webkit-backface-visibility:hidden;backface-visibility:hidden}:host .container:after{content:\".\";display:block;clear:both;visibility:hidden;line-height:0;height:0}:host .container .item{-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translate(0);position:relative;min-height:1px;float:left;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}:host .container .item.center{z-index:5}:host .container .item img{display:block;width:100%}\n"], directives: [{ type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], animations: [
+CarouselStageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CarouselStageComponent, deps: [{ token: CarouselService }, { token: CarouselAnimateService }], target: i0.ɵɵFactoryTarget.Component });
+CarouselStageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: CarouselStageComponent, selector: "sfc-carousel-stage", inputs: { stageModel: "stageModel", slidesModel: "slidesModel" }, ngImport: i0, template: "<div class=\"container\" [ngStyle]=\"styles\" (transitionend)=\"onTransitionEnd()\">\r\n    <ng-container *ngFor=\"let slide of slidesModel; let i = index\">\r\n        <div class=\"item\" [ngClass]=\"slide.classes\" [ngStyle]=\"getItemStyles(slide)\" (animationend)=\"clear(slide.id)\"\r\n            [@autoHeight]=\"slide.heightState\">\r\n            <ng-template *ngIf=\"slide.load\" [ngTemplateOutlet]=\"slide.tplRef\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: preparePublicSlide(slide), index: i }\">\r\n            </ng-template>\r\n        </div>\r\n    </ng-container>\r\n</div>", styles: [":host .container{position:relative;touch-action:pan-y;touch-action:manipulation;-webkit-backface-visibility:hidden;backface-visibility:hidden}:host .container:after{content:\".\";display:block;clear:both;visibility:hidden;line-height:0;height:0}:host .container .item{-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translateZ(0);position:relative;min-height:1px;float:left;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}:host .container .item.center{z-index:5}:host .container .item img{display:block;width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], animations: [
         trigger('autoHeight', [
             state('nulled', style({ height: 0 })),
             state('full', style({ height: '*' })),
@@ -3558,7 +3564,7 @@ CarouselStageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             ]),
         ])
     ] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CarouselStageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CarouselStageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sfc-carousel-stage', animations: [
                         trigger('autoHeight', [
@@ -3571,7 +3577,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                                 animate(350)
                             ]),
                         ])
-                    ], template: "<div class=\"container\" [ngStyle]=\"styles\" (transitionend)=\"onTransitionEnd()\">\r\n    <ng-container *ngFor=\"let slide of slidesModel; let i = index\">\r\n        <div class=\"item\" [ngClass]=\"slide.classes\" [ngStyle]=\"getItemStyles(slide)\" (animationend)=\"clear(slide.id)\"\r\n            [@autoHeight]=\"slide.heightState\">\r\n            <ng-template *ngIf=\"slide.load\" [ngTemplateOutlet]=\"slide.tplRef\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: preparePublicSlide(slide), index: i }\">\r\n            </ng-template>\r\n        </div>\r\n    </ng-container>\r\n</div>", styles: [":host .container{position:relative;touch-action:pan-y;touch-action:manipulation;-webkit-backface-visibility:hidden;backface-visibility:hidden}:host .container:after{content:\".\";display:block;clear:both;visibility:hidden;line-height:0;height:0}:host .container .item{-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translate(0);position:relative;min-height:1px;float:left;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}:host .container .item.center{z-index:5}:host .container .item img{display:block;width:100%}\n"] }]
+                    ], template: "<div class=\"container\" [ngStyle]=\"styles\" (transitionend)=\"onTransitionEnd()\">\r\n    <ng-container *ngFor=\"let slide of slidesModel; let i = index\">\r\n        <div class=\"item\" [ngClass]=\"slide.classes\" [ngStyle]=\"getItemStyles(slide)\" (animationend)=\"clear(slide.id)\"\r\n            [@autoHeight]=\"slide.heightState\">\r\n            <ng-template *ngIf=\"slide.load\" [ngTemplateOutlet]=\"slide.tplRef\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: preparePublicSlide(slide), index: i }\">\r\n            </ng-template>\r\n        </div>\r\n    </ng-container>\r\n</div>", styles: [":host .container{position:relative;touch-action:pan-y;touch-action:manipulation;-webkit-backface-visibility:hidden;backface-visibility:hidden}:host .container:after{content:\".\";display:block;clear:both;visibility:hidden;line-height:0;height:0}:host .container .item{-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translateZ(0);position:relative;min-height:1px;float:left;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}:host .container .item.center{z-index:5}:host .container .item img{display:block;width:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: CarouselService }, { type: CarouselAnimateService }]; }, propDecorators: { stageModel: [{
                 type: Input
             }], slidesModel: [{
@@ -3748,15 +3754,15 @@ class CarouselComponent {
         };
     }
 }
-CarouselComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CarouselComponent, deps: [{ token: i0.ElementRef }, { token: i1.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: "12.0.0", version: "13.2.7", type: CarouselComponent, selector: "sfc-carousel", inputs: { options: "options" }, outputs: { translated: "translated", initialized: "initialized", changing: "changing", changed: "changed" }, host: { listeners: { "document:visibilitychange": "onVisibilityChange()" }, properties: { "class.rtl": "this.rtl" } }, providers: [
+CarouselComponent.ɵ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" }, outputs: { translated: "translated", initialized: "initialized", changing: "changing", changed: "changed" }, host: { listeners: { "document:visibilitychange": "onVisibilityChange()" }, properties: { "class.rtl": "this.rtl" } }, providers: [
         CarouselNavigationService,
         CarouselAutoplayService,
         CarouselService,
         CarouselAnimateService,
         CarouselLazyLoadService
-    ], queries: [{ propertyName: "slides", predicate: CarouselSlideDirective }], ngImport: i0, template: "<div class=\"container\" (mouseover)=\"pause()\" (mouseleave)=\"play()\">\r\n    <div *ngIf=\"carouselLoaded\" class=\"stage\">\r\n        <sfc-carousel-stage [stageModel]=\"stageModel\" [slidesModel]=\"slidesModel\"></sfc-carousel-stage>\r\n    </div>\r\n    <ng-container *ngIf=\"slides.toArray().length\">\r\n        <div class=\"navigation\" [class.disabled]=\"navigationModel?.disabled\">\r\n            <div class=\"action previous\" [class.disabled]=\"navigationModel?.previous?.disabled\" (click)=\"previous()\">\r\n                {{navigationModel?.previous?.label}}\r\n            </div>\r\n            <div class=\"action next\" [class.disabled]=\"navigationModel?.next?.disabled\" (click)=\"next()\">\r\n                {{navigationModel?.next?.label}}\r\n            </div>\r\n        </div>\r\n        <div class=\"dots\" [class.disabled]=\"navigationDotsModel?.disabled\">\r\n            <div *ngFor=\"let dot of navigationDotsModel?.dots\" class=\"dot\" [class.active]=\"dot.active\"\r\n                (click)=\"moveByDot(dot.id)\">\r\n                <span></span>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n</div>", styles: [":host .container{display:block;width:100%;-webkit-tap-highlight-color:transparent;position:relative;z-index:1}:host .container .stage{position:relative;overflow:hidden;transform:translate(0)}:host .container .dots{text-align:center;-webkit-tap-highlight-color:transparent}:host .container .dots.disabled{display:none}:host .container .dots .dot{display:inline-block;zoom:1;cursor:pointer;-webkit-user-select:none;user-select:none}:host .container .dots .dot span{width:10px;height:10px;margin:5px 7px;display:block;-webkit-backface-visibility:visible;backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}:host .container .dots .dot span,:host-context(.sfc-default-theme) :host .container .dots .dot span{background:#d8d7d7}:host-context(.sfc-dark-theme) :host .container .dots .dot span{background:#f6f6f6}:host .container .dots .dot.active span,:host-context(.sfc-default-theme) :host .container .dots .dot.active span,:host .container .dots .dot:hover span,:host-context(.sfc-default-theme) :host .container .dots .dot:hover span{background:#656d78}:host-context(.sfc-dark-theme) :host .container .dots .dot.active span,:host-context(.sfc-dark-theme) :host .container .dots .dot:hover span{background:#aab2bd}:host .container .navigation{margin-top:10px;text-align:center;-webkit-tap-highlight-color:transparent}:host .container .navigation .action{font-size:14px;margin:5px;padding:4px 7px;display:inline-block;cursor:pointer;border-radius:3px}:host .container .navigation .action,:host-context(.sfc-default-theme) :host .container .navigation .action{color:#fff}:host-context(.sfc-dark-theme) :host .container .navigation .action{color:#545e61}:host .container .navigation .action,:host-context(.sfc-default-theme) :host .container .navigation .action{background:#d8d7d7}:host-context(.sfc-dark-theme) :host .container .navigation .action{background:#f6f6f6}:host .container .navigation .action:hover{text-decoration:none}:host .container .navigation .action:hover,:host-context(.sfc-default-theme) :host .container .navigation .action:hover{background:#0000001a}:host-context(.sfc-dark-theme) :host .container .navigation .action:hover{background:#d8d7d7}:host .container .navigation .action.previous,:host .container .navigation .action.next{cursor:pointer;-webkit-user-select:none;user-select:none}:host .container .navigation .action.disabled{opacity:.5;cursor:default}:host .container .navigation.disabled{display:none}:host .container .navigation.disabled+.dots{margin-top:10px}:host.rtl .container{direction:rtl}\n"], components: [{ type: CarouselStageComponent, selector: "sfc-carousel-stage", inputs: ["stageModel", "slidesModel"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CarouselComponent, decorators: [{
+    ], queries: [{ propertyName: "slides", predicate: CarouselSlideDirective }], ngImport: i0, template: "<div class=\"container\" (mouseover)=\"pause()\" (mouseleave)=\"play()\">\r\n    <div *ngIf=\"carouselLoaded\" class=\"stage\">\r\n        <sfc-carousel-stage [stageModel]=\"stageModel\" [slidesModel]=\"slidesModel\"></sfc-carousel-stage>\r\n    </div>\r\n    <ng-container *ngIf=\"slides.toArray().length\">\r\n        <div class=\"navigation\" [class.disabled]=\"navigationModel.disabled\">\r\n            <div class=\"action previous\" [class.disabled]=\"navigationModel.previous.disabled\" (click)=\"previous()\">\r\n                {{navigationModel.previous.label}}\r\n            </div>\r\n            <div class=\"action next\" [class.disabled]=\"navigationModel.next.disabled\" (click)=\"next()\">\r\n                {{navigationModel.next.label}}\r\n            </div>\r\n        </div>\r\n        <div class=\"dots\" [class.disabled]=\"navigationDotsModel.disabled\">\r\n            <div *ngFor=\"let dot of navigationDotsModel?.dots\" class=\"dot\" [class.active]=\"dot.active\"\r\n                (click)=\"moveByDot(dot.id)\">\r\n                <span></span>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n</div>", styles: [":host .container{display:block;width:100%;-webkit-tap-highlight-color:transparent;position:relative;z-index:1}:host .container .stage{position:relative;overflow:hidden;transform:translateZ(0)}:host .container .dots{text-align:center;-webkit-tap-highlight-color:transparent}:host .container .dots.disabled{display:none}:host .container .dots .dot{display:inline-block;zoom:1;cursor:pointer;-webkit-user-select:none;user-select:none}:host .container .dots .dot span{width:10px;height:10px;margin:5px 7px;display:block;-webkit-backface-visibility:visible;backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}:host .container .dots .dot span,:host-context(.sfc-default-theme) :host .container .dots .dot span{background:#d8d7d7}:host-context(.sfc-dark-theme) :host .container .dots .dot span{background:#f6f6f6}:host .container .dots .dot.active span,:host-context(.sfc-default-theme) :host .container .dots .dot.active span,:host .container .dots .dot:hover span,:host-context(.sfc-default-theme) :host .container .dots .dot:hover span{background:#656d78}:host-context(.sfc-dark-theme) :host .container .dots .dot.active span,:host-context(.sfc-dark-theme) :host .container .dots .dot:hover span{background:#aab2bd}:host .container .navigation{margin-top:10px;text-align:center;-webkit-tap-highlight-color:transparent}:host .container .navigation .action{font-size:14px;margin:5px;padding:4px 7px;display:inline-block;cursor:pointer;border-radius:3px}:host .container .navigation .action,:host-context(.sfc-default-theme) :host .container .navigation .action{color:#fff}:host-context(.sfc-dark-theme) :host .container .navigation .action{color:#545e61}:host .container .navigation .action,:host-context(.sfc-default-theme) :host .container .navigation .action{background:#d8d7d7}:host-context(.sfc-dark-theme) :host .container .navigation .action{background:#f6f6f6}:host .container .navigation .action:hover{text-decoration:none}:host .container .navigation .action:hover,:host-context(.sfc-default-theme) :host .container .navigation .action:hover{background:rgba(0,0,0,.1019607843)}:host-context(.sfc-dark-theme) :host .container .navigation .action:hover{background:#d8d7d7}:host .container .navigation .action.previous,:host .container .navigation .action.next{cursor:pointer;-webkit-user-select:none;user-select:none}:host .container .navigation .action.disabled{opacity:.5;cursor:default}:host .container .navigation.disabled{display:none}:host .container .navigation.disabled+.dots{margin-top:10px}:host.rtl .container{direction:rtl}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CarouselStageComponent, selector: "sfc-carousel-stage", inputs: ["stageModel", "slidesModel"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CarouselComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sfc-carousel', providers: [
                         CarouselNavigationService,
@@ -3764,9 +3770,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                         CarouselService,
                         CarouselAnimateService,
                         CarouselLazyLoadService
-                    ], template: "<div class=\"container\" (mouseover)=\"pause()\" (mouseleave)=\"play()\">\r\n    <div *ngIf=\"carouselLoaded\" class=\"stage\">\r\n        <sfc-carousel-stage [stageModel]=\"stageModel\" [slidesModel]=\"slidesModel\"></sfc-carousel-stage>\r\n    </div>\r\n    <ng-container *ngIf=\"slides.toArray().length\">\r\n        <div class=\"navigation\" [class.disabled]=\"navigationModel?.disabled\">\r\n            <div class=\"action previous\" [class.disabled]=\"navigationModel?.previous?.disabled\" (click)=\"previous()\">\r\n                {{navigationModel?.previous?.label}}\r\n            </div>\r\n            <div class=\"action next\" [class.disabled]=\"navigationModel?.next?.disabled\" (click)=\"next()\">\r\n                {{navigationModel?.next?.label}}\r\n            </div>\r\n        </div>\r\n        <div class=\"dots\" [class.disabled]=\"navigationDotsModel?.disabled\">\r\n            <div *ngFor=\"let dot of navigationDotsModel?.dots\" class=\"dot\" [class.active]=\"dot.active\"\r\n                (click)=\"moveByDot(dot.id)\">\r\n                <span></span>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n</div>", styles: [":host .container{display:block;width:100%;-webkit-tap-highlight-color:transparent;position:relative;z-index:1}:host .container .stage{position:relative;overflow:hidden;transform:translate(0)}:host .container .dots{text-align:center;-webkit-tap-highlight-color:transparent}:host .container .dots.disabled{display:none}:host .container .dots .dot{display:inline-block;zoom:1;cursor:pointer;-webkit-user-select:none;user-select:none}:host .container .dots .dot span{width:10px;height:10px;margin:5px 7px;display:block;-webkit-backface-visibility:visible;backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}:host .container .dots .dot span,:host-context(.sfc-default-theme) :host .container .dots .dot span{background:#d8d7d7}:host-context(.sfc-dark-theme) :host .container .dots .dot span{background:#f6f6f6}:host .container .dots .dot.active span,:host-context(.sfc-default-theme) :host .container .dots .dot.active span,:host .container .dots .dot:hover span,:host-context(.sfc-default-theme) :host .container .dots .dot:hover span{background:#656d78}:host-context(.sfc-dark-theme) :host .container .dots .dot.active span,:host-context(.sfc-dark-theme) :host .container .dots .dot:hover span{background:#aab2bd}:host .container .navigation{margin-top:10px;text-align:center;-webkit-tap-highlight-color:transparent}:host .container .navigation .action{font-size:14px;margin:5px;padding:4px 7px;display:inline-block;cursor:pointer;border-radius:3px}:host .container .navigation .action,:host-context(.sfc-default-theme) :host .container .navigation .action{color:#fff}:host-context(.sfc-dark-theme) :host .container .navigation .action{color:#545e61}:host .container .navigation .action,:host-context(.sfc-default-theme) :host .container .navigation .action{background:#d8d7d7}:host-context(.sfc-dark-theme) :host .container .navigation .action{background:#f6f6f6}:host .container .navigation .action:hover{text-decoration:none}:host .container .navigation .action:hover,:host-context(.sfc-default-theme) :host .container .navigation .action:hover{background:#0000001a}:host-context(.sfc-dark-theme) :host .container .navigation .action:hover{background:#d8d7d7}:host .container .navigation .action.previous,:host .container .navigation .action.next{cursor:pointer;-webkit-user-select:none;user-select:none}:host .container .navigation .action.disabled{opacity:.5;cursor:default}:host .container .navigation.disabled{display:none}:host .container .navigation.disabled+.dots{margin-top:10px}:host.rtl .container{direction:rtl}\n"] }]
+                    ], template: "<div class=\"container\" (mouseover)=\"pause()\" (mouseleave)=\"play()\">\r\n    <div *ngIf=\"carouselLoaded\" class=\"stage\">\r\n        <sfc-carousel-stage [stageModel]=\"stageModel\" [slidesModel]=\"slidesModel\"></sfc-carousel-stage>\r\n    </div>\r\n    <ng-container *ngIf=\"slides.toArray().length\">\r\n        <div class=\"navigation\" [class.disabled]=\"navigationModel.disabled\">\r\n            <div class=\"action previous\" [class.disabled]=\"navigationModel.previous.disabled\" (click)=\"previous()\">\r\n                {{navigationModel.previous.label}}\r\n            </div>\r\n            <div class=\"action next\" [class.disabled]=\"navigationModel.next.disabled\" (click)=\"next()\">\r\n                {{navigationModel.next.label}}\r\n            </div>\r\n        </div>\r\n        <div class=\"dots\" [class.disabled]=\"navigationDotsModel.disabled\">\r\n            <div *ngFor=\"let dot of navigationDotsModel?.dots\" class=\"dot\" [class.active]=\"dot.active\"\r\n                (click)=\"moveByDot(dot.id)\">\r\n                <span></span>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n</div>", styles: [":host .container{display:block;width:100%;-webkit-tap-highlight-color:transparent;position:relative;z-index:1}:host .container .stage{position:relative;overflow:hidden;transform:translateZ(0)}:host .container .dots{text-align:center;-webkit-tap-highlight-color:transparent}:host .container .dots.disabled{display:none}:host .container .dots .dot{display:inline-block;zoom:1;cursor:pointer;-webkit-user-select:none;user-select:none}:host .container .dots .dot span{width:10px;height:10px;margin:5px 7px;display:block;-webkit-backface-visibility:visible;backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}:host .container .dots .dot span,:host-context(.sfc-default-theme) :host .container .dots .dot span{background:#d8d7d7}:host-context(.sfc-dark-theme) :host .container .dots .dot span{background:#f6f6f6}:host .container .dots .dot.active span,:host-context(.sfc-default-theme) :host .container .dots .dot.active span,:host .container .dots .dot:hover span,:host-context(.sfc-default-theme) :host .container .dots .dot:hover span{background:#656d78}:host-context(.sfc-dark-theme) :host .container .dots .dot.active span,:host-context(.sfc-dark-theme) :host .container .dots .dot:hover span{background:#aab2bd}:host .container .navigation{margin-top:10px;text-align:center;-webkit-tap-highlight-color:transparent}:host .container .navigation .action{font-size:14px;margin:5px;padding:4px 7px;display:inline-block;cursor:pointer;border-radius:3px}:host .container .navigation .action,:host-context(.sfc-default-theme) :host .container .navigation .action{color:#fff}:host-context(.sfc-dark-theme) :host .container .navigation .action{color:#545e61}:host .container .navigation .action,:host-context(.sfc-default-theme) :host .container .navigation .action{background:#d8d7d7}:host-context(.sfc-dark-theme) :host .container .navigation .action{background:#f6f6f6}:host .container .navigation .action:hover{text-decoration:none}:host .container .navigation .action:hover,:host-context(.sfc-default-theme) :host .container .navigation .action:hover{background:rgba(0,0,0,.1019607843)}:host-context(.sfc-dark-theme) :host .container .navigation .action:hover{background:#d8d7d7}:host .container .navigation .action.previous,:host .container .navigation .action.next{cursor:pointer;-webkit-user-select:none;user-select:none}:host .container .navigation .action.disabled{opacity:.5;cursor:default}:host .container .navigation.disabled{display:none}:host .container .navigation.disabled+.dots{margin-top:10px}:host.rtl .container{direction:rtl}\n"] }]
         }], ctorParameters: function () {
-        return [{ type: i0.ElementRef }, { type: i1.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]
                     }] }];
@@ -3794,8 +3800,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
 Chart.register(Title, Tooltip, Filler, Legend, LineController, LineElement, PointElement, LinearScale, CategoryScale, BarController, BarElement, DoughnutController, ArcElement, RadarController, RadialLinearScale, PieController, PolarAreaController, BubbleController, ScatterController, TimeSeriesScale);
 class NgxSfcComponentsModule {
 }
-NgxSfcComponentsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NgxSfcComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NgxSfcComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NgxSfcComponentsModule, declarations: [
+NgxSfcComponentsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NgxSfcComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NgxSfcComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: NgxSfcComponentsModule, declarations: [
         // Tabs
         TabsComponent,
         TabLabelLineComponent,
@@ -3888,12 +3894,10 @@ NgxSfcComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0",
         CarouselComponent,
         CarouselSlideDirective
     ] });
-NgxSfcComponentsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NgxSfcComponentsModule, imports: [[
-            CommonModule,
-            FontAwesomeModule,
-            NgxSfcCommonModule
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NgxSfcComponentsModule, decorators: [{
+NgxSfcComponentsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NgxSfcComponentsModule, imports: [CommonModule,
+        FontAwesomeModule,
+        NgxSfcCommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NgxSfcComponentsModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -4006,3 +4010,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
 
 export { AvatarBadgeComponent, AvatarBadgePosition, AvatarComponent, CarouselComponent, CarouselSlideDirective, ChartComponent, ChartThemeService, ColumnsToggleComponent, DefaultTableCardComponent, DefaultTableColumnComponent, DefaultTableRowComponent, DropdownMenuComponent, ExpandedTableRowComponent, ExpandedTableRowTemplate, NavigationMenuComponent, NgxSfcComponentsModule, NotificationComponent, NotificationTemplate, NotificationType, ProgressCircleComponent, ProgressLineComponent, ProgressSemiCircleComponent, SelectableTableColumnComponent, SideMenuComponent, SideMenuItemType, SliderComponent, SliderType, StarsComponent, TabLabelIconComponent, TabLabelIconSliderComponent, TabLabelLineComponent, TabLabelLineSliderComponent, TableComponent, TableDataType, TableTemplate, TabsComponent, TabsTemplate, TagsComponent, TimelineComponent, TimelineItemPosition };
 //# sourceMappingURL=ngx-sfc-components.mjs.map
+//# sourceMappingURL=ngx-sfc-components.mjs.map