ngx-sfc-common 0.0.1 → 0.0.4

package/fesm2020/ngx-sfc-common.mjs

@@ -1,11 +1,101 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, Injectable, PLATFORM_ID, EventEmitter, Directive, Inject, Input, Output, HostListener, Component, HostBinding, ContentChildren, NgModule } from '@angular/core';
-import * as i1$1 from '@angular/common';
+import * as i1$2 from '@angular/common';
 import { isPlatformBrowser, CommonModule } from '@angular/common';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { Subject, fromEvent, Observable, startWith, BehaviorSubject, filter, distinctUntilChanged, map, EMPTY } from 'rxjs';
+import { Subject, fromEvent, Observable, startWith, BehaviorSubject, filter, distinctUntilChanged, map, EMPTY, combineLatest } from 'rxjs';
 import * as i1 from '@angular/platform-browser';
+import * as i1$1 from '@fortawesome/angular-fontawesome';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { trigger, state, style, transition, group, query, animate, animateChild } from '@angular/animations';
+import { faTimes, faWindowRestore, faCheck, faChevronLeft, faChevronRight, faChevronUp, faChevronDown } from '@fortawesome/free-solid-svg-icons';
+
+/**
+ * Component sizes
+ */
+var ComponentSize;
+(function (ComponentSize) {
+    ComponentSize["Small"] = "small";
+    ComponentSize["Medium"] = "medium";
+    ComponentSize["Large"] = "large";
+    ComponentSize["Custom"] = "custom";
+})(ComponentSize || (ComponentSize = {}));
+
+/**
+ * Direction types
+ */
+var Direction;
+(function (Direction) {
+    Direction["Horizontal"] = "horizontal";
+    Direction["Vertical"] = "vertical";
+})(Direction || (Direction = {}));
+
+/**
+ * CSS Media limits
+ */
+var MediaLimits;
+(function (MediaLimits) {
+    MediaLimits[MediaLimits["Laptop"] = 1200] = "Laptop";
+    MediaLimits[MediaLimits["Tablet"] = 767] = "Tablet";
+    MediaLimits[MediaLimits["Phone"] = 430] = "Phone";
+})(MediaLimits || (MediaLimits = {}));
+
+/**
+ * Position directions
+ */
+var Position;
+(function (Position) {
+    Position["Top"] = "top";
+    Position["Bottom"] = "bottom";
+    Position["Left"] = "left";
+    Position["Right"] = "right";
+    Position["Center"] = "center";
+})(Position || (Position = {}));
+
+/**
+ * Type of sorting
+ */
+var SortingDirection;
+(function (SortingDirection) {
+    SortingDirection["Ascending"] = "ascending";
+    SortingDirection["Descending"] = "descending";
+})(SortingDirection || (SortingDirection = {}));
+
+/**
+ * Theme types
+ */
+var Theme;
+(function (Theme) {
+    Theme["Default"] = "sfc-default-theme";
+    Theme["Dark"] = "sfc-dark-theme";
+})(Theme || (Theme = {}));
+
+/**
+ * UI classes
+ */
+var UIClass;
+(function (UIClass) {
+    UIClass["Active"] = "active";
+    UIClass["Valid"] = "valid";
+    UIClass["Invalid"] = "invalid";
+    UIClass["Enabled"] = "enabled";
+    UIClass["Disabled"] = "disabled";
+    UIClass["Selected"] = "selected";
+    UIClass["Empty"] = "empty";
+    UIClass["Focus"] = "focus";
+    UIClass["Open"] = "open";
+    UIClass["Loading"] = "loading";
+    UIClass["Removed"] = "removed";
+    UIClass["Visible"] = "visible";
+    UIClass["Hidden"] = "hidden";
+    UIClass["Animated"] = "animated";
+    UIClass["Expanded"] = "expanded";
+    UIClass["Fixed"] = "fixed";
+    UIClass["Bordered"] = "bordered";
+    UIClass["Even"] = "even";
+    UIClass["Pointer"] = "pointer";
+})(UIClass || (UIClass = {}));
+;
 
 /**
  * Create a new injection token for injecting the Document into a component.
@@ -33,9 +123,9 @@ class BrowserDocumentRef extends DocumentRef {
         return document;
     }
 }
-BrowserDocumentRef.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: BrowserDocumentRef, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-BrowserDocumentRef.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: BrowserDocumentRef });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: BrowserDocumentRef, decorators: [{
+BrowserDocumentRef.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: BrowserDocumentRef, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+BrowserDocumentRef.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: BrowserDocumentRef });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: BrowserDocumentRef, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return []; } });
 /**
@@ -50,7 +140,7 @@ function documentFactory(browserDocumentRef, platformId) {
     }
     const doc = {
         hidden: false,
-        visibilityState: 'visible'
+        visibilityState: UIClass.Visible
     };
     return doc;
 }
@@ -100,9 +190,9 @@ class BrowserWindowRef extends WindowRef {
         return window;
     }
 }
-BrowserWindowRef.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: BrowserWindowRef, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-BrowserWindowRef.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: BrowserWindowRef });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: BrowserWindowRef, decorators: [{
+BrowserWindowRef.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: BrowserWindowRef, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+BrowserWindowRef.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: BrowserWindowRef });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: BrowserWindowRef, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return []; } });
 /**
@@ -170,9 +260,9 @@ class ResizeService {
         this.windowWidth = event.target;
     }
 }
-ResizeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ResizeService, deps: [{ token: i1.EventManager }], target: i0.ɵɵFactoryTarget.Injectable });
-ResizeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ResizeService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ResizeService, decorators: [{
+ResizeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ResizeService, deps: [{ token: i1.EventManager }], target: i0.ɵɵFactoryTarget.Injectable });
+ResizeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ResizeService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ResizeService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -223,9 +313,9 @@ class ClickOutsideDirective {
         return false;
     }
 }
-ClickOutsideDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ClickOutsideDirective, deps: [{ token: i0.ElementRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive });
-ClickOutsideDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: ClickOutsideDirective, selector: "[sfcClickOutside]", inputs: { listening: ["sfcClickOutside", "listening"] }, outputs: { action: "action" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ClickOutsideDirective, decorators: [{
+ClickOutsideDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ClickOutsideDirective, deps: [{ token: i0.ElementRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive });
+ClickOutsideDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: ClickOutsideDirective, selector: "[sfcClickOutside]", inputs: { listening: ["sfcClickOutside", "listening"] }, outputs: { action: "action" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ClickOutsideDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[sfcClickOutside]'
@@ -244,7 +334,8 @@ class CommonConstants {
 }
 CommonConstants.NOT_FOUND_INDEX = -1;
 CommonConstants.EMPTY_STRING = '';
-CommonConstants.MOUSE_BUTTON_LEFT = 0;
+CommonConstants.MOUSE_BUTTON_LEFT = 0;
+CommonConstants.FULL_PERCENTAGE = 100;
 
 class DateTimeConstants {
 }
@@ -262,13 +353,16 @@ UIConstants.CSS_DEGREES = 'deg';
 UIConstants.CSS_EM = 'em';
 UIConstants.CSS_VISIBILITY_VISIBLE = 'visible';
 UIConstants.CSS_VISIBILITY_HIDDEN = 'hidden';
-UIConstants.DEFAULT_THEME = 'sfc-default-theme';
-UIConstants.DARK_THEME = 'sfc-dark-theme';
 UIConstants.CSS_WIDTH = 'width';
 UIConstants.CSS_LEFT = 'left';
+UIConstants.CSS_RIGHT = 'right';
+UIConstants.CSS_START = 'start';
+UIConstants.CSS_END = 'end';
+UIConstants.CSS_CENTER = 'center';
 UIConstants.CSS_CLASS_FIXED = 'fixed';
 UIConstants.CSS_CLASS_BACKGROUND = 'background';
-UIConstants.CSS_CLASS_TOP = 'top';
+UIConstants.CSS_CLASS_TOP = 'top';
+UIConstants.RGB_OPACITY_PLACEHOLDER = '{opacity}';
 
 class ShowHideElementDirective {
     constructor(el) {
@@ -295,9 +389,9 @@ class ShowHideElementDirective {
             linear`;
     }
 }
-ShowHideElementDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ShowHideElementDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-ShowHideElementDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: ShowHideElementDirective, selector: "[sfcShowHideElement]", inputs: { showHideElement: ["sfcShowHideElement", "showHideElement"], delay: "delay" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ShowHideElementDirective, decorators: [{
+ShowHideElementDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ShowHideElementDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+ShowHideElementDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: ShowHideElementDirective, selector: "[sfcShowHideElement]", inputs: { showHideElement: ["sfcShowHideElement", "showHideElement"], delay: "delay" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ShowHideElementDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[sfcShowHideElement]'
@@ -370,7 +464,7 @@ function removePropertyFromObject(obj, property) {
  * @returns Merged object
  */
 function mergeDeep(target, ...sources) {
-    if (!isDefined(sources))
+    if (!sources.length)
         return target;
     const source = sources.shift();
     if (isObject(target) && isObject(source)) {
@@ -392,7 +486,15 @@ function mergeDeep(target, ...sources) {
  * @param name KeyOf property
  * @returns Type's property name
  */
-const nameof = (name) => name;
+const nameof = (name) => name;
+/**
+   * Determines if the input is a Number or something that can be coerced to a Number
+   * @param - The input to be tested
+   * @returns - An indication if the input is a Number or can be coerced to a Number
+   */
+function isNumeric(number) {
+    return !isNaN(parseFloat(number));
+}
 
 /**
  * Return true if string has value(not empty string)
@@ -400,7 +502,7 @@ const nameof = (name) => name;
  * @returns True if string is not null and defined(not empty string)
  */
 function isNullOrEmptyString(value) {
-    return isDefined(value) || value === CommonConstants.EMPTY_STRING;
+    return !isDefined(value) || value === CommonConstants.EMPTY_STRING;
 }
 /**
  * Return true if value contains includeValue
@@ -695,6 +797,15 @@ function getCssLikeValue(value, type = UIConstants.CSS_PIXELS) {
 function getValueFromCssLikeValue(value, type = UIConstants.CSS_PIXELS) {
     return +value.replace(type, CommonConstants.EMPTY_STRING);
 }
+/**
+ * Return CCS like calc value
+ * @param value All value (100% by default)
+ * @param part Part value
+ * @returns Calc value
+ */
+function getCalcValue(part, value = 100) {
+    return `calc(${value}${UIConstants.CSS_PERCENTAGE} / ${part} )`;
+}
 /**
  * Add classes to HTML element
  * @param element HTML element
@@ -714,76 +825,41 @@ function removeClasses(element, ...classNames) {
     if (isDefined(element)) {
         classNames.forEach((className) => element.classList.remove(className));
     }
-}
-
-/**
- * Component sizes
- */
-var ComponentSize;
-(function (ComponentSize) {
-    ComponentSize["Small"] = "small";
-    ComponentSize["Medium"] = "medium";
-    ComponentSize["Large"] = "large";
-    ComponentSize["Custom"] = "custom";
-})(ComponentSize || (ComponentSize = {}));
-/**
- * Type of sorting
- */
-var SortingDirection;
-(function (SortingDirection) {
-    SortingDirection["Ascending"] = "ascending";
-    SortingDirection["Descending"] = "descending";
-})(SortingDirection || (SortingDirection = {}));
-/**
- * UI classes
- */
-var UIClass;
-(function (UIClass) {
-    UIClass["Active"] = "active";
-    UIClass["Valid"] = "valid";
-    UIClass["Invalid"] = "invalid";
-    UIClass["Enabled"] = "enabled";
-    UIClass["Disabled"] = "disabled";
-    UIClass["Selected"] = "selected";
-    UIClass["Empty"] = "empty";
-    UIClass["Focus"] = "focus";
-    UIClass["Open"] = "open";
-    UIClass["Loading"] = "loading";
-    UIClass["Removed"] = "removed";
-    UIClass["Visible"] = "visible";
-    UIClass["Hidden"] = "hidden";
-    UIClass["Animated"] = "animated";
-    UIClass["Expanded"] = "expanded";
-    UIClass["Fixed"] = "fixed";
-})(UIClass || (UIClass = {}));
-;
+}
 /**
- * Position directions
+ * Convert RGB color to HEX
+ * @param r Red
+ * @param g Green
+ * @param b Blue
+ * @returns HEX value
  */
-var Position;
-(function (Position) {
-    Position["Top"] = "top";
-    Position["Bottom"] = "bottom";
-    Position["Left"] = "left";
-    Position["Right"] = "right";
-})(Position || (Position = {}));
+function rgbToHex(r, g, b) {
+    return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
+}
 /**
- * CSS Media limits
+ * Convert HEX to RGB value
+ * @param hex HEX value
+ * @returns RGB value
  */
-var MediaLimits;
-(function (MediaLimits) {
-    MediaLimits[MediaLimits["Laptop"] = 1200] = "Laptop";
-    MediaLimits[MediaLimits["Tablet"] = 767] = "Tablet";
-    MediaLimits[MediaLimits["Phone"] = 430] = "Phone";
-})(MediaLimits || (MediaLimits = {}));
+function hexToRgb(hex) {
+    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    if (result) {
+        var r = parseInt(result[1], 16);
+        var g = parseInt(result[2], 16);
+        var b = parseInt(result[3], 16);
+        return `rgb(${r}, ${g}, ${b})`;
+    }
+    return null;
+}
 /**
- * Direction types
+ * Set opacity for RGB value
+ * @param rgb Rgb value with {opacity} placeholder
+ * @param opacity Opacity value
+ * @returns RGB value with relevant opacity
  */
-var Direction;
-(function (Direction) {
-    Direction["Horizontal"] = "horizontal";
-    Direction["Vertical"] = "vertical";
-})(Direction || (Direction = {}));
+function replaceRgbOpacity(rgb, opacity) {
+    return rgb.replace(UIConstants.RGB_OPACITY_PLACEHOLDER, opacity.toString());
+}
 
 /**
  * Return true if collection not empty
@@ -921,7 +997,7 @@ function sortByPath(collection, path, direction) {
                 i++;
             }
             return direction == SortingDirection.Ascending
-                ? a > b ? 1 : -1
+                ? a >= b ? 1 : -1
                 : a > b ? -1 : 1;
         });
         return collection;
@@ -1042,9 +1118,9 @@ class ThrowElementOnHoverDirective {
         this.style.transform = value ? `translateY(${getCssLikeValue(value)})` : null;
     }
 }
-ThrowElementOnHoverDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ThrowElementOnHoverDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-ThrowElementOnHoverDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: ThrowElementOnHoverDirective, selector: "[sfcThrowElementOnHover]", inputs: { throwValue: ["sfcThrowElementOnHover", "throwValue"] }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ThrowElementOnHoverDirective, decorators: [{
+ThrowElementOnHoverDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ThrowElementOnHoverDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+ThrowElementOnHoverDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: ThrowElementOnHoverDirective, selector: "[sfcThrowElementOnHover]", inputs: { throwValue: ["sfcThrowElementOnHover", "throwValue"] }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ThrowElementOnHoverDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[sfcThrowElementOnHover]'
@@ -1066,9 +1142,9 @@ class TemplateReferenceDirective {
         this.templateName = CommonConstants.EMPTY_STRING;
     }
 }
-TemplateReferenceDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: TemplateReferenceDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-TemplateReferenceDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: TemplateReferenceDirective, selector: "[sfcTemplateReference]", inputs: { templateName: ["sfcTemplateReference", "templateName"] }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: TemplateReferenceDirective, decorators: [{
+TemplateReferenceDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TemplateReferenceDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+TemplateReferenceDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: TemplateReferenceDirective, selector: "[sfcTemplateReference]", inputs: { templateName: ["sfcTemplateReference", "templateName"], data: "data" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TemplateReferenceDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[sfcTemplateReference]'
@@ -1076,6 +1152,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImpor
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; }, propDecorators: { templateName: [{
                 type: Input,
                 args: ['sfcTemplateReference']
+            }], data: [{
+                type: Input
             }] } });
 
 class MouseDownDirective {
@@ -1095,9 +1173,9 @@ class MouseDownDirective {
         }
     }
 }
-MouseDownDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MouseDownDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-MouseDownDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: MouseDownDirective, selector: "[sfcMouseDown]", inputs: { button: "button" }, outputs: { action: "sfcMouseDown" }, host: { listeners: { "mousedown": "onMouseDown($event)" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MouseDownDirective, decorators: [{
+MouseDownDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: MouseDownDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+MouseDownDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: MouseDownDirective, selector: "[sfcMouseDown]", inputs: { button: "button" }, outputs: { action: "sfcMouseDown" }, host: { listeners: { "mousedown": "onMouseDown($event)" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: MouseDownDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[sfcMouseDown]'
@@ -1139,9 +1217,9 @@ class ComponentSizeDirective {
         }
     }
 }
-ComponentSizeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ComponentSizeDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-ComponentSizeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: ComponentSizeDirective, selector: "[sfcComponentSize]", inputs: { size: ["sfcComponentSize", "size"], customSize: "customSize" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ComponentSizeDirective, decorators: [{
+ComponentSizeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ComponentSizeDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+ComponentSizeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: ComponentSizeDirective, selector: "[sfcComponentSize]", inputs: { size: ["sfcComponentSize", "size"], customSize: "customSize" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ComponentSizeDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[sfcComponentSize]'
@@ -1153,6 +1231,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImpor
                 type: Input
             }] } });
 
+class DestroyParentDirective {
+    constructor(el) {
+        this.el = el;
+        this.delay = 0;
+    }
+    set destroyParent(value) {
+        if (value) {
+            setTimeout(() => this.el.nativeElement.parentElement?.remove(), this.delay);
+        }
+    }
+}
+DestroyParentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DestroyParentDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+DestroyParentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: DestroyParentDirective, selector: "[sfcDestroyParent]", inputs: { destroyParent: ["sfcDestroyParent", "destroyParent"], delay: "delay" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DestroyParentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[sfcDestroyParent]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { destroyParent: [{
+                type: Input,
+                args: ['sfcDestroyParent']
+            }], delay: [{
+                type: Input
+            }] } });
+
 var ButtonType;
 (function (ButtonType) {
     ButtonType["Bordered"] = "bordered";
@@ -1177,11 +1280,11 @@ class ButtonComponent {
         return classes;
     }
 }
-ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.6", type: ButtonComponent, selector: "sfc-button", inputs: { text: "text", iconBefore: "iconBefore", iconAfter: "iconAfter", disabled: "disabled", types: "types" }, ngImport: i0, template: "<a class=\"button\" [ngClass]=\"classes\">\r\n    <i *ngIf=\"iconBefore\" class=\"icon before\" [ngClass]=\"iconBefore\"></i>\r\n    <span class=\"text\">{{text}}</span>\r\n    <i *ngIf=\"iconAfter\" class=\"icon after\" [ngClass]=\"iconAfter\"></i>\r\n</a>", styles: [":host-context(.sfc-default-theme) .button.texted:not(:hover):not(.disabled){color:#545e61}:host-context(.sfc-dark-theme) .button.texted:not(:hover):not(.disabled){color:#ccd1d9}.button.bordered{border:solid 2px}:host-context(.sfc-default-theme) .button.bordered:not(:hover):not(.disabled){color:#545e61}:host-context(.sfc-dark-theme) .button.bordered:not(:hover):not(.disabled){color:#ccd1d9}:host-context(.sfc-default-theme) .button.bordered:not(:hover):not(.disabled){border-color:#545e61}:host-context(.sfc-dark-theme) .button.bordered:not(:hover):not(.disabled){border-color:#ccd1d9}.button.filled{color:#fff!important;border-color:#545e61;background:#545e61}.button.filled:hover{color:#fff!important;border-color:#aab2bd;background:#aab2bd}.button.filled.disabled{color:#fff!important;border-color:#bdbdbd;background:#bdbdbd}.button.rounded{border:solid 2px;border-radius:20px;padding:.4em 1.2em}:host-context(.sfc-default-theme) .button.rounded:not(:hover):not(.disabled){color:#545e61}:host-context(.sfc-dark-theme) .button.rounded:not(:hover):not(.disabled){color:#ccd1d9}:host-context(.sfc-default-theme) .button.rounded:not(:hover):not(.disabled){border-color:#545e61}:host-context(.sfc-dark-theme) .button.rounded:not(:hover):not(.disabled){border-color:#ccd1d9}.button.circled{border:solid 2px;width:5em;height:5em;border-radius:50%}:host-context(.sfc-default-theme) .button.circled:not(:hover):not(.disabled){color:#545e61}:host-context(.sfc-dark-theme) .button.circled:not(:hover):not(.disabled){color:#ccd1d9}:host-context(.sfc-default-theme) .button.circled:not(:hover):not(.disabled){border-color:#545e61}:host-context(.sfc-dark-theme) .button.circled:not(:hover):not(.disabled){border-color:#ccd1d9}.button.circled .text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host{display:inline-block;font-size:1em}.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:.8em;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .5s ease,border-color .5s ease,background .5s ease}.button:hover{color:#2bbbad;border-color:#2bbbad}.button.disabled{pointer-events:none}:host-context(.sfc-default-theme) .button.disabled{color:#bdbdbd}:host-context(.sfc-dark-theme) .button.disabled{color:#656d78}:host-context(.sfc-default-theme) .button.disabled{border-color:#bdbdbd}:host-context(.sfc-dark-theme) .button.disabled{border-color:#656d78}.button .icon{padding:3px}.button .text{padding:3px;white-space:initial}.button .text:empty{display:none}\n"], directives: [{ type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ButtonComponent, decorators: [{
+ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: ButtonComponent, selector: "sfc-button", inputs: { text: "text", iconBefore: "iconBefore", iconAfter: "iconAfter", disabled: "disabled", types: "types" }, 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\">{{text}}</span>\r\n    <fa-icon *ngIf=\"iconAfter\" class=\"icon after\" [icon]=\"iconAfter\"></fa-icon>\r\n</a>", styles: [".button.texted:not(:hover):not(.disabled),:host-context(.sfc-default-theme) .button.texted:not(:hover):not(.disabled){color:#545e61}:host-context(.sfc-dark-theme) .button.texted:not(:hover):not(.disabled){color:#ccd1d9}.button.bordered{border:solid 2px}.button.bordered:not(:hover):not(.disabled),:host-context(.sfc-default-theme) .button.bordered:not(:hover):not(.disabled){color:#545e61}:host-context(.sfc-dark-theme) .button.bordered:not(:hover):not(.disabled){color:#ccd1d9}.button.bordered:not(:hover):not(.disabled),:host-context(.sfc-default-theme) .button.bordered:not(:hover):not(.disabled){border-color:#545e61}:host-context(.sfc-dark-theme) .button.bordered:not(:hover):not(.disabled){border-color:#ccd1d9}.button.filled{color:#fff!important;border-color:#545e61;background:#545e61}.button.filled:hover{color:#fff!important;border-color:#aab2bd;background:#aab2bd}.button.filled.disabled{color:#fff!important;border-color:#bdbdbd;background:#bdbdbd}.button.rounded{border:solid 2px;border-radius:20px;padding:.4em 1.2em}.button.rounded:not(:hover):not(.disabled),:host-context(.sfc-default-theme) .button.rounded:not(:hover):not(.disabled){color:#545e61}:host-context(.sfc-dark-theme) .button.rounded:not(:hover):not(.disabled){color:#ccd1d9}.button.rounded:not(:hover):not(.disabled),:host-context(.sfc-default-theme) .button.rounded:not(:hover):not(.disabled){border-color:#545e61}:host-context(.sfc-dark-theme) .button.rounded:not(:hover):not(.disabled){border-color:#ccd1d9}.button.circled{border:solid 2px;width:5em;height:5em;border-radius:50%}.button.circled:not(:hover):not(.disabled),:host-context(.sfc-default-theme) .button.circled:not(:hover):not(.disabled){color:#545e61}:host-context(.sfc-dark-theme) .button.circled:not(:hover):not(.disabled){color:#ccd1d9}.button.circled:not(:hover):not(.disabled),:host-context(.sfc-default-theme) .button.circled:not(:hover):not(.disabled){border-color:#545e61}:host-context(.sfc-dark-theme) .button.circled:not(:hover):not(.disabled){border-color:#ccd1d9}.button.circled .text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host{display:inline-block;font-size:1em}.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;transition:color .5s ease,border-color .5s ease,background .5s ease}.button:hover{color:#2bbbad;border-color:#2bbbad}.button.disabled{pointer-events:none}.button.disabled,:host-context(.sfc-default-theme) .button.disabled{color:#bdbdbd}:host-context(.sfc-dark-theme) .button.disabled{color:#656d78}.button.disabled,:host-context(.sfc-default-theme) .button.disabled{border-color:#bdbdbd}:host-context(.sfc-dark-theme) .button.disabled{border-color:#656d78}.button .icon{padding:3px}.button .text{padding:3px;white-space:initial}.button .text:empty{display:none}\n"], components: [{ type: i1$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-button', template: "<a class=\"button\" [ngClass]=\"classes\">\r\n    <i *ngIf=\"iconBefore\" class=\"icon before\" [ngClass]=\"iconBefore\"></i>\r\n    <span class=\"text\">{{text}}</span>\r\n    <i *ngIf=\"iconAfter\" class=\"icon after\" [ngClass]=\"iconAfter\"></i>\r\n</a>", styles: [":host-context(.sfc-default-theme) .button.texted:not(:hover):not(.disabled){color:#545e61}:host-context(.sfc-dark-theme) .button.texted:not(:hover):not(.disabled){color:#ccd1d9}.button.bordered{border:solid 2px}:host-context(.sfc-default-theme) .button.bordered:not(:hover):not(.disabled){color:#545e61}:host-context(.sfc-dark-theme) .button.bordered:not(:hover):not(.disabled){color:#ccd1d9}:host-context(.sfc-default-theme) .button.bordered:not(:hover):not(.disabled){border-color:#545e61}:host-context(.sfc-dark-theme) .button.bordered:not(:hover):not(.disabled){border-color:#ccd1d9}.button.filled{color:#fff!important;border-color:#545e61;background:#545e61}.button.filled:hover{color:#fff!important;border-color:#aab2bd;background:#aab2bd}.button.filled.disabled{color:#fff!important;border-color:#bdbdbd;background:#bdbdbd}.button.rounded{border:solid 2px;border-radius:20px;padding:.4em 1.2em}:host-context(.sfc-default-theme) .button.rounded:not(:hover):not(.disabled){color:#545e61}:host-context(.sfc-dark-theme) .button.rounded:not(:hover):not(.disabled){color:#ccd1d9}:host-context(.sfc-default-theme) .button.rounded:not(:hover):not(.disabled){border-color:#545e61}:host-context(.sfc-dark-theme) .button.rounded:not(:hover):not(.disabled){border-color:#ccd1d9}.button.circled{border:solid 2px;width:5em;height:5em;border-radius:50%}:host-context(.sfc-default-theme) .button.circled:not(:hover):not(.disabled){color:#545e61}:host-context(.sfc-dark-theme) .button.circled:not(:hover):not(.disabled){color:#ccd1d9}:host-context(.sfc-default-theme) .button.circled:not(:hover):not(.disabled){border-color:#545e61}:host-context(.sfc-dark-theme) .button.circled:not(:hover):not(.disabled){border-color:#ccd1d9}.button.circled .text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host{display:inline-block;font-size:1em}.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:.8em;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .5s ease,border-color .5s ease,background .5s ease}.button:hover{color:#2bbbad;border-color:#2bbbad}.button.disabled{pointer-events:none}:host-context(.sfc-default-theme) .button.disabled{color:#bdbdbd}:host-context(.sfc-dark-theme) .button.disabled{color:#656d78}:host-context(.sfc-default-theme) .button.disabled{border-color:#bdbdbd}:host-context(.sfc-dark-theme) .button.disabled{border-color:#656d78}.button .icon{padding:3px}.button .text{padding:3px;white-space:initial}.button .text:empty{display:none}\n"] }]
+            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\">{{text}}</span>\r\n    <fa-icon *ngIf=\"iconAfter\" class=\"icon after\" [icon]=\"iconAfter\"></fa-icon>\r\n</a>", styles: [".button.texted:not(:hover):not(.disabled),:host-context(.sfc-default-theme) .button.texted:not(:hover):not(.disabled){color:#545e61}:host-context(.sfc-dark-theme) .button.texted:not(:hover):not(.disabled){color:#ccd1d9}.button.bordered{border:solid 2px}.button.bordered:not(:hover):not(.disabled),:host-context(.sfc-default-theme) .button.bordered:not(:hover):not(.disabled){color:#545e61}:host-context(.sfc-dark-theme) .button.bordered:not(:hover):not(.disabled){color:#ccd1d9}.button.bordered:not(:hover):not(.disabled),:host-context(.sfc-default-theme) .button.bordered:not(:hover):not(.disabled){border-color:#545e61}:host-context(.sfc-dark-theme) .button.bordered:not(:hover):not(.disabled){border-color:#ccd1d9}.button.filled{color:#fff!important;border-color:#545e61;background:#545e61}.button.filled:hover{color:#fff!important;border-color:#aab2bd;background:#aab2bd}.button.filled.disabled{color:#fff!important;border-color:#bdbdbd;background:#bdbdbd}.button.rounded{border:solid 2px;border-radius:20px;padding:.4em 1.2em}.button.rounded:not(:hover):not(.disabled),:host-context(.sfc-default-theme) .button.rounded:not(:hover):not(.disabled){color:#545e61}:host-context(.sfc-dark-theme) .button.rounded:not(:hover):not(.disabled){color:#ccd1d9}.button.rounded:not(:hover):not(.disabled),:host-context(.sfc-default-theme) .button.rounded:not(:hover):not(.disabled){border-color:#545e61}:host-context(.sfc-dark-theme) .button.rounded:not(:hover):not(.disabled){border-color:#ccd1d9}.button.circled{border:solid 2px;width:5em;height:5em;border-radius:50%}.button.circled:not(:hover):not(.disabled),:host-context(.sfc-default-theme) .button.circled:not(:hover):not(.disabled){color:#545e61}:host-context(.sfc-dark-theme) .button.circled:not(:hover):not(.disabled){color:#ccd1d9}.button.circled:not(:hover):not(.disabled),:host-context(.sfc-default-theme) .button.circled:not(:hover):not(.disabled){border-color:#545e61}:host-context(.sfc-dark-theme) .button.circled:not(:hover):not(.disabled){border-color:#ccd1d9}.button.circled .text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host{display:inline-block;font-size:1em}.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;transition:color .5s ease,border-color .5s ease,background .5s ease}.button:hover{color:#2bbbad;border-color:#2bbbad}.button.disabled{pointer-events:none}.button.disabled,:host-context(.sfc-default-theme) .button.disabled{color:#bdbdbd}:host-context(.sfc-dark-theme) .button.disabled{color:#656d78}.button.disabled,:host-context(.sfc-default-theme) .button.disabled{border-color:#bdbdbd}:host-context(.sfc-dark-theme) .button.disabled{border-color:#656d78}.button .icon{padding:3px}.button .text{padding:3px;white-space:initial}.button .text:empty{display:none}\n"] }]
         }], propDecorators: { text: [{
                 type: Input
             }], iconBefore: [{
@@ -1228,11 +1331,11 @@ class TooltipComponent {
         this._resizeSubscription?.unsubscribe();
     }
 }
-TooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: TooltipComponent, deps: [{ token: ResizeService }, { token: WINDOW }], target: i0.ɵɵFactoryTarget.Component });
-TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.6", 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 #0003;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"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: TooltipComponent, decorators: [{
+TooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TooltipComponent, deps: [{ token: ResizeService }, { token: WINDOW }], target: i0.ɵɵFactoryTarget.Component });
+TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", 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"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", 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 #0003;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)}: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]
@@ -1264,11 +1367,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImpor
 
 class DelimeterComponent {
 }
-DelimeterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: DelimeterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DelimeterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.6", type: DelimeterComponent, selector: "sfc-delimeter", ngImport: i0, template: ``, isInline: true, styles: [":host{width:100%;height:.07em}:host :host-context(.sfc-default-theme){background:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 17%,rgba(0,0,0,.3) 83%,rgba(0,0,0,0) 100%)}:host :host-context(.sfc-dark-theme){background:linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,.4) 17%,rgba(255,255,255,.4) 83%,rgba(255,255,255,0) 100%)}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: DelimeterComponent, decorators: [{
+DelimeterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DelimeterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DelimeterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: DelimeterComponent, selector: "sfc-delimeter", ngImport: i0, template: ``, isInline: true, styles: [":host{display:inline-block;width:100%;height:1px;margin:.3em 0}:host,:host-context(.sfc-default-theme) :host{background:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 17%,rgba(0,0,0,.3) 83%,rgba(0,0,0,0) 100%)}:host-context(.sfc-dark-theme) :host{background:linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,.4) 17%,rgba(255,255,255,.4) 83%,rgba(255,255,255,0) 100%)}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DelimeterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-delimeter', template: ``, styles: [":host{width:100%;height:.07em}:host :host-context(.sfc-default-theme){background:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 17%,rgba(0,0,0,.3) 83%,rgba(0,0,0,0) 100%)}:host :host-context(.sfc-dark-theme){background:linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,.4) 17%,rgba(255,255,255,.4) 83%,rgba(255,255,255,0) 100%)}\n"] }]
+            args: [{ selector: 'sfc-delimeter', template: ``, styles: [":host{display:inline-block;width:100%;height:1px;margin:.3em 0}:host,:host-context(.sfc-default-theme) :host{background:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 17%,rgba(0,0,0,.3) 83%,rgba(0,0,0,0) 100%)}:host-context(.sfc-dark-theme) :host{background:linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,.4) 17%,rgba(255,255,255,.4) 83%,rgba(255,255,255,0) 100%)}\n"] }]
         }] });
 
 class LoaderConstants {
@@ -1339,9 +1442,9 @@ class LoaderService {
         return null;
     }
 }
-LoaderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: LoaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-LoaderService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: LoaderService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: LoaderService, decorators: [{
+LoaderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: LoaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+LoaderService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: LoaderService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: LoaderService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1381,9 +1484,9 @@ class LoaderBaseComponent {
         return classes;
     }
 }
-LoaderBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: LoaderBaseComponent, deps: [{ token: LoaderService }], target: i0.ɵɵFactoryTarget.Directive });
-LoaderBaseComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: LoaderBaseComponent, inputs: { id: "id", start: "start", background: "background" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: LoaderBaseComponent, decorators: [{
+LoaderBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: LoaderBaseComponent, deps: [{ token: LoaderService }], target: i0.ɵɵFactoryTarget.Directive });
+LoaderBaseComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: LoaderBaseComponent, inputs: { id: "id", start: "start", background: "background" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: LoaderBaseComponent, decorators: [{
             type: Directive
         }], ctorParameters: function () { return [{ type: LoaderService }]; }, propDecorators: { id: [{
                 type: Input
@@ -1395,11 +1498,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImpor
 
 class BounceLoaderComponent extends LoaderBaseComponent {
 }
-BounceLoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: BounceLoaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-BounceLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.6", type: BounceLoaderComponent, selector: "sfc-bounce-loader", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"show$ | async\" class=\"preloader\" [ngClass]=\"preLoaderClasses\">\r\n    <div class=\"spinner\">\r\n        <div class=\"bounce\"></div>\r\n        <div class=\"bounce\"></div>\r\n        <div class=\"bounce\"></div>\r\n    </div>\r\n</div>", styles: [".preloader{position:relative;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center}.preloader.background{opacity:.7}:host-context(.sfc-default-theme) .preloader.background{background-color:#fff}:host-context(.sfc-dark-theme) .preloader.background{background-color:#656d78}.preloader.global{z-index:9999;position:fixed}.preloader.local{z-index:9998;position:absolute}\n", ".spinner{text-align:center}.spinner .bounce{border-radius:100%;display:inline-block;animation:bounce-delay 1.4s infinite ease-in-out both;width:1em;height:1em}:host-context(.sfc-default-theme) .spinner .bounce{background-color:#545e61}:host-context(.sfc-dark-theme) .spinner .bounce{background-color:#fff}.spinner .bounce:nth-child(1){animation-delay:-.32s}.spinner .bounce:nth-child(2){animation-delay:-.16s}@keyframes bounce-delay{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}\n"], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "async": i1$1.AsyncPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: BounceLoaderComponent, decorators: [{
+BounceLoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: BounceLoaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+BounceLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: BounceLoaderComponent, selector: "sfc-bounce-loader", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"show$ | async\" class=\"preloader\" [ngClass]=\"preLoaderClasses\">\r\n    <div class=\"spinner\">\r\n        <div class=\"bounce\"></div>\r\n        <div class=\"bounce\"></div>\r\n        <div class=\"bounce\"></div>\r\n    </div>\r\n</div>", styles: [".preloader{position:relative;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center}.preloader.background{opacity:.7}.preloader.background,:host-context(.sfc-default-theme) .preloader.background{background-color:#fff}:host-context(.sfc-dark-theme) .preloader.background{background-color:#656d78}.preloader.global{z-index:9999;position:fixed}.preloader.local{z-index:9998;position:absolute}\n", ".spinner{text-align:center}.spinner .bounce{border-radius:100%;display:inline-block;animation:bounce-delay 1.4s infinite ease-in-out both;width:1em;height:1em}.spinner .bounce,:host-context(.sfc-default-theme) .spinner .bounce{background-color:#545e61}:host-context(.sfc-dark-theme) .spinner .bounce{background-color:#fff}.spinner .bounce:nth-child(1){animation-delay:-.32s}.spinner .bounce:nth-child(2){animation-delay:-.16s}@keyframes bounce-delay{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}\n"], directives: [{ type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "async": i1$2.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: BounceLoaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-bounce-loader', template: "<div *ngIf=\"show$ | async\" class=\"preloader\" [ngClass]=\"preLoaderClasses\">\r\n    <div class=\"spinner\">\r\n        <div class=\"bounce\"></div>\r\n        <div class=\"bounce\"></div>\r\n        <div class=\"bounce\"></div>\r\n    </div>\r\n</div>", styles: [".preloader{position:relative;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center}.preloader.background{opacity:.7}:host-context(.sfc-default-theme) .preloader.background{background-color:#fff}:host-context(.sfc-dark-theme) .preloader.background{background-color:#656d78}.preloader.global{z-index:9999;position:fixed}.preloader.local{z-index:9998;position:absolute}\n", ".spinner{text-align:center}.spinner .bounce{border-radius:100%;display:inline-block;animation:bounce-delay 1.4s infinite ease-in-out both;width:1em;height:1em}:host-context(.sfc-default-theme) .spinner .bounce{background-color:#545e61}:host-context(.sfc-dark-theme) .spinner .bounce{background-color:#fff}.spinner .bounce:nth-child(1){animation-delay:-.32s}.spinner .bounce:nth-child(2){animation-delay:-.16s}@keyframes bounce-delay{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}\n"] }]
+            args: [{ selector: 'sfc-bounce-loader', template: "<div *ngIf=\"show$ | async\" class=\"preloader\" [ngClass]=\"preLoaderClasses\">\r\n    <div class=\"spinner\">\r\n        <div class=\"bounce\"></div>\r\n        <div class=\"bounce\"></div>\r\n        <div class=\"bounce\"></div>\r\n    </div>\r\n</div>", styles: [".preloader{position:relative;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center}.preloader.background{opacity:.7}.preloader.background,:host-context(.sfc-default-theme) .preloader.background{background-color:#fff}:host-context(.sfc-dark-theme) .preloader.background{background-color:#656d78}.preloader.global{z-index:9999;position:fixed}.preloader.local{z-index:9998;position:absolute}\n", ".spinner{text-align:center}.spinner .bounce{border-radius:100%;display:inline-block;animation:bounce-delay 1.4s infinite ease-in-out both;width:1em;height:1em}.spinner .bounce,:host-context(.sfc-default-theme) .spinner .bounce{background-color:#545e61}:host-context(.sfc-dark-theme) .spinner .bounce{background-color:#fff}.spinner .bounce:nth-child(1){animation-delay:-.32s}.spinner .bounce:nth-child(2){animation-delay:-.16s}@keyframes bounce-delay{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}\n"] }]
         }] });
 
 var CircleLoaderType;
@@ -1414,11 +1517,11 @@ class CircleLoaderComponent extends LoaderBaseComponent {
         this.type = CircleLoaderType.Default;
     }
 }
-CircleLoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: CircleLoaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-CircleLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.6", type: CircleLoaderComponent, selector: "sfc-circle-loader", inputs: { type: "type" }, usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"show$ | async\" class=\"preloader\" [ngClass]=\"preLoaderClasses\">\r\n    <div class=\"circles-container\" [ngClass]=\"type\">\r\n        <div class=\"circle1\"></div>\r\n        <div class=\"circle2\"></div>\r\n        <div class=\"circle3\"></div>\r\n        <div class=\"circle4\"></div>\r\n        <div class=\"circle5\"></div>\r\n        <div class=\"circle6\"></div>\r\n        <div class=\"circle7\"></div>\r\n        <div class=\"circle8\"></div>\r\n        <div class=\"circle9\"></div>\r\n        <div class=\"circle10\"></div>\r\n        <div class=\"circle11\"></div>\r\n        <div class=\"circle12\"></div>\r\n    </div>\r\n</div>", styles: [".preloader{position:relative;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center}.preloader.background{opacity:.7}:host-context(.sfc-default-theme) .preloader.background{background-color:#fff}:host-context(.sfc-dark-theme) .preloader.background{background-color:#656d78}.preloader.global{z-index:9999;position:fixed}.preloader.local{z-index:9998;position:absolute}\n", ".circles-container{position:relative;width:2.5em;height:2.5em}.circles-container div{width:100%;height:100%;position:absolute;left:0;top:0}.circles-container div:before{content:\"\";display:block;margin:0 auto;width:15%;height:15%;border-radius:100%;animation:bounce-delay 1.2s infinite ease-in-out both}:host-context(.sfc-default-theme) .circles-container div:before{background-color:#545e61}:host-context(.sfc-dark-theme) .circles-container div:before{background-color:#fff}.circles-container.fading div:before{animation-name:circle-fade-delay}.circles-container .circle2{transform:rotate(30deg)}.circles-container .circle2:before{animation-delay:-1.1s}.circles-container .circle3{transform:rotate(60deg)}.circles-container .circle3:before{animation-delay:-1s}.circles-container .circle4{transform:rotate(90deg)}.circles-container .circle4:before{animation-delay:-.9s}.circles-container .circle5{transform:rotate(120deg)}.circles-container .circle5:before{animation-delay:-.8s}.circles-container .circle6{transform:rotate(150deg)}.circles-container .circle6:before{animation-delay:-.7s}.circles-container .circle7{transform:rotate(180deg)}.circles-container .circle7:before{animation-delay:-.6s}.circles-container .circle8{transform:rotate(210deg)}.circles-container .circle8:before{animation-delay:-.5s}.circles-container .circle9{transform:rotate(240deg)}.circles-container .circle9:before{animation-delay:-.4s}.circles-container .circle10{transform:rotate(270deg)}.circles-container .circle10:before{animation-delay:-.3s}.circles-container .circle11{transform:rotate(300deg)}.circles-container .circle11:before{animation-delay:-.2s}.circles-container .circle12{transform:rotate(330deg)}.circles-container .circle12:before{animation-delay:-.1s}@keyframes bounce-delay{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}@keyframes circle-fade-delay{0%,39%,to{opacity:0}40%{opacity:1}}\n"], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "async": i1$1.AsyncPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: CircleLoaderComponent, decorators: [{
+CircleLoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CircleLoaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+CircleLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: CircleLoaderComponent, selector: "sfc-circle-loader", inputs: { type: "type" }, usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"show$ | async\" class=\"preloader\" [ngClass]=\"preLoaderClasses\">\r\n    <div class=\"circles-container\" [ngClass]=\"type\">\r\n        <div class=\"circle1\"></div>\r\n        <div class=\"circle2\"></div>\r\n        <div class=\"circle3\"></div>\r\n        <div class=\"circle4\"></div>\r\n        <div class=\"circle5\"></div>\r\n        <div class=\"circle6\"></div>\r\n        <div class=\"circle7\"></div>\r\n        <div class=\"circle8\"></div>\r\n        <div class=\"circle9\"></div>\r\n        <div class=\"circle10\"></div>\r\n        <div class=\"circle11\"></div>\r\n        <div class=\"circle12\"></div>\r\n    </div>\r\n</div>", styles: [".preloader{position:relative;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center}.preloader.background{opacity:.7}.preloader.background,:host-context(.sfc-default-theme) .preloader.background{background-color:#fff}:host-context(.sfc-dark-theme) .preloader.background{background-color:#656d78}.preloader.global{z-index:9999;position:fixed}.preloader.local{z-index:9998;position:absolute}\n", ".circles-container{position:relative;width:2.5em;height:2.5em}.circles-container div{width:100%;height:100%;position:absolute;left:0;top:0}.circles-container div:before{content:\"\";display:block;margin:0 auto;width:15%;height:15%;border-radius:100%;animation:bounce-delay 1.2s infinite ease-in-out both}.circles-container div:before,:host-context(.sfc-default-theme) .circles-container div:before{background-color:#545e61}:host-context(.sfc-dark-theme) .circles-container div:before{background-color:#fff}.circles-container.fading div:before{animation-name:circle-fade-delay}.circles-container .circle2{transform:rotate(30deg)}.circles-container .circle2:before{animation-delay:-1.1s}.circles-container .circle3{transform:rotate(60deg)}.circles-container .circle3:before{animation-delay:-1s}.circles-container .circle4{transform:rotate(90deg)}.circles-container .circle4:before{animation-delay:-.9s}.circles-container .circle5{transform:rotate(120deg)}.circles-container .circle5:before{animation-delay:-.8s}.circles-container .circle6{transform:rotate(150deg)}.circles-container .circle6:before{animation-delay:-.7s}.circles-container .circle7{transform:rotate(180deg)}.circles-container .circle7:before{animation-delay:-.6s}.circles-container .circle8{transform:rotate(210deg)}.circles-container .circle8:before{animation-delay:-.5s}.circles-container .circle9{transform:rotate(240deg)}.circles-container .circle9:before{animation-delay:-.4s}.circles-container .circle10{transform:rotate(270deg)}.circles-container .circle10:before{animation-delay:-.3s}.circles-container .circle11{transform:rotate(300deg)}.circles-container .circle11:before{animation-delay:-.2s}.circles-container .circle12{transform:rotate(330deg)}.circles-container .circle12:before{animation-delay:-.1s}@keyframes bounce-delay{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}@keyframes circle-fade-delay{0%,39%,to{opacity:0}40%{opacity:1}}\n"], directives: [{ type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "async": i1$2.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CircleLoaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-circle-loader', template: "<div *ngIf=\"show$ | async\" class=\"preloader\" [ngClass]=\"preLoaderClasses\">\r\n    <div class=\"circles-container\" [ngClass]=\"type\">\r\n        <div class=\"circle1\"></div>\r\n        <div class=\"circle2\"></div>\r\n        <div class=\"circle3\"></div>\r\n        <div class=\"circle4\"></div>\r\n        <div class=\"circle5\"></div>\r\n        <div class=\"circle6\"></div>\r\n        <div class=\"circle7\"></div>\r\n        <div class=\"circle8\"></div>\r\n        <div class=\"circle9\"></div>\r\n        <div class=\"circle10\"></div>\r\n        <div class=\"circle11\"></div>\r\n        <div class=\"circle12\"></div>\r\n    </div>\r\n</div>", styles: [".preloader{position:relative;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center}.preloader.background{opacity:.7}:host-context(.sfc-default-theme) .preloader.background{background-color:#fff}:host-context(.sfc-dark-theme) .preloader.background{background-color:#656d78}.preloader.global{z-index:9999;position:fixed}.preloader.local{z-index:9998;position:absolute}\n", ".circles-container{position:relative;width:2.5em;height:2.5em}.circles-container div{width:100%;height:100%;position:absolute;left:0;top:0}.circles-container div:before{content:\"\";display:block;margin:0 auto;width:15%;height:15%;border-radius:100%;animation:bounce-delay 1.2s infinite ease-in-out both}:host-context(.sfc-default-theme) .circles-container div:before{background-color:#545e61}:host-context(.sfc-dark-theme) .circles-container div:before{background-color:#fff}.circles-container.fading div:before{animation-name:circle-fade-delay}.circles-container .circle2{transform:rotate(30deg)}.circles-container .circle2:before{animation-delay:-1.1s}.circles-container .circle3{transform:rotate(60deg)}.circles-container .circle3:before{animation-delay:-1s}.circles-container .circle4{transform:rotate(90deg)}.circles-container .circle4:before{animation-delay:-.9s}.circles-container .circle5{transform:rotate(120deg)}.circles-container .circle5:before{animation-delay:-.8s}.circles-container .circle6{transform:rotate(150deg)}.circles-container .circle6:before{animation-delay:-.7s}.circles-container .circle7{transform:rotate(180deg)}.circles-container .circle7:before{animation-delay:-.6s}.circles-container .circle8{transform:rotate(210deg)}.circles-container .circle8:before{animation-delay:-.5s}.circles-container .circle9{transform:rotate(240deg)}.circles-container .circle9:before{animation-delay:-.4s}.circles-container .circle10{transform:rotate(270deg)}.circles-container .circle10:before{animation-delay:-.3s}.circles-container .circle11{transform:rotate(300deg)}.circles-container .circle11:before{animation-delay:-.2s}.circles-container .circle12{transform:rotate(330deg)}.circles-container .circle12:before{animation-delay:-.1s}@keyframes bounce-delay{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}@keyframes circle-fade-delay{0%,39%,to{opacity:0}40%{opacity:1}}\n"] }]
+            args: [{ selector: 'sfc-circle-loader', template: "<div *ngIf=\"show$ | async\" class=\"preloader\" [ngClass]=\"preLoaderClasses\">\r\n    <div class=\"circles-container\" [ngClass]=\"type\">\r\n        <div class=\"circle1\"></div>\r\n        <div class=\"circle2\"></div>\r\n        <div class=\"circle3\"></div>\r\n        <div class=\"circle4\"></div>\r\n        <div class=\"circle5\"></div>\r\n        <div class=\"circle6\"></div>\r\n        <div class=\"circle7\"></div>\r\n        <div class=\"circle8\"></div>\r\n        <div class=\"circle9\"></div>\r\n        <div class=\"circle10\"></div>\r\n        <div class=\"circle11\"></div>\r\n        <div class=\"circle12\"></div>\r\n    </div>\r\n</div>", styles: [".preloader{position:relative;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center}.preloader.background{opacity:.7}.preloader.background,:host-context(.sfc-default-theme) .preloader.background{background-color:#fff}:host-context(.sfc-dark-theme) .preloader.background{background-color:#656d78}.preloader.global{z-index:9999;position:fixed}.preloader.local{z-index:9998;position:absolute}\n", ".circles-container{position:relative;width:2.5em;height:2.5em}.circles-container div{width:100%;height:100%;position:absolute;left:0;top:0}.circles-container div:before{content:\"\";display:block;margin:0 auto;width:15%;height:15%;border-radius:100%;animation:bounce-delay 1.2s infinite ease-in-out both}.circles-container div:before,:host-context(.sfc-default-theme) .circles-container div:before{background-color:#545e61}:host-context(.sfc-dark-theme) .circles-container div:before{background-color:#fff}.circles-container.fading div:before{animation-name:circle-fade-delay}.circles-container .circle2{transform:rotate(30deg)}.circles-container .circle2:before{animation-delay:-1.1s}.circles-container .circle3{transform:rotate(60deg)}.circles-container .circle3:before{animation-delay:-1s}.circles-container .circle4{transform:rotate(90deg)}.circles-container .circle4:before{animation-delay:-.9s}.circles-container .circle5{transform:rotate(120deg)}.circles-container .circle5:before{animation-delay:-.8s}.circles-container .circle6{transform:rotate(150deg)}.circles-container .circle6:before{animation-delay:-.7s}.circles-container .circle7{transform:rotate(180deg)}.circles-container .circle7:before{animation-delay:-.6s}.circles-container .circle8{transform:rotate(210deg)}.circles-container .circle8:before{animation-delay:-.5s}.circles-container .circle9{transform:rotate(240deg)}.circles-container .circle9:before{animation-delay:-.4s}.circles-container .circle10{transform:rotate(270deg)}.circles-container .circle10:before{animation-delay:-.3s}.circles-container .circle11{transform:rotate(300deg)}.circles-container .circle11:before{animation-delay:-.2s}.circles-container .circle12{transform:rotate(330deg)}.circles-container .circle12:before{animation-delay:-.1s}@keyframes bounce-delay{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}@keyframes circle-fade-delay{0%,39%,to{opacity:0}40%{opacity:1}}\n"] }]
         }], propDecorators: { type: [{
                 type: Input
             }] } });
@@ -1444,24 +1547,66 @@ class ModalService {
         this.subjectOpen.next(options);
     }
 }
-ModalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ModalService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ModalService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ModalService, decorators: [{
+ModalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ModalService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ModalService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ModalService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
         }] });
 
+class TemplateContentComponent {
+    get showDefault() {
+        return !isDefined(this.referenceContent)
+            && !isDefined(this.templateContent);
+    }
+    get templateContent() {
+        const templateRef = firstOrDefault(this.templatesContent?.toArray(), t => t.templateName == this.templateType);
+        return templateRef?.template || null;
+    }
+}
+TemplateContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TemplateContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TemplateContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: TemplateContentComponent, selector: "sfc-template-content", inputs: { contextData: "contextData", referenceContent: "referenceContent", templateType: "templateType", templatesContent: "templatesContent", defaultContent: "defaultContent" }, ngImport: i0, template: "<ng-container *ngIf=\"referenceContent;else template\">\r\n    <ng-container *ngTemplateOutlet=\"referenceContent;context:{$implicit: contextData}\"></ng-container>\r\n</ng-container>\r\n\r\n<ng-template #template>\r\n    <ng-container *ngTemplateOutlet=\"templateContent;context:{$implicit: contextData}\">\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<ng-container *ngIf=\"defaultContent && showDefault\">\r\n    <ng-container *ngTemplateOutlet=\"defaultContent;context:{$implicit: contextData}\"></ng-container>\r\n</ng-container>", styles: [":host{display:contents}\n"], directives: [{ type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TemplateContentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-template-content', styles: [':host{ display: contents;}'], template: "<ng-container *ngIf=\"referenceContent;else template\">\r\n    <ng-container *ngTemplateOutlet=\"referenceContent;context:{$implicit: contextData}\"></ng-container>\r\n</ng-container>\r\n\r\n<ng-template #template>\r\n    <ng-container *ngTemplateOutlet=\"templateContent;context:{$implicit: contextData}\">\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<ng-container *ngIf=\"defaultContent && showDefault\">\r\n    <ng-container *ngTemplateOutlet=\"defaultContent;context:{$implicit: contextData}\"></ng-container>\r\n</ng-container>" }]
+        }], propDecorators: { contextData: [{
+                type: Input
+            }], referenceContent: [{
+                type: Input
+            }], templateType: [{
+                type: Input
+            }], templatesContent: [{
+                type: Input
+            }], defaultContent: [{
+                type: Input
+            }] } });
+
+class CloseComponent {
+    constructor() {
+        this.faTimes = faTimes;
+    }
+}
+CloseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CloseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CloseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", 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:#2bbbad}\n"], components: [{ type: i1$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", 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:#2bbbad}\n"] }]
+        }] });
+
 class DefaultModalHeaderComponent {
     constructor(modalService) {
         this.modalService = modalService;
         this.DEFAULT_MODAL_HEADER_MODEL = {
-            icon: 'fa fa-window-restore',
+            icon: faWindowRestore,
             showCloseIcon: true,
             text: 'Modal'
         };
     }
+    get icon() {
+        return this.model?.icon || faWindowRestore;
+    }
     ngOnInit() {
         if (!isDefined(this.model))
             this.model = this.DEFAULT_MODAL_HEADER_MODEL;
@@ -1470,11 +1615,11 @@ class DefaultModalHeaderComponent {
         this.modalService.close();
     }
 }
-DefaultModalHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: DefaultModalHeaderComponent, deps: [{ token: ModalService }], target: i0.ɵɵFactoryTarget.Component });
-DefaultModalHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.6", type: DefaultModalHeaderComponent, selector: "sfc-default-modal-header", inputs: { model: "model" }, ngImport: i0, template: "<div class=\"container\">\r\n    <i *ngIf=\"model?.icon\" class=\"icon\" class=\"{{model?.icon}}\"></i>\r\n    <span *ngIf=\"model?.text\" class=\"label\">{{model?.text}}</span>\r\n    <span *ngIf=\"model?.showCloseIcon\" class=\"close\" (click)=\"onClose()\">\r\n        <i class=\"fa fa-times\"></i>\r\n    </span>\r\n</div>", styles: [":host{display:inline-flex;width:100%}:host .container{display:flex;align-items:flex-start;width:100%;justify-content:space-between}:host .container i{font-size:1em}:host .container .icon{padding-right:.7em}:host .container .label{font-size:1.2em;font-weight:700;-webkit-user-select:none;user-select:none;padding:0 .7em}:host .container .close{color:#545e61;cursor:pointer;display:flex;padding-left:.7em}:host .container .close:hover{color:#2bbbad}\n"], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: DefaultModalHeaderComponent, decorators: [{
+DefaultModalHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DefaultModalHeaderComponent, deps: [{ token: ModalService }], target: i0.ɵɵFactoryTarget.Component });
+DefaultModalHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: DefaultModalHeaderComponent, selector: "sfc-default-modal-header", inputs: { model: "model" }, ngImport: i0, template: "<div class=\"container\">\r\n    <fa-icon *ngIf=\"model?.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>", styles: [":host{display:inline-flex;width:100%}:host .container{display:flex;align-items:flex-start;width:100%;justify-content:space-between}:host .container .icon{font-size:1em;padding-right:.7em}:host .container .label{font-size:1.2em;font-weight:700;-webkit-user-select:none;user-select:none;padding:0 .7em}:host .container sfc-close{padding-left:.7em}\n"], components: [{ type: i1$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: CloseComponent, selector: "sfc-close" }], directives: [{ type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DefaultModalHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-default-modal-header', template: "<div class=\"container\">\r\n    <i *ngIf=\"model?.icon\" class=\"icon\" class=\"{{model?.icon}}\"></i>\r\n    <span *ngIf=\"model?.text\" class=\"label\">{{model?.text}}</span>\r\n    <span *ngIf=\"model?.showCloseIcon\" class=\"close\" (click)=\"onClose()\">\r\n        <i class=\"fa fa-times\"></i>\r\n    </span>\r\n</div>", styles: [":host{display:inline-flex;width:100%}:host .container{display:flex;align-items:flex-start;width:100%;justify-content:space-between}:host .container i{font-size:1em}:host .container .icon{padding-right:.7em}:host .container .label{font-size:1.2em;font-weight:700;-webkit-user-select:none;user-select:none;padding:0 .7em}:host .container .close{color:#545e61;cursor:pointer;display:flex;padding-left:.7em}:host .container .close:hover{color:#2bbbad}\n"] }]
+            args: [{ selector: 'sfc-default-modal-header', template: "<div class=\"container\">\r\n    <fa-icon *ngIf=\"model?.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>", styles: [":host{display:inline-flex;width:100%}:host .container{display:flex;align-items:flex-start;width:100%;justify-content:space-between}:host .container .icon{font-size:1em;padding-right:.7em}:host .container .label{font-size:1.2em;font-weight:700;-webkit-user-select:none;user-select:none;padding:0 .7em}:host .container sfc-close{padding-left:.7em}\n"] }]
         }], ctorParameters: function () { return [{ type: ModalService }]; }, propDecorators: { model: [{
                 type: Input
             }] } });
@@ -1509,9 +1654,9 @@ class DefaultModalFooterComponent {
         this.modalService.close();
     }
 }
-DefaultModalFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: DefaultModalFooterComponent, deps: [{ token: ModalService }], target: i0.ɵɵFactoryTarget.Component });
-DefaultModalFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.6", type: DefaultModalFooterComponent, selector: "sfc-default-modal-footer", inputs: { model: "model" }, ngImport: i0, template: "<div class=\"container\">\r\n    <sfc-button *ngIf=\"model?.applyButton\" [sfcComponentSize] [customSize]=\"BUTTON_CUSTOM_SIZE\" text=\"Ok\"\r\n        [types]=\"[ButtonType.Rounded]\" (click)=\"onButtonClick()\">\r\n    </sfc-button>\r\n    <sfc-button *ngIf=\"model?.cancelButton\" [sfcComponentSize] [customSize]=\"BUTTON_CUSTOM_SIZE\" text=\"Cancel\"\r\n        [types]=\"[ButtonType.Rounded]\" (click)=\"onButtonClick(true)\">\r\n    </sfc-button>\r\n</div>", styles: [":host{display:inline-flex;width:100%}:host .container{display:flex;justify-content:center;align-items:center;width:100%}:host .container sfc-button:first-child{padding-right:.3em}:host .container sfc-button:nth-child(2){padding-left:.3em}:host .container ::ng-deep sfc-button .button.rounded{width:5em}:host .container ::ng-deep sfc-button .button:not(:hover){color:#545e61!important;border-color:#545e61!important}\n"], components: [{ type: ButtonComponent, selector: "sfc-button", inputs: ["text", "iconBefore", "iconAfter", "disabled", "types"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ComponentSizeDirective, selector: "[sfcComponentSize]", inputs: ["sfcComponentSize", "customSize"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: DefaultModalFooterComponent, decorators: [{
+DefaultModalFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DefaultModalFooterComponent, deps: [{ token: ModalService }], target: i0.ɵɵFactoryTarget.Component });
+DefaultModalFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: DefaultModalFooterComponent, selector: "sfc-default-modal-footer", inputs: { model: "model" }, ngImport: i0, template: "<div class=\"container\">\r\n    <sfc-button *ngIf=\"model?.applyButton\" [sfcComponentSize] [customSize]=\"BUTTON_CUSTOM_SIZE\" text=\"Ok\"\r\n        [types]=\"[ButtonType.Rounded]\" (click)=\"onButtonClick()\">\r\n    </sfc-button>\r\n    <sfc-button *ngIf=\"model?.cancelButton\" [sfcComponentSize] [customSize]=\"BUTTON_CUSTOM_SIZE\" text=\"Cancel\"\r\n        [types]=\"[ButtonType.Rounded]\" (click)=\"onButtonClick(true)\">\r\n    </sfc-button>\r\n</div>", styles: [":host{display:inline-flex;width:100%}:host .container{display:flex;justify-content:center;align-items:center;width:100%}:host .container sfc-button:first-child{padding-right:.3em}:host .container sfc-button:nth-child(2){padding-left:.3em}:host .container ::ng-deep sfc-button .button.rounded{width:5em}:host .container ::ng-deep sfc-button .button:not(:hover){color:#545e61!important;border-color:#545e61!important}\n"], components: [{ type: ButtonComponent, selector: "sfc-button", inputs: ["text", "iconBefore", "iconAfter", "disabled", "types"] }], directives: [{ type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ComponentSizeDirective, selector: "[sfcComponentSize]", inputs: ["sfcComponentSize", "customSize"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DefaultModalFooterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sfc-default-modal-footer', template: "<div class=\"container\">\r\n    <sfc-button *ngIf=\"model?.applyButton\" [sfcComponentSize] [customSize]=\"BUTTON_CUSTOM_SIZE\" text=\"Ok\"\r\n        [types]=\"[ButtonType.Rounded]\" (click)=\"onButtonClick()\">\r\n    </sfc-button>\r\n    <sfc-button *ngIf=\"model?.cancelButton\" [sfcComponentSize] [customSize]=\"BUTTON_CUSTOM_SIZE\" text=\"Cancel\"\r\n        [types]=\"[ButtonType.Rounded]\" (click)=\"onButtonClick(true)\">\r\n    </sfc-button>\r\n</div>", styles: [":host{display:inline-flex;width:100%}:host .container{display:flex;justify-content:center;align-items:center;width:100%}:host .container sfc-button:first-child{padding-right:.3em}:host .container sfc-button:nth-child(2){padding-left:.3em}:host .container ::ng-deep sfc-button .button.rounded{width:5em}:host .container ::ng-deep sfc-button .button:not(:hover){color:#545e61!important;border-color:#545e61!important}\n"] }]
         }], ctorParameters: function () { return [{ type: ModalService }]; }, propDecorators: { model: [{
@@ -1530,24 +1675,12 @@ class ModalComponent {
         if (this.hideOnEsc)
             this.close();
     }
-    getTemplate(template) {
-        if (!isDefined(this.templates))
-            return null;
-        const templateRef = firstOrDefault(this.templates?.toArray(), t => t.templateName == template);
-        return isDefined(templateRef) ? templateRef?.template : null;
-    }
-    isShowDefault(template) {
-        return !isDefined(this.getTemplate(template))
-            && (template == ModalTemplate.Header
-                ? !isDefined(this.header)
-                : !isDefined(this.footer));
-    }
     close() {
         this.modalService.close();
     }
 }
-ModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ModalComponent, deps: [{ token: ModalService }], target: i0.ɵɵFactoryTarget.Component });
-ModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.6", type: ModalComponent, selector: "sfc-modal", inputs: { body: "body", header: "header", footer: "footer", defaultHeaderModel: "defaultHeaderModel", defaultFooterModel: "defaultFooterModel", hideOnEsc: "hideOnEsc", hideOnClickOutside: "hideOnClickOutside" }, 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 class=\"header\">\r\n\r\n            <ng-container *ngIf=\"header;else headerTemplate\">\r\n                <ng-container *ngTemplateOutlet=\"header;\"></ng-container>\r\n            </ng-container>\r\n\r\n            <ng-template #headerTemplate>\r\n                <ng-container *ngTemplateOutlet=\"getTemplate(ModalTemplate.Header)\">\r\n                </ng-container>\r\n            </ng-template>\r\n\r\n            <ng-container *ngIf=\"isShowDefault(ModalTemplate.Header)\">\r\n                <sfc-default-modal-header [model]=\"defaultHeaderModel\">\r\n                </sfc-default-modal-header>\r\n            </ng-container>\r\n\r\n        </div>\r\n\r\n        <div class=\"body\">\r\n\r\n            <ng-container *ngIf=\"body;else bodyTemplate\">\r\n                <ng-container *ngTemplateOutlet=\"body;\"></ng-container>\r\n            </ng-container>\r\n\r\n            <ng-template #bodyTemplate>\r\n                <ng-container #bodyTemplate *ngTemplateOutlet=\"getTemplate(ModalTemplate.Body)\">\r\n                </ng-container>\r\n            </ng-template>\r\n\r\n        </div>\r\n\r\n        <div class=\"footer\">\r\n\r\n            <ng-container *ngIf=\"footer;else footerTemplate\">\r\n                <ng-container *ngTemplateOutlet=\"footer;\"></ng-container>\r\n            </ng-container>\r\n\r\n            <ng-template #footerTemplate>\r\n                <ng-container *ngTemplateOutlet=\"getTemplate(ModalTemplate.Footer)\">\r\n                </ng-container>\r\n            </ng-template>\r\n\r\n            <ng-container *ngIf=\"isShowDefault(ModalTemplate.Footer)\">\r\n                <sfc-default-modal-footer [model]=\"defaultFooterModel\">\r\n                </sfc-default-modal-footer>\r\n            </ng-container>\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:.7em;margin:auto;background-color:#f5f7fa;max-width:calc(100% - 3em);max-height:calc(100% - 3em);border-radius:3px;overflow-y:auto;box-shadow:0 .125em .625em #0003;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%;flex:0 0 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#545e61;flex-direction:row;display:flex;justify-content:center}\n"], components: [{ type: DefaultModalHeaderComponent, selector: "sfc-default-modal-header", inputs: ["model"] }, { type: DefaultModalFooterComponent, selector: "sfc-default-modal-footer", inputs: ["model"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], animations: [
+ModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ModalComponent, deps: [{ token: ModalService }], target: i0.ɵɵFactoryTarget.Component });
+ModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: ModalComponent, selector: "sfc-modal", inputs: { body: "body", header: "header", footer: "footer", defaultHeaderModel: "defaultHeaderModel", defaultFooterModel: "defaultFooterModel", hideOnEsc: "hideOnEsc", hideOnClickOutside: "hideOnClickOutside" }, 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 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 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:.7em;margin:auto;background-color:#f5f7fa;max-width:calc(100% - 3em);max-height:calc(100% - 3em);border-radius:3px;overflow-y:auto;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%;flex:0 0 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#545e61;flex-direction:row;display:flex;justify-content:center}\n"], components: [{ type: TemplateContentComponent, selector: "sfc-template-content", inputs: ["contextData", "referenceContent", "templateType", "templatesContent", "defaultContent"] }, { type: DefaultModalHeaderComponent, selector: "sfc-default-modal-header", inputs: ["model"] }, { 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' })),
@@ -1569,7 +1702,7 @@ ModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
             transition('* => void', animate('400ms cubic-bezier(.55, 0, .1, 1)'))
         ])
     ] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sfc-modal', animations: [
                         trigger('hideOverlay', [
@@ -1592,7 +1725,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", 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 class=\"header\">\r\n\r\n            <ng-container *ngIf=\"header;else headerTemplate\">\r\n                <ng-container *ngTemplateOutlet=\"header;\"></ng-container>\r\n            </ng-container>\r\n\r\n            <ng-template #headerTemplate>\r\n                <ng-container *ngTemplateOutlet=\"getTemplate(ModalTemplate.Header)\">\r\n                </ng-container>\r\n            </ng-template>\r\n\r\n            <ng-container *ngIf=\"isShowDefault(ModalTemplate.Header)\">\r\n                <sfc-default-modal-header [model]=\"defaultHeaderModel\">\r\n                </sfc-default-modal-header>\r\n            </ng-container>\r\n\r\n        </div>\r\n\r\n        <div class=\"body\">\r\n\r\n            <ng-container *ngIf=\"body;else bodyTemplate\">\r\n                <ng-container *ngTemplateOutlet=\"body;\"></ng-container>\r\n            </ng-container>\r\n\r\n            <ng-template #bodyTemplate>\r\n                <ng-container #bodyTemplate *ngTemplateOutlet=\"getTemplate(ModalTemplate.Body)\">\r\n                </ng-container>\r\n            </ng-template>\r\n\r\n        </div>\r\n\r\n        <div class=\"footer\">\r\n\r\n            <ng-container *ngIf=\"footer;else footerTemplate\">\r\n                <ng-container *ngTemplateOutlet=\"footer;\"></ng-container>\r\n            </ng-container>\r\n\r\n            <ng-template #footerTemplate>\r\n                <ng-container *ngTemplateOutlet=\"getTemplate(ModalTemplate.Footer)\">\r\n                </ng-container>\r\n            </ng-template>\r\n\r\n            <ng-container *ngIf=\"isShowDefault(ModalTemplate.Footer)\">\r\n                <sfc-default-modal-footer [model]=\"defaultFooterModel\">\r\n                </sfc-default-modal-footer>\r\n            </ng-container>\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:.7em;margin:auto;background-color:#f5f7fa;max-width:calc(100% - 3em);max-height:calc(100% - 3em);border-radius:3px;overflow-y:auto;box-shadow:0 .125em .625em #0003;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%;flex:0 0 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#545e61;flex-direction:row;display:flex;justify-content:center}\n"] }]
+                    ], template: "<div class=\"overlay\" [@hideOverlay] (click)=\"hideOnClickOutside && close()\">\r\n    <div class=\"content\" [@hideContent] (click)=\"$event.stopPropagation()\">\r\n\r\n        <div 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 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:.7em;margin:auto;background-color:#f5f7fa;max-width:calc(100% - 3em);max-height:calc(100% - 3em);border-radius:3px;overflow-y:auto;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%;flex:0 0 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#545e61;flex-direction:row;display:flex;justify-content:center}\n"] }]
         }], ctorParameters: function () { return [{ type: ModalService }]; }, propDecorators: { body: [{
                 type: Input
             }], header: [{
@@ -1649,9 +1782,9 @@ class ModalOpenOnClickDirective {
         this.elements.forEach(el => el.removeEventListener('click', this.clickHandler));
     }
 }
-ModalOpenOnClickDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ModalOpenOnClickDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: ModalService }], target: i0.ɵɵFactoryTarget.Directive });
-ModalOpenOnClickDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: ModalOpenOnClickDirective, selector: "[sfcModalOpenOnClick]", inputs: { modalOpenOnClick: ["sfcModalOpenOnClick", "modalOpenOnClick"] }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ModalOpenOnClickDirective, decorators: [{
+ModalOpenOnClickDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ModalOpenOnClickDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: ModalService }], target: i0.ɵɵFactoryTarget.Directive });
+ModalOpenOnClickDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: ModalOpenOnClickDirective, selector: "[sfcModalOpenOnClick]", inputs: { modalOpenOnClick: ["sfcModalOpenOnClick", "modalOpenOnClick"] }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ModalOpenOnClickDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[sfcModalOpenOnClick]'
@@ -1667,11 +1800,11 @@ class HamburgerComponent {
         this.onClick = () => this.open = !this.open;
     }
 }
-HamburgerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: HamburgerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-HamburgerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.6", type: HamburgerComponent, selector: "sfc-hamburger", inputs: { open: "open" }, host: { listeners: { "click": "onClick()" }, properties: { "class.open": "this.open" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"line half start\"></div>\r\n    <div class=\"line\"></div>\r\n    <div class=\"line half end\"></div>\r\n</div>", styles: [".container{width:1em;height:1em;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;transition:transform .33s ease-out}:host(.open) .container{transform:rotate(-45deg)}.container .line{border-radius:.31em;width:100%;height:.25em}:host-context(.sfc-default-theme) .container .line{background-color:#545e61}:host-context(.sfc-dark-theme) .container .line{background-color:#ccd1d9}.container .line.half{width:50%}.container .line.start{transition:transform .33s cubic-bezier(.54,-.81,.57,.57);transform-origin:right}:host(.open) .container .line.start{transform:rotate(-90deg) translate(.1875em)}.container .line.end{align-self:flex-end;transition:transform .33s cubic-bezier(.54,-.81,.57,.57);transform-origin:left}:host(.open) .container .line.end{transform:rotate(-90deg) translate(-.1875em)}.container:hover .line{background-color:#2bbbad!important}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: HamburgerComponent, decorators: [{
+HamburgerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: HamburgerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+HamburgerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: HamburgerComponent, selector: "sfc-hamburger", inputs: { open: "open" }, host: { listeners: { "click": "onClick()" }, properties: { "class.open": "this.open" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"line half start\"></div>\r\n    <div class=\"line\"></div>\r\n    <div class=\"line half end\"></div>\r\n</div>", styles: [".container{width:1em;height:1em;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;transition:transform .33s ease-out}:host(.open) .container{transform:rotate(-45deg)}.container .line{border-radius:.31em;width:100%;height:.25em}.container .line,:host-context(.sfc-default-theme) .container .line{background-color:#545e61}:host-context(.sfc-dark-theme) .container .line{background-color:#ccd1d9}.container .line.half{width:50%}.container .line.start{transition:transform .33s cubic-bezier(.54,-.81,.57,.57);transform-origin:right}:host(.open) .container .line.start{transform:rotate(-90deg) translate(.1875em)}.container .line.end{align-self:flex-end;transition:transform .33s cubic-bezier(.54,-.81,.57,.57);transform-origin:left}:host(.open) .container .line.end{transform:rotate(-90deg) translate(-.1875em)}.container:hover .line{background-color:#2bbbad!important}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: HamburgerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-hamburger', template: "<div class=\"container\">\r\n    <div class=\"line half start\"></div>\r\n    <div class=\"line\"></div>\r\n    <div class=\"line half end\"></div>\r\n</div>", styles: [".container{width:1em;height:1em;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;transition:transform .33s ease-out}:host(.open) .container{transform:rotate(-45deg)}.container .line{border-radius:.31em;width:100%;height:.25em}:host-context(.sfc-default-theme) .container .line{background-color:#545e61}:host-context(.sfc-dark-theme) .container .line{background-color:#ccd1d9}.container .line.half{width:50%}.container .line.start{transition:transform .33s cubic-bezier(.54,-.81,.57,.57);transform-origin:right}:host(.open) .container .line.start{transform:rotate(-90deg) translate(.1875em)}.container .line.end{align-self:flex-end;transition:transform .33s cubic-bezier(.54,-.81,.57,.57);transform-origin:left}:host(.open) .container .line.end{transform:rotate(-90deg) translate(-.1875em)}.container:hover .line{background-color:#2bbbad!important}\n"] }]
+            args: [{ selector: 'sfc-hamburger', template: "<div class=\"container\">\r\n    <div class=\"line half start\"></div>\r\n    <div class=\"line\"></div>\r\n    <div class=\"line half end\"></div>\r\n</div>", styles: [".container{width:1em;height:1em;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;transition:transform .33s ease-out}:host(.open) .container{transform:rotate(-45deg)}.container .line{border-radius:.31em;width:100%;height:.25em}.container .line,:host-context(.sfc-default-theme) .container .line{background-color:#545e61}:host-context(.sfc-dark-theme) .container .line{background-color:#ccd1d9}.container .line.half{width:50%}.container .line.start{transition:transform .33s cubic-bezier(.54,-.81,.57,.57);transform-origin:right}:host(.open) .container .line.start{transform:rotate(-90deg) translate(.1875em)}.container .line.end{align-self:flex-end;transition:transform .33s cubic-bezier(.54,-.81,.57,.57);transform-origin:left}:host(.open) .container .line.end{transform:rotate(-90deg) translate(-.1875em)}.container:hover .line{background-color:#2bbbad!important}\n"] }]
         }], propDecorators: { open: [{
                 type: Input
             }, {
@@ -1689,11 +1822,11 @@ class DotsComponent {
         this.onClick = () => this.open = !this.open;
     }
 }
-DotsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: DotsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DotsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.6", type: DotsComponent, selector: "sfc-dots", inputs: { open: "open", direction: "direction" }, host: { listeners: { "click": "onClick()" }, properties: { "class.open": "this.open", "class": "this.direction" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"dots-container\">\r\n        <div class=\"dot\"></div>\r\n        <div class=\"dot\"></div>\r\n        <div class=\"dot\"></div>\r\n    </div>\r\n</div>", styles: [":host{display:inline-flex;transform:rotate(90deg);transition:all .3s cubic-bezier(.175,.885,.32,1.275);cursor:pointer}:host.open{transform:rotate(0)}:host.vertical{transform:rotate(0)}:host.vertical.open{transform:rotate(90deg)}:host .container{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;flex:1;margin:.25em}:host .container .dots-container{display:flex;flex-flow:column,wrap;justify-content:center;align-items:center;position:relative}:host .container .dots-container .dot{width:.3125em;height:.3125em;transition:background .3s ease;margin:.06em;border-radius:50%;display:block}:host-context(.sfc-default-theme) :host .container .dots-container .dot{background:#545e61}:host-context(.sfc-dark-theme) :host .container .dots-container .dot{background:#ccd1d9}:host .container:hover,:host .container.open,:host .container:focus{outline:none}:host-context(.sfc-default-theme) :host .container:hover .dots-container .dot,:host-context(.sfc-default-theme) :host .container.open .dots-container .dot,:host-context(.sfc-default-theme) :host .container:focus .dots-container .dot{background:#2bbbad}:host-context(.sfc-dark-theme) :host .container:hover .dots-container .dot,:host-context(.sfc-dark-theme) :host .container.open .dots-container .dot,:host-context(.sfc-dark-theme) :host .container:focus .dots-container .dot{background:#2bbbad}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: DotsComponent, decorators: [{
+DotsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DotsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DotsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: DotsComponent, selector: "sfc-dots", inputs: { open: "open", direction: "direction" }, host: { listeners: { "click": "onClick()" }, properties: { "class.open": "this.open", "class": "this.direction" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"dots-container\">\r\n        <div class=\"dot\"></div>\r\n        <div class=\"dot\"></div>\r\n        <div class=\"dot\"></div>\r\n    </div>\r\n</div>", styles: [":host{display:inline-flex;transform:rotate(0);transition:all .3s cubic-bezier(.175,.885,.32,1.275);cursor:pointer}:host.open{transform:rotate(90deg)}:host.vertical{transform:rotate(90deg)}:host.vertical.open{transform:rotate(0)}:host .container{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;flex:1;margin:.25em}:host .container .dots-container{display:flex;flex-flow:row wrap;justify-content:center;align-items:center;position:relative}:host .container .dots-container .dot{width:.3125em;height:.3125em;transition:background .3s ease;margin:.06em;border-radius:50%;display:block}:host .container .dots-container .dot,:host-context(.sfc-default-theme) :host .container .dots-container .dot{background:#545e61}:host-context(.sfc-dark-theme) :host .container .dots-container .dot{background:#ccd1d9}:host:hover .container,:host:focus .container{outline:none}:host:hover .container .dots-container .dot,:host-context(.sfc-default-theme) :host:hover .container .dots-container .dot,:host:focus .container .dots-container .dot,:host-context(.sfc-default-theme) :host:focus .container .dots-container .dot{background:#2bbbad}:host-context(.sfc-dark-theme) :host:hover .container .dots-container .dot,:host-context(.sfc-dark-theme) :host:focus .container .dots-container .dot{background:#2bbbad}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DotsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-dots', template: "<div class=\"container\">\r\n    <div class=\"dots-container\">\r\n        <div class=\"dot\"></div>\r\n        <div class=\"dot\"></div>\r\n        <div class=\"dot\"></div>\r\n    </div>\r\n</div>", styles: [":host{display:inline-flex;transform:rotate(90deg);transition:all .3s cubic-bezier(.175,.885,.32,1.275);cursor:pointer}:host.open{transform:rotate(0)}:host.vertical{transform:rotate(0)}:host.vertical.open{transform:rotate(90deg)}:host .container{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;flex:1;margin:.25em}:host .container .dots-container{display:flex;flex-flow:column,wrap;justify-content:center;align-items:center;position:relative}:host .container .dots-container .dot{width:.3125em;height:.3125em;transition:background .3s ease;margin:.06em;border-radius:50%;display:block}:host-context(.sfc-default-theme) :host .container .dots-container .dot{background:#545e61}:host-context(.sfc-dark-theme) :host .container .dots-container .dot{background:#ccd1d9}:host .container:hover,:host .container.open,:host .container:focus{outline:none}:host-context(.sfc-default-theme) :host .container:hover .dots-container .dot,:host-context(.sfc-default-theme) :host .container.open .dots-container .dot,:host-context(.sfc-default-theme) :host .container:focus .dots-container .dot{background:#2bbbad}:host-context(.sfc-dark-theme) :host .container:hover .dots-container .dot,:host-context(.sfc-dark-theme) :host .container.open .dots-container .dot,:host-context(.sfc-dark-theme) :host .container:focus .dots-container .dot{background:#2bbbad}\n"] }]
+            args: [{ selector: 'sfc-dots', template: "<div class=\"container\">\r\n    <div class=\"dots-container\">\r\n        <div class=\"dot\"></div>\r\n        <div class=\"dot\"></div>\r\n        <div class=\"dot\"></div>\r\n    </div>\r\n</div>", styles: [":host{display:inline-flex;transform:rotate(0);transition:all .3s cubic-bezier(.175,.885,.32,1.275);cursor:pointer}:host.open{transform:rotate(90deg)}:host.vertical{transform:rotate(90deg)}:host.vertical.open{transform:rotate(0)}:host .container{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;flex:1;margin:.25em}:host .container .dots-container{display:flex;flex-flow:row wrap;justify-content:center;align-items:center;position:relative}:host .container .dots-container .dot{width:.3125em;height:.3125em;transition:background .3s ease;margin:.06em;border-radius:50%;display:block}:host .container .dots-container .dot,:host-context(.sfc-default-theme) :host .container .dots-container .dot{background:#545e61}:host-context(.sfc-dark-theme) :host .container .dots-container .dot{background:#ccd1d9}:host:hover .container,:host:focus .container{outline:none}:host:hover .container .dots-container .dot,:host-context(.sfc-default-theme) :host:hover .container .dots-container .dot,:host:focus .container .dots-container .dot,:host-context(.sfc-default-theme) :host:focus .container .dots-container .dot{background:#2bbbad}:host-context(.sfc-dark-theme) :host:hover .container .dots-container .dot,:host-context(.sfc-dark-theme) :host:focus .container .dots-container .dot{background:#2bbbad}\n"] }]
         }], propDecorators: { open: [{
                 type: Input
             }, {
@@ -1717,11 +1850,11 @@ class ToggleSwitcherComponent {
         this.rightModel = { label: 'Right' };
     }
 }
-ToggleSwitcherComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ToggleSwitcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ToggleSwitcherComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.6", type: ToggleSwitcherComponent, selector: "sfc-toggle-switcher", inputs: { active: "active", leftModel: "leftModel", rightModel: "rightModel" }, host: { listeners: { "click": "onClick()" }, properties: { "class.active": "this.active" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"toggle\"></div>\r\n    <div class=\"names\">\r\n        <p class=\"left\">\r\n            <i *ngIf=\"leftModel.icon\" class=\"{{leftModel.icon}}\"></i>\r\n            <span>{{leftModel.label}}</span>\r\n        </p>\r\n        <p class=\"right\">\r\n            <i *ngIf=\"rightModel.icon\" class=\"{{rightModel.icon}}\"></i>\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 1em #0003;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 .container .names p i{margin-right:.25em}: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}\n"], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ToggleSwitcherComponent, decorators: [{
+ToggleSwitcherComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ToggleSwitcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ToggleSwitcherComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: ToggleSwitcherComponent, selector: "sfc-toggle-switcher", inputs: { active: "active", leftModel: "leftModel", rightModel: "rightModel" }, host: { listeners: { "click": "onClick()" }, properties: { "class.active": "this.active" } }, 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 .container .names p fa-icon{margin-right:.25em}: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}\n"], components: [{ type: i1$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", 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            <i *ngIf=\"leftModel.icon\" class=\"{{leftModel.icon}}\"></i>\r\n            <span>{{leftModel.label}}</span>\r\n        </p>\r\n        <p class=\"right\">\r\n            <i *ngIf=\"rightModel.icon\" class=\"{{rightModel.icon}}\"></i>\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 1em #0003;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 .container .names p i{margin-right:.25em}: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}\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\">\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 .container .names p fa-icon{margin-right:.25em}: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}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { active: [{
                 type: Input
             }, {
@@ -1739,15 +1872,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImpor
 class CheckmarkComponent {
     constructor() {
         this.active = false;
-        this.icon = 'fa fa-check';
+        this.icon = faCheck;
         this.onClick = () => this.active = !this.active;
     }
 }
-CheckmarkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: CheckmarkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CheckmarkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.6", type: CheckmarkComponent, selector: "sfc-checkmark", inputs: { active: "active", icon: "icon" }, host: { listeners: { "click": "onClick()" }, properties: { "class.active": "this.active" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <span class=\"check\">\r\n        <i class=\"{{icon}}\"></i>\r\n    </span>\r\n</div>", styles: [":host{display:inline-block}:host .check{border-radius:50%;border:.18em solid;background:#fff;border-color:#ccd1d9;width:1em;height:1em;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .3s ease}:host .check i{font-size:.8em;transition:opacity .3s ease;color:transparent;-webkit-text-stroke:1px #0003}:host-context(.sfc-default-theme) :host .check i{opacity:.5}:host-context(.sfc-dark-theme) :host .check i{opacity:.8}:host .check:hover{border-color:#2bbbad}:host .check:hover i{-webkit-text-stroke:initial;color:#2bbbad}:host-context(.sfc-default-theme) :host .check:hover i{opacity:.8}:host-context(.sfc-dark-theme) :host .check:hover i{opacity:1}:host.active .check{border-color:#2bbbad;background:#2bbbad}:host.active .check i{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)}}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: CheckmarkComponent, decorators: [{
+CheckmarkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CheckmarkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CheckmarkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: CheckmarkComponent, selector: "sfc-checkmark", inputs: { active: "active", icon: "icon" }, host: { listeners: { "click": "onClick()" }, properties: { "class.active": "this.active" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <span class=\"check\">\r\n        <fa-icon [icon]=\"icon\"></fa-icon>\r\n    </span>\r\n</div>", styles: [":host{display:inline-block}:host,:host-context(.sfc-default-theme) :host{color:#545e61}:host-context(.sfc-dark-theme) :host{color:#ccd1d9}:host .check{border-radius:50%;border:.18em solid;background:#fff;border-color:#ccd1d9;width:1em;height:1em;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .3s ease}:host .check fa-icon{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:#2bbbad}:host .check:hover fa-icon{color:#2bbbad}: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:#2bbbad;background:#2bbbad}: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)}}\n"], components: [{ type: i1$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CheckmarkComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-checkmark', template: "<div class=\"container\">\r\n    <span class=\"check\">\r\n        <i class=\"{{icon}}\"></i>\r\n    </span>\r\n</div>", styles: [":host{display:inline-block}:host .check{border-radius:50%;border:.18em solid;background:#fff;border-color:#ccd1d9;width:1em;height:1em;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .3s ease}:host .check i{font-size:.8em;transition:opacity .3s ease;color:transparent;-webkit-text-stroke:1px #0003}:host-context(.sfc-default-theme) :host .check i{opacity:.5}:host-context(.sfc-dark-theme) :host .check i{opacity:.8}:host .check:hover{border-color:#2bbbad}:host .check:hover i{-webkit-text-stroke:initial;color:#2bbbad}:host-context(.sfc-default-theme) :host .check:hover i{opacity:.8}:host-context(.sfc-dark-theme) :host .check:hover i{opacity:1}:host.active .check{border-color:#2bbbad;background:#2bbbad}:host.active .check i{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)}}\n"] }]
+            args: [{ selector: 'sfc-checkmark', template: "<div class=\"container\">\r\n    <span class=\"check\">\r\n        <fa-icon [icon]=\"icon\"></fa-icon>\r\n    </span>\r\n</div>", styles: [":host{display:inline-block}:host,:host-context(.sfc-default-theme) :host{color:#545e61}:host-context(.sfc-dark-theme) :host{color:#ccd1d9}:host .check{border-radius:50%;border:.18em solid;background:#fff;border-color:#ccd1d9;width:1em;height:1em;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .3s ease}:host .check fa-icon{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:#2bbbad}:host .check:hover fa-icon{color:#2bbbad}: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:#2bbbad;background:#2bbbad}: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)}}\n"] }]
         }], propDecorators: { active: [{
                 type: Input
             }, {
@@ -1760,10 +1893,236 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImpor
                 args: ['click']
             }] } });
 
+class 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: "13.2.7", ngImport: i0, type: PaginationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+PaginationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: PaginationService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: PaginationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class PaginationComponent {
+    constructor(service) {
+        this.service = service;
+        this.faChevronLeft = faChevronLeft;
+        this.faChevronRight = faChevronRight;
+        // max limit for pagination bts
+        this.count = PaginationConstants.DEFAULT_COUNT;
+        /**
+        * show full range of data
+        */
+        this.full = false;
+        /**
+         * show first and last page's btn
+         */
+        this.limits = false;
+    }
+    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);
+    }
+    get showLimitPages() {
+        return this.limits && !this.full;
+    }
+    showStartLimit(range, event) {
+        return this.showLimitPages && event.page !== PaginationConstants.DEFAULT_PAGE
+            && !hasItem(range, PaginationConstants.DEFAULT_PAGE);
+    }
+    showEndLimit(range, event) {
+        return this.showLimitPages && event.total !== event.page && !hasItem(range, event.total);
+    }
+    initRange(event) {
+        let start = 1, end = event.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);
+            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;
+                rangeStart = pageIndex - leftValue;
+                rangeEnd = pageIndex + rightValue;
+            }
+            start = rangeStart + 1;
+            end = Math.min(event.total + 1, rangeEnd + 2);
+        }
+        return this.range(start, end);
+    }
+    range(start, stop, step = 1) {
+        if (!stop) {
+            start = 0;
+            stop = start;
+        }
+        return Array.from(new Array(Number((stop - start) / step)), (_, i) => start + i * step);
+    }
+}
+PaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: PaginationComponent, deps: [{ token: PaginationService }], target: i0.ɵɵFactoryTarget.Component });
+PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", 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{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:#ccd1d9}:host .container ul li button{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:#ccd1d9}:host .container ul li button:before{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),: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:#ccd1d9}: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{color:#545e61!important}:host .container ul li button.active,:host-context(.sfc-default-theme) :host .container ul li button.active{background:#0000001a}:host-context(.sfc-dark-theme) :host .container ul li button.active{background:#f5f7fa}@keyframes hover-animation{0%{opacity:1}to{opacity:0}}\n"], components: [{ type: DelimeterComponent, selector: "sfc-delimeter" }, { type: i1$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ShowHideElementDirective, selector: "[sfcShowHideElement]", inputs: ["sfcShowHideElement", "delay"] }, { type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i1$2.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", 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{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:#ccd1d9}:host .container ul li button{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:#ccd1d9}:host .container ul li button:before{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),: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:#ccd1d9}: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{color:#545e61!important}:host .container ul li button.active,:host-context(.sfc-default-theme) :host .container ul li button.active{background:#0000001a}: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$: [{
+                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: "13.2.7", ngImport: i0, type: SortingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SortingService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SortingService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", 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: "13.2.7", ngImport: i0, type: SortingComponent, deps: [{ token: SortingService }], target: i0.ɵɵFactoryTarget.Component });
+SortingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", 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}:host .container,:host-context(.sfc-default-theme) :host .container{color:#545e61}:host-context(.sfc-dark-theme) :host .container{color:#ccd1d9}:host .container:hover{color:#2bbbad}:host .container .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:#2bbbad}\n"], components: [{ type: i1$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", 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}:host .container,:host-context(.sfc-default-theme) :host .container{color:#545e61}:host-context(.sfc-dark-theme) :host .container{color:#ccd1d9}:host .container:hover{color:#2bbbad}:host .container .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:#2bbbad}\n"] }]
+        }], ctorParameters: function () { return [{ type: SortingService }]; }, propDecorators: { id: [{
+                type: Input
+            }], model: [{
+                type: Input
+            }], enabled: [{
+                type: HostBinding,
+                args: [`class.${UIClass.Enabled}`]
+            }], active: [{
+                type: HostBinding,
+                args: [`class.${UIClass.Active}`]
+            }], sort: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
 class NgxSfcCommonModule {
 }
-NgxSfcCommonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: NgxSfcCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NgxSfcCommonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: NgxSfcCommonModule, declarations: [
+NgxSfcCommonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NgxSfcCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NgxSfcCommonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NgxSfcCommonModule, declarations: [
         // directives
         ClickOutsideDirective,
         ShowHideElementDirective,
@@ -1771,10 +2130,19 @@ NgxSfcCommonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", vers
         TemplateReferenceDirective,
         MouseDownDirective,
         ComponentSizeDirective,
+        DestroyParentDirective,
         // components
         ButtonComponent,
         TooltipComponent,
         DelimeterComponent,
+        ToggleSwitcherComponent,
+        CheckmarkComponent,
+        TemplateContentComponent,
+        CloseComponent,
+        HamburgerComponent,
+        DotsComponent,
+        PaginationComponent,
+        SortingComponent,
         // loaders
         BounceLoaderComponent,
         CircleLoaderComponent,
@@ -1782,15 +2150,9 @@ NgxSfcCommonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", vers
         ModalComponent,
         ModalOpenOnClickDirective,
         DefaultModalHeaderComponent,
-        DefaultModalFooterComponent,
-        // hamburger
-        HamburgerComponent,
-        // dots
-        DotsComponent,
-        //toggle
-        ToggleSwitcherComponent,
-        CheckmarkComponent], imports: [CommonModule,
-        BrowserAnimationsModule], exports: [
+        DefaultModalFooterComponent], imports: [CommonModule,
+        BrowserAnimationsModule,
+        FontAwesomeModule], exports: [
         // directives
         ClickOutsideDirective,
         ShowHideElementDirective,
@@ -1798,10 +2160,19 @@ NgxSfcCommonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", vers
         TemplateReferenceDirective,
         MouseDownDirective,
         ComponentSizeDirective,
+        DestroyParentDirective,
         // components
         ButtonComponent,
         TooltipComponent,
         DelimeterComponent,
+        CloseComponent,
+        CheckmarkComponent,
+        TemplateContentComponent,
+        ToggleSwitcherComponent,
+        DotsComponent,
+        HamburgerComponent,
+        PaginationComponent,
+        SortingComponent,
         // loaders
         BounceLoaderComponent,
         CircleLoaderComponent,
@@ -1809,19 +2180,13 @@ NgxSfcCommonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", vers
         ModalComponent,
         ModalOpenOnClickDirective,
         DefaultModalHeaderComponent,
-        DefaultModalFooterComponent,
-        // hamburger
-        HamburgerComponent,
-        // dots
-        DotsComponent,
-        //toggle
-        ToggleSwitcherComponent,
-        CheckmarkComponent] });
-NgxSfcCommonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: NgxSfcCommonModule, providers: [DOCUMENT_PROVIDERS, WINDOW_PROVIDERS], imports: [[
+        DefaultModalFooterComponent] });
+NgxSfcCommonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NgxSfcCommonModule, providers: [DOCUMENT_PROVIDERS, WINDOW_PROVIDERS], imports: [[
             CommonModule,
-            BrowserAnimationsModule
+            BrowserAnimationsModule,
+            FontAwesomeModule
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: NgxSfcCommonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NgxSfcCommonModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -1832,10 +2197,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImpor
                         TemplateReferenceDirective,
                         MouseDownDirective,
                         ComponentSizeDirective,
+                        DestroyParentDirective,
                         // components
                         ButtonComponent,
                         TooltipComponent,
                         DelimeterComponent,
+                        ToggleSwitcherComponent,
+                        CheckmarkComponent,
+                        TemplateContentComponent,
+                        CloseComponent,
+                        HamburgerComponent,
+                        DotsComponent,
+                        PaginationComponent,
+                        SortingComponent,
                         // loaders
                         BounceLoaderComponent,
                         CircleLoaderComponent,
@@ -1843,18 +2217,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImpor
                         ModalComponent,
                         ModalOpenOnClickDirective,
                         DefaultModalHeaderComponent,
-                        DefaultModalFooterComponent,
-                        // hamburger
-                        HamburgerComponent,
-                        // dots
-                        DotsComponent,
-                        //toggle
-                        ToggleSwitcherComponent,
-                        CheckmarkComponent
+                        DefaultModalFooterComponent
                     ],
                     imports: [
                         CommonModule,
-                        BrowserAnimationsModule
+                        BrowserAnimationsModule,
+                        FontAwesomeModule
                     ],
                     exports: [
                         // directives
@@ -1864,10 +2232,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImpor
                         TemplateReferenceDirective,
                         MouseDownDirective,
                         ComponentSizeDirective,
+                        DestroyParentDirective,
                         // components
                         ButtonComponent,
                         TooltipComponent,
                         DelimeterComponent,
+                        CloseComponent,
+                        CheckmarkComponent,
+                        TemplateContentComponent,
+                        ToggleSwitcherComponent,
+                        DotsComponent,
+                        HamburgerComponent,
+                        PaginationComponent,
+                        SortingComponent,
                         // loaders
                         BounceLoaderComponent,
                         CircleLoaderComponent,
@@ -1875,14 +2252,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImpor
                         ModalComponent,
                         ModalOpenOnClickDirective,
                         DefaultModalHeaderComponent,
-                        DefaultModalFooterComponent,
-                        // hamburger
-                        HamburgerComponent,
-                        // dots
-                        DotsComponent,
-                        //toggle
-                        ToggleSwitcherComponent,
-                        CheckmarkComponent
+                        DefaultModalFooterComponent
                     ],
                     providers: [DOCUMENT_PROVIDERS, WINDOW_PROVIDERS]
                 }]
