ngx-sfc-common 0.0.21 → 0.0.22

package/fesm2020/ngx-sfc-common.mjs

@@ -1,13 +1,14 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, Injectable, PLATFORM_ID, EventEmitter, Directive, Inject, Input, Output, HostListener, Pipe, Component, HostBinding, ContentChildren, ViewChild, NgModule } from '@angular/core';
 import * as i1$1 from '@angular/common';
-import { isPlatformBrowser, CommonModule } from '@angular/common';
-import * as i3 from '@fortawesome/angular-fontawesome';
+import { isPlatformBrowser, formatDate, CommonModule } from '@angular/common';
+import * as i1$2 from '@fortawesome/angular-fontawesome';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import { Subject, fromEvent, Observable, distinctUntilChanged, startWith, BehaviorSubject, filter, map, EMPTY, combineLatest, tap, switchMap, of } from 'rxjs';
+import { Subject, fromEvent, Observable, distinctUntilChanged, startWith, BehaviorSubject, filter, map, EMPTY, tap, switchMap, combineLatest, of } from 'rxjs';
 import * as i1 from '@angular/platform-browser';
+import { HttpParams } from '@angular/common/http';
 import { trigger, state, style, transition, group, query, animate, animateChild } from '@angular/animations';
-import { faTimes, faWindowRestore, faCheck, faChevronLeft, faChevronRight, faChevronUp, faChevronDown, faChevronCircleDown } from '@fortawesome/free-solid-svg-icons';
+import { faTimes, faWindowRestore, faCheck, faChevronLeft, faChevronRight, faChevronCircleDown, faChevronUp, faChevronDown } from '@fortawesome/free-solid-svg-icons';
 
 /**
  * Component sizes
@@ -99,6 +100,7 @@ var UIClass;
     UIClass["Pointer"] = "pointer";
     UIClass["Default"] = "default";
     UIClass["Initialization"] = "initialization";
+    UIClass["Filled"] = "filled";
 })(UIClass || (UIClass = {}));
 ;
 
@@ -293,6 +295,72 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i1.EventManager }]; } });
 
+class LoadMoreService {
+    constructor() {
+        this.pageValue = LoadMoreService.START_PAGE;
+        this.moreSubject = new Subject();
+        this.more$ = this.moreSubject.asObservable();
+    }
+    more() {
+        this.pageValue++;
+        this.moreSubject.next(this.pageValue);
+    }
+    reset() {
+        this.pageValue = LoadMoreService.START_PAGE;
+    }
+}
+LoadMoreService.START_PAGE = 1;
+LoadMoreService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LoadMoreService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+LoadMoreService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LoadMoreService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LoadMoreService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class PaginationService {
+    constructor() {
+        this.pageValue = PaginationService.START_PAGE;
+        this.pageSubject = new Subject();
+        this.page$ = this.pageSubject.asObservable();
+    }
+    page(page) {
+        this.pageValue = page;
+        this.pageSubject.next(page);
+    }
+    reset() {
+        this.pageValue = PaginationService.START_PAGE;
+    }
+}
+PaginationService.START_PAGE = 1;
+PaginationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PaginationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+PaginationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PaginationService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PaginationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class SortingService {
+    constructor() {
+        this.sortingSubject = new Subject();
+        this.sorting$ = this.sortingSubject.asObservable();
+    }
+    sort(model) {
+        this.sortingSubject.next(model);
+    }
+}
+SortingService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SortingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SortingService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SortingService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SortingService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
 class ClickOutsideDirective {
     constructor(elementRef, document) {
         this.elementRef = elementRef;
@@ -356,10 +424,12 @@ class CommonConstants {
 }
 CommonConstants.NOT_FOUND_INDEX = -1;
 CommonConstants.EMPTY_STRING = '';
+CommonConstants.DEFAULT_KEY_VALUE = 0;
 CommonConstants.MOUSE_BUTTON_LEFT = 0;
 CommonConstants.FULL_PERCENTAGE = 100;
 CommonConstants.COMMON_TEXT_DELIMETER = '/';
-CommonConstants.PERCENTAGE_SYMBOL = '%';
+CommonConstants.PERCENTAGE_SYMBOL = '%';
+CommonConstants.DOT = '.';
 
 class DateTimeConstants {
 }
@@ -369,7 +439,8 @@ DateTimeConstants.HOURS_IN_TIME = 24;
 DateTimeConstants.MIDNIGHT_HOUR = 0;
 DateTimeConstants.MINUTES_IN_HOUR = 60;
 DateTimeConstants.DAYS_OF_WEEK = ["S", "M", "T", "W", "T", "F", "S"];
-DateTimeConstants.DAYS_OF_WEEK_3 = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"];
+DateTimeConstants.DAYS_OF_WEEK_3 = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"];
+DateTimeConstants.DEFAULT_LOCALE = 'en-US';
 
 class UIConstants {
 }
@@ -747,6 +818,29 @@ function convertTimestampToDate(timestamp) {
     result.setMinutes(+tempTime[1]);
     result.setSeconds(+tempTime[2]);
     return result;
+}
+/**
+ * Convert Date object to timestamp string
+ * @param date Date value
+ * @param locale Locale value
+ * @returns String representation of date value, for example - 12:23
+ */
+function convertDateToTimestamp(date, locale = DateTimeConstants.DEFAULT_LOCALE) {
+    return `${formatDate(date, 'HH', locale)}:${formatDate(date, 'mm', locale)}`;
+}
+/**
+ * Get age from
+ * @param birthdate Date of birth
+ * @returns Age
+ */
+function getAge(birthdate) {
+    const now = new Date();
+    let age = now.getFullYear() - birthdate.getFullYear();
+    const monthDifference = now.getMonth() - birthdate.getMonth();
+    if (monthDifference < 0 || (monthDifference === 0 && now.getDate() < birthdate.getDate())) {
+        age--;
+    }
+    return age;
 }
 
 /**
@@ -929,6 +1023,16 @@ function isEqual(obj1, obj2) {
     if (type === 'function')
         return areFunctionsEqual();
     return arePrimativesEqual();
+}
+/**
+ * Generate unique identificator
+ * @returns Random GUID
+ */
+function generateGuid() {
+    let S4 = function () {
+        return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
+    };
+    return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
 }
 
 /**
@@ -1336,7 +1440,7 @@ function remove(collection, predicate) {
  * @param predicate Function to define if allowed to add new item
  * @returns True if successfully added
  */
-function addItem(collection, item, predicate) {
+function addItem(collection, item, predicate = null) {
     if (!isDefined(collection))
         collection = new Array();
     if (isDefined(predicate) && predicate(item))
@@ -1398,6 +1502,33 @@ function getCollectionOrEmpty(collection) {
     return isDefined(collection) ? collection : [];
 }
 
+/**
+ * Build HTTP parameters (GET) from request object
+ * @param value Request object
+ *  * @returns HTTP parameters
+ */
+function buildHttpParams(value) {
+    let params = {}, httpParams = new HttpParams();
+    _build(params, value, CommonConstants.EMPTY_STRING);
+    Object.keys(params).forEach(key => httpParams = httpParams.append(key, params[key]));
+    return httpParams;
+    function _build(params, value, path, isArray = false) {
+        const ARRAY_PART = ']';
+        Object.keys(value).forEach(key => {
+            if (value[key] instanceof Array) {
+                _build(params, value[key], `${path}${key}[`, true);
+            }
+            else if (value[key] instanceof Object) {
+                _build(params, value[key], `${path}${key}${isArray ? `${ARRAY_PART}${CommonConstants.DOT}` : CommonConstants.DOT}`);
+            }
+            else {
+                if (isDefined(value[key]))
+                    params[`${path}${key}${isArray ? ARRAY_PART : CommonConstants.EMPTY_STRING}`] = value[key];
+            }
+        });
+    }
+}
+
 class ThrowElementOnHoverDirective {
     constructor(el) {
         this.el = el;
@@ -1723,6 +1854,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 args: ['load', ['$event']]
             }] } });
 
+class CollapseExpandDirective {
+    constructor(el) {
+        this.el = el;
+        this.EXPAND_COLLAPSE_TRANSITION_DELAY_DEFAULT = 0.5;
+        this.style.transition = this.getTransitionValue();
+        this.style.overflow = UIClass.Hidden;
+    }
+    set expand(expand) {
+        this.style.maxHeight = expand
+            ? getCssLikeValue(this.el.nativeElement.scrollHeight)
+            : 0;
+    }
+    set delay(value) {
+        this.style.transition = this.getTransitionValue(value);
+    }
+    ;
+    get style() {
+        return this.el.nativeElement.style;
+    }
+    getTransitionValue(delay = this.EXPAND_COLLAPSE_TRANSITION_DELAY_DEFAULT) {
+        return `max-height ${delay}s ease-out`;
+    }
+}
+CollapseExpandDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CollapseExpandDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+CollapseExpandDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: CollapseExpandDirective, selector: "[sfcCollapseExpand]", inputs: { expand: ["sfcCollapseExpand", "expand"], delay: "delay" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CollapseExpandDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[sfcCollapseExpand]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { expand: [{
+                type: Input,
+                args: ['sfcCollapseExpand']
+            }], delay: [{
+                type: Input
+            }] } });
+
+class ComponentReferenceDirective {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+    }
+}
+ComponentReferenceDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ComponentReferenceDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+ComponentReferenceDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: ComponentReferenceDirective, selector: "[sfcComponentReference]", exportAs: ["componentRef"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ComponentReferenceDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[sfcComponentReference]',
+                    exportAs: 'componentRef',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+
 class SwitchMultiCasePipe {
     transform(cases, switchOption) {
         return cases.includes(switchOption) ? switchOption : !switchOption;
@@ -1737,6 +1920,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 }]
         }] });
 
+class SortByPipe {
+    transform(value, path, direction = SortingDirection.Ascending) {
+        if (!any(value)) {
+            return value;
+        } // no array
+        if (value.length <= 1) {
+            return value;
+        } // array with only one item
+        if (isNullOrEmptyString(path)) {
+            return value;
+        } // no path
+        return sortByPath(value, path, direction);
+    }
+}
+SortByPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SortByPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+SortByPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: SortByPipe, name: "sfcSortBy" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SortByPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'sfcSortBy' }]
+        }] });
+
 var ButtonType;
 (function (ButtonType) {
     ButtonType["Bordered"] = "bordered";
@@ -1764,7 +1968,7 @@ class ButtonComponent {
     }
 }
 ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ButtonComponent, selector: "sfc-button", inputs: { text: "text", iconBefore: "iconBefore", iconAfter: "iconAfter", disabled: "disabled", types: "types" }, host: { properties: { "class.disabled": "this.disabled" } }, ngImport: i0, template: "<a class=\"button\" [ngClass]=\"classes\">\r\n    <fa-icon *ngIf=\"iconBefore\" class=\"icon before\" [icon]=\"iconBefore\"></fa-icon>\r\n    <span class=\"text\">{{label}}</span>\r\n    <fa-icon *ngIf=\"iconAfter\" class=\"icon after\" [icon]=\"iconAfter\"></fa-icon>\r\n</a>", styles: [":host .button.bordered{border:solid 2px;transition:color .5s ease;transition:border-color .5s ease}:host .button.bordered,:host-context(.sfc-default-theme) :host .button.bordered{color:#545e61}:host-context(.sfc-dark-theme) :host .button.bordered{color:#fff}:host .button.bordered,:host-context(.sfc-default-theme) :host .button.bordered{border-color:#545e61}:host-context(.sfc-dark-theme) :host .button.bordered{border-color:#fff}:host .button.filled{color:#fff!important;transition:border-color .5s ease;transition:background .5s ease}:host .button.filled,:host-context(.sfc-default-theme) :host .button.filled{border-color:#545e61}:host-context(.sfc-dark-theme) :host .button.filled{border-color:#545e61}:host .button.filled,:host-context(.sfc-default-theme) :host .button.filled{background:#545e61}:host-context(.sfc-dark-theme) :host .button.filled{background:#545e61}:host.disabled .button.filled{color:#fff!important;transition:border-color .5s ease;transition:background .5s ease}:host.disabled .button.filled,:host-context(.sfc-default-theme) :host.disabled .button.filled{border-color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .button.filled{border-color:#bdbdbd}:host.disabled .button.filled,:host-context(.sfc-default-theme) :host.disabled .button.filled{background:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .button.filled{background:#bdbdbd}:host:hover .button.filled{color:#fff!important;transition:border-color .5s ease;transition:background .5s ease}:host:hover .button.filled,:host-context(.sfc-default-theme) :host:hover .button.filled{border-color:#ffce54}:host-context(.sfc-dark-theme) :host:hover .button.filled{border-color:#ffce54}:host:hover .button.filled,:host-context(.sfc-default-theme) :host:hover .button.filled{background:#ffce54}:host-context(.sfc-dark-theme) :host:hover .button.filled{background:#ffce54}:host .button.rounded{border:solid 2px;transition:color .5s ease;transition:border-color .5s ease;border-radius:1.25em;padding:.4em 1.2em}:host .button.rounded,:host-context(.sfc-default-theme) :host .button.rounded{color:#545e61}:host-context(.sfc-dark-theme) :host .button.rounded{color:#fff}:host .button.rounded,:host-context(.sfc-default-theme) :host .button.rounded{border-color:#545e61}:host-context(.sfc-dark-theme) :host .button.rounded{border-color:#fff}:host .button.rounded.filled{transition:border-color .5s ease}:host .button.rounded.filled,:host-context(.sfc-default-theme) :host .button.rounded.filled{border-color:#545e61}:host-context(.sfc-dark-theme) :host .button.rounded.filled{border-color:#545e61}:host.disabled .button.rounded.filled{border-color:#bdbdbd}:host:not(.disabled):hover .button.rounded.filled{border-color:#ffce54}:host .button.circled{border:solid 2px;transition:color .5s ease;transition:border-color .5s ease;width:5em;height:5em;border-radius:50%}:host .button.circled,:host-context(.sfc-default-theme) :host .button.circled{color:#545e61}:host-context(.sfc-dark-theme) :host .button.circled{color:#fff}:host .button.circled,:host-context(.sfc-default-theme) :host .button.circled{border-color:#545e61}:host-context(.sfc-dark-theme) :host .button.circled{border-color:#fff}:host .button.circled .text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}:host{display:inline-block;font-size:1em}:host .button{box-sizing:border-box;display:inline-flex;justify-content:center;flex-wrap:wrap;align-items:center;overflow:hidden;text-align:center;text-decoration:none;white-space:nowrap;font-size:.9em;cursor:pointer;-webkit-user-select:none;user-select:none;width:inherit;transition:color .5s ease;transition:color .5s ease,border-color .5s ease,background .5s ease!important}:host .button,:host-context(.sfc-default-theme) :host .button{color:#545e61}:host-context(.sfc-dark-theme) :host .button{color:#fff}:host .button .icon{padding:3px}:host .button .text{padding:3px;white-space:initial;text-overflow:ellipsis;overflow:hidden}:host .button .text:empty{display:none}:host.disabled{pointer-events:none}:host.disabled .button{transition:color .5s ease;transition:border-color .5s ease}:host.disabled .button,:host-context(.sfc-default-theme) :host.disabled .button{color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .button{color:#656d78}:host.disabled .button,:host-context(.sfc-default-theme) :host.disabled .button{border-color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .button{border-color:#656d78}:host:not(.disabled):hover .button{color:#ffce54;border-color:#ffce54}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
+ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ButtonComponent, selector: "sfc-button", inputs: { text: "text", iconBefore: "iconBefore", iconAfter: "iconAfter", disabled: "disabled", types: "types" }, host: { properties: { "class.disabled": "this.disabled" } }, ngImport: i0, template: "<a class=\"button\" [ngClass]=\"classes\">\r\n    <fa-icon *ngIf=\"iconBefore\" class=\"icon before\" [icon]=\"iconBefore\"></fa-icon>\r\n    <span class=\"text\">{{label}}</span>\r\n    <fa-icon *ngIf=\"iconAfter\" class=\"icon after\" [icon]=\"iconAfter\"></fa-icon>\r\n</a>", styles: [":host .button.bordered{border:solid 2px;transition:color .5s ease;transition:border-color .5s ease}:host .button.bordered,:host-context(.sfc-default-theme) :host .button.bordered{color:#545e61}:host-context(.sfc-dark-theme) :host .button.bordered{color:#fff}:host .button.bordered,:host-context(.sfc-default-theme) :host .button.bordered{border-color:#545e61}:host-context(.sfc-dark-theme) :host .button.bordered{border-color:#fff}:host .button.filled{color:#fff!important;transition:border-color .5s ease;transition:background .5s ease}:host .button.filled,:host-context(.sfc-default-theme) :host .button.filled{border-color:#545e61}:host-context(.sfc-dark-theme) :host .button.filled{border-color:#545e61}:host .button.filled,:host-context(.sfc-default-theme) :host .button.filled{background:#545e61}:host-context(.sfc-dark-theme) :host .button.filled{background:#545e61}:host.disabled .button.filled{color:#fff!important;transition:border-color .5s ease;transition:background .5s ease}:host.disabled .button.filled,:host-context(.sfc-default-theme) :host.disabled .button.filled{border-color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .button.filled{border-color:#bdbdbd}:host.disabled .button.filled,:host-context(.sfc-default-theme) :host.disabled .button.filled{background:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .button.filled{background:#bdbdbd}:host:hover .button.filled{color:#fff!important;transition:border-color .5s ease;transition:background .5s ease}:host:hover .button.filled,:host-context(.sfc-default-theme) :host:hover .button.filled{border-color:#ffce54}:host-context(.sfc-dark-theme) :host:hover .button.filled{border-color:#ffce54}:host:hover .button.filled,:host-context(.sfc-default-theme) :host:hover .button.filled{background:#ffce54}:host-context(.sfc-dark-theme) :host:hover .button.filled{background:#ffce54}:host .button.rounded{border:solid 2px;transition:color .5s ease;transition:border-color .5s ease;border-radius:1.25em;padding:.4em 1.2em}:host .button.rounded,:host-context(.sfc-default-theme) :host .button.rounded{color:#545e61}:host-context(.sfc-dark-theme) :host .button.rounded{color:#fff}:host .button.rounded,:host-context(.sfc-default-theme) :host .button.rounded{border-color:#545e61}:host-context(.sfc-dark-theme) :host .button.rounded{border-color:#fff}:host .button.rounded.filled{transition:border-color .5s ease}:host .button.rounded.filled,:host-context(.sfc-default-theme) :host .button.rounded.filled{border-color:#545e61}:host-context(.sfc-dark-theme) :host .button.rounded.filled{border-color:#545e61}:host.disabled .button.rounded.filled{border-color:#bdbdbd}:host:not(.disabled):hover .button.rounded.filled{border-color:#ffce54}:host .button.circled{border:solid 2px;transition:color .5s ease;transition:border-color .5s ease;width:5em;height:5em;border-radius:50%}:host .button.circled,:host-context(.sfc-default-theme) :host .button.circled{color:#545e61}:host-context(.sfc-dark-theme) :host .button.circled{color:#fff}:host .button.circled,:host-context(.sfc-default-theme) :host .button.circled{border-color:#545e61}:host-context(.sfc-dark-theme) :host .button.circled{border-color:#fff}:host .button.circled .text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}:host{display:inline-block;font-size:1em}:host .button{box-sizing:border-box;display:inline-flex;justify-content:center;flex-wrap:wrap;align-items:center;overflow:hidden;text-align:center;text-decoration:none;white-space:nowrap;font-size:.9em;cursor:pointer;-webkit-user-select:none;user-select:none;width:inherit;transition:color .5s ease;transition:color .5s ease,border-color .5s ease,background .5s ease!important}:host .button,:host-context(.sfc-default-theme) :host .button{color:#545e61}:host-context(.sfc-dark-theme) :host .button{color:#fff}:host .button .icon{padding:3px}:host .button .text{padding:3px;white-space:initial;text-overflow:ellipsis;overflow:hidden}:host .button .text:empty{display:none}:host.disabled{pointer-events:none}:host.disabled .button{transition:color .5s ease;transition:border-color .5s ease}:host.disabled .button,:host-context(.sfc-default-theme) :host.disabled .button{color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .button{color:#656d78}:host.disabled .button,:host-context(.sfc-default-theme) :host.disabled .button{border-color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .button{border-color:#656d78}:host:not(.disabled):hover .button{color:#ffce54;border-color:#ffce54}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sfc-button', template: "<a class=\"button\" [ngClass]=\"classes\">\r\n    <fa-icon *ngIf=\"iconBefore\" class=\"icon before\" [icon]=\"iconBefore\"></fa-icon>\r\n    <span class=\"text\">{{label}}</span>\r\n    <fa-icon *ngIf=\"iconAfter\" class=\"icon after\" [icon]=\"iconAfter\"></fa-icon>\r\n</a>", styles: [":host .button.bordered{border:solid 2px;transition:color .5s ease;transition:border-color .5s ease}:host .button.bordered,:host-context(.sfc-default-theme) :host .button.bordered{color:#545e61}:host-context(.sfc-dark-theme) :host .button.bordered{color:#fff}:host .button.bordered,:host-context(.sfc-default-theme) :host .button.bordered{border-color:#545e61}:host-context(.sfc-dark-theme) :host .button.bordered{border-color:#fff}:host .button.filled{color:#fff!important;transition:border-color .5s ease;transition:background .5s ease}:host .button.filled,:host-context(.sfc-default-theme) :host .button.filled{border-color:#545e61}:host-context(.sfc-dark-theme) :host .button.filled{border-color:#545e61}:host .button.filled,:host-context(.sfc-default-theme) :host .button.filled{background:#545e61}:host-context(.sfc-dark-theme) :host .button.filled{background:#545e61}:host.disabled .button.filled{color:#fff!important;transition:border-color .5s ease;transition:background .5s ease}:host.disabled .button.filled,:host-context(.sfc-default-theme) :host.disabled .button.filled{border-color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .button.filled{border-color:#bdbdbd}:host.disabled .button.filled,:host-context(.sfc-default-theme) :host.disabled .button.filled{background:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .button.filled{background:#bdbdbd}:host:hover .button.filled{color:#fff!important;transition:border-color .5s ease;transition:background .5s ease}:host:hover .button.filled,:host-context(.sfc-default-theme) :host:hover .button.filled{border-color:#ffce54}:host-context(.sfc-dark-theme) :host:hover .button.filled{border-color:#ffce54}:host:hover .button.filled,:host-context(.sfc-default-theme) :host:hover .button.filled{background:#ffce54}:host-context(.sfc-dark-theme) :host:hover .button.filled{background:#ffce54}:host .button.rounded{border:solid 2px;transition:color .5s ease;transition:border-color .5s ease;border-radius:1.25em;padding:.4em 1.2em}:host .button.rounded,:host-context(.sfc-default-theme) :host .button.rounded{color:#545e61}:host-context(.sfc-dark-theme) :host .button.rounded{color:#fff}:host .button.rounded,:host-context(.sfc-default-theme) :host .button.rounded{border-color:#545e61}:host-context(.sfc-dark-theme) :host .button.rounded{border-color:#fff}:host .button.rounded.filled{transition:border-color .5s ease}:host .button.rounded.filled,:host-context(.sfc-default-theme) :host .button.rounded.filled{border-color:#545e61}:host-context(.sfc-dark-theme) :host .button.rounded.filled{border-color:#545e61}:host.disabled .button.rounded.filled{border-color:#bdbdbd}:host:not(.disabled):hover .button.rounded.filled{border-color:#ffce54}:host .button.circled{border:solid 2px;transition:color .5s ease;transition:border-color .5s ease;width:5em;height:5em;border-radius:50%}:host .button.circled,:host-context(.sfc-default-theme) :host .button.circled{color:#545e61}:host-context(.sfc-dark-theme) :host .button.circled{color:#fff}:host .button.circled,:host-context(.sfc-default-theme) :host .button.circled{border-color:#545e61}:host-context(.sfc-dark-theme) :host .button.circled{border-color:#fff}:host .button.circled .text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}:host{display:inline-block;font-size:1em}:host .button{box-sizing:border-box;display:inline-flex;justify-content:center;flex-wrap:wrap;align-items:center;overflow:hidden;text-align:center;text-decoration:none;white-space:nowrap;font-size:.9em;cursor:pointer;-webkit-user-select:none;user-select:none;width:inherit;transition:color .5s ease;transition:color .5s ease,border-color .5s ease,background .5s ease!important}:host .button,:host-context(.sfc-default-theme) :host .button{color:#545e61}:host-context(.sfc-dark-theme) :host .button{color:#fff}:host .button .icon{padding:3px}:host .button .text{padding:3px;white-space:initial;text-overflow:ellipsis;overflow:hidden}:host .button .text:empty{display:none}:host.disabled{pointer-events:none}:host.disabled .button{transition:color .5s ease;transition:border-color .5s ease}:host.disabled .button,:host-context(.sfc-default-theme) :host.disabled .button{color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .button{color:#656d78}:host.disabled .button,:host-context(.sfc-default-theme) :host.disabled .button{border-color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .button{border-color:#656d78}:host:not(.disabled):hover .button{color:#ffce54;border-color:#ffce54}\n"] }]
@@ -1796,6 +2000,7 @@ class TooltipComponent {
         this.tooltipType = TooltipType.Hover;
         this.tooltipPosition = Position.Top;
         this.tooltipShow = false;
+        this.resize = true;
         // preserved position
         this._position = Position.Top;
     }
@@ -1808,20 +2013,22 @@ class TooltipComponent {
         this._position = this.tooltipPosition;
     }
     ngAfterContentInit() {
-        this._resizeSubscription = this.resizeService.onResize$
-            .pipe(startWith(this.window))
-            .subscribe(window => this.tooltipPosition = window.innerWidth <= MediaLimits.Tablet
-            ? Position.Bottom : this._position);
+        if (this.resize) {
+            this._resizeSubscription = this.resizeService.onResize$
+                .pipe(startWith(this.window))
+                .subscribe(window => this.tooltipPosition = window.innerWidth <= MediaLimits.Tablet
+                ? Position.Bottom : this._position);
+        }
     }
     ngOnDestroy() {
         this._resizeSubscription?.unsubscribe();
     }
 }
 TooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TooltipComponent, deps: [{ token: ResizeService }, { token: WINDOW }], target: i0.ɵɵFactoryTarget.Component });
-TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TooltipComponent, selector: "[sfc-tooltip]", inputs: { value: ["sfc-tooltip", "value"], tooltipType: "tooltipType", tooltipPosition: "tooltipPosition", tooltipShow: "tooltipShow" }, host: { listeners: { "click": "click()" }, properties: { "attr.value": "this.value", "attr.type": "this.tooltipType", "attr.position": "this.tooltipPosition", "class.show": "this.tooltipShow" } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":host{position:relative}:host:before,:host:after{position:absolute;left:50%;bottom:calc(100% + 5px);pointer-events:none;transition:.2s;will-change:transform}:host:hover:before,:host.show:before{content:attr(value);padding:.4em .7em;font-size:.8em;font-weight:initial;width:inherit;max-width:18.75em;border-radius:6px;background-color:#545e61;box-shadow:0 0 20.25em #aab2bd;color:#fff;text-align:center;white-space:pre-wrap;overflow:hidden;word-wrap:break-word;z-index:9999}:host:after{content:\"\";border-style:solid;transition-duration:0s;transform:translate(-50%) scaleY(0)}:host[type=hover]:before,:host[type=hover]:after,:host:not(.show):before,:host:not(.show):after{visibility:hidden;opacity:0}:host[type=hover]:hover:before,:host[type=hover]:hover:after,:host.show:before,:host.show:after{visibility:visible;opacity:1}:host[type=hover]:hover:before,:host.show:before{transition-delay:.1s}:host[type=hover]:hover:after,:host.show:after{transition-delay:.3s;transition-duration:.2s;transform:translate(-50%) scaleY(1)}:host[position=top]:before,:host[position=top]:after{left:50%;bottom:calc(100% + 5px)}:host[position=top]:before{transform:translate(-50%,-5px) scale(.5)}:host[position=top]:hover:before,:host[position=top].show:before{transform:translate(-50%,-.25em) scale(1)}:host[position=top]:after{border-width:.25em .25em 0;border-color:#545e61 transparent transparent transparent;transform-origin:top}:host[position=left]:before,:host[position=left]:after{left:auto;right:calc(100% + 5px);bottom:50%}:host[position=left]:before{transform:translate(-.25em,50%) scale(.5)}:host[position=left]:hover:before,:host[position=left].show:before{transform:translate(-.31em,50%) scale(1)}:host[position=left]:after{border-width:.25em 0 .25em .25em;border-color:transparent transparent transparent #545e61;transform-origin:left;transform:translateY(50%) scaleX(0)}:host[position=left]:hover:after,:host[position=left].show:after{transform:translateY(50%) scaleX(1)}:host[position=right]:before,:host[position=right]:after{left:calc(100% + 5px);bottom:50%}:host[position=right]:before{transform:translate(5px,50%) scale(.5)}:host[position=right]:hover:before,:host[position=right].show:before{transform:translate(.31em,50%) scale(1)}:host[position=right]:after{border-width:.25em .25em .25em 0;border-color:transparent #545e61 transparent transparent;transform-origin:right;transform:translateY(50%) scaleX(0)}:host[position=right]:hover:after,:host[position=right].show:after{transform:translateY(50%) scaleX(1)}:host[position=bottom]:before,:host[position=bottom]:after{top:calc(100% + 5px);bottom:auto}:host[position=bottom]:before{transform:translate(-50%,5px) scale(.5)}:host[position=bottom]:hover:before,:host[position=bottom].show:before{transform:translate(-50%,.31em) scale(1)}:host[position=bottom]:after{border-width:0 .25em .25em;border-color:transparent transparent #545e61 transparent;transform-origin:bottom}\n"] });
+TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TooltipComponent, selector: "[sfc-tooltip]", inputs: { value: ["sfc-tooltip", "value"], tooltipType: "tooltipType", tooltipPosition: "tooltipPosition", tooltipShow: "tooltipShow", resize: "resize" }, host: { listeners: { "click": "click()" }, properties: { "attr.value": "this.value", "attr.type": "this.tooltipType", "attr.position": "this.tooltipPosition", "class.show": "this.tooltipShow" } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":host{position:relative}:host:before,:host:after{position:absolute;left:50%;bottom:calc(100% + 5px);pointer-events:none;transition:.2s;will-change:transform}:host:hover:before,:host.show:before{content:attr(value);padding:.4em .7em;font-size:.8em;font-weight:initial;width:inherit;max-width:18.75em;border-radius:6px;background-color:#545e61;box-shadow:0 0 20.25em #aab2bd;color:#fff;text-align:center;white-space:pre-wrap;overflow:hidden;word-wrap:break-word;z-index:9999}:host:after{content:\"\";border-style:solid;transition-duration:0s;transform:translate(-50%) scaleY(0);z-index:9999}:host[type=hover]:before,:host[type=hover]:after,:host:not(.show):before,:host:not(.show):after{visibility:hidden;opacity:0}:host[type=hover]:hover:before,:host[type=hover]:hover:after,:host.show:before,:host.show:after{visibility:visible;opacity:1}:host[type=hover]:hover:before,:host.show:before{transition-delay:.1s}:host[type=hover]:hover:after,:host.show:after{transition-delay:.3s;transition-duration:.2s;transform:translate(-50%) scaleY(1)}:host[position=top]:before,:host[position=top]:after{left:50%;bottom:calc(100% + 5px)}:host[position=top]:before{transform:translate(-50%,-5px) scale(.5)}:host[position=top]:hover:before,:host[position=top].show:before{transform:translate(-50%,-.25em) scale(1)}:host[position=top]:after{border-width:.25em .25em 0;border-color:#545e61 transparent transparent transparent;transform-origin:top}:host[position=left]:before,:host[position=left]:after{left:auto;right:calc(100% + 5px);bottom:50%}:host[position=left]:before{transform:translate(-.25em,50%) scale(.5)}:host[position=left]:hover:before,:host[position=left].show:before{transform:translate(-.31em,50%) scale(1)}:host[position=left]:after{border-width:.25em 0 .25em .25em;border-color:transparent transparent transparent #545e61;transform-origin:left;transform:translateY(50%) scaleX(0)}:host[position=left]:hover:after,:host[position=left].show:after{transform:translateY(50%) scaleX(1)}:host[position=right]:before,:host[position=right]:after{left:calc(100% + 5px);bottom:50%}:host[position=right]:before{transform:translate(5px,50%) scale(.5)}:host[position=right]:hover:before,:host[position=right].show:before{transform:translate(.31em,50%) scale(1)}:host[position=right]:after{border-width:.25em .25em .25em 0;border-color:transparent #545e61 transparent transparent;transform-origin:right;transform:translateY(50%) scaleX(0)}:host[position=right]:hover:after,:host[position=right].show:after{transform:translateY(50%) scaleX(1)}:host[position=bottom]:before,:host[position=bottom]:after{top:calc(100% + 5px);bottom:auto}:host[position=bottom]:before{transform:translate(-50%,5px) scale(.5)}:host[position=bottom]:hover:before,:host[position=bottom].show:before{transform:translate(-50%,.31em) scale(1)}:host[position=bottom]:after{border-width:0 .25em .25em;border-color:transparent transparent #545e61 transparent;transform-origin:bottom}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TooltipComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[sfc-tooltip]', template: `<ng-content></ng-content>`, styles: [":host{position:relative}:host:before,:host:after{position:absolute;left:50%;bottom:calc(100% + 5px);pointer-events:none;transition:.2s;will-change:transform}:host:hover:before,:host.show:before{content:attr(value);padding:.4em .7em;font-size:.8em;font-weight:initial;width:inherit;max-width:18.75em;border-radius:6px;background-color:#545e61;box-shadow:0 0 20.25em #aab2bd;color:#fff;text-align:center;white-space:pre-wrap;overflow:hidden;word-wrap:break-word;z-index:9999}:host:after{content:\"\";border-style:solid;transition-duration:0s;transform:translate(-50%) scaleY(0)}:host[type=hover]:before,:host[type=hover]:after,:host:not(.show):before,:host:not(.show):after{visibility:hidden;opacity:0}:host[type=hover]:hover:before,:host[type=hover]:hover:after,:host.show:before,:host.show:after{visibility:visible;opacity:1}:host[type=hover]:hover:before,:host.show:before{transition-delay:.1s}:host[type=hover]:hover:after,:host.show:after{transition-delay:.3s;transition-duration:.2s;transform:translate(-50%) scaleY(1)}:host[position=top]:before,:host[position=top]:after{left:50%;bottom:calc(100% + 5px)}:host[position=top]:before{transform:translate(-50%,-5px) scale(.5)}:host[position=top]:hover:before,:host[position=top].show:before{transform:translate(-50%,-.25em) scale(1)}:host[position=top]:after{border-width:.25em .25em 0;border-color:#545e61 transparent transparent transparent;transform-origin:top}:host[position=left]:before,:host[position=left]:after{left:auto;right:calc(100% + 5px);bottom:50%}:host[position=left]:before{transform:translate(-.25em,50%) scale(.5)}:host[position=left]:hover:before,:host[position=left].show:before{transform:translate(-.31em,50%) scale(1)}:host[position=left]:after{border-width:.25em 0 .25em .25em;border-color:transparent transparent transparent #545e61;transform-origin:left;transform:translateY(50%) scaleX(0)}:host[position=left]:hover:after,:host[position=left].show:after{transform:translateY(50%) scaleX(1)}:host[position=right]:before,:host[position=right]:after{left:calc(100% + 5px);bottom:50%}:host[position=right]:before{transform:translate(5px,50%) scale(.5)}:host[position=right]:hover:before,:host[position=right].show:before{transform:translate(.31em,50%) scale(1)}:host[position=right]:after{border-width:.25em .25em .25em 0;border-color:transparent #545e61 transparent transparent;transform-origin:right;transform:translateY(50%) scaleX(0)}:host[position=right]:hover:after,:host[position=right].show:after{transform:translateY(50%) scaleX(1)}:host[position=bottom]:before,:host[position=bottom]:after{top:calc(100% + 5px);bottom:auto}:host[position=bottom]:before{transform:translate(-50%,5px) scale(.5)}:host[position=bottom]:hover:before,:host[position=bottom].show:before{transform:translate(-50%,.31em) scale(1)}:host[position=bottom]:after{border-width:0 .25em .25em;border-color:transparent transparent #545e61 transparent;transform-origin:bottom}\n"] }]
+            args: [{ selector: '[sfc-tooltip]', template: `<ng-content></ng-content>`, styles: [":host{position:relative}:host:before,:host:after{position:absolute;left:50%;bottom:calc(100% + 5px);pointer-events:none;transition:.2s;will-change:transform}:host:hover:before,:host.show:before{content:attr(value);padding:.4em .7em;font-size:.8em;font-weight:initial;width:inherit;max-width:18.75em;border-radius:6px;background-color:#545e61;box-shadow:0 0 20.25em #aab2bd;color:#fff;text-align:center;white-space:pre-wrap;overflow:hidden;word-wrap:break-word;z-index:9999}:host:after{content:\"\";border-style:solid;transition-duration:0s;transform:translate(-50%) scaleY(0);z-index:9999}:host[type=hover]:before,:host[type=hover]:after,:host:not(.show):before,:host:not(.show):after{visibility:hidden;opacity:0}:host[type=hover]:hover:before,:host[type=hover]:hover:after,:host.show:before,:host.show:after{visibility:visible;opacity:1}:host[type=hover]:hover:before,:host.show:before{transition-delay:.1s}:host[type=hover]:hover:after,:host.show:after{transition-delay:.3s;transition-duration:.2s;transform:translate(-50%) scaleY(1)}:host[position=top]:before,:host[position=top]:after{left:50%;bottom:calc(100% + 5px)}:host[position=top]:before{transform:translate(-50%,-5px) scale(.5)}:host[position=top]:hover:before,:host[position=top].show:before{transform:translate(-50%,-.25em) scale(1)}:host[position=top]:after{border-width:.25em .25em 0;border-color:#545e61 transparent transparent transparent;transform-origin:top}:host[position=left]:before,:host[position=left]:after{left:auto;right:calc(100% + 5px);bottom:50%}:host[position=left]:before{transform:translate(-.25em,50%) scale(.5)}:host[position=left]:hover:before,:host[position=left].show:before{transform:translate(-.31em,50%) scale(1)}:host[position=left]:after{border-width:.25em 0 .25em .25em;border-color:transparent transparent transparent #545e61;transform-origin:left;transform:translateY(50%) scaleX(0)}:host[position=left]:hover:after,:host[position=left].show:after{transform:translateY(50%) scaleX(1)}:host[position=right]:before,:host[position=right]:after{left:calc(100% + 5px);bottom:50%}:host[position=right]:before{transform:translate(5px,50%) scale(.5)}:host[position=right]:hover:before,:host[position=right].show:before{transform:translate(.31em,50%) scale(1)}:host[position=right]:after{border-width:.25em .25em .25em 0;border-color:transparent #545e61 transparent transparent;transform-origin:right;transform:translateY(50%) scaleX(0)}:host[position=right]:hover:after,:host[position=right].show:after{transform:translateY(50%) scaleX(1)}:host[position=bottom]:before,:host[position=bottom]:after{top:calc(100% + 5px);bottom:auto}:host[position=bottom]:before{transform:translate(-50%,5px) scale(.5)}:host[position=bottom]:hover:before,:host[position=bottom].show:before{transform:translate(-50%,.31em) scale(1)}:host[position=bottom]:after{border-width:0 .25em .25em;border-color:transparent transparent #545e61 transparent;transform-origin:bottom}\n"] }]
         }], ctorParameters: function () { return [{ type: ResizeService }, { type: Window, decorators: [{
                     type: Inject,
                     args: [WINDOW]
@@ -1846,6 +2053,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             }, {
                 type: HostBinding,
                 args: ['class.show']
+            }], resize: [{
+                type: Input
             }], click: [{
                 type: HostListener,
                 args: ['click']
@@ -2095,10 +2304,10 @@ class CloseComponent {
     }
 }
 CloseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CloseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CloseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: CloseComponent, selector: "sfc-close", ngImport: i0, template: "<div class=\"container\">\r\n    <fa-icon [icon]=\"faTimes\"></fa-icon>\r\n</div>", styles: [":host{color:#545e61;cursor:pointer}:host:hover{color:#ffce54}\n"], dependencies: [{ kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
+CloseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: CloseComponent, selector: "sfc-close", ngImport: i0, template: "<div class=\"container\">\r\n    <ng-content></ng-content>\r\n    <fa-icon [icon]=\"faTimes\"></fa-icon>\r\n</div>", styles: [":host{transition:color .5s ease;cursor:pointer}:host,:host-context(.sfc-default-theme) :host{color:#545e61}:host-context(.sfc-dark-theme) :host{color:#fff}:host:hover{color:#ffce54}\n"], dependencies: [{ kind: "component", type: i1$2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CloseComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-close', template: "<div class=\"container\">\r\n    <fa-icon [icon]=\"faTimes\"></fa-icon>\r\n</div>", styles: [":host{color:#545e61;cursor:pointer}:host:hover{color:#ffce54}\n"] }]
+            args: [{ selector: 'sfc-close', template: "<div class=\"container\">\r\n    <ng-content></ng-content>\r\n    <fa-icon [icon]=\"faTimes\"></fa-icon>\r\n</div>", styles: [":host{transition:color .5s ease;cursor:pointer}:host,:host-context(.sfc-default-theme) :host{color:#545e61}:host-context(.sfc-dark-theme) :host{color:#fff}:host:hover{color:#ffce54}\n"] }]
         }] });
 
 class DefaultModalHeaderComponent {
@@ -2122,10 +2331,10 @@ class DefaultModalHeaderComponent {
     }
 }
 DefaultModalHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DefaultModalHeaderComponent, deps: [{ token: ModalService }], target: i0.ɵɵFactoryTarget.Component });
-DefaultModalHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DefaultModalHeaderComponent, selector: "sfc-default-modal-header", inputs: { model: "model" }, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"content\">\r\n        <fa-icon *ngIf=\"icon\" class=\"icon\" [icon]=\"icon\"></fa-icon>\r\n        <span *ngIf=\"model.text\" class=\"label\">{{model.text}}</span>\r\n        <sfc-close *ngIf=\"model.showCloseIcon\" (click)=\"onClose()\"></sfc-close>\r\n    </div>\r\n\r\n    <sfc-delimeter></sfc-delimeter>\r\n</div>", styles: [":host{display:inline-flex;width:100%}:host .container{width:100%;padding-bottom:.5em}:host .container .content{display:flex;align-items:center;justify-content:center;padding:.5em 0}:host .container .content .icon{position:absolute;left:1.5em;font-size:1.3em}:host .container .content .label{font-size:1.2em;font-weight:700;-webkit-user-select:none;user-select:none;padding:0 .7em}:host .container .content sfc-close{position:absolute;right:1.5em}:host .container ::ng-deep sfc-delimeter.horizontal:before{transition:border-image .5s ease}:host .container ::ng-deep sfc-delimeter.horizontal:before,:host-context(.sfc-default-theme) :host .container ::ng-deep sfc-delimeter.horizontal:before{border-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host-context(.sfc-dark-theme) :host .container ::ng-deep sfc-delimeter.horizontal:before{border-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host .container ::ng-deep sfc-delimeter.horizontal:after{transition:border-image .5s ease}:host .container ::ng-deep sfc-delimeter.horizontal:after,:host-context(.sfc-default-theme) :host .container ::ng-deep sfc-delimeter.horizontal:after{border-image:linear-gradient(to left,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host-context(.sfc-dark-theme) :host .container ::ng-deep sfc-delimeter.horizontal:after{border-image:linear-gradient(to left,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "component", type: DelimeterComponent, selector: "sfc-delimeter", inputs: ["label", "direction"] }, { kind: "component", type: CloseComponent, selector: "sfc-close" }] });
+DefaultModalHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DefaultModalHeaderComponent, selector: "sfc-default-modal-header", inputs: { model: "model" }, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"content\">\r\n        <fa-icon *ngIf=\"icon\" class=\"icon\" [icon]=\"icon\"></fa-icon>\r\n        <span *ngIf=\"model.text\" class=\"label\">{{model.text}}</span>\r\n        <sfc-close *ngIf=\"model.showCloseIcon\" (click)=\"onClose()\"></sfc-close>\r\n    </div>\r\n\r\n    <sfc-delimeter></sfc-delimeter>\r\n</div>", styles: [":host{display:inline-flex;width:100%}:host .container{width:100%;padding-bottom:.5em}:host .container .content{display:flex;align-items:center;justify-content:center;padding:.5em 0}:host .container .content .icon{position:absolute;left:1.5em;font-size:1.3em}:host .container .content .label{font-size:1.2em;font-weight:700;-webkit-user-select:none;user-select:none;padding:0 .7em}:host .container .content sfc-close{position:absolute;right:1.5em;color:#545e61}:host .container .content sfc-close:hover{color:#ffce54}:host .container sfc-delimeter.horizontal:before{transition:border-image .5s ease}:host .container sfc-delimeter.horizontal:before,:host-context(.sfc-default-theme) :host .container sfc-delimeter.horizontal:before{border-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host-context(.sfc-dark-theme) :host .container sfc-delimeter.horizontal:before{border-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host .container sfc-delimeter.horizontal:after{transition:border-image .5s ease}:host .container sfc-delimeter.horizontal:after,:host-context(.sfc-default-theme) :host .container sfc-delimeter.horizontal:after{border-image:linear-gradient(to left,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host-context(.sfc-dark-theme) :host .container sfc-delimeter.horizontal:after{border-image:linear-gradient(to left,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host .container sfc-delimeter.horizontal span{color:#545e61}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "component", type: DelimeterComponent, selector: "sfc-delimeter", inputs: ["label", "direction"] }, { kind: "component", type: CloseComponent, selector: "sfc-close" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DefaultModalHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-default-modal-header', template: "<div class=\"container\">\r\n    <div class=\"content\">\r\n        <fa-icon *ngIf=\"icon\" class=\"icon\" [icon]=\"icon\"></fa-icon>\r\n        <span *ngIf=\"model.text\" class=\"label\">{{model.text}}</span>\r\n        <sfc-close *ngIf=\"model.showCloseIcon\" (click)=\"onClose()\"></sfc-close>\r\n    </div>\r\n\r\n    <sfc-delimeter></sfc-delimeter>\r\n</div>", styles: [":host{display:inline-flex;width:100%}:host .container{width:100%;padding-bottom:.5em}:host .container .content{display:flex;align-items:center;justify-content:center;padding:.5em 0}:host .container .content .icon{position:absolute;left:1.5em;font-size:1.3em}:host .container .content .label{font-size:1.2em;font-weight:700;-webkit-user-select:none;user-select:none;padding:0 .7em}:host .container .content sfc-close{position:absolute;right:1.5em}:host .container ::ng-deep sfc-delimeter.horizontal:before{transition:border-image .5s ease}:host .container ::ng-deep sfc-delimeter.horizontal:before,:host-context(.sfc-default-theme) :host .container ::ng-deep sfc-delimeter.horizontal:before{border-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host-context(.sfc-dark-theme) :host .container ::ng-deep sfc-delimeter.horizontal:before{border-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host .container ::ng-deep sfc-delimeter.horizontal:after{transition:border-image .5s ease}:host .container ::ng-deep sfc-delimeter.horizontal:after,:host-context(.sfc-default-theme) :host .container ::ng-deep sfc-delimeter.horizontal:after{border-image:linear-gradient(to left,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host-context(.sfc-dark-theme) :host .container ::ng-deep sfc-delimeter.horizontal:after{border-image:linear-gradient(to left,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}\n"] }]
+            args: [{ selector: 'sfc-default-modal-header', template: "<div class=\"container\">\r\n    <div class=\"content\">\r\n        <fa-icon *ngIf=\"icon\" class=\"icon\" [icon]=\"icon\"></fa-icon>\r\n        <span *ngIf=\"model.text\" class=\"label\">{{model.text}}</span>\r\n        <sfc-close *ngIf=\"model.showCloseIcon\" (click)=\"onClose()\"></sfc-close>\r\n    </div>\r\n\r\n    <sfc-delimeter></sfc-delimeter>\r\n</div>", styles: [":host{display:inline-flex;width:100%}:host .container{width:100%;padding-bottom:.5em}:host .container .content{display:flex;align-items:center;justify-content:center;padding:.5em 0}:host .container .content .icon{position:absolute;left:1.5em;font-size:1.3em}:host .container .content .label{font-size:1.2em;font-weight:700;-webkit-user-select:none;user-select:none;padding:0 .7em}:host .container .content sfc-close{position:absolute;right:1.5em;color:#545e61}:host .container .content sfc-close:hover{color:#ffce54}:host .container sfc-delimeter.horizontal:before{transition:border-image .5s ease}:host .container sfc-delimeter.horizontal:before,:host-context(.sfc-default-theme) :host .container sfc-delimeter.horizontal:before{border-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host-context(.sfc-dark-theme) :host .container sfc-delimeter.horizontal:before{border-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host .container sfc-delimeter.horizontal:after{transition:border-image .5s ease}:host .container sfc-delimeter.horizontal:after,:host-context(.sfc-default-theme) :host .container sfc-delimeter.horizontal:after{border-image:linear-gradient(to left,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host-context(.sfc-dark-theme) :host .container sfc-delimeter.horizontal:after{border-image:linear-gradient(to left,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host .container sfc-delimeter.horizontal span{color:#545e61}\n"] }]
         }], ctorParameters: function () { return [{ type: ModalService }]; }, propDecorators: { model: [{
                 type: Input
             }] } });
