ngx-sfc-common 0.0.4 → 0.0.5

package/fesm2015/ngx-sfc-common.mjs

@@ -1,14 +1,14 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, PLATFORM_ID, EventEmitter, Directive, Inject, Input, Output, HostListener, Component, HostBinding, ContentChildren, NgModule } from '@angular/core';
+import { InjectionToken, Injectable, PLATFORM_ID, EventEmitter, Directive, Inject, Input, Output, HostListener, Pipe, Component, HostBinding, ContentChildren, ViewChild, NgModule } from '@angular/core';
 import * as i1$2 from '@angular/common';
 import { isPlatformBrowser, CommonModule } from '@angular/common';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { Subject, fromEvent, Observable, startWith, BehaviorSubject, filter, distinctUntilChanged, map, EMPTY, combineLatest } from 'rxjs';
-import * as i1 from '@angular/platform-browser';
 import * as i1$1 from '@fortawesome/angular-fontawesome';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { Subject, fromEvent, Observable, startWith, BehaviorSubject, filter, distinctUntilChanged, map, EMPTY, combineLatest, tap, switchMap, withLatestFrom, 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 } from '@fortawesome/free-solid-svg-icons';
+import { faTimes, faWindowRestore, faCheck, faChevronLeft, faChevronRight, faChevronUp, faChevronDown, faChevronCircleDown } from '@fortawesome/free-solid-svg-icons';
 
 /**
  * Component sizes
@@ -78,6 +78,7 @@ var UIClass;
     UIClass["Active"] = "active";
     UIClass["Valid"] = "valid";
     UIClass["Invalid"] = "invalid";
+    UIClass["InnerInvalid"] = "inner-invalid";
     UIClass["Enabled"] = "enabled";
     UIClass["Disabled"] = "disabled";
     UIClass["Selected"] = "selected";
@@ -94,9 +95,20 @@ var UIClass;
     UIClass["Bordered"] = "bordered";
     UIClass["Even"] = "even";
     UIClass["Pointer"] = "pointer";
+    UIClass["Default"] = "default";
+    UIClass["Initialization"] = "initialization";
 })(UIClass || (UIClass = {}));
 ;
 
+/**
+ * Sequence types
+ */
+var Sequence;
+(function (Sequence) {
+    Sequence["Previous"] = "previous";
+    Sequence["Next"] = "next";
+})(Sequence || (Sequence = {}));
+
 /**
  * Create a new injection token for injecting the Document into a component.
  */
