ngx-sfc-components 0.0.1

package/fesm2015/ngx-sfc-components.mjs

@@ -0,0 +1,4006 @@
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Component, Input, ContentChildren, Directive, HostBinding, EventEmitter, Output, HostListener, Inject, QueryList, Injectable, ViewChild, ViewChildren, NgModule } from '@angular/core';
+import { Chart, Title, Tooltip, Filler, Legend, LineController, LineElement, PointElement, LinearScale, CategoryScale, BarController, BarElement, DoughnutController, ArcElement, RadarController, RadialLinearScale, PieController, PolarAreaController, BubbleController, ScatterController, TimeSeriesScale } from 'chart.js';
+import * as i1 from 'ngx-sfc-common';
+import { isDefined, firstOrDefault, CommonConstants, TemplateReferenceDirective, UIClass, isNullOrEmptyString, getCalcValue, UIConstants, any, Position, MediaLimits, WINDOW, getCssLikeValue, ButtonType, replaceRgbOpacity, Theme, mergeDeep, SortingDirection, all, hasItemBy, sortByPath, PaginationService, SortingService, ResizeService, isNumeric, DOCUMENT, NgxSfcCommonModule } from 'ngx-sfc-common';
+import { Subject, BehaviorSubject, startWith, combineLatest, map, distinctUntilChanged, tap, shareReplay, merge, fromEvent, of, switchMap, first, filter, from, skip, take, toArray, delay } from 'rxjs';
+import { trigger, transition, style, animate, state } from '@angular/animations';
+
+class TabService {
+    constructor() {
+        this.selectSubject = new Subject();
+        this.selected$ = this.selectSubject.asObservable();
+    }
+    select(index) {
+        this.selectSubject.next(index);
+    }
+}
+
+var TabsTemplate;
+(function (TabsTemplate) {
+    TabsTemplate["Label"] = "label";
+    TabsTemplate["Slider"] = "slider";
+    TabsTemplate["Body"] = "body";
+})(TabsTemplate || (TabsTemplate = {}));
+
+class TabsComponent {
+    constructor(tabService) {
+        this.tabService = tabService;
+        this.TabsTemplate = TabsTemplate;
+        this.tabs = [];
+    }
+    ngOnInit() {
+        this.tabsSubject = new BehaviorSubject(this.tabs);
+        const selectedIndex = this.getSelectedIndex(this.tabs), tabs$ = this.tabsSubject.asObservable(), selected$ = this.tabService.selected$
+            .pipe(startWith(selectedIndex));
+        this.vm$ = combineLatest([
+            tabs$,
+            selected$
+        ]).pipe(map(([tabs, selectedIndex]) => {
+            this.updateSelected(tabs, selectedIndex);
+            return {
+                tabs: tabs,
+                selectedTab: isDefined(selectedIndex) ? tabs[selectedIndex] : null,
+                sliderContextData: { count: tabs.length, index: selectedIndex },
+                tabWidth: 100 / (tabs ? tabs.length : 1)
+            };
+        }));
+    }
+    selectTab(tab, index) {
+        if (!tab.disabled && !tab.selected) {
+            this.tabService.select(index);
+        }
+    }
+    getSelectedIndex(tabs) {
+        let selectedIndex = tabs.indexOf(firstOrDefault(tabs, tab => tab.selected && !tab.disabled));
+        if (selectedIndex == CommonConstants.NOT_FOUND_INDEX) {
+            selectedIndex = tabs.indexOf(firstOrDefault(tabs, tab => !tab.disabled));
+            return selectedIndex == CommonConstants.NOT_FOUND_INDEX ? 0 : selectedIndex;
+        }
+        return selectedIndex;
+    }
+    updateSelected(tabs, selectedIndex) {
+        tabs.forEach((item, index) => {
+            item.selected = index == selectedIndex;
+        });
+    }
+}
+TabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TabsComponent, deps: [{ token: TabService }], target: i0.ɵɵFactoryTarget.Component });
+TabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: TabsComponent, selector: "sfc-tabs", inputs: { tabs: "tabs", label: "label", slider: "slider", body: "body" }, providers: [TabService], queries: [{ propertyName: "templates", predicate: TemplateReferenceDirective, read: TemplateReferenceDirective }], ngImport: i0, template: "<div class=\"container\" *ngIf=\"vm$ | async as vm\">\r\n    <div class=\"tabs-container\">\r\n        <div class=\"tabs\">\r\n            <div class=\"tab\" [style.width.%]=\"vm.tabWidth\" *ngFor=\"let tab of vm.tabs; index as index\"\r\n                (click)=\"selectTab(tab, index)\">\r\n\r\n                <sfc-template-content [referenceContent]=\"label\" [templatesContent]=\"templates\"\r\n                    [templateType]=\"TabsTemplate.Label\" [defaultContent]=\"defaultLabel\" [contextData]=\"tab\">\r\n                </sfc-template-content>\r\n\r\n                <ng-template #defaultLabel>{{ tab.label }}</ng-template>\r\n            </div>\r\n        </div>\r\n\r\n        <sfc-template-content [referenceContent]=\"slider\" [templatesContent]=\"templates\"\r\n            [templateType]=\"TabsTemplate.Slider\" [contextData]=\"vm.sliderContextData\"></sfc-template-content>\r\n\r\n    </div>\r\n\r\n    <div class=\"body-container\">\r\n        <ng-container *ngIf=\"vm.selectedTab\">\r\n\r\n            <sfc-template-content [referenceContent]=\"body\" [templatesContent]=\"templates\"\r\n                [templateType]=\"TabsTemplate.Body\" [contextData]=\"vm.selectedTab.data\">\r\n            </sfc-template-content>\r\n\r\n        </ng-container>\r\n    </div>\r\n</div>", styles: [":host{width:100%}:host .container .tabs{display:flex;flex-wrap:wrap}:host .container .tabs .tab{text-align:center}:host-context(.sfc-default-theme) :host .container .tabs .tab{color:#545e61}:host-context(.sfc-dark-theme) :host .container .tabs .tab{color:#ccd1d9}:host .container .body-container{margin-top:.6em}:host-context(.sfc-default-theme) :host .container .body-container{color:#545e61}:host-context(.sfc-dark-theme) :host .container .body-container{color:#ccd1d9}\n"], components: [{ type: i1.TemplateContentComponent, selector: "sfc-template-content", inputs: ["contextData", "referenceContent", "templateType", "templatesContent", "defaultContent"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i2.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TabsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-tabs', providers: [TabService], template: "<div class=\"container\" *ngIf=\"vm$ | async as vm\">\r\n    <div class=\"tabs-container\">\r\n        <div class=\"tabs\">\r\n            <div class=\"tab\" [style.width.%]=\"vm.tabWidth\" *ngFor=\"let tab of vm.tabs; index as index\"\r\n                (click)=\"selectTab(tab, index)\">\r\n\r\n                <sfc-template-content [referenceContent]=\"label\" [templatesContent]=\"templates\"\r\n                    [templateType]=\"TabsTemplate.Label\" [defaultContent]=\"defaultLabel\" [contextData]=\"tab\">\r\n                </sfc-template-content>\r\n\r\n                <ng-template #defaultLabel>{{ tab.label }}</ng-template>\r\n            </div>\r\n        </div>\r\n\r\n        <sfc-template-content [referenceContent]=\"slider\" [templatesContent]=\"templates\"\r\n            [templateType]=\"TabsTemplate.Slider\" [contextData]=\"vm.sliderContextData\"></sfc-template-content>\r\n\r\n    </div>\r\n\r\n    <div class=\"body-container\">\r\n        <ng-container *ngIf=\"vm.selectedTab\">\r\n\r\n            <sfc-template-content [referenceContent]=\"body\" [templatesContent]=\"templates\"\r\n                [templateType]=\"TabsTemplate.Body\" [contextData]=\"vm.selectedTab.data\">\r\n            </sfc-template-content>\r\n\r\n        </ng-container>\r\n    </div>\r\n</div>", styles: [":host{width:100%}:host .container .tabs{display:flex;flex-wrap:wrap}:host .container .tabs .tab{text-align:center}:host-context(.sfc-default-theme) :host .container .tabs .tab{color:#545e61}:host-context(.sfc-dark-theme) :host .container .tabs .tab{color:#ccd1d9}:host .container .body-container{margin-top:.6em}:host-context(.sfc-default-theme) :host .container .body-container{color:#545e61}:host-context(.sfc-dark-theme) :host .container .body-container{color:#ccd1d9}\n"] }]
+        }], ctorParameters: function () { return [{ type: TabService }]; }, propDecorators: { tabs: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], slider: [{
+                type: Input
+            }], body: [{
+                type: Input
+            }], templates: [{
+                type: ContentChildren,
+                args: [TemplateReferenceDirective, { read: TemplateReferenceDirective }]
+            }] } });
+
+class TabLabelContentBase {
+    constructor() {
+        this.disabled = false;
+        this.selected = false;
+    }
+}
+TabLabelContentBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TabLabelContentBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+TabLabelContentBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: TabLabelContentBase, inputs: { label: "label", icon: "icon", disabled: "disabled", selected: "selected" }, host: { properties: { "class.disabled": "this.disabled", "class.selected": "this.selected" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TabLabelContentBase, decorators: [{
+            type: Directive
+        }], propDecorators: { label: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.' + UIClass.Disabled]
+            }], selected: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.' + UIClass.Selected]
+            }] } });
+
+class TabLabelLineComponent extends TabLabelContentBase {
+}
+TabLabelLineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TabLabelLineComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+TabLabelLineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: TabLabelLineComponent, selector: "sfc-tab-label-line", usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\r\n  <div class=\"content\">\r\n    <i *ngIf=\"icon\" class=\"{{icon}}\"></i>\r\n    <span>{{label}}</span>\r\n  </div>\r\n</div>", styles: [":host{width:100%;cursor:pointer;font-weight:700;-webkit-user-select:none;user-select:none}:host-context(.sfc-default-theme) :host{color:#545e61}:host-context(.sfc-dark-theme) :host{color:#ccd1d9}:host.disabled{cursor:default;pointer-events:none}:host-context(.sfc-default-theme) :host.disabled{color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled{color:#656d78}:host.selected:not(.disabled),:host:hover:not(.disabled){color:#2bbbad}:host .container{width:100%;display:flex;justify-content:center;align-items:center;transition:color .2s ease;border-bottom:1px solid #e6e9ed}:host .container .content{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;text-align:center;padding:1.25em 0}:host .container .content i{margin-right:.18em}@media (max-width: 430px){:host .container .content i{display:none}}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TabLabelLineComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-tab-label-line', template: "<div class=\"container\">\r\n  <div class=\"content\">\r\n    <i *ngIf=\"icon\" class=\"{{icon}}\"></i>\r\n    <span>{{label}}</span>\r\n  </div>\r\n</div>", styles: [":host{width:100%;cursor:pointer;font-weight:700;-webkit-user-select:none;user-select:none}:host-context(.sfc-default-theme) :host{color:#545e61}:host-context(.sfc-dark-theme) :host{color:#ccd1d9}:host.disabled{cursor:default;pointer-events:none}:host-context(.sfc-default-theme) :host.disabled{color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled{color:#656d78}:host.selected:not(.disabled),:host:hover:not(.disabled){color:#2bbbad}:host .container{width:100%;display:flex;justify-content:center;align-items:center;transition:color .2s ease;border-bottom:1px solid #e6e9ed}:host .container .content{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;text-align:center;padding:1.25em 0}:host .container .content i{margin-right:.18em}@media (max-width: 430px){:host .container .content i{display:none}}\n"] }]
+        }] });
+
+class TabLabelIconComponent extends TabLabelContentBase {
+    constructor() {
+        super(...arguments);
+        this.TAB_DEFAULT_ICON = 'fa fa-circle';
+    }
+    ngOnInit() {
+        this.icon = !isNullOrEmptyString(this.icon) ? this.icon : this.TAB_DEFAULT_ICON;
+    }
+}
+TabLabelIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TabLabelIconComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+TabLabelIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: TabLabelIconComponent, selector: "sfc-tab-label-icon", usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\r\n  <i class=\"{{icon}}\"></i>\r\n  <span>{{label}}</span>\r\n</div>", styles: [":host{width:100%;cursor:pointer;font-weight:700;-webkit-user-select:none;user-select:none;padding-bottom:1.25em;display:inline-block;transition:all .2s ease-in-out}:host-context(.sfc-default-theme) :host{color:#545e61}:host-context(.sfc-dark-theme) :host{color:#ccd1d9}:host.selected:not(.disabled),:host:hover:not(.disabled){color:#2bbbad}:host.disabled{cursor:default;pointer-events:none}:host-context(.sfc-default-theme) :host.disabled{color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled{color:#656d78}:host .container{display:inline-flex;align-items:center;flex-flow:column wrap;justify-content:center;text-align:center;overflow:hidden;text-overflow:ellipsis}:host .container i{height:1.2em;margin-bottom:.2em}:host .container span{font-size:.8em}@media (max-width: 430px){:host{padding-bottom:.6em}:host .container{padding:.8em;border-radius:.3em;text-overflow:initial}:host .container i{height:auto;margin-bottom:0}:host .container span{display:none}:host-context(.sfc-default-theme) :host.selected .container{background:#e6e9ed}:host-context(.sfc-dark-theme) :host.selected .container{background:#f5f7fa}}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TabLabelIconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-tab-label-icon', template: "<div class=\"container\">\r\n  <i class=\"{{icon}}\"></i>\r\n  <span>{{label}}</span>\r\n</div>", styles: [":host{width:100%;cursor:pointer;font-weight:700;-webkit-user-select:none;user-select:none;padding-bottom:1.25em;display:inline-block;transition:all .2s ease-in-out}:host-context(.sfc-default-theme) :host{color:#545e61}:host-context(.sfc-dark-theme) :host{color:#ccd1d9}:host.selected:not(.disabled),:host:hover:not(.disabled){color:#2bbbad}:host.disabled{cursor:default;pointer-events:none}:host-context(.sfc-default-theme) :host.disabled{color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled{color:#656d78}:host .container{display:inline-flex;align-items:center;flex-flow:column wrap;justify-content:center;text-align:center;overflow:hidden;text-overflow:ellipsis}:host .container i{height:1.2em;margin-bottom:.2em}:host .container span{font-size:.8em}@media (max-width: 430px){:host{padding-bottom:.6em}:host .container{padding:.8em;border-radius:.3em;text-overflow:initial}:host .container i{height:auto;margin-bottom:0}:host .container span{display:none}:host-context(.sfc-default-theme) :host.selected .container{background:#e6e9ed}:host-context(.sfc-dark-theme) :host.selected .container{background:#f5f7fa}}\n"] }]
+        }] });
+
+class TabSliderBase {
+    constructor() {
+        this.count = 1;
+        this.index = 0;
+    }
+}
+TabSliderBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TabSliderBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+TabSliderBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: TabSliderBase, inputs: { count: "count", index: "index" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TabSliderBase, decorators: [{
+            type: Directive
+        }], propDecorators: { count: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }] } });
+
+class TabLabelIconSliderComponent extends TabSliderBase {
+    get style() {
+        return {
+            width: getCalcValue(this.count),
+            transform: `translateX(${100 * this.index}${UIConstants.CSS_PERCENTAGE})`
+        };
+    }
+}
+TabLabelIconSliderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TabLabelIconSliderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+TabLabelIconSliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: TabLabelIconSliderComponent, selector: "sfc-tab-label-icon-slider", usesInheritance: true, ngImport: i0, template: "<div class=\"slider\" [ngStyle]=\"style\">\r\n    <div class=\"indicator\"></div>\r\n</div>", styles: [".slider{transition:all .33s cubic-bezier(.38,.8,.32,1.07)}.slider .indicator{width:50%;margin:0 auto;height:.25em;background:#2bbbad;border-radius:.0625em}@media (max-width: 430px){.slider{display:none}}\n"], directives: [{ type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TabLabelIconSliderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-tab-label-icon-slider', template: "<div class=\"slider\" [ngStyle]=\"style\">\r\n    <div class=\"indicator\"></div>\r\n</div>", styles: [".slider{transition:all .33s cubic-bezier(.38,.8,.32,1.07)}.slider .indicator{width:50%;margin:0 auto;height:.25em;background:#2bbbad;border-radius:.0625em}@media (max-width: 430px){.slider{display:none}}\n"] }]
+        }] });
+
+class TabLabelLineSliderComponent extends TabSliderBase {
+    get style() {
+        return {
+            width: getCalcValue(this.count),
+            left: getCalcValue((this.count / this.index))
+        };
+    }
+}
+TabLabelLineSliderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TabLabelLineSliderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+TabLabelLineSliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: TabLabelLineSliderComponent, selector: "sfc-tab-label-line-slider", usesInheritance: true, ngImport: i0, template: "<div class=\"slider\" [ngStyle]=\"style\"></div>", styles: [":host{position:relative;display:flex}:host .slider{background:#2bbbad;height:.125em;position:absolute;left:0;top:calc(100% - .1em);transition:left .3s ease-out}\n"], directives: [{ type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TabLabelLineSliderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-tab-label-line-slider', template: "<div class=\"slider\" [ngStyle]=\"style\"></div>", styles: [":host{position:relative;display:flex}:host .slider{background:#2bbbad;height:.125em;position:absolute;left:0;top:calc(100% - .1em);transition:left .3s ease-out}\n"] }]
+        }] });
+
+var SideMenuItemType;
+(function (SideMenuItemType) {
+    SideMenuItemType["Item"] = "item";
+    SideMenuItemType["Title"] = "title";
+})(SideMenuItemType || (SideMenuItemType = {}));
+
+class SideMenuHeaderComponent {
+    constructor() {
+        this.DEFAULT_MENU_HEADER_TEXT = 'Menu';
+        this.label = CommonConstants.EMPTY_STRING;
+        this.open = false;
+        this.toggle = new EventEmitter();
+    }
+    ngOnInit() {
+        this.label = this.label || this.DEFAULT_MENU_HEADER_TEXT;
+    }
+}
+SideMenuHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SideMenuHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SideMenuHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SideMenuHeaderComponent, selector: "sfc-side-menu-header", inputs: { label: "label", open: "open" }, outputs: { toggle: "toggle" }, host: { properties: { "class.open": "this.open" } }, ngImport: i0, template: "<li>\r\n    <span>{{label}}</span>\r\n    <sfc-hamburger [open]=\"open\" (click)=\"toggle.emit()\"></sfc-hamburger>\r\n</li>", styles: [":host li{display:flex;align-items:center;justify-content:center;padding:1.25em}:host li span{display:none;text-transform:uppercase;font-weight:700;font-size:.8em;-webkit-user-select:none;user-select:none}:host-context(.sfc-default-theme) :host li span{color:#545e61}:host-context(.sfc-dark-theme) :host li span{color:#ccd1d9}:host.open li{justify-content:space-between}:host.open li span{display:block}\n"], components: [{ type: i1.HamburgerComponent, selector: "sfc-hamburger", inputs: ["open"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SideMenuHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-side-menu-header', template: "<li>\r\n    <span>{{label}}</span>\r\n    <sfc-hamburger [open]=\"open\" (click)=\"toggle.emit()\"></sfc-hamburger>\r\n</li>", styles: [":host li{display:flex;align-items:center;justify-content:center;padding:1.25em}:host li span{display:none;text-transform:uppercase;font-weight:700;font-size:.8em;-webkit-user-select:none;user-select:none}:host-context(.sfc-default-theme) :host li span{color:#545e61}:host-context(.sfc-dark-theme) :host li span{color:#ccd1d9}:host.open li{justify-content:space-between}:host.open li span{display:block}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], open: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.' + UIClass.Open]
+            }], toggle: [{
+                type: Output
+            }] } });
+
+class SideMenuItemContentComponent {
+    constructor() {
+        this.ANGLE_UP_ICON = 'fa fa-angle-up';
+        this.ANGLE_DOWM_ICON = 'fa fa-angle-down';
+        this.item = {
+            icon: CommonConstants.EMPTY_STRING,
+            label: CommonConstants.EMPTY_STRING,
+            type: SideMenuItemType.Item,
+            active: false
+        };
+        this.active = false;
+        this.open = false;
+        this.openParent = false;
+        this.hasChildren = false;
+        this.selectItem = new EventEmitter();
+    }
+    onClick() {
+        this.selectItem.emit(this.item);
+    }
+    get expandIcon() {
+        return this.openParent ? this.ANGLE_UP_ICON : this.ANGLE_DOWM_ICON;
+    }
+}
+SideMenuItemContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SideMenuItemContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SideMenuItemContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SideMenuItemContentComponent, selector: "sfc-side-menu-item-content", inputs: { item: "item", active: "active", open: "open", openParent: "openParent", hasChildren: "hasChildren" }, outputs: { selectItem: "selectItem" }, host: { listeners: { "click": "onClick()" }, properties: { "class.active": "this.active", "class.open": "this.open" } }, ngImport: i0, template: "<li>\r\n    <div class=\"item-container\">\r\n        <div class=\"item\">\r\n            <a><i class=\"{{item.icon}}\"></i></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        <i class=\"{{expandIcon}}\"></i>\r\n    </div>\r\n</li>", styles: [":host li{display:inline-flex;align-items:center;padding:0 1.25em 0 1.5em;cursor:pointer;width:calc(100% - 2.75em);justify-content:space-between}:host-context(.sfc-default-theme) :host li{color:#545e61}:host-context(.sfc-dark-theme) :host li{color:#ccd1d9}:host li .expand-container{visibility:hidden;opacity:0;width:0}:host li .expand-container>i{font-weight:700}:host li .item-container{display:inline-flex;align-items:center}:host li .item-container .item{width:2em;height:1.9em;display:flex;justify-content:center;border-radius:.7em;align-items:center}:host li .item-container .item a{border-radius:.45em;display:flex;align-items:center;justify-content:center;transition:.3s ease-in-out;font-size:1.3em;padding:.3em}:host li .item-container .item a>i{font-size:1em}:host li .item-container .label{font-weight:700;font-size:.9em;visibility:hidden;opacity:0;transition:color .3s,visibility .3s,opacity .5s ease-in-out;-webkit-user-select:none;user-select:none;width:0}:host.active li,:host:hover li{color:#fff}:host.active li .item-container .item a,:host:hover li .item-container .item a{background-color:#2bbbad;box-shadow:0 .3em 1em #2bbbad1a}:host.active li .item-container .label,:host:hover li .item-container .label{color:#2bbbad}:host.active li .expand-container,:host:hover li .expand-container{color:#2bbbad}:host.open li .item-container .item a{margin-right:1em}:host.open li .item-container .label{visibility:visible;opacity:1;width:auto}:host.open li .expand-container{width:auto;visibility:visible;opacity:1}:host :host-context(.children) li{margin:.2em 0}:host :host-context(.children) li .item-container .item a{padding:.3em;border-radius:.35em}:host :host-context(.children) li .item-container .item a>i{font-size:.5em}:host :host-context(.children) li .item-container .label{font-size:.8em}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SideMenuItemContentComponent, decorators: [{
+            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><i class=\"{{item.icon}}\"></i></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        <i class=\"{{expandIcon}}\"></i>\r\n    </div>\r\n</li>", styles: [":host li{display:inline-flex;align-items:center;padding:0 1.25em 0 1.5em;cursor:pointer;width:calc(100% - 2.75em);justify-content:space-between}:host-context(.sfc-default-theme) :host li{color:#545e61}:host-context(.sfc-dark-theme) :host li{color:#ccd1d9}:host li .expand-container{visibility:hidden;opacity:0;width:0}:host li .expand-container>i{font-weight:700}:host li .item-container{display:inline-flex;align-items:center}:host li .item-container .item{width:2em;height:1.9em;display:flex;justify-content:center;border-radius:.7em;align-items:center}:host li .item-container .item a{border-radius:.45em;display:flex;align-items:center;justify-content:center;transition:.3s ease-in-out;font-size:1.3em;padding:.3em}:host li .item-container .item a>i{font-size:1em}:host li .item-container .label{font-weight:700;font-size:.9em;visibility:hidden;opacity:0;transition:color .3s,visibility .3s,opacity .5s ease-in-out;-webkit-user-select:none;user-select:none;width:0}:host.active li,:host:hover li{color:#fff}:host.active li .item-container .item a,:host:hover li .item-container .item a{background-color:#2bbbad;box-shadow:0 .3em 1em #2bbbad1a}:host.active li .item-container .label,:host:hover li .item-container .label{color:#2bbbad}:host.active li .expand-container,:host:hover li .expand-container{color:#2bbbad}:host.open li .item-container .item a{margin-right:1em}:host.open li .item-container .label{visibility:visible;opacity:1;width:auto}:host.open li .expand-container{width:auto;visibility:visible;opacity:1}:host :host-context(.children) li{margin:.2em 0}:host :host-context(.children) li .item-container .item a{padding:.3em;border-radius:.35em}:host :host-context(.children) li .item-container .item a>i{font-size:.5em}:host :host-context(.children) li .item-container .label{font-size:.8em}\n"] }]
+        }], propDecorators: { item: [{
+                type: Input
+            }], active: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.' + UIClass.Active]
+            }], open: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.' + UIClass.Open]
+            }], openParent: [{
+                type: Input
+            }], hasChildren: [{
+                type: Input
+            }], selectItem: [{
+                type: Output
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+class SideMenuItemComponent {
+    constructor() {
+        this.item = {
+            icon: CommonConstants.EMPTY_STRING,
+            label: CommonConstants.EMPTY_STRING,
+            type: SideMenuItemType.Item,
+            items: [],
+            active: false
+        };
+        this.open = false;
+        this.selectItem = new EventEmitter();
+        this.openParent = false;
+    }
+    get hasActiveChild() {
+        return isDefined(firstOrDefault(this.item.items, (item) => item.active));
+    }
+    hasChildren(item) {
+        return any(item.items);
+    }
+    isActive(item) {
+        return this.hasChildren(item)
+            ? this.hasActiveChild && !this.openParent
+            : item.active;
+    }
+    ngOnInit() {
+        this.openParent = this.hasActiveChild;
+    }
+    onParentClick(item) {
+        this.openParent = !this.openParent;
+        this.selectItem.emit(item);
+    }
+    onChildClick(item, child) {
+        var _a;
+        (_a = item.items) === null || _a === void 0 ? void 0 : _a.forEach((item) => item.active = false);
+        this.selectItem.emit(child);
+    }
+}
+SideMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SideMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SideMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SideMenuItemComponent, selector: "sfc-side-menu-item", inputs: { item: "item", open: "open" }, outputs: { selectItem: "selectItem" }, host: { properties: { "class.open": "this.open" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <sfc-side-menu-item-content [item]=\"item\" [active]=\"isActive(item)\" [open]=\"open\" [openParent]=\"openParent\"\r\n        [hasChildren]=\"hasChildren(item)\" (selectItem)=\"onParentClick(item)\">\r\n    </sfc-side-menu-item-content>\r\n\r\n    <div class=\"children\" *ngIf=\"hasChildren(item) && openParent\" [@enterAnimation]>\r\n\r\n        <sfc-side-menu-item-content *ngFor=\"let child of item.items\" [item]=\"child\" [open]=\"open\"\r\n            [active]=\"isActive(child)\" [openParent]=\"true\" (selectItem)=\"onChildClick(item, child)\">\r\n        </sfc-side-menu-item-content>\r\n\r\n    </div>\r\n</div>", styles: [":host .container{margin-bottom:1em}:host .container .children{margin:1em 0}\n"], components: [{ type: SideMenuItemContentComponent, selector: "sfc-side-menu-item-content", inputs: ["item", "active", "open", "openParent", "hasChildren"], outputs: ["selectItem"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], animations: [
+        trigger('enterAnimation', [
+            transition(':enter', [
+                style({ transform: 'translateX(-20%)', opacity: 0 }),
+                animate('300ms', style({ transform: 'translateX(0%)', opacity: 1 }))
+            ]),
+            transition(':leave', [
+                style({ transform: 'translateX(0%)', opacity: 1 }),
+                animate('300ms', style({ transform: 'translateX(-20%)', opacity: 0 }))
+            ])
+        ])
+    ] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SideMenuItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-side-menu-item', animations: [
+                        trigger('enterAnimation', [
+                            transition(':enter', [
+                                style({ transform: 'translateX(-20%)', opacity: 0 }),
+                                animate('300ms', style({ transform: 'translateX(0%)', opacity: 1 }))
+                            ]),
+                            transition(':leave', [
+                                style({ transform: 'translateX(0%)', opacity: 1 }),
+                                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\r\n    </div>\r\n</div>", styles: [":host .container{margin-bottom:1em}:host .container .children{margin:1em 0}\n"] }]
+        }], propDecorators: { item: [{
+                type: Input
+            }], open: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.' + UIClass.Open]
+            }], selectItem: [{
+                type: Output
+            }] } });
+
+class SideMenuTitleComponent {
+    constructor() {
+        this.label = CommonConstants.EMPTY_STRING;
+        this.open = false;
+    }
+}
+SideMenuTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SideMenuTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SideMenuTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SideMenuTitleComponent, selector: "sfc-side-menu-title", inputs: { label: "label", open: "open" }, host: { properties: { "class.open": "this.open" } }, ngImport: i0, template: "<sfc-delimeter></sfc-delimeter>\r\n<li><span>{{label}}</span></li>", styles: [":host li{text-transform:uppercase;font-weight:700;font-size:.65em;padding:1.25em 0;transform:translate(7%);display:inline-block;transition:transform .5s ease-in-out}:host-context(.sfc-default-theme) :host li{color:#545e61}:host-context(.sfc-dark-theme) :host li{color:#ccd1d9}:host.open li{transform:translate(30%)}\n"], components: [{ type: i1.DelimeterComponent, selector: "sfc-delimeter" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SideMenuTitleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-side-menu-title', template: "<sfc-delimeter></sfc-delimeter>\r\n<li><span>{{label}}</span></li>", styles: [":host li{text-transform:uppercase;font-weight:700;font-size:.65em;padding:1.25em 0;transform:translate(7%);display:inline-block;transition:transform .5s ease-in-out}:host-context(.sfc-default-theme) :host li{color:#545e61}:host-context(.sfc-dark-theme) :host li{color:#ccd1d9}:host.open li{transform:translate(30%)}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], open: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.' + UIClass.Open]
+            }] } });
+
+class SideMenuComponent {
+    constructor() {
+        this.SideMenuItemType = SideMenuItemType;
+        this.model = { open: false, items: [] };
+        this.selected = new EventEmitter();
+    }
+    get open() {
+        return this.model.open;
+    }
+    set open(value) {
+        this.model.open = value;
+    }
+    onItemSelect(item) {
+        // handle only items without childrens
+        if (!any(item.items)) {
+            this.model.items.forEach((item) => {
+                var _a;
+                item.active = false;
+                if (any(item.items))
+                    (_a = item.items) === null || _a === void 0 ? void 0 : _a.forEach((item) => item.active = false);
+            });
+            item.active = true;
+        }
+        this.selected.emit(item);
+    }
+}
+SideMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SideMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SideMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SideMenuComponent, selector: "sfc-side-menu", inputs: { model: "model" }, outputs: { selected: "selected" }, host: { properties: { "class.open": "this.open" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <ul>\r\n        <sfc-side-menu-header [open]=\"open\" (toggle)=\"open =!open\"></sfc-side-menu-header>\r\n\r\n        <ng-container *ngFor=\"let item of model.items\" [ngSwitch]=\"item.type\">\r\n            <sfc-side-menu-item *ngSwitchCase=\"SideMenuItemType.Item\" [item]=\"item\" [open]=\"open\"\r\n                (selectItem)=\"onItemSelect($event)\">\r\n            </sfc-side-menu-item>\r\n\r\n            <sfc-side-menu-title *ngSwitchCase=\"SideMenuItemType.Title\" [label]=\"item.label\" [open]=\"open\">\r\n            </sfc-side-menu-title>\r\n        </ng-container>\r\n    </ul>\r\n</div>", styles: [":host .container{width:5em;overflow:hidden;transition:width .5s ease-in-out}:host-context(.sfc-default-theme) :host .container{background:#f5f7fa}:host-context(.sfc-dark-theme) :host .container{background:#1b1d1f}:host .container ul{margin:0;padding:0;list-style:none;overflow:hidden;display:flex;flex-direction:column}:host.open .container{width:11.25em}\n"], components: [{ type: SideMenuHeaderComponent, selector: "sfc-side-menu-header", inputs: ["label", "open"], outputs: ["toggle"] }, { type: SideMenuItemComponent, selector: "sfc-side-menu-item", inputs: ["item", "open"], outputs: ["selectItem"] }, { type: SideMenuTitleComponent, selector: "sfc-side-menu-title", inputs: ["label", "open"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SideMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-side-menu', template: "<div class=\"container\">\r\n    <ul>\r\n        <sfc-side-menu-header [open]=\"open\" (toggle)=\"open =!open\"></sfc-side-menu-header>\r\n\r\n        <ng-container *ngFor=\"let item of model.items\" [ngSwitch]=\"item.type\">\r\n            <sfc-side-menu-item *ngSwitchCase=\"SideMenuItemType.Item\" [item]=\"item\" [open]=\"open\"\r\n                (selectItem)=\"onItemSelect($event)\">\r\n            </sfc-side-menu-item>\r\n\r\n            <sfc-side-menu-title *ngSwitchCase=\"SideMenuItemType.Title\" [label]=\"item.label\" [open]=\"open\">\r\n            </sfc-side-menu-title>\r\n        </ng-container>\r\n    </ul>\r\n</div>", styles: [":host .container{width:5em;overflow:hidden;transition:width .5s ease-in-out}:host-context(.sfc-default-theme) :host .container{background:#f5f7fa}:host-context(.sfc-dark-theme) :host .container{background:#1b1d1f}:host .container ul{margin:0;padding:0;list-style:none;overflow:hidden;display:flex;flex-direction:column}:host.open .container{width:11.25em}\n"] }]
+        }], propDecorators: { model: [{
+                type: Input
+            }], selected: [{
+                type: Output
+            }], open: [{
+                type: HostBinding,
+                args: ['class.' + UIClass.Open]
+            }] } });
+
+class DropdownMenuItemComponent {
+    constructor() {
+        this.item = { label: CommonConstants.EMPTY_STRING };
+    }
+    click() {
+        if (this.item.click)
+            this.item.click(this.item);
+    }
+}
+DropdownMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DropdownMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DropdownMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: DropdownMenuItemComponent, selector: "sfc-dropdown-menu-item", inputs: { item: "item" }, host: { listeners: { "click": "click()" } }, ngImport: i0, template: "<li>\r\n    <i *ngIf=\"item.icon\" class=\"{{item.icon}}\"></i>\r\n    <a>{{item.label}}</a>\r\n</li>\r\n\r\n<sfc-delimeter *ngIf=\"item.delimeter\"></sfc-delimeter>", styles: [":host{display:flex;flex-direction:column}:host li{color:#545e61;display:flex;align-items:center;flex-wrap:wrap;padding:.4em;border:.0063em solid transparent;border-radius:.31em;font-weight:700;font-size:.8em;-webkit-user-select:none;user-select:none}:host li:hover,:host li:focus-within{background:#f5f7fa;border-color:#f5f7fa;color:#2bbbad;cursor:pointer;outline:none}:host li i{padding-right:.625em;width:10%}:host-context(.sfc-default-theme) :host ::ng-deep sfc-delimeter{background:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 17%,rgba(0,0,0,.3) 83%,rgba(0,0,0,0) 100%)}:host-context(.sfc-dark-theme) :host ::ng-deep sfc-delimeter{background:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 17%,rgba(0,0,0,.3) 83%,rgba(0,0,0,0) 100%)}\n"], components: [{ type: i1.DelimeterComponent, selector: "sfc-delimeter" }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DropdownMenuItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-dropdown-menu-item', template: "<li>\r\n    <i *ngIf=\"item.icon\" class=\"{{item.icon}}\"></i>\r\n    <a>{{item.label}}</a>\r\n</li>\r\n\r\n<sfc-delimeter *ngIf=\"item.delimeter\"></sfc-delimeter>", styles: [":host{display:flex;flex-direction:column}:host li{color:#545e61;display:flex;align-items:center;flex-wrap:wrap;padding:.4em;border:.0063em solid transparent;border-radius:.31em;font-weight:700;font-size:.8em;-webkit-user-select:none;user-select:none}:host li:hover,:host li:focus-within{background:#f5f7fa;border-color:#f5f7fa;color:#2bbbad;cursor:pointer;outline:none}:host li i{padding-right:.625em;width:10%}:host-context(.sfc-default-theme) :host ::ng-deep sfc-delimeter{background:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 17%,rgba(0,0,0,.3) 83%,rgba(0,0,0,0) 100%)}:host-context(.sfc-dark-theme) :host ::ng-deep sfc-delimeter{background:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 17%,rgba(0,0,0,.3) 83%,rgba(0,0,0,0) 100%)}\n"] }]
+        }], propDecorators: { item: [{
+                type: Input
+            }], click: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+class DropdownMenuComponent {
+    constructor(resizeService, window) {
+        this.resizeService = resizeService;
+        this.window = window;
+        this.items = [];
+        this.hideOnClick = true;
+        this.hideOnClickOutside = true;
+        this.bordered = false;
+        this.position = [Position.Left];
+        this.open = false;
+        this.selected = new EventEmitter();
+        // preserved position
+        this._position = [Position.Left];
+    }
+    get showDots() {
+        return isNullOrEmptyString(this.label) && isNullOrEmptyString(this.icon);
+    }
+    ngOnInit() {
+        this._position = this.position;
+    }
+    ngAfterContentInit() {
+        this._resizeSubscription = this.resizeService.onResize$
+            .pipe(startWith(this.window))
+            .subscribe(window => {
+            this.position = window.innerWidth <= MediaLimits.Tablet
+                ? [Position.Left, Position.Top] : this._position;
+        });
+    }
+    ngOnDestroy() {
+        var _a;
+        (_a = this._resizeSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+    }
+    onClick(item) {
+        if (this.hideOnClick)
+            this.open = false;
+        this.selected.emit(item);
+    }
+    onClickOutside(event) {
+        if (event.value && this.open) {
+            this.open = false;
+        }
+    }
+}
+DropdownMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DropdownMenuComponent, deps: [{ token: i1.ResizeService }, { token: WINDOW }], target: i0.ɵɵFactoryTarget.Component });
+DropdownMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: DropdownMenuComponent, selector: "sfc-dropdown-menu", inputs: { items: "items", icon: "icon", label: "label", hideOnClick: "hideOnClick", hideOnClickOutside: "hideOnClickOutside", bordered: "bordered", position: "position", open: "open" }, outputs: { selected: "selected" }, host: { properties: { "class.bordered": "this.bordered", "class": "this.position", "class.open": "this.open" } }, ngImport: i0, template: "<ul [sfcClickOutside]=\"hideOnClickOutside\" (action)=\"onClickOutside($event)\">\r\n    <li>\r\n        <div class=\"container\" (click)=\"open = !open\">\r\n            <span *ngIf=\"label\">{{label}}</span>\r\n            <i *ngIf=\"icon\" class=\"{{icon}}\"></i>\r\n            <sfc-dots *ngIf=\"showDots\" [open]=\"open\"></sfc-dots>\r\n        </div>\r\n\r\n        <ul *ngIf=\"items.length\" class=\"dropdown-container\">\r\n            <sfc-dropdown-menu-item *ngFor=\"let item of items\" [item]=\"item\" (click)=\"onClick(item)\">\r\n            </sfc-dropdown-menu-item>\r\n        </ul>\r\n    </li>\r\n</ul>", styles: [":host{display:inline-flex}:host ul{list-style:none;margin:0;padding-left:0}:host ul li{position:relative}:host ul li .container{display:flex;justify-content:center;flex-wrap:wrap;cursor:pointer;transition:all .3s ease;padding:.3em}:host-context(.sfc-default-theme) :host ul li .container{color:#545e61}:host-context(.sfc-dark-theme) :host ul li .container{color:#ccd1d9}:host ul li .container span,:host ul li .container i{font-size:.8em;font-weight:700}:host ul li .container span~i{margin-left:.3em}:host ul li .container:hover{color:#2bbbad}:host ul li .dropdown-container{flex-direction:column;width:max-content;background:#fff;visibility:hidden;opacity:0;position:absolute;right:0;transition:all .5s ease;margin-top:1em;display:none;padding:.6em;border:.0063em solid #f5f7fa;border-radius:.1875em;box-shadow:0 .125em .625em;z-index:9999}:host-context(.sfc-default-theme) :host ul li .dropdown-container{color:#e6e9ed}:host-context(.sfc-dark-theme) :host ul li .dropdown-container{color:#656d78}:host.open ul li .dropdown-container{visibility:visible;opacity:1;display:flex}:host.bordered ul li .container{border:.15em solid;border-radius:.3em}:host-context(.sfc-default-theme) :host.bordered ul li .container{border-color:#545e61}:host-context(.sfc-dark-theme) :host.bordered ul li .container{border-color:#ccd1d9}:host.bordered ul li .container:hover{border-color:#2bbbad}:host.bordered ul li .container:hover ::ng-deep sfc-dots .dot{background:#2bbbad}:host.top ul li .dropdown-container{bottom:0;margin-bottom:2.18em;margin-top:0}:host.center ul li .dropdown-container{left:50%;transform:translate(-50%)}:host.left ul li .dropdown-container{right:0}:host.right ul li .dropdown-container{left:0}\n"], components: [{ type: i1.DotsComponent, selector: "sfc-dots", inputs: ["open", "direction"] }, { type: DropdownMenuItemComponent, selector: "sfc-dropdown-menu-item", inputs: ["item"] }], directives: [{ type: i1.ClickOutsideDirective, selector: "[sfcClickOutside]", inputs: ["sfcClickOutside"], outputs: ["action"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DropdownMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-dropdown-menu', template: "<ul [sfcClickOutside]=\"hideOnClickOutside\" (action)=\"onClickOutside($event)\">\r\n    <li>\r\n        <div class=\"container\" (click)=\"open = !open\">\r\n            <span *ngIf=\"label\">{{label}}</span>\r\n            <i *ngIf=\"icon\" class=\"{{icon}}\"></i>\r\n            <sfc-dots *ngIf=\"showDots\" [open]=\"open\"></sfc-dots>\r\n        </div>\r\n\r\n        <ul *ngIf=\"items.length\" class=\"dropdown-container\">\r\n            <sfc-dropdown-menu-item *ngFor=\"let item of items\" [item]=\"item\" (click)=\"onClick(item)\">\r\n            </sfc-dropdown-menu-item>\r\n        </ul>\r\n    </li>\r\n</ul>", styles: [":host{display:inline-flex}:host ul{list-style:none;margin:0;padding-left:0}:host ul li{position:relative}:host ul li .container{display:flex;justify-content:center;flex-wrap:wrap;cursor:pointer;transition:all .3s ease;padding:.3em}:host-context(.sfc-default-theme) :host ul li .container{color:#545e61}:host-context(.sfc-dark-theme) :host ul li .container{color:#ccd1d9}:host ul li .container span,:host ul li .container i{font-size:.8em;font-weight:700}:host ul li .container span~i{margin-left:.3em}:host ul li .container:hover{color:#2bbbad}:host ul li .dropdown-container{flex-direction:column;width:max-content;background:#fff;visibility:hidden;opacity:0;position:absolute;right:0;transition:all .5s ease;margin-top:1em;display:none;padding:.6em;border:.0063em solid #f5f7fa;border-radius:.1875em;box-shadow:0 .125em .625em;z-index:9999}:host-context(.sfc-default-theme) :host ul li .dropdown-container{color:#e6e9ed}:host-context(.sfc-dark-theme) :host ul li .dropdown-container{color:#656d78}:host.open ul li .dropdown-container{visibility:visible;opacity:1;display:flex}:host.bordered ul li .container{border:.15em solid;border-radius:.3em}:host-context(.sfc-default-theme) :host.bordered ul li .container{border-color:#545e61}:host-context(.sfc-dark-theme) :host.bordered ul li .container{border-color:#ccd1d9}:host.bordered ul li .container:hover{border-color:#2bbbad}:host.bordered ul li .container:hover ::ng-deep sfc-dots .dot{background:#2bbbad}:host.top ul li .dropdown-container{bottom:0;margin-bottom:2.18em;margin-top:0}:host.center ul li .dropdown-container{left:50%;transform:translate(-50%)}:host.left ul li .dropdown-container{right:0}:host.right ul li .dropdown-container{left:0}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: i1.ResizeService }, { type: Window, decorators: [{
+                        type: Inject,
+                        args: [WINDOW]
+                    }] }];
+    }, propDecorators: { items: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], hideOnClick: [{
+                type: Input
+            }], hideOnClickOutside: [{
+                type: Input
+            }], bordered: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.' + UIClass.Bordered]
+            }], position: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class']
+            }], open: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.' + UIClass.Open]
+            }], selected: [{
+                type: Output
+            }] } });
+
+class NavigationMenuItemComponent {
+    constructor() {
+        this.item = { label: CommonConstants.EMPTY_STRING, active: false };
+    }
+    get active() {
+        return this.item.active;
+    }
+    click() {
+        if (this.item.click)
+            this.item.click(this.item);
+    }
+}
+NavigationMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NavigationMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NavigationMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: NavigationMenuItemComponent, selector: "sfc-navigation-menu-item", inputs: { item: "item" }, host: { listeners: { "click": "click()" }, properties: { "class.active": "this.active" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <i *ngIf=\"item.icon\" class=\"{{item.icon}}\"></i>\r\n    <span>{{item.label}}</span>\r\n</div>", styles: [":host{display:inline-flex;justify-content:center;align-items:center;cursor:pointer;transition:color .2s ease-in-out}:host-context(.sfc-default-theme) :host{color:#545e61}:host-context(.sfc-dark-theme) :host{color:#ccd1d9}:host .container{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:1em .3em;margin:.625em;width:100%;border-radius:.625em;transition:background .2s ease-in-out}:host .container i{font-size:1.5em}:host .container span{font-size:1em;font-weight:700;margin-top:.625em;text-align:center}:host:hover,:host.active{color:#fff}:host:hover .container,:host.active .container{background:#2bbbad}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NavigationMenuItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-navigation-menu-item', template: "<div class=\"container\">\r\n    <i *ngIf=\"item.icon\" class=\"{{item.icon}}\"></i>\r\n    <span>{{item.label}}</span>\r\n</div>", styles: [":host{display:inline-flex;justify-content:center;align-items:center;cursor:pointer;transition:color .2s ease-in-out}:host-context(.sfc-default-theme) :host{color:#545e61}:host-context(.sfc-dark-theme) :host{color:#ccd1d9}:host .container{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:1em .3em;margin:.625em;width:100%;border-radius:.625em;transition:background .2s ease-in-out}:host .container i{font-size:1.5em}:host .container span{font-size:1em;font-weight:700;margin-top:.625em;text-align:center}:host:hover,:host.active{color:#fff}:host:hover .container,:host.active .container{background:#2bbbad}\n"] }]
+        }], propDecorators: { item: [{
+                type: Input
+            }], active: [{
+                type: HostBinding,
+                args: ['class.' + UIClass.Active]
+            }], click: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+class NavigationMenuComponent {
+    constructor() {
+        this.items = [];
+        this.selected = new EventEmitter();
+    }
+    onClick(item) {
+        this.items.forEach((item) => item.active = false);
+        item.active = true;
+        this.selected.emit(item);
+    }
+}
+NavigationMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NavigationMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NavigationMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: NavigationMenuComponent, selector: "sfc-navigation-menu", inputs: { items: "items" }, outputs: { selected: "selected" }, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"items\">\r\n        <sfc-navigation-menu-item *ngFor=\"let item of items\" [item]=\"item\" (click)=\"onClick(item)\">\r\n        </sfc-navigation-menu-item>\r\n    </div>\r\n</div>", styles: [":host-context(.sfc-default-theme) :host .container{background:#f5f7fa}:host-context(.sfc-dark-theme) :host .container{background:#1b1d1f}:host .container .items{display:flex;flex-wrap:wrap;padding:.625em}:host .container .items sfc-navigation-menu-item{flex:50%}\n"], components: [{ type: NavigationMenuItemComponent, selector: "sfc-navigation-menu-item", inputs: ["item"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NavigationMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-navigation-menu', template: "<div class=\"container\">\r\n    <div class=\"items\">\r\n        <sfc-navigation-menu-item *ngFor=\"let item of items\" [item]=\"item\" (click)=\"onClick(item)\">\r\n        </sfc-navigation-menu-item>\r\n    </div>\r\n</div>", styles: [":host-context(.sfc-default-theme) :host .container{background:#f5f7fa}:host-context(.sfc-dark-theme) :host .container{background:#1b1d1f}:host .container .items{display:flex;flex-wrap:wrap;padding:.625em}:host .container .items sfc-navigation-menu-item{flex:50%}\n"] }]
+        }], propDecorators: { items: [{
+                type: Input
+            }], selected: [{
+                type: Output
+            }] } });
+
+var StarType;
+(function (StarType) {
+    StarType["None"] = "none";
+    StarType["S25"] = "s25";
+    StarType["Half"] = "half";
+    StarType["S75"] = "s75";
+    StarType["Full"] = "full";
+})(StarType || (StarType = {}));
+
+class StarsComponent {
+    constructor() {
+        this.DEFAULT_COUNT = 5;
+        this.value = 0;
+        this.count = this.DEFAULT_COUNT;
+    }
+    get stars() {
+        return new Array(this.count);
+    }
+    getStarType(index) {
+        index += 1;
+        if ((index - this.value) >= 1) {
+            return StarType.None;
+        }
+        if (this.value >= index) {
+            return StarType.Full;
+        }
+        const part = this.value - Math.floor(this.value);
+        if (part < 0.25 || (part >= 0.25 && part < 0.5)) {
+            return StarType.S25;
+        }
+        if (part >= 0.5 && part < 0.75) {
+            return StarType.Half;
+        }
+        return StarType.S75;
+    }
+}
+StarsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: StarsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+StarsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: StarsComponent, selector: "sfc-stars", inputs: { value: "value", count: "count" }, ngImport: i0, template: "<div class=\"container\">\r\n    <button *ngFor=\"let star of stars; let i = index;\" [ngClass]=\"getStarType(i)\"></button>\r\n</div>", styles: [":host .container button{width:1.8em;height:1.8em;font-size:1em;background:url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat;cursor:pointer;border:0;outline:none;transition:transform .25s,background .25s ease}:host .container button:hover{transform:scale(1.1)}:host .container button.none{background:url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat}:host .container button.s25{background:url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M196.208 415.2v-224.8l-139.504 20.272 100.944 98.384-23.84 138.928z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat,url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat}:host .container button.half{background:url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M258.672 64l-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6v-318.4z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat,url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat}:host .container button.s75{background:url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M321.616 190.496l-0.656-0.096-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 63.024 33.136z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat,url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat}:host .container button.full{background:url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat}\n"], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: StarsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-stars', template: "<div class=\"container\">\r\n    <button *ngFor=\"let star of stars; let i = index;\" [ngClass]=\"getStarType(i)\"></button>\r\n</div>", styles: [":host .container button{width:1.8em;height:1.8em;font-size:1em;background:url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat;cursor:pointer;border:0;outline:none;transition:transform .25s,background .25s ease}:host .container button:hover{transform:scale(1.1)}:host .container button.none{background:url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat}:host .container button.s25{background:url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M196.208 415.2v-224.8l-139.504 20.272 100.944 98.384-23.84 138.928z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat,url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat}:host .container button.half{background:url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M258.672 64l-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6v-318.4z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat,url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat}:host .container button.s75{background:url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M321.616 190.496l-0.656-0.096-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 63.024 33.136z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat,url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat}:host .container button.full{background:url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat}\n"] }]
+        }], propDecorators: { value: [{
+                type: Input
+            }], count: [{
+                type: Input
+            }] } });
+
+class AvatarConstants {
+}
+AvatarConstants.DEFAULT_RADIUS = 80;
+AvatarConstants.DEFAULT_STROKE = 2;
+AvatarConstants.STARS_DEFAULT_COUNT = 5;
+AvatarConstants.PROGRESS_DEFAULT_COLOR = '#CCD1D9';
+AvatarConstants.PROGRESS_DEFAULT_FILLED_COLOR = '#2bbbad';
+AvatarConstants.DATA_DEFAULT_IMAGE = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAABHNCSVQICAgIfAhkiAAAIABJREFUeJztvXl0HNd15/99tfSGXtEACBAgAZKQSIIEsZESJVESJYq2KCm2PLbH8XhR7Hi3k0nO/H6/mZwzOTM+mcmMT5IzyS+xJ45jeZEcS7Yyliw52qPFlESJBECAGyiCJABiX3vfqqve/IEGhO6uqu4GuoFu9PucwyN1V3XVrUK9W/fddxeAwWAwGAwGg8FgMBgMBoPBYDAYDAaDwWAwGAwGg8FgMBgMBoPBYDAYDAaDwWAwGAwGg8FgMBgMBoPBYDAYDAaDwWAwGAwGg8FgMBgMBoPBYDAYDEahIBstAGN96OrqqqKUPkQpvZsQ0g6giRDiBABKqQfAEKX0LCHkDULIc93d3bMbKzFjPWAKYJNz4MCB/YIg/EcAnyCEmLL5DaU0AuCpeDz+nf7+/vOFlZCxkTAFsElpaWmxmkym/wHga4QQYTXHoJTGAfx9JBL5k4sXLwbyKyGjGGAKYBPS1dW1h1L6LCGkOR/Ho5QOEkJ+p7u7eyAfx2MUD0wBbDK6urqOUEqfJ4RY83lcSmmAEHKiu7v7ZD6Py9hYmALYRCTe/KfzPfiXSCiBQ8wS2DxwGy0AIz+0tLRYE2Z/QQY/ABBCrJTSZ1taWgp2Dsb6whTAJsFkMv2PfM359SCENCeci4xNAJsCbAISS3292Xj77dXbsH3fHahubIG1sg4AEJifwMzwRYxceAu+mRsZz0cpjcfj8Q62RFj68BstAGPt1NfX/1UiuEcTQji03vvv0P6hR+CuvwlGix2EcCCEg9FiR+XWXWjcfycE0YzZG5cAUJ1jEY7jOPvExMSv8n0tjPWFWQAlTiLC74ZekA8hHO741P8Hd/3NadsopYiGw4iFI4hLEgDAOz2Ec6/8AJQqmuellEYIIdtYxGBpw3wAJQ6l9KFMEX777/m06uCPRSLwzMwi5PMvD34AcNQ0YWfXQ7rnJYSYKKX6OzGKHqYAShxK6d162+3V29DUdjT1Nwh6fQh4vKCK+lu+7qZbUeGqW9O5GcUPUwAlTqa5//Z9d4DjPnD1UEoR8HoRDYf1j8tx2LKza03nZhQ/TAGUPk16G6sbW5I+R4JBSJFoVgd21u5a07kZxQ9TACXOUkqvFktLfQAQlySEA8Gsj22x16zp3IzihymAMiLsZwl9jGSYAihxEsU8NAnMTwAA5HgcUiyW07FDvuk1nZtR/DAFUPoM6W2cGb4IAIhFs5v3r8QzeXVN52YUP0wBlDiU0rN620cuvAVFkRGPSXq7pR9XUTB1rXtN52YUP0wBlDiEkDf0tvtmbmCo73Uo8XhOx5248i6CCxNrOjej+GEKoMQhhDyXqOGnyfnXfg7P1PWsj+mdHsK17ud090mEAuvvxCh6WDJQiTMxMRGqq6vbQwg5oL0XxdS1HggGC6yV9SBEPQWEKgom3j+Fy289oZsHkOCJnp6en61acEZRwBTAJqC6uvoKx3FfIYToWHQUC+OXMTd2CYocBy8YIBosAKUIeacwM9SHwdPPJOb92pmAwHI68Oempqb0lwkYRQ/LBtwkdHZ2/i0h5FvrcS5K6d/19PT8wXqci1FYmA9gkxCJRP6EUjpY6PNQSgcjkcifFPo8jPWBKYBNwsWLFwOEkN+hlBYs3C9RFPR3WI+AzQNTAJuI7u7uAULIiUIogRVlwVlF4E0EUwCbjO7u7pOEkEP5nA4kGoMcYj0BNh9sFWATMjExMetyuX4kCIIdQKf+6oA2idZg34tEIp/s7+8fz6+UjGKArQJsclhzUIYeTAGUCUvtwQkhP9Lbj1L6BdYevHxgCqDM6Orq0o3y6e7uZs9EGcGcgAxGGcMUAINRxjAFwGCUMeUy3xPa2tqO8Dx/N4CDhJBmSmlDITvpMkqHRJDTaCJ24owsy2/09fWdBJBbEYUSZFMrgI6OjmZCyDcJIZ8FULXR8jBKillK6eOU0u/29vYWPMdio9iUCqC1tbVBEIQ/I4R8NpuOuQyGFpTSOKX08Xg8/qfnzp0b3Wh58s2miwTs6Oj4Ks/z/4fjuMOrjYBjMJYghHCEkHaO475YW1vrmZyc1C+UWGJsGgugsbHR5Ha7f5Aw9xmMgkApfXxubu7Lw8PDumXYSoVNoQBaWlqsZrP5eQBHNloWRllwMhwOn9gMadElbyI3Njaa2OBnrDNHzGbz842NjVnlVhQzJa8A3G73D8AGP2P9OZJ49kqakp4CdHR0fJXjuL/Pdn+b3Y59bW1oaGzElto62B2OQorHKBF8Xi+mJicwOjyMC3198Pt8Wf9WUZSv9fb2fr+A4hWUklUAra2tDaIonsumQ63Nbsddx+7D/vZ2cFzJGz2MAqIoCs6fPYs3X30lK0VAKfVIktRaqkuEJbsMWF9f/zccxx3OtN/uln341OcfQf327Zr18BmMJQgh2FJXhwOdnViYm8fczEym/U2EkMrJycln1knEvFKSIyIR4XcpU5DPwdtuw/EHHlwvsRibkJf/5Tc48847uvskgoX2lmLEYEnaw4nwXt3Bv7tlHxv8jDVz/IEHsbtln+4+hBCBEPLNdRIpr5SiAhAyBfvY7HY88PDD6yUPY5PzwMMPw2a36+6TeCZLLuy85BRAW1vbEWRI7Lnr2H0wmc3rJBFjs2Mym3HXsfsy7VaVeDZLipJTAImUXk1sdjv2t7evlziMMmF/e3tGKyDTs1mMlJzJAuCg3sZ9bW05LfWFozGEIhFEYhIo1W+KyShvtjffjAs9Z/R20X02i5GSswAIIc162xsaG7M6jqwomPV4Mef1IRyNscHPyEjN1q262zM9m8VIyVkAiUo+mtu31NZlPIasKJhZ8CIuy3mRaX5mBnPTU/DMzcHv9SAaDiMcCiXtYzAaYbZYYHM6YXe64N6yBZVV1eCFkvsT5BVFUbAwM4OZyQn4PAsI+HwIh4KIhpOT7YxmE8yWCljtdtidLlTX1sFVXb2ugV2u6mrd7ZTShnUSJW+U3NOXqYxXNuG9Cz7/mga/FIvhxrWruHHtKiZu3IAUi2b8TdAPLADAyPDydxzPo7a+Adubb8K2nbvKxnEZi0YxPHgFN65dxdTYKOKSlPE3QX96VJ4githS34BtO3ehsfkmGIzGQoi7TIXVpru9FEvMlZwCWCvhaAyRWOYHTo2FuVlc7u/D9csDWT20mVBkGeMjwxgfGca7r72KbTt3YfeBdtQ2lNyLJCvmZ2Zwsbcbw4NXoOTB+opLEsaGrmNs6Dree+M1NDbfhJaOLlRmeFMzPqDsFEAoknsdB+/8PHrfeQs3rl0tgESLUEoxcnUQI1cHsaW+AQduObxpFMH8zAzO/PYNTI0VLlxekWVcvzyA65cHsKW+AQfvvJspgiwoOwWQy9tfisVw9tQ7uNx/VtdJaDAYsH3HLtTVN6Cmtg52pxPOysqkfXweDwJ+H2anpzB2YwSjw0MI+P2qx5saG8XLv3oKjTfdjK4jd2Y0PYuVSDiM3rdPYvDiBd39TCYzmpqbUbe1AVVbtsDucMLuTM7x8nk88Hk9mJ2awsT4KIYGBxGJhFWPNzU2it888TM0t+xDx+1HymZqtRrKSgFQSrP29k+OjuLtV15SnXsCgKWiAvvbu7CvrR2NO3aC4/XzqlyV7rTvxm6MYOBcP/q6T8OzMJ+2ffjK+xgfHsYtdx/Fzj17s5K7WBi9fg1vv/ISohoWl9Vm++D+7dyV8Xhq92/42lVc6DuL82e7VZXp4MULuHHtKm6/70No2LEz94soA0ouGShTb7s/+bP/prmNUoqxmbmM5+g//S763z2lqiwq3VW489hxtHUdgiCKWUicHZfO9eOdN1/D0FX1fJKde1pw+J57i37VQFEU9L59Ehd7e1S3126tx53HjmPfgfaMSjPrc8oyLvSfxW9ffRmT42Oq+7R0dKLj9iNrXjV47G//Wnd7qfVWLO6nKc9kSgdWFAUnX3oBw1feT9tmtdlw7MRD6Dh0a94e3JXsbT2Ava0HcOXSRTz/zD9jdno6afu1gYvwez24+8SDMFdU5P38+UCKxfDG87/BxIqVjiWcrkocf+gjaO3oyvt5OZ5Ha0cXWju6cK63Gy8/9+s0i+pibw8W5uZw94kHIRoMeZehVCm5egBbt279r3rb77z3Xt3f+4Ih1e+lWAyvPvM0xoevp21rP3QrPvOlr2L7jp0gBV53dldX49BtRwBCMHL9WpIVEgr4MTp0HY27biq6h1iKxfDqr59WdfTdfvRefOqRL2Jrw7aCy7Glbiu6Dt+OuBzHjaHkv2XA68XU+Bgam28Cv0ol3v/eKd3tExMT317VgTeIkosELASKouBfn/01pseTH16DwYBPfvb38G8+/VmYzZZ1k4fjedx7/wP4/W/9EeyOFGfYwgJe+tVTCAeD6yZPJpYG/8zEeNL3looKfO7LX8f9H/lYwdfoV2IwGnH/Rz6Gz33567CkWEszE+N49ddPQ4rF1k2eYoZZAAB+++LzaW9+q82GL37rj7Dz5t1ZyRWPxxGNRBEOhxEKhhAOhREMBhEKhRCOhBGNRCHFJMiKDEopOI7LOCVxOF1o7TyIkWvX4PN6lr+PRiKYHBvFjpt3r/pNli8URcFrzz6D6ZS5d1XNFvzeN/4ADY1NWR1HkiREo+r3LxKJIBKJQJIkyIn4gWyu211djb0H2nD18gBCKxRmKODH7NQkduzek3OVKGYBbDL6T7+bNuevqtmCr/7x/4stdfqx34qiIBQMYX5uHp4FD4LBIGLRGGRZhqIoy/tRhUKWZcRiMYSCIfi8PszPzSPgDyw/0FrY7Hb83te/he1NyV7s+elpvPOvr+R4tfnnzJtvYHL0RtJ3VTVb8IVv/CHcVfrr8LIsIxgMYn5uHl6PF6FgSPX+KYqyeP+ii/fP6/Fifm4ewWAw4/1zV1XjC9/4Q1TVbEn6fnL0Bs68+UaOV7v5KGsFMDk6iv53kzW61WbDI1/7JhxOl+bvFEVBMLD44IZCoaSHNVsopYhEIliYX4Df59d9kA1GIz7/1W+kKYHhK+9joO9szufOF8ODV3D5XF/Sd0uDXy91VlEU+P1+LMwvIBwKr+r+KYqCcCi8eP/8ft1j2Ox2VSVw+Vwfhgev5HzuzUTZKgApFsPbr7yU5GQzGAx45Gvf0h380WgUCwsLCIfVg1BWQzQahWfBg3BI+5gGoxGf+r3fh9OVHGDU/dZv4Z1PjyEoNOFgEO+8mmyBWG02fO4rX9cd/EtKLxrJnD+RLdFIFAvzC4joRHna7HZ87itfh9WWHFT17muvFpU/Zb0pWwVw9tQ7aUE+H/23/07T7KeUIhgIwu/zgyr5Tx2mlCIYDMLn9WkGK9nsdnz6i1+GsCIWQJFlvPfGa3mXJxOnf/tGUhIUx3H4+Gc+rxqwAyxen9/vR8AfKEjqNaUUAX8Afr9f8/iuSjc+/pnPJ8UCRCMRnP5t+U4FylIBeOfncbk/2XRuP3QrWjvV16iXHt58vvW1iMVi8Cx4NE3auvoGHH/wI0nfTY7eWFdTdnJ0NM1vcviuo9h18x7V/Sml8Hq8eX3raxGNROH1eDWVwK6b9+DwXUeTvhu+8j4mR0uyrP+aKatAoCV633kr6QGx2mw48fC/Ud13afDHopmXjSbGRjE0+D6mJ8YxPz+LgG/xbW5zOFBRYUVtfQOadt2MhsYm3Yg0WZbh9XjhdDlVvdS3HrkL53p7MDoytPxdz9snsW3nrnXJj0/1hFe6q3DfiYdU910a/PF4PONxx2+M4Prg+5gcH4XP64Hf6wUA2BwO2B1O1G5twI7mm7F123bd48TjcXg9XjicDtX7d9+JhzBwrh/zc7NJ11Tb8ImMMm42yk4BLMzNpmX1HX/wI5rr/EueaT0GzvfjzDsnMT+r3kTC7/XC7/VicnwMZ0+/iwqbDZ233o7WjoNJ5vxKZFmGz+uD3WFPe4g5nseDH/8kvv+//mL5u4DXi+HBK9iR5bLlapkcHU0L9jnx8Mc1w6ID/oDu4FcUBQPn+3H6rTfh9Syo7rN0/8ZGhtF96i04nC4cuuMu7Nl/QFPhxeNxBPwB2OzpiVSCKOLEwx/Hz374QUevqbFRTI6ObpoMzGwpuynA5f5kr3WluwptXYdU911al9bC5/Hgl489ipee/ZXm4Fcj6Pfjt6+8iJ//8O8xoZMiK0mSpmOwftt27Nl/IOm7i73dWcuwWlLP0bSrGbv37VfdNxwOIxrVNvvnZqbxxI/+Aa/85hnNwa+G17OAV37zDJ740T9gbmZacz+9v9/uffvRtCu5gtd63L9io6wUQCwaxfXLA0nf3X38w6qx/YqiIBDQbv8+fmME//To32MiZQ08Fxbm5/DUY4/iwln1xBkACIVCmm/Qez58Iunz/PQ05jO0sloLwYAf48NDSd/dcfSY6r6yLCOkEXYNAFcGLuIXP/lHzE5PrVqe2ekp/OIn/4grAxc19wkFQ5pLrKmyjw8PIRhQT9HerJSVAnj/0qWkSj6WigrN5JRwKKzp7R+/MYJnnnwcMZ23W7ZQSvHq88/inE612WBAfZmqrr4hLdKukM7AkcHBJN9JpbtK8+0fCoY0HXFXBi7ihaefgpSHqkqSJOGFp5/SVAKUUk1FtHvf/qRlVUopRgZLrrvXmig7BbCS/e1dqnNXRVE0TUefx4Nf//Kf0h7e6upqHDx4EK2trTCuIu799Zf+BSPXr6lukyQJkkYhk65bb0v6PHTlcs7nzpZU5dJxy62q+8XjcU3Tf2ZqEq8893SacqitrcXBgwexZ88eTb+IFpRSvPLc05iZmlTdHo1GNa2orsPJ96/cAoPKygk4lOL829em3kAkEtYOKHnx2f+T9ObnOA6f//zncdttHzxIoVAIP/nJT3D2bPZRepRSvPKbp/GZL30DRpMpbXs4HIZoSFdWe/YfwLNPPbm8bBjwehHw+WDN0MQiV6RYDLOTE0nf7dewnrTun6IoaW9+o9GIL33pSzhw4AN/htfrxU9+8hNcuKBfSShJvoQl8Jkvf0PVMRgJR2C1pdfs3N/RhVef/83y59nJCUixWNFlWxaKsrEApiYmkqrTGAwGNGpUidGKKBs435825//0pz+dNPgBwGKx4Ctf+Qqam3MrEx/w+3HmnZOq22KxmGpsQIXVmrYsVojae9MT40lvbaerUjXWn1Kq+fbv634PC/PJBVlSBz8AOBwOfP3rX0dtbW1OMi7Mz6Gv+z3VbdFoVHVK4q6qTpsGTKdkNW5mykYBTIwlZ6tt37FL1fkXl+KaQTipg9NsNuOOO+5Q3ZfneRw7pu4g06O/+z3NMloxjRTWVEU2twbHmhapx2xqvkl1P0lS77CkKAq6U+7f1q1b0wb/EqIo4vjx4znL2f3OSdW/H6VU0+eQei2FuH/FStkogFRvc129+nqv1kMyMTaattS3bds23bTUxiy7FKWeX8uhpeUHSHUEeuYylz3LFW/KMes1intoyXh98P2klFxg8f7pUVNTk4OEi4SCQVwfTK/opCdb6rWkXutmpmwUwPxccsJMbX296n5SXP0hGVJ5qEIh7WWubLZrce39AdXvtRxZqVluAZ96IdO1sLIeAQBUbdmiup+WjGr3z5uI9NNCL7lHD7VzATr3L+VaUq91M1M2CiB1fddqU3eSyXH1NePJ8fR59ejoKKantQNRenq01/f1UDsXAM317NQEHK1KxmshtVVXpUauf1xWH2RqAU+Dg4O6SmC1908ruEpLNqcr+f6lXutmpmwUQGqvvtS6/UtorV2rle0GgEcffVTV6TU4OIiXXnopRykXiaj0FlxCTQmolduSs4i9z4VQigKtqFDvgqUVO7GwIu5+iXg8jscee0x12tXT04N33313FZKqn0tPttT05dRr3cyU1TJgNmg5ALXM6uvXr+Pb3/42jh8/jvr6ekiShAsXLuC1115bVaGLJSQpBjOyr0PodFUmKalwKJTXpcBUxZhrjT8txXru3Dn8+Z//OY4dO4aamhpEIpHlwb/a+5drunHqtZRTp2imALJE76GYm5vDE088sY7SFCerHTjj4+N47LHH8iwNIxvKZgqQLVpFIits69uei+dz082BlHl/oavwqjVHzbXAZrGQj0alpUrZKIDUyK7UAbOEVnqpTcNpWAhEUUSFVX2OrSafIstpHu58KwBLypzfr3H/tJSAVqWgQqB1Li3ZvCle/9Rr3cyUzRTAarUlddvxeTyAyjI9z/Oqjrba+gbNtlPZ4nQ6ceLECTgcDpw7dw5vvfWW6n41GmXJtEqJL6TUBDRZ8t/DwGg2IxT8IDvS5/GoDjSe51WX26q21KZFAeZKZWUlHnzwQZjNZpw9exbvvace9Ve1RT2CUCtmw+dJVgDGMmomWjYWgMud7PWfn1X3FPOC+kPStOvmNctw9OhRbN++HQ6HA0eOHNEMFNrWpB6irJUkkxrkpLXEuRZSHYrTKXkBSwiiuoyNO3MLi1bjxIkT2Lp1K1wuF+655x5UaqzkaJ1LS7bUa8l3HkUxUzYKIDVufezGiOp+okZlm4bGprQuM7mSmiVoUkn6IYSgpVU9SUktGQhIjxtwuvNvbttdyZWSpybUFYAoqMvYvKdF895miznlzax2/0RRRPOelpxkS72W1GvdzJSNAqitTzarR65fVd1PFEVVM5vjOHTddmRNMpw5c2bZPJ6amsKgSu75nv0HNN9ABo0MteFryWnErgwNOVaDOyXaUOv+GYzqMhoMBuxr61yTDKdOnVpeGhwaGsKEihLa19apeZ+0ZEu9ltRr3cyUjQ+grr4evCAsB8gE/H5MjI2m5QQQQmA0GlXDUFs7DqL/zHs5la9aydWrV/G9730PLpcLExMTactmoiji1iNHVX8riILqHDYuSRi6mpzDXrNVPcx5LaT6JSbHx+D1eOBwJvcuJITAYDCoJi7deudRDFzoR2SV1ZXPnz+P4eFhVFRUYHIyPfffZDbj1juPqv7WYDCoKnavx5Pm29HywWxGysYCEAQR27Ynz7kvanTVMZnTTcvFYwg4/tDDa1ruCofDGB8fV10zv+u++2FPGVBLpJq/S1wZuJjkdDNZLKiszr8FYK6ogCPF6Tdwvl99Xw1ZjSYTjj3wEdVt2eL3+1UHPwAce+AjqrUU9GRKvQZHpbto268XgrJRAABw0969SZ/7uk+r7icIgqa5uHXbdhz90AN5l6394K3Y165uIvM8r2nWdr/7TtLnhqYdeZdtiW07dyV91rp/okHUnO8v1uW/J++yHb7rHs2+BKIoavpPUq8h9Ro3O2WlAPbs25f09vYszOPyhfOq+1bovAVaOw/i7uMn8hb40n7wVtx1/H7N7RXWCo3lvzkMDiSXOWsqYFnwxpuS8+ZHh4c0namWCu2lyFvuuAu3Hrk7b3LdeuRu3HLHXZrbtWQZuzGC0ZQip003r321p5QoKwVgtdmwJaV6zluvv6q6L8/zukqg7eAt+OinPpvWay4XRFHEPR9+UHfwG01Gzbf/O2++nhQvb7HZUJehacZacFa64UxxML7x8ouq+4qiqGl2A4v+gA9/9ONrClgyGI348Ec/rjnvBxZNfy1rJFV2Z1U1XO6qVctTipSVAgCAHXuSpwFDVwdxVSP/3mwxaw4+ANi+Yyc+86VvoOOW27LqV78EIQR7W9vwmS99A62dBzX343keVo2IwIX5OZx5O7nCTtPuvar75pMde5OX2AbO92um31oqLLoFPne37McjX/tDtLR15HT/eJ5HS1sHHvnaH2J3i3pVYmBxKqf19p8YG02b/6deWzmQ/V0vErZu3fpf9bbfee+9ur/3x2KYm5xEeEVU29jIMA7ddgREJczWYDQgFo1pJroIgoDGnbvQ1nULHK5KyIqMcCi9Fr0oiqhr2IZ9bZ340EMPY29rm6bDCgAIR+BwOjRDk5958ueYWlG7zmgyo+POu2DR6HCUDyilEEwmjF2/BmmFl396cgKdKdWJgcSKgHFxRUDr/omiiJ037ca+ts7FACYChAKBtExAg9GI+sYmHOi8Bcce+Aj27GvVjSvgeV73/j35kx8mreZYbDa03noYlgxRgKlt0VKZmJj4tu4ORUbZLAOu5Oa2drzz0gvLn2enp/H6yy/i3vvTnXuELA5Er8erWZADWPRw72/vxP6EIy8cCkGSYoljcLots9POyRE4HA7Nt+LlC+dxMaW56a79rTm9RVcLx3G4ua0dZ0/+dvm7kevXcPrtkzh0e3qcBMdxsNlt8Pl8UGTt9N4KqxUdtxxGxy2HAQDBQAByooAHzwuauRGqMvKL59Qa/O+efCOtBPvNbe3r0lex2Ci/Kwbgrq1N8wW8+cqLmg4tjuPgdDlzimQzWyywO5ywO5w5DX6e5+FwODRNZ7/Ph1898XjSdxV2B5r2qHvAC0HDzl1pvoAXf/0rzGm0RxMEAU6nM6d6/xVW6/L9y2XwZzrX3OwMXn7u10nfOauq0VBm3v8lylIBAMD+W26FIH4wv1cUBT9/9AfwaxT+IITA7rDDUoBEmyWMJiOcLu2HV5FlPPnjH6YV1zxw+LZ1f3sduO32pJWJWCyGnz/6A81uSRzHweF0aMZY5AOT2aRr9sei0UUZV0xfCCE4cNvtBZOp2ClbBWCuqMD+W5M72/i8Ht2HmBACS4UlZ2sgEzzPw+6ww2az6S4tPvWzn2JkKNl03bG3Be4c6+fnA7vLhd0dyXEL05MTeOLHP9TMryeEwGq1wuHUtnBWgyAIcDgdsFqtmvdPkWU88eMfpiX+7O7oLKvY/1TKVgEAi6ZsQ0qH2NGRIfz0+9/T7fu39MA5HA7NAJNsEEQBNrsNTpdTd7UBAP7l6X/G+ZQmog63G3u7tFcRCk3z/lZUp4QdD16+hF889mPdIhuiKMLpcsJmt63p/okGcfn+6SlkRZbxi8d+jMHLyTET1Vvr0by/ddXn3wyUtQIAgNbDt6XNZ0eGruGn3/8egjrdgYHFB9DhcKDSXQmr1QqD0aDriOM4DgaDARXWCrgqXXA6nTABsVJnAAAgAElEQVQajbpvfUWW8Yuf/gin3nw96XujyYxD99634Y6rzrvuRoXdkfTdxf6z+CcdS2oJo9EIh8MBV6ULFdaKjPeP53kYjB/cP4fDkbEPYywaxT89+oM0p2mF3YHOu/IXjFSqlOUqwEp4nsfBe+7FOy++gKDvgxLVI0PX8IP//6/wqUd+X7OJyBIcx8FkNiXNb1NXDLSKeejh9/nw5I9/mGb284KAW49/CKYiKFwhGgy45d5jePuF5xGNfJDk8/6lC/jHv/1f+PQXv5yxGhDP8zCbzUmBQ6n3bzUrHAvzc/j5oz9IS/Yxmsy45d5jZdP/T4+ytwCAxSyy2z58f9qbbH52Fj/4m7/CuyffyPmYPM8n/ct18F++cB7f/Ys/Vx/8x44X1by1wm7HbR++H0ZTskKaHB/D//7L76A3w9q5Gqn3L1d63zuF//2X31Ed/It/6/Ip+qFH2QUCTc+r1/cXRBF1jU2YnZhIepMpioIrly7iyqVLqK1vgN3hUP19vliYn8Ozv3wSrz7/XFq9/MWH9wScVdrhqmad4KK1QilFNKZu1htMJtRu246Z8XFIK0z/eDyOgfPncGNoCFu3bc9pSW81zExN4Z9/9lO8/ca/ppUmq7A7cPj4h2DV+Rtmun+bLRCIKYAVCKKI+p07EfD5EEjpWOPzetB96m1MjI2hqmZLTmv72bAwP4fXXnweT//8cdXagw63G7fdfyJjdeKNUgBAIlqvaQe8c3MIpfhP5udmceadk5ifm0NNXR0slvym3M7NzuCFZ36F5556UjUeoaq2Drceuy9jqm+5KYCy9wGkIogiDh69B9cuXsRATzcUJXkuOnC+HwPn+7F9x050HLoVe/YfWPVbLZ5oBNr97jsYHLik2Qhjx94W7O06uOEOv2wwmEy45b7juHr+HN7vO5sUAqwoCs6efhdnT7+L5t170dZ1CHtbD6w6ISgWjeLSuX70dZ9O8/AvQQjBzW3t2LW/tSTu33rDFIAGO1taUFNfj76338LCTHr/v5Hr1zBy/RqefepJbN22HTt2NaOhsQmVVdVwV1VDSFmWUmQZC/PzmJ2ewuT4KIavXcPQ1SuaDSuBRZP1wOHbNmSdfy1wHIebDrShpmEb+t95S7Xb7uDlSxi8fAmCIKChsQmNO3Zh67ZtqKqphauyMu3+xSUpcf8mMX7jBoavX8Xo8JDu/XO43Thw2x1waBQPZTAFoIvV4cAdJx7A2PXruHy2ByF/es84RVEwOjyUllfOcRzsjsXqPqFgQLVElhZGkxm79reiac+ekn5rOSorcceJBzF27RoGerqTfCtLxONxDF0dxNDV5PqIgiAsVzcO+H26Az0Vo8mM3R0daNjVXNL3bz1gCiAL6nfsQF1jI8aHruP6pYtZ9Y9XFEWzoagW5gorduxtQePu3euS2LMecByHbc3N2LpjB24MDmL48iX4PZnbb8fj8Zzvn83pROPuvdjW3Lxp7l+hYQogSziOW4wc3LkL3vl5jF4dxNToDVWrIBeMJjNqGhqwdccOVG/iYpQ8z6Np92407d6NhZkZjA9dx8TwECIaXZCzxWSxoK6xCVubdsBVgFqIm52yUwCEkDV3f3VUVsJReQv2HboFQZ8P89PT8M7Nwu/xIOj3aT7URpMZZqsVVocDDrcblTVb8jo/LXRvvnwd31VdDVd1NfYdugUBrxdzk5PwLszDNz+PSCioef9MFgtMlgrYKyvhcFXCXVuru6SXK+U4XSg7BSDwAqR4emPL1VJht6PCbse25uScgrgkLYfCCoIAQwGX55YQcmwomiuEEAg8j3gem2laHQ7VQSzFYstFR0SDYV2i9sQ8JiiVCmV3xUaDIa8KQAtBFNM82YXGmOMgWarPn0tIscFgRDy8NrM9G9Zr0K/EYChsR+VipOwUgCiKEAUBUg5e5VJAFATNjLiFuVlM3riBuekpeObmEPD5IKUE9IgGI6x2O5xuN9w1W1C7bZtqgUyDKCIaU2+gWsoYRAOEMnQclpwCoJQGCCGakTc+rzdjuK7FbIE/mF53rlThOC6tFmAw4MfghQu4dvlSWlSjGlIsioXZGSzMzuD65cUiqVaHAzt370Xzvn2osC5GIBJCUGGpgD/gX7MvpVgQeD5jLUBg8Z7qQSnVTx8tQkpOARBCRgFo1r+ampzIqAA4joOtwopQOFTyloAoCLCYLcsOLJ/Hg3On38P1y5fWPEADXi/63zuFc6ffxY7de9F66BbYnU7wHAe71YZAKFjyloAoiqgwW7JycC7MqJc8WyLxbJYUJacAKKWDhBBNBTA6PIybdmeuj8dxHKwVVkiShGgshrgcL5k32qIzToDRYFg2++V4HOdOv4cLvd26xThWA6UU1wYuYujKZezr6ELroVvACwLsVhtikoRoLJpToM5GQwiBKAgwGIw5Of6mx8d1t1NK07u9FjklpwAAnAHwkNbGC319uPu+41kv6YiidhurUmFmcgJvv/wSfKtsWpotiizj3Jn3MDx4Bbcf/xCqa+tgEEUYSvz+ZYOiKMtTIx3OrIcs+aTkFj5lWdZNzvf7fDh/Vr3p52ZDjsfRffJNvPjULwo++Ffi8yzgxad+ge6Tby53W97sXBsYQCioP8XP9GwWIyXn9pyamhrdunXrNwBoluedHB/Dgc5O1WU4X7DwS1jrwczkBF595mmMDl3fUBmGB6/AvWXLspNwMxKLRvHm879Z7vOgwWxvb++/B1BSnuWSUwAAlLq6uq2EkMNaO8SiUSzMzWNva3rBx1JXAIqioO/UO3jn1ZdVk2tygSyVKVuD7yMaieDqpYtQZAU19fUFj0bcCE6+9AJmp9Rbki9BKf2HiYmJ59dJpLxRkn+tjo6OZkLIJUKIrg/j4G234fgDDyZ9Nzo9W1DZCsn8zAzefuUlLGg04NCD43mY7XaYrFYYzGaIKTn4UjSKWDiMSCCAsM+3Kkeiq6oat9/3IVRuopj802++gYG+Xt19KKVxSune3t7eknMClqIFgMnJyfna2tqdhJB2vf3GR0cxMzWFHc3Ny9OBUrQA5Hgc/e+ewlsvv4hwKJj5BysQDAY46+rgbmiAxeGAwWQCr+L55hPhyha7HTa3G4LRCCkSyUkRREIhDF44D0VWUF1XV9Kx9bFoFCdfegFXL13MuC+l9Ke9vb0/Wgex8k5JWgAA0Nra2iCK4jlCiDPTvja7HXcduw/729sxPptbiulGIsViGLx4Aee7T+ecNUcIgX3LFtirqlZtllNK4ZudhW9qKuclUpPFgv1dh9Dcsq+kqu8qioJrAwPoO/V2RqcfAFBKPZIktZ47d67kYgCAElYAANDR0fFVjuP+Ptv9bXY7tjffjJqtW+Gqri46x1UkHEbQ58Pc9BQmx0YxNnQdcSn3vAWD2Qz3tm1pZv5qkaJRzN24gVg4d5+DIIqob9qB2voGuGu2oMJuL4py5isJBvxYmJnB9Pg4rl/O7O1fiaIoX+vt7f1+AcUrKCWtAACgs7PzMULIZzdajmLBUVMDe01N3p1xlFL4pqfhnU4vj1auUEof7+np+dxGy7EWStIHsBKDwfC8xWI5CmB7pn03M6LJhJqmJlQ4nQXxxBNCYLJaYbbbEQ2FoJTJ+r8OJ+fm5j7p9XpL+kaUvALwer1xl8v1S1EU70KZKgFHTQ3c27atS/oxL4qwVlaCAIgGc3NIbiJOhsPhE4ODg6XnUU6h5BUAAMzMzMQMBsPPzWZzEyHkwEbLs16s9q1PCAFHCMiKf7m4+MrZGqCUPj43N/fJzTD4gU3gA0ilo6Pjq4SQ/5nN6kCpkouHnxACkechcBz4xD+t31BKISsK4ooCWZYhyXJGxbCWlYJSglLqoZT+p1J2+Kmx6RQAsLhEKAjCnxFCPpspWKiUIITAWlkJe3U1eB1znwAwCAIMgrCmIhdLCiEajyOW4S0vSxJ8MzMIzM9vKkWQCPJ5PB6P/2mpLvXpsSkVwBKJiMFvJlYJtBvqFTmiyYQKpxMVLpdqEM8ShBCYRBFGQVh+y/edyr0x50raDi9GXFNKEY3HEZEk3QEux+MILiwg6PFAikTWdO4NZpZS+jil9LulGOGXLZtaAaxAaGtrO8Lz/N0ADhJCmimlDXqVhTYKXhQhGAwQTSYYzGaYrNasnHsmUYRJFNPM+3wpgCUopYhIEiJZxCfEJQmRQACxcBhSJIJ4LAZ5FXENhSZRZWo0kc9/RpblN/r6+k4C2PTOjXJRABtKZ2fn7xFCMoaKcoKA6u3bYczQwHIlBkGAWRQ1w27zrQCWUBQFYUnKODVYSTQUwuzISFZKgFL6hZ6enh9nfXDGqijdYO0Soqen58eU0owjUYnHMXXtGrxTU6AZ6hUKHAeb2YwKo3FDYu45jkOF0Qib2Qwhw/kppfBOTWHq6tVsB/8pNvjXB2YBrBNdXV17KKWns512CAYDnLW1sKTUN+Q5DuZEZeNiQorHEZYkyCmKK+T1wjM5iXiWvRET5vih7u7ujOV3GGuHKYB1pL29/RM8z/8yl9+IJhOcW7bA7nLBKIoQi7x0tSTLiEoSvPPz8E5P5+wIVBTl0729vU8USDxGCsX9NG0yJicnL9bV1XkIIfdn+xslHkfI60Vgfh4cANFo1F0J2EhikQjmp6YwOTyMwPx8zgFClNI/6u3t/WGBxGOowCyADaCzs/ObAP56tTEKFTYb7C4X7C7XhmfWRcJh+Obn4fN4EFxDo1RK6R/19PT8TR5FY2QBUwAbRGdn50MAfr7WpUiD0QiLzYYKqxUWqxUmi6VgTkFKKSKhEIJ+P4J+PwI+36rSlVOOGSCEfK67u/vpPInJyAGmADaQRKDSzwkhB/N5XJPZDIPJBKPJBIPRCNFgWKz4k6gPIBoMquHAUiwGSimkWAxyPA4pFkMsGkU0EkE0HF7uJZgvKKVnKaWf3MyBNsUOUwAbj9DR0fEfCSH/mRBS+BbCRQClNALgf/b09Px3lEGwTTHDnIAbjzI5Ofnb2traJwFsJYS0bLRAhYRS+hSl9OO9vb2/QomV0N6MMAugyGhra2sXBOG/AHh4o2XJM0/H4/Fv9/X1lUfXlhKBKYAi5cCBA/sFQfgmIeRrGy3LWqCU/h0h5LsssKc4YQqgiGlra3MKgrB+Pb8KAKX0C4qijHIcF5BleVKSpNmLFy+WXBvtzQpTABtEW1tbE4AmnuebKKX1hJAGQkgtpbQWQC0hpGlDBSwgCSfgZCIDbxLAKCFkVJblYULIEMdxQ93d3aXbwaWEYAqgcAgHDhzYI4piM4BdlNJmAM0AmvM5uO88dh9mp6cxOz2Fhfn5Na/LZ0IQRTicLtTU1qKqpga/ffWVgpyHUuoBMAhgkFJ6nlJ6WVGUgf7+/gGwlYO8wRTA2hEOHDiwh+f5/RzHtQHYs+Jfwfnit/4g6XMwEIB3YR5+nx+hYAB+nx/hUBBxSUIwsGh5h0MhyCodfywVFeA4DkaTGaJBhNVmh8VigdVug9Vmh8Plgs1uT/rNo3/3t4W7OBUS1sMApfQsIeQsIaQ7HA6fZdOK1cEUQA60tLRYzWZzO6W0ixCyn1J6EMCejVy/bz90B1xuFxxOB2wOG8QCVwaWJAl+rx9ejxcLcws4e/qtgp4vWyil5wkhpwC8K0nSqf7+/vMbLVMpwBSANkJbW9t+juOOcBzXRik9TAjZv9FCpdLSdijpsyAIMFeYYTabYTQZYTAYYDQawfHconIggFGjY1A0GgXo4iBXZAXRaBSxWAzRSBThcBjhYBjxlASfi32nC3ZtayExhThJKT1JCHljbm7u7PDwcEnXKCsETAEk6OrqqgJwRFGUOziOO0wpPVgKkXmpCmC9KVYFkEpi6nAKwOuyLL/h8XhOMYUAFGde6TqQiMM/Qim9m+O4w0jM2ZcSaTZjn/tyJqHMjwI4KggC3G53xO12LyuEcqkBmErZPOVdXV17FEU5Sgi5G8BRQkjtRsuUDx7+3c/A5/UlnH6hgpfkJoTAUmGBzW6D3WHH00/8THf/ChMPWaGQFUBRKGSlOEuGU0oDWJwyvE4IeaOnp+cMykAhbFoLoKOjoxnAfUsDHkBtMfWr5zgCgyjAaBBgMIiIx8LgOQ4CTyDwBDxHwHEEQxNB3eYclgozKqsqASym64ZDYUTCEUQiEcSiMUiSBCkmIRaLgSoUsiynzeOXEAQBPM+DcAQGgwGiQYQoijAYDTCZTDCZTTBbzMvWUabsQAKgxpU+i+IEA4wmC6S4DEmKIxqLIybFEUv8Nxpb/3GXSMu+f6lYS2dnZwDASULIK4qiPLNZMxY3kwIQ2tvbj3Ic93Es/iGbNlgecByBySjCZDTAZBRhNAgwGhb/KwjJeVjzs+pdd3meIC5rq4CA37dcFGTp7WypsOTvInQI+H2623le3cAUBR5mkwFapUwopYjG4ohEpcS/GMKRGCJRCco6WRBLCgHA/RzH/WVXV9dJRVG+29vb+xQ2kWVQ8gogUWzzm4SQ38UGNf/gOA5Ohw0Oux0upx02uxUuhx0Lc9MIBPQHyRKE41QrAfOcvgKYnZpGVc2WVcu+Fman9FuFCxoKIJMlRsiS4kxf0oxEJYQjMQRDUYQiUYRCsbRCpAXiCMdxRzo7O/8MwLd7enoeX4+TFpqS9QG0tbU18Tz/F4SQT6zneQWBh9PpgNvlgMvlhMtph9NhV92XUoqJsRtZKQGfZ17VNJ/zRuELab9wKqtq0Hbwlg2JA+g7856m5QIAdosAtyN9ybHCZofRmL8FliWFEAxF4Q9FEI0WvvkIpfR1WZa/0NfXN1TwkxWQklQA7e3tn+A47keF7uxDCIHLaYfb7YK70qU72LXIVgkEAz5EVSro+kMSZr3aJbU5jsPNLe3gEtWC1ysOQJFlvH/xLBSdt2+VwwCbJV0h2Z0uCELhFFVcVhAIhOEPRhYVQzhakPNQSgOKonzh7NmzTxXkBOtAySmAzs7Of08I+etCHFsUBdRUV6HK7UR1lRuVLgf4PJThzkYJRMIhhILp0axxWcGNaX1nW21DIyrdNWuWMxfm56YxOTqsu8+2GjMEPt3cd7mr13WZVVYUBIIR+IMRBAKRQiiE/6e7u/uv8n3Q9aCkFEBnZ+dnCSGP5et4FRYzaqrdcLtd2FJdBbu9cAZFJiUQj0vwedQzf8dmwojFtd+0osGIXbv3r1uHIEVRcPXyeUgx7YFkEDjUV6e7+QRBhN3pKqR4GVmpEHz+MMKR7JqW6EEp/W89PT1/mgfx1pWSUQC5dtZRY2nA19RUoabaDes6ecuXyKQEFuZmVNfxPQEJC379h7S2fjvc1bXrEgcwNzOJybER3f1cNgOc1nQz32y2wFxRXD1ZV04Z/MHIqhWCoihf6+3t/X6exSsoJaMAOjs7XyOEHM3lNyajEXW11Rs24NVYUgI+nweUKqCKAoVSUKogGk6PtQcAWaa4MR3SjQcghOB3PvlvYamwFjQOIBQM4Nlf/kJX0RAA22osqsuAosEAjuNACAFJ/JcjKz9zy9s3inhchtcfxrwnAF8g+0rIlNI4IeSe7u7ukwUUL6+UhAJob2+/j+f5l7PZt8JiRlNjAxq21qKy0llo0XSRYjHEYlHEYtHF/5dikKQYpFgMkXAIspw8EBVZhqSRzz/jiSIQ1l9+ttpseOgTn4Qlh+7CuRAKBvHcU79EIEMDEKtZQLUz3dFICFkuTZ4JQsiyMuA4DoTjwHH8ujdCjUQlTE57MOfJLtuYUjoUiURaSyU9uSQUQGdn5/OZ2mmZzSZ0tu9Dw9badX9IJElCNBpBLBpBNBJZHvR6b0lKKaKRcJoSUFsJAAAprmBsJqxrBQCAw+nCiY99LO9KIBQM4vlf/QpeDT/FEgRAfbUZopD+N+AFAUIe2ppxHA+O58FzPDh+UTEUmmAogmsjM4hJmWOAKKV/3dPT88cFFyoPFL0CaGtraxIE4brePhUWM44fOwKzqfDJe9HEII9EwosNM6Jh3aUwPdSUQDweh6xhoi/4Y/AEMq9xW202HHvgQbirq1clVypzMzN4+blnEQoGM+7rtIpw2Qyq2wxGY8FMe47jwfMJxcALBTmPJMkYHJ5EKKzvI6CUximle0shfLjo+wLU19f/B0LIXXr73Hn7oZzX57NBkiSEggH4vB7MzU5jemoCnoU5BAI+RCJhxOPSmpxuhBDwggBFUUCpsvydWrUeADAZOATDcWSKho3FYnj/4gUQQlC9ZcuqLSI5Hkd/dzfeeOlFSFm09xZ5ghqX+iDneT4vS6paUEqhKPJiRyMphrgkQVFkUEoT04m1KwSe5+C0VcDrDyEuayt9QghHCNk+MTHx5JpPWmCK3gLo7Oy8Qghp1tpeU+3GsaO3r/k8lFJEImFEwiGEwyFEwiFNZ1m+SbUE9KyAqCRjYjaScSqwhM3hQGt7B3bt2Q1RVH8zpyJJMVwduIxzZ3vh93qz+g0BUFdlglFUH+SFfPtnAyEEPC8sWwhrmSaGIzFcGhzPqPzj8XhHsfdBKGoFkGiS0au3zx23dWF7w9acj60oCsKhIMLhEMLhICLhcMGX0PRYqQQopYjFYoCGPIFQHDPe3IJZBFHEtqYm1G2tR9WWGlht9uUkokg4jIDfh9mpaUyMj+HG0FDOxUWrHUZYLerz+3zN/fPJWhXC5IwXY5PzuvsoivLj3t7eL6xFzkJT1Aqgs7Pzzwgh/1lru9FgwEcfui8r01KW5Q8GfCiISCS/jS7zwUoloLciAADeoIR539oDWPJBpd0AR4V6aC8hi0uKKPICKysVgsALIBkUAqUUF6+MIaKTd0ApjUQikR0XL16czLe8+aK41HI6v6u3sb6+VnPwL73hQ6EgQsEAotHir/5ECIHRZEY0oZw4RYGi4Q9YGnAbrQT0Bj+waHkU++AHFgd0PC4BcQkxAIRwi3ERggCeTx8mhBDUb3Hh6oh2MhQhxGQ0Gh8B8J3CSb42ilYBtLW1tevN/QGgcVuy6S/H4wgEfPD7vAiHC18dpxCsVAKUUkiKonkdjgoRPCGY9Uaz9gnkTU4AVTpmP7Bo+hdTEZZcoFRZjNmQYiBkMZFKEJPbqjsdFTAZRV0rgBDyJRSxAijavw7HcQ/qbTcaDKipdgMAIpEwxsdGcHVwAFOT4wiFgiU5+JdYUgKCIEI06DvurBYBdVUmiBq594VA5Anqqky6g5/juKKb968WShXEYlGEQ4FFK2EFNW791SdCSHNXV9eRQsq3FopWAWTK86+vXyzpNz05jpGhqxmr05QaSUogQ46/UeRRX22G0yoW1KlDsLjOX19t1vT2A4vFTQpdl2AjWPLRLFlnAFDpsoLj9O86pfQz6yHfaijKyVk2wT93HO4ElCgi4dB6iZWGJMmY9wbg84cRisQQj6vP1xn5hecJTAYBFWYRdqtRNeW40HA8D5PRDMJxGB6dxeyCbnj0bHd3dx2KsJRYUVoAPM9/VG+7IPDgIG3Y4JcVBaMT8zh3+QZGJ+bhC4TZ4F9HZJkiGJYwPR/C1RsLmJ4PrlutwCUUWUYksuhncrsyZjdWdXZ26oaybxRFqQAymf9ul121eMZ6EInGcOnKGKZmvSXtZ9gsUArMeyO4PuZBNLa+SlhRFEQjYVgrTDCIGf0dn1oPmXKl6BRAa2trAwBdp4nFvDHzy0g0hsvXJjekbDVDHymuYGTSu+5KQJbjkGJRVDozWgEPt7S0FFchBBShAhBF8eN62wkAh02roHThkBUFg0NTzNQvYmSZYnTKt+7TgVgsCpdd/5kkhFhNJtO6FrDNhqJTAJnMfwrg0pVxzMyt7x96YsrD3vwlgBRXMOtZP98QpRTeQBTXbsxks/sjhZYnV4puoTbRhVd3n2hMwsj4HManFuCutKHGbc9mDrZqJEnG9Jz2MmPdlmrs2b0L1VWVBc14YyyGdM/MzmPg8lVMTKkPugVfBJUO9YKk+SIuK/D4I1jwRSDr9G1IoejiAYpOAWBxqSQrueKygqkZL6ZmvHDaLaiqtMFhy3/Zr3lvQNPh19a6By17bsr7ORnq8DyP2i3VqN1SjYsDV9B3biBtH0oBXyCKSkf+p4rBsASPP4JAKKaVq6VH0ZmQxagAXgHwUK4/8vhC8PhCMIgCqittcLtsEHWCVXLB51dPHKrbUs0G/wbSsucmTE/PqVoCwbCUNwUQlxV4A1F4/RHEpDV1IXolLwLlkaJTAJTSP8Zi995VeUxjUhxjUwsYm1qAw2ZGlcsGh92yplz0kEaV2D27d636mIz8sGf3LlUFEFmjv4ZSikBIgjcQQSC09k5DlNJA4tkuKorOCdjb2ztIKe0A8PRaj+X1h3F1ZBr9l0YwMj6HQHB1GYFanv/qRFdexsah9TfIYV6eRCgiYXIuiMGRBYxN+/M1+F+RZbm1GEuEFZ0FACwqAQAfSxQE+S8AHl7L8eKygpk5H2bmfDAaBLgcVrgcFljM2VWo1ULL4RcOBTEzPVmUNQcY6USicfhDMXgDUcR1GrDkSqJ/4Lf7+vpez9tB80xRKoAlEuWUPtbV1bUHwH+glH6WELKmyp/RWByTMx5MznjyqgyWCIeCuDGim8bAKALCEQmBsARfIAopv4M+DuBpWZb/e7GXAwOKXAEs0d3dPQDgyy0tLX9qMpm+CuBrhJDatR43VRk4bBY47RZYK0yr9hnMTBdt8ZeyRqEU4cjimz4QjOkW9VwNlFIPpfQfFUX5bil1DC4JBbBEorTStxsbG7/jdrs/AeCbhJDD+Th2NBbH9JwP03M+CDwHu80Cu9WcU9ThUmFRRnEQlxUEQjEEQ4tv+0LkblBKz1BKfzg/P//j4eHh4i87lUJRpgPnQltbWzvP818F8NlCtwtP5dOf/J2kz5RSXLl8YT1FYADoPre+U66ER/8pQsj3e3p6Tq3ryfNMSVkAaiTmWV9vbGz8Y7fb/buEkN/HBkVcbWTZa0bhoZSeIoT8MBKJPFEqrb8ysSmf2I6OjmZCyCNYtAqaCnWe+4/fBe7Uj5EAAAPOSURBVJfTkfTd+wPnC3U6RgqUUgTDUVy+OlHIcwwBeJxS+pNiXMZbK5tSAawkUY/tESwuJVbl+/iiKKCmugpVbieqq9yYmx7LWCKKsTpkRUEgGEEwFIU/GEEoHC1UQthswsT/WSl1+l0N5fSkCu3t7Uc5jnsEwMOF8hcQQmA2ibBaTLCYjaiwGGEybr76eIWGUopwJIZQOIZgKIpgOIqwRkRmnpjF4vLdk2fPnn0dRRi3XwjKSQEs09jYaHK5XEd4nv8UCmQZrITnOJhNIixmI8xmAywmA0xGA7MUEsRlBZHo4mBfHPRRhCOF8dqvhFI6CuA5RVH+uZwG/UrYEwgIXV1dhxVF+Sgh5OFMvQjyickowmgUYTaKMBkNy583osjleiBJMqIxCeFIDNFYHJFoDOGIlFXL7XxBKT0L4DkAvyl1D34+YAoghYQD8cNYzEg8utbIw9Ug8ByMBhEGgwCjQYBBFGBI/FcUeAhCcdYckCQZMSkOSYojFpcRi8URjcURjUmIxqR1r9QDLC7ZAXiBEPJiLBZ74dy5c6PrLkQRwxSADo2NjabKysqjAI4RQu4jhLRvtExLfKAMOAgCD1HgF/vwiQIISVROTixLGgzpPgijIXkFWK3aUSy2mAgjKxSyLENRKKT44n/jsgxJkhGXZcTjyrq+xfVIhOKeweKgf7W7u/sUytC0zxamAHKgq6urSlGU+wghdwM4QgjZv9EylTtLA54Q8rqiKG9Eo9GTm2WNfj1gCmANtLW1OQVBOKooyh0cxx2mlB7ciClDOUEp9QA4BeCUoihvxWKxU2zArx6mAPKL0NHR0Q7gMIAuQshBZiWsHkppBMB5LA747ng8fqa/v59FWuURpgAKTEtLi9VoNO4BcJgQshvAQQB7CCHODRat2JhNeOjPA+iTZflsX1/febD5e0FhCmCDaGlpqTUaje0JpbAHQDMWFUPDBotWUCilgwAGAQxQSq8qinJeEITz3d3dsxstWznCFECR0djYaHI4HM2CIDRRSps4jqunlDYRQhoopQ0AGgghRZnElTDZJwEMARgFMEQpHUt8Huzt7R0Ce6MXFUwBlCBdXV1VAKri8Xgtx3G1CcdjIyHEpChKLQAsJUERQoSE4kglSZEkkl6SIISMJrzsy9sJIaNYHMTDiqIEKKWzHMeNKooy29fX58nrhTIYDAaDwWAwGAwGg8FgMBgMBoPBYDAYDAaDwWAwGAwGg8FgMBgMBoPBYDAYDAaDwWAwGAwGg8FgMBgMBoPBYDAYDAaDwWAwGAwGg8FgMBgMBoPBYJQw/xfwNfNModoTCwAAAABJRU5ErkJggg==";
+
+class AvatarImageModel {
+    constructor(radius, stroke, image) {
+        var _a;
+        this.radius = radius;
+        this.stroke = stroke;
+        this.image = image;
+        this.NormalizedRadius = this.radius - this.stroke * 2;
+        this.Circumference = Math.round(this.NormalizedRadius * 2 * Math.PI);
+        this.Height = this.Width = this.radius * 2;
+        this.ImageRadius = this.NormalizedRadius - (this.NormalizedRadius * 0.15);
+        this.ImageId = Math.random() + (((_a = this.image) === null || _a === void 0 ? void 0 : _a.split(/(\\|\/)/g).pop()) || CommonConstants.EMPTY_STRING);
+    }
+}
+
+var AvatarBadgePosition;
+(function (AvatarBadgePosition) {
+    AvatarBadgePosition["Top"] = "top";
+    AvatarBadgePosition["RightTop"] = "right-top";
+    AvatarBadgePosition["Right"] = "right";
+    AvatarBadgePosition["RightBottom"] = "right-bottom";
+    AvatarBadgePosition["Bottom"] = "bottom";
+    AvatarBadgePosition["LeftTop"] = "left-top";
+    AvatarBadgePosition["Left"] = "left";
+    AvatarBadgePosition["LeftBottom"] = "left-bottom";
+})(AvatarBadgePosition || (AvatarBadgePosition = {}));
+
+class AvatarBadgeConstants {
+}
+AvatarBadgeConstants.SIZE_MULTIPLIER = 0.3;
+AvatarBadgeConstants.TEXT_SIZE_MULTIPLIER = 0.15;
+
+class AvatarBadgeComponent {
+    constructor() {
+        this.position = AvatarBadgePosition.Right;
+        this.radius = AvatarConstants.DEFAULT_RADIUS;
+        this.normalizedRadius = AvatarConstants.DEFAULT_RADIUS;
+        this.stroke = AvatarConstants.DEFAULT_STROKE;
+    }
+    get styles() {
+        const badgeSize = getCssLikeValue(this.sizePart);
+        return Object.assign({
+            height: badgeSize,
+            width: badgeSize,
+            background: this.background,
+            fontSize: getCssLikeValue(this.radius * AvatarBadgeConstants.TEXT_SIZE_MULTIPLIER)
+        }, this.positionStyle);
+    }
+    get positionStyle() {
+        const halfNormilizedSizePart = this.normalizedRadius * AvatarBadgeConstants.SIZE_MULTIPLIER / 2, halfNormilizedSizePartPx = getCssLikeValue(halfNormilizedSizePart), strokedHalfNormilizedSizePartPx = `-${getCssLikeValue(Math.abs(halfNormilizedSizePart - this.stroke))}`, strokePx = getCssLikeValue(this.stroke), positionPart = `calc(50${UIConstants.CSS_PERCENTAGE} - ${getCssLikeValue((this.sizePart / 2))}`, positionBottomPart = `calc(25${UIConstants.CSS_PERCENTAGE} - ${halfNormilizedSizePartPx}`, positionTopPart = `calc(75${UIConstants.CSS_PERCENTAGE} - ${halfNormilizedSizePartPx}`;
+        switch (this.position) {
+            case AvatarBadgePosition.Top:
+                return {
+                    right: positionPart,
+                    top: strokedHalfNormilizedSizePartPx
+                };
+            case AvatarBadgePosition.Right:
+                return {
+                    right: strokedHalfNormilizedSizePartPx,
+                    bottom: positionPart
+                };
+            case AvatarBadgePosition.RightTop:
+                return {
+                    right: strokePx,
+                    bottom: positionTopPart
+                };
+            case AvatarBadgePosition.RightBottom:
+                return {
+                    right: strokePx,
+                    bottom: positionBottomPart
+                };
+            case AvatarBadgePosition.Bottom:
+                return {
+                    right: positionPart,
+                    bottom: strokedHalfNormilizedSizePartPx,
+                };
+            case AvatarBadgePosition.Left:
+                return {
+                    left: strokedHalfNormilizedSizePartPx,
+                    bottom: positionPart
+                };
+            case AvatarBadgePosition.LeftTop:
+                return {
+                    left: strokePx,
+                    bottom: positionTopPart
+                };
+            case AvatarBadgePosition.LeftBottom:
+                return {
+                    left: strokePx,
+                    bottom: positionBottomPart
+                };
+        }
+    }
+    get sizePart() {
+        return this.radius * AvatarBadgeConstants.SIZE_MULTIPLIER;
+    }
+}
+AvatarBadgeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AvatarBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AvatarBadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: AvatarBadgeComponent, selector: "sfc-avatar-badge", inputs: { position: "position", background: "background" }, host: { properties: { "style": "this.styles" } }, ngImport: i0, template: "<span class=\"container\">\r\n    <ng-content></ng-content>\r\n</span>", styles: [":host{display:flex;position:absolute;flex-wrap:wrap;align-items:center;justify-content:center;font-weight:700;box-shadow:0 0 0 2px #fff;-webkit-user-select:none;user-select:none;border-radius:50%;color:#fff}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AvatarBadgeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-avatar-badge', template: "<span class=\"container\">\r\n    <ng-content></ng-content>\r\n</span>", styles: [":host{display:flex;position:absolute;flex-wrap:wrap;align-items:center;justify-content:center;font-weight:700;box-shadow:0 0 0 2px #fff;-webkit-user-select:none;user-select:none;border-radius:50%;color:#fff}\n"] }]
+        }], propDecorators: { position: [{
+                type: Input
+            }], background: [{
+                type: Input
+            }], styles: [{
+                type: HostBinding,
+                args: ['style']
+            }] } });
+
+class AvatarComponent {
+    constructor() {
+        this.PROGRESS_MODEL_DEFAULT = {
+            color: AvatarConstants.PROGRESS_DEFAULT_COLOR,
+            filledColor: AvatarConstants.PROGRESS_DEFAULT_FILLED_COLOR
+        };
+        this.DATA_MODEL_DEFAULT = {
+            image: AvatarConstants.DATA_DEFAULT_IMAGE
+        };
+        this.STROKE_HOVER_VALUE = 2;
+        this.FULLNAME_PART_VALUE = 4;
+        this.TITLE_PART_VALUE = 5;
+        /**
+         * Avatar radius (80 by default)
+         */
+        this.radius = AvatarConstants.DEFAULT_RADIUS;
+        /**
+         * Size of avatar progress circle (2 by default)
+         */
+        this.stroke = AvatarConstants.DEFAULT_STROKE;
+        /**
+         * Progress value
+         */
+        this.progress = 0;
+        /**
+         * Progress colors model
+         */
+        this.progressModel = this.PROGRESS_MODEL_DEFAULT;
+        this.data = this.DATA_MODEL_DEFAULT;
+        this.stars = false;
+        this.starsValue = 0;
+        this.badges = new QueryList();
+    }
+    ngOnInit() {
+        this.imageModel = new AvatarImageModel(this.radius, this.stroke, this.data.image);
+        this.progressModel = Object.assign(Object.assign({}, this.PROGRESS_MODEL_DEFAULT), this.progressModel);
+        this.data = Object.assign(Object.assign({}, this.DATA_MODEL_DEFAULT), this.data);
+    }
+    ngAfterContentInit() {
+        this.badges.forEach(badge => {
+            badge.radius = this.radius;
+            badge.normalizedRadius = this.imageModel.NormalizedRadius;
+            badge.stroke = this.stroke;
+            if (isNullOrEmptyString(badge.background))
+                badge.background = this.progressModel.filledColor;
+        });
+    }
+    get strokeDashOffset() {
+        return Math.round(this.imageModel.Circumference - (this.progress / 100 * this.imageModel.Circumference));
+    }
+}
+AvatarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: AvatarComponent, selector: "sfc-avatar", inputs: { radius: "radius", stroke: "stroke", progress: "progress", progressModel: "progressModel", data: "data", stars: "stars", starsValue: "starsValue" }, queries: [{ propertyName: "badges", predicate: AvatarBadgeComponent, read: AvatarBadgeComponent }], ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"avatar-image-container\">\r\n        <div class=\"avatar\" (mouseenter)=\"stroke = stroke * STROKE_HOVER_VALUE\"\r\n            (mouseleave)=\"stroke = stroke / STROKE_HOVER_VALUE\">\r\n\r\n            <div class=\"avatar-image\">\r\n                <svg [attr.height]=\"imageModel.Height\" [attr.width]=\"imageModel.Width\">\r\n                    <defs>\r\n                        <pattern id=\"{{imageModel.ImageId}}\" patternUnits=\"userSpaceOnUse\"\r\n                            [attr.height]=\"imageModel.Height\" [attr.width]=\"imageModel.Width\">\r\n                            <image [attr.height]=\"imageModel.Height\" [attr.width]=\"imageModel.Width\"\r\n                                [attr.xlink:href]=\"data.image\" preserveAspectRatio=\"xMidYMid slice\"></image>\r\n                        </pattern>\r\n                    </defs>\r\n                    <circle class=\"progress\" [attr.stroke]=\"progressModel.color\" [attr.stroke-width]=\"stroke\"\r\n                        fill=\"transparent\" [attr.r]=\"imageModel.NormalizedRadius\" [attr.cx]=\"radius\"\r\n                        [attr.cy]=\"radius\" />\r\n                    <circle class=\"progress\" [attr.stroke]=\"progressModel.filledColor\"\r\n                        [attr.stroke-dasharray]=\"imageModel.Circumference + ' ' + imageModel.Circumference\"\r\n                        [ngStyle]=\"{'stroke-dashoffset':strokeDashOffset}\" [attr.stroke-width]=\"stroke\"\r\n                        fill=\"transparent\" [attr.r]=\"imageModel.NormalizedRadius\" [attr.cx]=\"radius\"\r\n                        [attr.cy]=\"radius\" />\r\n\r\n                    <circle [attr.cx]=\"radius\" [attr.cy]=\"radius\" [attr.r]=\"imageModel.ImageRadius\"\r\n                        attr.fill=\"url('#{{imageModel.ImageId}}')\" />\r\n                </svg>\r\n            </div>\r\n\r\n            <ng-content></ng-content>\r\n\r\n        </div>\r\n\r\n        <sfc-stars *ngIf=\"stars\" [value]=\"starsValue\"></sfc-stars>\r\n    </div>\r\n\r\n    <div class=\"avatar-data-container\">\r\n        <div class=\"fullname\" [style.fontSize.px]=\"radius / FULLNAME_PART_VALUE\">\r\n            <span>{{data.firstName}} {{data.lastName}}</span>\r\n        </div>\r\n        <div class=\"title\" [style.fontSize.px]=\"radius / TITLE_PART_VALUE\">\r\n            <span>{{data.title}}</span>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host .container .avatar-image-container{display:flex;justify-content:center;flex-direction:column;align-items:center}:host .container .avatar-image-container .avatar{position:relative;margin-bottom:.5em}:host .container .avatar-image-container .avatar .avatar-image{display:flex;overflow:hidden;align-items:center;justify-content:center}:host .container .avatar-image-container .avatar .avatar-image circle{transform-origin:50% 50%;transition:stroke-dashoffset .35s,stroke-width .3s}:host .container .avatar-image-container .avatar .avatar-image circle.progress{transform:rotate(-90deg)}:host .container .avatar-data-container{display:flex;flex-direction:column;align-items:center;font-size:1em;font-weight:700;-webkit-user-select:none;user-select:none}:host-context(.sfc-default-theme) :host .container .avatar-data-container .fullname{color:#545e61}:host-context(.sfc-dark-theme) :host .container .avatar-data-container .fullname{color:#f5f7fa}:host .container .avatar-data-container .title{color:#aab2bd}\n"], components: [{ type: StarsComponent, selector: "sfc-stars", inputs: ["value", "count"] }], directives: [{ type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: AvatarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-avatar', template: "<div class=\"container\">\r\n    <div class=\"avatar-image-container\">\r\n        <div class=\"avatar\" (mouseenter)=\"stroke = stroke * STROKE_HOVER_VALUE\"\r\n            (mouseleave)=\"stroke = stroke / STROKE_HOVER_VALUE\">\r\n\r\n            <div class=\"avatar-image\">\r\n                <svg [attr.height]=\"imageModel.Height\" [attr.width]=\"imageModel.Width\">\r\n                    <defs>\r\n                        <pattern id=\"{{imageModel.ImageId}}\" patternUnits=\"userSpaceOnUse\"\r\n                            [attr.height]=\"imageModel.Height\" [attr.width]=\"imageModel.Width\">\r\n                            <image [attr.height]=\"imageModel.Height\" [attr.width]=\"imageModel.Width\"\r\n                                [attr.xlink:href]=\"data.image\" preserveAspectRatio=\"xMidYMid slice\"></image>\r\n                        </pattern>\r\n                    </defs>\r\n                    <circle class=\"progress\" [attr.stroke]=\"progressModel.color\" [attr.stroke-width]=\"stroke\"\r\n                        fill=\"transparent\" [attr.r]=\"imageModel.NormalizedRadius\" [attr.cx]=\"radius\"\r\n                        [attr.cy]=\"radius\" />\r\n                    <circle class=\"progress\" [attr.stroke]=\"progressModel.filledColor\"\r\n                        [attr.stroke-dasharray]=\"imageModel.Circumference + ' ' + imageModel.Circumference\"\r\n                        [ngStyle]=\"{'stroke-dashoffset':strokeDashOffset}\" [attr.stroke-width]=\"stroke\"\r\n                        fill=\"transparent\" [attr.r]=\"imageModel.NormalizedRadius\" [attr.cx]=\"radius\"\r\n                        [attr.cy]=\"radius\" />\r\n\r\n                    <circle [attr.cx]=\"radius\" [attr.cy]=\"radius\" [attr.r]=\"imageModel.ImageRadius\"\r\n                        attr.fill=\"url('#{{imageModel.ImageId}}')\" />\r\n                </svg>\r\n            </div>\r\n\r\n            <ng-content></ng-content>\r\n\r\n        </div>\r\n\r\n        <sfc-stars *ngIf=\"stars\" [value]=\"starsValue\"></sfc-stars>\r\n    </div>\r\n\r\n    <div class=\"avatar-data-container\">\r\n        <div class=\"fullname\" [style.fontSize.px]=\"radius / FULLNAME_PART_VALUE\">\r\n            <span>{{data.firstName}} {{data.lastName}}</span>\r\n        </div>\r\n        <div class=\"title\" [style.fontSize.px]=\"radius / TITLE_PART_VALUE\">\r\n            <span>{{data.title}}</span>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host .container .avatar-image-container{display:flex;justify-content:center;flex-direction:column;align-items:center}:host .container .avatar-image-container .avatar{position:relative;margin-bottom:.5em}:host .container .avatar-image-container .avatar .avatar-image{display:flex;overflow:hidden;align-items:center;justify-content:center}:host .container .avatar-image-container .avatar .avatar-image circle{transform-origin:50% 50%;transition:stroke-dashoffset .35s,stroke-width .3s}:host .container .avatar-image-container .avatar .avatar-image circle.progress{transform:rotate(-90deg)}:host .container .avatar-data-container{display:flex;flex-direction:column;align-items:center;font-size:1em;font-weight:700;-webkit-user-select:none;user-select:none}:host-context(.sfc-default-theme) :host .container .avatar-data-container .fullname{color:#545e61}:host-context(.sfc-dark-theme) :host .container .avatar-data-container .fullname{color:#f5f7fa}:host .container .avatar-data-container .title{color:#aab2bd}\n"] }]
+        }], propDecorators: { radius: [{
+                type: Input
+            }], stroke: [{
+                type: Input
+            }], progress: [{
+                type: Input
+            }], progressModel: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], stars: [{
+                type: Input
+            }], starsValue: [{
+                type: Input
+            }], badges: [{
+                type: ContentChildren,
+                args: [AvatarBadgeComponent, { read: AvatarBadgeComponent }]
+            }] } });
+
+var ProgressColor;
+(function (ProgressColor) {
+    ProgressColor["MIN_LOW"] = "#f08d97";
+    ProgressColor["LOW"] = "#ED5565";
+    ProgressColor["MAX_LOW"] = "#DA4453";
+    ProgressColor["MIN_MEDIUM"] = "#dfc47f";
+    ProgressColor["MEDIUM"] = "#FFCE54";
+    ProgressColor["MAX_MEDIUM"] = "#FCBB42";
+    ProgressColor["MIN_HIGH"] = "#b5dd88";
+    ProgressColor["HIGH"] = "#A0D468";
+    ProgressColor["MAX_HIGH"] = "#8CC152";
+})(ProgressColor || (ProgressColor = {}));
+
+class ProgressBaseComponent {
+    constructor() {
+        this.progress = 0;
+        this.getColor = this.getDefaultColor;
+    }
+    getDefaultColor(value) {
+        if (value < 12) {
+            return ProgressColor.MIN_LOW;
+        }
+        else if (value >= 12 && value < 24) {
+            return ProgressColor.LOW;
+        }
+        else if (value >= 24 && value < 36) {
+            return ProgressColor.MAX_LOW;
+        }
+        else if (value >= 36 && value < 48) {
+            return ProgressColor.MIN_MEDIUM;
+        }
+        else if (value >= 48 && value < 60) {
+            return ProgressColor.MEDIUM;
+        }
+        else if (value >= 60 && value < 72) {
+            return ProgressColor.MAX_MEDIUM;
+        }
+        else if (value >= 72 && value < 84) {
+            return ProgressColor.MIN_HIGH;
+        }
+        else if (value >= 84 && value < 96) {
+            return ProgressColor.HIGH;
+        }
+        else {
+            return ProgressColor.MAX_HIGH;
+        }
+    }
+}
+ProgressBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ProgressBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+ProgressBaseComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: ProgressBaseComponent, inputs: { progress: "progress", background: "background", getColor: "getColor" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ProgressBaseComponent, decorators: [{
+            type: Directive
+        }], propDecorators: { progress: [{
+                type: Input
+            }], background: [{
+                type: Input
+            }], getColor: [{
+                type: Input
+            }] } });
+
+class ProgressLineComponent extends ProgressBaseComponent {
+    constructor() {
+        super(...arguments);
+        this.total = CommonConstants.FULL_PERCENTAGE;
+        this.hideEnd = false;
+    }
+    ngOnInit() {
+        if (this.progress > this.total)
+            this.progress = this.total = CommonConstants.FULL_PERCENTAGE;
+    }
+    get label() {
+        return isNullOrEmptyString(this.labelEnd) ? `${this.progress}` : this.labelEnd;
+    }
+    get progressStyles() {
+        return {
+            width: getCssLikeValue((this.progress / this.total) * CommonConstants.FULL_PERCENTAGE, UIConstants.CSS_PERCENTAGE),
+            backgroundColor: this.getColor(this.progress)
+        };
+    }
+}
+ProgressLineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ProgressLineComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+ProgressLineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: ProgressLineComponent, selector: "sfc-progress-line", inputs: { total: "total", labelStart: "labelStart", labelEnd: "labelEnd", hideEnd: "hideEnd" }, usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"labels\">\r\n        <span>{{labelStart}}</span>\r\n        <span *ngIf=\"!hideEnd\">{{label}}</span>\r\n    </div>\r\n    <div class=\"progress-bar\" [style.background]=\"background\">\r\n        <div class=\"progress\" [ngStyle]=\"progressStyles\"></div>\r\n    </div>\r\n</div>", styles: [":host{width:100%}:host .container .progress-bar{border-radius:.5em;background:#e6e9ed}:host .container .progress-bar .progress{height:.4em;border-radius:.5em;background-image:linear-gradient(to bottom,rgba(255,255,255,.3),rgba(255,255,255,.05));transition:.4s linear;transition-property:width,background-color}:host .container .labels{display:flex;justify-content:space-between;margin-bottom:.3em;font-weight:700;-webkit-user-select:none;user-select:none;font-size:.8em}:host-context(.sfc-default-theme) :host .container .labels{color:#545e61}:host-context(.sfc-dark-theme) :host .container .labels{color:#ccd1d9}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ProgressLineComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-progress-line', template: "<div class=\"container\">\r\n    <div class=\"labels\">\r\n        <span>{{labelStart}}</span>\r\n        <span *ngIf=\"!hideEnd\">{{label}}</span>\r\n    </div>\r\n    <div class=\"progress-bar\" [style.background]=\"background\">\r\n        <div class=\"progress\" [ngStyle]=\"progressStyles\"></div>\r\n    </div>\r\n</div>", styles: [":host{width:100%}:host .container .progress-bar{border-radius:.5em;background:#e6e9ed}:host .container .progress-bar .progress{height:.4em;border-radius:.5em;background-image:linear-gradient(to bottom,rgba(255,255,255,.3),rgba(255,255,255,.05));transition:.4s linear;transition-property:width,background-color}:host .container .labels{display:flex;justify-content:space-between;margin-bottom:.3em;font-weight:700;-webkit-user-select:none;user-select:none;font-size:.8em}:host-context(.sfc-default-theme) :host .container .labels{color:#545e61}:host-context(.sfc-dark-theme) :host .container .labels{color:#ccd1d9}\n"] }]
+        }], propDecorators: { total: [{
+                type: Input
+            }], labelStart: [{
+                type: Input
+            }], labelEnd: [{
+                type: Input
+            }], hideEnd: [{
+                type: Input
+            }] } });
+
+class ProgressSemiCircleComponent extends ProgressBaseComponent {
+    constructor() {
+        super(...arguments);
+        this.limits = true;
+        this.min = 0;
+        this.max = CommonConstants.FULL_PERCENTAGE;
+    }
+    ngOnInit() {
+        if (this.min > this.max)
+            this.min = 0;
+        if (this.progress < this.min)
+            this.progress = this.min;
+        if (this.progress > this.max)
+            this.progress = this.max;
+    }
+    get barStyles() {
+        const color = this.getColor(this.progress), differenceLimits = this.max - this.min, rotateValue = 45 + (180 - ((this.max - this.progress) * 180 / differenceLimits));
+        return {
+            transform: `rotate(${getCssLikeValue(rotateValue, UIConstants.CSS_DEGREES)})`,
+            borderBottomColor: color,
+            borderRightColor: color
+        };
+    }
+}
+ProgressSemiCircleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ProgressSemiCircleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+ProgressSemiCircleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: ProgressSemiCircleComponent, selector: "sfc-progress-semi-circle", inputs: { limits: "limits", min: "min", max: "max" }, usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"progress-bar\">\r\n        <div class=\"bar\" [style.border-color]=\"background\" [ngStyle]=\"barStyles\"></div>\r\n    </div>\r\n    <span class=\"value\">{{progress}}</span>\r\n    <div class=\"limits\" *ngIf=\"limits\">\r\n        <span>{{min}}</span>\r\n        <span>{{max}}</span>\r\n    </div>\r\n</div>", styles: [":host .container{position:relative;width:1em;height:.5em;font-size:5em}:host-context(.sfc-default-theme) :host .container{color:#545e61}:host-context(.sfc-dark-theme) :host .container{color:#ccd1d9}:host .container .progress-bar{position:relative;overflow:hidden;height:inherit}:host .container .progress-bar .bar{width:1em;height:1em;border-radius:50%;box-sizing:border-box;border:.1em solid;border-color:#e6e9ed;transition-property:all;transition-duration:.2s;transition-timing-function:ease-out}:host .container .value{font-weight:700;font-size:.2em;-webkit-user-select:none;user-select:none;position:absolute;z-index:1;top:50%;width:5em;text-align:center;white-space:nowrap;transition-property:all;transition-duration:.2s;transition-timing-function:ease-out}:host .container .limits{font-size:.06em;font-weight:700;display:flex;justify-content:space-between;align-items:center;margin-top:3px}:host .container:hover .progress-bar .bar{border-width:.08em}:host .container:hover .value{font-size:.3em;width:3.33em;top:30%}\n"], directives: [{ type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ProgressSemiCircleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-progress-semi-circle', template: "<div class=\"container\">\r\n    <div class=\"progress-bar\">\r\n        <div class=\"bar\" [style.border-color]=\"background\" [ngStyle]=\"barStyles\"></div>\r\n    </div>\r\n    <span class=\"value\">{{progress}}</span>\r\n    <div class=\"limits\" *ngIf=\"limits\">\r\n        <span>{{min}}</span>\r\n        <span>{{max}}</span>\r\n    </div>\r\n</div>", styles: [":host .container{position:relative;width:1em;height:.5em;font-size:5em}:host-context(.sfc-default-theme) :host .container{color:#545e61}:host-context(.sfc-dark-theme) :host .container{color:#ccd1d9}:host .container .progress-bar{position:relative;overflow:hidden;height:inherit}:host .container .progress-bar .bar{width:1em;height:1em;border-radius:50%;box-sizing:border-box;border:.1em solid;border-color:#e6e9ed;transition-property:all;transition-duration:.2s;transition-timing-function:ease-out}:host .container .value{font-weight:700;font-size:.2em;-webkit-user-select:none;user-select:none;position:absolute;z-index:1;top:50%;width:5em;text-align:center;white-space:nowrap;transition-property:all;transition-duration:.2s;transition-timing-function:ease-out}:host .container .limits{font-size:.06em;font-weight:700;display:flex;justify-content:space-between;align-items:center;margin-top:3px}:host .container:hover .progress-bar .bar{border-width:.08em}:host .container:hover .value{font-size:.3em;width:3.33em;top:30%}\n"] }]
+        }], propDecorators: { limits: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }] } });
+
+class ProgressCircleComponent extends ProgressBaseComponent {
+    get reversed() {
+        return this.progress > 50;
+    }
+    get transformRotate() {
+        return `rotate(${getCssLikeValue((this.progress * 360) / CommonConstants.FULL_PERCENTAGE, UIConstants.CSS_DEGREES)})`;
+    }
+}
+ProgressCircleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ProgressCircleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+ProgressCircleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: ProgressCircleComponent, selector: "sfc-progress-circle", host: { properties: { "class.reversed": "this.reversed" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"container\" [style.background]=\"background\">\r\n    <span>{{progress}}</span>\r\n    <div class=\"circle\">\r\n        <div class=\"bar\" [ngStyle]=\"{'transform': transformRotate, \r\n            'border-color': getColor(progress)}\"></div>\r\n        <div class=\"fill\" [ngStyle]=\"{'border-color': getColor(progress)}\"></div>\r\n    </div>\r\n</div>", styles: [":host.reversed .container .circle .fill,:host .container .circle .bar{position:absolute;border:.09em solid;clip:rect(0,.5em,1em,0);border-radius:50%;width:.82em;height:.82em}:host .container{position:relative;border-radius:50%;background:#e6e9ed;font-size:5em;text-align:initial;width:1em;height:1em}:host .container:after{position:absolute;top:.082em;left:.09em;content:\" \";border-radius:50%;background:#fff;transition-property:all;transition-duration:.2s;transition-timing-function:ease-in;width:.83em;height:.83em}:host .container span{position:absolute;z-index:1;width:5em;line-height:5em;font-size:.2em;color:#545e61;font-weight:700;text-align:center;white-space:nowrap;-webkit-user-select:none;user-select:none;transition-property:all;transition-duration:.2s;transition-timing-function:ease-out}:host .container:hover:after{top:.07em;left:.07em;width:.86em;height:.86em}:host .container:hover span{width:3.33em;line-height:3.33em;font-size:.3em}:host .container .circle{position:absolute;clip:rect(0,1em,1em,.5em);width:1em;height:1em}:host .container .circle .bar{transition:transform .2s ease-out,border-color .2s ease-out}:host.reversed .container .circle{clip:rect(auto,auto,auto,auto)}:host.reversed .container .circle .fill{transform:rotate(180deg)}\n"], directives: [{ type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ProgressCircleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-progress-circle', template: "<div class=\"container\" [style.background]=\"background\">\r\n    <span>{{progress}}</span>\r\n    <div class=\"circle\">\r\n        <div class=\"bar\" [ngStyle]=\"{'transform': transformRotate, \r\n            'border-color': getColor(progress)}\"></div>\r\n        <div class=\"fill\" [ngStyle]=\"{'border-color': getColor(progress)}\"></div>\r\n    </div>\r\n</div>", styles: [":host.reversed .container .circle .fill,:host .container .circle .bar{position:absolute;border:.09em solid;clip:rect(0,.5em,1em,0);border-radius:50%;width:.82em;height:.82em}:host .container{position:relative;border-radius:50%;background:#e6e9ed;font-size:5em;text-align:initial;width:1em;height:1em}:host .container:after{position:absolute;top:.082em;left:.09em;content:\" \";border-radius:50%;background:#fff;transition-property:all;transition-duration:.2s;transition-timing-function:ease-in;width:.83em;height:.83em}:host .container span{position:absolute;z-index:1;width:5em;line-height:5em;font-size:.2em;color:#545e61;font-weight:700;text-align:center;white-space:nowrap;-webkit-user-select:none;user-select:none;transition-property:all;transition-duration:.2s;transition-timing-function:ease-out}:host .container:hover:after{top:.07em;left:.07em;width:.86em;height:.86em}:host .container:hover span{width:3.33em;line-height:3.33em;font-size:.3em}:host .container .circle{position:absolute;clip:rect(0,1em,1em,.5em);width:1em;height:1em}:host .container .circle .bar{transition:transform .2s ease-out,border-color .2s ease-out}:host.reversed .container .circle{clip:rect(auto,auto,auto,auto)}:host.reversed .container .circle .fill{transform:rotate(180deg)}\n"] }]
+        }], propDecorators: { reversed: [{
+                type: HostBinding,
+                args: ['class.reversed']
+            }] } });
+
+class TagComponent {
+    constructor() {
+        this.model = { label: CommonConstants.EMPTY_STRING };
+    }
+}
+TagComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: TagComponent, selector: "sfc-tag", inputs: { model: "model" }, ngImport: i0, template: "<div class=\"container\">\r\n    <a class=\"tag\">\r\n        <div class=\"content\">\r\n            <i *ngIf=\"model.icon\" class=\"{{model.icon}}\"></i>\r\n            <span>{{model.label}}</span>\r\n        </div>\r\n    </a>\r\n</div>", styles: [":host{display:inline-flex;margin:0 .18em}:host .container{margin-top:.3em;font-size:.8em;-webkit-user-select:none;user-select:none}:host .container .tag{display:inline-flex;border-radius:1em;font-weight:700;color:#545e61;background-color:#f5f7fa;border:.125em solid transparent;padding:.3em}:host .container .tag .content{display:flex;align-items:center;text-align:center;padding:0 .8em}:host .container .tag .content i{margin-right:.18em}:host .container:hover .tag{background-color:#2bbbad;color:#fff}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TagComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-tag', template: "<div class=\"container\">\r\n    <a class=\"tag\">\r\n        <div class=\"content\">\r\n            <i *ngIf=\"model.icon\" class=\"{{model.icon}}\"></i>\r\n            <span>{{model.label}}</span>\r\n        </div>\r\n    </a>\r\n</div>", styles: [":host{display:inline-flex;margin:0 .18em}:host .container{margin-top:.3em;font-size:.8em;-webkit-user-select:none;user-select:none}:host .container .tag{display:inline-flex;border-radius:1em;font-weight:700;color:#545e61;background-color:#f5f7fa;border:.125em solid transparent;padding:.3em}:host .container .tag .content{display:flex;align-items:center;text-align:center;padding:0 .8em}:host .container .tag .content i{margin-right:.18em}:host .container:hover .tag{background-color:#2bbbad;color:#fff}\n"] }]
+        }], propDecorators: { model: [{
+                type: Input
+            }] } });
+
+class TagsComponent {
+    constructor() {
+        this.tags = [];
+    }
+}
+TagsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TagsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TagsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: TagsComponent, selector: "sfc-tags", inputs: { tags: "tags" }, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"tags\">\r\n        <sfc-tag *ngFor=\"let tag of tags\" [model]=\"tag\"></sfc-tag>\r\n    </div>\r\n</div>", components: [{ type: TagComponent, selector: "sfc-tag", inputs: ["model"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TagsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-tags', template: "<div class=\"container\">\r\n    <div class=\"tags\">\r\n        <sfc-tag *ngFor=\"let tag of tags\" [model]=\"tag\"></sfc-tag>\r\n    </div>\r\n</div>" }]
+        }], propDecorators: { tags: [{
+                type: Input
+            }] } });
+
+var SliderButtonType;
+(function (SliderButtonType) {
+    SliderButtonType["Next"] = "next";
+    SliderButtonType["Previous"] = "previous";
+})(SliderButtonType || (SliderButtonType = {}));
+
+class SliderItemComponent {
+    constructor() {
+        this.model = { imageSrc: CommonConstants.EMPTY_STRING };
+    }
+}
+SliderItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SliderItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SliderItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SliderItemComponent, selector: "sfc-slider-item", inputs: { model: "model" }, ngImport: i0, template: "<li>\r\n    <div>\r\n        <h2>{{model.title}}</h2>\r\n        <span>{{model.subTitle}}</span>\r\n    </div>\r\n    <img [src]=\"model.imageSrc\">\r\n</li>", styles: [":host{display:inline-block}:host li{position:relative;width:37.5em;height:25em;background:#434a54}:host li div{position:absolute;top:10%;left:6%;-webkit-user-select:none;user-select:none;font-size:1.5em}:host li div h2{margin:0;text-transform:uppercase}:host li img{width:100%;height:100%;object-fit:fill}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SliderItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-slider-item', template: "<li>\r\n    <div>\r\n        <h2>{{model.title}}</h2>\r\n        <span>{{model.subTitle}}</span>\r\n    </div>\r\n    <img [src]=\"model.imageSrc\">\r\n</li>", styles: [":host{display:inline-block}:host li{position:relative;width:37.5em;height:25em;background:#434a54}:host li div{position:absolute;top:10%;left:6%;-webkit-user-select:none;user-select:none;font-size:1.5em}:host li div h2{margin:0;text-transform:uppercase}:host li img{width:100%;height:100%;object-fit:fill}\n"] }]
+        }], propDecorators: { model: [{
+                type: Input
+            }] } });
+
+var SliderMoveType;
+(function (SliderMoveType) {
+    SliderMoveType["Next"] = "next";
+    SliderMoveType["Previous"] = "previous";
+    SliderMoveType["Select"] = "select";
+})(SliderMoveType || (SliderMoveType = {}));
+
+class SliderService {
+    constructor() {
+        // hold current image index
+        this.index = 0;
+        this.moveSubject = new Subject();
+        this.move$ = this.moveSubject.asObservable();
+    }
+    init(count$) {
+        this.model$ = combineLatest([
+            this.move$.pipe(startWith({ type: SliderMoveType.Select, index: this.index })),
+            count$.pipe(startWith(0))
+        ]).pipe(map(([event, count]) => {
+            var _a;
+            switch (event.type) {
+                case SliderMoveType.Select:
+                    this.index = (_a = event.index) !== null && _a !== void 0 ? _a : this.index;
+                    break;
+                case SliderMoveType.Next:
+                    this.index++;
+                    break;
+                case SliderMoveType.Previous:
+                    this.index--;
+                    break;
+            }
+            if (this.index == count)
+                this.index = 0;
+            if (this.index < 0)
+                this.index = count - 1;
+            return { index: this.index, count };
+        }));
+    }
+    move(type) {
+        this.moveSubject.next({ type });
+    }
+    select(index) {
+        this.moveSubject.next({ type: SliderMoveType.Select, index });
+    }
+}
+
+class SliderAutomaticService {
+    constructor(sliderService) {
+        this.sliderService = sliderService;
+        this.AUTOMATIC_INTERVAL_MS = 3000;
+        this.pause = true;
+    }
+    start() {
+        this.pause = false;
+        // stop previous if exist
+        if (isDefined(this.autoSlider))
+            this.stop();
+        this.autoSlider = setInterval(() => this.sliderService.move(SliderMoveType.Next), this.AUTOMATIC_INTERVAL_MS);
+    }
+    stop() {
+        clearInterval(this.autoSlider);
+    }
+    toggle() {
+        this.pause = !this.pause;
+        if (this.pause)
+            this.stop();
+        else
+            this.start();
+    }
+}
+SliderAutomaticService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SliderAutomaticService, deps: [{ token: SliderService }], target: i0.ɵɵFactoryTarget.Injectable });
+SliderAutomaticService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SliderAutomaticService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SliderAutomaticService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: SliderService }]; } });
+
+var SliderType;
+(function (SliderType) {
+    SliderType["Default"] = "default";
+    SliderType["Automatic"] = "automatic";
+})(SliderType || (SliderType = {}));
+
+class SliderButtonComponent {
+    constructor() {
+        this.ICON_NEXT = 'fa fa-arrow-right';
+        this.ICON_PREVIOUS = 'fa fa-arrow-left';
+        this.type = SliderButtonType.Next;
+        this.active = false;
+    }
+    get icon() {
+        return this.type == SliderButtonType.Next
+            ? this.ICON_NEXT
+            : this.ICON_PREVIOUS;
+    }
+}
+SliderButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SliderButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SliderButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SliderButtonComponent, selector: "sfc-slider-button", inputs: { type: "type", active: "active" }, host: { properties: { "class": "this.type", "class.active": "this.active" } }, ngImport: i0, template: "<div>\r\n    <i class=\"{{icon}}\"></i>\r\n</div>", styles: [":host{position:absolute;width:3em;height:3.7em;top:50%;margin-top:-1.5em;line-height:3.7em;text-align:center;cursor:pointer;background:#0000001a;transition:all .1s ease}:host:hover{background:#0000004d}:host.next{right:-3em;border-radius:.43em 0 0 .43em}:host.previous{left:-3em;border-radius:0 .43em .43em 0}:host.active.next{right:0}:host.active.previous{left:0}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SliderButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-slider-button', template: "<div>\r\n    <i class=\"{{icon}}\"></i>\r\n</div>", styles: [":host{position:absolute;width:3em;height:3.7em;top:50%;margin-top:-1.5em;line-height:3.7em;text-align:center;cursor:pointer;background:#0000001a;transition:all .1s ease}:host:hover{background:#0000004d}:host.next{right:-3em;border-radius:.43em 0 0 .43em}:host.previous{left:-3em;border-radius:0 .43em .43em 0}:host.active.next{right:0}:host.active.previous{left:0}\n"] }]
+        }], propDecorators: { type: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class']
+            }], active: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.' + UIClass.Active]
+            }] } });
+
+class SliderPaginationComponent {
+    constructor() {
+        this.count = 0;
+        this.index = 0;
+        this.selected = new EventEmitter();
+    }
+    get items() {
+        return Array.from({ length: this.count });
+    }
+    selectItem(index) {
+        this.selected.emit(index);
+    }
+}
+SliderPaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SliderPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SliderPaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SliderPaginationComponent, selector: "sfc-slider-pagination", inputs: { count: "count", index: "index" }, outputs: { selected: "selected" }, ngImport: i0, template: "<ul>\r\n    <li *ngFor=\"let _ of items; let itemIndex = index;\" [class.active]=\"itemIndex === index\"\r\n        (click)=\"selectItem(itemIndex)\"></li>\r\n</ul>", styles: [":host{display:inline-block}:host ul{display:flex;align-items:center;margin:0;padding:0}:host ul li{margin:.3em;display:inline-block;width:.6em;height:.6em;border-radius:50%;background:#fff;opacity:.5;cursor:pointer;transition:all .3s cubic-bezier(1,.01,.32,1)}:host ul li.active{transform:scale(1.7);opacity:1}\n"], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SliderPaginationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-slider-pagination', template: "<ul>\r\n    <li *ngFor=\"let _ of items; let itemIndex = index;\" [class.active]=\"itemIndex === index\"\r\n        (click)=\"selectItem(itemIndex)\"></li>\r\n</ul>", styles: [":host{display:inline-block}:host ul{display:flex;align-items:center;margin:0;padding:0}:host ul li{margin:.3em;display:inline-block;width:.6em;height:.6em;border-radius:50%;background:#fff;opacity:.5;cursor:pointer;transition:all .3s cubic-bezier(1,.01,.32,1)}:host ul li.active{transform:scale(1.7);opacity:1}\n"] }]
+        }], propDecorators: { count: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], selected: [{
+                type: Output
+            }] } });
+
+class SliderComponent {
+    constructor(sliderService, automaticService, changeDetector) {
+        this.sliderService = sliderService;
+        this.automaticService = automaticService;
+        this.changeDetector = changeDetector;
+        this.PAUSE_ICON = 'fas fa-pause-circle';
+        this.PLAY_ICON = 'fas fa-play-circle';
+        this.SliderButtonType = SliderButtonType;
+        this.SliderMoveType = SliderMoveType;
+        this.items = [];
+        this.type = SliderType.Default;
+        this.showCount = true;
+        this.pagination = true;
+        /**
+         * If active show buttons
+         */
+        this.active = false;
+    }
+    onEnter() {
+        this.active = true;
+        // stop automatic move on hover
+        if (this.isAutomatic)
+            this.automaticService.stop();
+    }
+    onLeave() {
+        this.active = false;
+        // start automatic move on hover end
+        if (this.isAutomatic && !this.automaticService.pause)
+            this.automaticService.start();
+    }
+    get isAutomatic() {
+        return this.type == SliderType.Automatic;
+    }
+    get automaticIcon() {
+        return this.automaticService.pause ? this.PLAY_ICON : this.PAUSE_ICON;
+    }
+    ngAfterViewInit() {
+        const count$ = this.sliderItems.changes.pipe(map(c => c.length));
+        this.sliderService.init(count$);
+        this.vm$ = this.sliderService.model$.pipe(map(model => {
+            return {
+                index: model.index,
+                styles: this.getStyles(model.index, model.count),
+                label: `${model.count > 0 ? model.index + 1 : 0} / ${model.count}`,
+                count: model.count
+            };
+        }));
+        if (this.isAutomatic)
+            this.automaticService.start();
+    }
+    ngAfterViewChecked() {
+        this.changeDetector.detectChanges();
+    }
+    getStyles(index, count) {
+        if (this.slider) {
+            const width = this.slider.nativeElement.offsetWidth;
+            return {
+                width: getCssLikeValue(width * count),
+                left: getCssLikeValue(-width * index)
+            };
+        }
+        return null;
+    }
+    move(type) {
+        this.sliderService.move(type);
+    }
+    select(index) {
+        this.sliderService.select(index);
+    }
+    toggleAutomatic() {
+        this.automaticService.toggle();
+    }
+}
+SliderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SliderComponent, deps: [{ token: SliderService }, { token: SliderAutomaticService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+SliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SliderComponent, selector: "sfc-slider", inputs: { items: "items", type: "type", showCount: "showCount", pagination: "pagination" }, host: { listeners: { "mouseenter": "onEnter()", "mouseleave": "onLeave()" } }, providers: [SliderService, SliderAutomaticService], viewQueries: [{ propertyName: "slider", first: true, predicate: ["slider"], descendants: true }, { propertyName: "sliderItems", predicate: SliderItemComponent, descendants: true }], ngImport: i0, template: "<div class=\"container\">\r\n    <div *ngIf=\"vm$ | async as vm\" #slider class=\"slider\">\r\n        <ul [ngStyle]=\"vm.styles\">\r\n            <sfc-slider-item *ngFor=\"let item of items\" [model]=\"item\"></sfc-slider-item>\r\n        </ul>\r\n\r\n        <div class=\"buttons\">\r\n            <sfc-slider-button [active]=\"active\" [type]=\"SliderButtonType.Next\" (click)=\"move(SliderMoveType.Next)\">\r\n            </sfc-slider-button>\r\n            <sfc-slider-button [active]=\"active\" [type]=\"SliderButtonType.Previous\" (click)=\"move(SliderMoveType.Previous)\">\r\n            </sfc-slider-button>\r\n        </div>\r\n\r\n        <div class=\"counter\" *ngIf=\"showCount\">{{vm.label}}</div>\r\n\r\n        <div class=\"actions\">\r\n            <sfc-slider-pagination *ngIf=\"pagination\" [count]=\"vm.count\" [index]=\"vm.index\" (selected)=\"select($event)\">\r\n            </sfc-slider-pagination>\r\n\r\n            <div *ngIf=\"isAutomatic\" class=\"automatic\" (click)=\"toggleAutomatic()\">\r\n                <i class=\"{{automaticIcon}}\"></i>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host .container{width:37.5em;height:25em;color:#fff}:host .container .slider{height:inherit;position:relative;overflow:hidden;background:#434a54;display:flex;justify-content:center;align-items:flex-end}:host .container .slider>ul{position:absolute;list-style:none;margin:0;padding:0;height:inherit;transition:all .3s cubic-bezier(1,.01,.32,1)}:host .container .slider .counter{top:10%;right:6%;position:absolute;font-weight:700;-webkit-user-select:none;user-select:none}:host .container .slider .actions{margin-bottom:1em;cursor:pointer;display:flex;flex-direction:column;justify-content:center;position:relative;align-items:center}:host .container .slider .actions .automatic{margin-top:.3em}\n"], components: [{ type: SliderItemComponent, selector: "sfc-slider-item", inputs: ["model"] }, { type: SliderButtonComponent, selector: "sfc-slider-button", inputs: ["type", "active"] }, { type: SliderPaginationComponent, selector: "sfc-slider-pagination", inputs: ["count", "index"], outputs: ["selected"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i2.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SliderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-slider', providers: [SliderService, SliderAutomaticService], template: "<div class=\"container\">\r\n    <div *ngIf=\"vm$ | async as vm\" #slider class=\"slider\">\r\n        <ul [ngStyle]=\"vm.styles\">\r\n            <sfc-slider-item *ngFor=\"let item of items\" [model]=\"item\"></sfc-slider-item>\r\n        </ul>\r\n\r\n        <div class=\"buttons\">\r\n            <sfc-slider-button [active]=\"active\" [type]=\"SliderButtonType.Next\" (click)=\"move(SliderMoveType.Next)\">\r\n            </sfc-slider-button>\r\n            <sfc-slider-button [active]=\"active\" [type]=\"SliderButtonType.Previous\" (click)=\"move(SliderMoveType.Previous)\">\r\n            </sfc-slider-button>\r\n        </div>\r\n\r\n        <div class=\"counter\" *ngIf=\"showCount\">{{vm.label}}</div>\r\n\r\n        <div class=\"actions\">\r\n            <sfc-slider-pagination *ngIf=\"pagination\" [count]=\"vm.count\" [index]=\"vm.index\" (selected)=\"select($event)\">\r\n            </sfc-slider-pagination>\r\n\r\n            <div *ngIf=\"isAutomatic\" class=\"automatic\" (click)=\"toggleAutomatic()\">\r\n                <i class=\"{{automaticIcon}}\"></i>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host .container{width:37.5em;height:25em;color:#fff}:host .container .slider{height:inherit;position:relative;overflow:hidden;background:#434a54;display:flex;justify-content:center;align-items:flex-end}:host .container .slider>ul{position:absolute;list-style:none;margin:0;padding:0;height:inherit;transition:all .3s cubic-bezier(1,.01,.32,1)}:host .container .slider .counter{top:10%;right:6%;position:absolute;font-weight:700;-webkit-user-select:none;user-select:none}:host .container .slider .actions{margin-bottom:1em;cursor:pointer;display:flex;flex-direction:column;justify-content:center;position:relative;align-items:center}:host .container .slider .actions .automatic{margin-top:.3em}\n"] }]
+        }], ctorParameters: function () { return [{ type: SliderService }, { type: SliderAutomaticService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { items: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], showCount: [{
+                type: Input
+            }], pagination: [{
+                type: Input
+            }], slider: [{
+                type: ViewChild,
+                args: ['slider', { static: false }]
+            }], sliderItems: [{
+                type: ViewChildren,
+                args: [SliderItemComponent]
+            }], onEnter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], onLeave: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }] } });
+
+var TimelineItemPosition;
+(function (TimelineItemPosition) {
+    TimelineItemPosition["Left"] = "left";
+    TimelineItemPosition["Right"] = "right";
+})(TimelineItemPosition || (TimelineItemPosition = {}));
+
+class TimelineItemComponent {
+    constructor() {
+        this.model = { title: CommonConstants.EMPTY_STRING };
+    }
+    get position() {
+        return this.model.position || TimelineItemPosition.Left;
+    }
+    get period() {
+        return this.model.period || false;
+    }
+    get showImage() {
+        return !isNullOrEmptyString(this.model.image) && isNullOrEmptyString(this.model.icon);
+    }
+}
+TimelineItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TimelineItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TimelineItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: TimelineItemComponent, selector: "sfc-timeline-item", inputs: { model: "model" }, host: { properties: { "class": "this.position", "class.period": "this.period" } }, ngImport: i0, template: "<li class=\"container\">\r\n    <div class=\"date-time\">\r\n        <span>{{model.dateTimeLabel}}</span>\r\n    </div>\r\n    <div class=\"marker\">\r\n        <div class=\"delimeter\"></div>\r\n    </div>\r\n    <div class=\"content\">\r\n        <div class=\"title\">\r\n            <i *ngIf=\"model.icon\" class=\"{{model.icon}}\"></i>\r\n            <img *ngIf=\"showImage\" [src]=\"model.image\">\r\n            <span>{{model.title}}</span>\r\n        </div>        \r\n        <p>{{model.description}}</p>\r\n    </div>\r\n</li>", styles: [":host{display:block}:host .container{padding:0 0 .5em 2.5em;position:relative}:host .container .date-time{font-size:.8em;font-weight:700;letter-spacing:.06em;margin:0 0 .5em;text-transform:uppercase;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box}:host-context(.sfc-default-theme) :host .container .date-time{color:#545e61}:host-context(.sfc-dark-theme) :host .container .date-time{color:#ccd1d9}:host .container .marker{position:absolute;top:0;bottom:0;left:0}:host .container .marker:before{box-sizing:border-box;background:#2bbbad;border:.18em solid transparent;border-radius:100%;content:\"\";display:block;position:absolute;top:.25em;width:1em;height:1em;transition:background .3s ease-in-out,border .3s ease-in-out}:host .container .marker:after{content:\"\";width:.18em;display:block;position:absolute;top:1.5em;bottom:0;left:.375em;box-sizing:border-box}:host-context(.sfc-default-theme) :host .container .marker:after{background:#545e61}:host-context(.sfc-dark-theme) :host .container .marker:after{background:#ccd1d9}:host .container .marker .delimeter{display:none;width:1em;bottom:0;position:absolute;border-bottom:.18em solid}:host-context(.sfc-default-theme) :host .container .marker .delimeter{border-color:#545e61}:host-context(.sfc-dark-theme) :host .container .marker .delimeter{border-color:#ccd1d9}:host .container .content{font-size:1em;font-weight:700;line-height:initial;padding-bottom:2.5em;-webkit-user-select:none;user-select:none;box-sizing:border-box;display:flex;flex-flow:column wrap;align-items:flex-start}:host-context(.sfc-default-theme) :host .container .content{color:#545e61}:host-context(.sfc-dark-theme) :host .container .content{color:#fff}:host .container .content p{font-size:.8em;line-height:1em;color:#aab2bd;margin:0}:host .container .content i,:host .container .content img{margin-right:.31em}:host .container .content img{width:1em}:host.period .container{padding:0}:host.period .container .date-time{display:none}:host.period .container .marker:before{background:transparent;content:\"\";height:auto;border:none;border-radius:0;top:0;bottom:1.875em;border-top:.18em solid;border-bottom:.18em solid;transition:none}:host-context(.sfc-default-theme) :host.period .container .marker:before{border-color:#545e61}:host-context(.sfc-dark-theme) :host.period .container .marker:before{border-color:#ccd1d9}:host.period .container .marker:after{content:\"\";height:2em;top:auto}:host.period .container .content{padding:2.5em 0 4.375em;justify-content:start}:host.period .container .content span{margin:0;font-size:1.875em}:host:not(.period):hover .container .marker:before{border:.18em solid #2bbbad}:host-context(.sfc-default-theme) :host:not(.period):hover .container .marker:before{background:transparent}:host-context(.sfc-dark-theme) :host:not(.period):hover .container .marker:before{background:#fff}@media (min-width: 992px){:host .container{padding:0 0 .31em;overflow:hidden}:host .container .date-time{width:50%}:host .container .marker{left:50%;margin-left:-.46em}:host .container .content{padding:0;width:50%}:host.period .container{padding:2em 0 3.5em}:host.period .container .content{padding:0;width:100%;text-align:center;justify-content:center;align-items:center}:host:not(.period).right .container .date-time{float:left;text-align:right;padding-right:1.875em}:host:not(.period).right .container .content{padding-left:1.5em;justify-content:start}:host:not(.period).left .container .date-time{float:right;padding-left:1.875em}:host:not(.period).left .container .content{padding-right:1.5em;justify-content:end;align-items:end}:host:not(.period).left .container .content .title{text-align:end}:host:not(.period).left .container .content span,:host:not(.period).left .container .content p{text-align:end}}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TimelineItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-timeline-item', template: "<li class=\"container\">\r\n    <div class=\"date-time\">\r\n        <span>{{model.dateTimeLabel}}</span>\r\n    </div>\r\n    <div class=\"marker\">\r\n        <div class=\"delimeter\"></div>\r\n    </div>\r\n    <div class=\"content\">\r\n        <div class=\"title\">\r\n            <i *ngIf=\"model.icon\" class=\"{{model.icon}}\"></i>\r\n            <img *ngIf=\"showImage\" [src]=\"model.image\">\r\n            <span>{{model.title}}</span>\r\n        </div>        \r\n        <p>{{model.description}}</p>\r\n    </div>\r\n</li>", styles: [":host{display:block}:host .container{padding:0 0 .5em 2.5em;position:relative}:host .container .date-time{font-size:.8em;font-weight:700;letter-spacing:.06em;margin:0 0 .5em;text-transform:uppercase;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box}:host-context(.sfc-default-theme) :host .container .date-time{color:#545e61}:host-context(.sfc-dark-theme) :host .container .date-time{color:#ccd1d9}:host .container .marker{position:absolute;top:0;bottom:0;left:0}:host .container .marker:before{box-sizing:border-box;background:#2bbbad;border:.18em solid transparent;border-radius:100%;content:\"\";display:block;position:absolute;top:.25em;width:1em;height:1em;transition:background .3s ease-in-out,border .3s ease-in-out}:host .container .marker:after{content:\"\";width:.18em;display:block;position:absolute;top:1.5em;bottom:0;left:.375em;box-sizing:border-box}:host-context(.sfc-default-theme) :host .container .marker:after{background:#545e61}:host-context(.sfc-dark-theme) :host .container .marker:after{background:#ccd1d9}:host .container .marker .delimeter{display:none;width:1em;bottom:0;position:absolute;border-bottom:.18em solid}:host-context(.sfc-default-theme) :host .container .marker .delimeter{border-color:#545e61}:host-context(.sfc-dark-theme) :host .container .marker .delimeter{border-color:#ccd1d9}:host .container .content{font-size:1em;font-weight:700;line-height:initial;padding-bottom:2.5em;-webkit-user-select:none;user-select:none;box-sizing:border-box;display:flex;flex-flow:column wrap;align-items:flex-start}:host-context(.sfc-default-theme) :host .container .content{color:#545e61}:host-context(.sfc-dark-theme) :host .container .content{color:#fff}:host .container .content p{font-size:.8em;line-height:1em;color:#aab2bd;margin:0}:host .container .content i,:host .container .content img{margin-right:.31em}:host .container .content img{width:1em}:host.period .container{padding:0}:host.period .container .date-time{display:none}:host.period .container .marker:before{background:transparent;content:\"\";height:auto;border:none;border-radius:0;top:0;bottom:1.875em;border-top:.18em solid;border-bottom:.18em solid;transition:none}:host-context(.sfc-default-theme) :host.period .container .marker:before{border-color:#545e61}:host-context(.sfc-dark-theme) :host.period .container .marker:before{border-color:#ccd1d9}:host.period .container .marker:after{content:\"\";height:2em;top:auto}:host.period .container .content{padding:2.5em 0 4.375em;justify-content:start}:host.period .container .content span{margin:0;font-size:1.875em}:host:not(.period):hover .container .marker:before{border:.18em solid #2bbbad}:host-context(.sfc-default-theme) :host:not(.period):hover .container .marker:before{background:transparent}:host-context(.sfc-dark-theme) :host:not(.period):hover .container .marker:before{background:#fff}@media (min-width: 992px){:host .container{padding:0 0 .31em;overflow:hidden}:host .container .date-time{width:50%}:host .container .marker{left:50%;margin-left:-.46em}:host .container .content{padding:0;width:50%}:host.period .container{padding:2em 0 3.5em}:host.period .container .content{padding:0;width:100%;text-align:center;justify-content:center;align-items:center}:host:not(.period).right .container .date-time{float:left;text-align:right;padding-right:1.875em}:host:not(.period).right .container .content{padding-left:1.5em;justify-content:start}:host:not(.period).left .container .date-time{float:right;padding-left:1.875em}:host:not(.period).left .container .content{padding-right:1.5em;justify-content:end;align-items:end}:host:not(.period).left .container .content .title{text-align:end}:host:not(.period).left .container .content span,:host:not(.period).left .container .content p{text-align:end}}\n"] }]
+        }], propDecorators: { model: [{
+                type: Input
+            }], position: [{
+                type: HostBinding,
+                args: ['class']
+            }], period: [{
+                type: HostBinding,
+                args: ['class.period']
+            }] } });
+
+class TimelineComponent {
+    constructor() {
+        this.items = [];
+    }
+}
+TimelineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TimelineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: TimelineComponent, selector: "sfc-timeline", inputs: { items: "items" }, ngImport: i0, template: "<div class=\"container\">\r\n    <ul class=\"timeline\">\r\n        <sfc-timeline-item *ngFor=\"let item of items\" [model]=\"item\"></sfc-timeline-item>\r\n    </ul>\r\n</div>", styles: [":host{display:block}:host .container .timeline{line-height:1.4em;list-style:none;margin:0;padding:0}:host .container .timeline ::ng-deep sfc-timeline-item:first-child.period .container{padding-top:0}:host .container .timeline ::ng-deep sfc-timeline-item:first-child.period .container .marker:before{border-top:none!important}:host .container .timeline ::ng-deep sfc-timeline-item:last-child .delimeter{display:block}\n"], components: [{ type: TimelineItemComponent, selector: "sfc-timeline-item", inputs: ["model"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TimelineComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-timeline', template: "<div class=\"container\">\r\n    <ul class=\"timeline\">\r\n        <sfc-timeline-item *ngFor=\"let item of items\" [model]=\"item\"></sfc-timeline-item>\r\n    </ul>\r\n</div>", styles: [":host{display:block}:host .container .timeline{line-height:1.4em;list-style:none;margin:0;padding:0}:host .container .timeline ::ng-deep sfc-timeline-item:first-child.period .container{padding-top:0}:host .container .timeline ::ng-deep sfc-timeline-item:first-child.period .container .marker:before{border-top:none!important}:host .container .timeline ::ng-deep sfc-timeline-item:last-child .delimeter{display:block}\n"] }]
+        }], propDecorators: { items: [{
+                type: Input
+            }] } });
+
+var NotificationTemplate;
+(function (NotificationTemplate) {
+    NotificationTemplate["Content"] = "content";
+})(NotificationTemplate || (NotificationTemplate = {}));
+
+var NotificationType;
+(function (NotificationType) {
+    NotificationType["Info"] = "info";
+    NotificationType["Success"] = "success";
+    NotificationType["Failed"] = "failed";
+})(NotificationType || (NotificationType = {}));
+
+class NotificationContentComponent {
+    constructor() {
+        this.ButtonType = ButtonType;
+        this.type = NotificationType.Info;
+        this.model = {};
+        this.buttonClicked = new EventEmitter();
+    }
+    get showImage() {
+        return !isNullOrEmptyString(this.model.image) && isNullOrEmptyString(this.model.icon);
+    }
+}
+NotificationContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NotificationContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NotificationContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: NotificationContentComponent, selector: "sfc-notification-content", inputs: { type: "type", model: "model" }, outputs: { buttonClicked: "buttonClicked" }, host: { properties: { "class": "this.type" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"illustration\">\r\n        <div *ngIf=\"model.icon\">\r\n            <i class=\"{{model.icon}}\"></i>\r\n        </div>\r\n        <div *ngIf=\"showImage\">\r\n            <img [src]=\"model.image\">\r\n        </div>\r\n    </div>\r\n    <div class=\"message\">\r\n        <h1>{{model.title}}</h1>\r\n        <p>{{model.subTitle}}</p>\r\n    </div>\r\n    <div *ngIf=\"model.showButton\" class=\"action\">\r\n        <sfc-button text=\"{{model.buttonText || type}}\" [types]=\"[ButtonType.Rounded, ButtonType.Filled]\"\r\n            (click)=\"buttonClicked.emit()\"></sfc-button>\r\n    </div>\r\n</div>", styles: [":host{display:inline-block;font-size:3em}:host.info ::ng-deep sfc-button .button.filled{color:#4fc1e9!important}:host.success ::ng-deep sfc-button .button.filled{color:#4ec07d!important}:host.failed ::ng-deep sfc-button .button.filled{color:#e96075!important}:host .container{display:flex;flex-direction:column;justify-content:center;align-items:center}:host .container .illustration{color:#f5f7fa;display:flex;justify-content:center;align-items:center;font-size:.7em}:host .container .illustration img{object-fit:contain;width:3em;height:3em}:host .container .message{text-align:center;-webkit-user-select:none;user-select:none}:host .container .message h1{font-size:.4em;color:#f5f7fa;font-weight:700;letter-spacing:.3em;text-transform:uppercase}:host .container .message p{font-size:.2em;font-weight:100;color:#434a54;letter-spacing:.1em}:host .container .action{font-size:.25em}:host .container .action ::ng-deep sfc-button{transition:transform .3s ease-in-out}:host .container .action ::ng-deep sfc-button .button.filled{background:#f5f7fa;border:solid .125em #f5f7fa}:host .container .action ::ng-deep sfc-button:hover{transform:scale(1.05)}\n"], components: [{ type: i1.ButtonComponent, selector: "sfc-button", inputs: ["text", "iconBefore", "iconAfter", "disabled", "types"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NotificationContentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-notification-content', template: "<div class=\"container\">\r\n    <div class=\"illustration\">\r\n        <div *ngIf=\"model.icon\">\r\n            <i class=\"{{model.icon}}\"></i>\r\n        </div>\r\n        <div *ngIf=\"showImage\">\r\n            <img [src]=\"model.image\">\r\n        </div>\r\n    </div>\r\n    <div class=\"message\">\r\n        <h1>{{model.title}}</h1>\r\n        <p>{{model.subTitle}}</p>\r\n    </div>\r\n    <div *ngIf=\"model.showButton\" class=\"action\">\r\n        <sfc-button text=\"{{model.buttonText || type}}\" [types]=\"[ButtonType.Rounded, ButtonType.Filled]\"\r\n            (click)=\"buttonClicked.emit()\"></sfc-button>\r\n    </div>\r\n</div>", styles: [":host{display:inline-block;font-size:3em}:host.info ::ng-deep sfc-button .button.filled{color:#4fc1e9!important}:host.success ::ng-deep sfc-button .button.filled{color:#4ec07d!important}:host.failed ::ng-deep sfc-button .button.filled{color:#e96075!important}:host .container{display:flex;flex-direction:column;justify-content:center;align-items:center}:host .container .illustration{color:#f5f7fa;display:flex;justify-content:center;align-items:center;font-size:.7em}:host .container .illustration img{object-fit:contain;width:3em;height:3em}:host .container .message{text-align:center;-webkit-user-select:none;user-select:none}:host .container .message h1{font-size:.4em;color:#f5f7fa;font-weight:700;letter-spacing:.3em;text-transform:uppercase}:host .container .message p{font-size:.2em;font-weight:100;color:#434a54;letter-spacing:.1em}:host .container .action{font-size:.25em}:host .container .action ::ng-deep sfc-button{transition:transform .3s ease-in-out}:host .container .action ::ng-deep sfc-button .button.filled{background:#f5f7fa;border:solid .125em #f5f7fa}:host .container .action ::ng-deep sfc-button:hover{transform:scale(1.05)}\n"] }]
+        }], propDecorators: { type: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class']
+            }], model: [{
+                type: Input
+            }], buttonClicked: [{
+                type: Output
+            }] } });
+
+class NotificationComponent {
+    constructor() {
+        this.AUTO_CLOSE_INTERVAL_DEFAULT = 5000;
+        this.DESTROY_HOST_INTERVAL = 500;
+        this.NotificationTemplate = NotificationTemplate;
+        this.showClose = true;
+        this.autoCloseModel = { enabled: false, interval: this.AUTO_CLOSE_INTERVAL_DEFAULT };
+        this.type = NotificationType.Info;
+        this.model = { showButton: true };
+        this.closed = new EventEmitter();
+        this.buttonClicked = new EventEmitter();
+        this.destroy = false;
+        this.show = false;
+    }
+    ngOnInit() {
+        if (!isDefined(this.autoCloseModel.interval))
+            this.autoCloseModel.interval = this.AUTO_CLOSE_INTERVAL_DEFAULT;
+        if (this.autoCloseModel.enabled)
+            setTimeout(() => {
+                if (this.show) {
+                    this.close();
+                }
+            }, this.autoCloseModel.interval);
+        // for animation purpose
+        setTimeout(() => this.show = true);
+    }
+    close() {
+        this.show = false;
+        this.destroy = true;
+        this.closed.emit();
+    }
+}
+NotificationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NotificationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: NotificationComponent, selector: "sfc-notification", inputs: { showClose: "showClose", autoCloseModel: "autoCloseModel", type: "type", model: "model", content: "content" }, outputs: { closed: "closed", buttonClicked: "buttonClicked" }, host: { properties: { "class": "this.type" } }, queries: [{ propertyName: "templates", predicate: TemplateReferenceDirective, read: TemplateReferenceDirective }], ngImport: i0, template: "<div class=\"container\" [sfcDestroyParent]=\"destroy\" [delay]=\"DESTROY_HOST_INTERVAL\">\r\n    <div class=\"notification\" [sfcShowHideElement]=\"show\">\r\n        <sfc-close *ngIf=\"showClose\" (click)=\"close()\"></sfc-close>\r\n\r\n        <sfc-template-content [referenceContent]=\"content\" [templatesContent]=\"templates\"\r\n            [templateType]=\"NotificationTemplate.Content\" [defaultContent]=\"defaultContent\">\r\n        </sfc-template-content>\r\n\r\n        <ng-template #defaultContent>\r\n            <sfc-notification-content [type]=\"type\" [model]=\"model\" (buttonClicked)=\"buttonClicked.emit()\">\r\n            </sfc-notification-content>\r\n        </ng-template>\r\n    </div>\r\n</div>", styles: [":host{display:inline-block}:host .container .notification{border-radius:1.25em;box-shadow:5px 5px 20px #656d78;padding:1em;display:flex;justify-content:center;align-items:center;flex-direction:column;color:#f5f7fa}:host .container .notification sfc-close{align-self:end}:host .container .notification ::ng-deep sfc-close{color:#f5f7fa}:host .container .notification ::ng-deep sfc-close:hover{color:#fff}:host.info .container .notification{background:linear-gradient(to bottom right,#4fc1e9 40%,#4a89dc 100%)}:host.success .container .notification{background:linear-gradient(to bottom right,#b0db7d 40%,#99dbb4 100%)}:host.failed .container .notification{background:linear-gradient(to bottom left,#ef8d9c 40%,#ffc39e 100%)}\n"], components: [{ type: i1.CloseComponent, selector: "sfc-close" }, { type: i1.TemplateContentComponent, selector: "sfc-template-content", inputs: ["contextData", "referenceContent", "templateType", "templatesContent", "defaultContent"] }, { type: NotificationContentComponent, selector: "sfc-notification-content", inputs: ["type", "model"], outputs: ["buttonClicked"] }], directives: [{ type: i1.DestroyParentDirective, selector: "[sfcDestroyParent]", inputs: ["sfcDestroyParent", "delay"] }, { type: i1.ShowHideElementDirective, selector: "[sfcShowHideElement]", inputs: ["sfcShowHideElement", "delay"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NotificationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-notification', template: "<div class=\"container\" [sfcDestroyParent]=\"destroy\" [delay]=\"DESTROY_HOST_INTERVAL\">\r\n    <div class=\"notification\" [sfcShowHideElement]=\"show\">\r\n        <sfc-close *ngIf=\"showClose\" (click)=\"close()\"></sfc-close>\r\n\r\n        <sfc-template-content [referenceContent]=\"content\" [templatesContent]=\"templates\"\r\n            [templateType]=\"NotificationTemplate.Content\" [defaultContent]=\"defaultContent\">\r\n        </sfc-template-content>\r\n\r\n        <ng-template #defaultContent>\r\n            <sfc-notification-content [type]=\"type\" [model]=\"model\" (buttonClicked)=\"buttonClicked.emit()\">\r\n            </sfc-notification-content>\r\n        </ng-template>\r\n    </div>\r\n</div>", styles: [":host{display:inline-block}:host .container .notification{border-radius:1.25em;box-shadow:5px 5px 20px #656d78;padding:1em;display:flex;justify-content:center;align-items:center;flex-direction:column;color:#f5f7fa}:host .container .notification sfc-close{align-self:end}:host .container .notification ::ng-deep sfc-close{color:#f5f7fa}:host .container .notification ::ng-deep sfc-close:hover{color:#fff}:host.info .container .notification{background:linear-gradient(to bottom right,#4fc1e9 40%,#4a89dc 100%)}:host.success .container .notification{background:linear-gradient(to bottom right,#b0db7d 40%,#99dbb4 100%)}:host.failed .container .notification{background:linear-gradient(to bottom left,#ef8d9c 40%,#ffc39e 100%)}\n"] }]
+        }], propDecorators: { showClose: [{
+                type: Input
+            }], autoCloseModel: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class']
+            }], model: [{
+                type: Input
+            }], content: [{
+                type: Input
+            }], closed: [{
+                type: Output
+            }], buttonClicked: [{
+                type: Output
+            }], templates: [{
+                type: ContentChildren,
+                args: [TemplateReferenceDirective, { read: TemplateReferenceDirective }]
+            }] } });
+
+const DEFAULT_BACKGROUND_COLORS = [
+    `rgb(93%, 33%, 40%, ${UIConstants.RGB_OPACITY_PLACEHOLDER})`,
+    `rgba(99%, 43%, 32%, ${UIConstants.RGB_OPACITY_PLACEHOLDER})`,
+    `rgb(100%, 81%, 33%, ${UIConstants.RGB_OPACITY_PLACEHOLDER})`,
+    `rgb(63%, 83%, 41%, ${UIConstants.RGB_OPACITY_PLACEHOLDER})`,
+    `rgb(28%, 81%, 68%, ${UIConstants.RGB_OPACITY_PLACEHOLDER})`,
+    `rgb(31%, 76%, 91%, ${UIConstants.RGB_OPACITY_PLACEHOLDER})`,
+    `rgb(36%, 61%, 93%, ${UIConstants.RGB_OPACITY_PLACEHOLDER})`,
+    `rgb(67%, 57%, 93%, ${UIConstants.RGB_OPACITY_PLACEHOLDER})`,
+    `rgb(93%, 53%, 75%, ${UIConstants.RGB_OPACITY_PLACEHOLDER})`,
+    `rgb(80%, 82%, 85%, ${UIConstants.RGB_OPACITY_PLACEHOLDER})`
+];
+const DEFAULT_BORDER_COLORS = ['#DA4453', '#E9573F', '#FCBB42', '#8CC152', '#37BC9B', '#3BAFDA', '#4A89DC', '#967ADC', '#D770AD', '#AAB2BD'];
+const DEFAULT_MODE_COLORS = { GRID: 'rgba(0,0,0,0.1)', TICKS: '#666' };
+const DARK_MODE_COLORS = { GRID: '#656D78', TICKS: '#E6E9ED' };
+const CHART_DEFAULTS = {
+    OPTIONS: _getOptions(),
+    OPTIONS_NOT_LINES: _getOptions(false),
+    OPTIONS_RADIAL: _getOptions(false, true),
+    COLORS: _getColors(),
+    HALF_TRANSPARENT_COLORS: _getColors(0.5),
+    THEME: {
+        DEFAULT: _getThemeOptions(false),
+        DARK: _getThemeOptions(true)
+    }
+};
+function _getOptions(showAxes = true, showRadialAxes = false) {
+    return {
+        responsive: true,
+        maintainAspectRatio: false,
+        scales: {
+            x: {
+                display: showAxes,
+                grid: { display: true },
+                ticks: { display: true }
+            },
+            y: {
+                display: showAxes,
+                grid: { display: true },
+                ticks: { display: true }
+            },
+            r: {
+                display: showRadialAxes,
+            }
+        },
+        plugins: {
+            tooltip: { enabled: true },
+            legend: { display: true }
+        }
+    };
+}
+function _getColors(opacity = 1) {
+    const backgrounds = DEFAULT_BACKGROUND_COLORS.map(b => replaceRgbOpacity(b, opacity));
+    return backgrounds.map((background, index) => {
+        const border = DEFAULT_BORDER_COLORS[index];
+        return {
+            backgroundColor: background,
+            hoverBackgroundColor: background,
+            borderColor: border,
+            pointBackgroundColor: background,
+            pointBorderColor: border
+        };
+    });
+}
+function _getThemeOptions(dark) {
+    const grid = dark ? DARK_MODE_COLORS.GRID : DEFAULT_MODE_COLORS.GRID, ticks = dark ? DARK_MODE_COLORS.TICKS : DEFAULT_MODE_COLORS.TICKS;
+    return {
+        scales: {
+            x: {
+                grid: { color: grid },
+                ticks: { color: ticks }
+            },
+            y: {
+                grid: { color: grid },
+                ticks: { color: ticks }
+            },
+            r: {
+                angleLines: { color: grid },
+                grid: { color: grid },
+                ticks: { color: ticks, backdropColor: 'transparent' },
+                pointLabels: { color: ticks }
+            }
+        },
+        plugins: {
+            legend: {
+                labels: { color: ticks }
+            },
+            title: {
+                color: ticks
+            }
+        }
+    };
+}
+
+class ChartThemeService {
+    constructor() {
+        this.colorsSubject = new Subject();
+        this.colors$ = this.colorsSubject.asObservable();
+    }
+    setColors(model) {
+        this.model = model;
+        this.colorsSubject.next(model);
+    }
+    getColors() {
+        return this.model;
+    }
+}
+ChartThemeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ChartThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ChartThemeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ChartThemeService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ChartThemeService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class ChartSettingsService {
+    getDefaultOptions(type) {
+        let defaultChartOptions = {};
+        switch (type) {
+            case 'polarArea':
+            case 'radar':
+                defaultChartOptions = CHART_DEFAULTS.OPTIONS_RADIAL;
+                break;
+            case 'pie':
+            case 'doughnut':
+                defaultChartOptions = CHART_DEFAULTS.OPTIONS_NOT_LINES;
+                break;
+            default:
+                defaultChartOptions = CHART_DEFAULTS.OPTIONS;
+                break;
+        }
+        return JSON.parse(JSON.stringify(defaultChartOptions));
+    }
+    getDefaultChartOptions(type) {
+        switch (type) {
+            case 'pie':
+            case 'radar':
+            case 'polarArea':
+            case 'doughnut':
+                return { legend: true, gridLines: true, xAxe: false, yAxe: false, tooltip: true, ticks: true, defaultColors: true };
+            default:
+                return { legend: true, gridLines: true, xAxe: true, yAxe: true, tooltip: true, ticks: true, defaultColors: true };
+        }
+    }
+    setDatasetStyles(type, datasets, colors) {
+        switch (type) {
+            case 'polarArea':
+            case 'pie':
+            case 'doughnut':
+                this.setBackgroundDatasetStyles(datasets, colors || CHART_DEFAULTS.COLORS);
+                break;
+            case 'radar':
+                this.setDefaultDatasetStyles(datasets, colors || CHART_DEFAULTS.HALF_TRANSPARENT_COLORS);
+                break;
+            default:
+                this.setDefaultDatasetStyles(datasets, colors || CHART_DEFAULTS.COLORS);
+                break;
+        }
+    }
+    setDefaultDatasetStyles(datasets, colors) {
+        datasets.forEach((item, index) => {
+            if (index <= colors.length - 1) {
+                const dataSetColor = colors[index];
+                item.backgroundColor = dataSetColor.backgroundColor;
+                item.hoverBackgroundColor = dataSetColor.hoverBackgroundColor;
+                item.borderColor = dataSetColor.borderColor;
+                item.hoverBorderColor = dataSetColor.hoverBorderColor;
+                item.pointBackgroundColor = dataSetColor.pointBackgroundColor;
+                item.pointHoverBackgroundColor = dataSetColor.pointHoverBackgroundColor;
+                item.pointBorderColor = dataSetColor.pointBorderColor;
+                item.pointHoverBorderColor = dataSetColor.pointHoverBorderColor;
+            }
+        });
+    }
+    setBackgroundDatasetStyles(datasets, colors) {
+        datasets.forEach((item) => {
+            item.backgroundColor = this.replaceColors(item.backgroundColor, colors, c => c.backgroundColor);
+            item.hoverBackgroundColor = this.replaceColors(item.hoverBackgroundColor, colors, c => c.hoverBackgroundColor);
+        });
+    }
+    replaceColors(oldColors, newColors, mapFunc) {
+        const colors = newColors.map(mapFunc).filter((color) => isDefined(color));
+        if (oldColors) {
+            oldColors.splice(0, Math.min(oldColors.length, colors.length));
+            return colors.concat(oldColors);
+        }
+        return colors;
+    }
+}
+ChartSettingsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ChartSettingsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ChartSettingsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ChartSettingsService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ChartSettingsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class ChartComponent {
+    constructor(zone, themeService, settingsService) {
+        this.zone = zone;
+        this.themeService = themeService;
+        this.settingsService = settingsService;
+        // Chart configuration
+        this.type = 'line';
+        this.plugins = [];
+        this._theme = Theme.Default;
+        this._themeSubscription = this.themeService.colors$
+            .pipe(distinctUntilChanged())
+            .subscribe((model) => this.updateColors(model));
+    }
+    get theme() {
+        return this._theme;
+    }
+    set theme(value) {
+        if (this._theme != value) {
+            this._theme = value;
+            this.themeService.setColors({ options: this.themeOptions });
+        }
+    }
+    get themeOptions() {
+        return this.theme === Theme.Dark ? CHART_DEFAULTS.THEME.DARK : CHART_DEFAULTS.THEME.DEFAULT;
+    }
+    ngOnInit() {
+        this.chartOptions = Object.assign(Object.assign({}, this.settingsService.getDefaultChartOptions(this.type)), this.chartOptions);
+    }
+    ngAfterViewInit() {
+        const ctx = this.canvas.nativeElement.getContext('2d');
+        if (this.chart) {
+            this.chart.destroy();
+        }
+        this.zone.runOutsideAngular(() => this.chart = new Chart(ctx, this.getChartConfiguration()));
+    }
+    ngOnDestroy() {
+        var _a;
+        if (this.chart) {
+            this.chart.destroy();
+            this.chart = void 0;
+        }
+        (_a = this._themeSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+    }
+    update() {
+        this.zone.runOutsideAngular(() => { var _a; return (_a = this.chart) === null || _a === void 0 ? void 0 : _a.update(); });
+    }
+    getChartConfiguration() {
+        return {
+            type: this.type,
+            data: this.getChartData(),
+            options: this.getChartOptions(),
+            plugins: this.plugins
+        };
+    }
+    getChartData() {
+        const chartData = this.data ? this.data : {
+            labels: this.labels || [],
+            datasets: this.datasets || []
+        };
+        if (this.chartOptions.defaultColors)
+            this.settingsService.setDatasetStyles(this.type, chartData.datasets);
+        return chartData;
+    }
+    getChartOptions() {
+        const chartOptions = this.overrideDefaultOptionsByModel();
+        return mergeDeep(chartOptions, this.options);
+    }
+    overrideDefaultOptionsByModel() {
+        const defaultChartOptions = this.settingsService.getDefaultOptions(this.type);
+        defaultChartOptions.scales.x.grid.display = this.chartOptions.gridLines;
+        defaultChartOptions.scales.x.display = this.chartOptions.xAxe;
+        defaultChartOptions.scales.y.grid.display = this.chartOptions.gridLines;
+        defaultChartOptions.scales.y.display = this.chartOptions.yAxe;
+        defaultChartOptions.scales.x.ticks.display = this.chartOptions.ticks;
+        defaultChartOptions.scales.y.ticks.display = this.chartOptions.ticks;
+        defaultChartOptions.plugins.tooltip.enabled = this.chartOptions.tooltip;
+        defaultChartOptions.plugins.legend.display = this.chartOptions.legend;
+        return mergeDeep(defaultChartOptions, this.themeOptions);
+    }
+    updateColors(model) {
+        if (this.chart) {
+            mergeDeep(this.chart.config.options, model.options);
+            if (isDefined(model.dataSetColors))
+                this.settingsService.setDatasetStyles(this.type, this.chart.config.data.datasets, model.dataSetColors);
+            this.update();
+        }
+    }
+}
+ChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ChartComponent, deps: [{ token: i0.NgZone }, { token: ChartThemeService }, { token: ChartSettingsService }], target: i0.ɵɵFactoryTarget.Component });
+ChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: ChartComponent, selector: "sfc-chart", inputs: { type: "type", data: "data", options: "options", plugins: "plugins", labels: "labels", datasets: "datasets", chartOptions: "chartOptions", theme: "theme" }, viewQueries: [{ propertyName: "canvas", first: true, predicate: ["chart"], descendants: true }], ngImport: i0, template: "<canvas #chart></canvas>", styles: [":host{height:inherit;width:inherit}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ChartComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-chart', styles: [':host { height: inherit; width: inherit;}'], template: "<canvas #chart></canvas>" }]
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: ChartThemeService }, { type: ChartSettingsService }]; }, propDecorators: { type: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], plugins: [{
+                type: Input
+            }], labels: [{
+                type: Input
+            }], datasets: [{
+                type: Input
+            }], chartOptions: [{
+                type: Input
+            }], theme: [{
+                type: Input
+            }], canvas: [{
+                type: ViewChild,
+                args: ['chart']
+            }] } });
+
+var TableColumnType;
+(function (TableColumnType) {
+    TableColumnType["Data"] = "data";
+    TableColumnType["Sequence"] = "sequence";
+    TableColumnType["Selectable"] = "selectable";
+    TableColumnType["Expanded"] = "expanded";
+})(TableColumnType || (TableColumnType = {}));
+
+class ColumnsToggleService {
+    constructor(window, resizeService) {
+        this.window = window;
+        this.resizeService = resizeService;
+        // current state of toggle 
+        this.showColumns = false;
+        this.toggleSubject = new Subject();
+        // toggle state observable
+        this.toggle$ = this.toggleSubject.asObservable()
+            .pipe(tap(() => this.showColumns = !this.showColumns), shareReplay());
+        // show column observable 
+        this.showColumns$ = merge(this.resizeService.onResize$.pipe(startWith(null)), this.toggle$).pipe(map(() => this.window.innerWidth >= MediaLimits.Tablet ? true : this.showColumns));
+    }
+    toggle() {
+        this.toggleSubject.next();
+    }
+}
+ColumnsToggleService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ColumnsToggleService, deps: [{ token: WINDOW }, { token: i1.ResizeService }], target: i0.ɵɵFactoryTarget.Injectable });
+ColumnsToggleService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ColumnsToggleService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ColumnsToggleService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () {
+        return [{ type: Window, decorators: [{
+                        type: Inject,
+                        args: [WINDOW]
+                    }] }, { type: i1.ResizeService }];
+    } });
+
+class TableSelectService {
+    constructor() {
+        this.selectSubject = new Subject();
+        this.select$ = this.selectSubject.asObservable();
+    }
+    selectAll(selected) {
+        this.selectSubject.next({ index: null, selected: selected });
+    }
+    select(index, selected) {
+        this.selectSubject.next({ index, selected });
+    }
+}
+TableSelectService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TableSelectService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+TableSelectService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TableSelectService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TableSelectService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+var TableDataType;
+(function (TableDataType) {
+    TableDataType["Rows"] = "rows";
+    TableDataType["Cards"] = "cards";
+})(TableDataType || (TableDataType = {}));
+
+class TableConstants {
+}
+TableConstants.SEQUENCE_COLUMN = { name: '№', field: '', type: TableColumnType.Sequence };
+TableConstants.SELECTABLE_COLUMN = { name: '', field: '', type: TableColumnType.Selectable };
+TableConstants.EXPANDED_COLUMN = { name: '', field: '', type: TableColumnType.Expanded };
+TableConstants.TOGGLE_SWITCHER_LEFT_MODEL = { label: 'List', icon: 'fa fa-table-list' };
+TableConstants.TOGGLE_SWITCHER_RIGHT_MODEL = { label: 'Cards', icon: 'fa fa-border-all' };
+TableConstants.DEFAULT_PAGE = 1;
+TableConstants.DEFAULT_PAGE_SIZE = 5;
+
+var TableTemplate;
+(function (TableTemplate) {
+    TableTemplate["Column"] = "column";
+    TableTemplate["Row"] = "row";
+    TableTemplate["Card"] = "card";
+})(TableTemplate || (TableTemplate = {}));
+
+class ColumnsToggleConstants {
+}
+ColumnsToggleConstants.HIDE = {
+    LABEL: 'Hide',
+    ICON: 'fa fa-eye-slash'
+};
+ColumnsToggleConstants.SHOW = {
+    LABEL: 'Show',
+    ICON: 'fa fa-eye'
+};
+
+class ColumnsToggleComponent {
+    constructor(service) {
+        this.service = service;
+    }
+    onToggle() {
+        this.service.toggle();
+    }
+    ngOnInit() {
+        this.vm$ = this.service.showColumns$.pipe(map(show => {
+            return {
+                model: show ? ColumnsToggleConstants.HIDE : ColumnsToggleConstants.SHOW,
+                show: show
+            };
+        }));
+    }
+}
+ColumnsToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ColumnsToggleComponent, deps: [{ token: ColumnsToggleService }], target: i0.ɵɵFactoryTarget.Component });
+ColumnsToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: ColumnsToggleComponent, selector: "sfc-columns-toggle", host: { listeners: { "click": "onToggle()" } }, ngImport: i0, template: "<div class=\"container\" *ngIf=\"vm$ | async as vm\">\r\n    <div>\r\n        <span class=\"icon\" [sfcShowHideElement]=\"!vm.show\">\r\n            <i class=\"{{vm.model.ICON}}\"></i>\r\n        </span>\r\n        <span class=\"icon\" [sfcShowHideElement]=\"vm.show\">\r\n            <i class=\"{{vm.model.ICON}}\"></i>\r\n        </span>\r\n        <span class=\"label\">{{vm.model.LABEL}}</span>\r\n    </div>\r\n</div>", styles: [":host{display:flex;align-items:center}:host .container{font-size:.625em;font-weight:700;text-transform:uppercase;width:100%;text-align:end;display:none;cursor:pointer;-webkit-user-select:none;user-select:none}:host-context(.sfc-default-theme) :host .container{color:#545e61}:host-context(.sfc-dark-theme) :host .container{color:#ccd1d9}:host .container:hover{color:#2bbbad}:host .container span.icon{position:absolute}:host .container span.label{padding-left:1.3em}@media all and (max-width: 767px){:host .container{display:block}}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.ShowHideElementDirective, selector: "[sfcShowHideElement]", inputs: ["sfcShowHideElement", "delay"] }], pipes: { "async": i2.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ColumnsToggleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-columns-toggle', template: "<div class=\"container\" *ngIf=\"vm$ | async as vm\">\r\n    <div>\r\n        <span class=\"icon\" [sfcShowHideElement]=\"!vm.show\">\r\n            <i class=\"{{vm.model.ICON}}\"></i>\r\n        </span>\r\n        <span class=\"icon\" [sfcShowHideElement]=\"vm.show\">\r\n            <i class=\"{{vm.model.ICON}}\"></i>\r\n        </span>\r\n        <span class=\"label\">{{vm.model.LABEL}}</span>\r\n    </div>\r\n</div>", styles: [":host{display:flex;align-items:center}:host .container{font-size:.625em;font-weight:700;text-transform:uppercase;width:100%;text-align:end;display:none;cursor:pointer;-webkit-user-select:none;user-select:none}:host-context(.sfc-default-theme) :host .container{color:#545e61}:host-context(.sfc-dark-theme) :host .container{color:#ccd1d9}:host .container:hover{color:#2bbbad}:host .container span.icon{position:absolute}:host .container span.label{padding-left:1.3em}@media all and (max-width: 767px){:host .container{display:block}}\n"] }]
+        }], ctorParameters: function () { return [{ type: ColumnsToggleService }]; }, propDecorators: { onToggle: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+class SelectableTableColumnComponent {
+    constructor(service) {
+        this.service = service;
+        this.selected = false;
+    }
+    selectAll() {
+        this.selected = !this.selected;
+        this.service.selectAll(this.selected);
+    }
+}
+SelectableTableColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SelectableTableColumnComponent, deps: [{ token: TableSelectService }], target: i0.ɵɵFactoryTarget.Component });
+SelectableTableColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SelectableTableColumnComponent, selector: "sfc-selectable-table-column", inputs: { selected: "selected" }, host: { listeners: { "click": "selectAll()" }, properties: { "class.active": "this.selected" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <sfc-checkmark [active]=\"selected\"></sfc-checkmark>\r\n    <span>ALL</span>\r\n</div>", styles: [":host{display:inline-block}:host:hover{color:#2bbbad}:host:hover span{color:#2bbbad}:host .container{text-transform:uppercase;font-size:.875em;font-weight:700;display:flex;align-items:center;justify-content:center;transition:color .3s;cursor:pointer;-webkit-user-select:none;user-select:none}:host-context(.sfc-default-theme) :host .container{color:#545e61}:host-context(.sfc-dark-theme) :host .container{color:#ccd1d9}:host .container span{padding-left:.31em}\n"], components: [{ type: i1.CheckmarkComponent, selector: "sfc-checkmark", inputs: ["active", "icon"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SelectableTableColumnComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-selectable-table-column', template: "<div class=\"container\">\r\n    <sfc-checkmark [active]=\"selected\"></sfc-checkmark>\r\n    <span>ALL</span>\r\n</div>", styles: [":host{display:inline-block}:host:hover{color:#2bbbad}:host:hover span{color:#2bbbad}:host .container{text-transform:uppercase;font-size:.875em;font-weight:700;display:flex;align-items:center;justify-content:center;transition:color .3s;cursor:pointer;-webkit-user-select:none;user-select:none}:host-context(.sfc-default-theme) :host .container{color:#545e61}:host-context(.sfc-dark-theme) :host .container{color:#ccd1d9}:host .container span{padding-left:.31em}\n"] }]
+        }], ctorParameters: function () { return [{ type: TableSelectService }]; }, propDecorators: { selected: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: [`class.${UIClass.Active}`]
+            }], selectAll: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+class DefaultTableColumnComponent {
+    constructor() {
+        this.model = { name: CommonConstants.EMPTY_STRING, field: CommonConstants.EMPTY_STRING };
+    }
+    get active() {
+        var _a;
+        return ((_a = this.model.sorting) === null || _a === void 0 ? void 0 : _a.active) || false;
+    }
+}
+DefaultTableColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DefaultTableColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DefaultTableColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: DefaultTableColumnComponent, selector: "sfc-default-table-column", inputs: { model: "model" }, host: { properties: { "class.active": "this.active" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <div *ngIf=\"model.icon\" class=\"icon\">\r\n        <i class=\"{{model.icon}}\"></i>\r\n    </div>\r\n    <div>\r\n        <span>{{model.name}}</span>\r\n    </div>\r\n</div>", styles: [":host{display:inline-block}:host.active{color:#2bbbad}:host .container{text-transform:uppercase;font-size:.875em;font-weight:700;display:flex;align-items:center;justify-content:center;color:inherit;transition:color .3s}:host .container .icon{margin-right:5px}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DefaultTableColumnComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-default-table-column', template: "<div class=\"container\">\r\n    <div *ngIf=\"model.icon\" class=\"icon\">\r\n        <i class=\"{{model.icon}}\"></i>\r\n    </div>\r\n    <div>\r\n        <span>{{model.name}}</span>\r\n    </div>\r\n</div>", styles: [":host{display:inline-block}:host.active{color:#2bbbad}:host .container{text-transform:uppercase;font-size:.875em;font-weight:700;display:flex;align-items:center;justify-content:center;color:inherit;transition:color .3s}:host .container .icon{margin-right:5px}\n"] }]
+        }], propDecorators: { model: [{
+                type: Input
+            }], active: [{
+                type: HostBinding,
+                args: [`class.${UIClass.Active}`]
+            }] } });
+
+class BaseDefaultTableContentComponent {
+    constructor() {
+        this.TableColumnType = TableColumnType;
+        this.model = { dataModel: { data: {} }, index: 0 };
+        this.columns = [];
+        this.selectOnClick = false;
+        this.position = Position.Left;
+        this.columnWidth = this.columns.length || 1;
+        this.selected = new EventEmitter();
+    }
+    onContentClick() {
+        if (this.selectOnClick)
+            this.selected.emit(this.selectEvent);
+    }
+    get even() {
+        return (this.model.index + 1) % 2 === 0;
+    }
+    get pointer() {
+        return this.selectOnClick;
+    }
+    ngAfterViewInit() {
+        if (this.columnCheckmark) {
+            this._columnCheckmarkSubscription = fromEvent(this.columnCheckmark.nativeElement, 'click')
+                .subscribe((event) => {
+                if (this.selectOnClick)
+                    event.stopPropagation();
+                this.selected.emit(this.selectEvent);
+            });
+        }
+    }
+    ngOnDestroy() {
+        if (this._columnCheckmarkSubscription)
+            this._columnCheckmarkSubscription.unsubscribe();
+    }
+    get selectEvent() {
+        return { index: this.model.index, selected: !this.model.dataModel.selected };
+    }
+}
+BaseDefaultTableContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: BaseDefaultTableContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+BaseDefaultTableContentComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: BaseDefaultTableContentComponent, inputs: { model: "model", columns: "columns", selectOnClick: "selectOnClick", position: "position", columnWidth: "columnWidth" }, outputs: { selected: "selected" }, host: { listeners: { "click": "onContentClick()" }, properties: { "class.even": "this.even", "class.pointer": "this.pointer" } }, viewQueries: [{ propertyName: "columnCheckmark", first: true, predicate: ["columnCheckmark"], descendants: true }], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: BaseDefaultTableContentComponent, decorators: [{
+            type: Directive
+        }], propDecorators: { model: [{
+                type: Input
+            }], columns: [{
+                type: Input
+            }], selectOnClick: [{
+                type: Input
+            }], position: [{
+                type: Input
+            }], columnWidth: [{
+                type: Input
+            }], selected: [{
+                type: Output
+            }], columnCheckmark: [{
+                type: ViewChild,
+                args: ['columnCheckmark', { static: false }]
+            }], onContentClick: [{
+                type: HostListener,
+                args: ['click']
+            }], even: [{
+                type: HostBinding,
+                args: [`class.${UIClass.Even}`]
+            }], pointer: [{
+                type: HostBinding,
+                args: [`class.${UIClass.Pointer}`]
+            }] } });
+
+class DefaultTableRowComponent extends BaseDefaultTableContentComponent {
+    get width() {
+        return { width: getCalcValue(this.columnWidth) };
+    }
+    get contentPosition() {
+        switch (this.position) {
+            case Position.Left:
+                return UIConstants.CSS_START;
+            case Position.Right:
+                return UIConstants.CSS_END;
+            default:
+                return UIConstants.CSS_CENTER;
+        }
+    }
+}
+DefaultTableRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DefaultTableRowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DefaultTableRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: DefaultTableRowComponent, selector: "sfc-default-table-row", usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\r\n    <div [ngStyle]=\"width\" [style.text-align]=\"position\" class=\"content-container\" *ngFor=\"let column of columns\">\r\n        <div class=\"content\" [style.align-items]=\"contentPosition\">\r\n            <ng-container [ngSwitch]=\"column.type\">\r\n                <div class=\"checkmark\" #columnCheckmark *ngSwitchCase=\"TableColumnType.Selectable\">\r\n                    <sfc-checkmark [active]=\"model.dataModel.selected || false\"></sfc-checkmark>\r\n                </div>\r\n                <div *ngSwitchCase=\"TableColumnType.Sequence\">\r\n                    <span class=\"name\">{{column.name}}</span>\r\n                    <span>{{model.sequence}}</span>\r\n                </div>\r\n                <div *ngSwitchDefault>\r\n                    <span class=\"name\">{{column.name}}</span>\r\n                    <span>{{model.dataModel.data[column.field]}}</span>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{width:100%;border-radius:1.25em;box-shadow:0 .625em 1em #00000005;transition:background-color .3s,box-shadow .6s cubic-bezier(.25,1,.5,.1);background-color:#f5f7fa}:host.even{background-color:#e6e9ed}:host.even:hover{background-color:#ccd1d9}:host:hover{background-color:#ccd1d9}:host.pointer{cursor:pointer}:host .container{flex-flow:row wrap;padding:0 .31em;display:flex;align-items:center}:host .container .content-container{color:#545e61;font-weight:700;text-overflow:ellipsis;overflow:hidden;-webkit-user-select:none;user-select:none}:host .container .content-container .content{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:.7em .5em}:host .container .content-container .content .name{display:none;font-size:.625em;line-height:.625em;font-weight:700;text-transform:uppercase;color:#656d78}@media all and (max-width: 767px){:host .container{align-items:flex-start}:host .container .content-container .content{align-items:flex-start;padding:.625em 1.25em}:host .container .content-container .content .name{display:block}}\n"], components: [{ type: i1.CheckmarkComponent, selector: "sfc-checkmark", inputs: ["active", "icon"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DefaultTableRowComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-default-table-row', template: "<div class=\"container\">\r\n    <div [ngStyle]=\"width\" [style.text-align]=\"position\" class=\"content-container\" *ngFor=\"let column of columns\">\r\n        <div class=\"content\" [style.align-items]=\"contentPosition\">\r\n            <ng-container [ngSwitch]=\"column.type\">\r\n                <div class=\"checkmark\" #columnCheckmark *ngSwitchCase=\"TableColumnType.Selectable\">\r\n                    <sfc-checkmark [active]=\"model.dataModel.selected || false\"></sfc-checkmark>\r\n                </div>\r\n                <div *ngSwitchCase=\"TableColumnType.Sequence\">\r\n                    <span class=\"name\">{{column.name}}</span>\r\n                    <span>{{model.sequence}}</span>\r\n                </div>\r\n                <div *ngSwitchDefault>\r\n                    <span class=\"name\">{{column.name}}</span>\r\n                    <span>{{model.dataModel.data[column.field]}}</span>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{width:100%;border-radius:1.25em;box-shadow:0 .625em 1em #00000005;transition:background-color .3s,box-shadow .6s cubic-bezier(.25,1,.5,.1);background-color:#f5f7fa}:host.even{background-color:#e6e9ed}:host.even:hover{background-color:#ccd1d9}:host:hover{background-color:#ccd1d9}:host.pointer{cursor:pointer}:host .container{flex-flow:row wrap;padding:0 .31em;display:flex;align-items:center}:host .container .content-container{color:#545e61;font-weight:700;text-overflow:ellipsis;overflow:hidden;-webkit-user-select:none;user-select:none}:host .container .content-container .content{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:.7em .5em}:host .container .content-container .content .name{display:none;font-size:.625em;line-height:.625em;font-weight:700;text-transform:uppercase;color:#656d78}@media all and (max-width: 767px){:host .container{align-items:flex-start}:host .container .content-container .content{align-items:flex-start;padding:.625em 1.25em}:host .container .content-container .content .name{display:block}}\n"] }]
+        }] });
+
+class DefaultTableCardComponent extends BaseDefaultTableContentComponent {
+}
+DefaultTableCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DefaultTableCardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DefaultTableCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: DefaultTableCardComponent, selector: "sfc-default-table-card", usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"content-container\" *ngFor=\"let column of columns\">\r\n        <div class=\"content\">\r\n            <ng-container [ngSwitch]=\"column.type\">\r\n                <div #columnCheckmark *ngSwitchCase=\"TableColumnType.Selectable\">\r\n                    <sfc-checkmark [active]=\"model.dataModel.selected || false\"></sfc-checkmark>\r\n                </div>\r\n                <div *ngSwitchCase=\"TableColumnType.Sequence\">\r\n                    <span class=\"name\">{{column.name}}</span>\r\n                    <span>{{model.sequence}}</span>\r\n                </div>\r\n                <div *ngSwitchDefault>\r\n                    <span class=\"name\">{{column.name}}</span>\r\n                    <span>{{model.dataModel.data[column.field]}}</span>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{box-shadow:0 .625em 1.25em #00000030,0 .3753em .3753em #0000003b;transition:all .2s ease-in-out;border-radius:.75em;background-color:#f5f7fa}:host.even{background-color:#e6e9ed}:host.even:hover{background-color:#ccd1d9}:host:hover{background-color:#ccd1d9}:host.pointer{cursor:pointer}:host .container{flex-flow:column wrap;justify-content:center;width:min-content;display:flex;align-items:center}:host .container .content-container{color:#545e61;font-weight:700;text-overflow:ellipsis;overflow:hidden;-webkit-user-select:none;user-select:none;text-align:center;text-align:left}:host .container .content-container .content{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:.625em 1.25em}:host .container .content-container .content div{width:100%;padding:0 5em}:host .container .content-container .content .name{display:block;font-size:.625em;line-height:.625em;font-weight:700;text-transform:uppercase;color:#656d78}\n"], components: [{ type: i1.CheckmarkComponent, selector: "sfc-checkmark", inputs: ["active", "icon"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DefaultTableCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-default-table-card', template: "<div class=\"container\">\r\n    <div class=\"content-container\" *ngFor=\"let column of columns\">\r\n        <div class=\"content\">\r\n            <ng-container [ngSwitch]=\"column.type\">\r\n                <div #columnCheckmark *ngSwitchCase=\"TableColumnType.Selectable\">\r\n                    <sfc-checkmark [active]=\"model.dataModel.selected || false\"></sfc-checkmark>\r\n                </div>\r\n                <div *ngSwitchCase=\"TableColumnType.Sequence\">\r\n                    <span class=\"name\">{{column.name}}</span>\r\n                    <span>{{model.sequence}}</span>\r\n                </div>\r\n                <div *ngSwitchDefault>\r\n                    <span class=\"name\">{{column.name}}</span>\r\n                    <span>{{model.dataModel.data[column.field]}}</span>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{box-shadow:0 .625em 1.25em #00000030,0 .3753em .3753em #0000003b;transition:all .2s ease-in-out;border-radius:.75em;background-color:#f5f7fa}:host.even{background-color:#e6e9ed}:host.even:hover{background-color:#ccd1d9}:host:hover{background-color:#ccd1d9}:host.pointer{cursor:pointer}:host .container{flex-flow:column wrap;justify-content:center;width:min-content;display:flex;align-items:center}:host .container .content-container{color:#545e61;font-weight:700;text-overflow:ellipsis;overflow:hidden;-webkit-user-select:none;user-select:none;text-align:center;text-align:left}:host .container .content-container .content{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:.625em 1.25em}:host .container .content-container .content div{width:100%;padding:0 5em}:host .container .content-container .content .name{display:block;font-size:.625em;line-height:.625em;font-weight:700;text-transform:uppercase;color:#656d78}\n"] }]
+        }] });
+
+class TableComponent {
+    constructor(window, paginationService, selectedService, sortingService, changeDetector, resizeService, columnsToggleService, iterableDiffers) {
+        this.window = window;
+        this.paginationService = paginationService;
+        this.selectedService = selectedService;
+        this.sortingService = sortingService;
+        this.changeDetector = changeDetector;
+        this.resizeService = resizeService;
+        this.columnsToggleService = columnsToggleService;
+        this.iterableDiffers = iterableDiffers;
+        this.TableDataType = TableDataType;
+        this.TableColumnType = TableColumnType;
+        this.TableTemplate = TableTemplate;
+        this.Constants = TableConstants;
+        this.position = Position.Center;
+        this.delimeter = false;
+        this.dataType = TableDataType.Rows;
+        this.dataToggle = true;
+        this.showColumns = true;
+        this.pagination = { enabled: true, page: TableConstants.DEFAULT_PAGE, size: TableConstants.DEFAULT_PAGE_SIZE };
+        this.sequence = false;
+        this.expanded = false;
+        this.selectable = false;
+        this.selectOnClick = false;
+        // End Template references
+        //Data
+        this.data = [];
+        // End Data
+        // Columns
+        this.columns = [];
+        this.columnsSubject = new BehaviorSubject(this.columns);
+        // End Columns  
+        this.allRowsSelected = false;
+        this.dataDiffer = iterableDiffers.find([]).create(undefined);
+        this.columnsDiffer = iterableDiffers.find([]).create(undefined);
+    }
+    set data$(value) {
+        this._data$ = value;
+        this.paginationService.init(this._data$, this.pagination.page, this.pagination.size);
+    }
+    get data$() {
+        return this._data$;
+    }
+    ngOnInit() {
+        // if data is static, make it observable
+        if (!isDefined(this.data$)) {
+            this.dataSubject = new BehaviorSubject(this.data);
+            this.data$ = this.dataSubject.asObservable();
+        }
+        // set up data models with indexes
+        const dataIndexed$ = this.data$.pipe(map((data) => data.map((dataModel, index) => { return { index, dataModel }; }))), 
+        // set up sorting observable
+        sorting$ = this.getSortingObservable(), 
+        // set up selection observable
+        selection$ = this.selectedService.select$.pipe(startWith(null));
+        // set up columns (conditionally add sequence or selectable columns)
+        this.columns$ = this.columnsSubject.asObservable().pipe(map(columns => {
+            let tableColumns = columns.slice(0);
+            if (this.sequence)
+                tableColumns.unshift(TableConstants.SEQUENCE_COLUMN);
+            if (this.selectable)
+                tableColumns.unshift(TableConstants.SELECTABLE_COLUMN);
+            if (this.expanded)
+                tableColumns.push(TableConstants.EXPANDED_COLUMN);
+            return tableColumns;
+        }));
+        this.columnsSorting$ = combineLatest([this.columns$, sorting$]).pipe(map(([columns, event]) => {
+            columns.forEach(column => {
+                var _a;
+                if ((_a = column.sorting) === null || _a === void 0 ? void 0 : _a.enabled) {
+                    column.sorting.active = column.field == (event === null || event === void 0 ? void 0 : event.id) || false;
+                    if (!column.sorting.active)
+                        column.sorting.direction = SortingDirection.Ascending;
+                }
+            });
+            return columns;
+        }));
+        // set up main data observable
+        this.dataValue$ = combineLatest([
+            dataIndexed$,
+            this.paginationService.pagination$,
+            sorting$,
+            selection$
+        ]).pipe(map(([data, paginationEvent, sortingEvent, selectionEvent]) => {
+            // handle selection
+            this.handleSelectionEvent(data, selectionEvent);
+            // handle pagination and sorting
+            let sortedData = this.sortData(data, sortingEvent), paginatedData = this.paginateData(sortedData, paginationEvent);
+            // handle data sequence  
+            if (this.sequence) {
+                this.updateRowSequenceValues(paginationEvent.page, paginatedData);
+            }
+            return paginatedData;
+        }));
+    }
+    ngAfterViewInit() {
+        // combine all observable to view model
+        this.vm$ = combineLatest([
+            this.columnsSorting$,
+            this.dataValue$,
+            this.columnsToggleService.showColumns$,
+            this.columnWidth$
+        ]).pipe(map(([columns, data, showColumns, columnWidth]) => {
+            return {
+                columns,
+                data,
+                columnWidth,
+                showColumns: this.showColumns && showColumns,
+                columnStyle: { width: getCalcValue(columnWidth), justifyContent: this.position }
+            };
+        }));
+    }
+    ngAfterViewChecked() {
+        this.changeDetector.detectChanges();
+    }
+    ngDoCheck() {
+        if (this.dataDiffer.diff(this.data)) {
+            this.dataSubject.next(this.data);
+        }
+        if (this.columnsDiffer.diff(this.columns)) {
+            this.columnsSubject.next(this.columns);
+        }
+    }
+    ngAfterContentChecked() {
+        this.changeDetector.detectChanges();
+    }
+    ngAfterContentInit() {
+        this.columnWidth$ = combineLatest([
+            this.resizeService.onResize$.pipe(startWith({})),
+            this.columns$
+        ]).pipe(map(([_, columns]) => this.getColumnWidth(this.window.innerWidth, columns.length)));
+    }
+    onDataTypeToggle() {
+        this.dataType = this.dataType == TableDataType.Rows ? TableDataType.Cards : TableDataType.Rows;
+    }
+    selectRow(model) {
+        this.selectedService.select(model.index, model.selected);
+    }
+    getSortingObservable() {
+        var _a;
+        const firstSortingColumn = firstOrDefault(this.columns, column => { var _a; return ((_a = column === null || column === void 0 ? void 0 : column.sorting) === null || _a === void 0 ? void 0 : _a.enabled) || false; });
+        return this.sortingService.sorting$.pipe(startWith(firstSortingColumn ? { id: firstSortingColumn.field, direction: ((_a = firstSortingColumn.sorting) === null || _a === void 0 ? void 0 : _a.direction) || SortingDirection.Ascending } : null));
+    }
+    getColumnWidth(windowWidth, columnsLength) {
+        if (windowWidth <= MediaLimits.Phone)
+            return 1;
+        if (windowWidth <= MediaLimits.Tablet)
+            return Math.ceil(columnsLength / 2);
+        return columnsLength;
+    }
+    handleSelectionEvent(data, selectionEvent) {
+        if (selectionEvent != null) {
+            if (selectionEvent.index == null) {
+                data.forEach(item => item.dataModel.selected = selectionEvent.selected);
+            }
+            else {
+                data.forEach(item => {
+                    if (selectionEvent.index === item.index) {
+                        item.dataModel.selected = selectionEvent.selected;
+                    }
+                });
+            }
+        }
+        this.allRowsSelected = all(data, item => Boolean(item.dataModel.selected));
+    }
+    paginateData(data, paginationEvent) {
+        let pagedData = this.pagination.enabled
+            ? data.slice((paginationEvent.page - 1) * this.pagination.size, paginationEvent.page * this.pagination.size)
+            : data;
+        return pagedData;
+    }
+    sortData(data, sortingEvent) {
+        const sortedData = sortingEvent && hasItemBy(this.columns, col => col.field == sortingEvent.id)
+            ? sortByPath(data, `dataModel.data.${sortingEvent.id}`, sortingEvent.direction)
+            : data;
+        return sortedData;
+    }
+    updateRowSequenceValues(page, data) {
+        let from = (page - 1) * this.pagination.size;
+        data.forEach(item => {
+            item.sequence = from + 1;
+            from++;
+        });
+    }
+}
+TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TableComponent, deps: [{ token: WINDOW }, { token: i1.PaginationService }, { token: TableSelectService }, { token: i1.SortingService }, { token: i0.ChangeDetectorRef }, { token: i1.ResizeService }, { token: ColumnsToggleService }, { token: i0.IterableDiffers }], target: i0.ɵɵFactoryTarget.Component });
+TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: TableComponent, selector: "sfc-table", inputs: { position: "position", delimeter: "delimeter", dataType: "dataType", dataToggle: "dataToggle", showColumns: "showColumns", pagination: "pagination", sequence: "sequence", expanded: "expanded", selectable: "selectable", selectOnClick: "selectOnClick", columnContent: "columnContent", rowContent: "rowContent", cardContent: "cardContent", data: "data", data$: "data$", columns: "columns" }, host: { properties: { "class": "this.dataType" } }, providers: [PaginationService, SortingService, TableSelectService, ColumnsToggleService, ResizeService], queries: [{ propertyName: "templates", predicate: TemplateReferenceDirective, read: TemplateReferenceDirective }], ngImport: i0, template: "<div class=\"container\" *ngIf=\"vm$ | async as vm\">\r\n    <div class=\"columns-container\">\r\n        <div class=\"columns-actions\">\r\n            <sfc-columns-toggle *ngIf=\"showColumns\"></sfc-columns-toggle>\r\n            <sfc-toggle-switcher *ngIf=\"dataToggle\" [active]=\"dataType === TableDataType.Cards\"\r\n                [leftModel]=\"Constants.TOGGLE_SWITCHER_LEFT_MODEL\" [rightModel]=\"Constants.TOGGLE_SWITCHER_RIGHT_MODEL\"\r\n                (click)=\"onDataTypeToggle()\">\r\n            </sfc-toggle-switcher>\r\n        </div>\r\n\r\n        <div *ngIf=\"vm.showColumns\" class=\"columns\">\r\n            <div class=\"column\" [ngStyle]=\"vm.columnStyle\" *ngFor=\"let column of vm.columns\">\r\n                <ng-container [ngSwitch]=\"column.type\">\r\n                    <sfc-selectable-table-column *ngSwitchCase=\"TableColumnType.Selectable\"\r\n                        [selected]=\"allRowsSelected\">\r\n                    </sfc-selectable-table-column>\r\n\r\n                    <sfc-sorting *ngSwitchDefault [model]=\"column.sorting\" [id]=\"column.field\">\r\n\r\n                        <sfc-template-content [referenceContent]=\"columnContent\" [templatesContent]=\"templates\"\r\n                            [templateType]=\"TableTemplate.Column\" [defaultContent]=\"defaultColumn\"\r\n                            [contextData]=\"column\">\r\n                        </sfc-template-content>\r\n\r\n                        <ng-template #defaultColumn>\r\n                            <sfc-default-table-column [model]=\"column\"></sfc-default-table-column>\r\n                        </ng-template>\r\n\r\n                    </sfc-sorting>\r\n                </ng-container>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <sfc-delimeter *ngIf=\"delimeter\"></sfc-delimeter>\r\n\r\n    <div class=\"rows-container\">\r\n        <div class=\"row\" *ngFor=\"let item of vm.data\">\r\n\r\n            <ng-container [ngSwitch]=\"dataType\">\r\n                <sfc-template-content *ngSwitchCase=\"TableDataType.Rows\" [referenceContent]=\"rowContent\"\r\n                    [templatesContent]=\"templates\" [templateType]=\"TableTemplate.Row\" [defaultContent]=\"defaultRow\"\r\n                    [contextData]=\"{model: item, columns: vm.columns, columnWidth: vm.columnWidth, position: position}\">\r\n                </sfc-template-content>\r\n\r\n                <ng-template #defaultRow>\r\n                    <sfc-default-table-row [columns]=\"vm.columns\" [model]=\"item\" [position]=\"position\"\r\n                        [columnWidth]=\"vm.columnWidth\" [selectOnClick]=\"selectOnClick\" (selected)=\"selectRow($event)\">\r\n                    </sfc-default-table-row>\r\n                </ng-template>\r\n\r\n                <sfc-template-content *ngSwitchCase=\"TableDataType.Cards\" [referenceContent]=\"cardContent\"\r\n                    [templatesContent]=\"templates\" [templateType]=\"TableTemplate.Card\" [defaultContent]=\"defaultCard\"\r\n                    [contextData]=\"{model: item, columns: vm.columns}\">\r\n                </sfc-template-content>\r\n\r\n                <ng-template #defaultCard>\r\n                    <sfc-default-table-card [columns]=\"vm.columns\" [model]=\"item\" [selectOnClick]=\"selectOnClick\"\r\n                        (selected)=\"selectRow($event)\">\r\n                    </sfc-default-table-card>\r\n                </ng-template>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"pagination-container\">\r\n        <sfc-pagination *ngIf=\"pagination.enabled\" [limits]=\"false\" [full]=\"false\" [data$]=\"data$\"></sfc-pagination>\r\n    </div>\r\n</div>", styles: [":host .container{display:block;margin:2em auto;width:90%}:host .container .columns-container{display:flex;flex-flow:row wrap;transition:.5s;justify-content:space-between}:host .container .columns-container .columns-actions{display:flex;align-items:center;width:100%}:host .container .columns-container .columns-actions sfc-toggle-switcher{margin-left:auto}:host .container .columns-container .columns{text-align:center;padding:.5em;width:100%;display:flex;flex-flow:row wrap}:host .container .columns-container .columns .column{text-align:center;padding:.5em;display:flex;align-items:center;justify-content:center;box-sizing:border-box}:host .container .rows-container{display:flex;flex-wrap:wrap;justify-content:center;transition:.5s;gap:1em;margin-block:1em 2em}:host .container .rows-container .row{display:contents}\n"], components: [{ type: ColumnsToggleComponent, selector: "sfc-columns-toggle" }, { type: i1.ToggleSwitcherComponent, selector: "sfc-toggle-switcher", inputs: ["active", "leftModel", "rightModel"] }, { type: SelectableTableColumnComponent, selector: "sfc-selectable-table-column", inputs: ["selected"] }, { type: i1.SortingComponent, selector: "sfc-sorting", inputs: ["id", "model"] }, { type: i1.TemplateContentComponent, selector: "sfc-template-content", inputs: ["contextData", "referenceContent", "templateType", "templatesContent", "defaultContent"] }, { type: DefaultTableColumnComponent, selector: "sfc-default-table-column", inputs: ["model"] }, { type: i1.DelimeterComponent, selector: "sfc-delimeter" }, { type: DefaultTableRowComponent, selector: "sfc-default-table-row" }, { type: DefaultTableCardComponent, selector: "sfc-default-table-card" }, { type: i1.PaginationComponent, selector: "sfc-pagination", inputs: ["count", "full", "limits", "data$"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }], pipes: { "async": i2.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-table', providers: [PaginationService, SortingService, TableSelectService, ColumnsToggleService, ResizeService], template: "<div class=\"container\" *ngIf=\"vm$ | async as vm\">\r\n    <div class=\"columns-container\">\r\n        <div class=\"columns-actions\">\r\n            <sfc-columns-toggle *ngIf=\"showColumns\"></sfc-columns-toggle>\r\n            <sfc-toggle-switcher *ngIf=\"dataToggle\" [active]=\"dataType === TableDataType.Cards\"\r\n                [leftModel]=\"Constants.TOGGLE_SWITCHER_LEFT_MODEL\" [rightModel]=\"Constants.TOGGLE_SWITCHER_RIGHT_MODEL\"\r\n                (click)=\"onDataTypeToggle()\">\r\n            </sfc-toggle-switcher>\r\n        </div>\r\n\r\n        <div *ngIf=\"vm.showColumns\" class=\"columns\">\r\n            <div class=\"column\" [ngStyle]=\"vm.columnStyle\" *ngFor=\"let column of vm.columns\">\r\n                <ng-container [ngSwitch]=\"column.type\">\r\n                    <sfc-selectable-table-column *ngSwitchCase=\"TableColumnType.Selectable\"\r\n                        [selected]=\"allRowsSelected\">\r\n                    </sfc-selectable-table-column>\r\n\r\n                    <sfc-sorting *ngSwitchDefault [model]=\"column.sorting\" [id]=\"column.field\">\r\n\r\n                        <sfc-template-content [referenceContent]=\"columnContent\" [templatesContent]=\"templates\"\r\n                            [templateType]=\"TableTemplate.Column\" [defaultContent]=\"defaultColumn\"\r\n                            [contextData]=\"column\">\r\n                        </sfc-template-content>\r\n\r\n                        <ng-template #defaultColumn>\r\n                            <sfc-default-table-column [model]=\"column\"></sfc-default-table-column>\r\n                        </ng-template>\r\n\r\n                    </sfc-sorting>\r\n                </ng-container>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <sfc-delimeter *ngIf=\"delimeter\"></sfc-delimeter>\r\n\r\n    <div class=\"rows-container\">\r\n        <div class=\"row\" *ngFor=\"let item of vm.data\">\r\n\r\n            <ng-container [ngSwitch]=\"dataType\">\r\n                <sfc-template-content *ngSwitchCase=\"TableDataType.Rows\" [referenceContent]=\"rowContent\"\r\n                    [templatesContent]=\"templates\" [templateType]=\"TableTemplate.Row\" [defaultContent]=\"defaultRow\"\r\n                    [contextData]=\"{model: item, columns: vm.columns, columnWidth: vm.columnWidth, position: position}\">\r\n                </sfc-template-content>\r\n\r\n                <ng-template #defaultRow>\r\n                    <sfc-default-table-row [columns]=\"vm.columns\" [model]=\"item\" [position]=\"position\"\r\n                        [columnWidth]=\"vm.columnWidth\" [selectOnClick]=\"selectOnClick\" (selected)=\"selectRow($event)\">\r\n                    </sfc-default-table-row>\r\n                </ng-template>\r\n\r\n                <sfc-template-content *ngSwitchCase=\"TableDataType.Cards\" [referenceContent]=\"cardContent\"\r\n                    [templatesContent]=\"templates\" [templateType]=\"TableTemplate.Card\" [defaultContent]=\"defaultCard\"\r\n                    [contextData]=\"{model: item, columns: vm.columns}\">\r\n                </sfc-template-content>\r\n\r\n                <ng-template #defaultCard>\r\n                    <sfc-default-table-card [columns]=\"vm.columns\" [model]=\"item\" [selectOnClick]=\"selectOnClick\"\r\n                        (selected)=\"selectRow($event)\">\r\n                    </sfc-default-table-card>\r\n                </ng-template>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"pagination-container\">\r\n        <sfc-pagination *ngIf=\"pagination.enabled\" [limits]=\"false\" [full]=\"false\" [data$]=\"data$\"></sfc-pagination>\r\n    </div>\r\n</div>", styles: [":host .container{display:block;margin:2em auto;width:90%}:host .container .columns-container{display:flex;flex-flow:row wrap;transition:.5s;justify-content:space-between}:host .container .columns-container .columns-actions{display:flex;align-items:center;width:100%}:host .container .columns-container .columns-actions sfc-toggle-switcher{margin-left:auto}:host .container .columns-container .columns{text-align:center;padding:.5em;width:100%;display:flex;flex-flow:row wrap}:host .container .columns-container .columns .column{text-align:center;padding:.5em;display:flex;align-items:center;justify-content:center;box-sizing:border-box}:host .container .rows-container{display:flex;flex-wrap:wrap;justify-content:center;transition:.5s;gap:1em;margin-block:1em 2em}:host .container .rows-container .row{display:contents}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: Window, decorators: [{
+                        type: Inject,
+                        args: [WINDOW]
+                    }] }, { type: i1.PaginationService }, { type: TableSelectService }, { type: i1.SortingService }, { type: i0.ChangeDetectorRef }, { type: i1.ResizeService }, { type: ColumnsToggleService }, { type: i0.IterableDiffers }];
+    }, propDecorators: { position: [{
+                type: Input
+            }], delimeter: [{
+                type: Input
+            }], dataType: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class']
+            }], dataToggle: [{
+                type: Input
+            }], showColumns: [{
+                type: Input
+            }], pagination: [{
+                type: Input
+            }], sequence: [{
+                type: Input
+            }], expanded: [{
+                type: Input
+            }], selectable: [{
+                type: Input
+            }], selectOnClick: [{
+                type: Input
+            }], columnContent: [{
+                type: Input
+            }], rowContent: [{
+                type: Input
+            }], cardContent: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], data$: [{
+                type: Input
+            }], columns: [{
+                type: Input
+            }], templates: [{
+                type: ContentChildren,
+                args: [TemplateReferenceDirective, { read: TemplateReferenceDirective }]
+            }] } });
+
+var ExpandedTableRowTemplate;
+(function (ExpandedTableRowTemplate) {
+    ExpandedTableRowTemplate["Row"] = "row";
+    ExpandedTableRowTemplate["Content"] = "content";
+})(ExpandedTableRowTemplate || (ExpandedTableRowTemplate = {}));
+
+class ExpandedTableRowComponent extends BaseDefaultTableContentComponent {
+    constructor() {
+        super(...arguments);
+        this.ExpandedTemplate = ExpandedTableRowTemplate;
+        this.expanded = false;
+    }
+    get contextData() {
+        return {
+            model: this.model,
+            columns: this.columns,
+            columnWidth: Math.max(1, this.columnWidth),
+            position: this.position,
+            expanded: this.expanded,
+            even: this.even
+        };
+    }
+}
+ExpandedTableRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ExpandedTableRowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+ExpandedTableRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: ExpandedTableRowComponent, selector: "sfc-expanded-table-row", inputs: { expanded: "expanded", row: "row", content: "content" }, host: { properties: { "class.expanded": "this.expanded" } }, queries: [{ propertyName: "templates", predicate: TemplateReferenceDirective, read: TemplateReferenceDirective }], usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"content\" (click)=\"expanded = !expanded\">\r\n        <sfc-template-content [referenceContent]=\"row\" [templatesContent]=\"templates\"\r\n            [templateType]=\"ExpandedTemplate.Row\" [contextData]=\"contextData\">\r\n        </sfc-template-content>\r\n    </div>\r\n    <div class=\"expanded\">\r\n        <sfc-template-content [referenceContent]=\"content\" [templatesContent]=\"templates\"\r\n            [templateType]=\"ExpandedTemplate.Content\" [contextData]=\"contextData\">\r\n        </sfc-template-content>\r\n    </div>\r\n</div>", styles: [":host{width:100%;cursor:pointer;-webkit-user-select:none;user-select:none}:host .expanded{max-height:0;overflow:hidden}:host.expanded .expanded{max-height:3000px}\n"], components: [{ type: i1.TemplateContentComponent, selector: "sfc-template-content", inputs: ["contextData", "referenceContent", "templateType", "templatesContent", "defaultContent"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ExpandedTableRowComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-expanded-table-row', template: "<div class=\"container\">\r\n    <div class=\"content\" (click)=\"expanded = !expanded\">\r\n        <sfc-template-content [referenceContent]=\"row\" [templatesContent]=\"templates\"\r\n            [templateType]=\"ExpandedTemplate.Row\" [contextData]=\"contextData\">\r\n        </sfc-template-content>\r\n    </div>\r\n    <div class=\"expanded\">\r\n        <sfc-template-content [referenceContent]=\"content\" [templatesContent]=\"templates\"\r\n            [templateType]=\"ExpandedTemplate.Content\" [contextData]=\"contextData\">\r\n        </sfc-template-content>\r\n    </div>\r\n</div>", styles: [":host{width:100%;cursor:pointer;-webkit-user-select:none;user-select:none}:host .expanded{max-height:0;overflow:hidden}:host.expanded .expanded{max-height:3000px}\n"] }]
+        }], propDecorators: { expanded: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.' + UIClass.Expanded]
+            }], row: [{
+                type: Input
+            }], content: [{
+                type: Input
+            }], templates: [{
+                type: ContentChildren,
+                args: [TemplateReferenceDirective, { read: TemplateReferenceDirective }]
+            }] } });
+
+var CarouselProperty;
+(function (CarouselProperty) {
+    CarouselProperty["Position"] = "position";
+    CarouselProperty["Settings"] = "settings";
+    CarouselProperty["Width"] = "width";
+    CarouselProperty["Items"] = "items";
+})(CarouselProperty || (CarouselProperty = {}));
+;
+var CarouselState;
+(function (CarouselState) {
+    CarouselState["Busy"] = "busy";
+    CarouselState["Interacting"] = "interacting";
+    CarouselState["Rotating"] = "rotating";
+})(CarouselState || (CarouselState = {}));
+;
+var CarouselEventType;
+(function (CarouselEventType) {
+    CarouselEventType["Initializing"] = "initializing";
+    CarouselEventType["Initialized"] = "initialized";
+    CarouselEventType["Change"] = "change";
+    CarouselEventType["Changed"] = "changed";
+    CarouselEventType["Resize"] = "resize";
+    CarouselEventType["Resizing"] = "resizing";
+    CarouselEventType["Resized"] = "resized";
+    CarouselEventType["Refresh"] = "refresh";
+    CarouselEventType["Refreshed"] = "refreshed";
+    CarouselEventType["Translate"] = "translate";
+    CarouselEventType["Translated"] = "translated";
+    CarouselEventType["Animating"] = "animating";
+    CarouselEventType["Refreshing"] = "refreshing";
+})(CarouselEventType || (CarouselEventType = {}));
+;
+
+let nextId = 0;
+/* eslint-disable */
+class CarouselSlideDirective {
+    constructor(tplRef) {
+        this.tplRef = tplRef;
+        this.id = `slide-${nextId++}`;
+        this._dataMerge = 1;
+        this.width = 0;
+    }
+    set dataMerge(data) {
+        this._dataMerge = isNumeric(data) ? data : 1;
+    }
+    ;
+    get dataMerge() { return this._dataMerge; }
+}
+CarouselSlideDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CarouselSlideDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+CarouselSlideDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: CarouselSlideDirective, selector: "ng-template[sfcCarouselSlide]", inputs: { id: "id", dataMerge: "dataMerge", width: "width" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CarouselSlideDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[sfcCarouselSlide]' }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; }, propDecorators: { id: [{
+                type: Input
+            }], dataMerge: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }] } });
+
+class CarouselServiceConstants {
+}
+CarouselServiceConstants.CLONE_ID_PREFIX = 'cloned-';
+CarouselServiceConstants.DEFAULT_OPTIONS = {
+    items: 3,
+    skip_validateItems: false,
+    loop: false,
+    center: false,
+    rewind: false,
+    margin: 0,
+    stagePadding: 0,
+    merge: false,
+    mergeFit: true,
+    autoWidth: false,
+    startPosition: 0,
+    rtl: false,
+    responsive: {},
+    responsiveRefreshRate: 200,
+    // defaults to Navigation
+    nav: false,
+    navText: ['prev', 'next'],
+    navSpeed: false,
+    slideBy: 1,
+    dots: true,
+    dotsEach: false,
+    navigationDotsModel: false,
+    dotsSpeed: false,
+    // defaults to Autoplay
+    autoplay: false,
+    autoplayTimeout: 5000,
+    autoplayHoverPause: false,
+    autoplaySpeed: false,
+    autoplayMouseleaveTimeout: 1,
+    // defaults to LazyLoading
+    lazyLoad: false,
+    lazyLoadEager: 0,
+    // defaults to Animate
+    slideTransition: '',
+    animateOut: false,
+    animateIn: false,
+    // defaults to AutoHeight
+    autoHeight: false
+};
+
+var Type;
+(function (Type) {
+    Type["Event"] = "event";
+    Type["State"] = "state";
+})(Type || (Type = {}));
+;
+var Width;
+(function (Width) {
+    Width["Default"] = "default";
+    Width["Inner"] = "inner";
+    Width["Outer"] = "outer";
+})(Width || (Width = {}));
+;
+
+class CarouselService {
+    constructor() {
+        this._viewSettingsShipper$ = new Subject();
+        this._initializedCarousel$ = new Subject();
+        this._changeSettingsCarousel$ = new Subject();
+        this._changedSettingsCarousel$ = new Subject();
+        this._translateCarousel$ = new Subject();
+        this._translatedCarousel$ = new Subject();
+        this._resizeCarousel$ = new Subject();
+        this._resizedCarousel$ = new Subject();
+        this._refreshCarousel$ = new Subject();
+        this._refreshedCarousel$ = new Subject();
+        this.carouselDOMModel = {
+            rtl: false,
+            isResponsive: false,
+            isRefreshed: false,
+            isLoaded: false,
+            isLoading: false
+        };
+        this.stageModel = {
+            transform: 'translate3d(0px,0px,0px)',
+            transition: '0s',
+            width: 0,
+            paddingL: 0,
+            paddingR: 0
+        };
+        this._items = [];
+        this._widths = [];
+        this._supress = {};
+        this._current = null;
+        this._clones = [];
+        this._mergers = [];
+        this._speed = null;
+        this._coordinates = [];
+        this._invalidated = {};
+        this._states = {
+            current: {},
+            tags: {
+                initializing: [CarouselState.Busy],
+                animating: [CarouselState.Busy]
+            }
+        };
+        this._pipe = [
+            {
+                filter: [CarouselProperty.Width, CarouselProperty.Items, CarouselProperty.Settings],
+                run: (cache) => {
+                    cache.current = this._items && this._items[this.relative(this._current || 0)].id;
+                }
+            },
+            {
+                filter: [CarouselProperty.Width, CarouselProperty.Items, CarouselProperty.Settings],
+                run: (cache) => {
+                    const margin = this.settings.margin || CommonConstants.EMPTY_STRING, grid = !this.settings.autoWidth, rtl = this.settings.rtl, css = {
+                        'margin-left': rtl ? margin : CommonConstants.EMPTY_STRING,
+                        'margin-right': rtl ? CommonConstants.EMPTY_STRING : margin
+                    };
+                    if (!grid) {
+                        this.slidesModel.forEach(slide => {
+                            slide.marginL = css['margin-left'];
+                            slide.marginR = css['margin-right'];
+                        });
+                    }
+                    cache.css = css;
+                }
+            }, {
+                filter: [CarouselProperty.Width, CarouselProperty.Items, CarouselProperty.Settings],
+                run: (cache) => {
+                    const width = +(this.width() / (this.settings.items || 0)).toFixed(3) - (this.settings.margin || 0), grid = !this.settings.autoWidth, widths = [];
+                    let merge = null, iterator = this._items.length;
+                    cache.items = {
+                        merge: false,
+                        width: width
+                    };
+                    while (iterator--) {
+                        merge = this._mergers[iterator];
+                        merge = this.settings.mergeFit && Math.min(merge, (this.settings.items || 0)) || merge;
+                        cache.items.merge = merge > 1 || cache.items.merge;
+                        widths[iterator] = !grid ? this._items[iterator].width ? this._items[iterator].width : width : width * merge;
+                    }
+                    this._widths = widths;
+                    this.slidesModel.forEach((slide, i) => {
+                        slide.width = this._widths[i];
+                        slide.marginR = cache.css['margin-right'];
+                        slide.marginL = cache.css['margin-left'];
+                    });
+                }
+            }, {
+                filter: [CarouselProperty.Items, CarouselProperty.Settings],
+                run: () => {
+                    const clones = [], items = this._items, settings = this.settings, view = Math.max(settings.items * 2, 4), size = Math.ceil(items.length / 2) * 2;
+                    let append = [], prepend = [], repeat = settings.loop && items.length ? settings.rewind ? view : Math.max(view, size) : 0;
+                    repeat /= 2;
+                    while (repeat--) {
+                        clones.push(this.normalize(clones.length / 2, true));
+                        append.push(Object.assign({}, this.slidesModel[clones[clones.length - 1]]));
+                        clones.push(this.normalize(items.length - 1 - (clones.length - 1) / 2, true));
+                        prepend.unshift(Object.assign({}, this.slidesModel[clones[clones.length - 1]]));
+                    }
+                    this._clones = clones;
+                    append = append.map(slide => {
+                        slide.id = `${CarouselServiceConstants.CLONE_ID_PREFIX}${slide.id}`;
+                        slide.isActive = false;
+                        slide.isCloned = true;
+                        return slide;
+                    });
+                    prepend = prepend.map(slide => {
+                        slide.id = `${CarouselServiceConstants.CLONE_ID_PREFIX}${slide.id}`;
+                        slide.isActive = false;
+                        slide.isCloned = true;
+                        return slide;
+                    });
+                    this.slidesModel = prepend.concat(this.slidesModel).concat(append);
+                }
+            }, {
+                filter: [CarouselProperty.Width, CarouselProperty.Items, CarouselProperty.Settings],
+                run: () => {
+                    const rtl = this.settings.rtl ? 1 : -1, size = this._clones.length + this._items.length, coordinates = [];
+                    let iterator = -1, previous = 0, current = 0;
+                    while (++iterator < size) {
+                        previous = coordinates[iterator - 1] || 0;
+                        current = this._widths[this.relative(iterator)] + this.settings.margin;
+                        coordinates.push(previous + current * rtl);
+                    }
+                    this._coordinates = coordinates;
+                }
+            }, {
+                filter: [CarouselProperty.Width, CarouselProperty.Items, CarouselProperty.Settings],
+                run: () => {
+                    const padding = this.settings.stagePadding || 0, coordinates = this._coordinates, css = {
+                        'width': Math.ceil(Math.abs(coordinates[coordinates.length - 1])) + padding * 2,
+                        'padding-left': padding || '',
+                        'padding-right': padding || ''
+                    };
+                    this.stageModel.width = css.width;
+                    this.stageModel.paddingR = css['padding-right'];
+                }
+            }, {
+                filter: [CarouselProperty.Width, CarouselProperty.Items, CarouselProperty.Settings],
+                run: (cache) => {
+                    let current = cache.current ? this.slidesModel.findIndex(slide => slide.id === cache.current) : 0;
+                    current = Math.max(this.minimum(), Math.min(this.maximum(), current));
+                    this.reset(current);
+                }
+            }, {
+                filter: [CarouselProperty.Position],
+                run: () => {
+                    this.animate(this.coordinates(this._current));
+                }
+            }, {
+                filter: [CarouselProperty.Width, CarouselProperty.Position, CarouselProperty.Items, CarouselProperty.Settings],
+                run: () => {
+                    const rtl = this.settings.rtl ? 1 : -1, padding = (this.settings.stagePadding || 0) * 2, matches = [];
+                    let begin, end, inner, outer, i, n;
+                    begin = this.coordinates(this.current());
+                    if (typeof begin === 'number') {
+                        begin += padding;
+                    }
+                    else {
+                        begin = 0;
+                    }
+                    end = begin + this.width() * rtl;
+                    if (rtl === -1 && this.settings.center) {
+                        const result = this._coordinates.filter(element => {
+                            return (this.settings.items || 0) % 2 === 1 ? element >= begin : element > begin;
+                        });
+                        begin = result.length ? result[result.length - 1] : begin;
+                    }
+                    for (i = 0, n = this._coordinates.length; i < n; i++) {
+                        inner = Math.ceil(this._coordinates[i - 1] || 0);
+                        outer = Math.ceil(Math.abs(this._coordinates[i]) + padding * rtl);
+                        if ((this.op(inner, '<=', begin) && (this.op(inner, '>', end)))
+                            || (this.op(outer, '<', begin) && this.op(outer, '>', end))) {
+                            matches.push(i);
+                        }
+                    }
+                    this.slidesModel.forEach(slide => {
+                        slide.isActive = false;
+                        return slide;
+                    });
+                    matches.forEach(item => {
+                        this.slidesModel[item].isActive = true;
+                    });
+                    if (this.settings.center) {
+                        this.slidesModel.forEach(slide => {
+                            slide.isCentered = false;
+                            return slide;
+                        });
+                        const currentValue = this.current();
+                        if (currentValue)
+                            this.slidesModel[currentValue].isCentered = true;
+                    }
+                }
+            }
+        ];
+        this.settings = {
+            items: 0
+        };
+        this.options = {};
+    }
+    get viewCurrrentSettings() {
+        return this._viewSettingsShipper$.asObservable();
+    }
+    get initializedState() {
+        return this._initializedCarousel$.asObservable();
+    }
+    get changeState() {
+        return this._changeSettingsCarousel$.asObservable();
+    }
+    get changedState() {
+        return this._changedSettingsCarousel$.asObservable();
+    }
+    get translateState() {
+        return this._translateCarousel$.asObservable();
+    }
+    get translatedState() {
+        return this._translatedCarousel$.asObservable();
+    }
+    get resizeState() {
+        return this._resizeCarousel$.asObservable();
+    }
+    get resizedState() {
+        return this._resizedCarousel$.asObservable();
+    }
+    get refreshState() {
+        return this._refreshCarousel$.asObservable();
+    }
+    get refreshedState() {
+        return this._refreshedCarousel$.asObservable();
+    }
+    setup(carouselWidth, slides, options) {
+        this.setCarouselWidth(carouselWidth);
+        this.setItems(slides);
+        this.defineSlidesData();
+        this.setOptions(options);
+        this.settings = Object.assign({}, this.options);
+        this.setOptionsForViewport();
+        this.trigger(CarouselEventType.Change, { property: { name: CarouselProperty.Settings, value: this.settings } });
+        this.invalidate(CarouselProperty.Settings);
+        this.trigger(CarouselEventType.Changed, { property: { name: CarouselProperty.Settings, value: this.settings } });
+    }
+    initialize(slides) {
+        this.enter(CarouselEventType.Initializing);
+        this.carouselDOMModel.rtl = this.settings.rtl || false;
+        if (this._mergers.length) {
+            this._mergers = [];
+        }
+        slides.forEach(item => {
+            const mergeN = this.settings.merge ? item.dataMerge : 1;
+            this._mergers.push(mergeN);
+        });
+        this._clones = [];
+        this.reset(isNumeric(this.settings.startPosition) ? +(this.settings.startPosition || 0) : 0);
+        this.invalidate(CarouselProperty.Items);
+        this.refresh();
+        this.carouselDOMModel.isLoaded = true;
+        this.sendChanges();
+        this.leave(CarouselEventType.Initializing);
+        this.trigger(CarouselEventType.Initialized);
+    }
+    ;
+    sendChanges() {
+        this._viewSettingsShipper$.next({
+            carouselDOMModel: this.carouselDOMModel,
+            stageModel: this.stageModel,
+            slidesModel: this.slidesModel,
+            navigationModel: this.navigationModel,
+            navigationDotsModel: this.navigationDotsModel
+        });
+    }
+    onResize(curWidth) {
+        if (this._items.length) {
+            this.setCarouselWidth(curWidth);
+            this.enter(CarouselEventType.Resizing);
+            this.trigger(CarouselEventType.Resize);
+            this.invalidate(CarouselProperty.Width);
+            this.refresh();
+            this.leave(CarouselEventType.Resizing);
+            this.trigger(CarouselEventType.Resized);
+        }
+    }
+    is(state) {
+        return this._states.current[state] && this._states.current[state] > 0;
+    }
+    ;
+    current(position) {
+        if (position === undefined) {
+            return this._current;
+        }
+        if (this._items.length === 0) {
+            return undefined;
+        }
+        position = this.normalize(position);
+        if (this._current !== position) {
+            this.trigger(CarouselEventType.Change, { property: { name: CarouselProperty.Position, value: position } });
+            this._current = position;
+            this.invalidate(CarouselProperty.Position);
+            this.trigger(CarouselEventType.Changed, { property: { name: CarouselProperty.Position, value: this._current } });
+        }
+        return this._current;
+    }
+    relative(position) {
+        position -= this._clones.length / 2;
+        return this.normalize(position, true);
+    }
+    maximum(relative = false) {
+        const settings = this.settings;
+        let maximum = this._coordinates.length, iterator, reciprocalItemsWidth, elementWidth;
+        if (settings.loop) {
+            maximum = this._clones.length / 2 + this._items.length - 1;
+        }
+        else if (settings.autoWidth || settings.merge) {
+            iterator = this._items.length;
+            reciprocalItemsWidth = this.slidesModel[--iterator].width;
+            elementWidth = this._width;
+            while (iterator--) {
+                reciprocalItemsWidth += +this.slidesModel[iterator].width + (this.settings.margin || 0).toString();
+                if (reciprocalItemsWidth > elementWidth) {
+                    break;
+                }
+            }
+            maximum = iterator + 1;
+        }
+        else if (settings.center) {
+            maximum = this._items.length - 1;
+        }
+        else {
+            maximum = this._items.length - (settings.items || 0);
+        }
+        if (relative) {
+            maximum -= this._clones.length / 2;
+        }
+        return Math.max(maximum, 0);
+    }
+    minimum(relative = false) {
+        return relative ? 0 : this._clones.length / 2;
+    }
+    items(position) {
+        if (position === undefined) {
+            return this._items.slice();
+        }
+        position = this.normalize(position, true);
+        return [this._items[position]];
+    }
+    mergers(position) {
+        if (position === undefined) {
+            return this._mergers.slice();
+        }
+        position = this.normalize(position, true);
+        return this._mergers[position];
+    }
+    clones(position) {
+        const odd = this._clones.length / 2, even = odd + this._items.length, map = (index) => index % 2 === 0 ? even + index / 2 : odd - (index + 1) / 2;
+        if (position === undefined) {
+            return this._clones.map((v, i) => map(i));
+        }
+        return this._clones.map((v, i) => v === position ? map(i) : null).filter(item => item);
+    }
+    speed(speed) {
+        if (speed !== undefined) {
+            this._speed = speed;
+        }
+        return this._speed || 0;
+    }
+    coordinates(position) {
+        let multiplier = 1, newPosition = (position || 0) - 1, coordinate, result;
+        if (position === undefined) {
+            result = this._coordinates.map((_, index) => {
+                return this.coordinates(index);
+            });
+            return result;
+        }
+        if (this.settings.center) {
+            if (this.settings.rtl) {
+                multiplier = -1;
+                newPosition = (position || 0) + 1;
+            }
+            coordinate = this._coordinates[(position || 0)];
+            coordinate += (this.width() - coordinate + (this._coordinates[newPosition] || 0)) / 2 * multiplier;
+        }
+        else {
+            coordinate = this._coordinates[newPosition] || 0;
+        }
+        coordinate = Math.ceil(coordinate);
+        return coordinate;
+    }
+    to(position, speed) {
+        let current = this.current(), revert = null, distance = position - this.relative(current || 0), maximum = this.maximum(), delayForLoop = 0;
+        const direction = +(distance > 0) - +(distance < 0), items = this._items.length, minimum = this.minimum();
+        if (this.settings.loop) {
+            if (!this.settings.rewind && Math.abs(distance) > items / 2) {
+                distance += direction * -1 * items;
+            }
+            position = (current || 0) + distance;
+            revert = ((position - minimum) % items + items) % items + minimum;
+            if (revert !== position && revert - distance <= maximum && revert - distance > 0) {
+                current = revert - distance;
+                position = revert;
+                delayForLoop = 30;
+                this.reset(current);
+                this.sendChanges();
+            }
+        }
+        else if (this.settings.rewind) {
+            maximum += 1;
+            position = (position % maximum + maximum) % maximum;
+        }
+        else {
+            position = Math.max(minimum, Math.min(maximum, position));
+        }
+        setTimeout(() => {
+            this.speed(this.duration(current || 0, position, speed));
+            this.current(position);
+            this.update();
+        }, delayForLoop);
+    }
+    next(speed) {
+        speed = speed || false;
+        this.to(this.relative(this.current() || 0) + 1, speed);
+    }
+    previous(speed) {
+        speed = speed || false;
+        this.to(this.relative(this.current() || 0) - 1, speed);
+    }
+    onTransitionEnd(event) {
+        if (!event) {
+            this.leave(CarouselEventType.Animating);
+            this.trigger(CarouselEventType.Translated);
+        }
+    }
+    setCurrentSlideClasses(slide) {
+        const currentClasses = {
+            'active': slide.isActive || false,
+            'center': slide.isCentered || false,
+            'cloned': slide.isCloned || false,
+            'animated': slide.isAnimated || false,
+            'animated-in': slide.isDefAnimatedIn || false,
+            'animated-out': slide.isDefAnimatedOut || false
+        };
+        if (this.settings.animateIn) {
+            currentClasses[this.settings.animateIn] = slide.isCustomAnimatedIn || false;
+        }
+        if (this.settings.animateOut) {
+            currentClasses[this.settings.animateOut] = slide.isCustomAnimatedOut || false;
+        }
+        return currentClasses;
+    }
+    enter(name) {
+        [name].concat(this._states.tags[name] || []).forEach((stateName) => {
+            if (this._states.current[stateName] === undefined) {
+                this._states.current[stateName] = 0;
+            }
+            this._states.current[stateName]++;
+        });
+    }
+    ;
+    leave(name) {
+        [name].concat(this._states.tags[name] || []).forEach((stateName) => {
+            if (this._states.current[stateName] === 0 || !!this._states.current[stateName]) {
+                this._states.current[stateName]--;
+            }
+        });
+    }
+    ;
+    setOptions(options) {
+        this.options = Object.assign(Object.assign({}, CarouselServiceConstants.DEFAULT_OPTIONS), options);
+    }
+    validateItems(items, skip_validateItems) {
+        let result = items;
+        if (items > this._items.length && !skip_validateItems) {
+            result = this._items.length;
+        }
+        return result;
+    }
+    setCarouselWidth(width) {
+        this._width = width;
+    }
+    setOptionsForViewport() {
+        const viewport = this._width, overwrites = this.options.responsive || {};
+        let match = -1;
+        if (!Object.keys(overwrites).length) {
+            return;
+        }
+        if (!viewport) {
+            this.settings.items = 1;
+            return;
+        }
+        for (const key in overwrites) {
+            if (overwrites.hasOwnProperty(key)) {
+                if (+key <= viewport && +key > match) {
+                    match = Number(key);
+                }
+            }
+        }
+        this.settings = Object.assign(Object.assign(Object.assign({}, this.options), overwrites[match]), { items: (overwrites[match] && overwrites[match].items) ? this.validateItems(overwrites[match].items || 0, this.options.skip_validateItems || false) : this.options.items });
+        delete this.settings.responsive;
+        this.carouselDOMModel.isResponsive = true;
+        const mergers = [];
+        this._items.forEach(item => {
+            const mergeN = this.settings.merge ? item.dataMerge : 1;
+            mergers.push(mergeN);
+        });
+        this._mergers = mergers;
+        this.invalidate(CarouselProperty.Settings);
+    }
+    optionsLogic() {
+        if (this.settings.autoWidth) {
+            this.settings.stagePadding = 0;
+            this.settings.merge = false;
+        }
+    }
+    update() {
+        let i = 0;
+        const n = this._pipe.length, filter = (item) => this._invalidated[item], cache = {};
+        while (i < n) {
+            const filteredPipe = this._pipe[i].filter.filter(filter);
+            if (this._invalidated.all || filteredPipe.length > 0) {
+                this._pipe[i].run(cache);
+            }
+            i++;
+        }
+        this.slidesModel.forEach(slide => slide.classes = this.setCurrentSlideClasses(slide));
+        this.sendChanges();
+        this._invalidated = {};
+        if (!this.is('valid')) {
+            this.enter('valid');
+        }
+    }
+    width(dimension) {
+        dimension = dimension || Width.Default;
+        switch (dimension) {
+            case Width.Inner:
+            case Width.Outer:
+                return this._width;
+            default:
+                return this._width - (this.settings.stagePadding || 0) * 2 + (this.settings.margin || 0);
+        }
+    }
+    refresh() {
+        this.enter(CarouselEventType.Refreshing);
+        this.trigger(CarouselEventType.Refresh);
+        this.defineSlidesData();
+        this.setOptionsForViewport();
+        this.optionsLogic();
+        this.update();
+        this.leave(CarouselEventType.Refreshing);
+        this.trigger(CarouselEventType.Refreshed);
+    }
+    animate(coordinate) {
+        const animate = this.speed() > 0;
+        if (this.is(CarouselEventType.Animating)) {
+            this.onTransitionEnd();
+        }
+        if (animate) {
+            this.enter(CarouselEventType.Animating);
+            this.trigger(CarouselEventType.Translate);
+        }
+        this.stageModel.transform = 'translate3d(' + coordinate + 'px,0px,0px)';
+        this.stageModel.transition = (this.speed() / 1000) + 's' + (this.settings.slideTransition ? ' ' + this.settings.slideTransition : '');
+    }
+    invalidate(part) {
+        if (typeof part === 'string') {
+            this._invalidated[part] = true;
+            if (this.is('valid')) {
+                this.leave('valid');
+            }
+        }
+        return Object.keys(this._invalidated);
+    }
+    ;
+    reset(position) {
+        position = this.normalize(position);
+        if (position === undefined) {
+            return;
+        }
+        this._speed = 0;
+        this._current = position;
+        this.suppress([CarouselEventType.Translate, CarouselEventType.Translated]);
+        this.animate(this.coordinates(position));
+        this.release([CarouselEventType.Translate, CarouselEventType.Translated]);
+    }
+    normalize(position, relative) {
+        const n = this._items.length, m = relative ? 0 : this._clones.length;
+        if (!isNumeric(position) || n < 1) {
+            position = 0;
+        }
+        else if (position < 0 || position >= n + m) {
+            position = ((position - m / 2) % n + n) % n + m / 2;
+        }
+        return position;
+    }
+    duration(from, to, factor) {
+        if (factor === 0) {
+            return 0;
+        }
+        return Math.min(Math.max(Math.abs(to - from), 1), 6) * Math.abs((+factor));
+    }
+    setItems(content) {
+        this._items = content;
+    }
+    defineSlidesData() {
+        let loadMap;
+        if (this.slidesModel && this.slidesModel.length) {
+            loadMap = new Map();
+            this.slidesModel.forEach(item => {
+                if (item.load) {
+                    loadMap.set(item.id, item.load);
+                }
+            });
+        }
+        this.slidesModel = this._items.map(slide => {
+            return {
+                id: `${slide.id}`,
+                isActive: false,
+                tplRef: slide.tplRef,
+                dataMerge: slide.dataMerge,
+                width: 0,
+                isCloned: false,
+                load: loadMap ? loadMap.get(slide.id) : false,
+                classes: {}
+            };
+        });
+    }
+    op(a, o, b) {
+        const rtl = this.settings.rtl;
+        switch (o) {
+            case '<':
+                return rtl ? a > b : a < b;
+            case '>':
+                return rtl ? a < b : a > b;
+            case '>=':
+                return rtl ? a <= b : a >= b;
+            case '<=':
+                return rtl ? a >= b : a <= b;
+            default:
+                return false;
+        }
+    }
+    trigger(name, data) {
+        switch (name) {
+            case CarouselEventType.Initialized:
+                this._initializedCarousel$.next(name);
+                break;
+            case CarouselEventType.Change:
+                this._changeSettingsCarousel$.next(data);
+                break;
+            case CarouselEventType.Changed:
+                this._changedSettingsCarousel$.next(data);
+                break;
+            case CarouselEventType.Resize:
+                this._resizeCarousel$.next(name);
+                break;
+            case CarouselEventType.Resized:
+                this._resizedCarousel$.next(name);
+                break;
+            case CarouselEventType.Refresh:
+                this._refreshCarousel$.next(name);
+                break;
+            case CarouselEventType.Refreshed:
+                this._refreshedCarousel$.next(name);
+                break;
+            case CarouselEventType.Translate:
+                this._translateCarousel$.next(name);
+                break;
+            case CarouselEventType.Translated:
+                this._translatedCarousel$.next(name);
+                break;
+            default:
+                break;
+        }
+    }
+    suppress(events) {
+        events.forEach(event => {
+            this._supress[event] = true;
+        });
+    }
+    release(events) {
+        events.forEach(event => {
+            delete this._supress[event];
+        });
+    }
+}
+CarouselService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CarouselService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+CarouselService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CarouselService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CarouselService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class CarouselAnimateService {
+    constructor(carouselService) {
+        this.carouselService = carouselService;
+        this.swapping = true;
+        this.next = undefined;
+        this.initDataStreams();
+    }
+    ngOnDestroy() {
+        this.animateSubscription.unsubscribe();
+    }
+    initDataStreams() {
+        const changeSettings$ = this.carouselService.changeState.pipe(tap(data => {
+            if (data.property.name === CarouselProperty.Position) {
+                this.previous = this.carouselService.current();
+                this.next = data.property.value;
+            }
+        }));
+        const translateCarousel$ = this.carouselService.translateState.pipe(tap(() => {
+            if (this.swapping && (this.carouselService.options.animateOut || this.carouselService.options.animateIn)) {
+                this.swap();
+            }
+        }));
+        this.animateSubscription = merge(changeSettings$, translateCarousel$).subscribe();
+    }
+    swap() {
+        if (this.carouselService.settings.items !== 1)
+            return;
+        this.carouselService.speed(0);
+        let left;
+        const previous = this.carouselService.slidesModel[this.previous || 0], next = this.carouselService.slidesModel[this.next || 0], incoming = this.carouselService.settings.animateIn, outgoing = this.carouselService.settings.animateOut;
+        if (this.carouselService.current() === this.previous)
+            return;
+        if (outgoing) {
+            left = +this.carouselService.coordinates(this.previous) - +this.carouselService.coordinates(this.next);
+            this.carouselService.slidesModel.forEach(slide => {
+                if (slide.id === previous.id) {
+                    slide.left = getCssLikeValue(left);
+                    slide.isAnimated = true;
+                    slide.isDefAnimatedOut = true;
+                    slide.isCustomAnimatedOut = true;
+                }
+            });
+        }
+        if (incoming) {
+            this.carouselService.slidesModel.forEach(slide => {
+                if (slide.id === next.id) {
+                    slide.isAnimated = true;
+                    slide.isDefAnimatedIn = true;
+                    slide.isCustomAnimatedIn = true;
+                }
+            });
+        }
+    }
+    ;
+    clear(id) {
+        this.carouselService.slidesModel.forEach(slide => {
+            if (slide.id === id) {
+                slide.left = CommonConstants.EMPTY_STRING;
+                slide.isAnimated = false;
+                slide.isDefAnimatedOut = false;
+                slide.isCustomAnimatedOut = false;
+                slide.isDefAnimatedIn = false;
+                slide.isCustomAnimatedIn = false;
+                slide.classes = this.carouselService.setCurrentSlideClasses(slide);
+            }
+        });
+        this.carouselService.onTransitionEnd();
+    }
+    ;
+}
+CarouselAnimateService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CarouselAnimateService, deps: [{ token: CarouselService }], target: i0.ɵɵFactoryTarget.Injectable });
+CarouselAnimateService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CarouselAnimateService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CarouselAnimateService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: CarouselService }]; } });
+
+class CarouselAutoplayService {
+    constructor(carouselService, winRef, docRef) {
+        this.carouselService = carouselService;
+        this.timeout = 0;
+        this.paused = false;
+        this.isArtificialAutoplayTimeout = false;
+        this._isAutoplayStopped = false;
+        this.winRef = winRef;
+        this.docRef = docRef;
+        this.initDataStreams();
+    }
+    get isAutoplayStopped() {
+        return this._isAutoplayStopped;
+    }
+    set isAutoplayStopped(value) {
+        this._isAutoplayStopped = value;
+    }
+    ngOnDestroy() {
+        this.autoplaySubscription.unsubscribe();
+    }
+    play() {
+        if (this.paused) {
+            this.paused = false;
+            this.setAutoPlayInterval(this.carouselService.settings.autoplayMouseleaveTimeout);
+        }
+        if (this.carouselService.is(CarouselState.Rotating))
+            return;
+        this.carouselService.enter(CarouselState.Rotating);
+        this.setAutoPlayInterval();
+    }
+    ;
+    stop() {
+        if (!this.carouselService.is(CarouselState.Rotating)) {
+            return;
+        }
+        this.paused = true;
+        this.winRef.clearTimeout(this.timeout);
+        this.carouselService.leave(CarouselState.Rotating);
+    }
+    ;
+    pause() {
+        if (!this.carouselService.is(CarouselState.Rotating))
+            return;
+        this.paused = true;
+    }
+    ;
+    startPausing() {
+        if (this.carouselService.settings.autoplayHoverPause && this.carouselService.is(CarouselState.Rotating)) {
+            this.pause();
+        }
+    }
+    startPlayingMouseLeave() {
+        if (this.carouselService.settings.autoplayHoverPause && this.carouselService.is(CarouselState.Rotating)) {
+            this.play();
+            this.playAfterTranslated();
+        }
+    }
+    initDataStreams() {
+        const initializedCarousel$ = this.carouselService.initializedState.pipe(tap(() => {
+            if (this.carouselService.settings.autoplay) {
+                this.play();
+            }
+        }));
+        const changedSettings$ = this.carouselService.changedState.pipe(tap(data => {
+            this.handleChangeObservable(data);
+        }));
+        const resized$ = this.carouselService.resizedState.pipe(tap(() => {
+            if (this.carouselService.settings.autoplay)
+                this.play();
+            else
+                this.stop();
+        }));
+        this.autoplaySubscription = merge(initializedCarousel$, changedSettings$, resized$).subscribe();
+    }
+    getNextTimeout(timeout, speed) {
+        if (this.timeout)
+            this.winRef.clearTimeout(this.timeout);
+        this.isArtificialAutoplayTimeout = timeout ? true : false;
+        return this.winRef.setTimeout(() => {
+            if (this.paused || this.carouselService.is(CarouselState.Busy) || this.carouselService.is(CarouselState.Interacting) || this.docRef.hidden)
+                return;
+            this.carouselService.next(speed || this.carouselService.settings.autoplaySpeed || 0);
+        }, timeout || this.carouselService.settings.autoplayTimeout);
+    }
+    ;
+    setAutoPlayInterval(timeout) {
+        this.timeout = this.getNextTimeout(timeout);
+    }
+    ;
+    handleChangeObservable(data) {
+        if (data.property.name === CarouselProperty.Settings) {
+            if (this.carouselService.settings.autoplay) {
+                this.play();
+            }
+            else {
+                this.stop();
+            }
+        }
+        else if (data.property.name === CarouselProperty.Position) {
+            if (this.carouselService.settings.autoplay) {
+                this.setAutoPlayInterval();
+            }
+        }
+    }
+    playAfterTranslated() {
+        of('translated').pipe(switchMap(() => this.carouselService.translatedState), first(), filter(() => this.isArtificialAutoplayTimeout), tap(() => this.setAutoPlayInterval())).subscribe(() => { });
+    }
+}
+CarouselAutoplayService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CarouselAutoplayService, deps: [{ token: CarouselService }, { token: WINDOW }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
+CarouselAutoplayService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CarouselAutoplayService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CarouselAutoplayService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () {
+        return [{ type: CarouselService }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [WINDOW]
+                    }] }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [DOCUMENT]
+                    }] }];
+    } });
+
+class CarouselLazyLoadService {
+    constructor(carouselService) {
+        this.carouselService = carouselService;
+        this.initDataStreams();
+    }
+    ngOnDestroy() {
+        this.lazyLoadSubscription.unsubscribe();
+    }
+    initDataStreams() {
+        const initializedCarousel$ = this.carouselService.initializedState.pipe(tap(() => {
+            const isLazyLoad = this.carouselService.settings && !this.carouselService.settings.lazyLoad;
+            this.carouselService.slidesModel.forEach(item => item.load = isLazyLoad ? true : false);
+        }));
+        const changeSettings$ = this.carouselService.changeState;
+        const resizedCarousel$ = this.carouselService.resizedState;
+        this.lazyLoadSubscription = merge(initializedCarousel$, changeSettings$, resizedCarousel$).pipe(tap(data => this.defineLazyLoadSlides(data))).subscribe();
+    }
+    defineLazyLoadSlides(data) {
+        if (!this.carouselService.settings || !this.carouselService.settings.lazyLoad)
+            return;
+        if ((data.property && data.property.name === CarouselProperty.Position) || data === CarouselEventType.Initialized || data === CarouselEventType.Resized) {
+            const settings = this.carouselService.settings, clones = this.carouselService.clones().length;
+            let n = (settings.center && Math.ceil((settings.items || 0) / 2) || settings.items) || 0, i = ((settings.center && n * -1) || 0), position = (data.property && data.property.value !== undefined ? data.property.value : this.carouselService.current()) + i;
+            if ((settings.lazyLoadEager || 0) > 0) {
+                n += settings.lazyLoadEager || 0;
+                if (settings.loop) {
+                    position -= settings.lazyLoadEager || 0;
+                    n++;
+                }
+            }
+            while (i++ < n) {
+                this.load(clones / 2 + this.carouselService.relative(position));
+                if (clones) {
+                    this.carouselService.clones(this.carouselService.relative(position)).forEach(value => this.load(value));
+                }
+                position++;
+            }
+        }
+    }
+    load(position) {
+        if (this.carouselService.slidesModel[position].load)
+            return;
+        this.carouselService.slidesModel[position].load = true;
+    }
+}
+CarouselLazyLoadService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CarouselLazyLoadService, deps: [{ token: CarouselService }], target: i0.ɵɵFactoryTarget.Injectable });
+CarouselLazyLoadService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CarouselLazyLoadService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CarouselLazyLoadService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: CarouselService }]; } });
+
+class CarouselNavigationService {
+    constructor(carouselService) {
+        this.carouselService = carouselService;
+        this.pages = [];
+        this.navigationModel = {
+            disabled: false,
+            previous: {
+                disabled: false,
+                label: CommonConstants.EMPTY_STRING
+            },
+            next: {
+                disabled: false,
+                label: CommonConstants.EMPTY_STRING
+            }
+        };
+        this.navigationDotsModel = {
+            disabled: false,
+            dots: []
+        };
+        this.initDataStreams();
+    }
+    ngOnDestroy() {
+        this.navSubscription.unsubscribe();
+    }
+    next(speed) {
+        this.carouselService.to(this.getPosition(true), speed);
+    }
+    ;
+    previous(speed) {
+        this.carouselService.to(this.getPosition(false), speed);
+    }
+    ;
+    to(position, speed, standard) {
+        let length;
+        if (!standard && this.pages.length) {
+            length = this.pages.length;
+            this.carouselService.to(this.pages[((position % length) + length) % length].start, speed);
+        }
+        else {
+            this.carouselService.to(position, speed);
+        }
+    }
+    ;
+    moveByDot(dotId) {
+        const index = this.navigationDotsModel.dots.findIndex(dot => dotId === dot.id);
+        this.to(index, this.carouselService.settings.dotsSpeed || 0);
+    }
+    toSlideById(id) {
+        const position = this.carouselService.slidesModel.findIndex(slide => slide.id === id && slide.isCloned === false);
+        if (position === -1 || position === this.carouselService.current())
+            return;
+        this.carouselService.to(this.carouselService.relative(position), false);
+    }
+    initDataStreams() {
+        const initializedCarousel$ = this.carouselService.initializedState.pipe(tap(() => {
+            this.initialize();
+            this.updateNavPages();
+            this.draw();
+            this.update();
+            this.carouselService.sendChanges();
+        }));
+        const changedSettings$ = this.carouselService.changedState.pipe(filter(data => data.property.name === CarouselProperty.Position), tap(() => this.update()));
+        const refreshedCarousel$ = this.carouselService.refreshedState.pipe(tap(() => {
+            this.updateNavPages();
+            this.draw();
+            this.update();
+            this.carouselService.sendChanges();
+        }));
+        this.navSubscription = merge(initializedCarousel$, changedSettings$, refreshedCarousel$).subscribe();
+    }
+    initialize() {
+        this.navigationModel.disabled = true;
+        if (this.carouselService.settings.navText) {
+            this.navigationModel.previous.label = this.carouselService.settings.navText[0];
+            this.navigationModel.next.label = this.carouselService.settings.navText[1];
+        }
+        this.navigationDotsModel.disabled = true;
+        this.carouselService.navigationModel = this.navigationModel;
+        this.carouselService.navigationDotsModel = this.navigationDotsModel;
+    }
+    updateNavPages() {
+        let i, j, k;
+        const lower = this.carouselService.clones().length / 2, upper = lower + this.carouselService.items().length, maximum = this.carouselService.maximum(true), pages = [], settings = this.carouselService.settings;
+        let size = settings.center || settings.autoWidth || settings.navigationDotsModel
+            ? 1 : settings.dotsEach || settings.items;
+        size = +size;
+        if (settings.slideBy !== 'page') {
+            settings.slideBy = Math.min(+settings.slideBy, settings.items || 0);
+        }
+        if (settings.dots || settings.slideBy === 'page') {
+            for (i = lower, j = 0, k = 0; i < upper; i++) {
+                if (j >= size || j === 0) {
+                    pages.push({
+                        start: Math.min(maximum, i - lower),
+                        end: i - lower + size - 1
+                    });
+                    if (Math.min(maximum, i - lower) === maximum) {
+                        break;
+                    }
+                    j = 0, ++k;
+                }
+                j += this.carouselService.mergers(this.carouselService.relative(i));
+            }
+        }
+        this.pages = pages;
+    }
+    draw() {
+        let difference;
+        const settings = this.carouselService.settings, items = this.carouselService.items(), disabled = items.length <= (settings.items || 0);
+        this.navigationModel.disabled = !settings.nav || disabled;
+        this.navigationDotsModel.disabled = !settings.dots || disabled;
+        if (settings.dots) {
+            difference = this.pages.length - this.navigationDotsModel.dots.length;
+            if (settings.navigationDotsModel && difference !== 0) {
+                this.navigationDotsModel.dots = [];
+                items.forEach(item => {
+                    this.navigationDotsModel.dots.push({
+                        active: false,
+                        id: `dot-${item.id}`
+                    });
+                });
+            }
+            else if (difference > 0) {
+                const startI = this.navigationDotsModel.dots.length > 0 ? this.navigationDotsModel.dots.length : 0;
+                for (let i = 0; i < difference; i++) {
+                    this.navigationDotsModel.dots.push({
+                        active: false,
+                        id: `dot-${i + startI}`
+                    });
+                }
+            }
+            else if (difference < 0) {
+                this.navigationDotsModel.dots.splice(difference, Math.abs(difference));
+            }
+        }
+        this.carouselService.navigationModel = this.navigationModel;
+        this.carouselService.navigationDotsModel = this.navigationDotsModel;
+    }
+    ;
+    update() {
+        this.updateNavButtons();
+        this.updateDots();
+    }
+    updateNavButtons() {
+        const settings = this.carouselService.settings, loop = settings.loop || settings.rewind || false, index = this.carouselService.relative(this.carouselService.current() || 0);
+        if (settings.nav) {
+            this.navigationModel.previous.disabled = !loop && index <= this.carouselService.minimum(true);
+            this.navigationModel.next.disabled = !loop && index >= this.carouselService.maximum(true);
+        }
+        this.carouselService.navigationModel = this.navigationModel;
+    }
+    updateDots() {
+        let curActiveDotI;
+        if (!this.carouselService.settings.dots)
+            return;
+        this.navigationDotsModel.dots.forEach(item => {
+            if (item.active === true) {
+                item.active = false;
+            }
+        });
+        curActiveDotI = this.getCurrent();
+        if (this.navigationDotsModel.dots.length) {
+            this.navigationDotsModel.dots[curActiveDotI].active = true;
+        }
+        this.carouselService.navigationDotsModel = this.navigationDotsModel;
+    }
+    getCurrent() {
+        const current = this.carouselService.relative(this.carouselService.current() || 0);
+        let finalCurrent;
+        const pages = this.pages.filter((page, index) => {
+            return page.start <= current && page.end >= current;
+        }).pop();
+        finalCurrent = this.pages.findIndex(page => {
+            return page.start === pages.start && page.end === pages.end;
+        });
+        return finalCurrent;
+    }
+    ;
+    getPosition(successor) {
+        let position, length;
+        const settings = this.carouselService.settings;
+        if (settings.slideBy === 'page') {
+            position = this.getCurrent();
+            length = this.pages.length;
+            successor ? ++position : --position;
+            position = this.pages[((position % length) + length) % length].start;
+        }
+        else {
+            position = this.carouselService.relative(this.carouselService.current() || 0);
+            length = this.carouselService.items().length;
+            successor ? position += +settings.slideBy : position -= +settings.slideBy;
+        }
+        return position;
+    }
+    ;
+}
+CarouselNavigationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CarouselNavigationService, deps: [{ token: CarouselService }], target: i0.ɵɵFactoryTarget.Injectable });
+CarouselNavigationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CarouselNavigationService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CarouselNavigationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: CarouselService }]; } });
+
+class CarouselStageComponent {
+    constructor(carouselService, animateService) {
+        this.carouselService = carouselService;
+        this.animateService = animateService;
+        this.stageModel = {
+            width: 0,
+            paddingL: 0,
+            paddingR: 0,
+            transform: CommonConstants.EMPTY_STRING,
+            transition: CommonConstants.EMPTY_STRING
+        };
+        this.slidesModel = [];
+        this.preparePublicSlide = (slide) => {
+            const newSlide = Object.assign({}, slide);
+            newSlide.tplRef = null;
+            return newSlide;
+        };
+    }
+    get styles() {
+        return {
+            width: getCssLikeValue(this.stageModel.width),
+            transform: this.stageModel.transform,
+            transition: this.stageModel.transition,
+            paddingLeft: getCssLikeValue(this.stageModel.paddingL),
+            paddingRight: getCssLikeValue(this.stageModel.paddingR)
+        };
+    }
+    getItemStyles(slide) {
+        return {
+            width: getCssLikeValue(slide.width),
+            marginLeft: getCssLikeValue(slide.marginL),
+            marginRight: getCssLikeValue(slide.marginR),
+            left: getCssLikeValue(slide.left)
+        };
+    }
+    onTransitionEnd() {
+        this.carouselService.onTransitionEnd();
+    }
+    clear(id) {
+        this.animateService.clear(id);
+    }
+}
+CarouselStageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CarouselStageComponent, deps: [{ token: CarouselService }, { token: CarouselAnimateService }], target: i0.ɵɵFactoryTarget.Component });
+CarouselStageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: CarouselStageComponent, selector: "sfc-carousel-stage", inputs: { stageModel: "stageModel", slidesModel: "slidesModel" }, ngImport: i0, template: "<div class=\"container\" [ngStyle]=\"styles\" (transitionend)=\"onTransitionEnd()\">\r\n    <ng-container *ngFor=\"let slide of slidesModel; let i = index\">\r\n        <div class=\"item\" [ngClass]=\"slide.classes\" [ngStyle]=\"getItemStyles(slide)\" (animationend)=\"clear(slide.id)\"\r\n            [@autoHeight]=\"slide.heightState\">\r\n            <ng-template *ngIf=\"slide.load\" [ngTemplateOutlet]=\"slide.tplRef\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: preparePublicSlide(slide), index: i }\">\r\n            </ng-template>\r\n        </div>\r\n    </ng-container>\r\n</div>", styles: [":host .container{position:relative;touch-action:pan-y;touch-action:manipulation;-webkit-backface-visibility:hidden;backface-visibility:hidden}:host .container:after{content:\".\";display:block;clear:both;visibility:hidden;line-height:0;height:0}:host .container .item{-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translate(0);position:relative;min-height:1px;float:left;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}:host .container .item.center{z-index:5}:host .container .item img{display:block;width:100%}\n"], directives: [{ type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], animations: [
+        trigger('autoHeight', [
+            state('nulled', style({ height: 0 })),
+            state('full', style({ height: '*' })),
+            transition('full => nulled', [
+                animate('700ms 350ms')
+            ]),
+            transition('nulled => full', [
+                animate(350)
+            ]),
+        ])
+    ] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CarouselStageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-carousel-stage', animations: [
+                        trigger('autoHeight', [
+                            state('nulled', style({ height: 0 })),
+                            state('full', style({ height: '*' })),
+                            transition('full => nulled', [
+                                animate('700ms 350ms')
+                            ]),
+                            transition('nulled => full', [
+                                animate(350)
+                            ]),
+                        ])
+                    ], template: "<div class=\"container\" [ngStyle]=\"styles\" (transitionend)=\"onTransitionEnd()\">\r\n    <ng-container *ngFor=\"let slide of slidesModel; let i = index\">\r\n        <div class=\"item\" [ngClass]=\"slide.classes\" [ngStyle]=\"getItemStyles(slide)\" (animationend)=\"clear(slide.id)\"\r\n            [@autoHeight]=\"slide.heightState\">\r\n            <ng-template *ngIf=\"slide.load\" [ngTemplateOutlet]=\"slide.tplRef\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: preparePublicSlide(slide), index: i }\">\r\n            </ng-template>\r\n        </div>\r\n    </ng-container>\r\n</div>", styles: [":host .container{position:relative;touch-action:pan-y;touch-action:manipulation;-webkit-backface-visibility:hidden;backface-visibility:hidden}:host .container:after{content:\".\";display:block;clear:both;visibility:hidden;line-height:0;height:0}:host .container .item{-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translate(0);position:relative;min-height:1px;float:left;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}:host .container .item.center{z-index:5}:host .container .item img{display:block;width:100%}\n"] }]
+        }], ctorParameters: function () { return [{ type: CarouselService }, { type: CarouselAnimateService }]; }, propDecorators: { stageModel: [{
+                type: Input
+            }], slidesModel: [{
+                type: Input
+            }] } });
+
+class CarouselComponent {
+    constructor(el, resizeService, carouselService, navigationService, autoplayService, lazyLoadService, animateService, changeDetectorRef, documentRef) {
+        this.el = el;
+        this.resizeService = resizeService;
+        this.carouselService = carouselService;
+        this.navigationService = navigationService;
+        this.autoplayService = autoplayService;
+        this.lazyLoadService = lazyLoadService;
+        this.animateService = animateService;
+        this.changeDetectorRef = changeDetectorRef;
+        this.translated = new EventEmitter();
+        this.initialized = new EventEmitter();
+        this.changing = new EventEmitter();
+        this.changed = new EventEmitter();
+        this.slidesModel = [];
+        this.carouselLoaded = false;
+        this.carouselWindowWidth = 0;
+        this.documentRef = documentRef;
+    }
+    get rtl() {
+        var _a;
+        return ((_a = this.carouselDOMModel) === null || _a === void 0 ? void 0 : _a.rtl) || false;
+    }
+    get clientWidth() {
+        return this.el.nativeElement.querySelector('.container').clientWidth;
+    }
+    onVisibilityChange() {
+        if (this.carouselService.settings.autoplay) {
+            switch (this.documentRef.visibilityState) {
+                case UIClass.Visible:
+                    if (!this.autoplayService.isAutoplayStopped)
+                        this.autoplayService.play();
+                    break;
+                case UIClass.Hidden:
+                    this.autoplayService.pause();
+                    break;
+            }
+        }
+    }
+    ;
+    ngOnInit() {
+        this.carouselWindowWidth = this.clientWidth;
+        this.initDataStreams();
+    }
+    ngAfterContentInit() {
+        if (any(this.slides.toArray())) {
+            this.carouselService.setup(this.carouselWindowWidth, this.slides.toArray(), this.options);
+            this.carouselService.initialize(this.slides.toArray());
+            this.initResizeWatcher();
+        }
+        this.slidesChangesSubscription = this.slides.changes.pipe(tap((slides) => {
+            if (any(slides)) {
+                this.carouselService.setup(this.carouselWindowWidth, slides.toArray(), this.options);
+                this.carouselService.initialize(slides.toArray());
+            }
+            else {
+                this.carouselLoaded = false;
+            }
+        })).subscribe();
+    }
+    ngOnDestroy() {
+        if (this.resizeSubscription)
+            this.resizeSubscription.unsubscribe();
+        if (this.slidesChangesSubscription)
+            this.slidesChangesSubscription.unsubscribe();
+        if (this.carouselSubscription)
+            this.carouselSubscription.unsubscribe();
+    }
+    initDataStreams() {
+        const _viewCurSettings$ = this.carouselService.viewCurrrentSettings.pipe(tap(data => {
+            this.carouselDOMModel = data.carouselDOMModel;
+            this.stageModel = data.stageModel;
+            this.slidesModel = data.slidesModel;
+            if (!this.carouselLoaded) {
+                this.carouselLoaded = true;
+            }
+            this.navigationModel = data.navigationModel;
+            this.navigationDotsModel = data.navigationDotsModel;
+            this.changeDetectorRef.markForCheck();
+        }));
+        const _initializedCarousel$ = this.carouselService.initializedState.pipe(tap(() => {
+            this.gatherTranslatedData();
+            this.initialized.emit(this.slideEvent);
+        }));
+        const _translatedCarousel$ = this.carouselService.translatedState.pipe(tap(() => {
+            this.gatherTranslatedData();
+            this.translated.emit(this.slideEvent);
+        }));
+        const _changeCarousel$ = this.carouselService.changeState.pipe(tap(() => {
+            this.gatherTranslatedData();
+            this.changing.emit(this.slideEvent);
+        }));
+        const _changedCarousel$ = this.carouselService.changeState.pipe(switchMap(value => {
+            const changedPosition = of(value).pipe(filter(() => value.property.name === CarouselProperty.Position), switchMap(() => from(this.slidesModel)), skip(value.property.value), take(this.carouselService.settings.items || 0), map(slide => {
+                const id = slide.id.indexOf(CarouselServiceConstants.CLONE_ID_PREFIX) >= 0 ? slide.id.slice(CarouselServiceConstants.CLONE_ID_PREFIX.length) : slide.id;
+                return Object.assign(Object.assign({}, slide), { id: id, isActive: true });
+            }), toArray(), map(slides => {
+                return {
+                    slides: slides,
+                    startPosition: this.carouselService.relative(value.property.value)
+                };
+            }));
+            return merge(changedPosition);
+        }), tap(slidesData => {
+            var _a;
+            this.gatherTranslatedData();
+            this.changed.emit(((_a = slidesData.slides) === null || _a === void 0 ? void 0 : _a.length) ? slidesData : this.slideEvent);
+        }));
+        this.carouselSubscription = merge(_viewCurSettings$, _translatedCarousel$, _changeCarousel$, _changedCarousel$, _initializedCarousel$).subscribe();
+    }
+    initResizeWatcher() {
+        if (Object.keys(this.carouselService.options.responsive || {}).length) {
+            this.resizeSubscription = this.resizeService.onResize$
+                .pipe(filter(() => this.carouselWindowWidth !== this.clientWidth), delay(this.carouselService.settings.responsiveRefreshRate || 0)).subscribe(() => {
+                this.carouselService.onResize(this.clientWidth);
+                this.carouselWindowWidth = this.clientWidth;
+            });
+        }
+    }
+    onTransitionEnd() {
+        this.carouselService.onTransitionEnd();
+    }
+    next() {
+        if (this.carouselLoaded)
+            this.navigationService.next(this.carouselService.settings.navSpeed || false);
+    }
+    previous() {
+        if (this.carouselLoaded)
+            this.navigationService.previous(this.carouselService.settings.navSpeed || false);
+    }
+    moveByDot(dotId) {
+        if (this.carouselLoaded)
+            this.navigationService.moveByDot(dotId);
+    }
+    pause() {
+        this.autoplayService.startPausing();
+    }
+    play() {
+        this.autoplayService.startPlayingMouseLeave();
+    }
+    stopAutoplay() {
+        this.autoplayService.isAutoplayStopped = true;
+        this.autoplayService.stop();
+    }
+    startAutoplay() {
+        this.autoplayService.isAutoplayStopped = false;
+        this.autoplayService.play();
+    }
+    gatherTranslatedData() {
+        let startPosition;
+        const activeSlides = this.slidesModel
+            .filter(slide => slide.isActive === true)
+            .map(slide => {
+            return {
+                id: slide.id.indexOf(CarouselServiceConstants.CLONE_ID_PREFIX) >= 0 ? slide.id.slice(CarouselServiceConstants.CLONE_ID_PREFIX.length) : slide.id,
+                width: slide.width,
+                marginL: slide.marginL,
+                marginR: slide.marginR,
+                center: slide.isCentered,
+                tplRef: null,
+                classes: {}
+            };
+        });
+        startPosition = this.carouselService.relative(this.carouselService.current() || 0);
+        this.slideEvent = {
+            startPosition: startPosition,
+            slides: activeSlides
+        };
+    }
+}
+CarouselComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CarouselComponent, deps: [{ token: i0.ElementRef }, { token: i1.ResizeService }, { token: CarouselService }, { token: CarouselNavigationService }, { token: CarouselAutoplayService }, { token: CarouselLazyLoadService }, { token: CarouselAnimateService }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
+CarouselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: CarouselComponent, selector: "sfc-carousel", inputs: { options: "options" }, outputs: { translated: "translated", initialized: "initialized", changing: "changing", changed: "changed" }, host: { listeners: { "document:visibilitychange": "onVisibilityChange()" }, properties: { "class.rtl": "this.rtl" } }, providers: [
+        CarouselNavigationService,
+        CarouselAutoplayService,
+        CarouselService,
+        CarouselAnimateService,
+        CarouselLazyLoadService
+    ], queries: [{ propertyName: "slides", predicate: CarouselSlideDirective }], ngImport: i0, template: "<div class=\"container\" (mouseover)=\"pause()\" (mouseleave)=\"play()\">\r\n    <div *ngIf=\"carouselLoaded\" class=\"stage\">\r\n        <sfc-carousel-stage [stageModel]=\"stageModel\" [slidesModel]=\"slidesModel\"></sfc-carousel-stage>\r\n    </div>\r\n    <ng-container *ngIf=\"slides.toArray().length\">\r\n        <div class=\"navigation\" [class.disabled]=\"navigationModel?.disabled\">\r\n            <div class=\"action previous\" [class.disabled]=\"navigationModel?.previous?.disabled\" (click)=\"previous()\">\r\n                {{navigationModel?.previous?.label}}\r\n            </div>\r\n            <div class=\"action next\" [class.disabled]=\"navigationModel?.next?.disabled\" (click)=\"next()\">\r\n                {{navigationModel?.next?.label}}\r\n            </div>\r\n        </div>\r\n        <div class=\"dots\" [class.disabled]=\"navigationDotsModel?.disabled\">\r\n            <div *ngFor=\"let dot of navigationDotsModel?.dots\" class=\"dot\" [class.active]=\"dot.active\"\r\n                (click)=\"moveByDot(dot.id)\">\r\n                <span></span>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n</div>", styles: [":host .container{display:block;width:100%;-webkit-tap-highlight-color:transparent;position:relative;z-index:1}:host .container .stage{position:relative;overflow:hidden;transform:translate(0)}:host .container .dots{text-align:center;-webkit-tap-highlight-color:transparent}:host .container .dots.disabled{display:none}:host .container .dots .dot{display:inline-block;zoom:1;cursor:pointer;-webkit-user-select:none;user-select:none}:host .container .dots .dot span{width:10px;height:10px;margin:5px 7px;display:block;-webkit-backface-visibility:visible;backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}:host-context(.sfc-default-theme) :host .container .dots .dot span{background:#d8d7d7}:host-context(.sfc-dark-theme) :host .container .dots .dot span{background:#f6f6f6}:host-context(.sfc-default-theme) :host .container .dots .dot.active span,:host-context(.sfc-default-theme) :host .container .dots .dot:hover span{background:#656d78}:host-context(.sfc-dark-theme) :host .container .dots .dot.active span,:host-context(.sfc-dark-theme) :host .container .dots .dot:hover span{background:#aab2bd}:host .container .navigation{margin-top:10px;text-align:center;-webkit-tap-highlight-color:transparent}:host .container .navigation .action{font-size:14px;margin:5px;padding:4px 7px;display:inline-block;cursor:pointer;border-radius:3px}:host-context(.sfc-default-theme) :host .container .navigation .action{color:#fff}:host-context(.sfc-dark-theme) :host .container .navigation .action{color:#545e61}:host-context(.sfc-default-theme) :host .container .navigation .action{background:#d8d7d7}:host-context(.sfc-dark-theme) :host .container .navigation .action{background:#f6f6f6}:host .container .navigation .action:hover{text-decoration:none}:host-context(.sfc-default-theme) :host .container .navigation .action:hover{background:#0000001a}:host-context(.sfc-dark-theme) :host .container .navigation .action:hover{background:#d8d7d7}:host .container .navigation .action.previous,:host .container .navigation .action.next{cursor:pointer;-webkit-user-select:none;user-select:none}:host .container .navigation .action.disabled{opacity:.5;cursor:default}:host .container .navigation.disabled{display:none}:host .container .navigation.disabled+.dots{margin-top:10px}:host.rtl .container{direction:rtl}\n"], components: [{ type: CarouselStageComponent, selector: "sfc-carousel-stage", inputs: ["stageModel", "slidesModel"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CarouselComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-carousel', providers: [
+                        CarouselNavigationService,
+                        CarouselAutoplayService,
+                        CarouselService,
+                        CarouselAnimateService,
+                        CarouselLazyLoadService
+                    ], template: "<div class=\"container\" (mouseover)=\"pause()\" (mouseleave)=\"play()\">\r\n    <div *ngIf=\"carouselLoaded\" class=\"stage\">\r\n        <sfc-carousel-stage [stageModel]=\"stageModel\" [slidesModel]=\"slidesModel\"></sfc-carousel-stage>\r\n    </div>\r\n    <ng-container *ngIf=\"slides.toArray().length\">\r\n        <div class=\"navigation\" [class.disabled]=\"navigationModel?.disabled\">\r\n            <div class=\"action previous\" [class.disabled]=\"navigationModel?.previous?.disabled\" (click)=\"previous()\">\r\n                {{navigationModel?.previous?.label}}\r\n            </div>\r\n            <div class=\"action next\" [class.disabled]=\"navigationModel?.next?.disabled\" (click)=\"next()\">\r\n                {{navigationModel?.next?.label}}\r\n            </div>\r\n        </div>\r\n        <div class=\"dots\" [class.disabled]=\"navigationDotsModel?.disabled\">\r\n            <div *ngFor=\"let dot of navigationDotsModel?.dots\" class=\"dot\" [class.active]=\"dot.active\"\r\n                (click)=\"moveByDot(dot.id)\">\r\n                <span></span>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n</div>", styles: [":host .container{display:block;width:100%;-webkit-tap-highlight-color:transparent;position:relative;z-index:1}:host .container .stage{position:relative;overflow:hidden;transform:translate(0)}:host .container .dots{text-align:center;-webkit-tap-highlight-color:transparent}:host .container .dots.disabled{display:none}:host .container .dots .dot{display:inline-block;zoom:1;cursor:pointer;-webkit-user-select:none;user-select:none}:host .container .dots .dot span{width:10px;height:10px;margin:5px 7px;display:block;-webkit-backface-visibility:visible;backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}:host-context(.sfc-default-theme) :host .container .dots .dot span{background:#d8d7d7}:host-context(.sfc-dark-theme) :host .container .dots .dot span{background:#f6f6f6}:host-context(.sfc-default-theme) :host .container .dots .dot.active span,:host-context(.sfc-default-theme) :host .container .dots .dot:hover span{background:#656d78}:host-context(.sfc-dark-theme) :host .container .dots .dot.active span,:host-context(.sfc-dark-theme) :host .container .dots .dot:hover span{background:#aab2bd}:host .container .navigation{margin-top:10px;text-align:center;-webkit-tap-highlight-color:transparent}:host .container .navigation .action{font-size:14px;margin:5px;padding:4px 7px;display:inline-block;cursor:pointer;border-radius:3px}:host-context(.sfc-default-theme) :host .container .navigation .action{color:#fff}:host-context(.sfc-dark-theme) :host .container .navigation .action{color:#545e61}:host-context(.sfc-default-theme) :host .container .navigation .action{background:#d8d7d7}:host-context(.sfc-dark-theme) :host .container .navigation .action{background:#f6f6f6}:host .container .navigation .action:hover{text-decoration:none}:host-context(.sfc-default-theme) :host .container .navigation .action:hover{background:#0000001a}:host-context(.sfc-dark-theme) :host .container .navigation .action:hover{background:#d8d7d7}:host .container .navigation .action.previous,:host .container .navigation .action.next{cursor:pointer;-webkit-user-select:none;user-select:none}:host .container .navigation .action.disabled{opacity:.5;cursor:default}:host .container .navigation.disabled{display:none}:host .container .navigation.disabled+.dots{margin-top:10px}:host.rtl .container{direction:rtl}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: i0.ElementRef }, { type: i1.ResizeService }, { type: CarouselService }, { type: CarouselNavigationService }, { type: CarouselAutoplayService }, { type: CarouselLazyLoadService }, { type: CarouselAnimateService }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [DOCUMENT]
+                    }] }];
+    }, propDecorators: { options: [{
+                type: Input
+            }], translated: [{
+                type: Output
+            }], initialized: [{
+                type: Output
+            }], changing: [{
+                type: Output
+            }], changed: [{
+                type: Output
+            }], slides: [{
+                type: ContentChildren,
+                args: [CarouselSlideDirective]
+            }], rtl: [{
+                type: HostBinding,
+                args: ['class.rtl']
+            }], onVisibilityChange: [{
+                type: HostListener,
+                args: ['document:visibilitychange']
+            }] } });
+
+Chart.register(Title, Tooltip, Filler, Legend, LineController, LineElement, PointElement, LinearScale, CategoryScale, BarController, BarElement, DoughnutController, ArcElement, RadarController, RadialLinearScale, PieController, PolarAreaController, BubbleController, ScatterController, TimeSeriesScale);
+class NgxSfcComponentsModule {
+}
+NgxSfcComponentsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NgxSfcComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NgxSfcComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NgxSfcComponentsModule, declarations: [
+        // Tabs
+        TabsComponent,
+        TabLabelLineComponent,
+        TabLabelIconComponent,
+        TabLabelLineSliderComponent,
+        TabLabelIconSliderComponent,
+        // Menus
+        SideMenuComponent,
+        SideMenuHeaderComponent,
+        SideMenuItemComponent,
+        SideMenuTitleComponent,
+        SideMenuItemContentComponent,
+        DropdownMenuComponent,
+        DropdownMenuItemComponent,
+        NavigationMenuComponent,
+        NavigationMenuItemComponent,
+        // Stars
+        StarsComponent,
+        // Avatar
+        AvatarComponent,
+        AvatarBadgeComponent,
+        // Progress
+        ProgressLineComponent,
+        ProgressSemiCircleComponent,
+        ProgressCircleComponent,
+        // Tags
+        TagsComponent,
+        TagComponent,
+        // Slider
+        SliderComponent,
+        SliderItemComponent,
+        SliderButtonComponent,
+        SliderPaginationComponent,
+        // Timeline
+        TimelineComponent,
+        TimelineItemComponent,
+        // Notification
+        NotificationComponent,
+        NotificationContentComponent,
+        // Chart
+        ChartComponent,
+        // Table
+        TableComponent,
+        DefaultTableColumnComponent,
+        SelectableTableColumnComponent,
+        ColumnsToggleComponent,
+        DefaultTableRowComponent,
+        ExpandedTableRowComponent,
+        DefaultTableCardComponent,
+        // Carousel
+        CarouselComponent,
+        CarouselStageComponent,
+        CarouselSlideDirective
+    ], imports: [CommonModule,
+        NgxSfcCommonModule], exports: [
+        // Tabs
+        TabsComponent,
+        TabLabelLineComponent,
+        TabLabelIconComponent,
+        TabLabelLineSliderComponent,
+        TabLabelIconSliderComponent,
+        // Menus
+        SideMenuComponent,
+        DropdownMenuComponent,
+        NavigationMenuComponent,
+        // Stars
+        StarsComponent,
+        // Avatar
+        AvatarComponent,
+        AvatarBadgeComponent,
+        // Progress
+        ProgressLineComponent,
+        ProgressSemiCircleComponent,
+        ProgressCircleComponent,
+        // Tags
+        TagsComponent,
+        // Slider
+        SliderComponent,
+        // Timeline
+        TimelineComponent,
+        // Notification
+        NotificationComponent,
+        // Chart
+        ChartComponent,
+        // Table
+        TableComponent,
+        ExpandedTableRowComponent,
+        // Carousel
+        CarouselComponent,
+        CarouselSlideDirective
+    ] });
+NgxSfcComponentsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NgxSfcComponentsModule, imports: [[
+            CommonModule,
+            NgxSfcCommonModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NgxSfcComponentsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        // Tabs
+                        TabsComponent,
+                        TabLabelLineComponent,
+                        TabLabelIconComponent,
+                        TabLabelLineSliderComponent,
+                        TabLabelIconSliderComponent,
+                        // Menus
+                        SideMenuComponent,
+                        SideMenuHeaderComponent,
+                        SideMenuItemComponent,
+                        SideMenuTitleComponent,
+                        SideMenuItemContentComponent,
+                        DropdownMenuComponent,
+                        DropdownMenuItemComponent,
+                        NavigationMenuComponent,
+                        NavigationMenuItemComponent,
+                        // Stars
+                        StarsComponent,
+                        // Avatar
+                        AvatarComponent,
+                        AvatarBadgeComponent,
+                        // Progress
+                        ProgressLineComponent,
+                        ProgressSemiCircleComponent,
+                        ProgressCircleComponent,
+                        // Tags
+                        TagsComponent,
+                        TagComponent,
+                        // Slider
+                        SliderComponent,
+                        SliderItemComponent,
+                        SliderButtonComponent,
+                        SliderPaginationComponent,
+                        // Timeline
+                        TimelineComponent,
+                        TimelineItemComponent,
+                        // Notification
+                        NotificationComponent,
+                        NotificationContentComponent,
+                        // Chart
+                        ChartComponent,
+                        // Table
+                        TableComponent,
+                        DefaultTableColumnComponent,
+                        SelectableTableColumnComponent,
+                        ColumnsToggleComponent,
+                        DefaultTableRowComponent,
+                        ExpandedTableRowComponent,
+                        DefaultTableCardComponent,
+                        // Carousel
+                        CarouselComponent,
+                        CarouselStageComponent,
+                        CarouselSlideDirective
+                    ],
+                    imports: [
+                        CommonModule,
+                        NgxSfcCommonModule
+                    ],
+                    exports: [
+                        // Tabs
+                        TabsComponent,
+                        TabLabelLineComponent,
+                        TabLabelIconComponent,
+                        TabLabelLineSliderComponent,
+                        TabLabelIconSliderComponent,
+                        // Menus
+                        SideMenuComponent,
+                        DropdownMenuComponent,
+                        NavigationMenuComponent,
+                        // Stars
+                        StarsComponent,
+                        // Avatar
+                        AvatarComponent,
+                        AvatarBadgeComponent,
+                        // Progress
+                        ProgressLineComponent,
+                        ProgressSemiCircleComponent,
+                        ProgressCircleComponent,
+                        // Tags
+                        TagsComponent,
+                        // Slider
+                        SliderComponent,
+                        // Timeline
+                        TimelineComponent,
+                        // Notification
+                        NotificationComponent,
+                        // Chart
+                        ChartComponent,
+                        // Table
+                        TableComponent,
+                        ExpandedTableRowComponent,
+                        // Carousel
+                        CarouselComponent,
+                        CarouselSlideDirective
+                    ]
+                }]
+        }] });
+
+/*
+ * Public API Surface of ngx-sfc-components
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AvatarBadgeComponent, AvatarBadgePosition, AvatarComponent, CarouselComponent, CarouselSlideDirective, ChartComponent, ChartThemeService, ColumnsToggleComponent, DefaultTableCardComponent, DefaultTableColumnComponent, DefaultTableRowComponent, DropdownMenuComponent, ExpandedTableRowComponent, ExpandedTableRowTemplate, NavigationMenuComponent, NgxSfcComponentsModule, NotificationComponent, NotificationTemplate, NotificationType, ProgressCircleComponent, ProgressLineComponent, ProgressSemiCircleComponent, SelectableTableColumnComponent, SideMenuComponent, SideMenuItemType, SliderComponent, SliderType, StarsComponent, TabLabelIconComponent, TabLabelIconSliderComponent, TabLabelLineComponent, TabLabelLineSliderComponent, TableComponent, TableDataType, TableTemplate, TabsComponent, TabsTemplate, TagsComponent, TimelineComponent, TimelineItemPosition };
+//# sourceMappingURL=ngx-sfc-components.mjs.map