@@ -2202,7 +2411,7 @@ class ModalComponent {
     }
 }
 ModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ModalComponent, deps: [{ token: ModalService }], target: i0.ɵɵFactoryTarget.Component });
-ModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ModalComponent, selector: "sfc-modal", inputs: { body: "body", header: "header", footer: "footer", defaultHeaderModel: "defaultHeaderModel", defaultFooterModel: "defaultFooterModel", hideOnEsc: "hideOnEsc", hideOnClickOutside: "hideOnClickOutside", showHeader: "showHeader", showFooter: "showFooter" }, host: { listeners: { "document:keydown.escape": "onEscapeKeyDownHandler()" } }, queries: [{ propertyName: "templates", predicate: TemplateReferenceDirective, read: TemplateReferenceDirective }], ngImport: i0, template: "<div class=\"overlay\" [@hideOverlay] (click)=\"hideOnClickOutside && close()\">\r\n    <div class=\"content\" [@hideContent] (click)=\"$event.stopPropagation()\">\r\n\r\n        <div *ngIf=\"showHeader\" class=\"header\">\r\n\r\n            <sfc-template-content [referenceContent]=\"header\" [templatesContent]=\"templates\"\r\n                [templateType]=\"ModalTemplate.Header\" [defaultContent]=\"defaultHeader\">\r\n            </sfc-template-content>\r\n\r\n            <ng-template #defaultHeader>\r\n                <sfc-default-modal-header [model]=\"defaultHeaderModel\"> </sfc-default-modal-header>\r\n            </ng-template>\r\n\r\n        </div>\r\n\r\n        <div class=\"body\">\r\n\r\n            <sfc-template-content [referenceContent]=\"body\" [templatesContent]=\"templates\"\r\n                [templateType]=\"ModalTemplate.Body\">\r\n            </sfc-template-content>\r\n\r\n        </div>\r\n\r\n        <div *ngIf=\"showFooter\" class=\"footer\">\r\n\r\n            <sfc-template-content [referenceContent]=\"footer\" [templatesContent]=\"templates\"\r\n                [templateType]=\"ModalTemplate.Footer\" [defaultContent]=\"defaultFooter\">\r\n            </sfc-template-content>\r\n\r\n            <ng-template #defaultFooter>\r\n                <sfc-default-modal-footer [model]=\"defaultFooterModel\"></sfc-default-modal-footer>\r\n            </ng-template>\r\n\r\n        </div>\r\n    </div>\r\n</div>", styles: [".overlay{display:flex;align-items:center;justify-content:center;position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;background-color:#0009;-webkit-backface-visibility:visible;backface-visibility:visible;animation:expand-overlay .4s cubic-bezier(.55,0,.1,1)}@keyframes expand-overlay{0%{visibility:hidden;opacity:0}}.overlay .content{display:flex;align-items:center;position:relative;padding:.9em 1.5em;margin:auto;background-color:#f5f7fa;max-width:calc(100% - 3em);max-height:calc(100% - 3em);border-radius:3px;box-shadow:0 .125em .625em #656d78;transform:scale(1);flex-direction:column;animation:expand-modal .4s cubic-bezier(.55,0,.1,1)}@keyframes expand-modal{0%{visibility:hidden;opacity:0;transform:scale(1.2)}}.overlay .content>div{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:#545e61;flex-direction:row;display:flex;flex:0 0 auto;justify-content:center}.overlay .content>div.body{overflow-y:auto;flex:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TemplateContentComponent, selector: "sfc-template-content", inputs: ["contextData", "referenceContent", "templateType", "templatesContent", "defaultContent"] }, { kind: "component", type: DefaultModalHeaderComponent, selector: "sfc-default-modal-header", inputs: ["model"] }, { kind: "component", type: DefaultModalFooterComponent, selector: "sfc-default-modal-footer", inputs: ["model"] }], animations: [
+ModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ModalComponent, selector: "sfc-modal", inputs: { body: "body", header: "header", footer: "footer", defaultHeaderModel: "defaultHeaderModel", defaultFooterModel: "defaultFooterModel", hideOnEsc: "hideOnEsc", hideOnClickOutside: "hideOnClickOutside", showHeader: "showHeader", showFooter: "showFooter" }, host: { listeners: { "document:keydown.escape": "onEscapeKeyDownHandler()" } }, queries: [{ propertyName: "templates", predicate: TemplateReferenceDirective, read: TemplateReferenceDirective }], ngImport: i0, template: "<div class=\"overlay\" [@hideOverlay] (click)=\"hideOnClickOutside && close()\">\r\n    <div class=\"content\" [@hideContent] (click)=\"$event.stopPropagation()\">\r\n\r\n        <div *ngIf=\"showHeader\" class=\"header\">\r\n\r\n            <sfc-template-content [referenceContent]=\"header\" [templatesContent]=\"templates\"\r\n                [templateType]=\"ModalTemplate.Header\" [defaultContent]=\"defaultHeader\">\r\n            </sfc-template-content>\r\n\r\n            <ng-template #defaultHeader>\r\n                <sfc-default-modal-header [model]=\"defaultHeaderModel\"> </sfc-default-modal-header>\r\n            </ng-template>\r\n\r\n        </div>\r\n\r\n        <div class=\"body\">\r\n            <sfc-template-content [referenceContent]=\"body\" [templatesContent]=\"templates\"\r\n                [templateType]=\"ModalTemplate.Body\">\r\n            </sfc-template-content>\r\n        </div>\r\n\r\n        <div *ngIf=\"showFooter\" class=\"footer\">\r\n\r\n            <sfc-template-content [referenceContent]=\"footer\" [templatesContent]=\"templates\"\r\n                [templateType]=\"ModalTemplate.Footer\" [defaultContent]=\"defaultFooter\">\r\n            </sfc-template-content>\r\n\r\n            <ng-template #defaultFooter>\r\n                <sfc-default-modal-footer [model]=\"defaultFooterModel\"></sfc-default-modal-footer>\r\n            </ng-template>\r\n\r\n        </div>\r\n    </div>\r\n</div>", styles: [".overlay{display:flex;align-items:center;justify-content:center;position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;background-color:#0009;-webkit-backface-visibility:visible;backface-visibility:visible;animation:expand-overlay .4s cubic-bezier(.55,0,.1,1)}@keyframes expand-overlay{0%{visibility:hidden;opacity:0}}.overlay .content{display:flex;align-items:center;position:relative;padding:.9em 1.5em;margin:auto;background-color:#f5f7fa;max-width:calc(100% - 3em);max-height:calc(100% - 3em);border-radius:3px;box-shadow:0 .125em .625em #656d78;transform:scale(1);flex-direction:column;animation:expand-modal .4s cubic-bezier(.55,0,.1,1)}@keyframes expand-modal{0%{visibility:hidden;opacity:0;transform:scale(1.2)}}.overlay .content>div{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:#545e61;flex-direction:row;display:flex;flex:0 0 auto;justify-content:center}.overlay .content>div.body{overflow-y:auto;flex:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TemplateContentComponent, selector: "sfc-template-content", inputs: ["contextData", "referenceContent", "templateType", "templatesContent", "defaultContent"] }, { kind: "component", type: DefaultModalHeaderComponent, selector: "sfc-default-modal-header", inputs: ["model"] }, { kind: "component", type: DefaultModalFooterComponent, selector: "sfc-default-modal-footer", inputs: ["model"] }], animations: [
         trigger('hideOverlay', [
             state('initial', style({ opacity: 1, visibility: 'visible' })),
             state('void', style({ opacity: 0, visibility: 'hidden' })),
@@ -2247,7 +2456,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                             state('void', style({ opacity: 0, visibility: 'hidden', transform: 'scale(1.2)' })),
                             transition('* => void', animate('400ms cubic-bezier(.55, 0, .1, 1)'))
                         ])
-                    ], template: "<div class=\"overlay\" [@hideOverlay] (click)=\"hideOnClickOutside && close()\">\r\n    <div class=\"content\" [@hideContent] (click)=\"$event.stopPropagation()\">\r\n\r\n        <div *ngIf=\"showHeader\" class=\"header\">\r\n\r\n            <sfc-template-content [referenceContent]=\"header\" [templatesContent]=\"templates\"\r\n                [templateType]=\"ModalTemplate.Header\" [defaultContent]=\"defaultHeader\">\r\n            </sfc-template-content>\r\n\r\n            <ng-template #defaultHeader>\r\n                <sfc-default-modal-header [model]=\"defaultHeaderModel\"> </sfc-default-modal-header>\r\n            </ng-template>\r\n\r\n        </div>\r\n\r\n        <div class=\"body\">\r\n\r\n            <sfc-template-content [referenceContent]=\"body\" [templatesContent]=\"templates\"\r\n                [templateType]=\"ModalTemplate.Body\">\r\n            </sfc-template-content>\r\n\r\n        </div>\r\n\r\n        <div *ngIf=\"showFooter\" class=\"footer\">\r\n\r\n            <sfc-template-content [referenceContent]=\"footer\" [templatesContent]=\"templates\"\r\n                [templateType]=\"ModalTemplate.Footer\" [defaultContent]=\"defaultFooter\">\r\n            </sfc-template-content>\r\n\r\n            <ng-template #defaultFooter>\r\n                <sfc-default-modal-footer [model]=\"defaultFooterModel\"></sfc-default-modal-footer>\r\n            </ng-template>\r\n\r\n        </div>\r\n    </div>\r\n</div>", styles: [".overlay{display:flex;align-items:center;justify-content:center;position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;background-color:#0009;-webkit-backface-visibility:visible;backface-visibility:visible;animation:expand-overlay .4s cubic-bezier(.55,0,.1,1)}@keyframes expand-overlay{0%{visibility:hidden;opacity:0}}.overlay .content{display:flex;align-items:center;position:relative;padding:.9em 1.5em;margin:auto;background-color:#f5f7fa;max-width:calc(100% - 3em);max-height:calc(100% - 3em);border-radius:3px;box-shadow:0 .125em .625em #656d78;transform:scale(1);flex-direction:column;animation:expand-modal .4s cubic-bezier(.55,0,.1,1)}@keyframes expand-modal{0%{visibility:hidden;opacity:0;transform:scale(1.2)}}.overlay .content>div{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:#545e61;flex-direction:row;display:flex;flex:0 0 auto;justify-content:center}.overlay .content>div.body{overflow-y:auto;flex:0}\n"] }]
+                    ], template: "<div class=\"overlay\" [@hideOverlay] (click)=\"hideOnClickOutside && close()\">\r\n    <div class=\"content\" [@hideContent] (click)=\"$event.stopPropagation()\">\r\n\r\n        <div *ngIf=\"showHeader\" class=\"header\">\r\n\r\n            <sfc-template-content [referenceContent]=\"header\" [templatesContent]=\"templates\"\r\n                [templateType]=\"ModalTemplate.Header\" [defaultContent]=\"defaultHeader\">\r\n            </sfc-template-content>\r\n\r\n            <ng-template #defaultHeader>\r\n                <sfc-default-modal-header [model]=\"defaultHeaderModel\"> </sfc-default-modal-header>\r\n            </ng-template>\r\n\r\n        </div>\r\n\r\n        <div class=\"body\">\r\n            <sfc-template-content [referenceContent]=\"body\" [templatesContent]=\"templates\"\r\n                [templateType]=\"ModalTemplate.Body\">\r\n            </sfc-template-content>\r\n        </div>\r\n\r\n        <div *ngIf=\"showFooter\" class=\"footer\">\r\n\r\n            <sfc-template-content [referenceContent]=\"footer\" [templatesContent]=\"templates\"\r\n                [templateType]=\"ModalTemplate.Footer\" [defaultContent]=\"defaultFooter\">\r\n            </sfc-template-content>\r\n\r\n            <ng-template #defaultFooter>\r\n                <sfc-default-modal-footer [model]=\"defaultFooterModel\"></sfc-default-modal-footer>\r\n            </ng-template>\r\n\r\n        </div>\r\n    </div>\r\n</div>", styles: [".overlay{display:flex;align-items:center;justify-content:center;position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;background-color:#0009;-webkit-backface-visibility:visible;backface-visibility:visible;animation:expand-overlay .4s cubic-bezier(.55,0,.1,1)}@keyframes expand-overlay{0%{visibility:hidden;opacity:0}}.overlay .content{display:flex;align-items:center;position:relative;padding:.9em 1.5em;margin:auto;background-color:#f5f7fa;max-width:calc(100% - 3em);max-height:calc(100% - 3em);border-radius:3px;box-shadow:0 .125em .625em #656d78;transform:scale(1);flex-direction:column;animation:expand-modal .4s cubic-bezier(.55,0,.1,1)}@keyframes expand-modal{0%{visibility:hidden;opacity:0;transform:scale(1.2)}}.overlay .content>div{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:#545e61;flex-direction:row;display:flex;flex:0 0 auto;justify-content:center}.overlay .content>div.body{overflow-y:auto;flex:0}\n"] }]
         }], ctorParameters: function () { return [{ type: ModalService }]; }, propDecorators: { body: [{
                 type: Input
             }], header: [{
@@ -2425,10 +2634,10 @@ class ToggleSwitcherComponent {
     }
 }
 ToggleSwitcherComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ToggleSwitcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ToggleSwitcherComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ToggleSwitcherComponent, selector: "sfc-toggle-switcher", inputs: { active: "active", disabled: "disabled", leftModel: "leftModel", rightModel: "rightModel" }, host: { listeners: { "click": "onClick()" }, properties: { "class.active": "this.active", "class.disabled": "this.disabled" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"toggle\"></div>\r\n    <div class=\"names\">\r\n        <p class=\"left\">\r\n            <fa-icon *ngIf=\"leftModel.icon\" [icon]=\"leftModel.icon\"></fa-icon>\r\n            <span>{{leftModel.label}}</span>\r\n        </p>\r\n        <p class=\"right\">\r\n            <fa-icon *ngIf=\"rightModel.icon\" [icon]=\"rightModel.icon\"></fa-icon>\r\n            <span>{{rightModel.label}}</span>\r\n        </p>\r\n    </div>\r\n</div>", styles: [":host .container,:host .toggle{height:100%;border-radius:100px}:host .container{width:100%;background-color:#e6e9ed;color:#545e61;border-radius:100px;position:relative;cursor:pointer}:host .container .toggle{position:absolute;width:50%;background-color:#fff;box-shadow:0 .125em .5em #656d78;transition:transform .3s cubic-bezier(.25,.46,.45,.94)}:host .container .names{font-size:90%;font-weight:bolder;width:100%;height:100%;position:relative;display:flex;justify-content:space-around;align-items:center;-webkit-user-select:none;user-select:none;overflow:hidden}:host .container .names p{font-size:90%;text-align:center;margin:0;padding:.5em 1em}:host .container .names p.right{opacity:.5}:host.active .container{background-color:#e6e9ed}:host.active .container .toggle{transform:translate(100%);background-color:#fff}:host.active .container .names{color:#545e61}:host.active .container .names .left{opacity:.5}:host.active .container .names .right{opacity:1}:host.disabled{pointer-events:none}:host.disabled .container{transition:background-color .5s ease}:host.disabled .container,:host-context(.sfc-default-theme) :host.disabled .container{background-color:#f6f6f6}:host-context(.sfc-dark-theme) :host.disabled .container{background-color:#656d78}:host.disabled .container .toggle{transition:background-color .5s ease;box-shadow:none}:host.disabled .container .toggle,:host-context(.sfc-default-theme) :host.disabled .container .toggle{background-color:#e6e9ed}:host-context(.sfc-dark-theme) :host.disabled .container .toggle{background-color:#aab2bd}:host.disabled .container .names{transition:color .5s ease}:host.disabled .container .names,:host-context(.sfc-default-theme) :host.disabled .container .names{color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .container .names{color:#e9e9e9}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
+ToggleSwitcherComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ToggleSwitcherComponent, selector: "sfc-toggle-switcher", inputs: { active: "active", disabled: "disabled", leftModel: "leftModel", rightModel: "rightModel" }, host: { listeners: { "click": "onClick()" }, properties: { "class.active": "this.active", "class.disabled": "this.disabled" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"toggle\"></div>\r\n    <div class=\"names\">\r\n        <p class=\"left\" *ngIf=\"leftModel\">\r\n            <fa-icon *ngIf=\"leftModel.icon\" [icon]=\"leftModel.icon\"></fa-icon>\r\n            <span *ngIf=\"leftModel.label\">{{leftModel.label}}</span>\r\n        </p>\r\n        <p class=\"right\" *ngIf=\"rightModel\">\r\n            <fa-icon *ngIf=\"rightModel.icon\" [icon]=\"rightModel.icon\"></fa-icon>\r\n            <span *ngIf=\"rightModel.label\">{{rightModel.label}}</span>\r\n        </p>\r\n    </div>\r\n</div>", styles: [":host .container,:host .toggle{height:100%;border-radius:100px}:host .container{background-color:#e6e9ed;color:#545e61;border:.1875em solid;border-radius:100px;border-color:#e6e9ed;position:relative;cursor:pointer}:host .container .toggle{position:absolute;width:50%;background-color:#fff;transition:transform .3s cubic-bezier(.25,.46,.45,.94)}:host .container .names{font-size:90%;font-weight:bolder;width:100%;height:100%;position:relative;display:flex;justify-content:space-around;align-items:center;-webkit-user-select:none;user-select:none;overflow:hidden}:host .container .names p{font-size:90%;text-align:center;margin:0;padding:.5em 1em}:host .container .names p span{padding-left:.3em}:host .container .names p.right{opacity:.5}:host.active .container{background-color:#e6e9ed}:host.active .container .toggle{transform:translate(100%);background-color:#fff}:host.active .container .names{color:#545e61}:host.active .container .names .left{opacity:.5}:host.active .container .names .right{opacity:1}:host.disabled{pointer-events:none}:host.disabled .container{transition:background-color .5s ease;transition:border-color .5s ease}:host.disabled .container,:host-context(.sfc-default-theme) :host.disabled .container{background-color:#f6f6f6}:host-context(.sfc-dark-theme) :host.disabled .container{background-color:#656d78}:host.disabled .container,:host-context(.sfc-default-theme) :host.disabled .container{border-color:#f6f6f6}:host-context(.sfc-dark-theme) :host.disabled .container{border-color:#656d78}:host.disabled .container .toggle{transition:background-color .5s ease;box-shadow:none}:host.disabled .container .toggle,:host-context(.sfc-default-theme) :host.disabled .container .toggle{background-color:#e6e9ed}:host-context(.sfc-dark-theme) :host.disabled .container .toggle{background-color:#aab2bd}:host.disabled .container .names{transition:color .5s ease}:host.disabled .container .names,:host-context(.sfc-default-theme) :host.disabled .container .names{color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .container .names{color:#e9e9e9}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ToggleSwitcherComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-toggle-switcher', template: "<div class=\"container\">\r\n    <div class=\"toggle\"></div>\r\n    <div class=\"names\">\r\n        <p class=\"left\">\r\n            <fa-icon *ngIf=\"leftModel.icon\" [icon]=\"leftModel.icon\"></fa-icon>\r\n            <span>{{leftModel.label}}</span>\r\n        </p>\r\n        <p class=\"right\">\r\n            <fa-icon *ngIf=\"rightModel.icon\" [icon]=\"rightModel.icon\"></fa-icon>\r\n            <span>{{rightModel.label}}</span>\r\n        </p>\r\n    </div>\r\n</div>", styles: [":host .container,:host .toggle{height:100%;border-radius:100px}:host .container{width:100%;background-color:#e6e9ed;color:#545e61;border-radius:100px;position:relative;cursor:pointer}:host .container .toggle{position:absolute;width:50%;background-color:#fff;box-shadow:0 .125em .5em #656d78;transition:transform .3s cubic-bezier(.25,.46,.45,.94)}:host .container .names{font-size:90%;font-weight:bolder;width:100%;height:100%;position:relative;display:flex;justify-content:space-around;align-items:center;-webkit-user-select:none;user-select:none;overflow:hidden}:host .container .names p{font-size:90%;text-align:center;margin:0;padding:.5em 1em}:host .container .names p.right{opacity:.5}:host.active .container{background-color:#e6e9ed}:host.active .container .toggle{transform:translate(100%);background-color:#fff}:host.active .container .names{color:#545e61}:host.active .container .names .left{opacity:.5}:host.active .container .names .right{opacity:1}:host.disabled{pointer-events:none}:host.disabled .container{transition:background-color .5s ease}:host.disabled .container,:host-context(.sfc-default-theme) :host.disabled .container{background-color:#f6f6f6}:host-context(.sfc-dark-theme) :host.disabled .container{background-color:#656d78}:host.disabled .container .toggle{transition:background-color .5s ease;box-shadow:none}:host.disabled .container .toggle,:host-context(.sfc-default-theme) :host.disabled .container .toggle{background-color:#e6e9ed}:host-context(.sfc-dark-theme) :host.disabled .container .toggle{background-color:#aab2bd}:host.disabled .container .names{transition:color .5s ease}:host.disabled .container .names,:host-context(.sfc-default-theme) :host.disabled .container .names{color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .container .names{color:#e9e9e9}\n"] }]
+            args: [{ selector: 'sfc-toggle-switcher', template: "<div class=\"container\">\r\n    <div class=\"toggle\"></div>\r\n    <div class=\"names\">\r\n        <p class=\"left\" *ngIf=\"leftModel\">\r\n            <fa-icon *ngIf=\"leftModel.icon\" [icon]=\"leftModel.icon\"></fa-icon>\r\n            <span *ngIf=\"leftModel.label\">{{leftModel.label}}</span>\r\n        </p>\r\n        <p class=\"right\" *ngIf=\"rightModel\">\r\n            <fa-icon *ngIf=\"rightModel.icon\" [icon]=\"rightModel.icon\"></fa-icon>\r\n            <span *ngIf=\"rightModel.label\">{{rightModel.label}}</span>\r\n        </p>\r\n    </div>\r\n</div>", styles: [":host .container,:host .toggle{height:100%;border-radius:100px}:host .container{background-color:#e6e9ed;color:#545e61;border:.1875em solid;border-radius:100px;border-color:#e6e9ed;position:relative;cursor:pointer}:host .container .toggle{position:absolute;width:50%;background-color:#fff;transition:transform .3s cubic-bezier(.25,.46,.45,.94)}:host .container .names{font-size:90%;font-weight:bolder;width:100%;height:100%;position:relative;display:flex;justify-content:space-around;align-items:center;-webkit-user-select:none;user-select:none;overflow:hidden}:host .container .names p{font-size:90%;text-align:center;margin:0;padding:.5em 1em}:host .container .names p span{padding-left:.3em}:host .container .names p.right{opacity:.5}:host.active .container{background-color:#e6e9ed}:host.active .container .toggle{transform:translate(100%);background-color:#fff}:host.active .container .names{color:#545e61}:host.active .container .names .left{opacity:.5}:host.active .container .names .right{opacity:1}:host.disabled{pointer-events:none}:host.disabled .container{transition:background-color .5s ease;transition:border-color .5s ease}:host.disabled .container,:host-context(.sfc-default-theme) :host.disabled .container{background-color:#f6f6f6}:host-context(.sfc-dark-theme) :host.disabled .container{background-color:#656d78}:host.disabled .container,:host-context(.sfc-default-theme) :host.disabled .container{border-color:#f6f6f6}:host-context(.sfc-dark-theme) :host.disabled .container{border-color:#656d78}:host.disabled .container .toggle{transition:background-color .5s ease;box-shadow:none}:host.disabled .container .toggle,:host-context(.sfc-default-theme) :host.disabled .container .toggle{background-color:#e6e9ed}:host-context(.sfc-dark-theme) :host.disabled .container .toggle{background-color:#aab2bd}:host.disabled .container .names{transition:color .5s ease}:host.disabled .container .names,:host-context(.sfc-default-theme) :host.disabled .container .names{color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .container .names{color:#e9e9e9}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { active: [{
                 type: Input
             }, {
@@ -2464,10 +2673,10 @@ class CheckmarkComponent {
     }
 }
 CheckmarkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CheckmarkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CheckmarkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: CheckmarkComponent, selector: "sfc-checkmark", inputs: { active: "active", disabled: "disabled", icon: "icon", type: "type" }, host: { properties: { "class.active": "this.active", "class.disabled": "this.disabled", "class": "this.type" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <span class=\"check\">\r\n        <fa-icon [sfcShowHideElement]=\"active\" [icon]=\"icon\"></fa-icon>\r\n    </span>\r\n</div>", styles: [":host{display:inline-block;transition:color .5s ease}:host,:host-context(.sfc-default-theme) :host{color:#545e61}:host-context(.sfc-dark-theme) :host{color:#fff}:host .check{border:.125em solid;background:transparent;transition:border-color .5s ease,background .5s ease;transition:border-color .5s ease;width:1em;height:1em;cursor:pointer;display:flex;align-items:center;justify-content:center}:host .check,:host-context(.sfc-default-theme) :host .check{border-color:#545e61}:host-context(.sfc-dark-theme) :host .check{border-color:#fff}:host .check fa-icon{transition:opacity .5s ease;font-size:.8em;transition:opacity .3s ease}:host .check fa-icon,:host-context(.sfc-default-theme) :host .check fa-icon{opacity:.5}:host-context(.sfc-dark-theme) :host .check fa-icon{opacity:.8}:host .check:hover{border-color:#ffce54}:host .check:hover fa-icon{transition:opacity .5s ease;color:#ffce54}:host .check:hover fa-icon,:host-context(.sfc-default-theme) :host .check:hover fa-icon{opacity:.8}:host-context(.sfc-dark-theme) :host .check:hover fa-icon{opacity:1}:host.active .check{border-color:#ffce54;background:#ffce54}:host.active .check fa-icon{opacity:1;transform:scale(0);color:#fff;-webkit-text-stroke:0;animation:icon .3s cubic-bezier(1,.008,.565,1.65) .1s 1 forwards}@keyframes icon{0%{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}:host.circle .check{border-radius:50%}:host.rounded .check{border-radius:15%}:host.disabled{pointer-events:none}:host.disabled .check{color:#fff;border-style:dashed;transition:border-color .5s ease}:host.disabled .check,:host-context(.sfc-default-theme) :host.disabled .check{border-color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .check{border-color:#656d78}:host.disabled.active .check{transition:background .5s ease}:host.disabled.active .check,:host-context(.sfc-default-theme) :host.disabled.active .check{background:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled.active .check{background:#656d78}\n"], dependencies: [{ kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: ShowHideElementDirective, selector: "[sfcShowHideElement]", inputs: ["sfcShowHideElement", "delay"] }] });
+CheckmarkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: CheckmarkComponent, selector: "sfc-checkmark", inputs: { active: "active", disabled: "disabled", icon: "icon", type: "type" }, host: { properties: { "class.active": "this.active", "class.disabled": "this.disabled", "class": "this.type" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <span class=\"check\">\r\n        <fa-icon [sfcShowHideElement]=\"active\" [icon]=\"icon\"></fa-icon>\r\n    </span>\r\n</div>", styles: [":host{display:inline-block;transition:color .5s ease}:host,:host-context(.sfc-default-theme) :host{color:#545e61}:host-context(.sfc-dark-theme) :host{color:#fff}:host .check{border:.125em solid;background:transparent;transition:border-color .5s ease,background .5s ease;transition:border-color .5s ease;width:1em;height:1em;cursor:pointer;display:flex;align-items:center;justify-content:center}:host .check,:host-context(.sfc-default-theme) :host .check{border-color:#545e61}:host-context(.sfc-dark-theme) :host .check{border-color:#fff}:host .check fa-icon{transition:opacity .5s ease;color:#fff;font-size:.8em;transition:opacity .3s ease}:host .check fa-icon,:host-context(.sfc-default-theme) :host .check fa-icon{opacity:.5}:host-context(.sfc-dark-theme) :host .check fa-icon{opacity:.8}:host .check:hover{border-color:#ffce54}:host .check:hover fa-icon{transition:opacity .5s ease}:host .check:hover fa-icon,:host-context(.sfc-default-theme) :host .check:hover fa-icon{opacity:.8}:host-context(.sfc-dark-theme) :host .check:hover fa-icon{opacity:1}:host.active .check{border-color:#ffce54;background:#ffce54}:host.active .check fa-icon{opacity:1;transform:scale(0);-webkit-text-stroke:0;animation:icon .3s cubic-bezier(1,.008,.565,1.65) .1s 1 forwards}@keyframes icon{0%{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}:host.circle .check{border-radius:50%}:host.rounded .check{border-radius:15%}:host.disabled{pointer-events:none}:host.disabled .check{color:#fff;border-style:dashed;transition:border-color .5s ease}:host.disabled .check,:host-context(.sfc-default-theme) :host.disabled .check{border-color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .check{border-color:#656d78}:host.disabled.active .check{transition:background .5s ease}:host.disabled.active .check,:host-context(.sfc-default-theme) :host.disabled.active .check{background:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled.active .check{background:#656d78}\n"], dependencies: [{ kind: "component", type: i1$2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: ShowHideElementDirective, selector: "[sfcShowHideElement]", inputs: ["sfcShowHideElement", "delay"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CheckmarkComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-checkmark', template: "<div class=\"container\">\r\n    <span class=\"check\">\r\n        <fa-icon [sfcShowHideElement]=\"active\" [icon]=\"icon\"></fa-icon>\r\n    </span>\r\n</div>", styles: [":host{display:inline-block;transition:color .5s ease}:host,:host-context(.sfc-default-theme) :host{color:#545e61}:host-context(.sfc-dark-theme) :host{color:#fff}:host .check{border:.125em solid;background:transparent;transition:border-color .5s ease,background .5s ease;transition:border-color .5s ease;width:1em;height:1em;cursor:pointer;display:flex;align-items:center;justify-content:center}:host .check,:host-context(.sfc-default-theme) :host .check{border-color:#545e61}:host-context(.sfc-dark-theme) :host .check{border-color:#fff}:host .check fa-icon{transition:opacity .5s ease;font-size:.8em;transition:opacity .3s ease}:host .check fa-icon,:host-context(.sfc-default-theme) :host .check fa-icon{opacity:.5}:host-context(.sfc-dark-theme) :host .check fa-icon{opacity:.8}:host .check:hover{border-color:#ffce54}:host .check:hover fa-icon{transition:opacity .5s ease;color:#ffce54}:host .check:hover fa-icon,:host-context(.sfc-default-theme) :host .check:hover fa-icon{opacity:.8}:host-context(.sfc-dark-theme) :host .check:hover fa-icon{opacity:1}:host.active .check{border-color:#ffce54;background:#ffce54}:host.active .check fa-icon{opacity:1;transform:scale(0);color:#fff;-webkit-text-stroke:0;animation:icon .3s cubic-bezier(1,.008,.565,1.65) .1s 1 forwards}@keyframes icon{0%{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}:host.circle .check{border-radius:50%}:host.rounded .check{border-radius:15%}:host.disabled{pointer-events:none}:host.disabled .check{color:#fff;border-style:dashed;transition:border-color .5s ease}:host.disabled .check,:host-context(.sfc-default-theme) :host.disabled .check{border-color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .check{border-color:#656d78}:host.disabled.active .check{transition:background .5s ease}:host.disabled.active .check,:host-context(.sfc-default-theme) :host.disabled.active .check{background:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled.active .check{background:#656d78}\n"] }]
+            args: [{ selector: 'sfc-checkmark', template: "<div class=\"container\">\r\n    <span class=\"check\">\r\n        <fa-icon [sfcShowHideElement]=\"active\" [icon]=\"icon\"></fa-icon>\r\n    </span>\r\n</div>", styles: [":host{display:inline-block;transition:color .5s ease}:host,:host-context(.sfc-default-theme) :host{color:#545e61}:host-context(.sfc-dark-theme) :host{color:#fff}:host .check{border:.125em solid;background:transparent;transition:border-color .5s ease,background .5s ease;transition:border-color .5s ease;width:1em;height:1em;cursor:pointer;display:flex;align-items:center;justify-content:center}:host .check,:host-context(.sfc-default-theme) :host .check{border-color:#545e61}:host-context(.sfc-dark-theme) :host .check{border-color:#fff}:host .check fa-icon{transition:opacity .5s ease;color:#fff;font-size:.8em;transition:opacity .3s ease}:host .check fa-icon,:host-context(.sfc-default-theme) :host .check fa-icon{opacity:.5}:host-context(.sfc-dark-theme) :host .check fa-icon{opacity:.8}:host .check:hover{border-color:#ffce54}:host .check:hover fa-icon{transition:opacity .5s ease}:host .check:hover fa-icon,:host-context(.sfc-default-theme) :host .check:hover fa-icon{opacity:.8}:host-context(.sfc-dark-theme) :host .check:hover fa-icon{opacity:1}:host.active .check{border-color:#ffce54;background:#ffce54}:host.active .check fa-icon{opacity:1;transform:scale(0);-webkit-text-stroke:0;animation:icon .3s cubic-bezier(1,.008,.565,1.65) .1s 1 forwards}@keyframes icon{0%{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}:host.circle .check{border-radius:50%}:host.rounded .check{border-radius:15%}:host.disabled{pointer-events:none}:host.disabled .check{color:#fff;border-style:dashed;transition:border-color .5s ease}:host.disabled .check,:host-context(.sfc-default-theme) :host.disabled .check{border-color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .check{border-color:#656d78}:host.disabled.active .check{transition:background .5s ease}:host.disabled.active .check,:host-context(.sfc-default-theme) :host.disabled.active .check{background:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled.active .check{background:#656d78}\n"] }]
         }], propDecorators: { active: [{
                 type: Input
             }, {
@@ -2487,53 +2696,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 args: ['class']
             }] } });
 
+var _a;
 class PaginationConstants {
 }
+_a = PaginationConstants;
 PaginationConstants.DEFAULT_SIZE = 5;
 PaginationConstants.DEFAULT_PAGE = 1;
-PaginationConstants.DEFAULT_COUNT = 3;
-
-class PaginationService {
-    constructor() {
-        /**
-         * Handle page changing
-         */
-        this.pageSubject = new Subject();
-        this.page$ = this.pageSubject.asObservable();
-    }
-    /** Need for init pagination observables */
-    init(data$, page = PaginationConstants.DEFAULT_PAGE, pageSize = PaginationConstants.DEFAULT_SIZE) {
-        if (isDefined(data$))
-            this.initObservables(data$, page, pageSize);
-    }
-    /**
-     * Move to page
-     */
-    page(page) {
-        this.pageSubject.next(page);
-    }
-    initObservables(data$, page, pageSize) {
-        this.total$ = data$.pipe(map((p) => p.length));
-        this.totalPages$ = this.total$.pipe(map((total) => Math.ceil(total / pageSize)));
-        this.pagination$ = combineLatest([this.totalPages$, this.page$.pipe(startWith(page))])
-            .pipe(map(([total, page]) => {
-            return {
-                page: page > total ? PaginationConstants.DEFAULT_PAGE : page,
-                next: Math.min(page + 1, total),
-                previous: Math.max(1, page - 1),
-                total: total
-            };
-        }));
-    }
-}
-PaginationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PaginationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-PaginationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PaginationService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PaginationService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
+PaginationConstants.DEFAULT_COUNT = 3;
+PaginationConstants.DEFAULT_TOTAL = 0;
+PaginationConstants.DEFAULT_PAGINATION = { page: _a.DEFAULT_PAGE, size: _a.DEFAULT_SIZE };
 
 class PaginationComponent {
     constructor(service) {
@@ -2550,58 +2721,56 @@ class PaginationComponent {
          * show first and last page's btn
          */
         this.limits = false;
+        this.page = PaginationConstants.DEFAULT_PAGE;
+        this.total = PaginationConstants.DEFAULT_TOTAL;
+        /**
+         * Page size
+         */
+        this.size = PaginationConstants.DEFAULT_SIZE;
+    }
+    get model() {
+        const totalPages = Math.ceil(this.total / this.size), page = this.page > totalPages ? PaginationConstants.DEFAULT_PAGE : this.page, next = Math.min(this.page + 1, totalPages), previous = Math.max(1, this.page - 1), range = this.initRange(totalPages, page);
+        return {
+            range: range,
+            any: totalPages > 0,
+            firstPage: this.showStartLimit(range, page),
+            lastPage: this.showEndLimit(range, totalPages, page),
+            previousPage: page != PaginationConstants.DEFAULT_PAGE,
+            nextPage: totalPages > page,
+            page: page,
+            previous: previous,
+            next: next,
+            total: totalPages
+        };
     }
-    ngOnInit() {
-        if (!isDefined(this.service.pagination$))
-            this.service.init(this.data$);
-        if (isDefined(this.service.pagination$)) {
-            this.vm$ = this.service.pagination$.pipe(map((event) => {
-                const range = this.initRange(event);
-                return {
-                    range: range,
-                    any: event.total > 0,
-                    firstPage: this.showStartLimit(range, event),
-                    lastPage: this.showEndLimit(range, event),
-                    previousPage: event.page != PaginationConstants.DEFAULT_PAGE,
-                    nextPage: event.total > event.page,
-                    page: event.page,
-                    previous: event.previous,
-                    next: event.next,
-                    total: event.total
-                };
-            }));
-        }
-    }
-    onPageClick(page) {
-        this.service.page(page);
-    }
+    onPageClick(page) { this.service.page(page); }
     get showLimitPages() {
         return this.limits && !this.full;
     }
-    showStartLimit(range, event) {
-        return this.showLimitPages && event.page !== PaginationConstants.DEFAULT_PAGE
+    showStartLimit(range, page) {
+        return this.showLimitPages && page !== PaginationConstants.DEFAULT_PAGE
             && !hasItem(range, PaginationConstants.DEFAULT_PAGE);
     }
-    showEndLimit(range, event) {
-        return this.showLimitPages && event.total !== event.page && !hasItem(range, event.total);
+    showEndLimit(range, total, page) {
+        return this.showLimitPages && total !== page && !hasItem(range, total);
     }
-    initRange(event) {
-        let start = 1, end = event.total + 1;
+    initRange(total, page) {
+        let start = 1, end = total + 1;
         if (!this.full) {
-            const fullRange = this.range(1, event.total + 1), pageIndex = fullRange.indexOf(event.page), pageCount = Math.min(event.total, this.count);
+            const fullRange = this.range(1, total + 1), pageIndex = fullRange.indexOf(page), pageCount = Math.min(total, this.count);
             let rangeStart = 0, rangeEnd = 0;
             if (pageCount == PaginationConstants.DEFAULT_PAGE) {
                 rangeStart = rangeEnd = pageIndex;
             }
             else {
                 let allowedCount = pageCount - 1, partValue = Math.ceil(allowedCount / 2), leftValue = pageIndex - partValue < 0 ? pageIndex : partValue, rightToExtend = allowedCount - leftValue, rightValue = rightToExtend < 0 ? 0 : rightToExtend;
-                if (pageIndex + rightValue >= event.total)
-                    leftValue += pageIndex + rightValue - event.total + 1;
+                if (pageIndex + rightValue >= total)
+                    leftValue += pageIndex + rightValue - total + 1;
                 rangeStart = pageIndex - leftValue;
                 rangeEnd = pageIndex + rightValue;
             }
             start = rangeStart + 1;
-            end = Math.min(event.total + 1, rangeEnd + 2);
+            end = Math.min(total + 1, rangeEnd + 2);
         }
         return this.range(start, end);
     }
@@ -2614,144 +2783,51 @@ class PaginationComponent {
     }
 }
 PaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PaginationComponent, deps: [{ token: PaginationService }], target: i0.ɵɵFactoryTarget.Component });
-PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: PaginationComponent, selector: "sfc-pagination", inputs: { count: "count", full: "full", limits: "limits", data$: "data$" }, ngImport: i0, template: "<div class=\"container\" *ngIf=\"vm$ | async as vm\">\r\n    <sfc-delimeter></sfc-delimeter>\r\n    <ul *ngIf=\"vm.any\">\r\n        <li [sfcShowHideElement]=\"vm.previousPage\" (click)=\"onPageClick(vm.previous)\">\r\n            <button class=\"limit\">\r\n                <fa-icon [icon]=\"faChevronLeft\"></fa-icon>\r\n            </button>\r\n        </li>\r\n        <li *ngIf=\"vm.firstPage\" (click)=\"onPageClick(1)\">\r\n            <button>1</button>\r\n        </li>\r\n        <li *ngIf=\"vm.firstPage\">\r\n            <span>...</span>\r\n        </li>\r\n        <li *ngFor=\"let page of vm.range\" (click)=\"onPageClick(page)\">\r\n            <button [class.active]=\"vm.page === page\">{{page}}</button>\r\n        </li>\r\n        <li *ngIf=\"vm.lastPage\">\r\n            <span>...</span>\r\n        </li>\r\n        <li *ngIf=\"vm.lastPage\" (click)=\"onPageClick(vm.total)\">\r\n            <button>{{vm.total}}</button>\r\n        </li>\r\n        <li [sfcShowHideElement]=\"vm.nextPage\" (click)=\"onPageClick(vm.next)\">\r\n            <button class=\"limit\">\r\n                <fa-icon [icon]=\"faChevronRight\"></fa-icon>\r\n            </button>\r\n        </li>\r\n    </ul>\r\n    <sfc-delimeter></sfc-delimeter>\r\n</div>", styles: [":host{width:100%;display:inline-block}:host .container{position:relative;text-align:center}:host .container ul{list-style:none;margin:0;padding:0;display:flex;justify-content:center;-webkit-user-select:none;user-select:none}:host .container ul li{display:block;float:left;padding:.31em}:host .container ul li:first-child{border:none}:host .container ul li button,:host .container ul li span{transition:color .5s ease;background:none;border:none;border-radius:50%;box-sizing:border-box;display:block;font-size:1em;height:2.5em;min-width:2.5em;line-height:2.5em;padding:0}:host .container ul li button,:host-context(.sfc-default-theme) :host .container ul li button,:host .container ul li span,:host-context(.sfc-default-theme) :host .container ul li span{color:#0009}:host-context(.sfc-dark-theme) :host .container ul li button,:host-context(.sfc-dark-theme) :host .container ul li span{color:#fff}:host .container ul li button{transition:color .5s ease;outline:none;position:relative;transition:all .17s linear}:host .container ul li button,:host-context(.sfc-default-theme) :host .container ul li button{color:#545e61}:host-context(.sfc-dark-theme) :host .container ul li button{color:#fff}:host .container ul li button:before{transition:background .5s ease;border-radius:50%;content:\"\";cursor:pointer;height:0;left:50%;opacity:0;position:absolute;transform:translate(-50%,-50%);transition:all .17s linear;top:50%;width:0}:host .container ul li button:before,:host-context(.sfc-default-theme) :host .container ul li button:before{background:#545e61}:host-context(.sfc-dark-theme) :host .container ul li button:before{background:#f5f7fa}:host .container ul li button:hover:not(.active){transition:color .5s ease}:host .container ul li button:hover:not(.active),:host-context(.sfc-default-theme) :host .container ul li button:hover:not(.active){color:#545e61}:host-context(.sfc-dark-theme) :host .container ul li button:hover:not(.active){color:#fff}:host .container ul li button:hover:not(.active):before{animation:hover-animation .51s linear forwards;width:2.5em;height:2.5em}:host .container ul li button.active{transition:background .5s ease;color:#545e61!important}:host .container ul li button.active,:host-context(.sfc-default-theme) :host .container ul li button.active{background:rgba(0,0,0,.1019607843)}:host-context(.sfc-dark-theme) :host .container ul li button.active{background:#f5f7fa}@keyframes hover-animation{0%{opacity:1}to{opacity:0}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: ShowHideElementDirective, selector: "[sfcShowHideElement]", inputs: ["sfcShowHideElement", "delay"] }, { kind: "component", type: DelimeterComponent, selector: "sfc-delimeter", inputs: ["label", "direction"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] });
+PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: PaginationComponent, selector: "sfc-pagination", inputs: { count: "count", full: "full", limits: "limits", page: "page", total: "total", size: "size" }, ngImport: i0, template: "<div class=\"container\">\r\n    <sfc-delimeter></sfc-delimeter>\r\n    <ul *ngIf=\"model.any\">\r\n        <li [sfcShowHideElement]=\"model.previousPage\" (click)=\"onPageClick(model.previous)\">\r\n            <button class=\"limit\">\r\n                <fa-icon [icon]=\"faChevronLeft\"></fa-icon>\r\n            </button>\r\n        </li>\r\n        <li *ngIf=\"model.firstPage\" (click)=\"onPageClick(1)\">\r\n            <button>1</button>\r\n        </li>\r\n        <li *ngIf=\"model.firstPage\">\r\n            <span>...</span>\r\n        </li>\r\n        <li *ngFor=\"let page of model.range\" (click)=\"model.page !== page && onPageClick(page)\">\r\n            <button [class.active]=\"model.page === page\">{{page}}</button>\r\n        </li>\r\n        <li *ngIf=\"model.lastPage\">\r\n            <span>...</span>\r\n        </li>\r\n        <li *ngIf=\"model.lastPage\" (click)=\"onPageClick(model.total)\">\r\n            <button>{{model.total}}</button>\r\n        </li>\r\n        <li [sfcShowHideElement]=\"model.nextPage\" (click)=\"onPageClick(model.next)\">\r\n            <button class=\"limit\">\r\n                <fa-icon [icon]=\"faChevronRight\"></fa-icon>\r\n            </button>\r\n        </li>\r\n    </ul>\r\n    <sfc-delimeter></sfc-delimeter>\r\n</div>", styles: [":host{width:100%;display:inline-block}:host .container{position:relative;text-align:center}:host .container ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;-webkit-user-select:none;user-select:none}:host .container ul li{display:block;float:left;padding:.31em}:host .container ul li:first-child{border:none}:host .container ul li button,:host .container ul li span{transition:color .5s ease;background:none;border:none;border-radius:50%;box-sizing:border-box;display:block;font-size:1em;height:2.5em;min-width:2.5em;line-height:2.5em;padding:0}:host .container ul li button,:host-context(.sfc-default-theme) :host .container ul li button,:host .container ul li span,:host-context(.sfc-default-theme) :host .container ul li span{color:#0009}:host-context(.sfc-dark-theme) :host .container ul li button,:host-context(.sfc-dark-theme) :host .container ul li span{color:#fff}:host .container ul li button{transition:color .5s ease;outline:none;position:relative;transition:all .17s linear}:host .container ul li button,:host-context(.sfc-default-theme) :host .container ul li button{color:#545e61}:host-context(.sfc-dark-theme) :host .container ul li button{color:#fff}:host .container ul li button:before{transition:background .5s ease;border-radius:50%;content:\"\";cursor:pointer;height:0;left:50%;opacity:0;position:absolute;transform:translate(-50%,-50%);transition:all .17s linear;top:50%;width:0}:host .container ul li button:before,:host-context(.sfc-default-theme) :host .container ul li button:before{background:#545e61}:host-context(.sfc-dark-theme) :host .container ul li button:before{background:#f5f7fa}:host .container ul li button:hover:not(.active){transition:color .5s ease}:host .container ul li button:hover:not(.active),:host-context(.sfc-default-theme) :host .container ul li button:hover:not(.active){color:#545e61}:host-context(.sfc-dark-theme) :host .container ul li button:hover:not(.active){color:#fff}:host .container ul li button:hover:not(.active):before{animation:hover-animation .51s linear forwards;width:2.5em;height:2.5em}:host .container ul li button.active{transition:background .5s ease;color:#545e61!important}:host .container ul li button.active,:host-context(.sfc-default-theme) :host .container ul li button.active{background:rgba(0,0,0,.1019607843)}:host-context(.sfc-dark-theme) :host .container ul li button.active{background:#f5f7fa}@keyframes hover-animation{0%{opacity:1}to{opacity:0}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: ShowHideElementDirective, selector: "[sfcShowHideElement]", inputs: ["sfcShowHideElement", "delay"] }, { kind: "component", type: DelimeterComponent, selector: "sfc-delimeter", inputs: ["label", "direction"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PaginationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-pagination', template: "<div class=\"container\" *ngIf=\"vm$ | async as vm\">\r\n    <sfc-delimeter></sfc-delimeter>\r\n    <ul *ngIf=\"vm.any\">\r\n        <li [sfcShowHideElement]=\"vm.previousPage\" (click)=\"onPageClick(vm.previous)\">\r\n            <button class=\"limit\">\r\n                <fa-icon [icon]=\"faChevronLeft\"></fa-icon>\r\n            </button>\r\n        </li>\r\n        <li *ngIf=\"vm.firstPage\" (click)=\"onPageClick(1)\">\r\n            <button>1</button>\r\n        </li>\r\n        <li *ngIf=\"vm.firstPage\">\r\n            <span>...</span>\r\n        </li>\r\n        <li *ngFor=\"let page of vm.range\" (click)=\"onPageClick(page)\">\r\n            <button [class.active]=\"vm.page === page\">{{page}}</button>\r\n        </li>\r\n        <li *ngIf=\"vm.lastPage\">\r\n            <span>...</span>\r\n        </li>\r\n        <li *ngIf=\"vm.lastPage\" (click)=\"onPageClick(vm.total)\">\r\n            <button>{{vm.total}}</button>\r\n        </li>\r\n        <li [sfcShowHideElement]=\"vm.nextPage\" (click)=\"onPageClick(vm.next)\">\r\n            <button class=\"limit\">\r\n                <fa-icon [icon]=\"faChevronRight\"></fa-icon>\r\n            </button>\r\n        </li>\r\n    </ul>\r\n    <sfc-delimeter></sfc-delimeter>\r\n</div>", styles: [":host{width:100%;display:inline-block}:host .container{position:relative;text-align:center}:host .container ul{list-style:none;margin:0;padding:0;display:flex;justify-content:center;-webkit-user-select:none;user-select:none}:host .container ul li{display:block;float:left;padding:.31em}:host .container ul li:first-child{border:none}:host .container ul li button,:host .container ul li span{transition:color .5s ease;background:none;border:none;border-radius:50%;box-sizing:border-box;display:block;font-size:1em;height:2.5em;min-width:2.5em;line-height:2.5em;padding:0}:host .container ul li button,:host-context(.sfc-default-theme) :host .container ul li button,:host .container ul li span,:host-context(.sfc-default-theme) :host .container ul li span{color:#0009}:host-context(.sfc-dark-theme) :host .container ul li button,:host-context(.sfc-dark-theme) :host .container ul li span{color:#fff}:host .container ul li button{transition:color .5s ease;outline:none;position:relative;transition:all .17s linear}:host .container ul li button,:host-context(.sfc-default-theme) :host .container ul li button{color:#545e61}:host-context(.sfc-dark-theme) :host .container ul li button{color:#fff}:host .container ul li button:before{transition:background .5s ease;border-radius:50%;content:\"\";cursor:pointer;height:0;left:50%;opacity:0;position:absolute;transform:translate(-50%,-50%);transition:all .17s linear;top:50%;width:0}:host .container ul li button:before,:host-context(.sfc-default-theme) :host .container ul li button:before{background:#545e61}:host-context(.sfc-dark-theme) :host .container ul li button:before{background:#f5f7fa}:host .container ul li button:hover:not(.active){transition:color .5s ease}:host .container ul li button:hover:not(.active),:host-context(.sfc-default-theme) :host .container ul li button:hover:not(.active){color:#545e61}:host-context(.sfc-dark-theme) :host .container ul li button:hover:not(.active){color:#fff}:host .container ul li button:hover:not(.active):before{animation:hover-animation .51s linear forwards;width:2.5em;height:2.5em}:host .container ul li button.active{transition:background .5s ease;color:#545e61!important}:host .container ul li button.active,:host-context(.sfc-default-theme) :host .container ul li button.active{background:rgba(0,0,0,.1019607843)}:host-context(.sfc-dark-theme) :host .container ul li button.active{background:#f5f7fa}@keyframes hover-animation{0%{opacity:1}to{opacity:0}}\n"] }]
+            args: [{ selector: 'sfc-pagination', template: "<div class=\"container\">\r\n    <sfc-delimeter></sfc-delimeter>\r\n    <ul *ngIf=\"model.any\">\r\n        <li [sfcShowHideElement]=\"model.previousPage\" (click)=\"onPageClick(model.previous)\">\r\n            <button class=\"limit\">\r\n                <fa-icon [icon]=\"faChevronLeft\"></fa-icon>\r\n            </button>\r\n        </li>\r\n        <li *ngIf=\"model.firstPage\" (click)=\"onPageClick(1)\">\r\n            <button>1</button>\r\n        </li>\r\n        <li *ngIf=\"model.firstPage\">\r\n            <span>...</span>\r\n        </li>\r\n        <li *ngFor=\"let page of model.range\" (click)=\"model.page !== page && onPageClick(page)\">\r\n            <button [class.active]=\"model.page === page\">{{page}}</button>\r\n        </li>\r\n        <li *ngIf=\"model.lastPage\">\r\n            <span>...</span>\r\n        </li>\r\n        <li *ngIf=\"model.lastPage\" (click)=\"onPageClick(model.total)\">\r\n            <button>{{model.total}}</button>\r\n        </li>\r\n        <li [sfcShowHideElement]=\"model.nextPage\" (click)=\"onPageClick(model.next)\">\r\n            <button class=\"limit\">\r\n                <fa-icon [icon]=\"faChevronRight\"></fa-icon>\r\n            </button>\r\n        </li>\r\n    </ul>\r\n    <sfc-delimeter></sfc-delimeter>\r\n</div>", styles: [":host{width:100%;display:inline-block}:host .container{position:relative;text-align:center}:host .container ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;-webkit-user-select:none;user-select:none}:host .container ul li{display:block;float:left;padding:.31em}:host .container ul li:first-child{border:none}:host .container ul li button,:host .container ul li span{transition:color .5s ease;background:none;border:none;border-radius:50%;box-sizing:border-box;display:block;font-size:1em;height:2.5em;min-width:2.5em;line-height:2.5em;padding:0}:host .container ul li button,:host-context(.sfc-default-theme) :host .container ul li button,:host .container ul li span,:host-context(.sfc-default-theme) :host .container ul li span{color:#0009}:host-context(.sfc-dark-theme) :host .container ul li button,:host-context(.sfc-dark-theme) :host .container ul li span{color:#fff}:host .container ul li button{transition:color .5s ease;outline:none;position:relative;transition:all .17s linear}:host .container ul li button,:host-context(.sfc-default-theme) :host .container ul li button{color:#545e61}:host-context(.sfc-dark-theme) :host .container ul li button{color:#fff}:host .container ul li button:before{transition:background .5s ease;border-radius:50%;content:\"\";cursor:pointer;height:0;left:50%;opacity:0;position:absolute;transform:translate(-50%,-50%);transition:all .17s linear;top:50%;width:0}:host .container ul li button:before,:host-context(.sfc-default-theme) :host .container ul li button:before{background:#545e61}:host-context(.sfc-dark-theme) :host .container ul li button:before{background:#f5f7fa}:host .container ul li button:hover:not(.active){transition:color .5s ease}:host .container ul li button:hover:not(.active),:host-context(.sfc-default-theme) :host .container ul li button:hover:not(.active){color:#545e61}:host-context(.sfc-dark-theme) :host .container ul li button:hover:not(.active){color:#fff}:host .container ul li button:hover:not(.active):before{animation:hover-animation .51s linear forwards;width:2.5em;height:2.5em}:host .container ul li button.active{transition:background .5s ease;color:#545e61!important}:host .container ul li button.active,:host-context(.sfc-default-theme) :host .container ul li button.active{background:rgba(0,0,0,.1019607843)}:host-context(.sfc-dark-theme) :host .container ul li button.active{background:#f5f7fa}@keyframes hover-animation{0%{opacity:1}to{opacity:0}}\n"] }]
         }], ctorParameters: function () { return [{ type: PaginationService }]; }, propDecorators: { count: [{
                 type: Input
             }], full: [{
                 type: Input
             }], limits: [{
                 type: Input
-            }], data$: [{
+            }], page: [{
                 type: Input
-            }] } });
-
-class SortingConstants {
-}
-SortingConstants.DEFAULT_ASCENDING_ICON = faChevronUp;
-SortingConstants.DEFAULT_DESCENDING_ICON = faChevronDown;
-
-class SortingService {
-    constructor() {
-        this.sortingSubject = new Subject();
-        this.sorting$ = this.sortingSubject.asObservable();
-    }
-    sort(event) {
-        this.sortingSubject.next(event);
-    }
-}
-SortingService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SortingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SortingService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SortingService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SortingService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
-
-class SortingComponent {
-    constructor(service) {
-        this.service = service;
-        this.SortingDirection = SortingDirection;
-        this.id = CommonConstants.EMPTY_STRING;
-        this.model = { active: false, enabled: false, direction: SortingDirection.Ascending };
-    }
-    get enabled() {
-        return this.model.enabled;
-    }
-    get active() {
-        return this.model.active || false;
-    }
-    sort() {
-        if (this.enabled) {
-            if (this.active) {
-                this.model.direction = this.model.direction === SortingDirection.Ascending
-                    ? SortingDirection.Descending
-                    : SortingDirection.Ascending;
-            }
-            this.service.sort({ id: this.id, direction: this.model.direction });
-        }
-    }
-    get icon() {
-        const modelIcon = firstOrDefault(this.model.icons, i => i.direction == this.model.direction);
-        return modelIcon ? modelIcon.icon : this.model.direction === SortingDirection.Ascending
-            ? SortingConstants.DEFAULT_ASCENDING_ICON : SortingConstants.DEFAULT_DESCENDING_ICON;
-    }
-    ngOnInit() {
-        if (!isDefined(this.model))
-            this.model = { active: false, enabled: false, direction: SortingDirection.Ascending };
-        // subscribe to sort changes so we can react when other columns are sorted
-        this._subscription = this.service.sorting$.subscribe(event => {
-            // reset this column's sort direction to hide the sort icons
-            if (this.id != event.id)
-                this.model.direction = SortingDirection.Ascending;
-        });
-    }
-    ngOnDestroy() {
-        this._subscription.unsubscribe();
-    }
-}
-SortingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SortingComponent, deps: [{ token: SortingService }], target: i0.ɵɵFactoryTarget.Component });
-SortingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SortingComponent, selector: "sfc-sorting", inputs: { id: "id", model: "model" }, host: { listeners: { "click": "sort()" }, properties: { "class.enabled": "this.enabled", "class.active": "this.active" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"content\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n    <div *ngIf=\"enabled\" class=\"icons\">\r\n        <fa-icon [icon]=\"icon\"></fa-icon>\r\n    </div>\r\n</div>", styles: [":host{cursor:default;text-overflow:ellipsis;overflow:hidden}:host.enabled{cursor:pointer}:host .container{display:flex;min-width:0;transition:color .5s ease}:host .container,:host-context(.sfc-default-theme) :host .container{color:#545e61}:host-context(.sfc-dark-theme) :host .container{color:#fff}:host .container:hover{color:#ffce54}:host .container .content{display:flex;-webkit-user-select:none;user-select:none}:host .container .icons{margin:0 .31em;font-size:.7em;display:flex;align-items:center;transition:all .3s}:host.active .container{color:#ffce54}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SortingComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sfc-sorting', template: "<div class=\"container\">\r\n    <div class=\"content\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n    <div *ngIf=\"enabled\" class=\"icons\">\r\n        <fa-icon [icon]=\"icon\"></fa-icon>\r\n    </div>\r\n</div>", styles: [":host{cursor:default;text-overflow:ellipsis;overflow:hidden}:host.enabled{cursor:pointer}:host .container{display:flex;min-width:0;transition:color .5s ease}:host .container,:host-context(.sfc-default-theme) :host .container{color:#545e61}:host-context(.sfc-dark-theme) :host .container{color:#fff}:host .container:hover{color:#ffce54}:host .container .content{display:flex;-webkit-user-select:none;user-select:none}:host .container .icons{margin:0 .31em;font-size:.7em;display:flex;align-items:center;transition:all .3s}:host.active .container{color:#ffce54}\n"] }]
-        }], ctorParameters: function () { return [{ type: SortingService }]; }, propDecorators: { id: [{
+            }], total: [{
                 type: Input
-            }], model: [{
+            }], size: [{
                 type: Input
-            }], enabled: [{
-                type: HostBinding,
-                args: [`class.${UIClass.Enabled}`]
-            }], active: [{
-                type: HostBinding,
-                args: [`class.${UIClass.Active}`]
-            }], sort: [{
-                type: HostListener,
-                args: ['click']
             }] } });
 
-class LoadMoreService {
-    constructor() {
-        this._page = LoadMoreService.START_PAGE;
-        this.moreSubject = new Subject();
-        this.more$ = this.moreSubject.asObservable();
-    }
-    more() {
-        this._page++;
-        this.moreSubject.next(this._page);
-    }
-    reset() {
-        this._page = LoadMoreService.START_PAGE;
-    }
+var LoadContainerLoadType;
+(function (LoadContainerLoadType) {
+    LoadContainerLoadType["Button"] = "button";
+    LoadContainerLoadType["Scroll"] = "scroll";
+    LoadContainerLoadType["Pagination"] = "pagination";
+})(LoadContainerLoadType || (LoadContainerLoadType = {}));
+
+class LoadContainerConstants {
 }
-LoadMoreService.START_PAGE = 1;
-LoadMoreService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LoadMoreService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-LoadMoreService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LoadMoreService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LoadMoreService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
+LoadContainerConstants.DEFAULT_TOTAL = 0;
+LoadContainerConstants.DEFAULT_EMPTY_LABEL = 'Not found';
+LoadContainerConstants.DEFAULT_SHOW_MORE_LABEL = 'Show more';
+
+var LoadContainerChangesSource;
+(function (LoadContainerChangesSource) {
+    LoadContainerChangesSource["Initial"] = "initial";
+    LoadContainerChangesSource["Predicate"] = "predicate";
+    LoadContainerChangesSource["Page"] = "page";
+    LoadContainerChangesSource["More"] = "more";
+    LoadContainerChangesSource["Data"] = "data";
+})(LoadContainerChangesSource || (LoadContainerChangesSource = {}));
 
 var LoadContainerType;
 (function (LoadContainerType) {
     LoadContainerType["Dropdown"] = "dropdown";
     LoadContainerType["Table"] = "table";
-})(LoadContainerType || (LoadContainerType = {}));
-var LoadChangesSource;
-(function (LoadChangesSource) {
-    LoadChangesSource["Parameters"] = "parameters";
-    LoadChangesSource["Data"] = "data";
-})(LoadChangesSource || (LoadChangesSource = {}));
-
-class LoadContainerConstants {
-}
-LoadContainerConstants.DEFAULT_PAGE_SIZE = 5;
-LoadContainerConstants.DEFAULT_NOT_FOUND_LABEL = 'Not found';
+})(LoadContainerType || (LoadContainerType = {}));
 
 class LoadMoreButtonComponent {
     constructor() {
@@ -2765,10 +2841,10 @@ class LoadMoreButtonComponent {
     }
 }
 LoadMoreButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LoadMoreButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-LoadMoreButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: LoadMoreButtonComponent, selector: "sfc-load-more-button", inputs: { label: "label", icon: "icon" }, outputs: { more: "more" }, ngImport: i0, template: "<div class=\"container\">\r\n    <sfc-delimeter></sfc-delimeter>\r\n    <div class=\"button\" (sfcMouseDown)=\"more.emit($event)\">\r\n        <fa-icon [icon]=\"icon\"></fa-icon>\r\n        <span>{{label}}</span>\r\n    </div>\r\n</div>", styles: [":host{cursor:default}:host .container{text-align:center;background-color:#fff}:host .container .button{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;cursor:pointer;transition:color .5s ease;transition:color .5s;padding:.5em 0 1em}:host .container .button,:host-context(.sfc-default-theme) :host .container .button{color:#545e61}:host-context(.sfc-dark-theme) :host .container .button{color:#fff}:host .container .button fa-icon{font-size:.7em;margin-right:.31em}:host .container .button span{font-size:.6em;font-weight:700;text-transform:uppercase}:host .container .button:hover{color:#ffce54}\n"], dependencies: [{ kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: MouseDownDirective, selector: "[sfcMouseDown]", inputs: ["button"], outputs: ["sfcMouseDown"] }, { kind: "component", type: DelimeterComponent, selector: "sfc-delimeter", inputs: ["label", "direction"] }] });
+LoadMoreButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: LoadMoreButtonComponent, selector: "sfc-load-more-button", inputs: { label: "label", icon: "icon" }, outputs: { more: "more" }, ngImport: i0, template: "<div class=\"container\">\r\n    <sfc-delimeter></sfc-delimeter>\r\n    <div class=\"button\" (sfcMouseDown)=\"more.emit($event)\">\r\n        <fa-icon [icon]=\"icon\"></fa-icon>\r\n        <span>{{label}}</span>\r\n    </div>\r\n</div>", styles: [":host{cursor:default}:host .container{text-align:center}:host .container,:host-context(.sfc-default-theme) :host .container{background:#fff}:host-context(.sfc-dark-theme) :host .container{background:transparent}:host .container .button{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;cursor:pointer;transition:color .5s ease;transition:color .5s;padding:.5em 0 1em}:host .container .button,:host-context(.sfc-default-theme) :host .container .button{color:#545e61}:host-context(.sfc-dark-theme) :host .container .button{color:#fff}:host .container .button fa-icon{font-size:.7em;margin-right:.31em}:host .container .button span{font-size:.6em;font-weight:700;text-transform:uppercase}:host .container .button:hover{color:#ffce54}\n"], dependencies: [{ kind: "component", type: i1$2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: MouseDownDirective, selector: "[sfcMouseDown]", inputs: ["button"], outputs: ["sfcMouseDown"] }, { kind: "component", type: DelimeterComponent, selector: "sfc-delimeter", inputs: ["label", "direction"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LoadMoreButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-load-more-button', template: "<div class=\"container\">\r\n    <sfc-delimeter></sfc-delimeter>\r\n    <div class=\"button\" (sfcMouseDown)=\"more.emit($event)\">\r\n        <fa-icon [icon]=\"icon\"></fa-icon>\r\n        <span>{{label}}</span>\r\n    </div>\r\n</div>", styles: [":host{cursor:default}:host .container{text-align:center;background-color:#fff}:host .container .button{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;cursor:pointer;transition:color .5s ease;transition:color .5s;padding:.5em 0 1em}:host .container .button,:host-context(.sfc-default-theme) :host .container .button{color:#545e61}:host-context(.sfc-dark-theme) :host .container .button{color:#fff}:host .container .button fa-icon{font-size:.7em;margin-right:.31em}:host .container .button span{font-size:.6em;font-weight:700;text-transform:uppercase}:host .container .button:hover{color:#ffce54}\n"] }]
+            args: [{ selector: 'sfc-load-more-button', template: "<div class=\"container\">\r\n    <sfc-delimeter></sfc-delimeter>\r\n    <div class=\"button\" (sfcMouseDown)=\"more.emit($event)\">\r\n        <fa-icon [icon]=\"icon\"></fa-icon>\r\n        <span>{{label}}</span>\r\n    </div>\r\n</div>", styles: [":host{cursor:default}:host .container{text-align:center}:host .container,:host-context(.sfc-default-theme) :host .container{background:#fff}:host-context(.sfc-dark-theme) :host .container{background:transparent}:host .container .button{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;cursor:pointer;transition:color .5s ease;transition:color .5s;padding:.5em 0 1em}:host .container .button,:host-context(.sfc-default-theme) :host .container .button{color:#545e61}:host-context(.sfc-dark-theme) :host .container .button{color:#fff}:host .container .button fa-icon{font-size:.7em;margin-right:.31em}:host .container .button span{font-size:.6em;font-weight:700;text-transform:uppercase}:host .container .button:hover{color:#ffce54}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], icon: [{
@@ -2778,37 +2854,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             }] } });
 
 class LoadContainerComponent {
-    constructor(loaderService, loadMoreService) {
+    constructor(loaderService, loadMoreService, paginationService, sortingService) {
         this.loaderService = loaderService;
         this.loadMoreService = loadMoreService;
+        this.paginationService = paginationService;
+        this.sortingService = sortingService;
         this.ComponentSize = ComponentSize;
         this.Position = Position;
         this.type = LoadContainerType.Dropdown;
         this.open = false;
+        // outer flag to allow load more or not
         this.loadMore = true;
+        this.loadMoreLabel = LoadContainerConstants.DEFAULT_SHOW_MORE_LABEL;
         this.showEmpty = true;
-        this.showLoadMoreButton = true;
-        this.notFoundLabel = LoadContainerConstants.DEFAULT_NOT_FOUND_LABEL;
+        this.emptyLabel = LoadContainerConstants.DEFAULT_EMPTY_LABEL;
+        this.paginationCount = PaginationConstants.DEFAULT_COUNT;
+        this.paginationLimits = false;
+        this.showLoading = true;
         this.handleError = new EventEmitter();
         this.handleSuccess = new EventEmitter();
         this.handleLoading = new EventEmitter();
         this.next = false;
         this.empty = false;
+        this.total = LoadContainerConstants.DEFAULT_TOTAL;
         this._loading = false;
-        // define what source emit changes for data (1. data changes, 2. predicate conditions)
-        this.source = LoadChangesSource.Data;
-    }
-    set model(model) {
-        if (isDefined(model)) {
-            const parameters$ = this.buildParameters(model.predicate$), data$ = isDefined(model.loader) ?
-                this.buildDynamic(parameters$, model.loader) : this.buildStatic(parameters$, model);
-            if (isDefined(this._subscription))
-                this._subscription.unsubscribe();
-            this._subscription = data$.subscribe({
-                next: (result) => this.success(result),
-                error: (error) => this.error(error)
-            });
-        }
+        // define what source emit changes for data
+        this.source = LoadContainerChangesSource.Initial;
+        this.predicateChanged = false;
+    }
+    set model(value) {
+        this._model = value;
+        this.subscribe();
+    }
+    get model() {
+        return this._model;
     }
     get scrollPosition() {
         return !this.allowLoadMore || this.showLoadMoreButton ? [] : [Position.Bottom];
@@ -2816,6 +2895,8 @@ class LoadContainerComponent {
     get allowLoadMore() { return this.next && this.loadMore; }
     get hideLoadMoreButton() { return !(this.allowLoadMore && this.showLoadMoreButton); }
     get isEmpty() { return this.empty && this.showEmpty; }
+    get page() { return this.pagination ? this.paginationService.pageValue : this.loadMoreService.pageValue; }
+    get showPagination() { return Boolean(this.total) && !this.empty && this.pagination; }
     set loading(value) {
         this._loading = value;
         if (value)
@@ -2824,6 +2905,15 @@ class LoadContainerComponent {
             this.loaderService.hide(this.id);
         this.handleLoading.emit(value);
     }
+    get showLoadMoreButton() {
+        return this.model.loadType == LoadContainerLoadType.Button;
+    }
+    get reset() {
+        return this.source == LoadContainerChangesSource.Predicate ||
+            this.source == LoadContainerChangesSource.Page ||
+            this.source == LoadContainerChangesSource.Data;
+    }
+    get pagination() { return this.model.loadType == LoadContainerLoadType.Pagination; }
     ngOnDestroy() {
         if (this._subscription)
             this._subscription.unsubscribe();
@@ -2840,64 +2930,91 @@ class LoadContainerComponent {
         this.next = result.next;
         this.loading = false;
         this.empty = !any(result.items);
+        this.total = result.total;
+        this.loadMore = true;
         this.handleSuccess.emit(result);
     }
     error(error) {
         this.loading = false;
         this.empty = false;
+        this.total = 0;
         this.handleError.emit(error);
     }
+    subscribe() {
+        if (!this.model)
+            return;
+        if (!isDefined(this.model.pagination))
+            this.model.pagination = PaginationConstants.DEFAULT_PAGINATION;
+        else
+            this.paginationService.pageValue = this.model.pagination?.page;
+        const parameters$ = this.buildParameters(this.model.predicate$), data$ = isDefined(this.model.loader)
+            ? this.buildDynamic(parameters$, this.model.loader)
+            : this.buildStatic(parameters$, this.model);
+        if (isDefined(this._subscription))
+            this._subscription.unsubscribe();
+        this._subscription = data$.subscribe({
+            next: (result) => this.success(result),
+            error: (error) => this.error(error)
+        });
+    }
     buildParameters(predicate$) {
-        const parameters$ = (predicate$ || EMPTY.pipe(startWith(null))).pipe(tap((predicateParameters) => {
-            if (predicateParameters)
+        const parameters$ = (predicate$ || EMPTY.pipe(startWith(null))).pipe(tap(() => {
+            if (this.source != LoadContainerChangesSource.Initial)
                 this.resetParameters();
-        }), switchMap((value) => {
-            return this.loadMoreService.more$.pipe(startWith(LoadMoreService.START_PAGE), tap(() => {
-                this.source = LoadChangesSource.Parameters;
-                this.loading = true;
-            }), map((page) => {
-                return { params: value, page: page };
-            }));
+            this.source = LoadContainerChangesSource.Predicate;
+            this.predicateChanged = true;
+        }), switchMap((params) => {
+            const more$ = this.loadMoreService.more$.pipe(startWith(PaginationConstants.DEFAULT_PAGE), tap(() => {
+                if (!this.predicateChanged)
+                    this.source = LoadContainerChangesSource.More;
+                this.loadMore = false;
+                this.predicateChanged = false;
+            })), pagination$ = this.paginationService.page$.pipe(startWith(this.model.pagination?.page || PaginationConstants.DEFAULT_PAGE), tap(() => {
+                if (!this.predicateChanged)
+                    this.source = LoadContainerChangesSource.Page;
+                this.predicateChanged = false;
+            })), loader$ = this.pagination ? pagination$ : more$;
+            return loader$.pipe(map(() => ({ params: params, page: this.page })));
         }));
-        return parameters$;
+        return combineLatest([this.sortingService.sorting$.pipe(startWith(this.model.sorting)), parameters$]).pipe(tap(() => this.loading = true), map(([sorting, parameters]) => ({ params: parameters.params, page: parameters.page, sorting: sorting })));
     }
     buildDynamic(parameters$, loader) {
-        return parameters$.pipe(switchMap((parameters) => loader(parameters, this.source).pipe(tap((model) => {
-            if (model.reset) {
-                this.source = LoadChangesSource.Data;
-                this.resetParameters();
-            }
-        }))));
+        return parameters$.pipe(switchMap((parameters) => loader(parameters)), map((model) => ({ ...model, reset: this.reset, page: this.page })));
     }
     buildStatic(parameters$, model) {
-        const data$ = (model.data$ || of([])).pipe(tap(_ => this.source = LoadChangesSource.Data));
+        const data$ = (model.data$ || of([])).pipe(map((data, index) => ({ data, index })), tap(model => this.source = model.index ? LoadContainerChangesSource.Data : this.source), map(model => model.data));
         return combineLatest([parameters$, data$]).pipe(map(([parameters, items]) => {
-            const reset = this.source == LoadChangesSource.Data;
-            if (reset && parameters.page != LoadMoreService.START_PAGE) {
-                // if data changed need to start from start
+            // if data changed need to start from start (pagination)
+            if (this.source == LoadContainerChangesSource.Data
+                && parameters.page != LoadMoreService.START_PAGE) {
                 this.resetParameters();
-                parameters = { params: parameters.params, page: 1 };
+                parameters = { params: parameters.params, page: this.page, sorting: parameters.sorting };
             }
-            const filtered = model.filter ? model.filter(items, parameters) : items, size = model.size || LoadContainerConstants.DEFAULT_PAGE_SIZE, data = filtered ? {
-                items: skip(filtered, parameters.page, size),
-                next: parameters.page < Math.ceil(filtered.length / size),
-                reset
-            } : { items: [], next: false, reset };
+            const filtered = model.filter ? model.filter(items, parameters) : items, sorted = parameters.sorting ? sortBy([...filtered], parameters.sorting.id, parameters.sorting.direction) : filtered, data = sorted ? {
+                items: skip(sorted, parameters.page, this.model.pagination?.size),
+                next: parameters.page < Math.ceil(sorted.length / this.model.pagination?.size),
+                reset: this.reset,
+                total: sorted.length,
+                page: parameters.page
+            } : { items: [], next: false, reset: this.reset, total: items.length, page: parameters.page };
             return data;
         }));
     }
     resetParameters() {
         if (isDefined(this.contentEl))
             this.contentEl.nativeElement.scrollTop = 0;
-        this.loadMoreService.reset();
+        if (this.pagination)
+            this.paginationService.reset();
+        else
+            this.loadMoreService.reset();
     }
 }
-LoadContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LoadContainerComponent, deps: [{ token: LoaderService }, { token: LoadMoreService }], target: i0.ɵɵFactoryTarget.Component });
-LoadContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: LoadContainerComponent, selector: "sfc-load-container", inputs: { id: "id", type: "type", open: "open", loadMore: "loadMore", showEmpty: "showEmpty", showLoadMoreButton: "showLoadMoreButton", loadMoreLabel: "loadMoreLabel", notFoundLabel: "notFoundLabel", model: "model", scrollTarget: "scrollTarget" }, outputs: { handleError: "handleError", handleSuccess: "handleSuccess", handleLoading: "handleLoading" }, host: { properties: { "class": "this.type", "class.open": "this.open", "class.empty": "this.isEmpty", "class.loading": "this._loading" } }, providers: [LoadMoreService], viewQueries: [{ propertyName: "contentEl", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: "<div class=\"container\">\r\n    <sfc-bounce-loader [id]=\"id\" [sfcComponentSize]=\"ComponentSize.Small\"></sfc-bounce-loader>\r\n    <div #content class=\"content\" [sfcScrollIntoView]=\"scrollTarget\" (sfcScrollTracker)=\"onScroll()\" [positions]=\"scrollPosition\">\r\n        <ng-content></ng-content>\r\n        <div (sfcMouseDown)=\"$event.preventDefault()\">\r\n            <sfc-load-more-button [hidden]=\"hideLoadMoreButton\" (more)=\"more($event)\" [label]=\"loadMoreLabel\">\r\n            </sfc-load-more-button>\r\n            <div *ngIf=\"isEmpty\" class=\"empty\">{{notFoundLabel}}</div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{width:100%;height:inherit;position:relative}:host .container{height:inherit}:host .container .content{transition:background .5s ease;cursor:initial;overflow-y:auto;overflow-x:hidden;height:inherit}:host .container .content,:host-context(.sfc-default-theme) :host .container .content{background:#fff}:host-context(.sfc-dark-theme) :host .container .content{background:#fff}:host .container .content sfc-load-more-button ::ng-deep .container ::ng-deep sfc-delimeter.horizontal:before{transition:border-image .5s ease}:host .container .content sfc-load-more-button ::ng-deep .container ::ng-deep sfc-delimeter.horizontal:before,:host-context(.sfc-default-theme) :host .container .content sfc-load-more-button ::ng-deep .container ::ng-deep sfc-delimeter.horizontal:before{border-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host-context(.sfc-dark-theme) :host .container .content sfc-load-more-button ::ng-deep .container ::ng-deep sfc-delimeter.horizontal:before{border-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host .container .content sfc-load-more-button ::ng-deep .container ::ng-deep sfc-delimeter.horizontal:after{transition:border-image .5s ease}:host .container .content sfc-load-more-button ::ng-deep .container ::ng-deep sfc-delimeter.horizontal:after,:host-context(.sfc-default-theme) :host .container .content sfc-load-more-button ::ng-deep .container ::ng-deep sfc-delimeter.horizontal:after{border-image:linear-gradient(to left,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host-context(.sfc-dark-theme) :host .container .content sfc-load-more-button ::ng-deep .container ::ng-deep sfc-delimeter.horizontal:after{border-image:linear-gradient(to left,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host .container .content sfc-load-more-button ::ng-deep .container .button{transition:color .5s ease}:host .container .content sfc-load-more-button ::ng-deep .container .button,:host-context(.sfc-default-theme) :host .container .content sfc-load-more-button ::ng-deep .container .button{color:#545e61}:host-context(.sfc-dark-theme) :host .container .content sfc-load-more-button ::ng-deep .container .button{color:#545e61}:host .container .content sfc-load-more-button ::ng-deep .container .button:hover{color:#ffce54}:host .container .content .empty{display:flex;align-items:center;justify-content:center;color:#545e61;cursor:default;height:100%;font-size:.8em;-webkit-user-select:none;user-select:none;padding:.7em}:host.dropdown .container .content{display:none;opacity:0;max-height:12.5em;box-shadow:0 .125em .125em #00000024,0 .18em .06em -.125em #0000001f,0 .06em .31em #0003}:host.dropdown.open .container .content{display:block;opacity:1}:host ::ng-deep ::-webkit-scrollbar{width:.375em;height:.375em}:host ::ng-deep ::-webkit-scrollbar-track{border-radius:.625em;background:#e9e9e9}:host ::ng-deep ::-webkit-scrollbar-thumb{border-radius:.625em;background:rgba(0,0,0,.2)}:host ::ng-deep ::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.4)}:host ::ng-deep ::-webkit-scrollbar-thumb:active{background:rgba(0,0,0,.6)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: MouseDownDirective, selector: "[sfcMouseDown]", inputs: ["button"], outputs: ["sfcMouseDown"] }, { kind: "directive", type: ComponentSizeDirective, selector: "[sfcComponentSize]", inputs: ["sfcComponentSize", "customSize"] }, { kind: "directive", type: ScrollTrackerDirective, selector: "[sfcScrollTracker]", inputs: ["positions"], outputs: ["sfcScrollTracker"] }, { kind: "directive", type: ScrollIntoViewDirective, selector: "[sfcScrollIntoView]", inputs: ["sfcScrollIntoView", "local", "options"] }, { kind: "component", type: LoadMoreButtonComponent, selector: "sfc-load-more-button", inputs: ["label", "icon"], outputs: ["more"] }, { kind: "component", type: BounceLoaderComponent, selector: "sfc-bounce-loader" }] });
+LoadContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LoadContainerComponent, deps: [{ token: LoaderService }, { token: LoadMoreService }, { token: PaginationService }, { token: SortingService }], target: i0.ɵɵFactoryTarget.Component });
+LoadContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: LoadContainerComponent, selector: "sfc-load-container", inputs: { id: "id", type: "type", open: "open", loadMore: "loadMore", loadMoreLabel: "loadMoreLabel", showEmpty: "showEmpty", emptyLabel: "emptyLabel", model: "model", scrollTarget: "scrollTarget", paginationCount: "paginationCount", paginationLimits: "paginationLimits", showLoading: "showLoading" }, outputs: { handleError: "handleError", handleSuccess: "handleSuccess", handleLoading: "handleLoading" }, host: { properties: { "class": "this.type", "class.open": "this.open", "class.empty": "this.isEmpty", "class.loading": "this._loading" } }, providers: [LoadMoreService, PaginationService], viewQueries: [{ propertyName: "contentEl", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: "<div class=\"container\">\r\n    <sfc-bounce-loader *ngIf=\"showLoading\" [id]=\"id\" [sfcComponentSize]=\"ComponentSize.Small\"></sfc-bounce-loader>\r\n    <div #content class=\"content\" [sfcScrollIntoView]=\"scrollTarget\" (sfcScrollTracker)=\"onScroll()\"\r\n        [positions]=\"scrollPosition\">\r\n        <div class=\"items\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n        <div class=\"actions\" (sfcMouseDown)=\"$event.preventDefault()\">\r\n            <sfc-load-more-button [hidden]=\"hideLoadMoreButton\" (more)=\"more($event)\" [label]=\"loadMoreLabel\">\r\n            </sfc-load-more-button>\r\n            <sfc-pagination *ngIf=\"showPagination\" [limits]=\"paginationLimits\" [count]=\"paginationCount\" [full]=\"false\"\r\n                [total]=\"total\" [size]=\"model.pagination?.size!\" [page]=\"page\">\r\n            </sfc-pagination>\r\n            <sfc-delimeter *ngIf=\"isEmpty\" [label]=\"emptyLabel\"></sfc-delimeter>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{width:100%;height:inherit;position:relative}:host .container{height:inherit}:host .container .content{cursor:initial;overflow-y:auto;overflow-x:hidden;height:inherit}:host .container .content,:host-context(.sfc-default-theme) :host .container .content{background:#fff}:host-context(.sfc-dark-theme) :host .container .content{background:transparent}:host .container .content sfc-delimeter{font-style:italic;font-weight:700}:host.dropdown .container .content{display:none;opacity:0;max-height:12.5em;box-shadow:0 .125em .125em #00000024,0 .18em .06em -.125em #0000001f,0 .06em .31em #0003}:host.dropdown.open .container .content{display:block;opacity:1}:host ::ng-deep ::-webkit-scrollbar{width:.375em;height:.375em}:host ::ng-deep ::-webkit-scrollbar-track{border-radius:.625em;background:#e9e9e9}:host ::ng-deep ::-webkit-scrollbar-thumb{border-radius:.625em;background:rgba(0,0,0,.2)}:host ::ng-deep ::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.4)}:host ::ng-deep ::-webkit-scrollbar-thumb:active{background:rgba(0,0,0,.6)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: MouseDownDirective, selector: "[sfcMouseDown]", inputs: ["button"], outputs: ["sfcMouseDown"] }, { kind: "directive", type: ComponentSizeDirective, selector: "[sfcComponentSize]", inputs: ["sfcComponentSize", "customSize"] }, { kind: "directive", type: ScrollTrackerDirective, selector: "[sfcScrollTracker]", inputs: ["positions"], outputs: ["sfcScrollTracker"] }, { kind: "directive", type: ScrollIntoViewDirective, selector: "[sfcScrollIntoView]", inputs: ["sfcScrollIntoView", "local", "options"] }, { kind: "component", type: DelimeterComponent, selector: "sfc-delimeter", inputs: ["label", "direction"] }, { kind: "component", type: PaginationComponent, selector: "sfc-pagination", inputs: ["count", "full", "limits", "page", "total", "size"] }, { kind: "component", type: LoadMoreButtonComponent, selector: "sfc-load-more-button", inputs: ["label", "icon"], outputs: ["more"] }, { kind: "component", type: BounceLoaderComponent, selector: "sfc-bounce-loader" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LoadContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-load-container', providers: [LoadMoreService], template: "<div class=\"container\">\r\n    <sfc-bounce-loader [id]=\"id\" [sfcComponentSize]=\"ComponentSize.Small\"></sfc-bounce-loader>\r\n    <div #content class=\"content\" [sfcScrollIntoView]=\"scrollTarget\" (sfcScrollTracker)=\"onScroll()\" [positions]=\"scrollPosition\">\r\n        <ng-content></ng-content>\r\n        <div (sfcMouseDown)=\"$event.preventDefault()\">\r\n            <sfc-load-more-button [hidden]=\"hideLoadMoreButton\" (more)=\"more($event)\" [label]=\"loadMoreLabel\">\r\n            </sfc-load-more-button>\r\n            <div *ngIf=\"isEmpty\" class=\"empty\">{{notFoundLabel}}</div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{width:100%;height:inherit;position:relative}:host .container{height:inherit}:host .container .content{transition:background .5s ease;cursor:initial;overflow-y:auto;overflow-x:hidden;height:inherit}:host .container .content,:host-context(.sfc-default-theme) :host .container .content{background:#fff}:host-context(.sfc-dark-theme) :host .container .content{background:#fff}:host .container .content sfc-load-more-button ::ng-deep .container ::ng-deep sfc-delimeter.horizontal:before{transition:border-image .5s ease}:host .container .content sfc-load-more-button ::ng-deep .container ::ng-deep sfc-delimeter.horizontal:before,:host-context(.sfc-default-theme) :host .container .content sfc-load-more-button ::ng-deep .container ::ng-deep sfc-delimeter.horizontal:before{border-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host-context(.sfc-dark-theme) :host .container .content sfc-load-more-button ::ng-deep .container ::ng-deep sfc-delimeter.horizontal:before{border-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host .container .content sfc-load-more-button ::ng-deep .container ::ng-deep sfc-delimeter.horizontal:after{transition:border-image .5s ease}:host .container .content sfc-load-more-button ::ng-deep .container ::ng-deep sfc-delimeter.horizontal:after,:host-context(.sfc-default-theme) :host .container .content sfc-load-more-button ::ng-deep .container ::ng-deep sfc-delimeter.horizontal:after{border-image:linear-gradient(to left,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host-context(.sfc-dark-theme) :host .container .content sfc-load-more-button ::ng-deep .container ::ng-deep sfc-delimeter.horizontal:after{border-image:linear-gradient(to left,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host .container .content sfc-load-more-button ::ng-deep .container .button{transition:color .5s ease}:host .container .content sfc-load-more-button ::ng-deep .container .button,:host-context(.sfc-default-theme) :host .container .content sfc-load-more-button ::ng-deep .container .button{color:#545e61}:host-context(.sfc-dark-theme) :host .container .content sfc-load-more-button ::ng-deep .container .button{color:#545e61}:host .container .content sfc-load-more-button ::ng-deep .container .button:hover{color:#ffce54}:host .container .content .empty{display:flex;align-items:center;justify-content:center;color:#545e61;cursor:default;height:100%;font-size:.8em;-webkit-user-select:none;user-select:none;padding:.7em}:host.dropdown .container .content{display:none;opacity:0;max-height:12.5em;box-shadow:0 .125em .125em #00000024,0 .18em .06em -.125em #0000001f,0 .06em .31em #0003}:host.dropdown.open .container .content{display:block;opacity:1}:host ::ng-deep ::-webkit-scrollbar{width:.375em;height:.375em}:host ::ng-deep ::-webkit-scrollbar-track{border-radius:.625em;background:#e9e9e9}:host ::ng-deep ::-webkit-scrollbar-thumb{border-radius:.625em;background:rgba(0,0,0,.2)}:host ::ng-deep ::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.4)}:host ::ng-deep ::-webkit-scrollbar-thumb:active{background:rgba(0,0,0,.6)}\n"] }]
-        }], ctorParameters: function () { return [{ type: LoaderService }, { type: LoadMoreService }]; }, propDecorators: { id: [{
+            args: [{ selector: 'sfc-load-container', providers: [LoadMoreService, PaginationService], template: "<div class=\"container\">\r\n    <sfc-bounce-loader *ngIf=\"showLoading\" [id]=\"id\" [sfcComponentSize]=\"ComponentSize.Small\"></sfc-bounce-loader>\r\n    <div #content class=\"content\" [sfcScrollIntoView]=\"scrollTarget\" (sfcScrollTracker)=\"onScroll()\"\r\n        [positions]=\"scrollPosition\">\r\n        <div class=\"items\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n        <div class=\"actions\" (sfcMouseDown)=\"$event.preventDefault()\">\r\n            <sfc-load-more-button [hidden]=\"hideLoadMoreButton\" (more)=\"more($event)\" [label]=\"loadMoreLabel\">\r\n            </sfc-load-more-button>\r\n            <sfc-pagination *ngIf=\"showPagination\" [limits]=\"paginationLimits\" [count]=\"paginationCount\" [full]=\"false\"\r\n                [total]=\"total\" [size]=\"model.pagination?.size!\" [page]=\"page\">\r\n            </sfc-pagination>\r\n            <sfc-delimeter *ngIf=\"isEmpty\" [label]=\"emptyLabel\"></sfc-delimeter>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{width:100%;height:inherit;position:relative}:host .container{height:inherit}:host .container .content{cursor:initial;overflow-y:auto;overflow-x:hidden;height:inherit}:host .container .content,:host-context(.sfc-default-theme) :host .container .content{background:#fff}:host-context(.sfc-dark-theme) :host .container .content{background:transparent}:host .container .content sfc-delimeter{font-style:italic;font-weight:700}:host.dropdown .container .content{display:none;opacity:0;max-height:12.5em;box-shadow:0 .125em .125em #00000024,0 .18em .06em -.125em #0000001f,0 .06em .31em #0003}:host.dropdown.open .container .content{display:block;opacity:1}:host ::ng-deep ::-webkit-scrollbar{width:.375em;height:.375em}:host ::ng-deep ::-webkit-scrollbar-track{border-radius:.625em;background:#e9e9e9}:host ::ng-deep ::-webkit-scrollbar-thumb{border-radius:.625em;background:rgba(0,0,0,.2)}:host ::ng-deep ::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.4)}:host ::ng-deep ::-webkit-scrollbar-thumb:active{background:rgba(0,0,0,.6)}\n"] }]
+        }], ctorParameters: function () { return [{ type: LoaderService }, { type: LoadMoreService }, { type: PaginationService }, { type: SortingService }]; }, propDecorators: { id: [{
                 type: Input
             }], type: [{
                 type: Input
@@ -2911,18 +3028,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 args: [`class.${UIClass.Open}`]
             }], loadMore: [{
                 type: Input
-            }], showEmpty: [{
-                type: Input
-            }], showLoadMoreButton: [{
-                type: Input
             }], loadMoreLabel: [{
                 type: Input
-            }], notFoundLabel: [{
+            }], showEmpty: [{
+                type: Input
+            }], emptyLabel: [{
                 type: Input
             }], model: [{
                 type: Input
             }], scrollTarget: [{
                 type: Input
+            }], paginationCount: [{
+                type: Input
+            }], paginationLimits: [{
+                type: Input
+            }], showLoading: [{
+                type: Input
             }], handleError: [{
                 type: Output
             }], handleSuccess: [{
@@ -2950,16 +3071,97 @@ class IconComponent {
     }
 }
 IconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-IconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: IconComponent, selector: "sfc-icon", inputs: { icon: "icon", imageSrc: "imageSrc" }, ngImport: i0, template: "<div class=\"container\">\r\n    <fa-icon *ngIf=\"icon\" [icon]=\"icon\"></fa-icon>\r\n    <img *ngIf=\"showImage\" [src]=\"imageSrc\">\r\n</div>", styles: [":host{display:inline-block}:host .container{display:flex;align-items:center;justify-content:center}:host .container img{max-width:1.3em}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
+IconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: IconComponent, selector: "sfc-icon", inputs: { icon: "icon", imageSrc: "imageSrc" }, ngImport: i0, template: "<div class=\"container\">\r\n    <fa-icon *ngIf=\"icon\" [icon]=\"icon\"></fa-icon>\r\n    <img *ngIf=\"showImage\" [src]=\"imageSrc\">\r\n</div>", styles: [":host{display:inline-block}:host .container{display:flex;align-items:center;justify-content:center}:host .container img{max-width:1.3em;max-height:1.3em}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: IconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-icon', template: "<div class=\"container\">\r\n    <fa-icon *ngIf=\"icon\" [icon]=\"icon\"></fa-icon>\r\n    <img *ngIf=\"showImage\" [src]=\"imageSrc\">\r\n</div>", styles: [":host{display:inline-block}:host .container{display:flex;align-items:center;justify-content:center}:host .container img{max-width:1.3em}\n"] }]
+            args: [{ selector: 'sfc-icon', template: "<div class=\"container\">\r\n    <fa-icon *ngIf=\"icon\" [icon]=\"icon\"></fa-icon>\r\n    <img *ngIf=\"showImage\" [src]=\"imageSrc\">\r\n</div>", styles: [":host{display:inline-block}:host .container{display:flex;align-items:center;justify-content:center}:host .container img{max-width:1.3em;max-height:1.3em}\n"] }]
         }], propDecorators: { icon: [{
                 type: Input
             }], imageSrc: [{
                 type: Input
             }] } });
 
+class CollapseExpandConstants {
+}
+CollapseExpandConstants.LABEL_EXPAND_DEFAULT = 'Expand';
+CollapseExpandConstants.LABEL_COLLAPSE_DEFAULT = 'Collapse';
+
+class CollapseExpandComponent {
+    constructor() {
+        this.expand = false;
+        this.labelExpand = CollapseExpandConstants.LABEL_EXPAND_DEFAULT;
+        this.labelCollapse = CollapseExpandConstants.LABEL_COLLAPSE_DEFAULT;
+    }
+    get label() {
+        return this.expand ? this.labelCollapse : this.labelExpand;
+    }
+    get icon() {
+        return this.expand ? faChevronUp : faChevronDown;
+    }
+}
+CollapseExpandComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CollapseExpandComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CollapseExpandComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: CollapseExpandComponent, selector: "sfc-collapse-expand", inputs: { expand: "expand", labelExpand: "labelExpand", labelCollapse: "labelCollapse" }, ngImport: i0, template: "<div class=\"container\">\r\n    <span>{{label}}</span>\r\n    <fa-icon [icon]=\"icon\"></fa-icon>\r\n</div>", styles: [":host{-webkit-user-select:none;user-select:none;cursor:pointer}:host .container{display:flex;justify-content:space-between;align-items:center;transition:color .5s ease}:host .container,:host-context(.sfc-default-theme) :host .container{color:#545e61}:host-context(.sfc-dark-theme) :host .container{color:#fff}:host .container span{padding-right:.5em;font-weight:700}:host .container:hover{color:#ffce54}\n"], dependencies: [{ kind: "component", type: i1$2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CollapseExpandComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-collapse-expand', template: "<div class=\"container\">\r\n    <span>{{label}}</span>\r\n    <fa-icon [icon]=\"icon\"></fa-icon>\r\n</div>", styles: [":host{-webkit-user-select:none;user-select:none;cursor:pointer}:host .container{display:flex;justify-content:space-between;align-items:center;transition:color .5s ease}:host .container,:host-context(.sfc-default-theme) :host .container{color:#545e61}:host-context(.sfc-dark-theme) :host .container{color:#fff}:host .container span{padding-right:.5em;font-weight:700}:host .container:hover{color:#ffce54}\n"] }]
+        }], propDecorators: { expand: [{
+                type: Input
+            }], labelExpand: [{
+                type: Input
+            }], labelCollapse: [{
+                type: Input
+            }] } });
+
+class CollapseExpandContainerComponent {
+    constructor() {
+        this.faChevronDown = faChevronDown;
+        this.faChevronUp = faChevronUp;
+        this.expand = false;
+        this.delimeter = false;
+    }
+}
+CollapseExpandContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CollapseExpandContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CollapseExpandContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: CollapseExpandContainerComponent, selector: "sfc-collapse-expand-container", inputs: { expand: "expand", labelExpand: "labelExpand", labelCollapse: "labelCollapse", delimeter: "delimeter" }, ngImport: i0, template: "<div class=\"container\">\r\n    <sfc-collapse-expand [expand]=\"expand\" [labelExpand]=\"labelExpand\" [labelCollapse]=\"labelCollapse\"\r\n        (click)=\"expand = !expand\" [sfcComponentSize] [customSize]=\"0.8\">\r\n    </sfc-collapse-expand>\r\n    <div class=\"content\" [sfcIf]=\"expand\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n    <sfc-delimeter *ngIf=\"delimeter\"></sfc-delimeter>\r\n</div>", styles: [":host .container{display:flex;flex-direction:column;align-items:flex-end}:host .container sfc-collapse-expand{padding-bottom:.3em}:host .container .content{width:100%}:host .container sfc-delimeter{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IfDirective, selector: "[sfcIf]", inputs: ["sfcIf"] }, { kind: "directive", type: ComponentSizeDirective, selector: "[sfcComponentSize]", inputs: ["sfcComponentSize", "customSize"] }, { kind: "component", type: DelimeterComponent, selector: "sfc-delimeter", inputs: ["label", "direction"] }, { kind: "component", type: CollapseExpandComponent, selector: "sfc-collapse-expand", inputs: ["expand", "labelExpand", "labelCollapse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CollapseExpandContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-collapse-expand-container', template: "<div class=\"container\">\r\n    <sfc-collapse-expand [expand]=\"expand\" [labelExpand]=\"labelExpand\" [labelCollapse]=\"labelCollapse\"\r\n        (click)=\"expand = !expand\" [sfcComponentSize] [customSize]=\"0.8\">\r\n    </sfc-collapse-expand>\r\n    <div class=\"content\" [sfcIf]=\"expand\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n    <sfc-delimeter *ngIf=\"delimeter\"></sfc-delimeter>\r\n</div>", styles: [":host .container{display:flex;flex-direction:column;align-items:flex-end}:host .container sfc-collapse-expand{padding-bottom:.3em}:host .container .content{width:100%}:host .container sfc-delimeter{width:100%}\n"] }]
+        }], propDecorators: { expand: [{
+                type: Input
+            }], labelExpand: [{
+                type: Input
+            }], labelCollapse: [{
+                type: Input
+            }], delimeter: [{
+                type: Input
+            }] } });
+
+class ToggleComponent {
+    constructor() {
+        this.active = false;
+        this.disabled = false;
+        this.onClick = () => this.active = !this.active;
+    }
+}
+ToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ToggleComponent, selector: "sfc-toggle", inputs: { active: "active", disabled: "disabled" }, host: { listeners: { "click": "onClick()" }, properties: { "class.active": "this.active", "class.disabled": "this.disabled" } }, ngImport: i0, template: `<div class="container"><label></label></div>`, isInline: true, styles: [":host .container label{display:block;width:2.5em;height:1.25em;box-sizing:border-box;cursor:pointer;padding:.125em;background:transparent;border:.1em solid;border-radius:2em;transition:border-color .5s ease;transition:all .5s ease}:host .container label,:host-context(.sfc-default-theme) :host .container label{border-color:#545e61}:host-context(.sfc-dark-theme) :host .container label{border-color:#fff}:host .container label:after,:host .container label:before{content:\"\";position:relative;display:block;width:50%;height:100%}:host .container label:after{content:\"\";left:0;transition:background .5s ease;transition:all .5s ease;border-radius:1em}:host .container label:after,:host-context(.sfc-default-theme) :host .container label:after{background:#545e61}:host-context(.sfc-dark-theme) :host .container label:after{background:#fff}:host .container label:before{display:none}:host.active .container label:after{left:50%}:host.disabled{pointer-events:none}:host.disabled .container label{transition:border-color .5s ease}:host.disabled .container label,:host-context(.sfc-default-theme) :host.disabled .container label{border-color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .container label{border-color:#656d78}:host.disabled .container label:after{transition:background .5s ease}:host.disabled .container label:after,:host-context(.sfc-default-theme) :host.disabled .container label:after{background:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .container label:after{background:#656d78}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ToggleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-toggle', template: `<div class="container"><label></label></div>`, styles: [":host .container label{display:block;width:2.5em;height:1.25em;box-sizing:border-box;cursor:pointer;padding:.125em;background:transparent;border:.1em solid;border-radius:2em;transition:border-color .5s ease;transition:all .5s ease}:host .container label,:host-context(.sfc-default-theme) :host .container label{border-color:#545e61}:host-context(.sfc-dark-theme) :host .container label{border-color:#fff}:host .container label:after,:host .container label:before{content:\"\";position:relative;display:block;width:50%;height:100%}:host .container label:after{content:\"\";left:0;transition:background .5s ease;transition:all .5s ease;border-radius:1em}:host .container label:after,:host-context(.sfc-default-theme) :host .container label:after{background:#545e61}:host-context(.sfc-dark-theme) :host .container label:after{background:#fff}:host .container label:before{display:none}:host.active .container label:after{left:50%}:host.disabled{pointer-events:none}:host.disabled .container label{transition:border-color .5s ease}:host.disabled .container label,:host-context(.sfc-default-theme) :host.disabled .container label{border-color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .container label{border-color:#656d78}:host.disabled .container label:after{transition:background .5s ease}:host.disabled .container label:after,:host-context(.sfc-default-theme) :host.disabled .container label:after{background:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .container label:after{background:#656d78}\n"] }]
+        }], propDecorators: { active: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.' + UIClass.Active]
+            }], disabled: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.' + UIClass.Disabled]
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
 class NgxSfcCommonModule {
 }
 NgxSfcCommonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NgxSfcCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -2967,6 +3169,7 @@ NgxSfcCommonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", vers
         // directives
         ClickOutsideDirective,
         ShowHideElementDirective,