@@ -338,12 +350,15 @@ class CommonConstants {
 CommonConstants.NOT_FOUND_INDEX = -1;
 CommonConstants.EMPTY_STRING = '';
 CommonConstants.MOUSE_BUTTON_LEFT = 0;
-CommonConstants.FULL_PERCENTAGE = 100;
+CommonConstants.FULL_PERCENTAGE = 100;
+CommonConstants.COMMON_TEXT_DELIMETER = '/';
 
 class DateTimeConstants {
 }
 DateTimeConstants.DAYS_IN_WEEK = 7;
 DateTimeConstants.HOURS_IN_SHORT_TIME = 12;
+DateTimeConstants.HOURS_IN_TIME = 24;
+DateTimeConstants.MIDNIGHT_HOUR = 0;
 DateTimeConstants.MINUTES_IN_HOUR = 60;
 DateTimeConstants.DAYS_OF_WEEK = ["S", "M", "T", "W", "T", "F", "S"];
 DateTimeConstants.DAYS_OF_WEEK_3 = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"];
@@ -438,7 +453,7 @@ function isAsyncData(data) {
  * @returns Extended object with new property
  */
 function addPropertyToObject(obj, property, value = null) {
-    if (!isDefined(property) && !obj.hasOwnProperty(property)) {
+    if (isDefined(property) && !obj.hasOwnProperty(property)) {
         let newObj = {};
         newObj[property] = value;
         obj = Object.assign(Object.assign({}, obj), newObj);
@@ -497,6 +512,13 @@ const nameof = (name) => name;
    */
 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);
 }
 
 /**
@@ -535,8 +557,9 @@ function trim(value) {
  * @returns Date with minute value
  */
 function setMinutes(date, minute) {
-    date.setMinutes(minute);
-    return new Date(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes());
+    const result = new Date(date);
+    result.setMinutes(minute);
+    return result;
 }
 /**
  * Set hours for date
@@ -545,8 +568,9 @@ function setMinutes(date, minute) {
  * @returns Date with hour value
  */
 function setHours(date, hour) {
-    date.setHours(hour);
-    return new Date(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes());
+    const result = new Date(date);
+    result.setHours(hour);
+    return result;
 }
 /**
  * Set day for date value
@@ -566,8 +590,52 @@ function setDay(date, dayNumber) {
  * @returns Date with year value
  */
 function setYear(date, year) {
-    date.setFullYear(year);
-    return new Date(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes());
+    const result = new Date(date);
+    result.setFullYear(year);
+    return result;
+}
+/**
+ * Set seconds for date
+ * @param date Date value
+ * @param value Seconds value
+ * @returns Date with minute value
+ */
+function setSeconds(date, value) {
+    const result = new Date(date);
+    result.setSeconds(value);
+    return result;
+}
+/**
+ * Set milliseconds for date
+ * @param date Date value
+ * @param value Milliseconds value
+ * @returns Date with minute value
+ */
+function setMilliseconds(date, value) {
+    const result = new Date(date);
+    result.setMilliseconds(value);
+    return result;
+}
+/**
+ * Set 0 for seconds and milliseconds of date
+ * @param date Date value
+ * @returns Date with minute value
+ */
+function setDefaultSecondsAndMiliseconds(date) {
+    const result = new Date(date);
+    result.setSeconds(0);
+    result.setMilliseconds(0);
+    return result;
+}
+/**
+ * Get next date
+ * @param date Date value
+ * @returns Next date
+ */
+function getNextDate(date) {
+    const nextDate = new Date(date);
+    nextDate.setDate(date.getDate() + 1);
+    return nextDate;
 }
 /**
  * Get next month as date
@@ -689,9 +757,10 @@ function getWeeksNumberInMonth(date) {
  * @returns True if first and second date are equal
  */
 function isEqualDates(date1, date2) {
-    date1.setHours(0, 0, 0, 0);
-    date2.setHours(0, 0, 0, 0);
-    return date1.getTime() === date2.getTime();
+    const date1Value = new Date(date1), date2Value = new Date(date2);
+    date1Value.setHours(0, 0, 0, 0);
+    date2Value.setHours(0, 0, 0, 0);
+    return date1Value.getTime() === date2Value.getTime();
 }
 /**
  * Return true if first date greater than second date
@@ -773,7 +842,8 @@ function readAsDataURL(file, onLoad) {
         reader.onload = () => onLoad(reader.result);
         reader.readAsDataURL(file);
     }
-    throw new Error('File utils | Read as data URL function --> File is empty.');
+    else
+        throw new Error('File utils | Read as data URL function --> File is empty.');
 }
 /**
  * Return true if file is image
@@ -781,7 +851,7 @@ function readAsDataURL(file, onLoad) {
  * @returns True if file is image
  */
 function isImage(file) {
-    return (/\.(gif|jpe?g|jpg|tiff|png|webp|bmp)$/i).test(file.name);
+    return isDefined(file) && (/\.(gif|jpe?g|jpg|tiff|png|webp|bmp)$/i).test(file.name);
 }
 
 /**
@@ -809,6 +879,14 @@ function getValueFromCssLikeValue(value, type = UIConstants.CSS_PIXELS) {
 function getCalcValue(part, value = 100) {
     return `calc(${value}${UIConstants.CSS_PERCENTAGE} / ${part} )`;
 }
+/**
+ * Return CCS like rotate value
+ * @param value value as degrees
+ * @returns Rotate value
+ */
+function getRotateValue(value) {
+    return `rotate(${value}deg)`;
+}
 /**
  * Add classes to HTML element
  * @param element HTML element
@@ -961,6 +1039,14 @@ function skip(collection, page, size) {
     }
     return collection;
 }
+function sort(collection, direction = SortingDirection.Ascending) {
+    if (any(collection)) {
+        return direction == SortingDirection.Ascending
+            ? collection.sort((a, b) => a - b)
+            : collection.sort((a, b) => b - a);
+    }
+    return collection;
+}
 /**
  * Return sorted collection of objects by property
  * @param collection Array of items
@@ -1069,13 +1155,26 @@ function addItem(collection, item, predicate) {
     collection.push(item);
     return true;
 }
+/**
+ * Delete item from collection
+ * @param collection Array of items
+ * @param item Item to delete
+ * @returns True if successfully removed
+ */
+function removeItem(collection, item) {
+    if (isDefined(item) && hasItem(collection, item)) {
+        collection.splice(collection.indexOf(item), 1);
+        return true;
+    }
+    return false;
+}
 /**
  * Delete item from collection by predicate
  * @param collection Array of items
  * @param predicate Function to define remove logic
  * @returns True if successfully removed
  */
-function removeItem(collection, predicate) {
+function removeItemBy(collection, predicate) {
     const foundItem = firstOrDefault(collection, predicate);
     if (isDefined(foundItem)) {
         collection.splice(collection.indexOf(foundItem), 1);
@@ -1083,7 +1182,13 @@ function removeItem(collection, predicate) {
     }
     return false;
 }
-function updateItem(collection, predicate, newItem) {
+/**
+ * Update item in collection by predicate
+ * @param collection Array of items
+ * @param predicate Function to define item for deleting
+ * @returns True if successfully removed
+ */
+function updateItemBy(collection, predicate, newItem) {
     const itemIndex = collection.findIndex(predicate);
     if (itemIndex !== CommonConstants.NOT_FOUND_INDEX) {
         const result = collection.slice(0);
@@ -1193,27 +1298,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
 class ComponentSizeDirective {
     constructor(el) {
         this.el = el;
-        this.style.fontSize = this.getSizeValue(this.size);
+        this._customSize = null;
+        this.style.fontSize = getCssLikeValue(this.getSizeProportion(), UIConstants.CSS_EM);
     }
     set size(value) {
-        this.style.fontSize = this.getSizeValue(value);
+        this._size = value;
+        this.style.fontSize = getCssLikeValue(this.getSizeProportion(), UIConstants.CSS_EM);
+    }
+    get size() {
+        return this._size;
     }
     set customSize(value) {
-        this.style.fontSize = getCssLikeValue(value, UIConstants.CSS_EM);
+        this._customSize = value;
+        if (this._customSize)
+            this.style.fontSize = getCssLikeValue(this._customSize, UIConstants.CSS_EM);
+    }
+    get customSize() {
+        return this._customSize;
+    }
+    get proportion() {
+        return this.customSize || this.getSizeProportion();
     }
     get style() {
         return this.el.nativeElement.style;
     }
-    getSizeValue(value) {
-        switch (value) {
+    getSizeProportion() {
+        switch (this.size) {
             case ComponentSize.Small:
-                return getCssLikeValue(0.5, UIConstants.CSS_EM);
+                return 0.5;
             case ComponentSize.Medium:
-                return getCssLikeValue(1, UIConstants.CSS_EM);
+                return 1;
             case ComponentSize.Large:
-                return getCssLikeValue(2, UIConstants.CSS_EM);
+                return 2;
             default:
-                return getCssLikeValue(1, UIConstants.CSS_EM);
+                return 1;
         }
     }
 }
@@ -1256,6 +1374,111 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                 type: Input
             }] } });
 
+class DomChangesDirective {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        this.sfcDomChanges = new EventEmitter();
+        this.options = {
+            attributes: true,
+            childList: true,
+            characterData: true
+        };
+        const element = this.elementRef.nativeElement;
+        this.changes = new MutationObserver((mutations) => mutations.forEach((mutation) => this.sfcDomChanges.emit(mutation)));
+        this.changes.observe(element, this.options);
+    }
+    ngOnDestroy() {
+        this.changes.disconnect();
+    }
+}
+DomChangesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DomChangesDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+DomChangesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: DomChangesDirective, selector: "[sfcDomChanges]", inputs: { options: "options" }, outputs: { sfcDomChanges: "sfcDomChanges" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DomChangesDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[sfcDomChanges]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { sfcDomChanges: [{
+                type: Output
+            }], options: [{
+                type: Input
+            }] } });
+
+class ScrollTrackerDirective {
+    constructor() {
+        this.positions = [];
+        this.sfcScrollTracker = new EventEmitter();
+    }
+    onScroll(event) {
+        const position = this.getPosition(event);
+        if (position && hasItem(this.positions, position))
+            this.sfcScrollTracker.emit(position);
+    }
+    getPosition(event) {
+        const tracker = event.target, limit = tracker.scrollHeight - tracker.clientHeight, scrollTopFixed = tracker.scrollTop.toFixed();
+        if (scrollTopFixed >= limit)
+            return Position.Bottom;
+        else if (scrollTopFixed <= 0)
+            return Position.Top;
+        return null;
+    }
+}
+ScrollTrackerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ScrollTrackerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+ScrollTrackerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: ScrollTrackerDirective, selector: "[sfcScrollTracker]", inputs: { positions: "positions" }, outputs: { sfcScrollTracker: "sfcScrollTracker" }, host: { listeners: { "scroll": "onScroll($event)" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ScrollTrackerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[sfcScrollTracker]'
+                }]
+        }], propDecorators: { positions: [{
+                type: Input
+            }], sfcScrollTracker: [{
+                type: Output
+            }], onScroll: [{
+                type: HostListener,
+                args: ['scroll', ['$event']]
+            }] } });
+
+class ScrollIntoViewDirective {
+    constructor() {
+        this.options = { behavior: 'smooth', block: 'center', inline: 'start' };
+    }
+    set sfcScrollIntoView(value) {
+        if (!isDefined(value))
+            return;
+        if (isChromeBrowser())
+            value.scrollIntoViewIfNeeded();
+        else
+            value.scrollIntoView(this.options);
+    }
+}
+ScrollIntoViewDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ScrollIntoViewDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+ScrollIntoViewDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: ScrollIntoViewDirective, selector: "[sfcScrollIntoView]", inputs: { sfcScrollIntoView: "sfcScrollIntoView", options: "options" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ScrollIntoViewDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[sfcScrollIntoView]'
+                }]
+        }], propDecorators: { sfcScrollIntoView: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }] } });
+
+class SwitchMultiCasePipe {
+    transform(cases, switchOption) {
+        return cases.includes(switchOption) ? switchOption : !switchOption;
+    }
+}
+SwitchMultiCasePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SwitchMultiCasePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+SwitchMultiCasePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SwitchMultiCasePipe, name: "sfcSwitchMultiCase" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SwitchMultiCasePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'sfcSwitchMultiCase'
+                }]
+        }] });
+
 var ButtonType;
 (function (ButtonType) {
     ButtonType["Bordered"] = "bordered";
@@ -1274,17 +1497,15 @@ class ButtonComponent {
     }
     get classes() {
         const classes = {};
-        if (this.disabled)
-            classes[UIClass.Disabled] = true;
         distinct(this.types).forEach(type => classes[type] = true);
         return classes;
     }
 }
 ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: ButtonComponent, selector: "sfc-button", inputs: { text: "text", iconBefore: "iconBefore", iconAfter: "iconAfter", disabled: "disabled", types: "types" }, ngImport: i0, template: "<a class=\"button\" [ngClass]=\"classes\">\r\n    <fa-icon *ngIf=\"iconBefore\" class=\"icon before\" [icon]=\"iconBefore\"></fa-icon>\r\n    <span class=\"text\">{{text}}</span>\r\n    <fa-icon *ngIf=\"iconAfter\" class=\"icon after\" [icon]=\"iconAfter\"></fa-icon>\r\n</a>", styles: [".button.texted:not(:hover):not(.disabled),:host-context(.sfc-default-theme) .button.texted:not(:hover):not(.disabled){color:#545e61}:host-context(.sfc-dark-theme) .button.texted:not(:hover):not(.disabled){color:#ccd1d9}.button.bordered{border:solid 2px}.button.bordered:not(:hover):not(.disabled),:host-context(.sfc-default-theme) .button.bordered:not(:hover):not(.disabled){color:#545e61}:host-context(.sfc-dark-theme) .button.bordered:not(:hover):not(.disabled){color:#ccd1d9}.button.bordered:not(:hover):not(.disabled),:host-context(.sfc-default-theme) .button.bordered:not(:hover):not(.disabled){border-color:#545e61}:host-context(.sfc-dark-theme) .button.bordered:not(:hover):not(.disabled){border-color:#ccd1d9}.button.filled{color:#fff!important;border-color:#545e61;background:#545e61}.button.filled:hover{color:#fff!important;border-color:#aab2bd;background:#aab2bd}.button.filled.disabled{color:#fff!important;border-color:#bdbdbd;background:#bdbdbd}.button.rounded{border:solid 2px;border-radius:20px;padding:.4em 1.2em}.button.rounded:not(:hover):not(.disabled),:host-context(.sfc-default-theme) .button.rounded:not(:hover):not(.disabled){color:#545e61}:host-context(.sfc-dark-theme) .button.rounded:not(:hover):not(.disabled){color:#ccd1d9}.button.rounded:not(:hover):not(.disabled),:host-context(.sfc-default-theme) .button.rounded:not(:hover):not(.disabled){border-color:#545e61}:host-context(.sfc-dark-theme) .button.rounded:not(:hover):not(.disabled){border-color:#ccd1d9}.button.circled{border:solid 2px;width:5em;height:5em;border-radius:50%}.button.circled:not(:hover):not(.disabled),:host-context(.sfc-default-theme) .button.circled:not(:hover):not(.disabled){color:#545e61}:host-context(.sfc-dark-theme) .button.circled:not(:hover):not(.disabled){color:#ccd1d9}.button.circled:not(:hover):not(.disabled),:host-context(.sfc-default-theme) .button.circled:not(:hover):not(.disabled){border-color:#545e61}:host-context(.sfc-dark-theme) .button.circled:not(:hover):not(.disabled){border-color:#ccd1d9}.button.circled .text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host{display:inline-block;font-size:1em}.button{box-sizing:border-box;display:inline-flex;justify-content:center;flex-wrap:wrap;align-items:center;overflow:hidden;text-align:center;text-decoration:none;white-space:nowrap;font-size:.9em;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .5s ease,border-color .5s ease,background .5s ease}.button:hover{color:#2bbbad;border-color:#2bbbad}.button.disabled{pointer-events:none}.button.disabled,:host-context(.sfc-default-theme) .button.disabled{color:#bdbdbd}:host-context(.sfc-dark-theme) .button.disabled{color:#656d78}.button.disabled,:host-context(.sfc-default-theme) .button.disabled{border-color:#bdbdbd}:host-context(.sfc-dark-theme) .button.disabled{border-color:#656d78}.button .icon{padding:3px}.button .text{padding:3px;white-space:initial}.button .text:empty{display:none}\n"], components: [{ type: i1$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: ButtonComponent, selector: "sfc-button", inputs: { text: "text", iconBefore: "iconBefore", iconAfter: "iconAfter", disabled: "disabled", types: "types" }, 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\">{{text}}</span>\r\n    <fa-icon *ngIf=\"iconAfter\" class=\"icon after\" [icon]=\"iconAfter\"></fa-icon>\r\n</a>", styles: [".button.texted:not(:hover):not(.disabled),:host-context(.sfc-default-theme) .button.texted:not(:hover):not(.disabled){color:#545e61}:host-context(.sfc-dark-theme) .button.texted:not(:hover):not(.disabled){color:#ccd1d9}.button.bordered{border:solid 2px}.button.bordered:not(:hover):not(.disabled),:host-context(.sfc-default-theme) .button.bordered:not(:hover):not(.disabled){color:#545e61}:host-context(.sfc-dark-theme) .button.bordered:not(:hover):not(.disabled){color:#ccd1d9}.button.bordered:not(:hover):not(.disabled),:host-context(.sfc-default-theme) .button.bordered:not(:hover):not(.disabled){border-color:#545e61}:host-context(.sfc-dark-theme) .button.bordered:not(:hover):not(.disabled){border-color:#ccd1d9}.button.filled{color:#fff!important;border-color:#545e61;background:#545e61}.button.filled:hover{color:#fff!important;border-color:#aab2bd;background:#aab2bd}.button.filled.disabled{color:#fff!important;border-color:#bdbdbd;background:#bdbdbd}.button.rounded{border:solid 2px;border-radius:20px;padding:.4em 1.2em}.button.rounded:not(:hover):not(.disabled),:host-context(.sfc-default-theme) .button.rounded:not(:hover):not(.disabled){color:#545e61}:host-context(.sfc-dark-theme) .button.rounded:not(:hover):not(.disabled){color:#ccd1d9}.button.rounded:not(:hover):not(.disabled),:host-context(.sfc-default-theme) .button.rounded:not(:hover):not(.disabled){border-color:#545e61}:host-context(.sfc-dark-theme) .button.rounded:not(:hover):not(.disabled){border-color:#ccd1d9}.button.circled{border:solid 2px;width:5em;height:5em;border-radius:50%}.button.circled:not(:hover):not(.disabled),:host-context(.sfc-default-theme) .button.circled:not(:hover):not(.disabled){color:#545e61}:host-context(.sfc-dark-theme) .button.circled:not(:hover):not(.disabled){color:#ccd1d9}.button.circled:not(:hover):not(.disabled),:host-context(.sfc-default-theme) .button.circled:not(:hover):not(.disabled){border-color:#545e61}:host-context(.sfc-dark-theme) .button.circled:not(:hover):not(.disabled){border-color:#ccd1d9}.button.circled .text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host{display:inline-block;font-size:1em}: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;transition:color .5s ease,border-color .5s ease,background .5s ease}:host .button:hover{color:#2bbbad;border-color:#2bbbad}:host .button .icon{padding:3px}:host .button .text{padding:3px;white-space:initial}: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}\n"], components: [{ type: i1$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-button', template: "<a class=\"button\" [ngClass]=\"classes\">\r\n    <fa-icon *ngIf=\"iconBefore\" class=\"icon before\" [icon]=\"iconBefore\"></fa-icon>\r\n    <span class=\"text\">{{text}}</span>\r\n    <fa-icon *ngIf=\"iconAfter\" class=\"icon after\" [icon]=\"iconAfter\"></fa-icon>\r\n</a>", styles: [".button.texted:not(:hover):not(.disabled),:host-context(.sfc-default-theme) .button.texted:not(:hover):not(.disabled){color:#545e61}:host-context(.sfc-dark-theme) .button.texted:not(:hover):not(.disabled){color:#ccd1d9}.button.bordered{border:solid 2px}.button.bordered:not(:hover):not(.disabled),:host-context(.sfc-default-theme) .button.bordered:not(:hover):not(.disabled){color:#545e61}:host-context(.sfc-dark-theme) .button.bordered:not(:hover):not(.disabled){color:#ccd1d9}.button.bordered:not(:hover):not(.disabled),:host-context(.sfc-default-theme) .button.bordered:not(:hover):not(.disabled){border-color:#545e61}:host-context(.sfc-dark-theme) .button.bordered:not(:hover):not(.disabled){border-color:#ccd1d9}.button.filled{color:#fff!important;border-color:#545e61;background:#545e61}.button.filled:hover{color:#fff!important;border-color:#aab2bd;background:#aab2bd}.button.filled.disabled{color:#fff!important;border-color:#bdbdbd;background:#bdbdbd}.button.rounded{border:solid 2px;border-radius:20px;padding:.4em 1.2em}.button.rounded:not(:hover):not(.disabled),:host-context(.sfc-default-theme) .button.rounded:not(:hover):not(.disabled){color:#545e61}:host-context(.sfc-dark-theme) .button.rounded:not(:hover):not(.disabled){color:#ccd1d9}.button.rounded:not(:hover):not(.disabled),:host-context(.sfc-default-theme) .button.rounded:not(:hover):not(.disabled){border-color:#545e61}:host-context(.sfc-dark-theme) .button.rounded:not(:hover):not(.disabled){border-color:#ccd1d9}.button.circled{border:solid 2px;width:5em;height:5em;border-radius:50%}.button.circled:not(:hover):not(.disabled),:host-context(.sfc-default-theme) .button.circled:not(:hover):not(.disabled){color:#545e61}:host-context(.sfc-dark-theme) .button.circled:not(:hover):not(.disabled){color:#ccd1d9}.button.circled:not(:hover):not(.disabled),:host-context(.sfc-default-theme) .button.circled:not(:hover):not(.disabled){border-color:#545e61}:host-context(.sfc-dark-theme) .button.circled:not(:hover):not(.disabled){border-color:#ccd1d9}.button.circled .text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host{display:inline-block;font-size:1em}.button{box-sizing:border-box;display:inline-flex;justify-content:center;flex-wrap:wrap;align-items:center;overflow:hidden;text-align:center;text-decoration:none;white-space:nowrap;font-size:.9em;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .5s ease,border-color .5s ease,background .5s ease}.button:hover{color:#2bbbad;border-color:#2bbbad}.button.disabled{pointer-events:none}.button.disabled,:host-context(.sfc-default-theme) .button.disabled{color:#bdbdbd}:host-context(.sfc-dark-theme) .button.disabled{color:#656d78}.button.disabled,:host-context(.sfc-default-theme) .button.disabled{border-color:#bdbdbd}:host-context(.sfc-dark-theme) .button.disabled{border-color:#656d78}.button .icon{padding:3px}.button .text{padding:3px;white-space:initial}.button .text:empty{display:none}\n"] }]
+            args: [{ selector: 'sfc-button', template: "<a class=\"button\" [ngClass]=\"classes\">\r\n    <fa-icon *ngIf=\"iconBefore\" class=\"icon before\" [icon]=\"iconBefore\"></fa-icon>\r\n    <span class=\"text\">{{text}}</span>\r\n    <fa-icon *ngIf=\"iconAfter\" class=\"icon after\" [icon]=\"iconAfter\"></fa-icon>\r\n</a>", styles: [".button.texted:not(:hover):not(.disabled),:host-context(.sfc-default-theme) .button.texted:not(:hover):not(.disabled){color:#545e61}:host-context(.sfc-dark-theme) .button.texted:not(:hover):not(.disabled){color:#ccd1d9}.button.bordered{border:solid 2px}.button.bordered:not(:hover):not(.disabled),:host-context(.sfc-default-theme) .button.bordered:not(:hover):not(.disabled){color:#545e61}:host-context(.sfc-dark-theme) .button.bordered:not(:hover):not(.disabled){color:#ccd1d9}.button.bordered:not(:hover):not(.disabled),:host-context(.sfc-default-theme) .button.bordered:not(:hover):not(.disabled){border-color:#545e61}:host-context(.sfc-dark-theme) .button.bordered:not(:hover):not(.disabled){border-color:#ccd1d9}.button.filled{color:#fff!important;border-color:#545e61;background:#545e61}.button.filled:hover{color:#fff!important;border-color:#aab2bd;background:#aab2bd}.button.filled.disabled{color:#fff!important;border-color:#bdbdbd;background:#bdbdbd}.button.rounded{border:solid 2px;border-radius:20px;padding:.4em 1.2em}.button.rounded:not(:hover):not(.disabled),:host-context(.sfc-default-theme) .button.rounded:not(:hover):not(.disabled){color:#545e61}:host-context(.sfc-dark-theme) .button.rounded:not(:hover):not(.disabled){color:#ccd1d9}.button.rounded:not(:hover):not(.disabled),:host-context(.sfc-default-theme) .button.rounded:not(:hover):not(.disabled){border-color:#545e61}:host-context(.sfc-dark-theme) .button.rounded:not(:hover):not(.disabled){border-color:#ccd1d9}.button.circled{border:solid 2px;width:5em;height:5em;border-radius:50%}.button.circled:not(:hover):not(.disabled),:host-context(.sfc-default-theme) .button.circled:not(:hover):not(.disabled){color:#545e61}:host-context(.sfc-dark-theme) .button.circled:not(:hover):not(.disabled){color:#ccd1d9}.button.circled:not(:hover):not(.disabled),:host-context(.sfc-default-theme) .button.circled:not(:hover):not(.disabled){border-color:#545e61}:host-context(.sfc-dark-theme) .button.circled:not(:hover):not(.disabled){border-color:#ccd1d9}.button.circled .text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host{display:inline-block;font-size:1em}: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;transition:color .5s ease,border-color .5s ease,background .5s ease}:host .button:hover{color:#2bbbad;border-color:#2bbbad}:host .button .icon{padding:3px}:host .button .text{padding:3px;white-space:initial}: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}\n"] }]
         }], propDecorators: { text: [{
                 type: Input
             }], iconBefore: [{
@@ -1293,6 +1514,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                 type: Input
             }], disabled: [{
                 type: Input
+            }, {
+                type: HostBinding,
+                args: [`class.${UIClass.Disabled}`]
             }], types: [{
                 type: Input
             }] } });
@@ -1423,7 +1647,7 @@ class LoaderService {
      */
     remove(id = LoaderConstants.GLOBAL_LOADER_ID) {
         const loaders = this.loaderSubject.getValue();
-        if (removeItem(loaders, loader => loader.id == id)) {
+        if (removeItemBy(loaders, loader => loader.id == id)) {
             this.loaderSubject.next(loaders);
         }
     }
@@ -1435,7 +1659,7 @@ class LoaderService {
         const loaders = this.loaderSubject.getValue(), ILoaderEvent = { id, status }, loader = firstOrDefault(loaders, (loader) => loader.id == id);
         if (isDefined(loader) && (loader === null || loader === void 0 ? void 0 : loader.status) == status)
             return this.selectLoaderById(id);
-        const updatedLoaders = updateItem(loaders, (loader) => loader.id == id, ILoaderEvent);
+        const updatedLoaders = updateItemBy(loaders, (loader) => loader.id == id, ILoaderEvent);
         if (isDefined(updatedLoaders)) {
             this.loaderSubject.next(updatedLoaders);
         }
@@ -1686,7 +1910,7 @@ class ModalComponent {
     }
 }
 ModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ModalComponent, deps: [{ token: ModalService }], target: i0.ɵɵFactoryTarget.Component });
-ModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: ModalComponent, selector: "sfc-modal", inputs: { body: "body", header: "header", footer: "footer", defaultHeaderModel: "defaultHeaderModel", defaultFooterModel: "defaultFooterModel", hideOnEsc: "hideOnEsc", hideOnClickOutside: "hideOnClickOutside" }, host: { listeners: { "document:keydown.escape": "onEscapeKeyDownHandler()" } }, queries: [{ propertyName: "templates", predicate: TemplateReferenceDirective, read: TemplateReferenceDirective }], ngImport: i0, template: "<div class=\"overlay\" [@hideOverlay] (click)=\"hideOnClickOutside && close()\">\r\n    <div class=\"content\" [@hideContent] (click)=\"$event.stopPropagation()\">\r\n\r\n        <div class=\"header\">\r\n\r\n            <sfc-template-content [referenceContent]=\"header\" [templatesContent]=\"templates\"\r\n                [templateType]=\"ModalTemplate.Header\" [defaultContent]=\"defaultHeader\">\r\n            </sfc-template-content>\r\n\r\n            <ng-template #defaultHeader>\r\n                <sfc-default-modal-header [model]=\"defaultHeaderModel\"> </sfc-default-modal-header>\r\n            </ng-template>\r\n\r\n        </div>\r\n\r\n        <div class=\"body\">\r\n\r\n            <sfc-template-content [referenceContent]=\"body\" [templatesContent]=\"templates\"\r\n                [templateType]=\"ModalTemplate.Body\">\r\n            </sfc-template-content>\r\n\r\n        </div>\r\n\r\n        <div class=\"footer\">\r\n\r\n            <sfc-template-content [referenceContent]=\"footer\" [templatesContent]=\"templates\"\r\n                [templateType]=\"ModalTemplate.Footer\" [defaultContent]=\"defaultFooter\">\r\n            </sfc-template-content>\r\n\r\n            <ng-template #defaultFooter>\r\n                <sfc-default-modal-footer [model]=\"defaultFooterModel\"></sfc-default-modal-footer>\r\n            </ng-template>\r\n\r\n        </div>\r\n    </div>\r\n</div>", styles: [".overlay{display:flex;align-items:center;justify-content:center;position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;background-color:#0009;-webkit-backface-visibility:visible;backface-visibility:visible;animation:expand-overlay .4s cubic-bezier(.55,0,.1,1)}@keyframes expand-overlay{0%{visibility:hidden;opacity:0}}.overlay .content{display:flex;align-items:center;position:relative;padding:.7em;margin:auto;background-color:#f5f7fa;max-width:calc(100% - 3em);max-height:calc(100% - 3em);border-radius:3px;overflow-y:auto;box-shadow:0 .125em .625em #656d78;transform:scale(1);flex-direction:column;animation:expand-modal .4s cubic-bezier(.55,0,.1,1)}@keyframes expand-modal{0%{visibility:hidden;opacity:0;transform:scale(1.2)}}.overlay .content>div{width:100%;flex:0 0 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#545e61;flex-direction:row;display:flex;justify-content:center}\n"], components: [{ type: TemplateContentComponent, selector: "sfc-template-content", inputs: ["contextData", "referenceContent", "templateType", "templatesContent", "defaultContent"] }, { type: DefaultModalHeaderComponent, selector: "sfc-default-modal-header", inputs: ["model"] }, { type: DefaultModalFooterComponent, selector: "sfc-default-modal-footer", inputs: ["model"] }], animations: [
+ModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: ModalComponent, selector: "sfc-modal", inputs: { body: "body", header: "header", footer: "footer", defaultHeaderModel: "defaultHeaderModel", defaultFooterModel: "defaultFooterModel", hideOnEsc: "hideOnEsc", hideOnClickOutside: "hideOnClickOutside" }, host: { listeners: { "document:keydown.escape": "onEscapeKeyDownHandler()" } }, queries: [{ propertyName: "templates", predicate: TemplateReferenceDirective, read: TemplateReferenceDirective }], ngImport: i0, template: "<div class=\"overlay\" [@hideOverlay] (click)=\"hideOnClickOutside && close()\">\r\n    <div class=\"content\" [@hideContent] (click)=\"$event.stopPropagation()\">\r\n\r\n        <div class=\"header\">\r\n\r\n            <sfc-template-content [referenceContent]=\"header\" [templatesContent]=\"templates\"\r\n                [templateType]=\"ModalTemplate.Header\" [defaultContent]=\"defaultHeader\">\r\n            </sfc-template-content>\r\n\r\n            <ng-template #defaultHeader>\r\n                <sfc-default-modal-header [model]=\"defaultHeaderModel\"> </sfc-default-modal-header>\r\n            </ng-template>\r\n\r\n        </div>\r\n\r\n        <div class=\"body\">\r\n\r\n            <sfc-template-content [referenceContent]=\"body\" [templatesContent]=\"templates\"\r\n                [templateType]=\"ModalTemplate.Body\">\r\n            </sfc-template-content>\r\n\r\n        </div>\r\n\r\n        <div class=\"footer\">\r\n\r\n            <sfc-template-content [referenceContent]=\"footer\" [templatesContent]=\"templates\"\r\n                [templateType]=\"ModalTemplate.Footer\" [defaultContent]=\"defaultFooter\">\r\n            </sfc-template-content>\r\n\r\n            <ng-template #defaultFooter>\r\n                <sfc-default-modal-footer [model]=\"defaultFooterModel\"></sfc-default-modal-footer>\r\n            </ng-template>\r\n\r\n        </div>\r\n    </div>\r\n</div>", styles: [".overlay{display:flex;align-items:center;justify-content:center;position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;background-color:#0009;-webkit-backface-visibility:visible;backface-visibility:visible;animation:expand-overlay .4s cubic-bezier(.55,0,.1,1)}@keyframes expand-overlay{0%{visibility:hidden;opacity:0}}.overlay .content{display:flex;align-items:center;position:relative;padding:.7em;margin:auto;background-color:#f5f7fa;max-width:calc(100% - 3em);max-height:calc(100% - 3em);border-radius:3px;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"], components: [{ type: TemplateContentComponent, selector: "sfc-template-content", inputs: ["contextData", "referenceContent", "templateType", "templatesContent", "defaultContent"] }, { type: DefaultModalHeaderComponent, selector: "sfc-default-modal-header", inputs: ["model"] }, { type: DefaultModalFooterComponent, selector: "sfc-default-modal-footer", inputs: ["model"] }], animations: [
         trigger('hideOverlay', [
             state('initial', style({ opacity: 1, visibility: 'visible' })),
             state('void', style({ opacity: 0, visibility: 'hidden' })),
@@ -1731,7 +1955,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", 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;overflow-y:auto;box-shadow:0 .125em .625em #656d78;transform:scale(1);flex-direction:column;animation:expand-modal .4s cubic-bezier(.55,0,.1,1)}@keyframes expand-modal{0%{visibility:hidden;opacity:0;transform:scale(1.2)}}.overlay .content>div{width:100%;flex:0 0 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#545e61;flex-direction:row;display:flex;justify-content:center}\n"] }]
+                    ], 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"] }]
         }], ctorParameters: function () { return [{ type: ModalService }]; }, propDecorators: { body: [{
                 type: Input
             }], header: [{
@@ -1779,9 +2003,7 @@ class ModalOpenOnClickDirective {
     }
     ngOnInit() {
         this._closeSubscription = this.modalService.close$
-            .subscribe(() => {
-            this.viewContainer.clear();
-        });
+            .subscribe(() => this.viewContainer.clear());
     }
     ngOnDestroy() {
         var _a;
@@ -1801,6 +2023,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                 args: ['sfcModalOpenOnClick']
             }] } });
 
