ngx-sfc-components 0.0.33 → 0.0.35

package/fesm2020/ngx-sfc-components.mjs

@@ -4,12 +4,12 @@ import * as i0 from '@angular/core';
 import { EventEmitter, Component, Input, Output, ContentChildren, Directive, HostBinding, HostListener, Inject, ViewChild, Injectable, ViewChildren, NgModule } from '@angular/core';
 import { Chart, Title, Tooltip, Filler, Legend, LineController, LineElement, PointElement, LinearScale, CategoryScale, BarController, BarElement, DoughnutController, ArcElement, RadarController, RadialLinearScale, PieController, PolarAreaController, BubbleController, ScatterController, TimeSeriesScale } from 'chart.js';
 import * as i1$1 from 'ngx-sfc-common';
-import { isDefined, firstOrDefault, CommonConstants, TemplateReferenceDirective, UIClass, getCalcValue, UIConstants, any, Position, isNullOrEmptyString, MediaLimits, WINDOW, all, getCssLikeValue, ButtonType, replaceRgbOpacity, Theme, mergeDeep, ObservableModel, removeItem, addItem, CheckmarkType, SortingDirection, LoadContainerType, PaginationConstants, LoadContainerLoadType, generateGuid, where, sum, hasItem, SortingService, ResizeService, isNumeric, DOCUMENT, NgxSfcCommonModule } from 'ngx-sfc-common';
+import { isDefined, firstOrDefault, CommonConstants, TemplateReferenceDirective, UIClass, getCalcValue, UIConstants, hasItemBy, any, Position, isNullOrEmptyString, MediaLimits, WINDOW, all, getCssLikeValue, ButtonType, replaceRgbOpacity, Theme, mergeDeep, ObservableModel, removeItem, addItem, CheckmarkType, SortingDirection, LoadContainerType, PaginationConstants, LoadContainerLoadType, generateGuid, where, sum, hasItem, SortingService, ResizeService, isNumeric, DOCUMENT, NgxSfcCommonModule } from 'ngx-sfc-common';
 import { Subject, BehaviorSubject, startWith, combineLatest, map, filter, distinctUntilChanged, fromEvent, tap, merge, of, switchMap, first, from, skip, take, toArray, delay } from 'rxjs';
 import * as i2 from '@fortawesome/angular-fontawesome';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { trigger, transition, style, animate, state } from '@angular/animations';
-import { faAngleUp, faAngleDown, faArrowRight, faArrowLeft, faPauseCircle, faPlayCircle, faEye, faEyeSlash, faChevronUp, faChevronDown, faTableList, faBorderAll } from '@fortawesome/free-solid-svg-icons';
+import { faAngleUp, faAngleDown, faCircleExclamation, faArrowRight, faArrowLeft, faPauseCircle, faPlayCircle, faEye, faEyeSlash, faChevronUp, faChevronDown, faTableList, faBorderAll } from '@fortawesome/free-solid-svg-icons';
 
 class TabService {
     constructor() {
@@ -216,10 +216,10 @@ class SideMenuHeaderComponent {
     }
 }
 SideMenuHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SideMenuHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SideMenuHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SideMenuHeaderComponent, selector: "sfc-side-menu-header", inputs: { label: "label", switch: "switch", open: "open" }, outputs: { toggle: "toggle" }, host: { properties: { "class.open": "this.open" } }, ngImport: i0, template: "<li>\r\n    <span>{{label}}</span>\r\n    <sfc-hamburger *ngIf=\"switch\" [open]=\"open\" (click)=\"toggle.emit()\"></sfc-hamburger>\r\n</li>", styles: [":host li{display:flex;align-items:center;justify-content:center;padding:1.25em}:host li span{display:none;transition:color .5s ease;font-weight:700;font-size:.9em;-webkit-user-select:none;user-select:none}:host li span,:host-context(.sfc-default-theme) :host li span{color:#545e61}:host-context(.sfc-dark-theme) :host li span{color:#fff}:host.open li{justify-content:space-between}:host.open li span{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$1.HamburgerComponent, selector: "sfc-hamburger" }] });
+SideMenuHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SideMenuHeaderComponent, selector: "sfc-side-menu-header", inputs: { label: "label", switch: "switch", open: "open" }, outputs: { toggle: "toggle" }, host: { properties: { "class.open": "this.open" } }, ngImport: i0, template: "<div>\r\n    <span>{{label}}</span>\r\n    <sfc-hamburger *ngIf=\"switch\" [open]=\"open\" (click)=\"toggle.emit()\"></sfc-hamburger>\r\n</div>", styles: [":host div{display:flex;align-items:center;justify-content:center;padding:1.25em;height:2em}:host div span{display:none;transition:color .5s ease;font-weight:700;font-size:.9em;-webkit-user-select:none;user-select:none}:host div span,:host-context(.sfc-default-theme) :host div span{color:#545e61}:host-context(.sfc-dark-theme) :host div span{color:#fff}:host.open div{justify-content:space-between;padding:1.25em 0 1.25em 1.25em}:host.open div span{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$1.HamburgerComponent, selector: "sfc-hamburger" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SideMenuHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-side-menu-header', template: "<li>\r\n    <span>{{label}}</span>\r\n    <sfc-hamburger *ngIf=\"switch\" [open]=\"open\" (click)=\"toggle.emit()\"></sfc-hamburger>\r\n</li>", styles: [":host li{display:flex;align-items:center;justify-content:center;padding:1.25em}:host li span{display:none;transition:color .5s ease;font-weight:700;font-size:.9em;-webkit-user-select:none;user-select:none}:host li span,:host-context(.sfc-default-theme) :host li span{color:#545e61}:host-context(.sfc-dark-theme) :host li span{color:#fff}:host.open li{justify-content:space-between}:host.open li span{display:block}\n"] }]
+            args: [{ selector: 'sfc-side-menu-header', template: "<div>\r\n    <span>{{label}}</span>\r\n    <sfc-hamburger *ngIf=\"switch\" [open]=\"open\" (click)=\"toggle.emit()\"></sfc-hamburger>\r\n</div>", styles: [":host div{display:flex;align-items:center;justify-content:center;padding:1.25em;height:2em}:host div span{display:none;transition:color .5s ease;font-weight:700;font-size:.9em;-webkit-user-select:none;user-select:none}:host div span,:host-context(.sfc-default-theme) :host div span{color:#545e61}:host-context(.sfc-dark-theme) :host div span{color:#fff}:host.open div{justify-content:space-between;padding:1.25em 0 1.25em 1.25em}:host.open div span{display:block}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], switch: [{
@@ -237,12 +237,14 @@ class SideMenuItemContentComponent {
     constructor() {
         this.ANGLE_UP_ICON = faAngleUp;
         this.ANGLE_DOWM_ICON = faAngleDown;
+        this.INVALID_ICON = faCircleExclamation;
         this.item = {
             id: CommonConstants.EMPTY_STRING,
             label: CommonConstants.EMPTY_STRING,
             icon: null,
             type: SideMenuItemType.Item,
-            active: false
+            active: false,
+            invalid: false
         };
         this.active = false;
         this.open = false;
@@ -258,12 +260,17 @@ class SideMenuItemContentComponent {
     get expandIcon() {
         return this.openParent ? this.ANGLE_UP_ICON : this.ANGLE_DOWM_ICON;
     }
+    get invalidParent() {
+        return this.hasChildren &&
+            !this.openParent &&
+            hasItemBy(this.item.items, (item) => item.invalid || false);
+    }
 }
 SideMenuItemContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SideMenuItemContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SideMenuItemContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SideMenuItemContentComponent, selector: "sfc-side-menu-item-content", inputs: { item: "item", active: "active", open: "open", openParent: "openParent", hasChildren: "hasChildren" }, outputs: { selectItem: "selectItem" }, host: { listeners: { "click": "onClick()" }, properties: { "class.active": "this.active", "class.open": "this.open" } }, ngImport: i0, template: "<li>\r\n    <div class=\"item-container\">\r\n        <div class=\"item\">\r\n            <a>\r\n                <fa-icon *ngIf=\"item.icon\" [icon]=\"item.icon\"></fa-icon>\r\n            </a>\r\n        </div>\r\n        <span class=\"label\">{{item.label}}</span>\r\n    </div>\r\n\r\n    <div *ngIf=\"hasChildren\" class=\"expand-container\">\r\n        <fa-icon [icon]=\"expandIcon\"></fa-icon>\r\n    </div>\r\n</li>", styles: [":host li{display:inline-flex;align-items:center;padding:0 1.25em 0 1.5em;cursor:pointer;width:calc(100% - 2.75em);justify-content:space-between;transition:color .5s ease}:host li,:host-context(.sfc-default-theme) :host li{color:#545e61}:host-context(.sfc-dark-theme) :host li{color:#fff}:host li .expand-container{visibility:hidden;opacity:0;transition:color .5s ease;width:0;font-size:.8em;margin-left:1em}:host li .expand-container>fa-icon{font-weight:700}:host li .item-container{display:inline-flex;align-items:center}:host li .item-container .item{width:2em;height:1.9em;display:flex;justify-content:center;border-radius:.7em;align-items:center}:host li .item-container .item a{border-radius:.45em;display:flex;align-items:center;justify-content:center;font-size:1.3em;padding:.3em;transition:background-color .5s ease,color .5s ease,margin-right .3s ease-in-out}:host li .item-container .item a>fa-icon{font-size:1em}:host li .item-container .label{font-weight:700;font-size:.9em;visibility:hidden;opacity:0;transition:color .5s,visibility .3s,opacity .5s ease-in-out;-webkit-user-select:none;user-select:none;width:0}:host.active li{color:#fff}:host.active li .item-container .item a{background-color:#ffce54;box-shadow:0 .3em 1em #2bbbad1a}:host.active li .item-container .label{color:#ffce54}:host.active li .expand-container{color:#ffce54}:host.open li .item-container .item a{margin-right:1em}:host.open li .item-container .label{visibility:visible;opacity:1;width:auto}:host.open li .expand-container{width:auto;visibility:visible;opacity:1}:host :host-context(.children) li{margin:.2em 0}:host :host-context(.children) li .item-container .item a{padding:.3em;border-radius:.35em}:host :host-context(.children) li .item-container .item a>fa-icon{font-size:.5em}:host :host-context(.children) li .item-container .label{font-size:.8em}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
+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 class=\"invalid\" *ngIf=\"item.invalid || invalidParent\">\r\n        <fa-icon [icon]=\"INVALID_ICON\"></fa-icon> \r\n    </div>\r\n\r\n    <div *ngIf=\"hasChildren\" class=\"expand-container\">\r\n        <fa-icon [icon]=\"expandIcon\"></fa-icon>\r\n    </div>    \r\n</li> ", styles: [":host li{display:inline-flex;align-items:center;padding:0 1.25em 0 1.5em;cursor:pointer;width:calc(100% - 2.75em);justify-content:space-between;transition:color .5s ease}:host li,:host-context(.sfc-default-theme) :host li{color:#545e61}:host-context(.sfc-dark-theme) :host li{color:#fff}:host li .expand-container{visibility:hidden;opacity:0;transition:color .5s ease;width:0;font-size:.8em;margin-left:1em}:host li .expand-container>fa-icon{font-weight:700}:host li .item-container{display:inline-flex;align-items:center}:host li .item-container .item{display:flex;justify-content:center;align-items:center;width:2em;height:2em}:host li .item-container .item a{border-radius:.45em;display:flex;align-items:center;justify-content:center;padding:.3em;transition:background-color .5s ease,color .5s ease;width:1.5em;height:1.5em}:host li .item-container .item a>fa-icon{font-size:1.3em}:host li .item-container .label{font-weight:700;font-size:.9em;visibility:hidden;opacity:0;transition:color .5s,visibility .3s,opacity .5s ease-in-out,margin-left .3s ease-in-out;-webkit-user-select:none;user-select:none;width:0}:host li .invalid{margin:0 0 0 .5em}:host li .invalid fa-icon{color:#e96075;font-size:.8em}:host.active li{color:#fff}:host.active li .item-container .item a{background-color:#ffce54;box-shadow:0 .3em 1em #2bbbad1a}:host.active li .item-container .label{color:#ffce54}:host.active li .expand-container{color:#ffce54}:host.open li .item-container .label{visibility:visible;opacity:1;margin-left:1em;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;width:.8em;height:.8em}:host :host-context(.children) li .item-container .item a>fa-icon{font-size:.8em}:host :host-context(.children) li .item-container .label{font-size:.8em}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SideMenuItemContentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-side-menu-item-content', template: "<li>\r\n    <div class=\"item-container\">\r\n        <div class=\"item\">\r\n            <a>\r\n                <fa-icon *ngIf=\"item.icon\" [icon]=\"item.icon\"></fa-icon>\r\n            </a>\r\n        </div>\r\n        <span class=\"label\">{{item.label}}</span>\r\n    </div>\r\n\r\n    <div *ngIf=\"hasChildren\" class=\"expand-container\">\r\n        <fa-icon [icon]=\"expandIcon\"></fa-icon>\r\n    </div>\r\n</li>", styles: [":host li{display:inline-flex;align-items:center;padding:0 1.25em 0 1.5em;cursor:pointer;width:calc(100% - 2.75em);justify-content:space-between;transition:color .5s ease}:host li,:host-context(.sfc-default-theme) :host li{color:#545e61}:host-context(.sfc-dark-theme) :host li{color:#fff}:host li .expand-container{visibility:hidden;opacity:0;transition:color .5s ease;width:0;font-size:.8em;margin-left:1em}:host li .expand-container>fa-icon{font-weight:700}:host li .item-container{display:inline-flex;align-items:center}:host li .item-container .item{width:2em;height:1.9em;display:flex;justify-content:center;border-radius:.7em;align-items:center}:host li .item-container .item a{border-radius:.45em;display:flex;align-items:center;justify-content:center;font-size:1.3em;padding:.3em;transition:background-color .5s ease,color .5s ease,margin-right .3s ease-in-out}:host li .item-container .item a>fa-icon{font-size:1em}:host li .item-container .label{font-weight:700;font-size:.9em;visibility:hidden;opacity:0;transition:color .5s,visibility .3s,opacity .5s ease-in-out;-webkit-user-select:none;user-select:none;width:0}:host.active li{color:#fff}:host.active li .item-container .item a{background-color:#ffce54;box-shadow:0 .3em 1em #2bbbad1a}:host.active li .item-container .label{color:#ffce54}:host.active li .expand-container{color:#ffce54}:host.open li .item-container .item a{margin-right:1em}:host.open li .item-container .label{visibility:visible;opacity:1;width:auto}:host.open li .expand-container{width:auto;visibility:visible;opacity:1}:host :host-context(.children) li{margin:.2em 0}:host :host-context(.children) li .item-container .item a{padding:.3em;border-radius:.35em}:host :host-context(.children) li .item-container .item a>fa-icon{font-size:.5em}:host :host-context(.children) li .item-container .label{font-size:.8em}\n"] }]
+            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 class=\"invalid\" *ngIf=\"item.invalid || invalidParent\">\r\n        <fa-icon [icon]=\"INVALID_ICON\"></fa-icon> \r\n    </div>\r\n\r\n    <div *ngIf=\"hasChildren\" class=\"expand-container\">\r\n        <fa-icon [icon]=\"expandIcon\"></fa-icon>\r\n    </div>    \r\n</li> ", styles: [":host li{display:inline-flex;align-items:center;padding:0 1.25em 0 1.5em;cursor:pointer;width:calc(100% - 2.75em);justify-content:space-between;transition:color .5s ease}:host li,:host-context(.sfc-default-theme) :host li{color:#545e61}:host-context(.sfc-dark-theme) :host li{color:#fff}:host li .expand-container{visibility:hidden;opacity:0;transition:color .5s ease;width:0;font-size:.8em;margin-left:1em}:host li .expand-container>fa-icon{font-weight:700}:host li .item-container{display:inline-flex;align-items:center}:host li .item-container .item{display:flex;justify-content:center;align-items:center;width:2em;height:2em}:host li .item-container .item a{border-radius:.45em;display:flex;align-items:center;justify-content:center;padding:.3em;transition:background-color .5s ease,color .5s ease;width:1.5em;height:1.5em}:host li .item-container .item a>fa-icon{font-size:1.3em}:host li .item-container .label{font-weight:700;font-size:.9em;visibility:hidden;opacity:0;transition:color .5s,visibility .3s,opacity .5s ease-in-out,margin-left .3s ease-in-out;-webkit-user-select:none;user-select:none;width:0}:host li .invalid{margin:0 0 0 .5em}:host li .invalid fa-icon{color:#e96075;font-size:.8em}:host.active li{color:#fff}:host.active li .item-container .item a{background-color:#ffce54;box-shadow:0 .3em 1em #2bbbad1a}:host.active li .item-container .label{color:#ffce54}:host.active li .expand-container{color:#ffce54}:host.open li .item-container .label{visibility:visible;opacity:1;margin-left:1em;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;width:.8em;height:.8em}:host :host-context(.children) li .item-container .item a>fa-icon{font-size:.8em}:host :host-context(.children) li .item-container .label{font-size:.8em}\n"] }]
         }], propDecorators: { item: [{
                 type: Input
             }], active: [{
@@ -325,7 +332,7 @@ class SideMenuItemComponent {
     }
 }
 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: [
+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        <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 }),
@@ -350,7 +357,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                                 animate('300ms', style({ transform: 'translateX(-20%)', opacity: 0 }))
                             ])
                         ])