+        CollapseExpandDirective,
         IfDirective,
         ThrowElementOnHoverDirective,
         TemplateReferenceDirective,
@@ -2977,6 +3180,7 @@ NgxSfcCommonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", vers
         ScrollTrackerDirective,
         ScrollIntoViewDirective,
         ImageLoadDirective,
+        ComponentReferenceDirective,
         // components
         ButtonComponent,
         TooltipComponent,
@@ -2989,10 +3193,12 @@ NgxSfcCommonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", vers
         HamburgerMenuComponent,
         DotsComponent,
         PaginationComponent,
-        SortingComponent,
         LoadMoreButtonComponent,
         LoadContainerComponent,
         IconComponent,
+        CollapseExpandComponent,
+        CollapseExpandContainerComponent,
+        ToggleComponent,
         // loaders
         BounceLoaderComponent,
         CircleLoaderComponent,
@@ -3003,11 +3209,13 @@ NgxSfcCommonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", vers
         DefaultModalHeaderComponent,
         DefaultModalFooterComponent,
         // pipes
-        SwitchMultiCasePipe], imports: [CommonModule,
+        SwitchMultiCasePipe,
+        SortByPipe], imports: [CommonModule,
         FontAwesomeModule], exports: [
         // directives
         ClickOutsideDirective,
         ShowHideElementDirective,
+        CollapseExpandDirective,
         IfDirective,
         ThrowElementOnHoverDirective,
         TemplateReferenceDirective,
@@ -3018,6 +3226,7 @@ NgxSfcCommonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", vers
         ScrollTrackerDirective,
         ScrollIntoViewDirective,
         ImageLoadDirective,
+        ComponentReferenceDirective,
         // components
         ButtonComponent,
         TooltipComponent,
@@ -3030,10 +3239,12 @@ NgxSfcCommonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", vers
         HamburgerComponent,
         HamburgerMenuComponent,
         PaginationComponent,
-        SortingComponent,
         LoadMoreButtonComponent,
         LoadContainerComponent,
         IconComponent,
+        CollapseExpandComponent,
+        CollapseExpandContainerComponent,
+        ToggleComponent,
         // loaders
         BounceLoaderComponent,
         CircleLoaderComponent,
@@ -3044,7 +3255,8 @@ NgxSfcCommonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", vers
         DefaultModalHeaderComponent,
         DefaultModalFooterComponent,
         // pipes
-        SwitchMultiCasePipe] });
+        SwitchMultiCasePipe,
+        SortByPipe] });
 NgxSfcCommonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NgxSfcCommonModule, providers: [DOCUMENT_PROVIDERS, WINDOW_PROVIDERS], imports: [CommonModule,
         FontAwesomeModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NgxSfcCommonModule, decorators: [{
@@ -3054,6 +3266,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                         // directives
                         ClickOutsideDirective,
                         ShowHideElementDirective,
+                        CollapseExpandDirective,
                         IfDirective,
                         ThrowElementOnHoverDirective,
                         TemplateReferenceDirective,
@@ -3064,6 +3277,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                         ScrollTrackerDirective,
                         ScrollIntoViewDirective,
                         ImageLoadDirective,
+                        ComponentReferenceDirective,
                         // components
                         ButtonComponent,
                         TooltipComponent,
@@ -3076,10 +3290,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                         HamburgerMenuComponent,
                         DotsComponent,
                         PaginationComponent,
-                        SortingComponent,
                         LoadMoreButtonComponent,
                         LoadContainerComponent,
                         IconComponent,
+                        CollapseExpandComponent,
+                        CollapseExpandContainerComponent,
+                        ToggleComponent,
                         // loaders
                         BounceLoaderComponent,
                         CircleLoaderComponent,
@@ -3090,7 +3306,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                         DefaultModalHeaderComponent,
                         DefaultModalFooterComponent,
                         // pipes
-                        SwitchMultiCasePipe
+                        SwitchMultiCasePipe,
+                        SortByPipe
                     ],
                     imports: [
                         CommonModule,
@@ -3100,6 +3317,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                         // directives
                         ClickOutsideDirective,
                         ShowHideElementDirective,
+                        CollapseExpandDirective,
                         IfDirective,
                         ThrowElementOnHoverDirective,
                         TemplateReferenceDirective,
@@ -3110,6 +3328,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                         ScrollTrackerDirective,
                         ScrollIntoViewDirective,
                         ImageLoadDirective,
+                        ComponentReferenceDirective,
                         // components
                         ButtonComponent,
                         TooltipComponent,
@@ -3122,10 +3341,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                         HamburgerComponent,
                         HamburgerMenuComponent,
                         PaginationComponent,
-                        SortingComponent,
                         LoadMoreButtonComponent,
                         LoadContainerComponent,
                         IconComponent,
+                        CollapseExpandComponent,
+                        CollapseExpandContainerComponent,
+                        ToggleComponent,
                         // loaders
                         BounceLoaderComponent,
                         CircleLoaderComponent,
@@ -3136,7 +3357,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                         DefaultModalHeaderComponent,
                         DefaultModalFooterComponent,
                         // pipes
-                        SwitchMultiCasePipe
+                        SwitchMultiCasePipe,
+                        SortByPipe
                     ],
                     providers: [DOCUMENT_PROVIDERS, WINDOW_PROVIDERS]
                 }]