+class ModalOpenDirective {
+    constructor(templateRef, viewContainer, modalService) {
+        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.viewContainer.clear();
+            this.viewContainer.createEmbeddedView(this.templateRef);
+        });
+    }
+    ngOnDestroy() {
+        this._closeSubscription.unsubscribe();
+        this._openSubscription.unsubscribe();
+    }
+}
+ModalOpenDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ModalOpenDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: ModalService }], target: i0.ɵɵFactoryTarget.Directive });
+ModalOpenDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: ModalOpenDirective, selector: "[sfcModalOpen]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ModalOpenDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[sfcModalOpen]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }, { type: ModalService }]; } });
+
 class HamburgerComponent {
     constructor() {
         this.open = false;
@@ -1852,21 +2100,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
 class ToggleSwitcherComponent {
     constructor() {
         this.active = false;
+        this.disabled = false;
         this.onClick = () => this.active = !this.active;
         this.leftModel = { label: 'Left' };
         this.rightModel = { label: 'Right' };
     }
 }
 ToggleSwitcherComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ToggleSwitcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ToggleSwitcherComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: ToggleSwitcherComponent, selector: "sfc-toggle-switcher", inputs: { active: "active", leftModel: "leftModel", rightModel: "rightModel" }, host: { listeners: { "click": "onClick()" }, properties: { "class.active": "this.active" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"toggle\"></div>\r\n    <div class=\"names\">\r\n        <p class=\"left\">\r\n            <fa-icon *ngIf=\"leftModel.icon\" [icon]=\"leftModel.icon\"></fa-icon>\r\n            <span>{{leftModel.label}}</span>\r\n        </p>\r\n        <p class=\"right\">\r\n            <fa-icon *ngIf=\"rightModel.icon\" [icon]=\"rightModel.icon\"></fa-icon>\r\n            <span>{{rightModel.label}}</span>\r\n        </p>\r\n    </div>\r\n</div>", styles: [":host .container,:host .toggle{height:100%;border-radius:100px}:host .container{width:100%;background-color:#e6e9ed;color:#545e61;border-radius:100px;position:relative;cursor:pointer}:host .container .toggle{position:absolute;width:50%;background-color:#fff;box-shadow:0 .125em .5em #656d78;transition:transform .3s cubic-bezier(.25,.46,.45,.94)}:host .container .names{font-size:90%;font-weight:bolder;width:100%;height:100%;position:relative;display:flex;justify-content:space-around;align-items:center;-webkit-user-select:none;user-select:none;overflow:hidden}:host .container .names p{font-size:90%;text-align:center;margin:0;padding:.5em 1em}:host .container .names p.right{opacity:.5}:host .container .names p fa-icon{margin-right:.25em}:host.active .container{background-color:#e6e9ed}:host.active .container .toggle{transform:translate(100%);background-color:#fff}:host.active .container .names{color:#545e61}:host.active .container .names .left{opacity:.5}:host.active .container .names .right{opacity:1}\n"], components: [{ type: i1$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+ToggleSwitcherComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", 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"], components: [{ type: i1$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ToggleSwitcherComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-toggle-switcher', template: "<div class=\"container\">\r\n    <div class=\"toggle\"></div>\r\n    <div class=\"names\">\r\n        <p class=\"left\">\r\n            <fa-icon *ngIf=\"leftModel.icon\" [icon]=\"leftModel.icon\"></fa-icon>\r\n            <span>{{leftModel.label}}</span>\r\n        </p>\r\n        <p class=\"right\">\r\n            <fa-icon *ngIf=\"rightModel.icon\" [icon]=\"rightModel.icon\"></fa-icon>\r\n            <span>{{rightModel.label}}</span>\r\n        </p>\r\n    </div>\r\n</div>", styles: [":host .container,:host .toggle{height:100%;border-radius:100px}:host .container{width:100%;background-color:#e6e9ed;color:#545e61;border-radius:100px;position:relative;cursor:pointer}:host .container .toggle{position:absolute;width:50%;background-color:#fff;box-shadow:0 .125em .5em #656d78;transition:transform .3s cubic-bezier(.25,.46,.45,.94)}:host .container .names{font-size:90%;font-weight:bolder;width:100%;height:100%;position:relative;display:flex;justify-content:space-around;align-items:center;-webkit-user-select:none;user-select:none;overflow:hidden}:host .container .names p{font-size:90%;text-align:center;margin:0;padding:.5em 1em}:host .container .names p.right{opacity:.5}:host .container .names p fa-icon{margin-right:.25em}:host.active .container{background-color:#e6e9ed}:host.active .container .toggle{transform:translate(100%);background-color:#fff}:host.active .container .names{color:#545e61}:host.active .container .names .left{opacity:.5}:host.active .container .names .right{opacity:1}\n"] }]
+            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"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { active: [{
                 type: Input
             }, {
                 type: HostBinding,
                 args: ['class.' + UIClass.Active]
+            }], disabled: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.' + UIClass.Disabled]
             }], leftModel: [{
                 type: Input
             }], rightModel: [{
@@ -1876,28 +2130,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                 args: ['click']
             }] } });
 
