ngx-sfc-common 0.0.19 → 0.0.21

package/fesm2020/ngx-sfc-common.mjs

@@ -4,7 +4,7 @@ import * as i1$1 from '@angular/common';
 import { isPlatformBrowser, CommonModule } from '@angular/common';
 import * as i3 from '@fortawesome/angular-fontawesome';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import { Subject, fromEvent, Observable, distinctUntilChanged, startWith, BehaviorSubject, filter, map, EMPTY, combineLatest, tap, switchMap, withLatestFrom, of } from 'rxjs';
+import { Subject, fromEvent, Observable, distinctUntilChanged, startWith, BehaviorSubject, filter, map, EMPTY, combineLatest, tap, switchMap, of } from 'rxjs';
 import * as i1 from '@angular/platform-browser';
 import { trigger, state, style, transition, group, query, animate, animateChild } from '@angular/animations';
 import { faTimes, faWindowRestore, faCheck, faChevronLeft, faChevronRight, faChevronUp, faChevronDown, faChevronCircleDown } from '@fortawesome/free-solid-svg-icons';
@@ -111,6 +111,16 @@ var Sequence;
     Sequence["Next"] = "next";
 })(Sequence || (Sequence = {}));
 
+/**
+ * Flag for validation compare
+ */
+var Compare;
+(function (Compare) {
+    Compare["More"] = "more";
+    Compare["Less"] = "less";
+})(Compare || (Compare = {}));
+;
+
 /**
  * Create a new injection token for injecting the Document into a component.
  */
@@ -348,7 +358,8 @@ CommonConstants.NOT_FOUND_INDEX = -1;
 CommonConstants.EMPTY_STRING = '';
 CommonConstants.MOUSE_BUTTON_LEFT = 0;
 CommonConstants.FULL_PERCENTAGE = 100;
-CommonConstants.COMMON_TEXT_DELIMETER = '/';
+CommonConstants.COMMON_TEXT_DELIMETER = '/';
+CommonConstants.PERCENTAGE_SYMBOL = '%';
 
 class DateTimeConstants {
 }
@@ -366,7 +377,10 @@ UIConstants.CSS_PIXELS = 'px';
 UIConstants.CSS_PERCENTAGE = '%';
 UIConstants.CSS_DEGREES = 'deg';
 UIConstants.CSS_EM = 'em';
+UIConstants.CSS_CH = 'ch';
 UIConstants.CSS_INITIAL = 'initial';
+UIConstants.CSS_INHERIT = 'inherit';
+UIConstants.CSS_NONE = 'none';
 UIConstants.CSS_VISIBILITY_VISIBLE = 'visible';
 UIConstants.CSS_VISIBILITY_HIDDEN = 'hidden';
 UIConstants.CSS_WIDTH = 'width';
@@ -419,148 +433,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Input
             }] } });
 
-/**
- * Return true if value defined
- * @param value Value to check
- * @returns True if value is not null and defined
- */
-function isDefined(value) {
-    return value !== undefined && value !== null;
-}
-/**
- * Return true if value is object
- * @param value Value to check
- * @returns True if value is object
- */
-function isObject(value) {
-    return (isDefined(value) && typeof value === 'object' && !Array.isArray(value));
-}
-/**
- * Return true if data is observable
- * @param data Object to check
- * @returns True if data is observable
- */
-function isAsyncData(data) {
-    return data instanceof Observable;
-}
-/**
- * Return extended object with new property
- * @param obj Object to extend by property
- * @param property New property name
- * @param value Value for new property
- * @returns Extended object with new property
- */
-function addPropertyToObject(obj, property, value = null) {
-    if (isDefined(property) && !obj.hasOwnProperty(property)) {
-        let newObj = {};
-        newObj[property] = value;
-        obj = { ...obj, ...newObj };
-    }
-    return obj;
-}
-/**
- * Remove property from object
- * @param obj Object for removing property
- * @param property Property name to remove
- */
-function removePropertyFromObject(obj, property) {
-    if (obj.hasOwnProperty(property)) {
-        delete obj[property];
+class IfDirective {
+    constructor(el) {
+        this.el = el;
+        this.display = this.style.display;
     }
-}
-/**
-  * Deep merge object with others
-  * @param target Object to merge
-  * @param sources
-  */
-/**
- * Deep merge object with others
- * @param target  Object to merge
- * @param sources Objects to be merged with target
- * @returns Merged object
- */
-function mergeDeep(target, ...sources) {
-    if (!sources.length)
-        return target;
-    const source = sources.shift();
-    if (isObject(target) && isObject(source)) {
-        for (const key in source) {
-            if (isObject(source[key])) {
-                if (!target[key])
-                    Object.assign(target, { [key]: {} });
-                mergeDeep(target[key], source[key]);
-            }
-            else {
-                Object.assign(target, { [key]: source[key] });
-            }
-        }
+    set sfcIf(show) {
+        this.style.display = show
+            ? this.display || UIConstants.CSS_INITIAL
+            : UIConstants.CSS_NONE;
     }
-    return mergeDeep(target, ...sources);
+    get style() { return this.el.nativeElement.style; }
 }
-/**
- * Get type's property name safety
- * @param name KeyOf property
- * @returns Type's property 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 current browser is Chrome
- * @returns If current browser is Chrome
- */
-function isChromeBrowser() {
-    return /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
-}
-/**
- * Return true if value is valid email address
- * @returns True if it's valid email address
- */
-function isEmail(value) {
-    return isDefined(value.match(/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/));
-}
-/**
- * Return true if string is "true"
- * @returns parsed string as boolean
- */
-function parseBoolean(value) {
-    return /^true$/i.test(value);
-}
-
-/**
- * Return true if string has value(not empty string)
- * @param value String value to check
- * @returns True if string is not null and defined(not empty string)
- */
-function isNullOrEmptyString(value) {
-    return !isDefined(value) || value === CommonConstants.EMPTY_STRING;
-}
-/**
- * Return true if value contains includeValue
- * @param value String value to check
- * @param includeValue Value to check if it include
- * @returns True if value contains includeValue
- */
-function contains(value, includeValue) {
-    return !isNullOrEmptyString(value) && !isNullOrEmptyString(includeValue)
-        ? value.toLowerCase()
-            .includes(includeValue.toLowerCase())
-        : false;
-}
-/**
- * Return trimed value
- * @param value Value for trim modification
- * @returns Trimed value
- */
-function trim(value) {
-    return isNullOrEmptyString(value) ? value : value.replace(/\s/g, '');
-}
+IfDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: IfDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+IfDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: IfDirective, selector: "[sfcIf]", inputs: { sfcIf: "sfcIf" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: IfDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[sfcIf]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { sfcIf: [{
+                type: Input
+            }] } });
 
 /**
  * Set minutes for date
@@ -649,6 +543,16 @@ function getNextDate(date) {
     nextDate.setDate(date.getDate() + 1);
     return nextDate;
 }
+/**
+ * Get previous date
+ * @param date Date value
+ * @returns Previous date
+ */
+function getPreviousDate(date) {
+    const nextDate = new Date(date);
+    nextDate.setDate(date.getDate() - 1);
+    return nextDate;
+}
 /**
  * Get next month as date
  * @param date Date value
@@ -774,6 +678,16 @@ function isEqualDates(date1, date2) {
     date2Value.setHours(0, 0, 0, 0);
     return date1Value.getTime() === date2Value.getTime();
 }
+/**
+ * Return true if first and second datetime are equal
+ * @param date1 First datetime value
+ * @param date2 Second datetime value
+ * @returns True if first and second datetime are equal
+ */
+function isEqualDateTimes(date1, date2) {
+    const date1Value = new Date(date1), date2Value = new Date(date2);
+    return date1Value.getTime() === date2Value.getTime();
+}
 /**
  * Return true if first date greater than second date
  * @param date1 First date value
@@ -813,6 +727,237 @@ function isDateTimeGreat(date1, date2) {
 function isDateTimeGreatOrEqual(date1, date2) {
     return new Date(date1.getFullYear(), date1.getMonth(), date1.getDate(), date1.getHours(), date1.getMinutes())
         >= new Date(date2.getFullYear(), date2.getMonth(), date2.getDate(), date2.getHours(), date2.getMinutes());
+}
+/**
+ * Convert UTC date to local
+ * @param date Date value
+ * @returns Locale date
+ */
+function convertUTCDateToLocalDate(date) {
+    return new Date(date.getTime() - date.getTimezoneOffset() * 60 * 1000);
+}
+/**
+ * Convert Json representation of timestamp to date value
+ * @param timestamp Timestamp for example - 12:23:45
+ * @returns Date value
+ */
+function convertTimestampToDate(timestamp) {
+    const tempTime = timestamp.split(":"), result = new Date();
+    result.setHours(+tempTime[0]);
+    result.setMinutes(+tempTime[1]);
+    result.setSeconds(+tempTime[2]);
+    return result;
+}
+
+/**
+ * Return true if value defined
+ * @param value Value to check
+ * @returns True if value is not null and defined
+ */
+function isDefined(value) {
+    return value !== undefined && value !== null;
+}
+/**
+ * Return true if value is object
+ * @param value Value to check
+ * @returns True if value is object
+ */
+function isObject(value) {
+    return (isDefined(value) && typeof value === 'object'
+        && !Array.isArray(value)
+        && !(value instanceof Date || value instanceof File));
+}
+/**
+ * Return true if data is observable
+ * @param data Object to check
+ * @returns True if data is observable
+ */
+function isAsyncData(data) {
+    return data instanceof Observable;
+}
+/**
+ * Return extended object with new property
+ * @param obj Object to extend by property
+ * @param property New property name
+ * @param value Value for new property
+ * @returns Extended object with new property
+ */
+function addPropertyToObject(obj, property, value = null) {
+    if (isDefined(property) && !obj.hasOwnProperty(property)) {
+        let newObj = {};
+        newObj[property] = value;
+        obj = { ...obj, ...newObj };
+    }
+    return obj;
+}
+/**
+ * Remove property from object
+ * @param obj Object for removing property
+ * @param property Property name to remove
+ */
+function removePropertyFromObject(obj, property) {
+    if (obj.hasOwnProperty(property)) {
+        delete obj[property];
+    }
+}
+/**
+  * Deep merge object with others
+  * @param target Object to merge
+  * @param sources
+  */
+/**
+ * Deep merge object with others
+ * @param target  Object to merge
+ * @param sources Objects to be merged with target
+ * @returns Merged object
+ */
+function mergeDeep(target, ...sources) {
+    if (!sources.length)
+        return target;
+    const source = sources.shift();
+    if (isObject(target) && isObject(source)) {
+        for (const key in source) {
+            if (isObject(source[key])) {
+                if (!target[key])
+                    Object.assign(target, { [key]: {} });
+                mergeDeep(target[key], source[key]);
+            }
+            else {
+                Object.assign(target, { [key]: source[key] });
+            }
+        }
+    }
+    return mergeDeep(target, ...sources);
+}
+/**
+ * Get type's property name safety
+ * @param name KeyOf property
+ * @returns Type's property 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 current browser is Chrome
+ * @returns If current browser is Chrome
+ */
+function isChromeBrowser() {
+    return /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
+}
+/**
+ * Return true if value is valid email address
+ * @returns True if it's valid email address
+ */
+function isEmail(value) {
+    return isDefined(value.match(/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/));
+}
+/**
+ * Return true if string is "true"
+ * @returns parsed string as boolean
+ */
+function parseBoolean(value) {
+    return /^true$/i.test(value);
+}
+/**
+ * Return true if values equal
+ * @param obj1 First value to compare
+ * @param obj2 Second value to compare
+ * @returns True if equal
+ */
+function isEqual(obj1, obj2) {
+    /**
+     * More accurately check the type of a JavaScript object
+     * @param  {Object} obj The object
+     * @return {String}     The object type
+     */
+    function getType(obj) {
+        return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();
+    }
+    function areArraysEqual() {
+        // Check length
+        if (obj1.length !== obj2.length)
+            return false;
+        // Check each item in the array
+        for (let i = 0; i < obj1.length; i++) {
+            if (!isEqual(obj1[i], obj2[i]))
+                return false;
+        }
+        // If no errors, return true
+        return true;
+    }
+    function areObjectsEqual() {
+        if (Object.keys(obj1).length !== Object.keys(obj2).length)
+            return false;
+        // Check each item in the object
+        for (let key in obj1) {
+            if (Object.prototype.hasOwnProperty.call(obj1, key)) {
+                if (!isEqual(obj1[key], obj2[key])) {
+                    return false;
+                }
+            }
+        }
+        // If no errors, return true
+        return true;
+    }
+    function areFunctionsEqual() {
+        return obj1.toString() === obj2.toString();
+    }
+    function arePrimativesEqual() {
+        return obj1 === obj2;
+    }
+    function areDatesEqual() {
+        return isEqualDateTimes(obj1, obj2);
+    }
+    // Get the object type
+    let type = getType(obj1);
+    // If the two items are not the same type, return false
+    if (type !== getType(obj2))
+        return false;
+    // Compare based on type
+    if (type === 'array')
+        return areArraysEqual();
+    if (type === 'date')
+        return areDatesEqual();
+    if (type === 'object')
+        return areObjectsEqual();
+    if (type === 'function')
+        return areFunctionsEqual();
+    return arePrimativesEqual();
+}
+
+/**
+ * Return true if string has value(not empty string)
+ * @param value String value to check
+ * @returns True if string is not null and defined(not empty string)
+ */
+function isNullOrEmptyString(value) {
+    return !isDefined(value) || value === CommonConstants.EMPTY_STRING;
+}
+/**
+ * Return true if value contains includeValue
+ * @param value String value to check
+ * @param includeValue Value to check if it include
+ * @returns True if value contains includeValue
+ */
+function contains(value, includeValue) {
+    return !isNullOrEmptyString(value) && !isNullOrEmptyString(includeValue)
+        ? value.toLowerCase()
+            .includes(includeValue.toLowerCase())
+        : false;
+}
+/**
+ * Return trimed value
+ * @param value Value for trim modification
+ * @returns Trimed value
+ */
+function trim(value) {
+    return isNullOrEmptyString(value) ? value : value.replace(/\s/g, '');
 }
 
 /**
@@ -864,6 +1009,29 @@ function readAsDataURL(file, onLoad) {
  */
 function isImage(file) {
     return isDefined(file) && (/\.(gif|jpe?g|jpg|tiff|png|webp|bmp)$/i).test(file.name);
+}
+/**
+ * Convert file to base64 string
+ * @param file File value
+ * @returns Base64 string
+ */
+function convertToBase64String(file) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.readAsDataURL(file);
+        reader.onload = () => resolve(reader.result);
+        reader.onerror = reject;
+    });
+}
+/**
+ * Convert base64 string to file
+ * @param base64 Base64 string
+ * @param name File name
+ * @returns File value
+ */
+async function convertFromBase64String(base64, name) {
+    const res = await fetch(base64), blob = await res.blob(), extension = base64.substring("data:image/".length, base64.indexOf(";base64"));
+    return new File([blob], `${name}.${extension}`, { type: `image/${extension}` });
 }
 
 /**
@@ -1028,6 +1196,15 @@ function lastItem(collection) {
 function all(collection, predicate) {
     return any(collection) ? collection.filter(predicate).length == collection.length : false;
 }
+/**
+ * Return count by predicate
+ * @param collection Array of objects
+ * @param predicate Function to define check logic
+ * @returns Items count
+ */
+function count(collection, predicate) {
+    return collection.filter(predicate).length;
+}
 /**
  * Return items from collection by predicate function
  * @param collection Array of items
@@ -1456,19 +1633,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
 
 class ScrollIntoViewDirective {
     constructor() {
+        /**
+         * Scroll into middle of local container(not whole page)
+         */
+        this.local = false;
         this.options = { behavior: 'smooth', block: 'center', inline: 'start' };
     }
-    set sfcScrollIntoView(value) {
-        if (!isDefined(value))
+    set sfcScrollIntoView(target) {
+        if (!isDefined(target))
             return;
-        if (isChromeBrowser())
-            value.scrollIntoViewIfNeeded();
-        else
-            value.scrollIntoView(this.options);
+        if (this.local)
+            target.scrollTop = target.offsetHeight / 2;
+        else {
+            if (isChromeBrowser())
+                target.scrollIntoViewIfNeeded();
+            else
+                target.scrollIntoView(this.options);
+        }
     }
 }
 ScrollIntoViewDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ScrollIntoViewDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-ScrollIntoViewDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: ScrollIntoViewDirective, selector: "[sfcScrollIntoView]", inputs: { sfcScrollIntoView: "sfcScrollIntoView", options: "options" }, ngImport: i0 });
+ScrollIntoViewDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: ScrollIntoViewDirective, selector: "[sfcScrollIntoView]", inputs: { sfcScrollIntoView: "sfcScrollIntoView", local: "local", options: "options" }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ScrollIntoViewDirective, decorators: [{
             type: Directive,
             args: [{
@@ -1476,6 +1661,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 }]
         }], propDecorators: { sfcScrollIntoView: [{
                 type: Input
+            }], local: [{
+                type: Input
             }], options: [{
                 type: Input
             }] } });