@@ -3150,6 +3372,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BounceLoaderComponent, BrowserDocumentRef, BrowserWindowRef, ButtonComponent, ButtonType, CheckmarkComponent, CheckmarkType, CircleLoaderComponent, CircleLoaderType, ClickOutsideDirective, CloseComponent, CommonConstants, Compare, ComponentSize, ComponentSizeDirective, DOCUMENT, DOCUMENT_PROVIDERS, DateTimeConstants, DefaultModalFooterComponent, DefaultModalHeaderComponent, DelimeterComponent, DestroyParentDirective, Direction, DocumentRef, DomChangesDirective, DotsComponent, HamburgerComponent, HamburgerMenuComponent, IconComponent, IfDirective, ImageLoadDirective, ImageLoadService, LoadChangesSource, LoadContainerComponent, LoadContainerType, LoadMoreButtonComponent, LoaderService, MediaLimits, ModalComponent, ModalOpenDirective, ModalOpenOnClickDirective, ModalService, ModalTemplate, MouseDownDirective, NgxSfcCommonModule, PaginationComponent, PaginationService, Position, ResizeService, ScrollIntoViewDirective, ScrollTrackerDirective, Sequence, ShowHideElementDirective, SortingComponent, SortingDirection, SortingService, SwitchMultiCasePipe, TemplateContentComponent, TemplateReferenceDirective, Theme, ThrowElementOnHoverDirective, ToggleSwitcherComponent, TooltipComponent, TooltipType, UIClass, UIConstants, WINDOW, WINDOW_PROVIDERS, WindowRef, addClasses, addItem, addPropertyToObject, all, any, browserDocumentProvider, browserWindowProvider, contains, convertFromBase64String, convertTimestampToDate, convertToBase64String, convertUTCDateToLocalDate, count, distinct, documentFactory, documentProvider, firstItem, firstOrDefault, getCalcValue, getCollectionOrEmpty, getCssLikeValue, getFileExtension, getFirstDayOfMonth, getFirstDayOfMonthByYearAndMonth, getFirstDayOfYear, getLastDayOfMonth, getLastDayOfMonthByYearAndMonth, getLastDayOfYear, getNextDate, getNextMonth, getNextYear, getPreviousDate, getPreviousMonth, getPreviousYear, getRotateValue, getValueFromCssLikeValue, getWeeksNumberInMonth, hasItem, hasItemBy, hasObjectItem, hexToRgb, isAsyncData, isChromeBrowser, isDateGreat, isDateGreatOrEqual, isDateTimeGreat, isDateTimeGreatOrEqual, isDefined, isEmail, isEqual, isEqualDateTimes, isEqualDates, isImage, isNullOrEmptyString, isNumeric, isObject, lastItem, max, mergeDeep, nameof, parseBoolean, parseFileSize, readAsDataURL, remove, removeClasses, removeItem, removeItemBy, removePropertyFromObject, replaceRgbOpacity, rgbToHex, setDay, setDefaultSecondsAndMiliseconds, setHours, setMilliseconds, setMinutes, setSeconds, setYear, skip, sort, sortBy, sortByPath, sum, trim, updateItemBy, where, windowFactory, windowProvider };
+export { BounceLoaderComponent, BrowserDocumentRef, BrowserWindowRef, ButtonComponent, ButtonType, CheckmarkComponent, CheckmarkType, CircleLoaderComponent, CircleLoaderType, ClickOutsideDirective, CloseComponent, CollapseExpandComponent, CollapseExpandContainerComponent, CollapseExpandDirective, CommonConstants, Compare, ComponentReferenceDirective, ComponentSize, ComponentSizeDirective, DOCUMENT, DOCUMENT_PROVIDERS, DateTimeConstants, DefaultModalFooterComponent, DefaultModalHeaderComponent, DelimeterComponent, DestroyParentDirective, Direction, DocumentRef, DomChangesDirective, DotsComponent, HamburgerComponent, HamburgerMenuComponent, IconComponent, IfDirective, ImageLoadDirective, ImageLoadService, LoadContainerChangesSource, LoadContainerComponent, LoadContainerLoadType, LoadContainerType, LoadMoreButtonComponent, LoadMoreService, LoaderService, MediaLimits, ModalComponent, ModalOpenDirective, ModalOpenOnClickDirective, ModalService, ModalTemplate, MouseDownDirective, NgxSfcCommonModule, PaginationComponent, PaginationConstants, PaginationService, Position, ResizeService, ScrollIntoViewDirective, ScrollTrackerDirective, Sequence, ShowHideElementDirective, SortByPipe, SortingDirection, SortingService, SwitchMultiCasePipe, TemplateContentComponent, TemplateReferenceDirective, Theme, ThrowElementOnHoverDirective, ToggleComponent, ToggleSwitcherComponent, TooltipComponent, TooltipType, UIClass, UIConstants, WINDOW, WINDOW_PROVIDERS, WindowRef, addClasses, addItem, addPropertyToObject, all, any, browserDocumentProvider, browserWindowProvider, buildHttpParams, contains, convertDateToTimestamp, convertFromBase64String, convertTimestampToDate, convertToBase64String, convertUTCDateToLocalDate, count, distinct, documentFactory, documentProvider, firstItem, firstOrDefault, generateGuid, getAge, getCalcValue, getCollectionOrEmpty, getCssLikeValue, getFileExtension, getFirstDayOfMonth, getFirstDayOfMonthByYearAndMonth, getFirstDayOfYear, getLastDayOfMonth, getLastDayOfMonthByYearAndMonth, getLastDayOfYear, getNextDate, getNextMonth, getNextYear, getPreviousDate, getPreviousMonth, getPreviousYear, getRotateValue, getValueFromCssLikeValue, getWeeksNumberInMonth, hasItem, hasItemBy, hasObjectItem, hexToRgb, isAsyncData, isChromeBrowser, isDateGreat, isDateGreatOrEqual, isDateTimeGreat, isDateTimeGreatOrEqual, isDefined, isEmail, isEqual, isEqualDateTimes, isEqualDates, isImage, isNullOrEmptyString, isNumeric, isObject, lastItem, max, mergeDeep, nameof, parseBoolean, parseFileSize, readAsDataURL, remove, removeClasses, removeItem, removeItemBy, removePropertyFromObject, replaceRgbOpacity, rgbToHex, setDay, setDefaultSecondsAndMiliseconds, setHours, setMilliseconds, setMinutes, setSeconds, setYear, skip, sort, sortBy, sortByPath, sum, trim, updateItemBy, where, windowFactory, windowProvider };
 //# sourceMappingURL=ngx-sfc-common.mjs.map
 //# sourceMappingURL=ngx-sfc-common.mjs.map