+var CheckmarkType;
+(function (CheckmarkType) {
+    CheckmarkType["Square"] = "square";
+    CheckmarkType["Rounded"] = "rounded";
+})(CheckmarkType || (CheckmarkType = {}));
+
 class CheckmarkComponent {
     constructor() {
         this.active = false;
+        this.disabled = false;
         this.icon = faCheck;
-        this.onClick = () => this.active = !this.active;
+        this.type = CheckmarkType.Rounded;
+        this.showNotActive = true;
     }
 }
 CheckmarkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CheckmarkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CheckmarkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: CheckmarkComponent, selector: "sfc-checkmark", inputs: { active: "active", icon: "icon" }, host: { listeners: { "click": "onClick()" }, properties: { "class.active": "this.active" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <span class=\"check\">\r\n        <fa-icon [icon]=\"icon\"></fa-icon>\r\n    </span>\r\n</div>", styles: [":host{display:inline-block}:host,:host-context(.sfc-default-theme) :host{color:#545e61}:host-context(.sfc-dark-theme) :host{color:#ccd1d9}:host .check{border-radius:50%;border:.18em solid;background:#fff;border-color:#ccd1d9;width:1em;height:1em;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .3s ease}:host .check fa-icon{font-size:.8em;transition:opacity .3s ease}:host .check fa-icon,:host-context(.sfc-default-theme) :host .check fa-icon{opacity:.5}:host-context(.sfc-dark-theme) :host .check fa-icon{opacity:.8}:host .check:hover{border-color:#2bbbad}:host .check:hover fa-icon{color:#2bbbad}:host .check:hover fa-icon,:host-context(.sfc-default-theme) :host .check:hover fa-icon{opacity:.8}:host-context(.sfc-dark-theme) :host .check:hover fa-icon{opacity:1}:host.active .check{border-color:#2bbbad;background:#2bbbad}:host.active .check fa-icon{opacity:1;transform:scale(0);color:#fff;-webkit-text-stroke:0;animation:icon .3s cubic-bezier(1,.008,.565,1.65) .1s 1 forwards}@keyframes icon{0%{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}\n"], components: [{ type: i1$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
+CheckmarkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", 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 *ngIf=\"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:#ccd1d9}:host .check{border:.18em solid;background:#fff;border-color:#ccd1d9;width:1em;height:1em;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .3s ease}:host .check,:host-context(.sfc-default-theme) :host .check{background:#fff}:host-context(.sfc-dark-theme) :host .check{background:transparent}:host .check fa-icon{font-size:.8em;transition:opacity .3s ease}:host .check fa-icon,:host-context(.sfc-default-theme) :host .check fa-icon{opacity:.5}:host-context(.sfc-dark-theme) :host .check fa-icon{opacity:.8}:host .check:hover{border-color:#2bbbad}:host .check:hover fa-icon{color:#2bbbad}:host .check:hover fa-icon,:host-context(.sfc-default-theme) :host .check:hover fa-icon{opacity:.8}:host-context(.sfc-dark-theme) :host .check:hover fa-icon{opacity:1}:host.active .check{border-color:#2bbbad;background:#2bbbad}:host.active .check fa-icon{opacity:1;transform:scale(0);color:#fff;-webkit-text-stroke:0;animation:icon .3s cubic-bezier(1,.008,.565,1.65) .1s 1 forwards}@keyframes icon{0%{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}:host.rounded .check{border-radius:50%}: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"], components: [{ type: i1$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CheckmarkComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-checkmark', template: "<div class=\"container\">\r\n    <span class=\"check\">\r\n        <fa-icon [icon]=\"icon\"></fa-icon>\r\n    </span>\r\n</div>", styles: [":host{display:inline-block}:host,:host-context(.sfc-default-theme) :host{color:#545e61}:host-context(.sfc-dark-theme) :host{color:#ccd1d9}:host .check{border-radius:50%;border:.18em solid;background:#fff;border-color:#ccd1d9;width:1em;height:1em;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .3s ease}:host .check fa-icon{font-size:.8em;transition:opacity .3s ease}:host .check fa-icon,:host-context(.sfc-default-theme) :host .check fa-icon{opacity:.5}:host-context(.sfc-dark-theme) :host .check fa-icon{opacity:.8}:host .check:hover{border-color:#2bbbad}:host .check:hover fa-icon{color:#2bbbad}:host .check:hover fa-icon,:host-context(.sfc-default-theme) :host .check:hover fa-icon{opacity:.8}:host-context(.sfc-dark-theme) :host .check:hover fa-icon{opacity:1}:host.active .check{border-color:#2bbbad;background:#2bbbad}:host.active .check fa-icon{opacity:1;transform:scale(0);color:#fff;-webkit-text-stroke:0;animation:icon .3s cubic-bezier(1,.008,.565,1.65) .1s 1 forwards}@keyframes icon{0%{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}\n"] }]
+            args: [{ selector: 'sfc-checkmark', template: "<div class=\"container\">\r\n    <span class=\"check\">\r\n        <fa-icon *ngIf=\"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:#ccd1d9}:host .check{border:.18em solid;background:#fff;border-color:#ccd1d9;width:1em;height:1em;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .3s ease}:host .check,:host-context(.sfc-default-theme) :host .check{background:#fff}:host-context(.sfc-dark-theme) :host .check{background:transparent}:host .check fa-icon{font-size:.8em;transition:opacity .3s ease}:host .check fa-icon,:host-context(.sfc-default-theme) :host .check fa-icon{opacity:.5}:host-context(.sfc-dark-theme) :host .check fa-icon{opacity:.8}:host .check:hover{border-color:#2bbbad}:host .check:hover fa-icon{color:#2bbbad}:host .check:hover fa-icon,:host-context(.sfc-default-theme) :host .check:hover fa-icon{opacity:.8}:host-context(.sfc-dark-theme) :host .check:hover fa-icon{opacity:1}:host.active .check{border-color:#2bbbad;background:#2bbbad}:host.active .check fa-icon{opacity:1;transform:scale(0);color:#fff;-webkit-text-stroke:0;animation:icon .3s cubic-bezier(1,.008,.565,1.65) .1s 1 forwards}@keyframes icon{0%{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}:host.rounded .check{border-radius:50%}: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"] }]
         }], propDecorators: { active: [{
                 type: Input
             }, {
                 type: HostBinding,
                 args: ['class.' + UIClass.Active]
+            }], disabled: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.' + UIClass.Disabled]
             }], icon: [{
                 type: Input
-            }], onClick: [{
-                type: HostListener,
-                args: ['click']
+            }], type: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class']
+            }], showNotActive: [{
+                type: Input
             }] } });
 
 class PaginationConstants {
@@ -2126,6 +2397,209 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                 args: ['click']
             }] } });
 