@@ -1577,10 +1764,10 @@ class ButtonComponent {
     }
 }
 ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ButtonComponent, selector: "sfc-button", inputs: { text: "text", iconBefore: "iconBefore", iconAfter: "iconAfter", disabled: "disabled", types: "types" }, host: { properties: { "class.disabled": "this.disabled" } }, ngImport: i0, template: "<a class=\"button\" [ngClass]=\"classes\">\r\n    <fa-icon *ngIf=\"iconBefore\" class=\"icon before\" [icon]=\"iconBefore\"></fa-icon>\r\n    <span class=\"text\">{{label}}</span>\r\n    <fa-icon *ngIf=\"iconAfter\" class=\"icon after\" [icon]=\"iconAfter\"></fa-icon>\r\n</a>", styles: [":host .button.bordered{border:solid 2px}:host .button.bordered,:host-context(.sfc-default-theme) :host .button.bordered{color:#545e61}:host-context(.sfc-dark-theme) :host .button.bordered{color:#fff}:host .button.bordered,:host-context(.sfc-default-theme) :host .button.bordered{border-color:#545e61}:host-context(.sfc-dark-theme) :host .button.bordered{border-color:#fff}:host .button.filled{color:#fff!important;border-color:#545e61;background:#545e61}:host.disabled .button{color:#fff!important;border-color:#bdbdbd;background:#bdbdbd}:host:hover .button.filled{color:#fff!important;border-color:#ffce54;background:#ffce54}:host .button.rounded{border:solid 2px;border-radius:20px;padding:.4em 1.2em}:host .button.rounded,:host-context(.sfc-default-theme) :host .button.rounded{color:#545e61}:host-context(.sfc-dark-theme) :host .button.rounded{color:#fff}:host .button.rounded,:host-context(.sfc-default-theme) :host .button.rounded{border-color:#545e61}:host-context(.sfc-dark-theme) :host .button.rounded{border-color:#fff}:host .button.circled{border:solid 2px;width:5em;height:5em;border-radius:50%}:host .button.circled,:host-context(.sfc-default-theme) :host .button.circled{color:#545e61}:host-context(.sfc-dark-theme) :host .button.circled{color:#fff}:host .button.circled,:host-context(.sfc-default-theme) :host .button.circled{border-color:#545e61}:host-context(.sfc-dark-theme) :host .button.circled{border-color:#fff}:host .button.circled .text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host{display:inline-block;font-size:1em}:host .button{box-sizing:border-box;display:inline-flex;justify-content:center;flex-wrap:wrap;align-items:center;overflow:hidden;text-align:center;text-decoration:none;white-space:nowrap;font-size:.9em;cursor:pointer;-webkit-user-select:none;user-select:none;width:inherit;transition:color .5s ease,border-color .5s ease,background .5s ease}:host .button,:host-context(.sfc-default-theme) :host .button{color:#545e61}:host-context(.sfc-dark-theme) :host .button{color:#fff}:host .button .icon{padding:3px}:host .button .text{padding:3px;white-space:initial;text-overflow:ellipsis;overflow:hidden}:host .button .text:empty{display:none}:host.disabled{pointer-events:none}:host.disabled .button,:host-context(.sfc-default-theme) :host.disabled .button{color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .button{color:#656d78}:host.disabled .button,:host-context(.sfc-default-theme) :host.disabled .button{border-color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .button{border-color:#656d78}:host:not(.disabled):hover .button{color:#ffce54;border-color:#ffce54}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
+ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ButtonComponent, selector: "sfc-button", inputs: { text: "text", iconBefore: "iconBefore", iconAfter: "iconAfter", disabled: "disabled", types: "types" }, host: { properties: { "class.disabled": "this.disabled" } }, ngImport: i0, template: "<a class=\"button\" [ngClass]=\"classes\">\r\n    <fa-icon *ngIf=\"iconBefore\" class=\"icon before\" [icon]=\"iconBefore\"></fa-icon>\r\n    <span class=\"text\">{{label}}</span>\r\n    <fa-icon *ngIf=\"iconAfter\" class=\"icon after\" [icon]=\"iconAfter\"></fa-icon>\r\n</a>", styles: [":host .button.bordered{border:solid 2px;transition:color .5s ease;transition:border-color .5s ease}:host .button.bordered,:host-context(.sfc-default-theme) :host .button.bordered{color:#545e61}:host-context(.sfc-dark-theme) :host .button.bordered{color:#fff}:host .button.bordered,:host-context(.sfc-default-theme) :host .button.bordered{border-color:#545e61}:host-context(.sfc-dark-theme) :host .button.bordered{border-color:#fff}:host .button.filled{color:#fff!important;transition:border-color .5s ease;transition:background .5s ease}:host .button.filled,:host-context(.sfc-default-theme) :host .button.filled{border-color:#545e61}:host-context(.sfc-dark-theme) :host .button.filled{border-color:#545e61}:host .button.filled,:host-context(.sfc-default-theme) :host .button.filled{background:#545e61}:host-context(.sfc-dark-theme) :host .button.filled{background:#545e61}:host.disabled .button.filled{color:#fff!important;transition:border-color .5s ease;transition:background .5s ease}:host.disabled .button.filled,:host-context(.sfc-default-theme) :host.disabled .button.filled{border-color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .button.filled{border-color:#bdbdbd}:host.disabled .button.filled,:host-context(.sfc-default-theme) :host.disabled .button.filled{background:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .button.filled{background:#bdbdbd}:host:hover .button.filled{color:#fff!important;transition:border-color .5s ease;transition:background .5s ease}:host:hover .button.filled,:host-context(.sfc-default-theme) :host:hover .button.filled{border-color:#ffce54}:host-context(.sfc-dark-theme) :host:hover .button.filled{border-color:#ffce54}:host:hover .button.filled,:host-context(.sfc-default-theme) :host:hover .button.filled{background:#ffce54}:host-context(.sfc-dark-theme) :host:hover .button.filled{background:#ffce54}:host .button.rounded{border:solid 2px;transition:color .5s ease;transition:border-color .5s ease;border-radius:1.25em;padding:.4em 1.2em}:host .button.rounded,:host-context(.sfc-default-theme) :host .button.rounded{color:#545e61}:host-context(.sfc-dark-theme) :host .button.rounded{color:#fff}:host .button.rounded,:host-context(.sfc-default-theme) :host .button.rounded{border-color:#545e61}:host-context(.sfc-dark-theme) :host .button.rounded{border-color:#fff}:host .button.rounded.filled{transition:border-color .5s ease}:host .button.rounded.filled,:host-context(.sfc-default-theme) :host .button.rounded.filled{border-color:#545e61}:host-context(.sfc-dark-theme) :host .button.rounded.filled{border-color:#545e61}:host.disabled .button.rounded.filled{border-color:#bdbdbd}:host:not(.disabled):hover .button.rounded.filled{border-color:#ffce54}:host .button.circled{border:solid 2px;transition:color .5s ease;transition:border-color .5s ease;width:5em;height:5em;border-radius:50%}:host .button.circled,:host-context(.sfc-default-theme) :host .button.circled{color:#545e61}:host-context(.sfc-dark-theme) :host .button.circled{color:#fff}:host .button.circled,:host-context(.sfc-default-theme) :host .button.circled{border-color:#545e61}:host-context(.sfc-dark-theme) :host .button.circled{border-color:#fff}:host .button.circled .text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}:host{display:inline-block;font-size:1em}:host .button{box-sizing:border-box;display:inline-flex;justify-content:center;flex-wrap:wrap;align-items:center;overflow:hidden;text-align:center;text-decoration:none;white-space:nowrap;font-size:.9em;cursor:pointer;-webkit-user-select:none;user-select:none;width:inherit;transition:color .5s ease;transition:color .5s ease,border-color .5s ease,background .5s ease!important}:host .button,:host-context(.sfc-default-theme) :host .button{color:#545e61}:host-context(.sfc-dark-theme) :host .button{color:#fff}:host .button .icon{padding:3px}:host .button .text{padding:3px;white-space:initial;text-overflow:ellipsis;overflow:hidden}:host .button .text:empty{display:none}:host.disabled{pointer-events:none}:host.disabled .button{transition:color .5s ease;transition:border-color .5s ease}:host.disabled .button,:host-context(.sfc-default-theme) :host.disabled .button{color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .button{color:#656d78}:host.disabled .button,:host-context(.sfc-default-theme) :host.disabled .button{border-color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .button{border-color:#656d78}:host:not(.disabled):hover .button{color:#ffce54;border-color:#ffce54}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-button', template: "<a class=\"button\" [ngClass]=\"classes\">\r\n    <fa-icon *ngIf=\"iconBefore\" class=\"icon before\" [icon]=\"iconBefore\"></fa-icon>\r\n    <span class=\"text\">{{label}}</span>\r\n    <fa-icon *ngIf=\"iconAfter\" class=\"icon after\" [icon]=\"iconAfter\"></fa-icon>\r\n</a>", styles: [":host .button.bordered{border:solid 2px}:host .button.bordered,:host-context(.sfc-default-theme) :host .button.bordered{color:#545e61}:host-context(.sfc-dark-theme) :host .button.bordered{color:#fff}:host .button.bordered,:host-context(.sfc-default-theme) :host .button.bordered{border-color:#545e61}:host-context(.sfc-dark-theme) :host .button.bordered{border-color:#fff}:host .button.filled{color:#fff!important;border-color:#545e61;background:#545e61}:host.disabled .button{color:#fff!important;border-color:#bdbdbd;background:#bdbdbd}:host:hover .button.filled{color:#fff!important;border-color:#ffce54;background:#ffce54}:host .button.rounded{border:solid 2px;border-radius:20px;padding:.4em 1.2em}:host .button.rounded,:host-context(.sfc-default-theme) :host .button.rounded{color:#545e61}:host-context(.sfc-dark-theme) :host .button.rounded{color:#fff}:host .button.rounded,:host-context(.sfc-default-theme) :host .button.rounded{border-color:#545e61}:host-context(.sfc-dark-theme) :host .button.rounded{border-color:#fff}:host .button.circled{border:solid 2px;width:5em;height:5em;border-radius:50%}:host .button.circled,:host-context(.sfc-default-theme) :host .button.circled{color:#545e61}:host-context(.sfc-dark-theme) :host .button.circled{color:#fff}:host .button.circled,:host-context(.sfc-default-theme) :host .button.circled{border-color:#545e61}:host-context(.sfc-dark-theme) :host .button.circled{border-color:#fff}:host .button.circled .text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host{display:inline-block;font-size:1em}:host .button{box-sizing:border-box;display:inline-flex;justify-content:center;flex-wrap:wrap;align-items:center;overflow:hidden;text-align:center;text-decoration:none;white-space:nowrap;font-size:.9em;cursor:pointer;-webkit-user-select:none;user-select:none;width:inherit;transition:color .5s ease,border-color .5s ease,background .5s ease}:host .button,:host-context(.sfc-default-theme) :host .button{color:#545e61}:host-context(.sfc-dark-theme) :host .button{color:#fff}:host .button .icon{padding:3px}:host .button .text{padding:3px;white-space:initial;text-overflow:ellipsis;overflow:hidden}:host .button .text:empty{display:none}:host.disabled{pointer-events:none}:host.disabled .button,:host-context(.sfc-default-theme) :host.disabled .button{color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .button{color:#656d78}:host.disabled .button,:host-context(.sfc-default-theme) :host.disabled .button{border-color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .button{border-color:#656d78}:host:not(.disabled):hover .button{color:#ffce54;border-color:#ffce54}\n"] }]
+            args: [{ selector: 'sfc-button', template: "<a class=\"button\" [ngClass]=\"classes\">\r\n    <fa-icon *ngIf=\"iconBefore\" class=\"icon before\" [icon]=\"iconBefore\"></fa-icon>\r\n    <span class=\"text\">{{label}}</span>\r\n    <fa-icon *ngIf=\"iconAfter\" class=\"icon after\" [icon]=\"iconAfter\"></fa-icon>\r\n</a>", styles: [":host .button.bordered{border:solid 2px;transition:color .5s ease;transition:border-color .5s ease}:host .button.bordered,:host-context(.sfc-default-theme) :host .button.bordered{color:#545e61}:host-context(.sfc-dark-theme) :host .button.bordered{color:#fff}:host .button.bordered,:host-context(.sfc-default-theme) :host .button.bordered{border-color:#545e61}:host-context(.sfc-dark-theme) :host .button.bordered{border-color:#fff}:host .button.filled{color:#fff!important;transition:border-color .5s ease;transition:background .5s ease}:host .button.filled,:host-context(.sfc-default-theme) :host .button.filled{border-color:#545e61}:host-context(.sfc-dark-theme) :host .button.filled{border-color:#545e61}:host .button.filled,:host-context(.sfc-default-theme) :host .button.filled{background:#545e61}:host-context(.sfc-dark-theme) :host .button.filled{background:#545e61}:host.disabled .button.filled{color:#fff!important;transition:border-color .5s ease;transition:background .5s ease}:host.disabled .button.filled,:host-context(.sfc-default-theme) :host.disabled .button.filled{border-color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .button.filled{border-color:#bdbdbd}:host.disabled .button.filled,:host-context(.sfc-default-theme) :host.disabled .button.filled{background:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .button.filled{background:#bdbdbd}:host:hover .button.filled{color:#fff!important;transition:border-color .5s ease;transition:background .5s ease}:host:hover .button.filled,:host-context(.sfc-default-theme) :host:hover .button.filled{border-color:#ffce54}:host-context(.sfc-dark-theme) :host:hover .button.filled{border-color:#ffce54}:host:hover .button.filled,:host-context(.sfc-default-theme) :host:hover .button.filled{background:#ffce54}:host-context(.sfc-dark-theme) :host:hover .button.filled{background:#ffce54}:host .button.rounded{border:solid 2px;transition:color .5s ease;transition:border-color .5s ease;border-radius:1.25em;padding:.4em 1.2em}:host .button.rounded,:host-context(.sfc-default-theme) :host .button.rounded{color:#545e61}:host-context(.sfc-dark-theme) :host .button.rounded{color:#fff}:host .button.rounded,:host-context(.sfc-default-theme) :host .button.rounded{border-color:#545e61}:host-context(.sfc-dark-theme) :host .button.rounded{border-color:#fff}:host .button.rounded.filled{transition:border-color .5s ease}:host .button.rounded.filled,:host-context(.sfc-default-theme) :host .button.rounded.filled{border-color:#545e61}:host-context(.sfc-dark-theme) :host .button.rounded.filled{border-color:#545e61}:host.disabled .button.rounded.filled{border-color:#bdbdbd}:host:not(.disabled):hover .button.rounded.filled{border-color:#ffce54}:host .button.circled{border:solid 2px;transition:color .5s ease;transition:border-color .5s ease;width:5em;height:5em;border-radius:50%}:host .button.circled,:host-context(.sfc-default-theme) :host .button.circled{color:#545e61}:host-context(.sfc-dark-theme) :host .button.circled{color:#fff}:host .button.circled,:host-context(.sfc-default-theme) :host .button.circled{border-color:#545e61}:host-context(.sfc-dark-theme) :host .button.circled{border-color:#fff}:host .button.circled .text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}:host{display:inline-block;font-size:1em}:host .button{box-sizing:border-box;display:inline-flex;justify-content:center;flex-wrap:wrap;align-items:center;overflow:hidden;text-align:center;text-decoration:none;white-space:nowrap;font-size:.9em;cursor:pointer;-webkit-user-select:none;user-select:none;width:inherit;transition:color .5s ease;transition:color .5s ease,border-color .5s ease,background .5s ease!important}:host .button,:host-context(.sfc-default-theme) :host .button{color:#545e61}:host-context(.sfc-dark-theme) :host .button{color:#fff}:host .button .icon{padding:3px}:host .button .text{padding:3px;white-space:initial;text-overflow:ellipsis;overflow:hidden}:host .button .text:empty{display:none}:host.disabled{pointer-events:none}:host.disabled .button{transition:color .5s ease;transition:border-color .5s ease}:host.disabled .button,:host-context(.sfc-default-theme) :host.disabled .button{color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .button{color:#656d78}:host.disabled .button,:host-context(.sfc-default-theme) :host.disabled .button{border-color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .button{border-color:#656d78}:host:not(.disabled):hover .button{color:#ffce54;border-color:#ffce54}\n"] }]
         }], propDecorators: { text: [{
                 type: Input
             }], iconBefore: [{
@@ -1672,10 +1859,10 @@ class DelimeterComponent {
     ;
 }
 DelimeterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DelimeterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DelimeterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DelimeterComponent, selector: "sfc-delimeter", inputs: { label: "label", direction: "direction" }, host: { properties: { "class": "this.direction", "class.empty": "this._empty" } }, ngImport: i0, template: `<span>{{label}}</span>`, isInline: true, styles: [":host{padding:.3em 0}:host span{font-size:.8em}:host span,:host-context(.sfc-default-theme) :host span{color:#545e61}:host-context(.sfc-dark-theme) :host span{color:#fff}:host.vertical{display:inline-table;text-align:center;height:100%;min-height:4em;padding:0 .3em}:host.vertical span{position:relative;display:table-cell;vertical-align:middle}:host.vertical span:before,:host.vertical span:after{position:absolute;content:\"\";left:50%;border-left:1px solid;transition:border-image .5s ease}:host.vertical span:before{bottom:50%;top:0;margin-bottom:.8em}:host.vertical span:before,:host-context(.sfc-default-theme) :host.vertical span:before{border-image:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 1 100%}:host-context(.sfc-dark-theme) :host.vertical span:before{border-image:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,.4) 47%,rgba(255,255,255,.4) 53%,rgba(255,255,255,.4) 100%) 1 100%}:host.vertical span:after{top:50%;bottom:0;margin-top:.8em}:host.vertical span:after,:host-context(.sfc-default-theme) :host.vertical span:after{border-image:linear-gradient(to top,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 1 100%}:host-context(.sfc-dark-theme) :host.vertical span:after{border-image:linear-gradient(to top,rgba(255,255,255,0) 0%,rgba(255,255,255,.4) 47%,rgba(255,255,255,.4) 53%,rgba(255,255,255,.4) 100%) 1 100%}:host.vertical.empty{min-height:2em}:host.vertical.empty span:before{margin-bottom:0}:host.vertical.empty span:after{margin-top:0}:host.horizontal{display:flex;align-items:center;text-align:center;-webkit-user-select:none;user-select:none}:host.horizontal:before,:host-context(.sfc-default-theme) :host.horizontal:before{border-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host-context(.sfc-dark-theme) :host.horizontal:before{border-image:linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,.4) 47%,rgba(255,255,255,.4) 53%,rgba(255,255,255,.4) 100%) 100% 1}:host.horizontal:after,:host-context(.sfc-default-theme) :host.horizontal:after{border-image:linear-gradient(to left,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host-context(.sfc-dark-theme) :host.horizontal:after{border-image:linear-gradient(to left,rgba(255,255,255,0) 0%,rgba(255,255,255,.4) 47%,rgba(255,255,255,.4) 53%,rgba(255,255,255,.4) 100%) 100% 1}:host.horizontal:before,:host.horizontal:after{content:\"\";flex:1;border-bottom:1px solid}:host.horizontal.empty span{display:none}:host.horizontal:not(.empty):before{margin-right:.5em}:host.horizontal:not(.empty):after{margin-left:.5em}\n"] });
+DelimeterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DelimeterComponent, selector: "sfc-delimeter", inputs: { label: "label", direction: "direction" }, host: { properties: { "class": "this.direction", "class.empty": "this._empty" } }, ngImport: i0, template: `<span>{{label}}</span>`, isInline: true, styles: [":host{padding:.3em 0}:host span{transition:color .5s ease;font-size:.8em}:host span,:host-context(.sfc-default-theme) :host span{color:#545e61}:host-context(.sfc-dark-theme) :host span{color:#fff}:host.vertical{display:inline-table;text-align:center;height:100%;min-height:4em;padding:0 .3em}:host.vertical span{position:relative;display:table-cell;vertical-align:middle}:host.vertical span:before,:host.vertical span:after{position:absolute;content:\"\";left:50%;border-left:1px solid;transition:border-image .5s ease}:host.vertical span:before{bottom:50%;top:0;margin-bottom:.8em;transition:border-image .5s ease}:host.vertical span:before,:host-context(.sfc-default-theme) :host.vertical span:before{border-image:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 1 100%}:host-context(.sfc-dark-theme) :host.vertical span:before{border-image:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,.4) 47%,rgba(255,255,255,.4) 53%,rgba(255,255,255,.4) 100%) 1 100%}:host.vertical span:after{top:50%;bottom:0;margin-top:.8em;transition:border-image .5s ease}:host.vertical span:after,:host-context(.sfc-default-theme) :host.vertical span:after{border-image:linear-gradient(to top,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 1 100%}:host-context(.sfc-dark-theme) :host.vertical span:after{border-image:linear-gradient(to top,rgba(255,255,255,0) 0%,rgba(255,255,255,.4) 47%,rgba(255,255,255,.4) 53%,rgba(255,255,255,.4) 100%) 1 100%}:host.vertical.empty{min-height:2em}:host.vertical.empty span:before{margin-bottom:0}:host.vertical.empty span:after{margin-top:0}:host.horizontal{display:flex;align-items:center;text-align:center;-webkit-user-select:none;user-select:none}:host.horizontal:before{transition:border-image .5s ease}:host.horizontal:before,:host-context(.sfc-default-theme) :host.horizontal:before{border-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host-context(.sfc-dark-theme) :host.horizontal:before{border-image:linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,.4) 47%,rgba(255,255,255,.4) 53%,rgba(255,255,255,.4) 100%) 100% 1}:host.horizontal:after{transition:border-image .5s ease}:host.horizontal:after,:host-context(.sfc-default-theme) :host.horizontal:after{border-image:linear-gradient(to left,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host-context(.sfc-dark-theme) :host.horizontal:after{border-image:linear-gradient(to left,rgba(255,255,255,0) 0%,rgba(255,255,255,.4) 47%,rgba(255,255,255,.4) 53%,rgba(255,255,255,.4) 100%) 100% 1}:host.horizontal:before,:host.horizontal:after{content:\"\";flex:1;border-bottom:1px solid}:host.horizontal.empty span{display:none}:host.horizontal:not(.empty):before{margin-right:.5em}:host.horizontal:not(.empty):after{margin-left:.5em}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DelimeterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-delimeter', template: `<span>{{label}}</span>`, styles: [":host{padding:.3em 0}:host span{font-size:.8em}:host span,:host-context(.sfc-default-theme) :host span{color:#545e61}:host-context(.sfc-dark-theme) :host span{color:#fff}:host.vertical{display:inline-table;text-align:center;height:100%;min-height:4em;padding:0 .3em}:host.vertical span{position:relative;display:table-cell;vertical-align:middle}:host.vertical span:before,:host.vertical span:after{position:absolute;content:\"\";left:50%;border-left:1px solid;transition:border-image .5s ease}:host.vertical span:before{bottom:50%;top:0;margin-bottom:.8em}:host.vertical span:before,:host-context(.sfc-default-theme) :host.vertical span:before{border-image:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 1 100%}:host-context(.sfc-dark-theme) :host.vertical span:before{border-image:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,.4) 47%,rgba(255,255,255,.4) 53%,rgba(255,255,255,.4) 100%) 1 100%}:host.vertical span:after{top:50%;bottom:0;margin-top:.8em}:host.vertical span:after,:host-context(.sfc-default-theme) :host.vertical span:after{border-image:linear-gradient(to top,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 1 100%}:host-context(.sfc-dark-theme) :host.vertical span:after{border-image:linear-gradient(to top,rgba(255,255,255,0) 0%,rgba(255,255,255,.4) 47%,rgba(255,255,255,.4) 53%,rgba(255,255,255,.4) 100%) 1 100%}:host.vertical.empty{min-height:2em}:host.vertical.empty span:before{margin-bottom:0}:host.vertical.empty span:after{margin-top:0}:host.horizontal{display:flex;align-items:center;text-align:center;-webkit-user-select:none;user-select:none}:host.horizontal:before,:host-context(.sfc-default-theme) :host.horizontal:before{border-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host-context(.sfc-dark-theme) :host.horizontal:before{border-image:linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,.4) 47%,rgba(255,255,255,.4) 53%,rgba(255,255,255,.4) 100%) 100% 1}:host.horizontal:after,:host-context(.sfc-default-theme) :host.horizontal:after{border-image:linear-gradient(to left,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host-context(.sfc-dark-theme) :host.horizontal:after{border-image:linear-gradient(to left,rgba(255,255,255,0) 0%,rgba(255,255,255,.4) 47%,rgba(255,255,255,.4) 53%,rgba(255,255,255,.4) 100%) 100% 1}:host.horizontal:before,:host.horizontal:after{content:\"\";flex:1;border-bottom:1px solid}:host.horizontal.empty span{display:none}:host.horizontal:not(.empty):before{margin-right:.5em}:host.horizontal:not(.empty):after{margin-left:.5em}\n"] }]
+            args: [{ selector: 'sfc-delimeter', template: `<span>{{label}}</span>`, styles: [":host{padding:.3em 0}:host span{transition:color .5s ease;font-size:.8em}:host span,:host-context(.sfc-default-theme) :host span{color:#545e61}:host-context(.sfc-dark-theme) :host span{color:#fff}:host.vertical{display:inline-table;text-align:center;height:100%;min-height:4em;padding:0 .3em}:host.vertical span{position:relative;display:table-cell;vertical-align:middle}:host.vertical span:before,:host.vertical span:after{position:absolute;content:\"\";left:50%;border-left:1px solid;transition:border-image .5s ease}:host.vertical span:before{bottom:50%;top:0;margin-bottom:.8em;transition:border-image .5s ease}:host.vertical span:before,:host-context(.sfc-default-theme) :host.vertical span:before{border-image:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 1 100%}:host-context(.sfc-dark-theme) :host.vertical span:before{border-image:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,.4) 47%,rgba(255,255,255,.4) 53%,rgba(255,255,255,.4) 100%) 1 100%}:host.vertical span:after{top:50%;bottom:0;margin-top:.8em;transition:border-image .5s ease}:host.vertical span:after,:host-context(.sfc-default-theme) :host.vertical span:after{border-image:linear-gradient(to top,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 1 100%}:host-context(.sfc-dark-theme) :host.vertical span:after{border-image:linear-gradient(to top,rgba(255,255,255,0) 0%,rgba(255,255,255,.4) 47%,rgba(255,255,255,.4) 53%,rgba(255,255,255,.4) 100%) 1 100%}:host.vertical.empty{min-height:2em}:host.vertical.empty span:before{margin-bottom:0}:host.vertical.empty span:after{margin-top:0}:host.horizontal{display:flex;align-items:center;text-align:center;-webkit-user-select:none;user-select:none}:host.horizontal:before{transition:border-image .5s ease}:host.horizontal:before,:host-context(.sfc-default-theme) :host.horizontal:before{border-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host-context(.sfc-dark-theme) :host.horizontal:before{border-image:linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,.4) 47%,rgba(255,255,255,.4) 53%,rgba(255,255,255,.4) 100%) 100% 1}:host.horizontal:after{transition:border-image .5s ease}:host.horizontal:after,:host-context(.sfc-default-theme) :host.horizontal:after{border-image:linear-gradient(to left,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host-context(.sfc-dark-theme) :host.horizontal:after{border-image:linear-gradient(to left,rgba(255,255,255,0) 0%,rgba(255,255,255,.4) 47%,rgba(255,255,255,.4) 53%,rgba(255,255,255,.4) 100%) 100% 1}:host.horizontal:before,:host.horizontal:after{content:\"\";flex:1;border-bottom:1px solid}:host.horizontal.empty span{display:none}:host.horizontal:not(.empty):before{margin-right:.5em}:host.horizontal:not(.empty):after{margin-left:.5em}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], direction: [{
@@ -1813,10 +2000,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
 class BounceLoaderComponent extends LoaderBaseComponent {
 }
 BounceLoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BounceLoaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-BounceLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", 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"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] });
+BounceLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", 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{transition:background-color .5s ease;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{transition:background-color .5s ease;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"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", 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}.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"] }]
+            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{transition:background-color .5s ease;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{transition:background-color .5s ease;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;
@@ -1832,10 +2019,10 @@ class CircleLoaderComponent extends LoaderBaseComponent {
     }
 }
 CircleLoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CircleLoaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-CircleLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", 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"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] });
+CircleLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", 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{transition:background-color .5s ease;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%;transition:background-color .5s ease;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"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", 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}.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"] }]
+            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{transition:background-color .5s ease;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%;transition:background-color .5s ease;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
             }] } });
@@ -1849,16 +2036,21 @@ var ModalTemplate;
 
 class ModalService {
     constructor() {
-        this.subjectClose = new Subject();
-        this.subjectOpen = new Subject();
-        this.close$ = this.subjectClose.asObservable();
-        this.open$ = this.subjectOpen.asObservable();
+        this.subject = new BehaviorSubject({ open: false });
+        this.modal$ = this.subject.asObservable();
+    }
+    get isOpen() {
+        return this.subject.value.open;
+    }
+    toggle() {
+        this.subject.next({ open: !this.isOpen });
     }
     close() {
-        this.subjectClose.next();
+        this.subject.next({ open: false });
     }
-    open(options) {
-        this.subjectOpen.next(options);
+    open(args) {
+        this.args = args;
+        this.subject.next({ open: true, args: args });
     }
 }
 ModalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
@@ -1930,10 +2122,10 @@ class DefaultModalHeaderComponent {
     }
 }
 DefaultModalHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DefaultModalHeaderComponent, deps: [{ token: ModalService }], target: i0.ɵɵFactoryTarget.Component });
-DefaultModalHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DefaultModalHeaderComponent, selector: "sfc-default-modal-header", inputs: { model: "model" }, ngImport: i0, template: "<div class=\"container\">\r\n    <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"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "component", type: CloseComponent, selector: "sfc-close" }] });
+DefaultModalHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DefaultModalHeaderComponent, selector: "sfc-default-modal-header", inputs: { model: "model" }, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"content\">\r\n        <fa-icon *ngIf=\"icon\" class=\"icon\" [icon]=\"icon\"></fa-icon>\r\n        <span *ngIf=\"model.text\" class=\"label\">{{model.text}}</span>\r\n        <sfc-close *ngIf=\"model.showCloseIcon\" (click)=\"onClose()\"></sfc-close>\r\n    </div>\r\n\r\n    <sfc-delimeter></sfc-delimeter>\r\n</div>", styles: [":host{display:inline-flex;width:100%}:host .container{width:100%;padding-bottom:.5em}:host .container .content{display:flex;align-items:center;justify-content:center;padding:.5em 0}:host .container .content .icon{position:absolute;left:1.5em;font-size:1.3em}:host .container .content .label{font-size:1.2em;font-weight:700;-webkit-user-select:none;user-select:none;padding:0 .7em}:host .container .content sfc-close{position:absolute;right:1.5em}:host .container ::ng-deep sfc-delimeter.horizontal:before{transition:border-image .5s ease}:host .container ::ng-deep sfc-delimeter.horizontal:before,:host-context(.sfc-default-theme) :host .container ::ng-deep sfc-delimeter.horizontal:before{border-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host-context(.sfc-dark-theme) :host .container ::ng-deep sfc-delimeter.horizontal:before{border-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host .container ::ng-deep sfc-delimeter.horizontal:after{transition:border-image .5s ease}:host .container ::ng-deep sfc-delimeter.horizontal:after,:host-context(.sfc-default-theme) :host .container ::ng-deep sfc-delimeter.horizontal:after{border-image:linear-gradient(to left,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host-context(.sfc-dark-theme) :host .container ::ng-deep sfc-delimeter.horizontal:after{border-image:linear-gradient(to left,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "component", type: DelimeterComponent, selector: "sfc-delimeter", inputs: ["label", "direction"] }, { kind: "component", type: CloseComponent, selector: "sfc-close" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DefaultModalHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-default-modal-header', template: "<div class=\"container\">\r\n    <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"] }]
+            args: [{ selector: 'sfc-default-modal-header', template: "<div class=\"container\">\r\n    <div class=\"content\">\r\n        <fa-icon *ngIf=\"icon\" class=\"icon\" [icon]=\"icon\"></fa-icon>\r\n        <span *ngIf=\"model.text\" class=\"label\">{{model.text}}</span>\r\n        <sfc-close *ngIf=\"model.showCloseIcon\" (click)=\"onClose()\"></sfc-close>\r\n    </div>\r\n\r\n    <sfc-delimeter></sfc-delimeter>\r\n</div>", styles: [":host{display:inline-flex;width:100%}:host .container{width:100%;padding-bottom:.5em}:host .container .content{display:flex;align-items:center;justify-content:center;padding:.5em 0}:host .container .content .icon{position:absolute;left:1.5em;font-size:1.3em}:host .container .content .label{font-size:1.2em;font-weight:700;-webkit-user-select:none;user-select:none;padding:0 .7em}:host .container .content sfc-close{position:absolute;right:1.5em}:host .container ::ng-deep sfc-delimeter.horizontal:before{transition:border-image .5s ease}:host .container ::ng-deep sfc-delimeter.horizontal:before,:host-context(.sfc-default-theme) :host .container ::ng-deep sfc-delimeter.horizontal:before{border-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host-context(.sfc-dark-theme) :host .container ::ng-deep sfc-delimeter.horizontal:before{border-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host .container ::ng-deep sfc-delimeter.horizontal:after{transition:border-image .5s ease}:host .container ::ng-deep sfc-delimeter.horizontal:after,:host-context(.sfc-default-theme) :host .container ::ng-deep sfc-delimeter.horizontal:after{border-image:linear-gradient(to left,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host-context(.sfc-dark-theme) :host .container ::ng-deep sfc-delimeter.horizontal:after{border-image:linear-gradient(to left,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}\n"] }]
         }], ctorParameters: function () { return [{ type: ModalService }]; }, propDecorators: { model: [{
                 type: Input
             }] } });
@@ -1943,36 +2135,48 @@ class DefaultModalFooterComponent {
         this.modalService = modalService;
         this.DEFAULT_MODAL_FOOTER_MODEL = {
             cancelButton: true,
-            applyButton: true
+            applyButton: true,
+            applyButtonText: 'Ok',
+            cancelButtonText: 'Cancel'
         };
         this.BUTTON_CUSTOM_SIZE = 0.9;
         this.ComponentSize = ComponentSize;
         this.ButtonType = ButtonType;
     }
     ngOnInit() {
-        if (!isDefined(this.model)) {
-            this.model = this.DEFAULT_MODAL_FOOTER_MODEL;
+        if (!this.model) {
+            this.model = Object.assign({}, this.DEFAULT_MODAL_FOOTER_MODEL);
+        }
+        else {
+            if (isNullOrEmptyString(this.model.applyButtonText))
+                this.model.applyButtonText = this.DEFAULT_MODAL_FOOTER_MODEL.applyButtonText;
+            if (isNullOrEmptyString(this.model.cancelButtonText))
+                this.model.cancelButtonText = this.DEFAULT_MODAL_FOOTER_MODEL.cancelButtonText;
+            if (!isDefined(this.model.applyButton))
+                this.model.applyButton = this.DEFAULT_MODAL_FOOTER_MODEL.applyButton;
+            if (!isDefined(this.model.cancelButton))
+                this.model.cancelButton = this.DEFAULT_MODAL_FOOTER_MODEL.cancelButton;
         }
     }
     onButtonClick(isCancelButton = false) {
         if (isCancelButton) {
-            if (this.model?.onCancel) {
-                return this.model?.onCancel();
+            if (this.model.onCancel) {
+                return this.model?.onCancel(this.modalService.args);
             }
         }
         else {
-            if (this.model?.onApply) {
-                return this.model?.onApply();
+            if (this.model.onApply) {
+                return this.model.onApply(this.modalService.args);
             }
         }
-        this.modalService.close();
+        this.modalService.toggle();
     }
 }
 DefaultModalFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DefaultModalFooterComponent, deps: [{ token: ModalService }], target: i0.ɵɵFactoryTarget.Component });
-DefaultModalFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", 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"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ComponentSizeDirective, selector: "[sfcComponentSize]", inputs: ["sfcComponentSize", "customSize"] }, { kind: "component", type: ButtonComponent, selector: "sfc-button", inputs: ["text", "iconBefore", "iconAfter", "disabled", "types"] }] });
+DefaultModalFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", 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]=\"model.applyButtonText\"\r\n        [types]=\"[ButtonType.Rounded]\" (click)=\"onButtonClick()\">\r\n    </sfc-button>\r\n    <sfc-button *ngIf=\"model.cancelButton\" [sfcComponentSize] [customSize]=\"BUTTON_CUSTOM_SIZE\" [text]=\"model.cancelButtonText\"\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{min-width:5em}:host .container ::ng-deep sfc-button .button:not(:hover){color:#545e61!important;border-color:#545e61!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ComponentSizeDirective, selector: "[sfcComponentSize]", inputs: ["sfcComponentSize", "customSize"] }, { kind: "component", type: ButtonComponent, selector: "sfc-button", inputs: ["text", "iconBefore", "iconAfter", "disabled", "types"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", 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"] }]
+            args: [{ selector: 'sfc-default-modal-footer', template: "<div class=\"container\">\r\n    <sfc-button *ngIf=\"model.applyButton\" [sfcComponentSize] [customSize]=\"BUTTON_CUSTOM_SIZE\" [text]=\"model.applyButtonText\"\r\n        [types]=\"[ButtonType.Rounded]\" (click)=\"onButtonClick()\">\r\n    </sfc-button>\r\n    <sfc-button *ngIf=\"model.cancelButton\" [sfcComponentSize] [customSize]=\"BUTTON_CUSTOM_SIZE\" [text]=\"model.cancelButtonText\"\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{min-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: [{
                 type: Input
             }] } });
@@ -1984,6 +2188,10 @@ class ModalComponent {
         // End Defaults
         this.hideOnEsc = true;
         this.hideOnClickOutside = true;
+        // hide modal header (even default)
+        this.showHeader = true;
+        // hide modal footer (even default)
+        this.showFooter = true;
     }
     onEscapeKeyDownHandler() {
         if (this.hideOnEsc)
@@ -1994,7 +2202,7 @@ class ModalComponent {
     }
 }
 ModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ModalComponent, deps: [{ token: ModalService }], target: i0.ɵɵFactoryTarget.Component });
-ModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ModalComponent, selector: "sfc-modal", inputs: { body: "body", header: "header", footer: "footer", defaultHeaderModel: "defaultHeaderModel", defaultFooterModel: "defaultFooterModel", hideOnEsc: "hideOnEsc", hideOnClickOutside: "hideOnClickOutside" }, 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;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%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#545e61;flex-direction:row;display:flex;flex:0 0 auto;justify-content:center}.overlay .content>div.body{overflow-y:auto;flex:0}\n"], dependencies: [{ kind: "component", type: TemplateContentComponent, selector: "sfc-template-content", inputs: ["contextData", "referenceContent", "templateType", "templatesContent", "defaultContent"] }, { kind: "component", type: DefaultModalHeaderComponent, selector: "sfc-default-modal-header", inputs: ["model"] }, { kind: "component", type: DefaultModalFooterComponent, selector: "sfc-default-modal-footer", inputs: ["model"] }], animations: [
+ModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ModalComponent, selector: "sfc-modal", inputs: { body: "body", header: "header", footer: "footer", defaultHeaderModel: "defaultHeaderModel", defaultFooterModel: "defaultFooterModel", hideOnEsc: "hideOnEsc", hideOnClickOutside: "hideOnClickOutside", showHeader: "showHeader", showFooter: "showFooter" }, host: { listeners: { "document:keydown.escape": "onEscapeKeyDownHandler()" } }, queries: [{ propertyName: "templates", predicate: TemplateReferenceDirective, read: TemplateReferenceDirective }], ngImport: i0, template: "<div class=\"overlay\" [@hideOverlay] (click)=\"hideOnClickOutside && close()\">\r\n    <div class=\"content\" [@hideContent] (click)=\"$event.stopPropagation()\">\r\n\r\n        <div *ngIf=\"showHeader\" class=\"header\">\r\n\r\n            <sfc-template-content [referenceContent]=\"header\" [templatesContent]=\"templates\"\r\n                [templateType]=\"ModalTemplate.Header\" [defaultContent]=\"defaultHeader\">\r\n            </sfc-template-content>\r\n\r\n            <ng-template #defaultHeader>\r\n                <sfc-default-modal-header [model]=\"defaultHeaderModel\"> </sfc-default-modal-header>\r\n            </ng-template>\r\n\r\n        </div>\r\n\r\n        <div class=\"body\">\r\n\r\n            <sfc-template-content [referenceContent]=\"body\" [templatesContent]=\"templates\"\r\n                [templateType]=\"ModalTemplate.Body\">\r\n            </sfc-template-content>\r\n\r\n        </div>\r\n\r\n        <div *ngIf=\"showFooter\" class=\"footer\">\r\n\r\n            <sfc-template-content [referenceContent]=\"footer\" [templatesContent]=\"templates\"\r\n                [templateType]=\"ModalTemplate.Footer\" [defaultContent]=\"defaultFooter\">\r\n            </sfc-template-content>\r\n\r\n            <ng-template #defaultFooter>\r\n                <sfc-default-modal-footer [model]=\"defaultFooterModel\"></sfc-default-modal-footer>\r\n            </ng-template>\r\n\r\n        </div>\r\n    </div>\r\n</div>", styles: [".overlay{display:flex;align-items:center;justify-content:center;position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;background-color:#0009;-webkit-backface-visibility:visible;backface-visibility:visible;animation:expand-overlay .4s cubic-bezier(.55,0,.1,1)}@keyframes expand-overlay{0%{visibility:hidden;opacity:0}}.overlay .content{display:flex;align-items:center;position:relative;padding:.9em 1.5em;margin:auto;background-color:#f5f7fa;max-width:calc(100% - 3em);max-height:calc(100% - 3em);border-radius:3px;box-shadow:0 .125em .625em #656d78;transform:scale(1);flex-direction:column;animation:expand-modal .4s cubic-bezier(.55,0,.1,1)}@keyframes expand-modal{0%{visibility:hidden;opacity:0;transform:scale(1.2)}}.overlay .content>div{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:#545e61;flex-direction:row;display:flex;flex:0 0 auto;justify-content:center}.overlay .content>div.body{overflow-y:auto;flex:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TemplateContentComponent, selector: "sfc-template-content", inputs: ["contextData", "referenceContent", "templateType", "templatesContent", "defaultContent"] }, { kind: "component", type: DefaultModalHeaderComponent, selector: "sfc-default-modal-header", inputs: ["model"] }, { kind: "component", type: DefaultModalFooterComponent, selector: "sfc-default-modal-footer", inputs: ["model"] }], animations: [
         trigger('hideOverlay', [
             state('initial', style({ opacity: 1, visibility: 'visible' })),
             state('void', style({ opacity: 0, visibility: 'hidden' })),
@@ -2039,7 +2247,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                             state('void', style({ opacity: 0, visibility: 'hidden', transform: 'scale(1.2)' })),
                             transition('* => void', animate('400ms cubic-bezier(.55, 0, .1, 1)'))
                         ])
-                    ], template: "<div class=\"overlay\" [@hideOverlay] (click)=\"hideOnClickOutside && close()\">\r\n    <div class=\"content\" [@hideContent] (click)=\"$event.stopPropagation()\">\r\n\r\n        <div 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;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%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#545e61;flex-direction:row;display:flex;flex:0 0 auto;justify-content:center}.overlay .content>div.body{overflow-y:auto;flex:0}\n"] }]
+                    ], template: "<div class=\"overlay\" [@hideOverlay] (click)=\"hideOnClickOutside && close()\">\r\n    <div class=\"content\" [@hideContent] (click)=\"$event.stopPropagation()\">\r\n\r\n        <div *ngIf=\"showHeader\" class=\"header\">\r\n\r\n            <sfc-template-content [referenceContent]=\"header\" [templatesContent]=\"templates\"\r\n                [templateType]=\"ModalTemplate.Header\" [defaultContent]=\"defaultHeader\">\r\n            </sfc-template-content>\r\n\r\n            <ng-template #defaultHeader>\r\n                <sfc-default-modal-header [model]=\"defaultHeaderModel\"> </sfc-default-modal-header>\r\n            </ng-template>\r\n\r\n        </div>\r\n\r\n        <div class=\"body\">\r\n\r\n            <sfc-template-content [referenceContent]=\"body\" [templatesContent]=\"templates\"\r\n                [templateType]=\"ModalTemplate.Body\">\r\n            </sfc-template-content>\r\n\r\n        </div>\r\n\r\n        <div *ngIf=\"showFooter\" class=\"footer\">\r\n\r\n            <sfc-template-content [referenceContent]=\"footer\" [templatesContent]=\"templates\"\r\n                [templateType]=\"ModalTemplate.Footer\" [defaultContent]=\"defaultFooter\">\r\n            </sfc-template-content>\r\n\r\n            <ng-template #defaultFooter>\r\n                <sfc-default-modal-footer [model]=\"defaultFooterModel\"></sfc-default-modal-footer>\r\n            </ng-template>\r\n\r\n        </div>\r\n    </div>\r\n</div>", styles: [".overlay{display:flex;align-items:center;justify-content:center;position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;background-color:#0009;-webkit-backface-visibility:visible;backface-visibility:visible;animation:expand-overlay .4s cubic-bezier(.55,0,.1,1)}@keyframes expand-overlay{0%{visibility:hidden;opacity:0}}.overlay .content{display:flex;align-items:center;position:relative;padding:.9em 1.5em;margin:auto;background-color:#f5f7fa;max-width:calc(100% - 3em);max-height:calc(100% - 3em);border-radius:3px;box-shadow:0 .125em .625em #656d78;transform:scale(1);flex-direction:column;animation:expand-modal .4s cubic-bezier(.55,0,.1,1)}@keyframes expand-modal{0%{visibility:hidden;opacity:0;transform:scale(1.2)}}.overlay .content>div{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:#545e61;flex-direction:row;display:flex;flex:0 0 auto;justify-content:center}.overlay .content>div.body{overflow-y:auto;flex:0}\n"] }]
         }], ctorParameters: function () { return [{ type: ModalService }]; }, propDecorators: { body: [{
                 type: Input
             }], header: [{
@@ -2054,6 +2262,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Input
             }], hideOnClickOutside: [{
                 type: Input
+            }], showHeader: [{
+                type: Input
+            }], showFooter: [{
+                type: Input
             }], onEscapeKeyDownHandler: [{
                 type: HostListener,
                 args: ['document:keydown.escape']
@@ -2067,10 +2279,10 @@ class ModalOpenOnClickDirective {
         this.templateRef = templateRef;
         this.viewContainer = viewContainer;
         this.modalService = modalService;
-        this.clickHandler = ((event) => {
+        this.clickHandler = (() => {
             this.viewContainer.clear();
             this.viewContainer.createEmbeddedView(this.templateRef);
-            this.modalService.open(event.currentTarget);
+            this.modalService.toggle();
         }).bind(this);
         this.elements = [];
     }
@@ -2086,7 +2298,8 @@ class ModalOpenOnClickDirective {
         });
     }
     ngOnInit() {
-        this._closeSubscription = this.modalService.close$
+        this._closeSubscription = this.modalService.modal$
+            .pipe(filter((event) => !event.open))
             .subscribe(() => this.viewContainer.clear());
     }
     ngOnDestroy() {
@@ -2111,15 +2324,14 @@ class ModalOpenDirective {
         this.templateRef = templateRef;
         this.viewContainer = viewContainer;
         this.modalService = modalService;
-        this._closeSubscription = this.modalService.close$.subscribe(() => this.viewContainer.clear());
-        this._openSubscription = this.modalService.open$
-            .subscribe(() => {
+        this._openSubscription = this.modalService.modal$
+            .subscribe((event) => {
             this.viewContainer.clear();
-            this.viewContainer.createEmbeddedView(this.templateRef);
+            if (event.open)
+                this.viewContainer.createEmbeddedView(this.templateRef);
         });
     }
     ngOnDestroy() {
-        this._closeSubscription.unsubscribe();
         this._openSubscription.unsubscribe();
     }
 }
@@ -2168,10 +2380,10 @@ class HamburgerMenuComponent extends HamburgerBaseComponent {
     }
 }
 HamburgerMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: HamburgerMenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-HamburgerMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: HamburgerMenuComponent, selector: "sfc-hamburger-menu", inputs: { label: "label" }, usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\r\n    <span> &nbsp;</span>\r\n    <span> &nbsp;</span>\r\n    <span> &nbsp;</span>\r\n    <span> &nbsp;</span>\r\n    <span class=\"text\">{{label}}</span>\r\n</div>", styles: [":host .container{display:inline-block;cursor:pointer}:host .container span{position:relative;transition:background .5s ease;display:block;height:.125em;margin-bottom:.1875em}:host .container span,:host-context(.sfc-default-theme) :host .container span{background:#545e61}:host-context(.sfc-dark-theme) :host .container span{background:#fff}:host .container span.text{font-size:.4375em;letter-spacing:.4px;transition:opacity 1s ease-in-out,color .5s ease;background:none!important;opacity:1;text-transform:uppercase}:host .container span.text,:host-context(.sfc-default-theme) :host .container span.text{color:#545e61}:host-context(.sfc-dark-theme) :host .container span.text{color:#fff}:host .container:hover span{background:#ffce54}:host .container:hover span.text{color:#ffce54}:host.open .container span:nth-child(1){transform:rotate(-45deg);top:.625em}:host.open .container span:nth-child(2),:host.open .container span:nth-child(3){width:0;opacity:0}:host.open .container span:nth-child(4){transform:rotate(45deg);top:-.3125em}:host.open .container span.text{opacity:0}\n"] });
+HamburgerMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: HamburgerMenuComponent, selector: "sfc-hamburger-menu", inputs: { label: "label" }, usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\r\n    <span> &nbsp;</span>\r\n    <span> &nbsp;</span>\r\n    <span> &nbsp;</span>\r\n    <span> &nbsp;</span>\r\n    <span class=\"text\">{{label}}</span>\r\n</div>", styles: [":host .container{display:inline-block;cursor:pointer}:host .container span{position:relative;transition:background .5s ease;display:block;height:.125em;margin-bottom:.1875em}:host .container span,:host-context(.sfc-default-theme) :host .container span{background:#545e61}:host-context(.sfc-dark-theme) :host .container span{background:#fff}:host .container span.text{transition:color .5s ease;font-size:.4375em;letter-spacing:.4px;transition:opacity 1s ease-in-out,color .5s ease;background:none!important;opacity:1;text-transform:uppercase}:host .container span.text,:host-context(.sfc-default-theme) :host .container span.text{color:#545e61}:host-context(.sfc-dark-theme) :host .container span.text{color:#fff}:host .container:hover span{background:#ffce54}:host .container:hover span.text{color:#ffce54}:host.open .container span:nth-child(1){transform:rotate(-45deg);top:.625em}:host.open .container span:nth-child(2),:host.open .container span:nth-child(3){width:0;opacity:0}:host.open .container span:nth-child(4){transform:rotate(45deg);top:-.3125em}:host.open .container span.text{opacity:0}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: HamburgerMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-hamburger-menu', template: "<div class=\"container\">\r\n    <span> &nbsp;</span>\r\n    <span> &nbsp;</span>\r\n    <span> &nbsp;</span>\r\n    <span> &nbsp;</span>\r\n    <span class=\"text\">{{label}}</span>\r\n</div>", styles: [":host .container{display:inline-block;cursor:pointer}:host .container span{position:relative;transition:background .5s ease;display:block;height:.125em;margin-bottom:.1875em}:host .container span,:host-context(.sfc-default-theme) :host .container span{background:#545e61}:host-context(.sfc-dark-theme) :host .container span{background:#fff}:host .container span.text{font-size:.4375em;letter-spacing:.4px;transition:opacity 1s ease-in-out,color .5s ease;background:none!important;opacity:1;text-transform:uppercase}:host .container span.text,:host-context(.sfc-default-theme) :host .container span.text{color:#545e61}:host-context(.sfc-dark-theme) :host .container span.text{color:#fff}:host .container:hover span{background:#ffce54}:host .container:hover span.text{color:#ffce54}:host.open .container span:nth-child(1){transform:rotate(-45deg);top:.625em}:host.open .container span:nth-child(2),:host.open .container span:nth-child(3){width:0;opacity:0}:host.open .container span:nth-child(4){transform:rotate(45deg);top:-.3125em}:host.open .container span.text{opacity:0}\n"] }]
+            args: [{ selector: 'sfc-hamburger-menu', template: "<div class=\"container\">\r\n    <span> &nbsp;</span>\r\n    <span> &nbsp;</span>\r\n    <span> &nbsp;</span>\r\n    <span> &nbsp;</span>\r\n    <span class=\"text\">{{label}}</span>\r\n</div>", styles: [":host .container{display:inline-block;cursor:pointer}:host .container span{position:relative;transition:background .5s ease;display:block;height:.125em;margin-bottom:.1875em}:host .container span,:host-context(.sfc-default-theme) :host .container span{background:#545e61}:host-context(.sfc-dark-theme) :host .container span{background:#fff}:host .container span.text{transition:color .5s ease;font-size:.4375em;letter-spacing:.4px;transition:opacity 1s ease-in-out,color .5s ease;background:none!important;opacity:1;text-transform:uppercase}:host .container span.text,:host-context(.sfc-default-theme) :host .container span.text{color:#545e61}:host-context(.sfc-dark-theme) :host .container span.text{color:#fff}:host .container:hover span{background:#ffce54}:host .container:hover span.text{color:#ffce54}:host.open .container span:nth-child(1){transform:rotate(-45deg);top:.625em}:host.open .container span:nth-child(2),:host.open .container span:nth-child(3){width:0;opacity:0}:host.open .container span:nth-child(4){transform:rotate(45deg);top:-.3125em}:host.open .container span.text{opacity:0}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }] } });
@@ -2184,10 +2396,10 @@ class DotsComponent {
     }
 }
 DotsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DotsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DotsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", 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:#fff}: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:#ffce54}:host-context(.sfc-dark-theme) :host:hover .container .dots-container .dot,:host-context(.sfc-dark-theme) :host:focus .container .dots-container .dot{background:#ffce54}\n"] });
+DotsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", 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 .5s ease;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:#fff}:host:hover .container,:host:focus .container{outline:none}:host:hover .container .dots-container .dot,:host:focus .container .dots-container .dot{transition:background .5s ease}: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:#ffce54}:host-context(.sfc-dark-theme) :host:hover .container .dots-container .dot,:host-context(.sfc-dark-theme) :host:focus .container .dots-container .dot{background:#ffce54}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", 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(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:#fff}: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:#ffce54}:host-context(.sfc-dark-theme) :host:hover .container .dots-container .dot,:host-context(.sfc-dark-theme) :host:focus .container .dots-container .dot{background:#ffce54}\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 .5s ease;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:#fff}:host:hover .container,:host:focus .container{outline:none}:host:hover .container .dots-container .dot,:host:focus .container .dots-container .dot{transition:background .5s ease}: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:#ffce54}:host-context(.sfc-dark-theme) :host:hover .container .dots-container .dot,:host-context(.sfc-dark-theme) :host:focus .container .dots-container .dot{background:#ffce54}\n"] }]
         }], propDecorators: { open: [{
                 type: Input
             }, {
@@ -2213,10 +2425,10 @@ class ToggleSwitcherComponent {
     }
 }
 ToggleSwitcherComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ToggleSwitcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ToggleSwitcherComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ToggleSwitcherComponent, selector: "sfc-toggle-switcher", inputs: { active: "active", disabled: "disabled", leftModel: "leftModel", rightModel: "rightModel" }, host: { listeners: { "click": "onClick()" }, properties: { "class.active": "this.active", "class.disabled": "this.disabled" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"toggle\"></div>\r\n    <div class=\"names\">\r\n        <p class=\"left\">\r\n            <fa-icon *ngIf=\"leftModel.icon\" [icon]=\"leftModel.icon\"></fa-icon>\r\n            <span>{{leftModel.label}}</span>\r\n        </p>\r\n        <p class=\"right\">\r\n            <fa-icon *ngIf=\"rightModel.icon\" [icon]=\"rightModel.icon\"></fa-icon>\r\n            <span>{{rightModel.label}}</span>\r\n        </p>\r\n    </div>\r\n</div>", styles: [":host .container,:host .toggle{height:100%;border-radius:100px}:host .container{width:100%;background-color:#e6e9ed;color:#545e61;border-radius:100px;position:relative;cursor:pointer}:host .container .toggle{position:absolute;width:50%;background-color:#fff;box-shadow:0 .125em .5em #656d78;transition:transform .3s cubic-bezier(.25,.46,.45,.94)}:host .container .names{font-size:90%;font-weight:bolder;width:100%;height:100%;position:relative;display:flex;justify-content:space-around;align-items:center;-webkit-user-select:none;user-select:none;overflow:hidden}:host .container .names p{font-size:90%;text-align:center;margin:0;padding:.5em 1em}:host .container .names p.right{opacity:.5}:host .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}:host.disabled{pointer-events:none}:host.disabled .container,:host-context(.sfc-default-theme) :host.disabled .container{background-color:#f6f6f6}:host-context(.sfc-dark-theme) :host.disabled .container{background-color:#656d78}:host.disabled .container .toggle{box-shadow:none}:host.disabled .container .toggle,:host-context(.sfc-default-theme) :host.disabled .container .toggle{background-color:#e6e9ed}:host-context(.sfc-dark-theme) :host.disabled .container .toggle{background-color:#aab2bd}:host.disabled .container .names,:host-context(.sfc-default-theme) :host.disabled .container .names{color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .container .names{color:#e9e9e9}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
+ToggleSwitcherComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ToggleSwitcherComponent, selector: "sfc-toggle-switcher", inputs: { active: "active", disabled: "disabled", leftModel: "leftModel", rightModel: "rightModel" }, host: { listeners: { "click": "onClick()" }, properties: { "class.active": "this.active", "class.disabled": "this.disabled" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"toggle\"></div>\r\n    <div class=\"names\">\r\n        <p class=\"left\">\r\n            <fa-icon *ngIf=\"leftModel.icon\" [icon]=\"leftModel.icon\"></fa-icon>\r\n            <span>{{leftModel.label}}</span>\r\n        </p>\r\n        <p class=\"right\">\r\n            <fa-icon *ngIf=\"rightModel.icon\" [icon]=\"rightModel.icon\"></fa-icon>\r\n            <span>{{rightModel.label}}</span>\r\n        </p>\r\n    </div>\r\n</div>", styles: [":host .container,:host .toggle{height:100%;border-radius:100px}:host .container{width:100%;background-color:#e6e9ed;color:#545e61;border-radius:100px;position:relative;cursor:pointer}:host .container .toggle{position:absolute;width:50%;background-color:#fff;box-shadow:0 .125em .5em #656d78;transition:transform .3s cubic-bezier(.25,.46,.45,.94)}:host .container .names{font-size:90%;font-weight:bolder;width:100%;height:100%;position:relative;display:flex;justify-content:space-around;align-items:center;-webkit-user-select:none;user-select:none;overflow:hidden}:host .container .names p{font-size:90%;text-align:center;margin:0;padding:.5em 1em}:host .container .names p.right{opacity:.5}:host.active .container{background-color:#e6e9ed}:host.active .container .toggle{transform:translate(100%);background-color:#fff}:host.active .container .names{color:#545e61}:host.active .container .names .left{opacity:.5}:host.active .container .names .right{opacity:1}:host.disabled{pointer-events:none}:host.disabled .container{transition:background-color .5s ease}:host.disabled .container,:host-context(.sfc-default-theme) :host.disabled .container{background-color:#f6f6f6}:host-context(.sfc-dark-theme) :host.disabled .container{background-color:#656d78}:host.disabled .container .toggle{transition:background-color .5s ease;box-shadow:none}:host.disabled .container .toggle,:host-context(.sfc-default-theme) :host.disabled .container .toggle{background-color:#e6e9ed}:host-context(.sfc-dark-theme) :host.disabled .container .toggle{background-color:#aab2bd}:host.disabled .container .names{transition:color .5s ease}:host.disabled .container .names,:host-context(.sfc-default-theme) :host.disabled .container .names{color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .container .names{color:#e9e9e9}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ToggleSwitcherComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-toggle-switcher', template: "<div class=\"container\">\r\n    <div class=\"toggle\"></div>\r\n    <div class=\"names\">\r\n        <p class=\"left\">\r\n            <fa-icon *ngIf=\"leftModel.icon\" [icon]=\"leftModel.icon\"></fa-icon>\r\n            <span>{{leftModel.label}}</span>\r\n        </p>\r\n        <p class=\"right\">\r\n            <fa-icon *ngIf=\"rightModel.icon\" [icon]=\"rightModel.icon\"></fa-icon>\r\n            <span>{{rightModel.label}}</span>\r\n        </p>\r\n    </div>\r\n</div>", styles: [":host .container,:host .toggle{height:100%;border-radius:100px}:host .container{width:100%;background-color:#e6e9ed;color:#545e61;border-radius:100px;position:relative;cursor:pointer}:host .container .toggle{position:absolute;width:50%;background-color:#fff;box-shadow:0 .125em .5em #656d78;transition:transform .3s cubic-bezier(.25,.46,.45,.94)}:host .container .names{font-size:90%;font-weight:bolder;width:100%;height:100%;position:relative;display:flex;justify-content:space-around;align-items:center;-webkit-user-select:none;user-select:none;overflow:hidden}:host .container .names p{font-size:90%;text-align:center;margin:0;padding:.5em 1em}:host .container .names p.right{opacity:.5}:host .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}:host.disabled{pointer-events:none}:host.disabled .container,:host-context(.sfc-default-theme) :host.disabled .container{background-color:#f6f6f6}:host-context(.sfc-dark-theme) :host.disabled .container{background-color:#656d78}:host.disabled .container .toggle{box-shadow:none}:host.disabled .container .toggle,:host-context(.sfc-default-theme) :host.disabled .container .toggle{background-color:#e6e9ed}:host-context(.sfc-dark-theme) :host.disabled .container .toggle{background-color:#aab2bd}:host.disabled .container .names,:host-context(.sfc-default-theme) :host.disabled .container .names{color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .container .names{color:#e9e9e9}\n"] }]
+            args: [{ selector: 'sfc-toggle-switcher', template: "<div class=\"container\">\r\n    <div class=\"toggle\"></div>\r\n    <div class=\"names\">\r\n        <p class=\"left\">\r\n            <fa-icon *ngIf=\"leftModel.icon\" [icon]=\"leftModel.icon\"></fa-icon>\r\n            <span>{{leftModel.label}}</span>\r\n        </p>\r\n        <p class=\"right\">\r\n            <fa-icon *ngIf=\"rightModel.icon\" [icon]=\"rightModel.icon\"></fa-icon>\r\n            <span>{{rightModel.label}}</span>\r\n        </p>\r\n    </div>\r\n</div>", styles: [":host .container,:host .toggle{height:100%;border-radius:100px}:host .container{width:100%;background-color:#e6e9ed;color:#545e61;border-radius:100px;position:relative;cursor:pointer}:host .container .toggle{position:absolute;width:50%;background-color:#fff;box-shadow:0 .125em .5em #656d78;transition:transform .3s cubic-bezier(.25,.46,.45,.94)}:host .container .names{font-size:90%;font-weight:bolder;width:100%;height:100%;position:relative;display:flex;justify-content:space-around;align-items:center;-webkit-user-select:none;user-select:none;overflow:hidden}:host .container .names p{font-size:90%;text-align:center;margin:0;padding:.5em 1em}:host .container .names p.right{opacity:.5}:host.active .container{background-color:#e6e9ed}:host.active .container .toggle{transform:translate(100%);background-color:#fff}:host.active .container .names{color:#545e61}:host.active .container .names .left{opacity:.5}:host.active .container .names .right{opacity:1}:host.disabled{pointer-events:none}:host.disabled .container{transition:background-color .5s ease}:host.disabled .container,:host-context(.sfc-default-theme) :host.disabled .container{background-color:#f6f6f6}:host-context(.sfc-dark-theme) :host.disabled .container{background-color:#656d78}:host.disabled .container .toggle{transition:background-color .5s ease;box-shadow:none}:host.disabled .container .toggle,:host-context(.sfc-default-theme) :host.disabled .container .toggle{background-color:#e6e9ed}:host-context(.sfc-dark-theme) :host.disabled .container .toggle{background-color:#aab2bd}:host.disabled .container .names{transition:color .5s ease}:host.disabled .container .names,:host-context(.sfc-default-theme) :host.disabled .container .names{color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .container .names{color:#e9e9e9}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { active: [{
                 type: Input
             }, {
@@ -2249,14 +2461,13 @@ class CheckmarkComponent {
         this.disabled = false;
         this.icon = faCheck;
         this.type = CheckmarkType.Rounded;
-        this.showNotActive = true;
     }
 }
 CheckmarkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CheckmarkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CheckmarkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: CheckmarkComponent, selector: "sfc-checkmark", inputs: { active: "active", disabled: "disabled", icon: "icon", type: "type", showNotActive: "showNotActive" }, host: { properties: { "class.active": "this.active", "class.disabled": "this.disabled", "class": "this.type" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <span class=\"check\">\r\n        <fa-icon [sfcShowHideElement]=\"showNotActive || active\" [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:#fff}:host .check{border:.125em solid;background:transparent;transition:border-color .5s ease;width:1em;height:1em;cursor:pointer;display:flex;align-items:center;justify-content:center}:host .check,:host-context(.sfc-default-theme) :host .check{border-color:#545e61}:host-context(.sfc-dark-theme) :host .check{border-color:#fff}:host .check fa-icon{font-size:.8em;transition:opacity .3s ease}:host .check fa-icon,:host-context(.sfc-default-theme) :host .check fa-icon{opacity:.5}:host-context(.sfc-dark-theme) :host .check fa-icon{opacity:.8}:host .check:hover{border-color:#ffce54}:host .check:hover fa-icon{color:#ffce54}:host .check:hover fa-icon,:host-context(.sfc-default-theme) :host .check:hover fa-icon{opacity:.8}:host-context(.sfc-dark-theme) :host .check:hover fa-icon{opacity:1}:host.active .check{border-color:#ffce54;background:#ffce54}:host.active .check fa-icon{opacity:1;transform:scale(0);color:#fff;-webkit-text-stroke:0;animation:icon .3s cubic-bezier(1,.008,.565,1.65) .1s 1 forwards}@keyframes icon{0%{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}:host.circle .check{border-radius:50%}:host.rounded .check{border-radius:15%}:host.disabled{pointer-events:none}:host.disabled .check{color:#fff;border-style:dashed}:host.disabled .check,:host-context(.sfc-default-theme) :host.disabled .check{border-color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .check{border-color:#656d78}:host.disabled.active .check,:host-context(.sfc-default-theme) :host.disabled.active .check{background:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled.active .check{background:#656d78}\n"], dependencies: [{ kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: ShowHideElementDirective, selector: "[sfcShowHideElement]", inputs: ["sfcShowHideElement", "delay"] }] });
+CheckmarkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: CheckmarkComponent, selector: "sfc-checkmark", inputs: { active: "active", disabled: "disabled", icon: "icon", type: "type" }, host: { properties: { "class.active": "this.active", "class.disabled": "this.disabled", "class": "this.type" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <span class=\"check\">\r\n        <fa-icon [sfcShowHideElement]=\"active\" [icon]=\"icon\"></fa-icon>\r\n    </span>\r\n</div>", styles: [":host{display:inline-block;transition:color .5s ease}:host,:host-context(.sfc-default-theme) :host{color:#545e61}:host-context(.sfc-dark-theme) :host{color:#fff}:host .check{border:.125em solid;background:transparent;transition:border-color .5s ease,background .5s ease;transition:border-color .5s ease;width:1em;height:1em;cursor:pointer;display:flex;align-items:center;justify-content:center}:host .check,:host-context(.sfc-default-theme) :host .check{border-color:#545e61}:host-context(.sfc-dark-theme) :host .check{border-color:#fff}:host .check fa-icon{transition:opacity .5s ease;font-size:.8em;transition:opacity .3s ease}:host .check fa-icon,:host-context(.sfc-default-theme) :host .check fa-icon{opacity:.5}:host-context(.sfc-dark-theme) :host .check fa-icon{opacity:.8}:host .check:hover{border-color:#ffce54}:host .check:hover fa-icon{transition:opacity .5s ease;color:#ffce54}:host .check:hover fa-icon,:host-context(.sfc-default-theme) :host .check:hover fa-icon{opacity:.8}:host-context(.sfc-dark-theme) :host .check:hover fa-icon{opacity:1}:host.active .check{border-color:#ffce54;background:#ffce54}:host.active .check fa-icon{opacity:1;transform:scale(0);color:#fff;-webkit-text-stroke:0;animation:icon .3s cubic-bezier(1,.008,.565,1.65) .1s 1 forwards}@keyframes icon{0%{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}:host.circle .check{border-radius:50%}:host.rounded .check{border-radius:15%}:host.disabled{pointer-events:none}:host.disabled .check{color:#fff;border-style:dashed;transition:border-color .5s ease}:host.disabled .check,:host-context(.sfc-default-theme) :host.disabled .check{border-color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .check{border-color:#656d78}:host.disabled.active .check{transition:background .5s ease}:host.disabled.active .check,:host-context(.sfc-default-theme) :host.disabled.active .check{background:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled.active .check{background:#656d78}\n"], dependencies: [{ kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: ShowHideElementDirective, selector: "[sfcShowHideElement]", inputs: ["sfcShowHideElement", "delay"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CheckmarkComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-checkmark', template: "<div class=\"container\">\r\n    <span class=\"check\">\r\n        <fa-icon [sfcShowHideElement]=\"showNotActive || active\" [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:#fff}:host .check{border:.125em solid;background:transparent;transition:border-color .5s ease;width:1em;height:1em;cursor:pointer;display:flex;align-items:center;justify-content:center}:host .check,:host-context(.sfc-default-theme) :host .check{border-color:#545e61}:host-context(.sfc-dark-theme) :host .check{border-color:#fff}:host .check fa-icon{font-size:.8em;transition:opacity .3s ease}:host .check fa-icon,:host-context(.sfc-default-theme) :host .check fa-icon{opacity:.5}:host-context(.sfc-dark-theme) :host .check fa-icon{opacity:.8}:host .check:hover{border-color:#ffce54}:host .check:hover fa-icon{color:#ffce54}:host .check:hover fa-icon,:host-context(.sfc-default-theme) :host .check:hover fa-icon{opacity:.8}:host-context(.sfc-dark-theme) :host .check:hover fa-icon{opacity:1}:host.active .check{border-color:#ffce54;background:#ffce54}:host.active .check fa-icon{opacity:1;transform:scale(0);color:#fff;-webkit-text-stroke:0;animation:icon .3s cubic-bezier(1,.008,.565,1.65) .1s 1 forwards}@keyframes icon{0%{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}:host.circle .check{border-radius:50%}:host.rounded .check{border-radius:15%}:host.disabled{pointer-events:none}:host.disabled .check{color:#fff;border-style:dashed}:host.disabled .check,:host-context(.sfc-default-theme) :host.disabled .check{border-color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .check{border-color:#656d78}:host.disabled.active .check,:host-context(.sfc-default-theme) :host.disabled.active .check{background:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled.active .check{background:#656d78}\n"] }]
+            args: [{ selector: 'sfc-checkmark', template: "<div class=\"container\">\r\n    <span class=\"check\">\r\n        <fa-icon [sfcShowHideElement]=\"active\" [icon]=\"icon\"></fa-icon>\r\n    </span>\r\n</div>", styles: [":host{display:inline-block;transition:color .5s ease}:host,:host-context(.sfc-default-theme) :host{color:#545e61}:host-context(.sfc-dark-theme) :host{color:#fff}:host .check{border:.125em solid;background:transparent;transition:border-color .5s ease,background .5s ease;transition:border-color .5s ease;width:1em;height:1em;cursor:pointer;display:flex;align-items:center;justify-content:center}:host .check,:host-context(.sfc-default-theme) :host .check{border-color:#545e61}:host-context(.sfc-dark-theme) :host .check{border-color:#fff}:host .check fa-icon{transition:opacity .5s ease;font-size:.8em;transition:opacity .3s ease}:host .check fa-icon,:host-context(.sfc-default-theme) :host .check fa-icon{opacity:.5}:host-context(.sfc-dark-theme) :host .check fa-icon{opacity:.8}:host .check:hover{border-color:#ffce54}:host .check:hover fa-icon{transition:opacity .5s ease;color:#ffce54}:host .check:hover fa-icon,:host-context(.sfc-default-theme) :host .check:hover fa-icon{opacity:.8}:host-context(.sfc-dark-theme) :host .check:hover fa-icon{opacity:1}:host.active .check{border-color:#ffce54;background:#ffce54}:host.active .check fa-icon{opacity:1;transform:scale(0);color:#fff;-webkit-text-stroke:0;animation:icon .3s cubic-bezier(1,.008,.565,1.65) .1s 1 forwards}@keyframes icon{0%{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}:host.circle .check{border-radius:50%}:host.rounded .check{border-radius:15%}:host.disabled{pointer-events:none}:host.disabled .check{color:#fff;border-style:dashed;transition:border-color .5s ease}:host.disabled .check,:host-context(.sfc-default-theme) :host.disabled .check{border-color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .check{border-color:#656d78}:host.disabled.active .check{transition:background .5s ease}:host.disabled.active .check,:host-context(.sfc-default-theme) :host.disabled.active .check{background:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled.active .check{background:#656d78}\n"] }]
         }], propDecorators: { active: [{
                 type: Input
             }, {
@@ -2274,8 +2485,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             }, {
                 type: HostBinding,
                 args: ['class']
-            }], showNotActive: [{
-                type: Input
             }] } });
 
 class PaginationConstants {
@@ -2405,10 +2614,10 @@ class PaginationComponent {
     }
 }
 PaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PaginationComponent, deps: [{ token: PaginationService }], target: i0.ɵɵFactoryTarget.Component });
-PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: PaginationComponent, selector: "sfc-pagination", inputs: { count: "count", full: "full", limits: "limits", data$: "data$" }, ngImport: i0, template: "<div class=\"container\" *ngIf=\"vm$ | async as vm\">\r\n    <sfc-delimeter></sfc-delimeter>\r\n    <ul *ngIf=\"vm.any\">\r\n        <li [sfcShowHideElement]=\"vm.previousPage\" (click)=\"onPageClick(vm.previous)\">\r\n            <button class=\"limit\">\r\n                <fa-icon [icon]=\"faChevronLeft\"></fa-icon>\r\n            </button>\r\n        </li>\r\n        <li *ngIf=\"vm.firstPage\" (click)=\"onPageClick(1)\">\r\n            <button>1</button>\r\n        </li>\r\n        <li *ngIf=\"vm.firstPage\">\r\n            <span>...</span>\r\n        </li>\r\n        <li *ngFor=\"let page of vm.range\" (click)=\"onPageClick(page)\">\r\n            <button [class.active]=\"vm.page === page\">{{page}}</button>\r\n        </li>\r\n        <li *ngIf=\"vm.lastPage\">\r\n            <span>...</span>\r\n        </li>\r\n        <li *ngIf=\"vm.lastPage\" (click)=\"onPageClick(vm.total)\">\r\n            <button>{{vm.total}}</button>\r\n        </li>\r\n        <li [sfcShowHideElement]=\"vm.nextPage\" (click)=\"onPageClick(vm.next)\">\r\n            <button class=\"limit\">\r\n                <fa-icon [icon]=\"faChevronRight\"></fa-icon>\r\n            </button>\r\n        </li>\r\n    </ul>\r\n    <sfc-delimeter></sfc-delimeter>\r\n</div>", styles: [":host{width:100%;display:inline-block}:host .container{position:relative;text-align:center}:host .container ul{list-style:none;margin:0;padding:0;display:flex;justify-content:center;-webkit-user-select:none;user-select:none}:host .container ul li{display:block;float:left;padding:.31em}:host .container ul li:first-child{border:none}:host .container ul li button,:host .container ul li span{background:none;border:none;border-radius:50%;box-sizing:border-box;display:block;font-size:1em;height:2.5em;min-width:2.5em;line-height:2.5em;padding:0}:host .container ul li button,:host-context(.sfc-default-theme) :host .container ul li button,:host .container ul li span,:host-context(.sfc-default-theme) :host .container ul li span{color:#0009}:host-context(.sfc-dark-theme) :host .container ul li button,:host-context(.sfc-dark-theme) :host .container ul li span{color:#fff}:host .container ul li button{outline:none;position:relative;transition:all .17s linear}:host .container ul li button,:host-context(.sfc-default-theme) :host .container ul li button{color:#545e61}:host-context(.sfc-dark-theme) :host .container ul li button{color:#fff}:host .container ul li button:before{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:#fff}:host .container ul li button:hover:not(.active):before{animation:hover-animation .51s linear forwards;width:2.5em;height:2.5em}:host .container ul li button.active{color:#545e61!important}:host .container ul li button.active,:host-context(.sfc-default-theme) :host .container ul li button.active{background:rgba(0,0,0,.1019607843)}:host-context(.sfc-dark-theme) :host .container ul li button.active{background:#f5f7fa}@keyframes hover-animation{0%{opacity:1}to{opacity:0}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: ShowHideElementDirective, selector: "[sfcShowHideElement]", inputs: ["sfcShowHideElement", "delay"] }, { kind: "component", type: DelimeterComponent, selector: "sfc-delimeter", inputs: ["label", "direction"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] });
+PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: PaginationComponent, selector: "sfc-pagination", inputs: { count: "count", full: "full", limits: "limits", data$: "data$" }, ngImport: i0, template: "<div class=\"container\" *ngIf=\"vm$ | async as vm\">\r\n    <sfc-delimeter></sfc-delimeter>\r\n    <ul *ngIf=\"vm.any\">\r\n        <li [sfcShowHideElement]=\"vm.previousPage\" (click)=\"onPageClick(vm.previous)\">\r\n            <button class=\"limit\">\r\n                <fa-icon [icon]=\"faChevronLeft\"></fa-icon>\r\n            </button>\r\n        </li>\r\n        <li *ngIf=\"vm.firstPage\" (click)=\"onPageClick(1)\">\r\n            <button>1</button>\r\n        </li>\r\n        <li *ngIf=\"vm.firstPage\">\r\n            <span>...</span>\r\n        </li>\r\n        <li *ngFor=\"let page of vm.range\" (click)=\"onPageClick(page)\">\r\n            <button [class.active]=\"vm.page === page\">{{page}}</button>\r\n        </li>\r\n        <li *ngIf=\"vm.lastPage\">\r\n            <span>...</span>\r\n        </li>\r\n        <li *ngIf=\"vm.lastPage\" (click)=\"onPageClick(vm.total)\">\r\n            <button>{{vm.total}}</button>\r\n        </li>\r\n        <li [sfcShowHideElement]=\"vm.nextPage\" (click)=\"onPageClick(vm.next)\">\r\n            <button class=\"limit\">\r\n                <fa-icon [icon]=\"faChevronRight\"></fa-icon>\r\n            </button>\r\n        </li>\r\n    </ul>\r\n    <sfc-delimeter></sfc-delimeter>\r\n</div>", styles: [":host{width:100%;display:inline-block}:host .container{position:relative;text-align:center}:host .container ul{list-style:none;margin:0;padding:0;display:flex;justify-content:center;-webkit-user-select:none;user-select:none}:host .container ul li{display:block;float:left;padding:.31em}:host .container ul li:first-child{border:none}:host .container ul li button,:host .container ul li span{transition:color .5s ease;background:none;border:none;border-radius:50%;box-sizing:border-box;display:block;font-size:1em;height:2.5em;min-width:2.5em;line-height:2.5em;padding:0}:host .container ul li button,:host-context(.sfc-default-theme) :host .container ul li button,:host .container ul li span,:host-context(.sfc-default-theme) :host .container ul li span{color:#0009}:host-context(.sfc-dark-theme) :host .container ul li button,:host-context(.sfc-dark-theme) :host .container ul li span{color:#fff}:host .container ul li button{transition:color .5s ease;outline:none;position:relative;transition:all .17s linear}:host .container ul li button,:host-context(.sfc-default-theme) :host .container ul li button{color:#545e61}:host-context(.sfc-dark-theme) :host .container ul li button{color:#fff}:host .container ul li button:before{transition:background .5s ease;border-radius:50%;content:\"\";cursor:pointer;height:0;left:50%;opacity:0;position:absolute;transform:translate(-50%,-50%);transition:all .17s linear;top:50%;width:0}:host .container ul li button:before,:host-context(.sfc-default-theme) :host .container ul li button:before{background:#545e61}:host-context(.sfc-dark-theme) :host .container ul li button:before{background:#f5f7fa}:host .container ul li button:hover:not(.active){transition:color .5s ease}:host .container ul li button:hover:not(.active),:host-context(.sfc-default-theme) :host .container ul li button:hover:not(.active){color:#545e61}:host-context(.sfc-dark-theme) :host .container ul li button:hover:not(.active){color:#fff}:host .container ul li button:hover:not(.active):before{animation:hover-animation .51s linear forwards;width:2.5em;height:2.5em}:host .container ul li button.active{transition:background .5s ease;color:#545e61!important}:host .container ul li button.active,:host-context(.sfc-default-theme) :host .container ul li button.active{background:rgba(0,0,0,.1019607843)}:host-context(.sfc-dark-theme) :host .container ul li button.active{background:#f5f7fa}@keyframes hover-animation{0%{opacity:1}to{opacity:0}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: ShowHideElementDirective, selector: "[sfcShowHideElement]", inputs: ["sfcShowHideElement", "delay"] }, { kind: "component", type: DelimeterComponent, selector: "sfc-delimeter", inputs: ["label", "direction"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PaginationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-pagination', template: "<div class=\"container\" *ngIf=\"vm$ | async as vm\">\r\n    <sfc-delimeter></sfc-delimeter>\r\n    <ul *ngIf=\"vm.any\">\r\n        <li [sfcShowHideElement]=\"vm.previousPage\" (click)=\"onPageClick(vm.previous)\">\r\n            <button class=\"limit\">\r\n                <fa-icon [icon]=\"faChevronLeft\"></fa-icon>\r\n            </button>\r\n        </li>\r\n        <li *ngIf=\"vm.firstPage\" (click)=\"onPageClick(1)\">\r\n            <button>1</button>\r\n        </li>\r\n        <li *ngIf=\"vm.firstPage\">\r\n            <span>...</span>\r\n        </li>\r\n        <li *ngFor=\"let page of vm.range\" (click)=\"onPageClick(page)\">\r\n            <button [class.active]=\"vm.page === page\">{{page}}</button>\r\n        </li>\r\n        <li *ngIf=\"vm.lastPage\">\r\n            <span>...</span>\r\n        </li>\r\n        <li *ngIf=\"vm.lastPage\" (click)=\"onPageClick(vm.total)\">\r\n            <button>{{vm.total}}</button>\r\n        </li>\r\n        <li [sfcShowHideElement]=\"vm.nextPage\" (click)=\"onPageClick(vm.next)\">\r\n            <button class=\"limit\">\r\n                <fa-icon [icon]=\"faChevronRight\"></fa-icon>\r\n            </button>\r\n        </li>\r\n    </ul>\r\n    <sfc-delimeter></sfc-delimeter>\r\n</div>", styles: [":host{width:100%;display:inline-block}:host .container{position:relative;text-align:center}:host .container ul{list-style:none;margin:0;padding:0;display:flex;justify-content:center;-webkit-user-select:none;user-select:none}:host .container ul li{display:block;float:left;padding:.31em}:host .container ul li:first-child{border:none}:host .container ul li button,:host .container ul li span{background:none;border:none;border-radius:50%;box-sizing:border-box;display:block;font-size:1em;height:2.5em;min-width:2.5em;line-height:2.5em;padding:0}:host .container ul li button,:host-context(.sfc-default-theme) :host .container ul li button,:host .container ul li span,:host-context(.sfc-default-theme) :host .container ul li span{color:#0009}:host-context(.sfc-dark-theme) :host .container ul li button,:host-context(.sfc-dark-theme) :host .container ul li span{color:#fff}:host .container ul li button{outline:none;position:relative;transition:all .17s linear}:host .container ul li button,:host-context(.sfc-default-theme) :host .container ul li button{color:#545e61}:host-context(.sfc-dark-theme) :host .container ul li button{color:#fff}:host .container ul li button:before{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:#fff}:host .container ul li button:hover:not(.active):before{animation:hover-animation .51s linear forwards;width:2.5em;height:2.5em}:host .container ul li button.active{color:#545e61!important}:host .container ul li button.active,:host-context(.sfc-default-theme) :host .container ul li button.active{background:rgba(0,0,0,.1019607843)}:host-context(.sfc-dark-theme) :host .container ul li button.active{background:#f5f7fa}@keyframes hover-animation{0%{opacity:1}to{opacity:0}}\n"] }]
+            args: [{ selector: 'sfc-pagination', template: "<div class=\"container\" *ngIf=\"vm$ | async as vm\">\r\n    <sfc-delimeter></sfc-delimeter>\r\n    <ul *ngIf=\"vm.any\">\r\n        <li [sfcShowHideElement]=\"vm.previousPage\" (click)=\"onPageClick(vm.previous)\">\r\n            <button class=\"limit\">\r\n                <fa-icon [icon]=\"faChevronLeft\"></fa-icon>\r\n            </button>\r\n        </li>\r\n        <li *ngIf=\"vm.firstPage\" (click)=\"onPageClick(1)\">\r\n            <button>1</button>\r\n        </li>\r\n        <li *ngIf=\"vm.firstPage\">\r\n            <span>...</span>\r\n        </li>\r\n        <li *ngFor=\"let page of vm.range\" (click)=\"onPageClick(page)\">\r\n            <button [class.active]=\"vm.page === page\">{{page}}</button>\r\n        </li>\r\n        <li *ngIf=\"vm.lastPage\">\r\n            <span>...</span>\r\n        </li>\r\n        <li *ngIf=\"vm.lastPage\" (click)=\"onPageClick(vm.total)\">\r\n            <button>{{vm.total}}</button>\r\n        </li>\r\n        <li [sfcShowHideElement]=\"vm.nextPage\" (click)=\"onPageClick(vm.next)\">\r\n            <button class=\"limit\">\r\n                <fa-icon [icon]=\"faChevronRight\"></fa-icon>\r\n            </button>\r\n        </li>\r\n    </ul>\r\n    <sfc-delimeter></sfc-delimeter>\r\n</div>", styles: [":host{width:100%;display:inline-block}:host .container{position:relative;text-align:center}:host .container ul{list-style:none;margin:0;padding:0;display:flex;justify-content:center;-webkit-user-select:none;user-select:none}:host .container ul li{display:block;float:left;padding:.31em}:host .container ul li:first-child{border:none}:host .container ul li button,:host .container ul li span{transition:color .5s ease;background:none;border:none;border-radius:50%;box-sizing:border-box;display:block;font-size:1em;height:2.5em;min-width:2.5em;line-height:2.5em;padding:0}:host .container ul li button,:host-context(.sfc-default-theme) :host .container ul li button,:host .container ul li span,:host-context(.sfc-default-theme) :host .container ul li span{color:#0009}:host-context(.sfc-dark-theme) :host .container ul li button,:host-context(.sfc-dark-theme) :host .container ul li span{color:#fff}:host .container ul li button{transition:color .5s ease;outline:none;position:relative;transition:all .17s linear}:host .container ul li button,:host-context(.sfc-default-theme) :host .container ul li button{color:#545e61}:host-context(.sfc-dark-theme) :host .container ul li button{color:#fff}:host .container ul li button:before{transition:background .5s ease;border-radius:50%;content:\"\";cursor:pointer;height:0;left:50%;opacity:0;position:absolute;transform:translate(-50%,-50%);transition:all .17s linear;top:50%;width:0}:host .container ul li button:before,:host-context(.sfc-default-theme) :host .container ul li button:before{background:#545e61}:host-context(.sfc-dark-theme) :host .container ul li button:before{background:#f5f7fa}:host .container ul li button:hover:not(.active){transition:color .5s ease}:host .container ul li button:hover:not(.active),:host-context(.sfc-default-theme) :host .container ul li button:hover:not(.active){color:#545e61}:host-context(.sfc-dark-theme) :host .container ul li button:hover:not(.active){color:#fff}:host .container ul li button:hover:not(.active):before{animation:hover-animation .51s linear forwards;width:2.5em;height:2.5em}:host .container ul li button.active{transition:background .5s ease;color:#545e61!important}:host .container ul li button.active,:host-context(.sfc-default-theme) :host .container ul li button.active{background:rgba(0,0,0,.1019607843)}:host-context(.sfc-dark-theme) :host .container ul li button.active{background:#f5f7fa}@keyframes hover-animation{0%{opacity:1}to{opacity:0}}\n"] }]
         }], ctorParameters: function () { return [{ type: PaginationService }]; }, propDecorators: { count: [{
                 type: Input
             }], full: [{
@@ -2485,10 +2694,10 @@ class SortingComponent {
     }
 }
 SortingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SortingComponent, deps: [{ token: SortingService }], target: i0.ɵɵFactoryTarget.Component });
-SortingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SortingComponent, selector: "sfc-sorting", inputs: { id: "id", model: "model" }, host: { listeners: { "click": "sort()" }, properties: { "class.enabled": "this.enabled", "class.active": "this.active" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"content\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n    <div *ngIf=\"enabled\" class=\"icons\">\r\n        <fa-icon [icon]=\"icon\"></fa-icon>\r\n    </div>\r\n</div>", styles: [":host{cursor:default;text-overflow:ellipsis;overflow:hidden}:host.enabled{cursor:pointer}:host .container{display:flex;min-width:0}:host .container,:host-context(.sfc-default-theme) :host .container{color:#545e61}:host-context(.sfc-dark-theme) :host .container{color:#fff}:host .container:hover{color:#ffce54}:host .container .content{display:flex;-webkit-user-select:none;user-select:none}:host .container .icons{margin:0 .31em;font-size:.7em;display:flex;align-items:center;transition:all .3s}:host.active .container{color:#ffce54}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
+SortingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SortingComponent, selector: "sfc-sorting", inputs: { id: "id", model: "model" }, host: { listeners: { "click": "sort()" }, properties: { "class.enabled": "this.enabled", "class.active": "this.active" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"content\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n    <div *ngIf=\"enabled\" class=\"icons\">\r\n        <fa-icon [icon]=\"icon\"></fa-icon>\r\n    </div>\r\n</div>", styles: [":host{cursor:default;text-overflow:ellipsis;overflow:hidden}:host.enabled{cursor:pointer}:host .container{display:flex;min-width:0;transition:color .5s ease}:host .container,:host-context(.sfc-default-theme) :host .container{color:#545e61}:host-context(.sfc-dark-theme) :host .container{color:#fff}:host .container:hover{color:#ffce54}:host .container .content{display:flex;-webkit-user-select:none;user-select:none}:host .container .icons{margin:0 .31em;font-size:.7em;display:flex;align-items:center;transition:all .3s}:host.active .container{color:#ffce54}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SortingComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-sorting', template: "<div class=\"container\">\r\n    <div class=\"content\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n    <div *ngIf=\"enabled\" class=\"icons\">\r\n        <fa-icon [icon]=\"icon\"></fa-icon>\r\n    </div>\r\n</div>", styles: [":host{cursor:default;text-overflow:ellipsis;overflow:hidden}:host.enabled{cursor:pointer}:host .container{display:flex;min-width:0}:host .container,:host-context(.sfc-default-theme) :host .container{color:#545e61}:host-context(.sfc-dark-theme) :host .container{color:#fff}:host .container:hover{color:#ffce54}:host .container .content{display:flex;-webkit-user-select:none;user-select:none}:host .container .icons{margin:0 .31em;font-size:.7em;display:flex;align-items:center;transition:all .3s}:host.active .container{color:#ffce54}\n"] }]
+            args: [{ selector: 'sfc-sorting', template: "<div class=\"container\">\r\n    <div class=\"content\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n    <div *ngIf=\"enabled\" class=\"icons\">\r\n        <fa-icon [icon]=\"icon\"></fa-icon>\r\n    </div>\r\n</div>", styles: [":host{cursor:default;text-overflow:ellipsis;overflow:hidden}:host.enabled{cursor:pointer}:host .container{display:flex;min-width:0;transition:color .5s ease}:host .container,:host-context(.sfc-default-theme) :host .container{color:#545e61}:host-context(.sfc-dark-theme) :host .container{color:#fff}:host .container:hover{color:#ffce54}:host .container .content{display:flex;-webkit-user-select:none;user-select:none}:host .container .icons{margin:0 .31em;font-size:.7em;display:flex;align-items:center;transition:all .3s}:host.active .container{color:#ffce54}\n"] }]
         }], ctorParameters: function () { return [{ type: SortingService }]; }, propDecorators: { id: [{
                 type: Input
             }], model: [{
@@ -2506,8 +2715,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
 
 class LoadMoreService {
     constructor() {
-        this.START_PAGE = 1;
-        this._page = this.START_PAGE;
+        this._page = LoadMoreService.START_PAGE;
         this.moreSubject = new Subject();
         this.more$ = this.moreSubject.asObservable();
     }
@@ -2516,9 +2724,10 @@ class LoadMoreService {
         this.moreSubject.next(this._page);
     }
     reset() {
-        this._page = this.START_PAGE;
+        this._page = LoadMoreService.START_PAGE;
     }
 }
+LoadMoreService.START_PAGE = 1;
 LoadMoreService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LoadMoreService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
 LoadMoreService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LoadMoreService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LoadMoreService, decorators: [{
@@ -2532,7 +2741,12 @@ var LoadContainerType;
 (function (LoadContainerType) {
     LoadContainerType["Dropdown"] = "dropdown";
     LoadContainerType["Table"] = "table";
-})(LoadContainerType || (LoadContainerType = {}));
+})(LoadContainerType || (LoadContainerType = {}));
+var LoadChangesSource;
+(function (LoadChangesSource) {
+    LoadChangesSource["Parameters"] = "parameters";
+    LoadChangesSource["Data"] = "data";
+})(LoadChangesSource || (LoadChangesSource = {}));
 
 class LoadContainerConstants {
 }
@@ -2551,10 +2765,10 @@ class LoadMoreButtonComponent {
     }
 }
 LoadMoreButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LoadMoreButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-LoadMoreButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: LoadMoreButtonComponent, selector: "sfc-load-more-button", inputs: { label: "label", icon: "icon" }, outputs: { more: "more" }, ngImport: i0, template: "<div class=\"container\">\r\n    <sfc-delimeter></sfc-delimeter>\r\n    <div class=\"button\" (sfcMouseDown)=\"more.emit($event)\">\r\n        <fa-icon [icon]=\"icon\"></fa-icon>\r\n        <span>{{label}}</span>\r\n    </div>\r\n</div>", styles: [":host{cursor:default}:host .container{text-align:center}:host .container .button{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;cursor:pointer;transition:color .5s;padding:.5em 0 1em}:host .container .button,:host-context(.sfc-default-theme) :host .container .button{color:#545e61}:host-context(.sfc-dark-theme) :host .container .button{color:#fff}:host .container .button fa-icon{font-size:.7em;margin-right:.31em}:host .container .button span{font-size:.6em;font-weight:700;text-transform:uppercase}:host .container .button:hover{color:#ffce54}\n"], dependencies: [{ kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: MouseDownDirective, selector: "[sfcMouseDown]", inputs: ["button"], outputs: ["sfcMouseDown"] }, { kind: "component", type: DelimeterComponent, selector: "sfc-delimeter", inputs: ["label", "direction"] }] });
+LoadMoreButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: LoadMoreButtonComponent, selector: "sfc-load-more-button", inputs: { label: "label", icon: "icon" }, outputs: { more: "more" }, ngImport: i0, template: "<div class=\"container\">\r\n    <sfc-delimeter></sfc-delimeter>\r\n    <div class=\"button\" (sfcMouseDown)=\"more.emit($event)\">\r\n        <fa-icon [icon]=\"icon\"></fa-icon>\r\n        <span>{{label}}</span>\r\n    </div>\r\n</div>", styles: [":host{cursor:default}:host .container{text-align:center;background-color:#fff}:host .container .button{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;cursor:pointer;transition:color .5s ease;transition:color .5s;padding:.5em 0 1em}:host .container .button,:host-context(.sfc-default-theme) :host .container .button{color:#545e61}:host-context(.sfc-dark-theme) :host .container .button{color:#fff}:host .container .button fa-icon{font-size:.7em;margin-right:.31em}:host .container .button span{font-size:.6em;font-weight:700;text-transform:uppercase}:host .container .button:hover{color:#ffce54}\n"], dependencies: [{ kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: MouseDownDirective, selector: "[sfcMouseDown]", inputs: ["button"], outputs: ["sfcMouseDown"] }, { kind: "component", type: DelimeterComponent, selector: "sfc-delimeter", inputs: ["label", "direction"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LoadMoreButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-load-more-button', template: "<div class=\"container\">\r\n    <sfc-delimeter></sfc-delimeter>\r\n    <div class=\"button\" (sfcMouseDown)=\"more.emit($event)\">\r\n        <fa-icon [icon]=\"icon\"></fa-icon>\r\n        <span>{{label}}</span>\r\n    </div>\r\n</div>", styles: [":host{cursor:default}:host .container{text-align:center}:host .container .button{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;cursor:pointer;transition:color .5s;padding:.5em 0 1em}:host .container .button,:host-context(.sfc-default-theme) :host .container .button{color:#545e61}:host-context(.sfc-dark-theme) :host .container .button{color:#fff}:host .container .button fa-icon{font-size:.7em;margin-right:.31em}:host .container .button span{font-size:.6em;font-weight:700;text-transform:uppercase}:host .container .button:hover{color:#ffce54}\n"] }]
+            args: [{ selector: 'sfc-load-more-button', template: "<div class=\"container\">\r\n    <sfc-delimeter></sfc-delimeter>\r\n    <div class=\"button\" (sfcMouseDown)=\"more.emit($event)\">\r\n        <fa-icon [icon]=\"icon\"></fa-icon>\r\n        <span>{{label}}</span>\r\n    </div>\r\n</div>", styles: [":host{cursor:default}:host .container{text-align:center;background-color:#fff}:host .container .button{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;cursor:pointer;transition:color .5s ease;transition:color .5s;padding:.5em 0 1em}:host .container .button,:host-context(.sfc-default-theme) :host .container .button{color:#545e61}:host-context(.sfc-dark-theme) :host .container .button{color:#fff}:host .container .button fa-icon{font-size:.7em;margin-right:.31em}:host .container .button span{font-size:.6em;font-weight:700;text-transform:uppercase}:host .container .button:hover{color:#ffce54}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], icon: [{
@@ -2571,7 +2785,6 @@ class LoadContainerComponent {
         this.Position = Position;
         this.type = LoadContainerType.Dropdown;
         this.open = false;
-        this.size = LoadContainerConstants.DEFAULT_PAGE_SIZE;
         this.loadMore = true;
         this.showEmpty = true;
         this.showLoadMoreButton = true;
@@ -2582,6 +2795,8 @@ class LoadContainerComponent {
         this.next = false;
         this.empty = false;
         this._loading = false;
+        // define what source emit changes for data (1. data changes, 2. predicate conditions)
+        this.source = LoadChangesSource.Data;
     }
     set model(model) {
         if (isDefined(model)) {
@@ -2633,35 +2848,55 @@ class LoadContainerComponent {
         this.handleError.emit(error);
     }
     buildParameters(predicate$) {
-        const parameters$ = (predicate$ || EMPTY.pipe(startWith(null))).pipe(tap(() => {
-            if (isDefined(this.contentEl))
-                this.contentEl.nativeElement.scrollTop = 0;
-            this.loadMoreService.reset();
+        const parameters$ = (predicate$ || EMPTY.pipe(startWith(null))).pipe(tap((predicateParameters) => {
+            if (predicateParameters)
+                this.resetParameters();
         }), switchMap((value) => {
-            return this.loadMoreService.more$.pipe(startWith(this.loadMoreService.START_PAGE), tap(() => this.loading = true), map((page) => {
+            return this.loadMoreService.more$.pipe(startWith(LoadMoreService.START_PAGE), tap(() => {
+                this.source = LoadChangesSource.Parameters;
+                this.loading = true;
+            }), map((page) => {
                 return { params: value, page: page };
             }));
         }));
         return parameters$;
     }
     buildDynamic(parameters$, loader) {
-        return parameters$.pipe(switchMap((parameters) => loader(parameters)));
+        return parameters$.pipe(switchMap((parameters) => loader(parameters, this.source).pipe(tap((model) => {
+            if (model.reset) {
+                this.source = LoadChangesSource.Data;
+                this.resetParameters();
+            }
+        }))));
     }
     buildStatic(parameters$, model) {
-        return parameters$.pipe(withLatestFrom(model.data$ || of([])), map(([parameters, items]) => {
-            const filtered = model.filter ? model.filter(items, parameters) : items, data = filtered ? {
-                items: skip(filtered, parameters.page, this.size),
-                next: parameters.page < Math.ceil(filtered.length / this.size)
-            } : { items: [], next: false };
+        const data$ = (model.data$ || of([])).pipe(tap(_ => this.source = LoadChangesSource.Data));
+        return combineLatest([parameters$, data$]).pipe(map(([parameters, items]) => {
+            const reset = this.source == LoadChangesSource.Data;
+            if (reset && parameters.page != LoadMoreService.START_PAGE) {
+                // if data changed need to start from start
+                this.resetParameters();
+                parameters = { params: parameters.params, page: 1 };
+            }
+            const filtered = model.filter ? model.filter(items, parameters) : items, size = model.size || LoadContainerConstants.DEFAULT_PAGE_SIZE, data = filtered ? {
+                items: skip(filtered, parameters.page, size),
+                next: parameters.page < Math.ceil(filtered.length / size),
+                reset
+            } : { items: [], next: false, reset };
             return data;
         }));
     }
+    resetParameters() {
+        if (isDefined(this.contentEl))
+            this.contentEl.nativeElement.scrollTop = 0;
+        this.loadMoreService.reset();
+    }
 }
 LoadContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LoadContainerComponent, deps: [{ token: LoaderService }, { token: LoadMoreService }], target: i0.ɵɵFactoryTarget.Component });
-LoadContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: LoadContainerComponent, selector: "sfc-load-container", inputs: { id: "id", type: "type", open: "open", size: "size", loadMore: "loadMore", showEmpty: "showEmpty", showLoadMoreButton: "showLoadMoreButton", loadMoreLabel: "loadMoreLabel", notFoundLabel: "notFoundLabel", model: "model", scrollTarget: "scrollTarget" }, outputs: { handleError: "handleError", handleSuccess: "handleSuccess", handleLoading: "handleLoading" }, host: { properties: { "class": "this.type", "class.open": "this.open", "class.empty": "this.isEmpty", "class.loading": "this._loading" } }, providers: [LoadMoreService], viewQueries: [{ propertyName: "contentEl", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: "<div class=\"container\">\r\n    <sfc-bounce-loader [id]=\"id\" [sfcComponentSize]=\"ComponentSize.Small\"></sfc-bounce-loader>\r\n    <div #content class=\"content\" [sfcScrollIntoView]=\"scrollTarget\" (sfcScrollTracker)=\"onScroll()\" [positions]=\"scrollPosition\">\r\n        <ng-content></ng-content>\r\n        <div (sfcMouseDown)=\"$event.preventDefault()\">\r\n            <sfc-load-more-button [hidden]=\"hideLoadMoreButton\" (more)=\"more($event)\" [label]=\"loadMoreLabel\">\r\n            </sfc-load-more-button>\r\n            <div *ngIf=\"isEmpty\" class=\"empty\">{{notFoundLabel}}</div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{width:100%;height:inherit;position:relative}:host .container{height:inherit}:host .container .content{cursor:initial;overflow-y:auto;height:inherit}:host .container .content .empty{display:flex;align-items:center;justify-content:center;color:#545e61;cursor:default;height:100%;font-size:.8em;-webkit-user-select:none;user-select:none;padding:.7em}:host.dropdown .container .content{display:none;opacity:0;max-height:12.5em;box-shadow:0 .125em .125em #00000024,0 .18em .06em -.125em #0000001f,0 .06em .31em #0003}:host.dropdown.open .container .content{display:block;opacity:1}:host ::ng-deep ::-webkit-scrollbar{width:.375em;height:.375em}:host ::ng-deep ::-webkit-scrollbar-track{border-radius:.625em;background:rgba(0,0,0,.1)}:host ::ng-deep ::-webkit-scrollbar-thumb{border-radius:.625em;background:rgba(0,0,0,.2)}:host ::ng-deep ::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.4)}:host ::ng-deep ::-webkit-scrollbar-thumb:active{background:rgba(0,0,0,.6)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: MouseDownDirective, selector: "[sfcMouseDown]", inputs: ["button"], outputs: ["sfcMouseDown"] }, { kind: "directive", type: ComponentSizeDirective, selector: "[sfcComponentSize]", inputs: ["sfcComponentSize", "customSize"] }, { kind: "directive", type: ScrollTrackerDirective, selector: "[sfcScrollTracker]", inputs: ["positions"], outputs: ["sfcScrollTracker"] }, { kind: "directive", type: ScrollIntoViewDirective, selector: "[sfcScrollIntoView]", inputs: ["sfcScrollIntoView", "options"] }, { kind: "component", type: LoadMoreButtonComponent, selector: "sfc-load-more-button", inputs: ["label", "icon"], outputs: ["more"] }, { kind: "component", type: BounceLoaderComponent, selector: "sfc-bounce-loader" }] });
+LoadContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: LoadContainerComponent, selector: "sfc-load-container", inputs: { id: "id", type: "type", open: "open", loadMore: "loadMore", showEmpty: "showEmpty", showLoadMoreButton: "showLoadMoreButton", loadMoreLabel: "loadMoreLabel", notFoundLabel: "notFoundLabel", model: "model", scrollTarget: "scrollTarget" }, outputs: { handleError: "handleError", handleSuccess: "handleSuccess", handleLoading: "handleLoading" }, host: { properties: { "class": "this.type", "class.open": "this.open", "class.empty": "this.isEmpty", "class.loading": "this._loading" } }, providers: [LoadMoreService], viewQueries: [{ propertyName: "contentEl", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: "<div class=\"container\">\r\n    <sfc-bounce-loader [id]=\"id\" [sfcComponentSize]=\"ComponentSize.Small\"></sfc-bounce-loader>\r\n    <div #content class=\"content\" [sfcScrollIntoView]=\"scrollTarget\" (sfcScrollTracker)=\"onScroll()\" [positions]=\"scrollPosition\">\r\n        <ng-content></ng-content>\r\n        <div (sfcMouseDown)=\"$event.preventDefault()\">\r\n            <sfc-load-more-button [hidden]=\"hideLoadMoreButton\" (more)=\"more($event)\" [label]=\"loadMoreLabel\">\r\n            </sfc-load-more-button>\r\n            <div *ngIf=\"isEmpty\" class=\"empty\">{{notFoundLabel}}</div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{width:100%;height:inherit;position:relative}:host .container{height:inherit}:host .container .content{transition:background .5s ease;cursor:initial;overflow-y:auto;overflow-x:hidden;height:inherit}:host .container .content,:host-context(.sfc-default-theme) :host .container .content{background:#fff}:host-context(.sfc-dark-theme) :host .container .content{background:#fff}:host .container .content sfc-load-more-button ::ng-deep .container ::ng-deep sfc-delimeter.horizontal:before{transition:border-image .5s ease}:host .container .content sfc-load-more-button ::ng-deep .container ::ng-deep sfc-delimeter.horizontal:before,:host-context(.sfc-default-theme) :host .container .content sfc-load-more-button ::ng-deep .container ::ng-deep sfc-delimeter.horizontal:before{border-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host-context(.sfc-dark-theme) :host .container .content sfc-load-more-button ::ng-deep .container ::ng-deep sfc-delimeter.horizontal:before{border-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host .container .content sfc-load-more-button ::ng-deep .container ::ng-deep sfc-delimeter.horizontal:after{transition:border-image .5s ease}:host .container .content sfc-load-more-button ::ng-deep .container ::ng-deep sfc-delimeter.horizontal:after,:host-context(.sfc-default-theme) :host .container .content sfc-load-more-button ::ng-deep .container ::ng-deep sfc-delimeter.horizontal:after{border-image:linear-gradient(to left,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host-context(.sfc-dark-theme) :host .container .content sfc-load-more-button ::ng-deep .container ::ng-deep sfc-delimeter.horizontal:after{border-image:linear-gradient(to left,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host .container .content sfc-load-more-button ::ng-deep .container .button{transition:color .5s ease}:host .container .content sfc-load-more-button ::ng-deep .container .button,:host-context(.sfc-default-theme) :host .container .content sfc-load-more-button ::ng-deep .container .button{color:#545e61}:host-context(.sfc-dark-theme) :host .container .content sfc-load-more-button ::ng-deep .container .button{color:#545e61}:host .container .content sfc-load-more-button ::ng-deep .container .button:hover{color:#ffce54}:host .container .content .empty{display:flex;align-items:center;justify-content:center;color:#545e61;cursor:default;height:100%;font-size:.8em;-webkit-user-select:none;user-select:none;padding:.7em}:host.dropdown .container .content{display:none;opacity:0;max-height:12.5em;box-shadow:0 .125em .125em #00000024,0 .18em .06em -.125em #0000001f,0 .06em .31em #0003}:host.dropdown.open .container .content{display:block;opacity:1}:host ::ng-deep ::-webkit-scrollbar{width:.375em;height:.375em}:host ::ng-deep ::-webkit-scrollbar-track{border-radius:.625em;background:#e9e9e9}:host ::ng-deep ::-webkit-scrollbar-thumb{border-radius:.625em;background:rgba(0,0,0,.2)}:host ::ng-deep ::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.4)}:host ::ng-deep ::-webkit-scrollbar-thumb:active{background:rgba(0,0,0,.6)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: MouseDownDirective, selector: "[sfcMouseDown]", inputs: ["button"], outputs: ["sfcMouseDown"] }, { kind: "directive", type: ComponentSizeDirective, selector: "[sfcComponentSize]", inputs: ["sfcComponentSize", "customSize"] }, { kind: "directive", type: ScrollTrackerDirective, selector: "[sfcScrollTracker]", inputs: ["positions"], outputs: ["sfcScrollTracker"] }, { kind: "directive", type: ScrollIntoViewDirective, selector: "[sfcScrollIntoView]", inputs: ["sfcScrollIntoView", "local", "options"] }, { kind: "component", type: LoadMoreButtonComponent, selector: "sfc-load-more-button", inputs: ["label", "icon"], outputs: ["more"] }, { kind: "component", type: BounceLoaderComponent, selector: "sfc-bounce-loader" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LoadContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-load-container', providers: [LoadMoreService], template: "<div class=\"container\">\r\n    <sfc-bounce-loader [id]=\"id\" [sfcComponentSize]=\"ComponentSize.Small\"></sfc-bounce-loader>\r\n    <div #content class=\"content\" [sfcScrollIntoView]=\"scrollTarget\" (sfcScrollTracker)=\"onScroll()\" [positions]=\"scrollPosition\">\r\n        <ng-content></ng-content>\r\n        <div (sfcMouseDown)=\"$event.preventDefault()\">\r\n            <sfc-load-more-button [hidden]=\"hideLoadMoreButton\" (more)=\"more($event)\" [label]=\"loadMoreLabel\">\r\n            </sfc-load-more-button>\r\n            <div *ngIf=\"isEmpty\" class=\"empty\">{{notFoundLabel}}</div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{width:100%;height:inherit;position:relative}:host .container{height:inherit}:host .container .content{cursor:initial;overflow-y:auto;height:inherit}:host .container .content .empty{display:flex;align-items:center;justify-content:center;color:#545e61;cursor:default;height:100%;font-size:.8em;-webkit-user-select:none;user-select:none;padding:.7em}:host.dropdown .container .content{display:none;opacity:0;max-height:12.5em;box-shadow:0 .125em .125em #00000024,0 .18em .06em -.125em #0000001f,0 .06em .31em #0003}:host.dropdown.open .container .content{display:block;opacity:1}:host ::ng-deep ::-webkit-scrollbar{width:.375em;height:.375em}:host ::ng-deep ::-webkit-scrollbar-track{border-radius:.625em;background:rgba(0,0,0,.1)}:host ::ng-deep ::-webkit-scrollbar-thumb{border-radius:.625em;background:rgba(0,0,0,.2)}:host ::ng-deep ::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.4)}:host ::ng-deep ::-webkit-scrollbar-thumb:active{background:rgba(0,0,0,.6)}\n"] }]
+            args: [{ selector: 'sfc-load-container', providers: [LoadMoreService], template: "<div class=\"container\">\r\n    <sfc-bounce-loader [id]=\"id\" [sfcComponentSize]=\"ComponentSize.Small\"></sfc-bounce-loader>\r\n    <div #content class=\"content\" [sfcScrollIntoView]=\"scrollTarget\" (sfcScrollTracker)=\"onScroll()\" [positions]=\"scrollPosition\">\r\n        <ng-content></ng-content>\r\n        <div (sfcMouseDown)=\"$event.preventDefault()\">\r\n            <sfc-load-more-button [hidden]=\"hideLoadMoreButton\" (more)=\"more($event)\" [label]=\"loadMoreLabel\">\r\n            </sfc-load-more-button>\r\n            <div *ngIf=\"isEmpty\" class=\"empty\">{{notFoundLabel}}</div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{width:100%;height:inherit;position:relative}:host .container{height:inherit}:host .container .content{transition:background .5s ease;cursor:initial;overflow-y:auto;overflow-x:hidden;height:inherit}:host .container .content,:host-context(.sfc-default-theme) :host .container .content{background:#fff}:host-context(.sfc-dark-theme) :host .container .content{background:#fff}:host .container .content sfc-load-more-button ::ng-deep .container ::ng-deep sfc-delimeter.horizontal:before{transition:border-image .5s ease}:host .container .content sfc-load-more-button ::ng-deep .container ::ng-deep sfc-delimeter.horizontal:before,:host-context(.sfc-default-theme) :host .container .content sfc-load-more-button ::ng-deep .container ::ng-deep sfc-delimeter.horizontal:before{border-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host-context(.sfc-dark-theme) :host .container .content sfc-load-more-button ::ng-deep .container ::ng-deep sfc-delimeter.horizontal:before{border-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host .container .content sfc-load-more-button ::ng-deep .container ::ng-deep sfc-delimeter.horizontal:after{transition:border-image .5s ease}:host .container .content sfc-load-more-button ::ng-deep .container ::ng-deep sfc-delimeter.horizontal:after,:host-context(.sfc-default-theme) :host .container .content sfc-load-more-button ::ng-deep .container ::ng-deep sfc-delimeter.horizontal:after{border-image:linear-gradient(to left,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host-context(.sfc-dark-theme) :host .container .content sfc-load-more-button ::ng-deep .container ::ng-deep sfc-delimeter.horizontal:after{border-image:linear-gradient(to left,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host .container .content sfc-load-more-button ::ng-deep .container .button{transition:color .5s ease}:host .container .content sfc-load-more-button ::ng-deep .container .button,:host-context(.sfc-default-theme) :host .container .content sfc-load-more-button ::ng-deep .container .button{color:#545e61}:host-context(.sfc-dark-theme) :host .container .content sfc-load-more-button ::ng-deep .container .button{color:#545e61}:host .container .content sfc-load-more-button ::ng-deep .container .button:hover{color:#ffce54}:host .container .content .empty{display:flex;align-items:center;justify-content:center;color:#545e61;cursor:default;height:100%;font-size:.8em;-webkit-user-select:none;user-select:none;padding:.7em}:host.dropdown .container .content{display:none;opacity:0;max-height:12.5em;box-shadow:0 .125em .125em #00000024,0 .18em .06em -.125em #0000001f,0 .06em .31em #0003}:host.dropdown.open .container .content{display:block;opacity:1}:host ::ng-deep ::-webkit-scrollbar{width:.375em;height:.375em}:host ::ng-deep ::-webkit-scrollbar-track{border-radius:.625em;background:#e9e9e9}:host ::ng-deep ::-webkit-scrollbar-thumb{border-radius:.625em;background:rgba(0,0,0,.2)}:host ::ng-deep ::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.4)}:host ::ng-deep ::-webkit-scrollbar-thumb:active{background:rgba(0,0,0,.6)}\n"] }]
         }], ctorParameters: function () { return [{ type: LoaderService }, { type: LoadMoreService }]; }, propDecorators: { id: [{
                 type: Input
             }], type: [{
@@ -2674,8 +2909,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             }, {
                 type: HostBinding,
                 args: [`class.${UIClass.Open}`]
-            }], size: [{
-                type: Input
             }], loadMore: [{
                 type: Input
             }], showEmpty: [{
@@ -2708,6 +2941,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             }] } });
 
 class IconComponent {
+    constructor() {
+        this.icon = null;
+        this.imageSrc = null;
+    }
     get showImage() {
         return !isNullOrEmptyString(this.imageSrc) && !isDefined(this.icon);
     }
@@ -2730,6 +2967,7 @@ NgxSfcCommonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", vers
         // directives
         ClickOutsideDirective,
         ShowHideElementDirective,
+        IfDirective,
         ThrowElementOnHoverDirective,
         TemplateReferenceDirective,
         MouseDownDirective,
@@ -2770,6 +3008,7 @@ NgxSfcCommonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", vers
         // directives
         ClickOutsideDirective,
         ShowHideElementDirective,
+        IfDirective,
         ThrowElementOnHoverDirective,
         TemplateReferenceDirective,
         MouseDownDirective,
@@ -2815,6 +3054,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                         // directives
                         ClickOutsideDirective,
                         ShowHideElementDirective,
+                        IfDirective,
                         ThrowElementOnHoverDirective,
                         TemplateReferenceDirective,
                         MouseDownDirective,
@@ -2860,6 +3100,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                         // directives
                         ClickOutsideDirective,
                         ShowHideElementDirective,
+                        IfDirective,
                         ThrowElementOnHoverDirective,
                         TemplateReferenceDirective,
                         MouseDownDirective,
@@ -2909,5 +3150,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BounceLoaderComponent, BrowserDocumentRef, BrowserWindowRef, ButtonComponent, ButtonType, CheckmarkComponent, CheckmarkType, CircleLoaderComponent, CircleLoaderType, ClickOutsideDirective, CloseComponent, CommonConstants, ComponentSize, ComponentSizeDirective, DOCUMENT, DOCUMENT_PROVIDERS, DateTimeConstants, DefaultModalFooterComponent, DefaultModalHeaderComponent, DelimeterComponent, DestroyParentDirective, Direction, DocumentRef, DomChangesDirective, DotsComponent, HamburgerComponent, HamburgerMenuComponent, IconComponent, ImageLoadDirective, ImageLoadService, LoadContainerComponent, LoadContainerType, LoadMoreButtonComponent, LoaderService, MediaLimits, ModalComponent, ModalOpenDirective, ModalOpenOnClickDirective, ModalService, ModalTemplate, MouseDownDirective, NgxSfcCommonModule, PaginationComponent, PaginationService, Position, ResizeService, ScrollIntoViewDirective, ScrollTrackerDirective, Sequence, ShowHideElementDirective, SortingComponent, SortingDirection, SortingService, SwitchMultiCasePipe, TemplateContentComponent, TemplateReferenceDirective, Theme, ThrowElementOnHoverDirective, ToggleSwitcherComponent, TooltipComponent, TooltipType, UIClass, UIConstants, WINDOW, WINDOW_PROVIDERS, WindowRef, addClasses, addItem, addPropertyToObject, all, any, browserDocumentProvider, browserWindowProvider, contains, distinct, documentFactory, documentProvider, firstItem, firstOrDefault, getCalcValue, getCollectionOrEmpty, getCssLikeValue, getFileExtension, getFirstDayOfMonth, getFirstDayOfMonthByYearAndMonth, getFirstDayOfYear, getLastDayOfMonth, getLastDayOfMonthByYearAndMonth, getLastDayOfYear, getNextDate, getNextMonth, getNextYear, getPreviousMonth, getPreviousYear, getRotateValue, getValueFromCssLikeValue, getWeeksNumberInMonth, hasItem, hasItemBy, hasObjectItem, hexToRgb, isAsyncData, isChromeBrowser, isDateGreat, isDateGreatOrEqual, isDateTimeGreat, isDateTimeGreatOrEqual, isDefined, isEmail, isEqualDates, isImage, isNullOrEmptyString, isNumeric, isObject, lastItem, max, mergeDeep, nameof, parseBoolean, parseFileSize, readAsDataURL, remove, removeClasses, removeItem, removeItemBy, removePropertyFromObject, replaceRgbOpacity, rgbToHex, setDay, setDefaultSecondsAndMiliseconds, setHours, setMilliseconds, setMinutes, setSeconds, setYear, skip, sort, sortBy, sortByPath, sum, trim, updateItemBy, where, windowFactory, windowProvider };
+export { BounceLoaderComponent, BrowserDocumentRef, BrowserWindowRef, ButtonComponent, ButtonType, CheckmarkComponent, CheckmarkType, CircleLoaderComponent, CircleLoaderType, ClickOutsideDirective, CloseComponent, CommonConstants, Compare, ComponentSize, ComponentSizeDirective, DOCUMENT, DOCUMENT_PROVIDERS, DateTimeConstants, DefaultModalFooterComponent, DefaultModalHeaderComponent, DelimeterComponent, DestroyParentDirective, Direction, DocumentRef, DomChangesDirective, DotsComponent, HamburgerComponent, HamburgerMenuComponent, IconComponent, IfDirective, ImageLoadDirective, ImageLoadService, LoadChangesSource, LoadContainerComponent, LoadContainerType, LoadMoreButtonComponent, LoaderService, MediaLimits, ModalComponent, ModalOpenDirective, ModalOpenOnClickDirective, ModalService, ModalTemplate, MouseDownDirective, NgxSfcCommonModule, PaginationComponent, PaginationService, Position, ResizeService, ScrollIntoViewDirective, ScrollTrackerDirective, Sequence, ShowHideElementDirective, SortingComponent, SortingDirection, SortingService, SwitchMultiCasePipe, TemplateContentComponent, TemplateReferenceDirective, Theme, ThrowElementOnHoverDirective, ToggleSwitcherComponent, TooltipComponent, TooltipType, UIClass, UIConstants, WINDOW, WINDOW_PROVIDERS, WindowRef, addClasses, addItem, addPropertyToObject, all, any, browserDocumentProvider, browserWindowProvider, contains, convertFromBase64String, convertTimestampToDate, convertToBase64String, convertUTCDateToLocalDate, count, distinct, documentFactory, documentProvider, firstItem, firstOrDefault, getCalcValue, getCollectionOrEmpty, getCssLikeValue, getFileExtension, getFirstDayOfMonth, getFirstDayOfMonthByYearAndMonth, getFirstDayOfYear, getLastDayOfMonth, getLastDayOfMonthByYearAndMonth, getLastDayOfYear, getNextDate, getNextMonth, getNextYear, getPreviousDate, getPreviousMonth, getPreviousYear, getRotateValue, getValueFromCssLikeValue, getWeeksNumberInMonth, hasItem, hasItemBy, hasObjectItem, hexToRgb, isAsyncData, isChromeBrowser, isDateGreat, isDateGreatOrEqual, isDateTimeGreat, isDateTimeGreatOrEqual, isDefined, isEmail, isEqual, isEqualDateTimes, isEqualDates, isImage, isNullOrEmptyString, isNumeric, isObject, lastItem, max, mergeDeep, nameof, parseBoolean, parseFileSize, readAsDataURL, remove, removeClasses, removeItem, removeItemBy, removePropertyFromObject, replaceRgbOpacity, rgbToHex, setDay, setDefaultSecondsAndMiliseconds, setHours, setMilliseconds, setMinutes, setSeconds, setYear, skip, sort, sortBy, sortByPath, sum, trim, updateItemBy, where, windowFactory, windowProvider };
+//# sourceMappingURL=ngx-sfc-common.mjs.map
 //# sourceMappingURL=ngx-sfc-common.mjs.map