@@ -1896,5 +2266,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BounceLoaderComponent, BrowserDocumentRef, BrowserWindowRef, ButtonComponent, ButtonType, CheckmarkComponent, CircleLoaderComponent, CircleLoaderType, ClickOutsideDirective, CommonConstants, ComponentSize, ComponentSizeDirective, DOCUMENT, DOCUMENT_PROVIDERS, DateTimeConstants, DefaultModalFooterComponent, DefaultModalHeaderComponent, DelimeterComponent, Direction, DocumentRef, DotsComponent, HamburgerComponent, LoaderService, MediaLimits, ModalComponent, ModalOpenOnClickDirective, ModalService, ModalTemplate, MouseDownDirective, NgxSfcCommonModule, Position, ResizeService, ShowHideElementDirective, SortingDirection, TemplateReferenceDirective, ThrowElementOnHoverDirective, ToggleSwitcherComponent, TooltipComponent, TooltipType, UIClass, UIConstants, WINDOW, WINDOW_PROVIDERS, WindowRef, addClasses, addItem, addPropertyToObject, all, any, browserDocumentProvider, browserWindowProvider, contains, distinct, documentFactory, documentProvider, firstItem, firstOrDefault, getCollectionOrEmpty, getCssLikeValue, getFileExtension, getFirstDayOfMonth, getFirstDayOfMonthByYearAndMonth, getFirstDayOfYear, getLastDayOfMonth, getLastDayOfMonthByYearAndMonth, getLastDayOfYear, getNextMonth, getNextYear, getPreviousMonth, getPreviousYear, getValueFromCssLikeValue, getWeeksNumberInMonth, hasItem, hasItemBy, hasObjectItem, isAsyncData, isDateGreat, isDateGreatOrEqual, isDateTimeGreat, isDateTimeGreatOrEqual, isDefined, isEqualDates, isImage, isNullOrEmptyString, isObject, lastItem, max, mergeDeep, nameof, parseFileSize, readAsDataURL, remove, removeClasses, removeItem, removePropertyFromObject, setDay, setHours, setMinutes, setYear, skip, sortBy, sortByPath, sum, trim, updateItem, where, windowFactory, windowProvider };
+export { BounceLoaderComponent, BrowserDocumentRef, BrowserWindowRef, ButtonComponent, ButtonType, CheckmarkComponent, CircleLoaderComponent, CircleLoaderType, ClickOutsideDirective, CloseComponent, CommonConstants, ComponentSize, ComponentSizeDirective, DOCUMENT, DOCUMENT_PROVIDERS, DateTimeConstants, DefaultModalFooterComponent, DefaultModalHeaderComponent, DelimeterComponent, DestroyParentDirective, Direction, DocumentRef, DotsComponent, HamburgerComponent, LoaderService, MediaLimits, ModalComponent, ModalOpenOnClickDirective, ModalService, ModalTemplate, MouseDownDirective, NgxSfcCommonModule, PaginationComponent, PaginationService, Position, ResizeService, ShowHideElementDirective, SortingComponent, SortingDirection, SortingService, TemplateContentComponent, TemplateReferenceDirective, Theme, ThrowElementOnHoverDirective, ToggleSwitcherComponent, TooltipComponent, TooltipType, UIClass, UIConstants, WINDOW, WINDOW_PROVIDERS, WindowRef, addClasses, addItem, addPropertyToObject, all, any, browserDocumentProvider, browserWindowProvider, contains, distinct, documentFactory, documentProvider, firstItem, firstOrDefault, getCalcValue, getCollectionOrEmpty, getCssLikeValue, getFileExtension, getFirstDayOfMonth, getFirstDayOfMonthByYearAndMonth, getFirstDayOfYear, getLastDayOfMonth, getLastDayOfMonthByYearAndMonth, getLastDayOfYear, getNextMonth, getNextYear, getPreviousMonth, getPreviousYear, getValueFromCssLikeValue, getWeeksNumberInMonth, hasItem, hasItemBy, hasObjectItem, hexToRgb, isAsyncData, isDateGreat, isDateGreatOrEqual, isDateTimeGreat, isDateTimeGreatOrEqual, isDefined, isEqualDates, isImage, isNullOrEmptyString, isNumeric, isObject, lastItem, max, mergeDeep, nameof, parseFileSize, readAsDataURL, remove, removeClasses, removeItem, removePropertyFromObject, replaceRgbOpacity, rgbToHex, setDay, setHours, setMinutes, setYear, skip, sortBy, sortByPath, sum, trim, updateItem, where, windowFactory, windowProvider };
 //# sourceMappingURL=ngx-sfc-common.mjs.map