+class LoadMoreService {
+    constructor() {
+        this.START_PAGE = 1;
+        this._page = this.START_PAGE;
+        this.moreSubject = new Subject();
+        this.more$ = this.moreSubject.asObservable();
+    }
+    more() {
+        this._page++;
+        this.moreSubject.next(this._page);
+    }
+    reset() {
+        this._page = this.START_PAGE;
+    }
+}
+LoadMoreService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: LoadMoreService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+LoadMoreService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: LoadMoreService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: LoadMoreService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+var LoadContainerType;
+(function (LoadContainerType) {
+    LoadContainerType["Dropdown"] = "dropdown";
+    LoadContainerType["Table"] = "table";
+})(LoadContainerType || (LoadContainerType = {}));
+
+class LoadContainerConstants {
+}
+LoadContainerConstants.DEFAULT_PAGE_SIZE = 5;
+LoadContainerConstants.DEFAULT_NOT_FOUND_LABEL = 'Not found';
+
+class LoadMoreButtonComponent {
+    constructor() {
+        this.DEFAULT_LABEL = 'Show more';
+        this.icon = faChevronCircleDown;
+        this.more = new EventEmitter();
+    }
+    ngOnInit() {
+        if (isNullOrEmptyString(this.label))
+            this.label = this.DEFAULT_LABEL;
+    }
+}
+LoadMoreButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: LoadMoreButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+LoadMoreButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", 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;color:#545e61;transition:color .5s;padding:.5em 0 1em}: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:#2bbbad}\n"], components: [{ type: DelimeterComponent, selector: "sfc-delimeter" }, { type: i1$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: MouseDownDirective, selector: "[sfcMouseDown]", inputs: ["button"], outputs: ["sfcMouseDown"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", 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;color:#545e61;transition:color .5s;padding:.5em 0 1em}: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:#2bbbad}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], more: [{
+                type: Output
+            }] } });
+
+class LoadContainerComponent {
+    constructor(loaderService, loadMoreService) {
+        this.loaderService = loaderService;
+        this.loadMoreService = loadMoreService;
+        this.ComponentSize = ComponentSize;
+        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;
+        this.notFoundLabel = LoadContainerConstants.DEFAULT_NOT_FOUND_LABEL;
+        this.handleError = new EventEmitter();
+        this.handleSuccess = new EventEmitter();
+        this.handleLoading = new EventEmitter();
+        this.next = false;
+        this.empty = false;
+        this._loading = false;
+    }
+    set model(model) {
+        if (isDefined(model)) {
+            const parameters$ = this.buildParameters(model.predicate$), data$ = isDefined(model.loader) ?
+                this.buildDynamic(parameters$, model.loader) : this.buildStatic(parameters$, model);
+            if (isDefined(this._subscription))
+                this._subscription.unsubscribe();
+            this._subscription = data$.subscribe({
+                next: (result) => this.success(result),
+                error: (error) => this.error(error)
+            });
+        }
+    }
+    get scrollPosition() {
+        return !this.allowLoadMore || this.showLoadMoreButton ? [] : [Position.Bottom];
+    }
+    get allowLoadMore() { return this.next && this.loadMore; }
+    get hideLoadMoreButton() { return !(this.allowLoadMore && this.showLoadMoreButton); }
+    get isEmpty() { return this.empty && this.showEmpty; }
+    set loading(value) {
+        this._loading = value;
+        if (value)
+            this.loaderService.show(this.id, true);
+        else
+            this.loaderService.hide(this.id);
+        this.handleLoading.emit(value);
+    }
+    ngOnDestroy() {
+        if (this._subscription)
+            this._subscription.unsubscribe();
+    }
+    more(event) {
+        event.preventDefault();
+        this.loadMoreService.more();
+    }
+    onScroll() {
+        if (this.allowLoadMore)
+            this.loadMoreService.more();
+    }
+    success(result) {
+        this.next = result.next;
+        this.loading = false;
+        this.empty = !any(result.items);
+        this.handleSuccess.emit(result);
+    }
+    error(error) {
+        this.loading = false;
+        this.empty = false;
+        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();
+        }), switchMap((value) => {
+            return this.loadMoreService.more$.pipe(startWith(this.loadMoreService.START_PAGE), tap(() => this.loading = true), map((page) => {
+                return { params: value, page: page };
+            }));
+        }));
+        return parameters$;
+    }
+    buildDynamic(parameters$, loader) {
+        return parameters$.pipe(switchMap((parameters) => loader(parameters)));
+    }
+    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 };
+            return data;
+        }));
+    }
+}
+LoadContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: LoadContainerComponent, deps: [{ token: LoaderService }, { token: LoadMoreService }], target: i0.ɵɵFactoryTarget.Component });
+LoadContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", 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;background:#fff}:host .container .content{cursor:initial;overflow-y:auto;height:inherit}:host .container .content sfc-load-more-button ::ng-deep sfc-delimeter{background:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 17%,rgba(0,0,0,.3) 83%,rgba(0,0,0,0) 100%)}:host .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"], components: [{ type: BounceLoaderComponent, selector: "sfc-bounce-loader" }, { type: LoadMoreButtonComponent, selector: "sfc-load-more-button", inputs: ["label", "icon"], outputs: ["more"] }], directives: [{ type: ComponentSizeDirective, selector: "[sfcComponentSize]", inputs: ["sfcComponentSize", "customSize"] }, { type: ScrollIntoViewDirective, selector: "[sfcScrollIntoView]", inputs: ["sfcScrollIntoView", "options"] }, { type: ScrollTrackerDirective, selector: "[sfcScrollTracker]", inputs: ["positions"], outputs: ["sfcScrollTracker"] }, { type: MouseDownDirective, selector: "[sfcMouseDown]", inputs: ["button"], outputs: ["sfcMouseDown"] }, { type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", 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;background:#fff}:host .container .content{cursor:initial;overflow-y:auto;height:inherit}:host .container .content sfc-load-more-button ::ng-deep sfc-delimeter{background:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 17%,rgba(0,0,0,.3) 83%,rgba(0,0,0,0) 100%)}:host .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"] }]
+        }], ctorParameters: function () { return [{ type: LoaderService }, { type: LoadMoreService }]; }, propDecorators: { id: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class']
+            }], open: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: [`class.${UIClass.Open}`]
+            }], size: [{
+                type: Input
+            }], loadMore: [{
+                type: Input
+            }], showEmpty: [{
+                type: Input
+            }], showLoadMoreButton: [{
+                type: Input
+            }], loadMoreLabel: [{
+                type: Input
+            }], notFoundLabel: [{
+                type: Input
+            }], model: [{
+                type: Input
+            }], scrollTarget: [{
+                type: Input
+            }], handleError: [{
+                type: Output
+            }], handleSuccess: [{
+                type: Output
+            }], handleLoading: [{
+                type: Output
+            }], contentEl: [{
+                type: ViewChild,
+                args: ['content']
+            }], isEmpty: [{
+                type: HostBinding,
+                args: [`class.${UIClass.Empty}`]
+            }], _loading: [{
+                type: HostBinding,
+                args: [`class.${UIClass.Loading}`]
+            }] } });
+
 class NgxSfcCommonModule {
 }
 NgxSfcCommonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NgxSfcCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -2138,6 +2612,9 @@ NgxSfcCommonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", vers
         MouseDownDirective,
         ComponentSizeDirective,
         DestroyParentDirective,