-                    ], 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"] }]
+                    ], 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        <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"] }]
         }], propDecorators: { item: [{
                 type: Input
             }], open: [{
@@ -411,10 +418,10 @@ class SideMenuComponent {
     }
 }
 SideMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SideMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SideMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SideMenuComponent, selector: "sfc-side-menu", inputs: { model: "model" }, outputs: { selected: "selected" }, host: { properties: { "class.open": "this.open", "class.switch": "this.switch" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <ul>\r\n        <sfc-side-menu-header [label]=\"model.label\" [open]=\"open\" [switch]=\"switch\" (toggle)=\"open =!open\">\r\n        </sfc-side-menu-header>\r\n\r\n        <ng-container *ngFor=\"let item of model.items\" [ngSwitch]=\"item.type\">\r\n            <sfc-side-menu-item *ngSwitchCase=\"SideMenuItemType.Item\" [item]=\"item\" [open]=\"open\"\r\n                (selectItem)=\"onItemSelect($event)\">\r\n            </sfc-side-menu-item>\r\n\r\n            <sfc-side-menu-title *ngSwitchCase=\"SideMenuItemType.Title\" [label]=\"item.label\" [open]=\"open\">\r\n            </sfc-side-menu-title>\r\n        </ng-container>\r\n    </ul>\r\n</div>", styles: [":host .container{width:5em;height:inherit;overflow:hidden}:host .container ul{margin:0;padding:0;list-style:none;overflow:hidden;display:flex;flex-direction:column}:host.open .container{width:11.25em}:host.switch .container{transition:background .5s ease,width .5s ease-in-out}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: SideMenuHeaderComponent, selector: "sfc-side-menu-header", inputs: ["label", "switch", "open"], outputs: ["toggle"] }, { kind: "component", type: SideMenuItemComponent, selector: "sfc-side-menu-item", inputs: ["item", "open"], outputs: ["selectItem"] }, { kind: "component", type: SideMenuTitleComponent, selector: "sfc-side-menu-title", inputs: ["label", "open"] }] });
+SideMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SideMenuComponent, selector: "sfc-side-menu", inputs: { model: "model" }, outputs: { selected: "selected" }, host: { properties: { "class.open": "this.open", "class.switch": "this.switch" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <sfc-side-menu-header [label]=\"model.label\" [open]=\"open\" [switch]=\"switch\" (toggle)=\"open =!open\">\r\n    </sfc-side-menu-header>\r\n\r\n    <ul>\r\n        <ng-container *ngFor=\"let item of model.items\" [ngSwitch]=\"item.type\">\r\n            <sfc-side-menu-item *ngSwitchCase=\"SideMenuItemType.Item\" [item]=\"item\" [open]=\"open\"\r\n                (selectItem)=\"onItemSelect($event)\">\r\n            </sfc-side-menu-item>\r\n\r\n            <sfc-side-menu-title *ngSwitchCase=\"SideMenuItemType.Title\" [label]=\"item.label\" [open]=\"open\">\r\n            </sfc-side-menu-title>\r\n        </ng-container>\r\n    </ul>\r\n</div>", styles: [":host .container{width:5em;height:inherit;overflow:hidden}:host .container ul{margin:0;padding:0;list-style:none;overflow:hidden;display:flex;flex-direction:column}:host.open .container{width:11.25em}:host.switch .container{transition:background .5s ease,width .5s ease-in-out}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: SideMenuHeaderComponent, selector: "sfc-side-menu-header", inputs: ["label", "switch", "open"], outputs: ["toggle"] }, { kind: "component", type: SideMenuItemComponent, selector: "sfc-side-menu-item", inputs: ["item", "open"], outputs: ["selectItem"] }, { kind: "component", type: SideMenuTitleComponent, selector: "sfc-side-menu-title", inputs: ["label", "open"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SideMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-side-menu', template: "<div class=\"container\">\r\n    <ul>\r\n        <sfc-side-menu-header [label]=\"model.label\" [open]=\"open\" [switch]=\"switch\" (toggle)=\"open =!open\">\r\n        </sfc-side-menu-header>\r\n\r\n        <ng-container *ngFor=\"let item of model.items\" [ngSwitch]=\"item.type\">\r\n            <sfc-side-menu-item *ngSwitchCase=\"SideMenuItemType.Item\" [item]=\"item\" [open]=\"open\"\r\n                (selectItem)=\"onItemSelect($event)\">\r\n            </sfc-side-menu-item>\r\n\r\n            <sfc-side-menu-title *ngSwitchCase=\"SideMenuItemType.Title\" [label]=\"item.label\" [open]=\"open\">\r\n            </sfc-side-menu-title>\r\n        </ng-container>\r\n    </ul>\r\n</div>", styles: [":host .container{width:5em;height:inherit;overflow:hidden}:host .container ul{margin:0;padding:0;list-style:none;overflow:hidden;display:flex;flex-direction:column}:host.open .container{width:11.25em}:host.switch .container{transition:background .5s ease,width .5s ease-in-out}\n"] }]
+            args: [{ selector: 'sfc-side-menu', template: "<div class=\"container\">\r\n    <sfc-side-menu-header [label]=\"model.label\" [open]=\"open\" [switch]=\"switch\" (toggle)=\"open =!open\">\r\n    </sfc-side-menu-header>\r\n\r\n    <ul>\r\n        <ng-container *ngFor=\"let item of model.items\" [ngSwitch]=\"item.type\">\r\n            <sfc-side-menu-item *ngSwitchCase=\"SideMenuItemType.Item\" [item]=\"item\" [open]=\"open\"\r\n                (selectItem)=\"onItemSelect($event)\">\r\n            </sfc-side-menu-item>\r\n\r\n            <sfc-side-menu-title *ngSwitchCase=\"SideMenuItemType.Title\" [label]=\"item.label\" [open]=\"open\">\r\n            </sfc-side-menu-title>\r\n        </ng-container>\r\n    </ul>\r\n</div>", styles: [":host .container{width:5em;height:inherit;overflow:hidden}:host .container ul{margin:0;padding:0;list-style:none;overflow:hidden;display:flex;flex-direction:column}:host.open .container{width:11.25em}:host.switch .container{transition:background .5s ease,width .5s ease-in-out}\n"] }]
         }], propDecorators: { model: [{
                 type: Input
             }], selected: [{
@@ -645,10 +652,10 @@ class RouterMenuItemComponent {
     }
 }
 RouterMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: RouterMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-RouterMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: RouterMenuItemComponent, selector: "sfc-router-menu-item", inputs: { item: "item" }, host: { listeners: { "click": "click()" }, properties: { "class.selected": "this._selected" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"content\">\r\n        <sfc-icon [icon]=\"item.icon\" [imageSrc]=\"item.image\"></sfc-icon>\r\n        <span>{{item.label}}</span>\r\n    </div>\r\n</div>", styles: [":host{cursor:pointer;-webkit-user-select:none;user-select:none}:host .container{display:flex;align-items:center;justify-content:center;height:100%}:host .container .content{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;transition:color .5s ease;padding:.5em .8em;width:100%}:host .container .content,:host-context(.sfc-default-theme) :host .container .content{color:#545e61}:host-context(.sfc-dark-theme) :host .container .content{color:#fff}:host .container .content span{font-size:.7em;font-weight:700}:host .container .content sfc-icon{margin-right:.5em}:host.selected .container .content,:host:hover .container .content{color:#ffce54}:host.selected .container .content{border:1px solid #ffce54;border-radius:3em;background:#ffce54;color:#fff}\n"], dependencies: [{ kind: "component", type: i1$1.IconComponent, selector: "sfc-icon", inputs: ["icon", "imageSrc"] }] });
+RouterMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: RouterMenuItemComponent, selector: "sfc-router-menu-item", inputs: { item: "item" }, host: { listeners: { "click": "click()" }, properties: { "class.selected": "this._selected" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"content\">\r\n        <sfc-icon [icon]=\"item.icon\" [imageSrc]=\"item.image\"></sfc-icon>\r\n        <span>{{item.label}}</span>\r\n    </div>\r\n</div>", styles: [":host{cursor:pointer;-webkit-user-select:none;user-select:none}:host .container{display:flex;align-items:center;justify-content:center;height:100%}:host .container .content{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0;transition:color .5s ease;padding:.5em .8em;width:100%}:host .container .content,:host-context(.sfc-default-theme) :host .container .content{color:#545e61}:host-context(.sfc-dark-theme) :host .container .content{color:#fff}:host .container .content span{font-size:.7em;font-weight:700}:host .container .content sfc-icon{margin-right:.5em}:host.selected .container .content,:host:hover .container .content{color:#ffce54}:host.selected .container .content{border:1px solid #ffce54;border-radius:3em;background:#ffce54;color:#fff}\n"], dependencies: [{ kind: "component", type: i1$1.IconComponent, selector: "sfc-icon", inputs: ["icon", "imageSrc"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: RouterMenuItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-router-menu-item', template: "<div class=\"container\">\r\n    <div class=\"content\">\r\n        <sfc-icon [icon]=\"item.icon\" [imageSrc]=\"item.image\"></sfc-icon>\r\n        <span>{{item.label}}</span>\r\n    </div>\r\n</div>", styles: [":host{cursor:pointer;-webkit-user-select:none;user-select:none}:host .container{display:flex;align-items:center;justify-content:center;height:100%}:host .container .content{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;transition:color .5s ease;padding:.5em .8em;width:100%}:host .container .content,:host-context(.sfc-default-theme) :host .container .content{color:#545e61}:host-context(.sfc-dark-theme) :host .container .content{color:#fff}:host .container .content span{font-size:.7em;font-weight:700}:host .container .content sfc-icon{margin-right:.5em}:host.selected .container .content,:host:hover .container .content{color:#ffce54}:host.selected .container .content{border:1px solid #ffce54;border-radius:3em;background:#ffce54;color:#fff}\n"] }]
+            args: [{ selector: 'sfc-router-menu-item', template: "<div class=\"container\">\r\n    <div class=\"content\">\r\n        <sfc-icon [icon]=\"item.icon\" [imageSrc]=\"item.image\"></sfc-icon>\r\n        <span>{{item.label}}</span>\r\n    </div>\r\n</div>", styles: [":host{cursor:pointer;-webkit-user-select:none;user-select:none}:host .container{display:flex;align-items:center;justify-content:center;height:100%}:host .container .content{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0;transition:color .5s ease;padding:.5em .8em;width:100%}:host .container .content,:host-context(.sfc-default-theme) :host .container .content{color:#545e61}:host-context(.sfc-dark-theme) :host .container .content{color:#fff}:host .container .content span{font-size:.7em;font-weight:700}:host .container .content sfc-icon{margin-right:.5em}:host.selected .container .content,:host:hover .container .content{color:#ffce54}:host.selected .container .content{border:1px solid #ffce54;border-radius:3em;background:#ffce54;color:#fff}\n"] }]
         }], propDecorators: { item: [{
                 type: Input
             }], _selected: [{
@@ -723,10 +730,10 @@ class StarsComponent {
     }
 }
 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{display:inline-block}:host .container{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}: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 .5s,background .5s 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"] }] });
+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{display:inline-block}:host .container{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0}: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 .5s,background .5s 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{display:inline-block}:host .container{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}: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 .5s,background .5s 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"] }]
+            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{display:inline-block}:host .container{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0}: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 .5s,background .5s 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: [{
                 type: Input
             }], count: [{
@@ -915,10 +922,10 @@ class AvatarComponent {
     }
 }
 AvatarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: AvatarComponent, selector: "sfc-avatar", inputs: { radius: "radius", stroke: "stroke", progress: "progress", progressModel: "progressModel", data: "data", stars: "stars", starsValue: "starsValue", badges: "badges" }, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"avatar-image-container\">\r\n        <div class=\"avatar\" (mouseenter)=\"stroke = imageModel.Stroke * STROKE_HOVER_VALUE\"\r\n            (mouseleave)=\"stroke = imageModel.Stroke\">\r\n\r\n            <div class=\"avatar-image\">\r\n                <svg [attr.height]=\"imageModel.Height\" [attr.width]=\"imageModel.Width\">\r\n                    <defs>\r\n                        <pattern id=\"{{imageModel.ImageId}}\" patternUnits=\"userSpaceOnUse\"\r\n                            [attr.height]=\"imageModel.Height\" [attr.width]=\"imageModel.Width\">\r\n                            <image [attr.height]=\"imageModel.Height\" [attr.width]=\"imageModel.Width\"\r\n                                [attr.xlink:href]=\"data.image\" preserveAspectRatio=\"xMidYMid slice\"></image>\r\n                        </pattern>\r\n                    </defs>\r\n                    <circle class=\"progress\" [attr.stroke]=\"progressModel.color\" [attr.stroke-width]=\"stroke\"\r\n                        fill=\"transparent\" [attr.r]=\"imageModel.NormalizedRadius\" [attr.cx]=\"radius\"\r\n                        [attr.cy]=\"radius\" />\r\n                    <circle class=\"progress\" [attr.stroke]=\"progressModel.filledColor\"\r\n                        [attr.stroke-dasharray]=\"imageModel.Circumference + ' ' + imageModel.Circumference\"\r\n                        [ngStyle]=\"{'stroke-dashoffset':strokeDashOffset}\" [attr.stroke-width]=\"stroke\"\r\n                        fill=\"transparent\" [attr.r]=\"imageModel.NormalizedRadius\" [attr.cx]=\"radius\"\r\n                        [attr.cy]=\"radius\" />\r\n\r\n                    <circle [attr.cx]=\"radius\" [attr.cy]=\"radius\" [attr.r]=\"imageModel.ImageRadius\"\r\n                        attr.fill=\"url('#{{imageModel.ImageId}}')\" />\r\n                </svg>\r\n\r\n                <ng-content></ng-content>\r\n            </div>            \r\n\r\n            <sfc-avatar-badge *ngFor=\"let badge of badges\" [model]=\"badge\" [radius]=\"radius\"\r\n                [stroke]=\"imageModel.Stroke\" [normalizedRadius]=\"imageModel.NormalizedRadius\"\r\n                [background]=\"progressModel.filledColor\">\r\n            </sfc-avatar-badge>\r\n        </div>\r\n\r\n        <sfc-stars *ngIf=\"stars\" [value]=\"starsValue\"></sfc-stars>\r\n    </div>\r\n\r\n    <div class=\"avatar-data-container\">\r\n        <div class=\"fullname\" [style.fontSize.px]=\"radius / FULLNAME_PART_VALUE\">\r\n            <span>{{data.firstName}} {{data.lastName}}</span>\r\n        </div>\r\n        <div class=\"title\" [style.fontSize.px]=\"radius / TITLE_PART_VALUE\">\r\n            <span>{{data.title}}</span>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host .container .avatar-image-container{display:flex;align-items:center;justify-content:center;flex-direction:column}:host .container .avatar-image-container .avatar{position:relative}:host .container .avatar-image-container .avatar .avatar-image{display:flex;align-items:center;justify-content:center;overflow:hidden}:host .container .avatar-image-container .avatar .avatar-image circle{transform-origin:50% 50%;transition:stroke-dashoffset .35s,stroke-width .3s}:host .container .avatar-image-container .avatar .avatar-image circle.progress{transform:rotate(-90deg)}:host .container .avatar-data-container{display:flex;flex-direction:column;align-items:center;font-size:1em;font-weight:700;-webkit-user-select:none;user-select:none}:host .container .avatar-data-container .fullname{transition:color .5s ease}:host .container .avatar-data-container .fullname,:host-context(.sfc-default-theme) :host .container .avatar-data-container .fullname{color:#545e61}:host-context(.sfc-dark-theme) :host .container .avatar-data-container .fullname{color:#f5f7fa}:host .container .avatar-data-container .title{color:#aab2bd}:host .container .avatar-data-container .fullname,:host .container .avatar-data-container .title{transition:color .5s ease}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: StarsComponent, selector: "sfc-stars", inputs: ["value", "count"] }, { kind: "component", type: AvatarBadgeComponent, selector: "sfc-avatar-badge", inputs: ["background", "model", "radius", "normalizedRadius", "stroke"] }] });
+AvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: AvatarComponent, selector: "sfc-avatar", inputs: { radius: "radius", stroke: "stroke", progress: "progress", progressModel: "progressModel", data: "data", stars: "stars", starsValue: "starsValue", badges: "badges" }, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"avatar-image-container\">\r\n        <div class=\"avatar\" (mouseenter)=\"stroke = imageModel.Stroke * STROKE_HOVER_VALUE\"\r\n            (mouseleave)=\"stroke = imageModel.Stroke\">\r\n\r\n            <div class=\"avatar-image\">\r\n                <svg [attr.height]=\"imageModel.Height\" [attr.width]=\"imageModel.Width\">\r\n                    <defs>\r\n                        <pattern id=\"{{imageModel.ImageId}}\" patternUnits=\"userSpaceOnUse\"\r\n                            [attr.height]=\"imageModel.Height\" [attr.width]=\"imageModel.Width\">\r\n                            <image [attr.height]=\"imageModel.Height\" [attr.width]=\"imageModel.Width\"\r\n                                [attr.xlink:href]=\"data.image\" preserveAspectRatio=\"xMidYMid slice\"></image>\r\n                        </pattern>\r\n                    </defs>\r\n                    <circle class=\"progress\" [attr.stroke]=\"progressModel.color\" [attr.stroke-width]=\"stroke\"\r\n                        fill=\"transparent\" [attr.r]=\"imageModel.NormalizedRadius\" [attr.cx]=\"radius\"\r\n                        [attr.cy]=\"radius\" />\r\n                    <circle class=\"progress\" [attr.stroke]=\"progressModel.filledColor\"\r\n                        [attr.stroke-dasharray]=\"imageModel.Circumference + ' ' + imageModel.Circumference\"\r\n                        [ngStyle]=\"{'stroke-dashoffset':strokeDashOffset}\" [attr.stroke-width]=\"stroke\"\r\n                        fill=\"transparent\" [attr.r]=\"imageModel.NormalizedRadius\" [attr.cx]=\"radius\"\r\n                        [attr.cy]=\"radius\" />\r\n\r\n                    <circle [attr.cx]=\"radius\" [attr.cy]=\"radius\" [attr.r]=\"imageModel.ImageRadius\"\r\n                        attr.fill=\"url('#{{imageModel.ImageId}}')\" />\r\n                </svg>\r\n\r\n                <ng-content></ng-content>\r\n            </div>            \r\n\r\n            <sfc-avatar-badge *ngFor=\"let badge of badges\" [model]=\"badge\" [radius]=\"radius\"\r\n                [stroke]=\"imageModel.Stroke\" [normalizedRadius]=\"imageModel.NormalizedRadius\"\r\n                [background]=\"progressModel.filledColor\">\r\n            </sfc-avatar-badge>\r\n        </div>\r\n\r\n        <sfc-stars *ngIf=\"stars\" [value]=\"starsValue\"></sfc-stars>\r\n    </div>\r\n\r\n    <div class=\"avatar-data-container\">\r\n        <div class=\"fullname\" [style.fontSize.px]=\"radius / FULLNAME_PART_VALUE\">\r\n            <span>{{data.firstName}} {{data.lastName}}</span>\r\n        </div>\r\n        <div class=\"title\" [style.fontSize.px]=\"radius / TITLE_PART_VALUE\">\r\n            <span>{{data.title}}</span>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host .container .avatar-image-container{display:flex;align-items:center;justify-content:center;flex-direction:column}:host .container .avatar-image-container .avatar{position:relative}:host .container .avatar-image-container .avatar .avatar-image{display:flex;align-items:center;justify-content:center;overflow:hidden}:host .container .avatar-image-container .avatar .avatar-image circle{transform-origin:50% 50%;transition:stroke-dashoffset .35s,stroke-width .3s}:host .container .avatar-image-container .avatar .avatar-image circle.progress{transform:rotate(-90deg)}:host .container .avatar-data-container{display:flex;flex-direction:column;align-items:center;font-size:1em;font-weight:700;-webkit-user-select:none;user-select:none}:host .container .avatar-data-container .fullname{text-align:center;transition:color .5s ease}:host .container .avatar-data-container .fullname,:host-context(.sfc-default-theme) :host .container .avatar-data-container .fullname{color:#545e61}:host-context(.sfc-dark-theme) :host .container .avatar-data-container .fullname{color:#f5f7fa}:host .container .avatar-data-container .title{color:#ffce54}:host .container .avatar-data-container .fullname,:host .container .avatar-data-container .title{transition:color .5s ease}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: StarsComponent, selector: "sfc-stars", inputs: ["value", "count"] }, { kind: "component", type: AvatarBadgeComponent, selector: "sfc-avatar-badge", inputs: ["background", "model", "radius", "normalizedRadius", "stroke"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AvatarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-avatar', template: "<div class=\"container\">\r\n    <div class=\"avatar-image-container\">\r\n        <div class=\"avatar\" (mouseenter)=\"stroke = imageModel.Stroke * STROKE_HOVER_VALUE\"\r\n            (mouseleave)=\"stroke = imageModel.Stroke\">\r\n\r\n            <div class=\"avatar-image\">\r\n                <svg [attr.height]=\"imageModel.Height\" [attr.width]=\"imageModel.Width\">\r\n                    <defs>\r\n                        <pattern id=\"{{imageModel.ImageId}}\" patternUnits=\"userSpaceOnUse\"\r\n                            [attr.height]=\"imageModel.Height\" [attr.width]=\"imageModel.Width\">\r\n                            <image [attr.height]=\"imageModel.Height\" [attr.width]=\"imageModel.Width\"\r\n                                [attr.xlink:href]=\"data.image\" preserveAspectRatio=\"xMidYMid slice\"></image>\r\n                        </pattern>\r\n                    </defs>\r\n                    <circle class=\"progress\" [attr.stroke]=\"progressModel.color\" [attr.stroke-width]=\"stroke\"\r\n                        fill=\"transparent\" [attr.r]=\"imageModel.NormalizedRadius\" [attr.cx]=\"radius\"\r\n                        [attr.cy]=\"radius\" />\r\n                    <circle class=\"progress\" [attr.stroke]=\"progressModel.filledColor\"\r\n                        [attr.stroke-dasharray]=\"imageModel.Circumference + ' ' + imageModel.Circumference\"\r\n                        [ngStyle]=\"{'stroke-dashoffset':strokeDashOffset}\" [attr.stroke-width]=\"stroke\"\r\n                        fill=\"transparent\" [attr.r]=\"imageModel.NormalizedRadius\" [attr.cx]=\"radius\"\r\n                        [attr.cy]=\"radius\" />\r\n\r\n                    <circle [attr.cx]=\"radius\" [attr.cy]=\"radius\" [attr.r]=\"imageModel.ImageRadius\"\r\n                        attr.fill=\"url('#{{imageModel.ImageId}}')\" />\r\n                </svg>\r\n\r\n                <ng-content></ng-content>\r\n            </div>            \r\n\r\n            <sfc-avatar-badge *ngFor=\"let badge of badges\" [model]=\"badge\" [radius]=\"radius\"\r\n                [stroke]=\"imageModel.Stroke\" [normalizedRadius]=\"imageModel.NormalizedRadius\"\r\n                [background]=\"progressModel.filledColor\">\r\n            </sfc-avatar-badge>\r\n        </div>\r\n\r\n        <sfc-stars *ngIf=\"stars\" [value]=\"starsValue\"></sfc-stars>\r\n    </div>\r\n\r\n    <div class=\"avatar-data-container\">\r\n        <div class=\"fullname\" [style.fontSize.px]=\"radius / FULLNAME_PART_VALUE\">\r\n            <span>{{data.firstName}} {{data.lastName}}</span>\r\n        </div>\r\n        <div class=\"title\" [style.fontSize.px]=\"radius / TITLE_PART_VALUE\">\r\n            <span>{{data.title}}</span>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host .container .avatar-image-container{display:flex;align-items:center;justify-content:center;flex-direction:column}:host .container .avatar-image-container .avatar{position:relative}:host .container .avatar-image-container .avatar .avatar-image{display:flex;align-items:center;justify-content:center;overflow:hidden}:host .container .avatar-image-container .avatar .avatar-image circle{transform-origin:50% 50%;transition:stroke-dashoffset .35s,stroke-width .3s}:host .container .avatar-image-container .avatar .avatar-image circle.progress{transform:rotate(-90deg)}:host .container .avatar-data-container{display:flex;flex-direction:column;align-items:center;font-size:1em;font-weight:700;-webkit-user-select:none;user-select:none}:host .container .avatar-data-container .fullname{transition:color .5s ease}:host .container .avatar-data-container .fullname,:host-context(.sfc-default-theme) :host .container .avatar-data-container .fullname{color:#545e61}:host-context(.sfc-dark-theme) :host .container .avatar-data-container .fullname{color:#f5f7fa}:host .container .avatar-data-container .title{color:#aab2bd}:host .container .avatar-data-container .fullname,:host .container .avatar-data-container .title{transition:color .5s ease}\n"] }]
+            args: [{ selector: 'sfc-avatar', template: "<div class=\"container\">\r\n    <div class=\"avatar-image-container\">\r\n        <div class=\"avatar\" (mouseenter)=\"stroke = imageModel.Stroke * STROKE_HOVER_VALUE\"\r\n            (mouseleave)=\"stroke = imageModel.Stroke\">\r\n\r\n            <div class=\"avatar-image\">\r\n                <svg [attr.height]=\"imageModel.Height\" [attr.width]=\"imageModel.Width\">\r\n                    <defs>\r\n                        <pattern id=\"{{imageModel.ImageId}}\" patternUnits=\"userSpaceOnUse\"\r\n                            [attr.height]=\"imageModel.Height\" [attr.width]=\"imageModel.Width\">\r\n                            <image [attr.height]=\"imageModel.Height\" [attr.width]=\"imageModel.Width\"\r\n                                [attr.xlink:href]=\"data.image\" preserveAspectRatio=\"xMidYMid slice\"></image>\r\n                        </pattern>\r\n                    </defs>\r\n                    <circle class=\"progress\" [attr.stroke]=\"progressModel.color\" [attr.stroke-width]=\"stroke\"\r\n                        fill=\"transparent\" [attr.r]=\"imageModel.NormalizedRadius\" [attr.cx]=\"radius\"\r\n                        [attr.cy]=\"radius\" />\r\n                    <circle class=\"progress\" [attr.stroke]=\"progressModel.filledColor\"\r\n                        [attr.stroke-dasharray]=\"imageModel.Circumference + ' ' + imageModel.Circumference\"\r\n                        [ngStyle]=\"{'stroke-dashoffset':strokeDashOffset}\" [attr.stroke-width]=\"stroke\"\r\n                        fill=\"transparent\" [attr.r]=\"imageModel.NormalizedRadius\" [attr.cx]=\"radius\"\r\n                        [attr.cy]=\"radius\" />\r\n\r\n                    <circle [attr.cx]=\"radius\" [attr.cy]=\"radius\" [attr.r]=\"imageModel.ImageRadius\"\r\n                        attr.fill=\"url('#{{imageModel.ImageId}}')\" />\r\n                </svg>\r\n\r\n                <ng-content></ng-content>\r\n            </div>            \r\n\r\n            <sfc-avatar-badge *ngFor=\"let badge of badges\" [model]=\"badge\" [radius]=\"radius\"\r\n                [stroke]=\"imageModel.Stroke\" [normalizedRadius]=\"imageModel.NormalizedRadius\"\r\n                [background]=\"progressModel.filledColor\">\r\n            </sfc-avatar-badge>\r\n        </div>\r\n\r\n        <sfc-stars *ngIf=\"stars\" [value]=\"starsValue\"></sfc-stars>\r\n    </div>\r\n\r\n    <div class=\"avatar-data-container\">\r\n        <div class=\"fullname\" [style.fontSize.px]=\"radius / FULLNAME_PART_VALUE\">\r\n            <span>{{data.firstName}} {{data.lastName}}</span>\r\n        </div>\r\n        <div class=\"title\" [style.fontSize.px]=\"radius / TITLE_PART_VALUE\">\r\n            <span>{{data.title}}</span>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host .container .avatar-image-container{display:flex;align-items:center;justify-content:center;flex-direction:column}:host .container .avatar-image-container .avatar{position:relative}:host .container .avatar-image-container .avatar .avatar-image{display:flex;align-items:center;justify-content:center;overflow:hidden}:host .container .avatar-image-container .avatar .avatar-image circle{transform-origin:50% 50%;transition:stroke-dashoffset .35s,stroke-width .3s}:host .container .avatar-image-container .avatar .avatar-image circle.progress{transform:rotate(-90deg)}:host .container .avatar-data-container{display:flex;flex-direction:column;align-items:center;font-size:1em;font-weight:700;-webkit-user-select:none;user-select:none}:host .container .avatar-data-container .fullname{text-align:center;transition:color .5s ease}:host .container .avatar-data-container .fullname,:host-context(.sfc-default-theme) :host .container .avatar-data-container .fullname{color:#545e61}:host-context(.sfc-dark-theme) :host .container .avatar-data-container .fullname{color:#f5f7fa}:host .container .avatar-data-container .title{color:#ffce54}:host .container .avatar-data-container .fullname,:host .container .avatar-data-container .title{transition:color .5s ease}\n"] }]
         }], propDecorators: { radius: [{
                 type: Input
             }], stroke: [{
@@ -1013,17 +1020,20 @@ function getProgressColorDynamicallyFunc(value, total) {
 class ProgressBaseComponent {
     constructor() {
         this.progress = 0;
+        this.disabled = false;
         this.getColor = getProgressColorDefaultFunc;
     }
 }
 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 });
+ProgressBaseComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: ProgressBaseComponent, inputs: { progress: "progress", background: "background", disabled: "disabled", 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
             }], background: [{
                 type: Input
+            }], disabled: [{
+                type: Input
             }], getColor: [{
                 type: Input
             }] } });
@@ -1047,7 +1057,7 @@ class ProgressLineComponent extends ProgressBaseComponent {
     get progressStyles() {
         return {
             width: getCssLikeValue((this.progress / this.total) * CommonConstants.FULL_PERCENTAGE, UIConstants.CSS_PERCENTAGE),
-            backgroundColor: this.getColor(this.progress, this.total)
+            backgroundColor: this.disabled ? '#bdbdbd' : this.getColor(this.progress, this.total)
         };
     }
 }
@@ -1142,10 +1152,10 @@ class TagsComponent {
     }
 }
 TagsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TagsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TagsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TagsComponent, selector: "sfc-tags", inputs: { tags: "tags" }, outputs: { remove: "remove" }, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"content\">\r\n        <sfc-tag *ngFor=\"let tag of tags\" [model]=\"tag\" [sfcComponentSize] [customSize]=\"0.8\"\r\n            (remove)=\"onRemove($event)\">\r\n        </sfc-tag>\r\n    </div>\r\n</div>", styles: [":host{display:inline-block}:host .container .content{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}:host .container .content sfc-tag{margin:.2em}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.ComponentSizeDirective, selector: "[sfcComponentSize]", inputs: ["sfcComponentSize", "customSize"] }, { kind: "component", type: i1$1.TagComponent, selector: "sfc-tag", inputs: ["model", "disabled"], outputs: ["remove"] }] });
+TagsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TagsComponent, selector: "sfc-tags", inputs: { tags: "tags" }, outputs: { remove: "remove" }, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"content\">\r\n        <sfc-tag *ngFor=\"let tag of tags\" [model]=\"tag\" [sfcComponentSize] [customSize]=\"0.8\"\r\n            (remove)=\"onRemove($event)\">\r\n        </sfc-tag>\r\n    </div>\r\n</div>", styles: [":host{display:inline-block}:host .container .content{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0}:host .container .content sfc-tag{margin:.2em}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.ComponentSizeDirective, selector: "[sfcComponentSize]", inputs: ["sfcComponentSize", "customSize"] }, { kind: "component", type: i1$1.TagComponent, selector: "sfc-tag", inputs: ["model", "disabled"], outputs: ["remove"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TagsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-tags', template: "<div class=\"container\">\r\n    <div class=\"content\">\r\n        <sfc-tag *ngFor=\"let tag of tags\" [model]=\"tag\" [sfcComponentSize] [customSize]=\"0.8\"\r\n            (remove)=\"onRemove($event)\">\r\n        </sfc-tag>\r\n    </div>\r\n</div>", styles: [":host{display:inline-block}:host .container .content{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}:host .container .content sfc-tag{margin:.2em}\n"] }]
+            args: [{ selector: 'sfc-tags', template: "<div class=\"container\">\r\n    <div class=\"content\">\r\n        <sfc-tag *ngFor=\"let tag of tags\" [model]=\"tag\" [sfcComponentSize] [customSize]=\"0.8\"\r\n            (remove)=\"onRemove($event)\">\r\n        </sfc-tag>\r\n    </div>\r\n</div>", styles: [":host{display:inline-block}:host .container .content{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0}:host .container .content sfc-tag{margin:.2em}\n"] }]
         }], propDecorators: { tags: [{
                 type: Input
             }], remove: [{
@@ -2137,7 +2147,7 @@ class SortingColumnComponent {
         });
     }
     ngOnDestroy() {
-        this._subscription.unsubscribe();
+        this._subscription?.unsubscribe();
     }
 }
 SortingColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SortingColumnComponent, deps: [{ token: i1$1.SortingService }], target: i0.ɵɵFactoryTarget.Component });
@@ -2492,10 +2502,10 @@ class TableComponent {
     }
 }
 TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TableComponent, deps: [{ token: ColumnsToggleService }, { token: WINDOW }, { token: TableSelectService }, { token: i1$1.SortingService }, { token: i0.ChangeDetectorRef }, { token: i1$1.ResizeService }, { token: i0.IterableDiffers }], target: i0.ɵɵFactoryTarget.Component });
-TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TableComponent, selector: "sfc-table", inputs: { position: "position", delimeter: "delimeter", dataType: "dataType", dataToggle: "dataToggle", showColumns: "showColumns", columnsToggle: "columnsToggle", columnsShowOnInit: "columnsShowOnInit", pagination: "pagination", sequence: "sequence", expanded: "expanded", notFoundLabel: "notFoundLabel", loadMoreLabel: "loadMoreLabel", showTotal: "showTotal", totalLabel: "totalLabel", paginationCount: "paginationCount", paginationLimits: "paginationLimits", showLoading: "showLoading", columnContent: "columnContent", rowContent: "rowContent", cardContent: "cardContent", data: "data", data$: "data$", columns: "columns", showColumnsLabel: "showColumnsLabel", hideColumnsLabel: "hideColumnsLabel", resize: "resize", loadType: "loadType", loader: "loader", filter: "filter", predicate$: "predicate$", selectable: "selectable", selectOnClick: "selectOnClick", selectMultiple: "selectMultiple", dataListLabel: "dataListLabel", dataCardsLabel: "dataCardsLabel" }, outputs: { selected: "selected" }, host: { properties: { "class": "this.dataType", "class.loading": "this.loading" } }, providers: [SortingService, TableSelectService, ColumnsToggleService, ResizeService], queries: [{ propertyName: "templates", predicate: TemplateReferenceDirective, read: TemplateReferenceDirective }], ngImport: i0, template: "<div class=\"container\">\r\n    <div *ngIf=\"showLoading\" class=\"table-loader\"></div>\r\n    <div class=\"columns-container\">\r\n        <div class=\"columns-actions\">\r\n            <div class=\"left\">\r\n                <sfc-columns-toggle *ngIf=\"columnsToggle\" [showLabel]=\"showColumnsLabel\" [hideLabel]=\"hideColumnsLabel\">\r\n                </sfc-columns-toggle>\r\n            </div>\r\n\r\n            <div class=\"right\">\r\n                <p *ngIf=\"showTotal\">{{totalLabel}}: <span>{{total}}</span></p>\r\n                <sfc-toggle-switcher *ngIf=\"dataToggle\" [active]=\"dataType === TableDataType.Cards\"\r\n                    [leftModel]=\"toggleSwitcherLeftModel\" [rightModel]=\"toggleSwitcherRightModel\"\r\n                    (click)=\"onDataTypeToggle()\">\r\n                </sfc-toggle-switcher>\r\n            </div>\r\n        </div>\r\n\r\n        <div *ngIf=\"showColumns && columnsToggleService.show\" class=\"columns\">\r\n            <div class=\"column\" [style.justifyContent]=\"position\" [style.minWidth]=\"column.calculatedWidth\"\r\n                *ngFor=\"let column of tableColumns\">\r\n                <ng-container [ngSwitch]=\"column.type\">\r\n                    <sfc-selectable-table-column *ngSwitchCase=\"TableColumnType.Selectable\"\r\n                        [selected]=\"allRowsSelected\">\r\n                    </sfc-selectable-table-column>\r\n\r\n                    <sfc-sorting-column *ngSwitchDefault [model]=\"column.sorting!\" [id]=\"column.field\">\r\n\r\n                        <sfc-template-content [referenceContent]=\"columnContent\" [templatesContent]=\"templates\"\r\n                            [templateType]=\"TableTemplate.Column\" [defaultContent]=\"defaultColumn\"\r\n                            [contextData]=\"column\">\r\n                        </sfc-template-content>\r\n\r\n                        <ng-template #defaultColumn>\r\n                            <sfc-default-table-column [model]=\"column\"></sfc-default-table-column>\r\n                        </ng-template>\r\n\r\n                    </sfc-sorting-column>\r\n                </ng-container>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <sfc-delimeter *ngIf=\"delimeter\" class=\"table-delimeter\"></sfc-delimeter>\r\n\r\n    <div class=\"rows-container\">\r\n        <sfc-load-container [id]=\"loadContainerId\" [type]=\"LoadContainerType.Table\" [model]=\"loadModel\"\r\n            [paginationCount]=\"paginationCount\" [paginationLimits]=\"paginationLimits\" [showLoading]=\"showLoading\"\r\n            (handleSuccess)=\"handleSuccess($event)\" (handleLoading)=\"loading = $event\" [emptyLabel]=\"notFoundLabel\"\r\n            [loadMoreLabel]=\"loadMoreLabel\">\r\n            <div class=\"row\" *ngFor=\"let item of items; index as i;\">\r\n                <ng-container [ngSwitch]=\"dataType\">\r\n                    <sfc-template-content *ngSwitchCase=\"TableDataType.Rows\" [referenceContent]=\"rowContent\"\r\n                        [templatesContent]=\"templates\" [templateType]=\"TableTemplate.Row\" [defaultContent]=\"defaultRow\"\r\n                        [contextData]=\"{model: item, columns: tableColumns, position: position}\">\r\n                    </sfc-template-content>\r\n\r\n                    <ng-template #defaultRow>\r\n                        <sfc-default-table-row [columns]=\"tableColumns\" [model]=\"item\" [position]=\"position\"\r\n                            [selectOnClick]=\"selectOnClick\">\r\n                        </sfc-default-table-row>\r\n                    </ng-template>\r\n\r\n                    <sfc-template-content *ngSwitchCase=\"TableDataType.Cards\" [referenceContent]=\"cardContent\"\r\n                        [templatesContent]=\"templates\" [templateType]=\"TableTemplate.Card\"\r\n                        [defaultContent]=\"defaultCard\" [contextData]=\"{model: item, columns: tableColumns}\">\r\n                    </sfc-template-content>\r\n\r\n                    <ng-template #defaultCard>\r\n                        <sfc-default-table-card [columns]=\"tableColumns\" [model]=\"item\" [selectOnClick]=\"selectOnClick\">\r\n                        </sfc-default-table-card>\r\n                    </ng-template>\r\n                </ng-container>\r\n            </div>\r\n\r\n        </sfc-load-container>\r\n    </div>\r\n</div>", styles: [":host .container{display:block;margin:2em auto;width:90%;position:relative}:host .container .columns-container{display:flex;flex-flow:row wrap;transition:.5s;justify-content:space-between}:host .container .columns-container .columns-actions{display:flex;align-items:center;width:100%}:host .container .columns-container .columns-actions .right{display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:center;margin-left:auto}:host .container .columns-container .columns-actions .right>p{transition:color .5s ease;margin:0;font-size:.8em;padding-right:1em;font-weight:700;-webkit-user-select:none;user-select:none;text-align:center}:host .container .columns-container .columns-actions .right>p,:host-context(.sfc-default-theme) :host .container .columns-container .columns-actions .right>p{color:#545e61}:host-context(.sfc-dark-theme) :host .container .columns-container .columns-actions .right>p{color:#fff}:host .container .columns-container .columns-actions .right>p span{font-size:1.1em;color:#ffce54}:host .container .columns-container .columns{text-align:center;padding:.5em;width:100%;display:flex;flex-flow:row wrap}:host .container .columns-container .columns .column{text-align:center;padding:.5em;display:flex;align-items:center;justify-content:center;box-sizing:border-box}:host .container .rows-container{display:flex;flex-wrap:wrap;justify-content:center;transition:.5s;margin-block:1em 2em}:host .container .rows-container sfc-load-container ::ng-deep>.container .content{background:transparent}:host .container .rows-container sfc-load-container ::ng-deep>.container .content .items{gap:1em;margin:1em 0}:host .container .rows-container sfc-load-container.loading{cursor:initial;z-index:9999}:host .container .rows-container sfc-load-container.loading .preloader{transition:background .5s ease}:host .container .rows-container sfc-load-container.loading .preloader,:host-context(.sfc-default-theme) :host .container .rows-container sfc-load-container.loading .preloader{background:#fff}:host-context(.sfc-dark-theme) :host .container .rows-container sfc-load-container.loading .preloader{background:transparent}:host .container .rows-container .row{display:contents}:host.loading .container .table-loader{position:relative;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;z-index:9998;position:absolute;transition:background-color .5s ease;opacity:.7}:host.loading .container .table-loader,:host-context(.sfc-default-theme) :host.loading .container .table-loader{background-color:#fff}:host-context(.sfc-dark-theme) :host.loading .container .table-loader{background-color:transparent}:host.rows .container .rows-container .row{display:block;width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i1$1.DelimeterComponent, selector: "sfc-delimeter", inputs: ["label", "direction"] }, { kind: "component", type: i1$1.TemplateContentComponent, selector: "sfc-template-content", inputs: ["contextData", "referenceContent", "templateType", "templatesContent", "defaultContent"] }, { kind: "component", type: i1$1.ToggleSwitcherComponent, selector: "sfc-toggle-switcher", inputs: ["active", "disabled", "leftModel", "rightModel"], outputs: ["toggle"] }, { kind: "component", type: i1$1.LoadContainerComponent, selector: "sfc-load-container", inputs: ["id", "type", "open", "loadMore", "loadMoreLabel", "showEmpty", "emptyLabel", "model", "scrollTarget", "paginationCount", "paginationLimits", "showLoading"], outputs: ["handleError", "handleSuccess", "handleLoading"] }, { kind: "component", type: DefaultTableColumnComponent, selector: "sfc-default-table-column", inputs: ["model"] }, { kind: "component", type: SelectableTableColumnComponent, selector: "sfc-selectable-table-column", inputs: ["selected"] }, { kind: "component", type: ColumnsToggleComponent, selector: "sfc-columns-toggle", inputs: ["showLabel", "hideLabel"] }, { kind: "component", type: SortingColumnComponent, selector: "sfc-sorting-column", inputs: ["id", "model"] }, { kind: "component", type: DefaultTableRowComponent, selector: "sfc-default-table-row" }, { kind: "component", type: DefaultTableCardComponent, selector: "sfc-default-table-card" }] });
+TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TableComponent, selector: "sfc-table", inputs: { position: "position", delimeter: "delimeter", dataType: "dataType", dataToggle: "dataToggle", showColumns: "showColumns", columnsToggle: "columnsToggle", columnsShowOnInit: "columnsShowOnInit", pagination: "pagination", sequence: "sequence", expanded: "expanded", notFoundLabel: "notFoundLabel", loadMoreLabel: "loadMoreLabel", showTotal: "showTotal", totalLabel: "totalLabel", paginationCount: "paginationCount", paginationLimits: "paginationLimits", showLoading: "showLoading", columnContent: "columnContent", rowContent: "rowContent", cardContent: "cardContent", data: "data", data$: "data$", columns: "columns", showColumnsLabel: "showColumnsLabel", hideColumnsLabel: "hideColumnsLabel", resize: "resize", loadType: "loadType", loader: "loader", filter: "filter", predicate$: "predicate$", selectable: "selectable", selectOnClick: "selectOnClick", selectMultiple: "selectMultiple", dataListLabel: "dataListLabel", dataCardsLabel: "dataCardsLabel" }, outputs: { selected: "selected" }, host: { properties: { "class": "this.dataType", "class.loading": "this.loading" } }, providers: [SortingService, TableSelectService, ColumnsToggleService, ResizeService], queries: [{ propertyName: "templates", predicate: TemplateReferenceDirective, read: TemplateReferenceDirective }], ngImport: i0, template: "<div class=\"container\">\r\n    <div *ngIf=\"showLoading\" class=\"table-loader\"></div>\r\n    <div class=\"columns-container\">\r\n        <div class=\"columns-actions\">\r\n            <div class=\"left\">\r\n                <sfc-columns-toggle *ngIf=\"columnsToggle\" [showLabel]=\"showColumnsLabel\" [hideLabel]=\"hideColumnsLabel\">\r\n                </sfc-columns-toggle>\r\n            </div>\r\n\r\n            <div class=\"right\">\r\n                <p *ngIf=\"showTotal\">{{totalLabel}}: <span>{{total}}</span></p>\r\n                <sfc-toggle-switcher *ngIf=\"dataToggle\" [active]=\"dataType === TableDataType.Cards\"\r\n                    [leftModel]=\"toggleSwitcherLeftModel\" [rightModel]=\"toggleSwitcherRightModel\"\r\n                    (click)=\"onDataTypeToggle()\">\r\n                </sfc-toggle-switcher>\r\n            </div>\r\n        </div>\r\n\r\n        <div *ngIf=\"showColumns && columnsToggleService.show\" class=\"columns\">\r\n            <div class=\"column\" [style.justifyContent]=\"position\" [style.minWidth]=\"column.calculatedWidth\"\r\n                *ngFor=\"let column of tableColumns\">\r\n                <ng-container [ngSwitch]=\"column.type\">\r\n\r\n                    <ng-container *ngIf=\"selectMultiple\">\r\n                        <sfc-selectable-table-column *ngSwitchCase=\"TableColumnType.Selectable\"\r\n                            [selected]=\"allRowsSelected\">\r\n                        </sfc-selectable-table-column>\r\n                    </ng-container>\r\n\r\n                    <sfc-sorting-column *ngSwitchDefault [model]=\"column.sorting!\" [id]=\"column.field\">\r\n\r\n                        <sfc-template-content [referenceContent]=\"columnContent\" [templatesContent]=\"templates\"\r\n                            [templateType]=\"TableTemplate.Column\" [defaultContent]=\"defaultColumn\"\r\n                            [contextData]=\"column\">\r\n                        </sfc-template-content>\r\n\r\n                        <ng-template #defaultColumn>\r\n                            <sfc-default-table-column [model]=\"column\"></sfc-default-table-column>\r\n                        </ng-template>\r\n\r\n                    </sfc-sorting-column>\r\n                </ng-container>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <sfc-delimeter *ngIf=\"delimeter\" class=\"table-delimeter\"></sfc-delimeter>\r\n\r\n    <div class=\"rows-container\">\r\n        <sfc-load-container [id]=\"loadContainerId\" [type]=\"LoadContainerType.Table\" [model]=\"loadModel\"\r\n            [paginationCount]=\"paginationCount\" [paginationLimits]=\"paginationLimits\" [showLoading]=\"showLoading\"\r\n            (handleSuccess)=\"handleSuccess($event)\" (handleLoading)=\"loading = $event\" [emptyLabel]=\"notFoundLabel\"\r\n            [loadMoreLabel]=\"loadMoreLabel\">\r\n            <div class=\"row\" *ngFor=\"let item of items; index as i;\">\r\n                <ng-container [ngSwitch]=\"dataType\">\r\n                    <sfc-template-content *ngSwitchCase=\"TableDataType.Rows\" [referenceContent]=\"rowContent\"\r\n                        [templatesContent]=\"templates\" [templateType]=\"TableTemplate.Row\" [defaultContent]=\"defaultRow\"\r\n                        [contextData]=\"{model: item, columns: tableColumns, position: position}\">\r\n                    </sfc-template-content>\r\n\r\n                    <ng-template #defaultRow>\r\n                        <sfc-default-table-row [columns]=\"tableColumns\" [model]=\"item\" [position]=\"position\"\r\n                            [selectOnClick]=\"selectOnClick\">\r\n                        </sfc-default-table-row>\r\n                    </ng-template>\r\n\r\n                    <sfc-template-content *ngSwitchCase=\"TableDataType.Cards\" [referenceContent]=\"cardContent\"\r\n                        [templatesContent]=\"templates\" [templateType]=\"TableTemplate.Card\"\r\n                        [defaultContent]=\"defaultCard\" [contextData]=\"{model: item, columns: tableColumns}\">\r\n                    </sfc-template-content>\r\n\r\n                    <ng-template #defaultCard>\r\n                        <sfc-default-table-card [columns]=\"tableColumns\" [model]=\"item\" [selectOnClick]=\"selectOnClick\">\r\n                        </sfc-default-table-card>\r\n                    </ng-template>\r\n                </ng-container>\r\n            </div>\r\n\r\n        </sfc-load-container>\r\n    </div>\r\n</div>", styles: [":host .container{display:block;margin:2em auto;width:90%;position:relative}:host .container .columns-container{display:flex;flex-flow:row wrap;transition:.5s;justify-content:space-between}:host .container .columns-container .columns-actions{display:flex;align-items:center;width:100%}:host .container .columns-container .columns-actions .right{display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:center;margin-left:auto}:host .container .columns-container .columns-actions .right>p{transition:color .5s ease;margin:0;font-size:.8em;padding-right:1em;font-weight:700;-webkit-user-select:none;user-select:none;text-align:center}:host .container .columns-container .columns-actions .right>p,:host-context(.sfc-default-theme) :host .container .columns-container .columns-actions .right>p{color:#545e61}:host-context(.sfc-dark-theme) :host .container .columns-container .columns-actions .right>p{color:#fff}:host .container .columns-container .columns-actions .right>p span{font-size:1.1em;color:#ffce54}:host .container .columns-container .columns{text-align:center;padding:.5em;width:100%;display:flex;flex-flow:row wrap}:host .container .columns-container .columns .column{text-align:center;padding:.5em;display:flex;align-items:center;justify-content:center;box-sizing:border-box}:host .container .rows-container{display:flex;flex-wrap:wrap;justify-content:center;transition:.5s;margin-block:1em 2em}:host .container .rows-container sfc-load-container ::ng-deep>.container .content{background:transparent}:host .container .rows-container sfc-load-container ::ng-deep>.container .content .items{gap:1em;margin:1em 0}:host .container .rows-container sfc-load-container.loading{cursor:initial;z-index:9999}:host .container .rows-container sfc-load-container.loading .preloader{transition:background .5s ease}:host .container .rows-container sfc-load-container.loading .preloader,:host-context(.sfc-default-theme) :host .container .rows-container sfc-load-container.loading .preloader{background:#fff}:host-context(.sfc-dark-theme) :host .container .rows-container sfc-load-container.loading .preloader{background:transparent}:host .container .rows-container .row{display:contents}:host.loading .container .table-loader{position:relative;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;z-index:9998;position:absolute;transition:background-color .5s ease;opacity:.7}:host.loading .container .table-loader,:host-context(.sfc-default-theme) :host.loading .container .table-loader{background-color:#fff}:host-context(.sfc-dark-theme) :host.loading .container .table-loader{background-color:transparent}:host.rows .container .rows-container .row{display:block;width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i1$1.DelimeterComponent, selector: "sfc-delimeter", inputs: ["label", "direction"] }, { kind: "component", type: i1$1.TemplateContentComponent, selector: "sfc-template-content", inputs: ["contextData", "referenceContent", "templateType", "templatesContent", "defaultContent"] }, { kind: "component", type: i1$1.ToggleSwitcherComponent, selector: "sfc-toggle-switcher", inputs: ["active", "disabled", "leftModel", "rightModel"], outputs: ["toggle"] }, { kind: "component", type: i1$1.LoadContainerComponent, selector: "sfc-load-container", inputs: ["id", "type", "open", "loadMore", "loadMoreLabel", "showEmpty", "emptyLabel", "model", "scrollTarget", "paginationCount", "paginationLimits", "showLoading"], outputs: ["handleError", "handleSuccess", "handleLoading"] }, { kind: "component", type: DefaultTableColumnComponent, selector: "sfc-default-table-column", inputs: ["model"] }, { kind: "component", type: SelectableTableColumnComponent, selector: "sfc-selectable-table-column", inputs: ["selected"] }, { kind: "component", type: ColumnsToggleComponent, selector: "sfc-columns-toggle", inputs: ["showLabel", "hideLabel"] }, { kind: "component", type: SortingColumnComponent, selector: "sfc-sorting-column", inputs: ["id", "model"] }, { kind: "component", type: DefaultTableRowComponent, selector: "sfc-default-table-row" }, { kind: "component", type: DefaultTableCardComponent, selector: "sfc-default-table-card" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-table', providers: [SortingService, TableSelectService, ColumnsToggleService, ResizeService], template: "<div class=\"container\">\r\n    <div *ngIf=\"showLoading\" class=\"table-loader\"></div>\r\n    <div class=\"columns-container\">\r\n        <div class=\"columns-actions\">\r\n            <div class=\"left\">\r\n                <sfc-columns-toggle *ngIf=\"columnsToggle\" [showLabel]=\"showColumnsLabel\" [hideLabel]=\"hideColumnsLabel\">\r\n                </sfc-columns-toggle>\r\n            </div>\r\n\r\n            <div class=\"right\">\r\n                <p *ngIf=\"showTotal\">{{totalLabel}}: <span>{{total}}</span></p>\r\n                <sfc-toggle-switcher *ngIf=\"dataToggle\" [active]=\"dataType === TableDataType.Cards\"\r\n                    [leftModel]=\"toggleSwitcherLeftModel\" [rightModel]=\"toggleSwitcherRightModel\"\r\n                    (click)=\"onDataTypeToggle()\">\r\n                </sfc-toggle-switcher>\r\n            </div>\r\n        </div>\r\n\r\n        <div *ngIf=\"showColumns && columnsToggleService.show\" class=\"columns\">\r\n            <div class=\"column\" [style.justifyContent]=\"position\" [style.minWidth]=\"column.calculatedWidth\"\r\n                *ngFor=\"let column of tableColumns\">\r\n                <ng-container [ngSwitch]=\"column.type\">\r\n                    <sfc-selectable-table-column *ngSwitchCase=\"TableColumnType.Selectable\"\r\n                        [selected]=\"allRowsSelected\">\r\n                    </sfc-selectable-table-column>\r\n\r\n                    <sfc-sorting-column *ngSwitchDefault [model]=\"column.sorting!\" [id]=\"column.field\">\r\n\r\n                        <sfc-template-content [referenceContent]=\"columnContent\" [templatesContent]=\"templates\"\r\n                            [templateType]=\"TableTemplate.Column\" [defaultContent]=\"defaultColumn\"\r\n                            [contextData]=\"column\">\r\n                        </sfc-template-content>\r\n\r\n                        <ng-template #defaultColumn>\r\n                            <sfc-default-table-column [model]=\"column\"></sfc-default-table-column>\r\n                        </ng-template>\r\n\r\n                    </sfc-sorting-column>\r\n                </ng-container>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <sfc-delimeter *ngIf=\"delimeter\" class=\"table-delimeter\"></sfc-delimeter>\r\n\r\n    <div class=\"rows-container\">\r\n        <sfc-load-container [id]=\"loadContainerId\" [type]=\"LoadContainerType.Table\" [model]=\"loadModel\"\r\n            [paginationCount]=\"paginationCount\" [paginationLimits]=\"paginationLimits\" [showLoading]=\"showLoading\"\r\n            (handleSuccess)=\"handleSuccess($event)\" (handleLoading)=\"loading = $event\" [emptyLabel]=\"notFoundLabel\"\r\n            [loadMoreLabel]=\"loadMoreLabel\">\r\n            <div class=\"row\" *ngFor=\"let item of items; index as i;\">\r\n                <ng-container [ngSwitch]=\"dataType\">\r\n                    <sfc-template-content *ngSwitchCase=\"TableDataType.Rows\" [referenceContent]=\"rowContent\"\r\n                        [templatesContent]=\"templates\" [templateType]=\"TableTemplate.Row\" [defaultContent]=\"defaultRow\"\r\n                        [contextData]=\"{model: item, columns: tableColumns, position: position}\">\r\n                    </sfc-template-content>\r\n\r\n                    <ng-template #defaultRow>\r\n                        <sfc-default-table-row [columns]=\"tableColumns\" [model]=\"item\" [position]=\"position\"\r\n                            [selectOnClick]=\"selectOnClick\">\r\n                        </sfc-default-table-row>\r\n                    </ng-template>\r\n\r\n                    <sfc-template-content *ngSwitchCase=\"TableDataType.Cards\" [referenceContent]=\"cardContent\"\r\n                        [templatesContent]=\"templates\" [templateType]=\"TableTemplate.Card\"\r\n                        [defaultContent]=\"defaultCard\" [contextData]=\"{model: item, columns: tableColumns}\">\r\n                    </sfc-template-content>\r\n\r\n                    <ng-template #defaultCard>\r\n                        <sfc-default-table-card [columns]=\"tableColumns\" [model]=\"item\" [selectOnClick]=\"selectOnClick\">\r\n                        </sfc-default-table-card>\r\n                    </ng-template>\r\n                </ng-container>\r\n            </div>\r\n\r\n        </sfc-load-container>\r\n    </div>\r\n</div>", styles: [":host .container{display:block;margin:2em auto;width:90%;position:relative}:host .container .columns-container{display:flex;flex-flow:row wrap;transition:.5s;justify-content:space-between}:host .container .columns-container .columns-actions{display:flex;align-items:center;width:100%}:host .container .columns-container .columns-actions .right{display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:center;margin-left:auto}:host .container .columns-container .columns-actions .right>p{transition:color .5s ease;margin:0;font-size:.8em;padding-right:1em;font-weight:700;-webkit-user-select:none;user-select:none;text-align:center}:host .container .columns-container .columns-actions .right>p,:host-context(.sfc-default-theme) :host .container .columns-container .columns-actions .right>p{color:#545e61}:host-context(.sfc-dark-theme) :host .container .columns-container .columns-actions .right>p{color:#fff}:host .container .columns-container .columns-actions .right>p span{font-size:1.1em;color:#ffce54}:host .container .columns-container .columns{text-align:center;padding:.5em;width:100%;display:flex;flex-flow:row wrap}:host .container .columns-container .columns .column{text-align:center;padding:.5em;display:flex;align-items:center;justify-content:center;box-sizing:border-box}:host .container .rows-container{display:flex;flex-wrap:wrap;justify-content:center;transition:.5s;margin-block:1em 2em}:host .container .rows-container sfc-load-container ::ng-deep>.container .content{background:transparent}:host .container .rows-container sfc-load-container ::ng-deep>.container .content .items{gap:1em;margin:1em 0}:host .container .rows-container sfc-load-container.loading{cursor:initial;z-index:9999}:host .container .rows-container sfc-load-container.loading .preloader{transition:background .5s ease}:host .container .rows-container sfc-load-container.loading .preloader,:host-context(.sfc-default-theme) :host .container .rows-container sfc-load-container.loading .preloader{background:#fff}:host-context(.sfc-dark-theme) :host .container .rows-container sfc-load-container.loading .preloader{background:transparent}:host .container .rows-container .row{display:contents}:host.loading .container .table-loader{position:relative;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;z-index:9998;position:absolute;transition:background-color .5s ease;opacity:.7}:host.loading .container .table-loader,:host-context(.sfc-default-theme) :host.loading .container .table-loader{background-color:#fff}:host-context(.sfc-dark-theme) :host.loading .container .table-loader{background-color:transparent}:host.rows .container .rows-container .row{display:block;width:100%}\n"] }]
+            args: [{ selector: 'sfc-table', providers: [SortingService, TableSelectService, ColumnsToggleService, ResizeService], template: "<div class=\"container\">\r\n    <div *ngIf=\"showLoading\" class=\"table-loader\"></div>\r\n    <div class=\"columns-container\">\r\n        <div class=\"columns-actions\">\r\n            <div class=\"left\">\r\n                <sfc-columns-toggle *ngIf=\"columnsToggle\" [showLabel]=\"showColumnsLabel\" [hideLabel]=\"hideColumnsLabel\">\r\n                </sfc-columns-toggle>\r\n            </div>\r\n\r\n            <div class=\"right\">\r\n                <p *ngIf=\"showTotal\">{{totalLabel}}: <span>{{total}}</span></p>\r\n                <sfc-toggle-switcher *ngIf=\"dataToggle\" [active]=\"dataType === TableDataType.Cards\"\r\n                    [leftModel]=\"toggleSwitcherLeftModel\" [rightModel]=\"toggleSwitcherRightModel\"\r\n                    (click)=\"onDataTypeToggle()\">\r\n                </sfc-toggle-switcher>\r\n            </div>\r\n        </div>\r\n\r\n        <div *ngIf=\"showColumns && columnsToggleService.show\" class=\"columns\">\r\n            <div class=\"column\" [style.justifyContent]=\"position\" [style.minWidth]=\"column.calculatedWidth\"\r\n                *ngFor=\"let column of tableColumns\">\r\n                <ng-container [ngSwitch]=\"column.type\">\r\n\r\n                    <ng-container *ngIf=\"selectMultiple\">\r\n                        <sfc-selectable-table-column *ngSwitchCase=\"TableColumnType.Selectable\"\r\n                            [selected]=\"allRowsSelected\">\r\n                        </sfc-selectable-table-column>\r\n                    </ng-container>\r\n\r\n                    <sfc-sorting-column *ngSwitchDefault [model]=\"column.sorting!\" [id]=\"column.field\">\r\n\r\n                        <sfc-template-content [referenceContent]=\"columnContent\" [templatesContent]=\"templates\"\r\n                            [templateType]=\"TableTemplate.Column\" [defaultContent]=\"defaultColumn\"\r\n                            [contextData]=\"column\">\r\n                        </sfc-template-content>\r\n\r\n                        <ng-template #defaultColumn>\r\n                            <sfc-default-table-column [model]=\"column\"></sfc-default-table-column>\r\n                        </ng-template>\r\n\r\n                    </sfc-sorting-column>\r\n                </ng-container>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <sfc-delimeter *ngIf=\"delimeter\" class=\"table-delimeter\"></sfc-delimeter>\r\n\r\n    <div class=\"rows-container\">\r\n        <sfc-load-container [id]=\"loadContainerId\" [type]=\"LoadContainerType.Table\" [model]=\"loadModel\"\r\n            [paginationCount]=\"paginationCount\" [paginationLimits]=\"paginationLimits\" [showLoading]=\"showLoading\"\r\n            (handleSuccess)=\"handleSuccess($event)\" (handleLoading)=\"loading = $event\" [emptyLabel]=\"notFoundLabel\"\r\n            [loadMoreLabel]=\"loadMoreLabel\">\r\n            <div class=\"row\" *ngFor=\"let item of items; index as i;\">\r\n                <ng-container [ngSwitch]=\"dataType\">\r\n                    <sfc-template-content *ngSwitchCase=\"TableDataType.Rows\" [referenceContent]=\"rowContent\"\r\n                        [templatesContent]=\"templates\" [templateType]=\"TableTemplate.Row\" [defaultContent]=\"defaultRow\"\r\n                        [contextData]=\"{model: item, columns: tableColumns, position: position}\">\r\n                    </sfc-template-content>\r\n\r\n                    <ng-template #defaultRow>\r\n                        <sfc-default-table-row [columns]=\"tableColumns\" [model]=\"item\" [position]=\"position\"\r\n                            [selectOnClick]=\"selectOnClick\">\r\n                        </sfc-default-table-row>\r\n                    </ng-template>\r\n\r\n                    <sfc-template-content *ngSwitchCase=\"TableDataType.Cards\" [referenceContent]=\"cardContent\"\r\n                        [templatesContent]=\"templates\" [templateType]=\"TableTemplate.Card\"\r\n                        [defaultContent]=\"defaultCard\" [contextData]=\"{model: item, columns: tableColumns}\">\r\n                    </sfc-template-content>\r\n\r\n                    <ng-template #defaultCard>\r\n                        <sfc-default-table-card [columns]=\"tableColumns\" [model]=\"item\" [selectOnClick]=\"selectOnClick\">\r\n                        </sfc-default-table-card>\r\n                    </ng-template>\r\n                </ng-container>\r\n            </div>\r\n\r\n        </sfc-load-container>\r\n    </div>\r\n</div>", styles: [":host .container{display:block;margin:2em auto;width:90%;position:relative}:host .container .columns-container{display:flex;flex-flow:row wrap;transition:.5s;justify-content:space-between}:host .container .columns-container .columns-actions{display:flex;align-items:center;width:100%}:host .container .columns-container .columns-actions .right{display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:center;margin-left:auto}:host .container .columns-container .columns-actions .right>p{transition:color .5s ease;margin:0;font-size:.8em;padding-right:1em;font-weight:700;-webkit-user-select:none;user-select:none;text-align:center}:host .container .columns-container .columns-actions .right>p,:host-context(.sfc-default-theme) :host .container .columns-container .columns-actions .right>p{color:#545e61}:host-context(.sfc-dark-theme) :host .container .columns-container .columns-actions .right>p{color:#fff}:host .container .columns-container .columns-actions .right>p span{font-size:1.1em;color:#ffce54}:host .container .columns-container .columns{text-align:center;padding:.5em;width:100%;display:flex;flex-flow:row wrap}:host .container .columns-container .columns .column{text-align:center;padding:.5em;display:flex;align-items:center;justify-content:center;box-sizing:border-box}:host .container .rows-container{display:flex;flex-wrap:wrap;justify-content:center;transition:.5s;margin-block:1em 2em}:host .container .rows-container sfc-load-container ::ng-deep>.container .content{background:transparent}:host .container .rows-container sfc-load-container ::ng-deep>.container .content .items{gap:1em;margin:1em 0}:host .container .rows-container sfc-load-container.loading{cursor:initial;z-index:9999}:host .container .rows-container sfc-load-container.loading .preloader{transition:background .5s ease}:host .container .rows-container sfc-load-container.loading .preloader,:host-context(.sfc-default-theme) :host .container .rows-container sfc-load-container.loading .preloader{background:#fff}:host-context(.sfc-dark-theme) :host .container .rows-container sfc-load-container.loading .preloader{background:transparent}:host .container .rows-container .row{display:contents}:host.loading .container .table-loader{position:relative;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;z-index:9998;position:absolute;transition:background-color .5s ease;opacity:.7}:host.loading .container .table-loader,:host-context(.sfc-default-theme) :host.loading .container .table-loader{background-color:#fff}:host-context(.sfc-dark-theme) :host.loading .container .table-loader{background-color:transparent}:host.rows .container .rows-container .row{display:block;width:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: ColumnsToggleService }, { type: Window, decorators: [{
                     type: Inject,
                     args: [WINDOW]