+        DomChangesDirective,
+        ScrollTrackerDirective,
+        ScrollIntoViewDirective,
         // components
         ButtonComponent,
         TooltipComponent,
@@ -2150,14 +2627,19 @@ NgxSfcCommonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", vers
         DotsComponent,
         PaginationComponent,
         SortingComponent,
+        LoadMoreButtonComponent,
+        LoadContainerComponent,
         // loaders
         BounceLoaderComponent,
         CircleLoaderComponent,
         // modal
         ModalComponent,
+        ModalOpenDirective,
         ModalOpenOnClickDirective,
         DefaultModalHeaderComponent,
-        DefaultModalFooterComponent
+        DefaultModalFooterComponent,
+        // pipes
+        SwitchMultiCasePipe
     ], imports: [CommonModule,
         BrowserAnimationsModule,
         FontAwesomeModule], exports: [
@@ -2169,6 +2651,9 @@ NgxSfcCommonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", vers
         MouseDownDirective,
         ComponentSizeDirective,
         DestroyParentDirective,
+        DomChangesDirective,
+        ScrollTrackerDirective,
+        ScrollIntoViewDirective,
         // components
         ButtonComponent,
         TooltipComponent,
@@ -2181,14 +2666,19 @@ NgxSfcCommonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", vers
         HamburgerComponent,
         PaginationComponent,
         SortingComponent,
+        LoadMoreButtonComponent,
+        LoadContainerComponent,
         // loaders
         BounceLoaderComponent,
         CircleLoaderComponent,
         // modal
         ModalComponent,
+        ModalOpenDirective,
         ModalOpenOnClickDirective,
         DefaultModalHeaderComponent,
-        DefaultModalFooterComponent
+        DefaultModalFooterComponent,
+        // pipes
+        SwitchMultiCasePipe
     ] });
 NgxSfcCommonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NgxSfcCommonModule, providers: [DOCUMENT_PROVIDERS, WINDOW_PROVIDERS], imports: [[
             CommonModule,
@@ -2207,6 +2697,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                         MouseDownDirective,
                         ComponentSizeDirective,
                         DestroyParentDirective,
+                        DomChangesDirective,
+                        ScrollTrackerDirective,
+                        ScrollIntoViewDirective,
                         // components
                         ButtonComponent,
                         TooltipComponent,
@@ -2219,14 +2712,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                         DotsComponent,
                         PaginationComponent,
                         SortingComponent,
+                        LoadMoreButtonComponent,
+                        LoadContainerComponent,
                         // loaders
                         BounceLoaderComponent,
                         CircleLoaderComponent,
                         // modal
                         ModalComponent,
+                        ModalOpenDirective,
                         ModalOpenOnClickDirective,
                         DefaultModalHeaderComponent,
-                        DefaultModalFooterComponent
+                        DefaultModalFooterComponent,
+                        // pipes
+                        SwitchMultiCasePipe
                     ],
                     imports: [
                         CommonModule,
@@ -2242,6 +2740,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                         MouseDownDirective,
                         ComponentSizeDirective,
                         DestroyParentDirective,
+                        DomChangesDirective,
+                        ScrollTrackerDirective,
+                        ScrollIntoViewDirective,
                         // components
                         ButtonComponent,
                         TooltipComponent,
@@ -2254,14 +2755,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                         HamburgerComponent,
                         PaginationComponent,
                         SortingComponent,
+                        LoadMoreButtonComponent,
+                        LoadContainerComponent,
                         // loaders
                         BounceLoaderComponent,
                         CircleLoaderComponent,
                         // modal
                         ModalComponent,
+                        ModalOpenDirective,
                         ModalOpenOnClickDirective,
                         DefaultModalHeaderComponent,
-                        DefaultModalFooterComponent
+                        DefaultModalFooterComponent,
+                        // pipes
+                        SwitchMultiCasePipe
                     ],
                     providers: [DOCUMENT_PROVIDERS, WINDOW_PROVIDERS]
                 }]
@@ -2275,5 +2781,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BounceLoaderComponent, BrowserDocumentRef, BrowserWindowRef, ButtonComponent, ButtonType, CheckmarkComponent, CircleLoaderComponent, CircleLoaderType, ClickOutsideDirective, CloseComponent, CommonConstants, ComponentSize, ComponentSizeDirective, DOCUMENT, DOCUMENT_PROVIDERS, DateTimeConstants, DefaultModalFooterComponent, DefaultModalHeaderComponent, DelimeterComponent, DestroyParentDirective, Direction, DocumentRef, DotsComponent, HamburgerComponent, LoaderService, MediaLimits, ModalComponent, ModalOpenOnClickDirective, ModalService, ModalTemplate, MouseDownDirective, NgxSfcCommonModule, PaginationComponent, PaginationService, Position, ResizeService, ShowHideElementDirective, SortingComponent, SortingDirection, SortingService, TemplateContentComponent, TemplateReferenceDirective, Theme, ThrowElementOnHoverDirective, ToggleSwitcherComponent, TooltipComponent, TooltipType, UIClass, UIConstants, WINDOW, WINDOW_PROVIDERS, WindowRef, addClasses, addItem, addPropertyToObject, all, any, browserDocumentProvider, browserWindowProvider, contains, distinct, documentFactory, documentProvider, firstItem, firstOrDefault, getCalcValue, getCollectionOrEmpty, getCssLikeValue, getFileExtension, getFirstDayOfMonth, getFirstDayOfMonthByYearAndMonth, getFirstDayOfYear, getLastDayOfMonth, getLastDayOfMonthByYearAndMonth, getLastDayOfYear, getNextMonth, getNextYear, getPreviousMonth, getPreviousYear, getValueFromCssLikeValue, getWeeksNumberInMonth, hasItem, hasItemBy, hasObjectItem, hexToRgb, isAsyncData, isDateGreat, isDateGreatOrEqual, isDateTimeGreat, isDateTimeGreatOrEqual, isDefined, isEqualDates, isImage, isNullOrEmptyString, isNumeric, isObject, lastItem, max, mergeDeep, nameof, parseFileSize, readAsDataURL, remove, removeClasses, removeItem, removePropertyFromObject, replaceRgbOpacity, rgbToHex, setDay, setHours, setMinutes, setYear, skip, sortBy, sortByPath, sum, trim, updateItem, where, windowFactory, windowProvider };
+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, 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, isEqualDates, isImage, isNullOrEmptyString, isNumeric, isObject, lastItem, max, mergeDeep, nameof, 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