ngx-sfc-common 0.0.26 → 0.0.28

package/fesm2020/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, Pipe, Component, HostBinding, ContentChildren, ViewChild, NgModule } from '@angular/core';
+import { InjectionToken, Injectable, PLATFORM_ID, EventEmitter, Directive, Inject, Input, Output, HostListener, Pipe, Component, HostBinding, Optional, ContentChildren, ViewChild, NgModule } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import { isPlatformBrowser, formatDate, CommonModule } from '@angular/common';
 import * as i1$2 from '@fortawesome/angular-fontawesome';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import { Subject, fromEvent, Observable, distinctUntilChanged, startWith, BehaviorSubject, filter, map, EMPTY, tap, switchMap, combineLatest, of } from 'rxjs';
+import { Subject, BehaviorSubject, fromEvent, Observable, distinctUntilChanged, startWith, filter, map, EMPTY, combineLatest, tap, switchMap, of } from 'rxjs';
 import * as i1 from '@angular/platform-browser';
 import { HttpParams } from '@angular/common/http';
 import { trigger, state, style, transition, group, query, animate, animateChild } from '@angular/animations';
-import { faTimes, faWindowRestore, faCheck, faChevronLeft, faChevronRight, faChevronCircleDown, faChevronUp, faChevronDown } from '@fortawesome/free-solid-svg-icons';
+import { faWindowRestore, faTimes, faCheck, faChevronLeft, faChevronRight, faChevronCircleDown, faChevronUp, faChevronDown } from '@fortawesome/free-solid-svg-icons';
 
 /**
  * Component sizes
@@ -123,6 +123,32 @@ var Compare;
 })(Compare || (Compare = {}));
 ;
 
+var State;
+(function (State) {
+    State["Added"] = "added";
+    State["Removed"] = "removed";
+})(State || (State = {}));
+
+var NotificationType;
+(function (NotificationType) {
+    NotificationType["Info"] = "info";
+    NotificationType["Success"] = "success";
+    NotificationType["Failed"] = "failed";
+})(NotificationType || (NotificationType = {}));
+
+var Select;
+(function (Select) {
+    Select["Single"] = "single";
+    Select["Multiple"] = "multiple";
+})(Select || (Select = {}));
+
+var ItemsView;
+(function (ItemsView) {
+    ItemsView["List"] = "list";
+    ItemsView["Icons"] = "icons";
+    ItemsView["Cards"] = "cards";
+})(ItemsView || (ItemsView = {}));
+
 /**
  * Create a new injection token for injecting the Document into a component.
  */
@@ -361,6 +387,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 }]
         }] });
 
+class ObservableModel {
+    constructor(defaultValue = null) {
+        this.defaultValue = defaultValue;
+        this.subject = new BehaviorSubject(this.defaultValue);
+        this.value$ = this.subject.asObservable();
+    }
+    get value() { return this.subject.value; }
+}
+
+class ReloadService {
+    constructor() {
+        /* Properties */
+        this.model = new ObservableModel();
+    }
+    get reload$() { return this.model.value$; }
+    /* End Properties */
+    reload(...ids) {
+        this.model.subject.next(ids);
+    }
+}
+ReloadService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ReloadService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ReloadService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ReloadService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ReloadService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 class ClickOutsideDirective {
     constructor(elementRef, document) {
         this.elementRef = elementRef;
@@ -375,7 +428,8 @@ class ClickOutsideDirective {
         this.action = new EventEmitter();
     }
     ngAfterViewInit() {
-        this._clickSubscription = fromEvent(this.document, 'click')
+        // capture: true allow to catch event in early state (ignore stop propagation)
+        this._clickSubscription = fromEvent(this.document, 'click', { capture: true })
             .subscribe(event => this.onClick(event));
     }
     ngOnDestroy() {
@@ -463,6 +517,7 @@ UIConstants.CSS_CENTER = 'center';
 UIConstants.CSS_CLASS_FIXED = 'fixed';
 UIConstants.CSS_CLASS_BACKGROUND = 'background';
 UIConstants.CSS_CLASS_TOP = 'top';
+UIConstants.CSS_CLASS_SCROLL = 'scroll';
 UIConstants.RGB_OPACITY_PLACEHOLDER = '{opacity}';
 
 class ShowHideElementDirective {
@@ -505,15 +560,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             }] } });
 
 class IfDirective {
+    /* End Properties */
     constructor(el) {
         this.el = el;
         this.display = this.style.display;
     }
+    /* Inputs */
     set sfcIf(show) {
         this.style.display = show
             ? this.display || UIConstants.CSS_INITIAL
             : UIConstants.CSS_NONE;
     }
+    /* End Inputs */
+    /* Properties */
     get style() { return this.el.nativeElement.style; }
 }
 IfDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: IfDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
@@ -799,6 +858,36 @@ function isDateTimeGreatOrEqual(date1, date2) {
     return new Date(date1.getFullYear(), date1.getMonth(), date1.getDate(), date1.getHours(), date1.getMinutes())
         >= new Date(date2.getFullYear(), date2.getMonth(), date2.getDate(), date2.getHours(), date2.getMinutes());
 }
+/**
+ * Return true if first time greater or equal to second time
+ * @param date1 First date time value
+ * @param date2 Second date time value
+ * @returns True if first time greater or equal to second time
+ */
+function isTimeGreatOrEqual(date1, date2) {
+    return new Date(0, 0, 0, date1.getHours(), date1.getMinutes())
+        >= new Date(0, 0, 0, date2.getHours(), date2.getMinutes());
+}
+/**
+ * Return true if first time less or equal to second time
+ * @param date1 First date time value
+ * @param date2 Second date time value
+ * @returns True if first time less or equal to second time
+ */
+function isDateTimeLessOrEqual(date1, date2) {
+    return new Date(0, 0, 0, date1.getHours(), date1.getMinutes())
+        <= new Date(0, 0, 0, date2.getHours(), date2.getMinutes());
+}
+/**
+ * Return true if first time less or equal to second time
+ * @param date1 First date time value
+ * @param date2 Second date time value
+ * @returns True if first time less or equal to second time
+ */
+function isTimeLessOrEqual(date1, date2) {
+    return new Date(date1.getFullYear(), date1.getMonth(), date1.getDate(), date1.getHours(), date1.getMinutes())
+        <= new Date(date2.getFullYear(), date2.getMonth(), date2.getDate(), date2.getHours(), date2.getMinutes());
+}
 /**
  * Convert UTC date to local
  * @param date Date value
@@ -834,6 +923,8 @@ function convertDateToTimestamp(date, locale = DateTimeConstants.DEFAULT_LOCALE)
  * @returns Age
  */
 function getAge(birthdate) {
+    if (!birthdate)
+        return null;
     const now = new Date();
     let age = now.getFullYear() - birthdate.getFullYear();
     const monthDifference = now.getMonth() - birthdate.getMonth();
@@ -894,11 +985,6 @@ function removePropertyFromObject(obj, property) {
         delete obj[property];
     }
 }
-/**
-  * Deep merge object with others
-  * @param target Object to merge
-  * @param sources
-  */
 /**
  * Deep merge object with others
  * @param target  Object to merge
@@ -931,12 +1017,20 @@ function mergeDeep(target, ...sources) {
 const nameof = (name) => name;
 /**
    * Determines if the input is a Number or something that can be coerced to a Number
-   * @param - The input to be tested
+   * @param number The input to be tested
    * @returns - An indication if the input is a Number or can be coerced to a Number
    */
 function isNumeric(number) {
     return !isNaN(parseFloat(number));
 }
+/**
+ *  Determines if the input is a string
+ * @param value The input to be tested
+ * @returns An indication if the input is a string
+ */
+function isString(value) {
+    return typeof value === 'string';
+}
 /**
  * Return true if current browser is Chrome
  * @returns If current browser is Chrome
@@ -999,6 +1093,11 @@ function isEqual(obj1, obj2) {
         // If no errors, return true
         return true;
     }
+    function areFilesEqual() {
+        return obj1.lastModified === obj2.lastModified
+            && obj1.size === obj2.size
+            && obj1.type === obj2.type;
+    }
     function areFunctionsEqual() {
         return obj1.toString() === obj2.toString();
     }
@@ -1018,6 +1117,8 @@ function isEqual(obj1, obj2) {
         return areArraysEqual();
     if (type === 'date')
         return areDatesEqual();
+    if (type === 'file')
+        return areFilesEqual();
     if (type === 'object')
         return areObjectsEqual();
     if (type === 'function')
@@ -1033,6 +1134,28 @@ function generateGuid() {
         return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
     };
     return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
+}
+/**
+ * Check if value is Json parsable string
+ * @param value string value
+ * @returns True if string can be JSON parsed
+ */
+function isJsonString(value) {
+    try {
+        const json = JSON.parse(value);
+        return (typeof json === 'object');
+    }
+    catch (e) {
+        return false;
+    }
+}
+/**
+ * Stop propagation and prevent default
+ * @param event Event object
+ */
+function stopAndPreventPropagation(event) {
+    event.preventDefault();
+    event.stopPropagation();
 }
 
 /**
@@ -1266,6 +1389,15 @@ property, value) {
         && collection.findIndex(item => item.hasOwnProperty(property)
             && item[property] === value) !== CommonConstants.NOT_FOUND_INDEX;
 }
+/**
+ * Return true if first collection has item in second collection
+ * @param collection1 Array of objects where search
+ * @param collection2 Array of objects where try to find
+ * @returns
+ */
+function hasAnyItem(collection1, collection2) {
+    return collection1.some(item => collection2.includes(item));
+}
 /**
  * Return value from collection by predicate function
  * @param collection Array of items
@@ -1500,6 +1632,23 @@ function updateItemBy(collection, predicate, newItem) {
  */
 function getCollectionOrEmpty(collection) {
     return isDefined(collection) ? collection : [];
+}
+/**
+ * Check if arrays are equal
+ * @param a First array
+ * @param b Second array
+ * @returns True if arrays are equal
+ */
+function isArraysEquals(a, b) {
+    if (a.length !== b.length)
+        return false;
+    a.sort();
+    b.sort();
+    for (let i = 0; i < a.length; i++) {
+        if (a[i] !== b[i])
+            return false;
+    }
+    return true;
 }
 
 /**
@@ -1514,6 +1663,8 @@ function buildHttpParams(value) {
     return httpParams;
     function _build(params, value, path, isArray = false) {
         const ARRAY_PART = ']';
+        if (!value)
+            return;
         Object.keys(value).forEach(key => {
             if (value[key] instanceof Array) {
                 _build(params, value[key], `${path}${key}[`, true);
@@ -1915,11 +2066,10 @@ SwitchMultiCasePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", vers
 SwitchMultiCasePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: SwitchMultiCasePipe, name: "sfcSwitchMultiCase" });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SwitchMultiCasePipe, decorators: [{
             type: Pipe,
-            args: [{
-                    name: 'sfcSwitchMultiCase'
-                }]
+            args: [{ name: 'sfcSwitchMultiCase' }]
         }] });
 
+// This pipe has "pure: false" (impure pipe) which has huge impact on performance!
 class SortByPipe {
     transform(value, path, direction = SortingDirection.Ascending) {
         if (!any(value)) {
@@ -1935,10 +2085,22 @@ class SortByPipe {
     }
 }
 SortByPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SortByPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-SortByPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: SortByPipe, name: "sfcSortBy" });
+SortByPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: SortByPipe, name: "sfcSortBy", pure: false });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SortByPipe, decorators: [{
             type: Pipe,
-            args: [{ name: 'sfcSortBy' }]
+            args: [{ name: 'sfcSortBy', pure: false }]
+        }] });
+
+class RepeatPipe {
+    transform(value) {
+        return [].constructor(value);
+    }
+}
+RepeatPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: RepeatPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+RepeatPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: RepeatPipe, name: "sfcRepeat" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: RepeatPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'sfcRepeat' }]
         }] });
 
 var ButtonType;
@@ -2245,21 +2407,25 @@ var ModalTemplate;
 
 class ModalService {
     constructor() {
-        this.subject = new BehaviorSubject({ open: false });
-        this.modal$ = this.subject.asObservable();
+        this.model = new ObservableModel();
+        this.isOpen = false;
     }
-    get isOpen() {
-        return this.subject.value.open;
+    /* Properties */
+    get modal$() { return this.model.value$; }
+    /* End Properties */
+    toggle(id, args) {
+        this.emit({ open: !this.isOpen, id: id, args: args });
     }
-    toggle() {
-        this.subject.next({ open: !this.isOpen });
+    close(id, args) {
+        this.emit({ open: false, id: id, args: args });
     }
-    close() {
-        this.subject.next({ open: false });
+    open(id, args) {
+        this.emit({ open: true, id: id, args: args });
     }
-    open(args) {
-        this.args = args;
-        this.subject.next({ open: true, args: args });
+    emit(event) {
+        this.args = event.args;
+        this.isOpen = event.open;
+        this.model.subject.next(event);
     }
 }
 ModalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
@@ -2271,6 +2437,83 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 }]
         }] });
 
+class ModalOpenDirective {
+    /* End Subscriptions */
+    constructor(templateRef, viewContainer, modalService) {
+        this.templateRef = templateRef;
+        this.viewContainer = viewContainer;
+        this.modalService = modalService;
+        this._openSubscription = this.modalService.modal$
+            .pipe(filter((event) => event.id === this.id))
+            .subscribe((event) => {
+            this.viewContainer.clear();
+            if (event.open)
+                this.viewContainer.createEmbeddedView(this.templateRef);
+        });
+    }
+    ngOnDestroy() {
+        this._openSubscription.unsubscribe();
+    }
+}
+ModalOpenDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ModalOpenDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: ModalService }], target: i0.ɵɵFactoryTarget.Directive });
+ModalOpenDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: ModalOpenDirective, selector: "[sfcModalOpen]", inputs: { id: ["sfcModalOpen", "id"] }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ModalOpenDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[sfcModalOpen]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }, { type: ModalService }]; }, propDecorators: { id: [{
+                type: Input,
+                args: ['sfcModalOpen']
+            }] } });
+
+class ModalOpenOnClickDirective {
+    /* End Subscriptions */
+    constructor(templateRef, viewContainer, modalService) {
+        this.templateRef = templateRef;
+        this.viewContainer = viewContainer;
+        this.modalService = modalService;
+        this.elements = [];
+        this.clickHandler = (() => {
+            this.viewContainer.clear();
+            this.viewContainer.createEmbeddedView(this.templateRef);
+            this.modalService.toggle(this.id);
+        }).bind(this);
+    }
+    /* Inputs */
+    set modalOpenOnClick(model) {
+        if (!isDefined(model.elements) || !isDefined(model.id))
+            return;
+        this._id = model.id;
+        if (model.elements instanceof HTMLElement)
+            this.elements = [model.elements];
+        else
+            this.elements = model.elements;
+        this.elements.forEach(el => el.addEventListener('click', this.clickHandler));
+    }
+    get id() { return this._id; }
+    ngOnInit() {
+        this._closeSubscription = this.modalService.modal$
+            .pipe(filter((event) => !event.open && this.id === event.id))
+            .subscribe(() => this.viewContainer.clear());
+    }
+    ngOnDestroy() {
+        this._closeSubscription?.unsubscribe();
+        this.elements.forEach(el => el.removeEventListener('click', this.clickHandler));
+    }
+}
+ModalOpenOnClickDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ModalOpenOnClickDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: ModalService }], target: i0.ɵɵFactoryTarget.Directive });
+ModalOpenOnClickDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: ModalOpenOnClickDirective, selector: "[sfcModalOpenOnClick]", inputs: { modalOpenOnClick: ["sfcModalOpenOnClick", "modalOpenOnClick"] }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ModalOpenOnClickDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[sfcModalOpenOnClick]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }, { type: ModalService }]; }, propDecorators: { modalOpenOnClick: [{
+                type: Input,
+                args: ['sfcModalOpenOnClick']
+            }] } });
+
 class TemplateContentComponent {
     get showDefault() {
         return !isDefined(this.referenceContent)
@@ -2298,6 +2541,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Input
             }] } });
 
+class DefaultModalHeaderConstants {
+}
+DefaultModalHeaderConstants.DEFAULT_MODAL_HEADER_MODEL = {
+    icon: faWindowRestore,
+    showCloseIcon: true,
+    text: 'Modal'
+};
+
 class CloseComponent {
     constructor() {
         this.faTimes = faTimes;
@@ -2311,60 +2562,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
         }] });
 
 class DefaultModalHeaderComponent {
+    /* End Properties */
     constructor(modalService) {
         this.modalService = modalService;
-        this.DEFAULT_MODAL_HEADER_MODEL = {
-            icon: faWindowRestore,
-            showCloseIcon: true,
-            text: 'Modal'
-        };
-    }
-    get icon() {
-        return this.model?.icon || faWindowRestore;
     }
+    /* End Inputs */
+    /* Properties */
+    get icon() { return this.model?.icon || faWindowRestore; }
     ngOnInit() {
         if (!isDefined(this.model))
-            this.model = this.DEFAULT_MODAL_HEADER_MODEL;
+            this.model = DefaultModalHeaderConstants.DEFAULT_MODAL_HEADER_MODEL;
     }
     onClose() {
-        this.modalService.close();
+        this.modalService.close(this.id);
     }
 }
 DefaultModalHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DefaultModalHeaderComponent, deps: [{ token: ModalService }], target: i0.ɵɵFactoryTarget.Component });
-DefaultModalHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DefaultModalHeaderComponent, selector: "sfc-default-modal-header", inputs: { model: "model" }, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"content\">\r\n        <fa-icon *ngIf=\"icon\" class=\"icon\" [icon]=\"icon\"></fa-icon>\r\n        <span *ngIf=\"model.text\" class=\"label\">{{model.text}}</span>\r\n        <sfc-close *ngIf=\"model.showCloseIcon\" (click)=\"onClose()\"></sfc-close>\r\n    </div>\r\n\r\n    <sfc-delimeter></sfc-delimeter>\r\n</div>", styles: [":host{display:inline-flex;width:100%}:host .container{width:100%;padding-bottom:.5em}:host .container .content{display:flex;align-items:center;justify-content:center;padding:.5em 0}:host .container .content .icon{position:absolute;left:1.5em;font-size:1.3em}:host .container .content .label{font-size:1.2em;font-weight:700;-webkit-user-select:none;user-select:none;padding:0 .7em}:host .container .content sfc-close{position:absolute;right:1.5em;color:#545e61}:host .container .content sfc-close:hover{color:#ffce54}:host .container sfc-delimeter.horizontal:before{transition:border-image .5s ease}:host .container sfc-delimeter.horizontal:before,:host-context(.sfc-default-theme) :host .container sfc-delimeter.horizontal:before{border-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host-context(.sfc-dark-theme) :host .container sfc-delimeter.horizontal:before{border-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host .container sfc-delimeter.horizontal:after{transition:border-image .5s ease}:host .container sfc-delimeter.horizontal:after,:host-context(.sfc-default-theme) :host .container sfc-delimeter.horizontal:after{border-image:linear-gradient(to left,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host-context(.sfc-dark-theme) :host .container sfc-delimeter.horizontal:after{border-image:linear-gradient(to left,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host .container sfc-delimeter.horizontal span{color:#545e61}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "component", type: DelimeterComponent, selector: "sfc-delimeter", inputs: ["label", "direction"] }, { kind: "component", type: CloseComponent, selector: "sfc-close" }] });
+DefaultModalHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DefaultModalHeaderComponent, selector: "sfc-default-modal-header", inputs: { id: "id", model: "model" }, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"content\">\r\n        <fa-icon *ngIf=\"icon\" class=\"icon\" [icon]=\"icon\"></fa-icon>\r\n        <span *ngIf=\"model.text\" class=\"label\">{{model.text}}</span>\r\n        <sfc-close *ngIf=\"model.showCloseIcon\" (click)=\"onClose()\"></sfc-close>\r\n    </div>\r\n\r\n    <sfc-delimeter></sfc-delimeter>\r\n</div>", styles: [":host{display:inline-flex;width:100%}:host .container{width:100%;padding-bottom:.5em}:host .container .content{display:flex;align-items:center;justify-content:center;padding:.5em 0}:host .container .content .icon{position:absolute;left:1.5em;font-size:1.3em}:host .container .content .label{width:80%;font-size:1.2em;font-weight:700;-webkit-user-select:none;user-select:none;padding:0 .7em;white-space:normal;text-align:center}:host .container .content sfc-close{position:absolute;right:1.5em;color:#545e61}:host .container .content sfc-close:hover{color:#ffce54}:host .container sfc-delimeter.horizontal:before{transition:border-image .5s ease}:host .container sfc-delimeter.horizontal:before,:host-context(.sfc-default-theme) :host .container sfc-delimeter.horizontal:before{border-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host-context(.sfc-dark-theme) :host .container sfc-delimeter.horizontal:before{border-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host .container sfc-delimeter.horizontal:after{transition:border-image .5s ease}:host .container sfc-delimeter.horizontal:after,:host-context(.sfc-default-theme) :host .container sfc-delimeter.horizontal:after{border-image:linear-gradient(to left,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host-context(.sfc-dark-theme) :host .container sfc-delimeter.horizontal:after{border-image:linear-gradient(to left,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host .container sfc-delimeter.horizontal span{color:#545e61}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "component", type: DelimeterComponent, selector: "sfc-delimeter", inputs: ["label", "direction"] }, { kind: "component", type: CloseComponent, selector: "sfc-close" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DefaultModalHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-default-modal-header', template: "<div class=\"container\">\r\n    <div class=\"content\">\r\n        <fa-icon *ngIf=\"icon\" class=\"icon\" [icon]=\"icon\"></fa-icon>\r\n        <span *ngIf=\"model.text\" class=\"label\">{{model.text}}</span>\r\n        <sfc-close *ngIf=\"model.showCloseIcon\" (click)=\"onClose()\"></sfc-close>\r\n    </div>\r\n\r\n    <sfc-delimeter></sfc-delimeter>\r\n</div>", styles: [":host{display:inline-flex;width:100%}:host .container{width:100%;padding-bottom:.5em}:host .container .content{display:flex;align-items:center;justify-content:center;padding:.5em 0}:host .container .content .icon{position:absolute;left:1.5em;font-size:1.3em}:host .container .content .label{font-size:1.2em;font-weight:700;-webkit-user-select:none;user-select:none;padding:0 .7em}:host .container .content sfc-close{position:absolute;right:1.5em;color:#545e61}:host .container .content sfc-close:hover{color:#ffce54}:host .container sfc-delimeter.horizontal:before{transition:border-image .5s ease}:host .container sfc-delimeter.horizontal:before,:host-context(.sfc-default-theme) :host .container sfc-delimeter.horizontal:before{border-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host-context(.sfc-dark-theme) :host .container sfc-delimeter.horizontal:before{border-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host .container sfc-delimeter.horizontal:after{transition:border-image .5s ease}:host .container sfc-delimeter.horizontal:after,:host-context(.sfc-default-theme) :host .container sfc-delimeter.horizontal:after{border-image:linear-gradient(to left,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host-context(.sfc-dark-theme) :host .container sfc-delimeter.horizontal:after{border-image:linear-gradient(to left,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host .container sfc-delimeter.horizontal span{color:#545e61}\n"] }]
-        }], ctorParameters: function () { return [{ type: ModalService }]; }, propDecorators: { model: [{
+            args: [{ selector: 'sfc-default-modal-header', template: "<div class=\"container\">\r\n    <div class=\"content\">\r\n        <fa-icon *ngIf=\"icon\" class=\"icon\" [icon]=\"icon\"></fa-icon>\r\n        <span *ngIf=\"model.text\" class=\"label\">{{model.text}}</span>\r\n        <sfc-close *ngIf=\"model.showCloseIcon\" (click)=\"onClose()\"></sfc-close>\r\n    </div>\r\n\r\n    <sfc-delimeter></sfc-delimeter>\r\n</div>", styles: [":host{display:inline-flex;width:100%}:host .container{width:100%;padding-bottom:.5em}:host .container .content{display:flex;align-items:center;justify-content:center;padding:.5em 0}:host .container .content .icon{position:absolute;left:1.5em;font-size:1.3em}:host .container .content .label{width:80%;font-size:1.2em;font-weight:700;-webkit-user-select:none;user-select:none;padding:0 .7em;white-space:normal;text-align:center}:host .container .content sfc-close{position:absolute;right:1.5em;color:#545e61}:host .container .content sfc-close:hover{color:#ffce54}:host .container sfc-delimeter.horizontal:before{transition:border-image .5s ease}:host .container sfc-delimeter.horizontal:before,:host-context(.sfc-default-theme) :host .container sfc-delimeter.horizontal:before{border-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host-context(.sfc-dark-theme) :host .container sfc-delimeter.horizontal:before{border-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host .container sfc-delimeter.horizontal:after{transition:border-image .5s ease}:host .container sfc-delimeter.horizontal:after,:host-context(.sfc-default-theme) :host .container sfc-delimeter.horizontal:after{border-image:linear-gradient(to left,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host-context(.sfc-dark-theme) :host .container sfc-delimeter.horizontal:after{border-image:linear-gradient(to left,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host .container sfc-delimeter.horizontal span{color:#545e61}\n"] }]
+        }], ctorParameters: function () { return [{ type: ModalService }]; }, propDecorators: { id: [{
+                type: Input
+            }], model: [{
                 type: Input
             }] } });
 
+class DefaultModalFooterConstants {
+}
+DefaultModalFooterConstants.BUTTON_CUSTOM_SIZE = 0.9;
+DefaultModalFooterConstants.DEFAULT_MODAL_FOOTER_MODEL = {
+    cancelButton: true,
+    applyButton: true,
+    applyButtonText: 'Ok',
+    cancelButtonText: 'Cancel'
+};
+
 class DefaultModalFooterComponent {
+    /* End Inputs */
     constructor(modalService) {
         this.modalService = modalService;
-        this.DEFAULT_MODAL_FOOTER_MODEL = {
-            cancelButton: true,
-            applyButton: true,
-            applyButtonText: 'Ok',
-            cancelButtonText: 'Cancel'
-        };
-        this.BUTTON_CUSTOM_SIZE = 0.9;
         this.ComponentSize = ComponentSize;
         this.ButtonType = ButtonType;
+        // component
+        this.Constants = DefaultModalFooterConstants;
     }
     ngOnInit() {
         if (!this.model) {
-            this.model = Object.assign({}, this.DEFAULT_MODAL_FOOTER_MODEL);
+            this.model = Object.assign({}, DefaultModalFooterConstants.DEFAULT_MODAL_FOOTER_MODEL);
         }
         else {
             if (isNullOrEmptyString(this.model.applyButtonText))
-                this.model.applyButtonText = this.DEFAULT_MODAL_FOOTER_MODEL.applyButtonText;
+                this.model.applyButtonText = DefaultModalFooterConstants.DEFAULT_MODAL_FOOTER_MODEL.applyButtonText;
             if (isNullOrEmptyString(this.model.cancelButtonText))
-                this.model.cancelButtonText = this.DEFAULT_MODAL_FOOTER_MODEL.cancelButtonText;
+                this.model.cancelButtonText = DefaultModalFooterConstants.DEFAULT_MODAL_FOOTER_MODEL.cancelButtonText;
             if (!isDefined(this.model.applyButton))
-                this.model.applyButton = this.DEFAULT_MODAL_FOOTER_MODEL.applyButton;
+                this.model.applyButton = DefaultModalFooterConstants.DEFAULT_MODAL_FOOTER_MODEL.applyButton;
             if (!isDefined(this.model.cancelButton))
-                this.model.cancelButton = this.DEFAULT_MODAL_FOOTER_MODEL.cancelButton;
+                this.model.cancelButton = DefaultModalFooterConstants.DEFAULT_MODAL_FOOTER_MODEL.cancelButton;
         }
     }
     onButtonClick(isCancelButton = false) {
@@ -2378,21 +2633,27 @@ class DefaultModalFooterComponent {
                 return this.model.onApply(this.modalService.args);
             }
         }
-        this.modalService.toggle();
+        this.modalService.toggle(this.id);
     }
 }
 DefaultModalFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DefaultModalFooterComponent, deps: [{ token: ModalService }], target: i0.ɵɵFactoryTarget.Component });
-DefaultModalFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DefaultModalFooterComponent, selector: "sfc-default-modal-footer", inputs: { model: "model" }, ngImport: i0, template: "<div class=\"container\">\r\n    <sfc-button *ngIf=\"model.applyButton\" [sfcComponentSize] [customSize]=\"BUTTON_CUSTOM_SIZE\" [text]=\"model.applyButtonText\"\r\n        [types]=\"[ButtonType.Rounded]\" (click)=\"onButtonClick()\">\r\n    </sfc-button>\r\n    <sfc-button *ngIf=\"model.cancelButton\" [sfcComponentSize] [customSize]=\"BUTTON_CUSTOM_SIZE\" [text]=\"model.cancelButtonText\"\r\n        [types]=\"[ButtonType.Rounded]\" (click)=\"onButtonClick(true)\">\r\n    </sfc-button>\r\n</div>", styles: [":host{display:inline-flex;width:100%}:host .container{display:flex;justify-content:center;align-items:center;width:100%}:host .container sfc-button:first-child{padding-right:.3em}:host .container sfc-button:nth-child(2){padding-left:.3em}:host .container ::ng-deep sfc-button .button.rounded{min-width:5em}:host .container ::ng-deep sfc-button .button:not(:hover){color:#545e61!important;border-color:#545e61!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ComponentSizeDirective, selector: "[sfcComponentSize]", inputs: ["sfcComponentSize", "customSize"] }, { kind: "component", type: ButtonComponent, selector: "sfc-button", inputs: ["text", "iconBefore", "iconAfter", "disabled", "types"] }] });
+DefaultModalFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DefaultModalFooterComponent, selector: "sfc-default-modal-footer", inputs: { id: "id", model: "model" }, ngImport: i0, template: "<div class=\"container\">\r\n    <sfc-button *ngIf=\"model.applyButton\" [sfcComponentSize] [customSize]=\"Constants.BUTTON_CUSTOM_SIZE\"\r\n        [text]=\"model.applyButtonText\" [types]=\"[ButtonType.Rounded]\" (click)=\"onButtonClick()\">\r\n    </sfc-button>\r\n    <sfc-button *ngIf=\"model.cancelButton\" [sfcComponentSize] [customSize]=\"Constants.BUTTON_CUSTOM_SIZE\"\r\n        [text]=\"model.cancelButtonText\" [types]=\"[ButtonType.Rounded]\" (click)=\"onButtonClick(true)\">\r\n    </sfc-button>\r\n</div>", styles: [":host{display:inline-flex;width:100%}:host .container{display:flex;justify-content:center;align-items:center;width:100%}:host .container sfc-button:first-child{padding-right:.3em}:host .container sfc-button:nth-child(2){padding-left:.3em}:host .container ::ng-deep sfc-button .button.rounded{min-width:5em}:host .container ::ng-deep sfc-button .button:not(:hover){color:#545e61!important;border-color:#545e61!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ComponentSizeDirective, selector: "[sfcComponentSize]", inputs: ["sfcComponentSize", "customSize"] }, { kind: "component", type: ButtonComponent, selector: "sfc-button", inputs: ["text", "iconBefore", "iconAfter", "disabled", "types"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DefaultModalFooterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-default-modal-footer', template: "<div class=\"container\">\r\n    <sfc-button *ngIf=\"model.applyButton\" [sfcComponentSize] [customSize]=\"BUTTON_CUSTOM_SIZE\" [text]=\"model.applyButtonText\"\r\n        [types]=\"[ButtonType.Rounded]\" (click)=\"onButtonClick()\">\r\n    </sfc-button>\r\n    <sfc-button *ngIf=\"model.cancelButton\" [sfcComponentSize] [customSize]=\"BUTTON_CUSTOM_SIZE\" [text]=\"model.cancelButtonText\"\r\n        [types]=\"[ButtonType.Rounded]\" (click)=\"onButtonClick(true)\">\r\n    </sfc-button>\r\n</div>", styles: [":host{display:inline-flex;width:100%}:host .container{display:flex;justify-content:center;align-items:center;width:100%}:host .container sfc-button:first-child{padding-right:.3em}:host .container sfc-button:nth-child(2){padding-left:.3em}:host .container ::ng-deep sfc-button .button.rounded{min-width:5em}:host .container ::ng-deep sfc-button .button:not(:hover){color:#545e61!important;border-color:#545e61!important}\n"] }]
-        }], ctorParameters: function () { return [{ type: ModalService }]; }, propDecorators: { model: [{
+            args: [{ selector: 'sfc-default-modal-footer', template: "<div class=\"container\">\r\n    <sfc-button *ngIf=\"model.applyButton\" [sfcComponentSize] [customSize]=\"Constants.BUTTON_CUSTOM_SIZE\"\r\n        [text]=\"model.applyButtonText\" [types]=\"[ButtonType.Rounded]\" (click)=\"onButtonClick()\">\r\n    </sfc-button>\r\n    <sfc-button *ngIf=\"model.cancelButton\" [sfcComponentSize] [customSize]=\"Constants.BUTTON_CUSTOM_SIZE\"\r\n        [text]=\"model.cancelButtonText\" [types]=\"[ButtonType.Rounded]\" (click)=\"onButtonClick(true)\">\r\n    </sfc-button>\r\n</div>", styles: [":host{display:inline-flex;width:100%}:host .container{display:flex;justify-content:center;align-items:center;width:100%}:host .container sfc-button:first-child{padding-right:.3em}:host .container sfc-button:nth-child(2){padding-left:.3em}:host .container ::ng-deep sfc-button .button.rounded{min-width:5em}:host .container ::ng-deep sfc-button .button:not(:hover){color:#545e61!important;border-color:#545e61!important}\n"] }]
+        }], ctorParameters: function () { return [{ type: ModalService }]; }, propDecorators: { id: [{
+                type: Input
+            }], model: [{
                 type: Input
             }] } });
 
 class ModalComponent {
-    constructor(modalService) {
+    /* End Properties */
+    constructor(modalService, document, openDirective, openOnClickDirective) {
         this.modalService = modalService;
+        this.document = document;
+        this.openDirective = openDirective;
+        this.openOnClickDirective = openOnClickDirective;
         this.ModalTemplate = ModalTemplate;
         // End Defaults
         this.hideOnEsc = true;
@@ -2401,17 +2662,32 @@ class ModalComponent {
         this.showHeader = true;
         // hide modal footer (even default)
         this.showFooter = true;
+        // remember body overflow
+        this.bodyOverflow = this.document.body.style.overflow;
     }
     onEscapeKeyDownHandler() {
         if (this.hideOnEsc)
             this.close();
     }
+    /* Properties */
+    get id() {
+        return isDefined(this.openOnClickDirective)
+            ? this.openOnClickDirective.id : this.openDirective.id;
+    }
+    ngAfterViewInit() {
+        // set body overflow to hidden, to prevent page scrolling
+        this.document.body.style.overflow = UIConstants.CSS_VISIBILITY_HIDDEN;
+    }
+    ngOnDestroy() {
+        // return back body overflow value when modal has closed
+        this.document.body.style.overflow = this.bodyOverflow;
+    }
     close() {
-        this.modalService.close();
+        this.modalService.close(this.id);
     }
 }
-ModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ModalComponent, deps: [{ token: ModalService }], target: i0.ɵɵFactoryTarget.Component });
-ModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ModalComponent, selector: "sfc-modal", inputs: { body: "body", header: "header", footer: "footer", defaultHeaderModel: "defaultHeaderModel", defaultFooterModel: "defaultFooterModel", hideOnEsc: "hideOnEsc", hideOnClickOutside: "hideOnClickOutside", showHeader: "showHeader", showFooter: "showFooter" }, host: { listeners: { "document:keydown.escape": "onEscapeKeyDownHandler()" } }, queries: [{ propertyName: "templates", predicate: TemplateReferenceDirective, read: TemplateReferenceDirective }], ngImport: i0, template: "<div class=\"overlay\" [@hideOverlay] (click)=\"hideOnClickOutside && close()\">\r\n    <div class=\"content\" [@hideContent] (click)=\"$event.stopPropagation()\">\r\n\r\n        <div *ngIf=\"showHeader\" class=\"header\">\r\n\r\n            <sfc-template-content [referenceContent]=\"header\" [templatesContent]=\"templates\"\r\n                [templateType]=\"ModalTemplate.Header\" [defaultContent]=\"defaultHeader\">\r\n            </sfc-template-content>\r\n\r\n            <ng-template #defaultHeader>\r\n                <sfc-default-modal-header [model]=\"defaultHeaderModel\"> </sfc-default-modal-header>\r\n            </ng-template>\r\n\r\n        </div>\r\n\r\n        <div class=\"body\">\r\n            <sfc-template-content [referenceContent]=\"body\" [templatesContent]=\"templates\"\r\n                [templateType]=\"ModalTemplate.Body\">\r\n            </sfc-template-content>\r\n        </div>\r\n\r\n        <div *ngIf=\"showFooter\" class=\"footer\">\r\n\r\n            <sfc-template-content [referenceContent]=\"footer\" [templatesContent]=\"templates\"\r\n                [templateType]=\"ModalTemplate.Footer\" [defaultContent]=\"defaultFooter\">\r\n            </sfc-template-content>\r\n\r\n            <ng-template #defaultFooter>\r\n                <sfc-default-modal-footer [model]=\"defaultFooterModel\"></sfc-default-modal-footer>\r\n            </ng-template>\r\n\r\n        </div>\r\n    </div>\r\n</div>", styles: [".overlay{display:flex;align-items:center;justify-content:center;position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;background-color:#0009;-webkit-backface-visibility:visible;backface-visibility:visible;animation:expand-overlay .4s cubic-bezier(.55,0,.1,1)}@keyframes expand-overlay{0%{visibility:hidden;opacity:0}}.overlay .content{display:flex;align-items:center;position:relative;padding:.9em 1.5em;margin:auto;background-color:#f5f7fa;max-width:calc(100% - 3em);max-height:calc(100% - 3em);border-radius:3px;box-shadow:0 .125em .625em #656d78;transform:scale(1);flex-direction:column;animation:expand-modal .4s cubic-bezier(.55,0,.1,1)}@keyframes expand-modal{0%{visibility:hidden;opacity:0;transform:scale(1.2)}}.overlay .content>div{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:#545e61;flex-direction:row;display:flex;flex:0 0 auto;justify-content:center}.overlay .content>div.body{overflow-y:auto;flex:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TemplateContentComponent, selector: "sfc-template-content", inputs: ["contextData", "referenceContent", "templateType", "templatesContent", "defaultContent"] }, { kind: "component", type: DefaultModalHeaderComponent, selector: "sfc-default-modal-header", inputs: ["model"] }, { kind: "component", type: DefaultModalFooterComponent, selector: "sfc-default-modal-footer", inputs: ["model"] }], animations: [
+ModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ModalComponent, deps: [{ token: ModalService }, { token: DOCUMENT }, { token: ModalOpenDirective, optional: true }, { token: ModalOpenOnClickDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+ModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ModalComponent, selector: "sfc-modal", inputs: { body: "body", header: "header", footer: "footer", defaultHeaderModel: "defaultHeaderModel", defaultFooterModel: "defaultFooterModel", hideOnEsc: "hideOnEsc", hideOnClickOutside: "hideOnClickOutside", showHeader: "showHeader", showFooter: "showFooter" }, host: { listeners: { "document:keydown.escape": "onEscapeKeyDownHandler()" } }, queries: [{ propertyName: "templates", predicate: TemplateReferenceDirective, read: TemplateReferenceDirective }], ngImport: i0, template: "<div class=\"overlay\" [@hideOverlay] (click)=\"hideOnClickOutside && close()\">\r\n    <div class=\"content\" [@hideContent] (click)=\"$event.stopPropagation()\">\r\n\r\n        <div *ngIf=\"showHeader\" class=\"header\">\r\n            <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 [id]=\"id\" [model]=\"defaultHeaderModel\"></sfc-default-modal-header>\r\n            </ng-template>\r\n        </div>\r\n\r\n        <div class=\"body\">\r\n            <sfc-template-content [referenceContent]=\"body\" [templatesContent]=\"templates\"\r\n                [templateType]=\"ModalTemplate.Body\" [contextData]=\"modalService.args\">\r\n            </sfc-template-content>\r\n        </div>\r\n\r\n        <div *ngIf=\"showFooter\" class=\"footer\">\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 [id]=\"id\" [model]=\"defaultFooterModel\"></sfc-default-modal-footer>\r\n            </ng-template>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".overlay{display:flex;align-items:center;justify-content:center;position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;background-color:#0009;-webkit-backface-visibility:visible;backface-visibility:visible;animation:expand-overlay .4s cubic-bezier(.55,0,.1,1)}@keyframes expand-overlay{0%{visibility:hidden;opacity:0}}.overlay .content{display:flex;align-items:center;position:relative;padding:.9em 1.5em;margin:auto;background-color:#f5f7fa;max-width:calc(100% - 3em);max-height:calc(100% - 3em);border-radius:3px;box-shadow:0 .125em .625em #656d78;transform:scale(1);flex-direction:column;animation:expand-modal .4s cubic-bezier(.55,0,.1,1)}@keyframes expand-modal{0%{visibility:hidden;opacity:0;transform:scale(1.2)}}.overlay .content>div{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:#545e61;flex-direction:row;display:flex;flex:0 0 auto;justify-content:center}.overlay .content>div.body{overflow-y:auto;flex:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TemplateContentComponent, selector: "sfc-template-content", inputs: ["contextData", "referenceContent", "templateType", "templatesContent", "defaultContent"] }, { kind: "component", type: DefaultModalHeaderComponent, selector: "sfc-default-modal-header", inputs: ["id", "model"] }, { kind: "component", type: DefaultModalFooterComponent, selector: "sfc-default-modal-footer", inputs: ["id", "model"] }], animations: [
         trigger('hideOverlay', [
             state('initial', style({ opacity: 1, visibility: 'visible' })),
             state('void', style({ opacity: 0, visibility: 'hidden' })),
@@ -2456,8 +2732,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                             state('void', style({ opacity: 0, visibility: 'hidden', transform: 'scale(1.2)' })),
                             transition('* => void', animate('400ms cubic-bezier(.55, 0, .1, 1)'))
                         ])
-                    ], template: "<div class=\"overlay\" [@hideOverlay] (click)=\"hideOnClickOutside && close()\">\r\n    <div class=\"content\" [@hideContent] (click)=\"$event.stopPropagation()\">\r\n\r\n        <div *ngIf=\"showHeader\" class=\"header\">\r\n\r\n            <sfc-template-content [referenceContent]=\"header\" [templatesContent]=\"templates\"\r\n                [templateType]=\"ModalTemplate.Header\" [defaultContent]=\"defaultHeader\">\r\n            </sfc-template-content>\r\n\r\n            <ng-template #defaultHeader>\r\n                <sfc-default-modal-header [model]=\"defaultHeaderModel\"> </sfc-default-modal-header>\r\n            </ng-template>\r\n\r\n        </div>\r\n\r\n        <div class=\"body\">\r\n            <sfc-template-content [referenceContent]=\"body\" [templatesContent]=\"templates\"\r\n                [templateType]=\"ModalTemplate.Body\">\r\n            </sfc-template-content>\r\n        </div>\r\n\r\n        <div *ngIf=\"showFooter\" class=\"footer\">\r\n\r\n            <sfc-template-content [referenceContent]=\"footer\" [templatesContent]=\"templates\"\r\n                [templateType]=\"ModalTemplate.Footer\" [defaultContent]=\"defaultFooter\">\r\n            </sfc-template-content>\r\n\r\n            <ng-template #defaultFooter>\r\n                <sfc-default-modal-footer [model]=\"defaultFooterModel\"></sfc-default-modal-footer>\r\n            </ng-template>\r\n\r\n        </div>\r\n    </div>\r\n</div>", styles: [".overlay{display:flex;align-items:center;justify-content:center;position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;background-color:#0009;-webkit-backface-visibility:visible;backface-visibility:visible;animation:expand-overlay .4s cubic-bezier(.55,0,.1,1)}@keyframes expand-overlay{0%{visibility:hidden;opacity:0}}.overlay .content{display:flex;align-items:center;position:relative;padding:.9em 1.5em;margin:auto;background-color:#f5f7fa;max-width:calc(100% - 3em);max-height:calc(100% - 3em);border-radius:3px;box-shadow:0 .125em .625em #656d78;transform:scale(1);flex-direction:column;animation:expand-modal .4s cubic-bezier(.55,0,.1,1)}@keyframes expand-modal{0%{visibility:hidden;opacity:0;transform:scale(1.2)}}.overlay .content>div{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:#545e61;flex-direction:row;display:flex;flex:0 0 auto;justify-content:center}.overlay .content>div.body{overflow-y:auto;flex:0}\n"] }]
-        }], ctorParameters: function () { return [{ type: ModalService }]; }, propDecorators: { body: [{
+                    ], template: "<div class=\"overlay\" [@hideOverlay] (click)=\"hideOnClickOutside && close()\">\r\n    <div class=\"content\" [@hideContent] (click)=\"$event.stopPropagation()\">\r\n\r\n        <div *ngIf=\"showHeader\" class=\"header\">\r\n            <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 [id]=\"id\" [model]=\"defaultHeaderModel\"></sfc-default-modal-header>\r\n            </ng-template>\r\n        </div>\r\n\r\n        <div class=\"body\">\r\n            <sfc-template-content [referenceContent]=\"body\" [templatesContent]=\"templates\"\r\n                [templateType]=\"ModalTemplate.Body\" [contextData]=\"modalService.args\">\r\n            </sfc-template-content>\r\n        </div>\r\n\r\n        <div *ngIf=\"showFooter\" class=\"footer\">\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 [id]=\"id\" [model]=\"defaultFooterModel\"></sfc-default-modal-footer>\r\n            </ng-template>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".overlay{display:flex;align-items:center;justify-content:center;position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;background-color:#0009;-webkit-backface-visibility:visible;backface-visibility:visible;animation:expand-overlay .4s cubic-bezier(.55,0,.1,1)}@keyframes expand-overlay{0%{visibility:hidden;opacity:0}}.overlay .content{display:flex;align-items:center;position:relative;padding:.9em 1.5em;margin:auto;background-color:#f5f7fa;max-width:calc(100% - 3em);max-height:calc(100% - 3em);border-radius:3px;box-shadow:0 .125em .625em #656d78;transform:scale(1);flex-direction:column;animation:expand-modal .4s cubic-bezier(.55,0,.1,1)}@keyframes expand-modal{0%{visibility:hidden;opacity:0;transform:scale(1.2)}}.overlay .content>div{width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:#545e61;flex-direction:row;display:flex;flex:0 0 auto;justify-content:center}.overlay .content>div.body{overflow-y:auto;flex:0}\n"] }]
+        }], ctorParameters: function () { return [{ type: ModalService }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: ModalOpenDirective, decorators: [{
+                    type: Optional
+                }] }, { type: ModalOpenOnClickDirective, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { body: [{
                 type: Input
             }], header: [{
                 type: Input
@@ -2483,76 +2766,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 args: [TemplateReferenceDirective, { read: TemplateReferenceDirective }]
             }] } });
 
-class ModalOpenOnClickDirective {
-    constructor(templateRef, viewContainer, modalService) {
-        this.templateRef = templateRef;
-        this.viewContainer = viewContainer;
-        this.modalService = modalService;
-        this.clickHandler = (() => {
-            this.viewContainer.clear();
-            this.viewContainer.createEmbeddedView(this.templateRef);
-            this.modalService.toggle();
-        }).bind(this);
-        this.elements = [];
-    }
-    set modalOpenOnClick(elements) {
-        if (!isDefined(elements))
-            return;
-        if (elements instanceof HTMLElement)
-            this.elements = [elements];
-        else
-            this.elements = elements;
-        this.elements.forEach(el => {
-            el.addEventListener('click', this.clickHandler);
-        });
-    }
-    ngOnInit() {
-        this._closeSubscription = this.modalService.modal$
-            .pipe(filter((event) => !event.open))
-            .subscribe(() => this.viewContainer.clear());
-    }
-    ngOnDestroy() {
-        this._closeSubscription?.unsubscribe();
-        this.elements.forEach(el => el.removeEventListener('click', this.clickHandler));
-    }
-}
-ModalOpenOnClickDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ModalOpenOnClickDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: ModalService }], target: i0.ɵɵFactoryTarget.Directive });
-ModalOpenOnClickDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: ModalOpenOnClickDirective, selector: "[sfcModalOpenOnClick]", inputs: { modalOpenOnClick: ["sfcModalOpenOnClick", "modalOpenOnClick"] }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ModalOpenOnClickDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[sfcModalOpenOnClick]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }, { type: ModalService }]; }, propDecorators: { modalOpenOnClick: [{
-                type: Input,
-                args: ['sfcModalOpenOnClick']
-            }] } });
-
-class ModalOpenDirective {
-    constructor(templateRef, viewContainer, modalService) {
-        this.templateRef = templateRef;
-        this.viewContainer = viewContainer;
-        this.modalService = modalService;
-        this._openSubscription = this.modalService.modal$
-            .subscribe((event) => {
-            this.viewContainer.clear();
-            if (event.open)
-                this.viewContainer.createEmbeddedView(this.templateRef);
-        });
-    }
-    ngOnDestroy() {
-        this._openSubscription.unsubscribe();
-    }
-}
-ModalOpenDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ModalOpenDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: ModalService }], target: i0.ɵɵFactoryTarget.Directive });
-ModalOpenDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: ModalOpenDirective, selector: "[sfcModalOpen]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ModalOpenDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[sfcModalOpen]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }, { type: ModalService }]; } });
-
 class HamburgerBaseComponent {
     constructor() {
         this.open = false;
@@ -2651,13 +2864,17 @@ class ToggleSwitcherComponent {
     constructor() {
         this.active = false;
         this.disabled = false;
-        this.onClick = () => this.active = !this.active;
+        this.toggle = new EventEmitter(this.active);
+        this.onClick = () => {
+            this.active = !this.active;
+            this.toggle.emit(this.active);
+        };
         this.leftModel = { label: 'Left' };
         this.rightModel = { label: 'Right' };
     }
 }
 ToggleSwitcherComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ToggleSwitcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ToggleSwitcherComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ToggleSwitcherComponent, selector: "sfc-toggle-switcher", inputs: { active: "active", disabled: "disabled", leftModel: "leftModel", rightModel: "rightModel" }, host: { listeners: { "click": "onClick()" }, properties: { "class.active": "this.active", "class.disabled": "this.disabled" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"toggle\"></div>\r\n    <div class=\"names\">\r\n        <p class=\"left\" *ngIf=\"leftModel\">\r\n            <fa-icon *ngIf=\"leftModel.icon\" [icon]=\"leftModel.icon\"></fa-icon>\r\n            <span *ngIf=\"leftModel.label\">{{leftModel.label}}</span>\r\n        </p>\r\n        <p class=\"right\" *ngIf=\"rightModel\">\r\n            <fa-icon *ngIf=\"rightModel.icon\" [icon]=\"rightModel.icon\"></fa-icon>\r\n            <span *ngIf=\"rightModel.label\">{{rightModel.label}}</span>\r\n        </p>\r\n    </div>\r\n</div>", styles: [":host .container,:host .toggle{height:100%;border-radius:100px}:host .container{background-color:#e6e9ed;color:#545e61;border:.1875em solid;border-radius:100px;border-color:#e6e9ed;position:relative;cursor:pointer}:host .container .toggle{position:absolute;width:50%;background-color:#fff;transition:transform .3s cubic-bezier(.25,.46,.45,.94)}:host .container .names{font-size:90%;font-weight:bolder;width:100%;height:100%;position:relative;display:flex;justify-content:space-around;align-items:center;-webkit-user-select:none;user-select:none;overflow:hidden}:host .container .names p{font-size:90%;text-align:center;margin:0;padding:.5em 1em}:host .container .names p span{padding-left:.3em}:host .container .names p.right{opacity:.5}:host.active .container{background-color:#e6e9ed}:host.active .container .toggle{transform:translate(100%);background-color:#fff}:host.active .container .names{color:#545e61}:host.active .container .names .left{opacity:.5}:host.active .container .names .right{opacity:1}:host.disabled{pointer-events:none}:host.disabled .container{transition:background-color .5s ease;transition:border-color .5s ease}:host.disabled .container,:host-context(.sfc-default-theme) :host.disabled .container{background-color:#f6f6f6}:host-context(.sfc-dark-theme) :host.disabled .container{background-color:#656d78}:host.disabled .container,:host-context(.sfc-default-theme) :host.disabled .container{border-color:#f6f6f6}:host-context(.sfc-dark-theme) :host.disabled .container{border-color:#656d78}:host.disabled .container .toggle{transition:background-color .5s ease;box-shadow:none}:host.disabled .container .toggle,:host-context(.sfc-default-theme) :host.disabled .container .toggle{background-color:#e6e9ed}:host-context(.sfc-dark-theme) :host.disabled .container .toggle{background-color:#aab2bd}:host.disabled .container .names{transition:color .5s ease}:host.disabled .container .names,:host-context(.sfc-default-theme) :host.disabled .container .names{color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .container .names{color:#e9e9e9}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
+ToggleSwitcherComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ToggleSwitcherComponent, selector: "sfc-toggle-switcher", inputs: { active: "active", disabled: "disabled", leftModel: "leftModel", rightModel: "rightModel" }, outputs: { toggle: "toggle" }, host: { listeners: { "click": "onClick()" }, properties: { "class.active": "this.active", "class.disabled": "this.disabled" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"toggle\"></div>\r\n    <div class=\"names\">\r\n        <p class=\"left\" *ngIf=\"leftModel\">\r\n            <fa-icon *ngIf=\"leftModel.icon\" [icon]=\"leftModel.icon\"></fa-icon>\r\n            <span *ngIf=\"leftModel.label\">{{leftModel.label}}</span>\r\n        </p>\r\n        <p class=\"right\" *ngIf=\"rightModel\">\r\n            <fa-icon *ngIf=\"rightModel.icon\" [icon]=\"rightModel.icon\"></fa-icon>\r\n            <span *ngIf=\"rightModel.label\">{{rightModel.label}}</span>\r\n        </p>\r\n    </div>\r\n</div>", styles: [":host .container,:host .toggle{height:100%;border-radius:100px}:host .container{background-color:#e6e9ed;color:#545e61;border:.1875em solid;border-radius:100px;border-color:#e6e9ed;position:relative;cursor:pointer}:host .container .toggle{position:absolute;width:50%;background-color:#fff;transition:transform .3s cubic-bezier(.25,.46,.45,.94)}:host .container .names{font-size:90%;font-weight:bolder;width:100%;height:100%;position:relative;display:flex;justify-content:space-around;align-items:center;-webkit-user-select:none;user-select:none;overflow:hidden}:host .container .names p{font-size:90%;text-align:center;margin:0;padding:.5em 1em}:host .container .names p span{padding-left:.3em}:host .container .names p.right{opacity:.5}:host.active .container{background-color:#e6e9ed}:host.active .container .toggle{transform:translate(100%);background-color:#fff}:host.active .container .names{color:#545e61}:host.active .container .names .left{opacity:.5}:host.active .container .names .right{opacity:1}:host.disabled{pointer-events:none}:host.disabled .container{transition:background-color .5s ease;transition:border-color .5s ease}:host.disabled .container,:host-context(.sfc-default-theme) :host.disabled .container{background-color:#f6f6f6}:host-context(.sfc-dark-theme) :host.disabled .container{background-color:#656d78}:host.disabled .container,:host-context(.sfc-default-theme) :host.disabled .container{border-color:#f6f6f6}:host-context(.sfc-dark-theme) :host.disabled .container{border-color:#656d78}:host.disabled .container .toggle{transition:background-color .5s ease;box-shadow:none}:host.disabled .container .toggle,:host-context(.sfc-default-theme) :host.disabled .container .toggle{background-color:#e6e9ed}:host-context(.sfc-dark-theme) :host.disabled .container .toggle{background-color:#aab2bd}:host.disabled .container .names{transition:color .5s ease}:host.disabled .container .names,:host-context(.sfc-default-theme) :host.disabled .container .names{color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .container .names{color:#e9e9e9}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ToggleSwitcherComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sfc-toggle-switcher', template: "<div class=\"container\">\r\n    <div class=\"toggle\"></div>\r\n    <div class=\"names\">\r\n        <p class=\"left\" *ngIf=\"leftModel\">\r\n            <fa-icon *ngIf=\"leftModel.icon\" [icon]=\"leftModel.icon\"></fa-icon>\r\n            <span *ngIf=\"leftModel.label\">{{leftModel.label}}</span>\r\n        </p>\r\n        <p class=\"right\" *ngIf=\"rightModel\">\r\n            <fa-icon *ngIf=\"rightModel.icon\" [icon]=\"rightModel.icon\"></fa-icon>\r\n            <span *ngIf=\"rightModel.label\">{{rightModel.label}}</span>\r\n        </p>\r\n    </div>\r\n</div>", styles: [":host .container,:host .toggle{height:100%;border-radius:100px}:host .container{background-color:#e6e9ed;color:#545e61;border:.1875em solid;border-radius:100px;border-color:#e6e9ed;position:relative;cursor:pointer}:host .container .toggle{position:absolute;width:50%;background-color:#fff;transition:transform .3s cubic-bezier(.25,.46,.45,.94)}:host .container .names{font-size:90%;font-weight:bolder;width:100%;height:100%;position:relative;display:flex;justify-content:space-around;align-items:center;-webkit-user-select:none;user-select:none;overflow:hidden}:host .container .names p{font-size:90%;text-align:center;margin:0;padding:.5em 1em}:host .container .names p span{padding-left:.3em}:host .container .names p.right{opacity:.5}:host.active .container{background-color:#e6e9ed}:host.active .container .toggle{transform:translate(100%);background-color:#fff}:host.active .container .names{color:#545e61}:host.active .container .names .left{opacity:.5}:host.active .container .names .right{opacity:1}:host.disabled{pointer-events:none}:host.disabled .container{transition:background-color .5s ease;transition:border-color .5s ease}:host.disabled .container,:host-context(.sfc-default-theme) :host.disabled .container{background-color:#f6f6f6}:host-context(.sfc-dark-theme) :host.disabled .container{background-color:#656d78}:host.disabled .container,:host-context(.sfc-default-theme) :host.disabled .container{border-color:#f6f6f6}:host-context(.sfc-dark-theme) :host.disabled .container{border-color:#656d78}:host.disabled .container .toggle{transition:background-color .5s ease;box-shadow:none}:host.disabled .container .toggle,:host-context(.sfc-default-theme) :host.disabled .container .toggle{background-color:#e6e9ed}:host-context(.sfc-dark-theme) :host.disabled .container .toggle{background-color:#aab2bd}:host.disabled .container .names{transition:color .5s ease}:host.disabled .container .names,:host-context(.sfc-default-theme) :host.disabled .container .names{color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .container .names{color:#e9e9e9}\n"] }]
@@ -2675,6 +2892,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Input
             }], rightModel: [{
                 type: Input
+            }], toggle: [{
+                type: Output
             }], onClick: [{
                 type: HostListener,
                 args: ['click']
@@ -2694,12 +2913,13 @@ class CheckmarkComponent {
         this.icon = faCheck;
         this.type = CheckmarkType.Rounded;
     }
+    onClick() { this.active = !this.active; }
 }
 CheckmarkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CheckmarkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CheckmarkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: CheckmarkComponent, selector: "sfc-checkmark", inputs: { active: "active", disabled: "disabled", icon: "icon", type: "type" }, host: { properties: { "class.active": "this.active", "class.disabled": "this.disabled", "class": "this.type" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <span class=\"check\">\r\n        <fa-icon [sfcShowHideElement]=\"active\" [icon]=\"icon\"></fa-icon>\r\n    </span>\r\n</div>", styles: [":host{display:inline-block;transition:color .5s ease}:host,:host-context(.sfc-default-theme) :host{color:#545e61}:host-context(.sfc-dark-theme) :host{color:#fff}:host .check{border:.125em solid;background:transparent;transition:border-color .5s ease,background .5s ease;transition:border-color .5s ease;width:1em;height:1em;cursor:pointer;display:flex;align-items:center;justify-content:center}:host .check,:host-context(.sfc-default-theme) :host .check{border-color:#545e61}:host-context(.sfc-dark-theme) :host .check{border-color:#fff}:host .check fa-icon{transition:opacity .5s ease;color:#fff;font-size:.8em;transition:opacity .3s ease}:host .check fa-icon,:host-context(.sfc-default-theme) :host .check fa-icon{opacity:.5}:host-context(.sfc-dark-theme) :host .check fa-icon{opacity:.8}:host .check:hover{border-color:#ffce54}:host .check:hover fa-icon{transition:opacity .5s ease}:host .check:hover fa-icon,:host-context(.sfc-default-theme) :host .check:hover fa-icon{opacity:.8}:host-context(.sfc-dark-theme) :host .check:hover fa-icon{opacity:1}:host.active .check{border-color:#ffce54;background:#ffce54}:host.active .check fa-icon{opacity:1;transform:scale(0);-webkit-text-stroke:0;animation:icon .3s cubic-bezier(1,.008,.565,1.65) .1s 1 forwards}@keyframes icon{0%{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}:host.circle .check{border-radius:50%}:host.rounded .check{border-radius:15%}:host.disabled{pointer-events:none}:host.disabled .check{color:#fff;border-style:dashed;transition:border-color .5s ease}:host.disabled .check,:host-context(.sfc-default-theme) :host.disabled .check{border-color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .check{border-color:#656d78}:host.disabled.active .check{transition:background .5s ease}:host.disabled.active .check,:host-context(.sfc-default-theme) :host.disabled.active .check{background:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled.active .check{background:#656d78}\n"], dependencies: [{ kind: "component", type: i1$2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: ShowHideElementDirective, selector: "[sfcShowHideElement]", inputs: ["sfcShowHideElement", "delay"] }] });
+CheckmarkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: CheckmarkComponent, selector: "sfc-checkmark", inputs: { active: "active", disabled: "disabled", icon: "icon", type: "type" }, host: { listeners: { "click": "onClick()" }, properties: { "class.active": "this.active", "class.disabled": "this.disabled", "class": "this.type" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <span class=\"check\">\r\n        <fa-icon [sfcShowHideElement]=\"active\" [icon]=\"icon\"></fa-icon>\r\n    </span>\r\n</div>", styles: [":host{display:inline-block;transition:color .5s ease}:host,:host-context(.sfc-default-theme) :host{color:#545e61}:host-context(.sfc-dark-theme) :host{color:#fff}:host .check{border:.125em solid;background:transparent;transition:border-color .5s ease,background .5s ease;transition:border-color .5s ease;width:1em;height:1em;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:.1em}:host .check,:host-context(.sfc-default-theme) :host .check{border-color:#545e61}:host-context(.sfc-dark-theme) :host .check{border-color:#fff}:host .check fa-icon{transition:opacity .5s ease;color:#fff;transition:opacity .3s ease}:host .check fa-icon,:host-context(.sfc-default-theme) :host .check fa-icon{opacity:.5}:host-context(.sfc-dark-theme) :host .check fa-icon{opacity:.8}:host .check:hover{border-color:#ffce54}:host .check:hover fa-icon{transition:opacity .5s ease}:host .check:hover fa-icon,:host-context(.sfc-default-theme) :host .check:hover fa-icon{opacity:.8}:host-context(.sfc-dark-theme) :host .check:hover fa-icon{opacity:1}:host.active .check{border-color:#ffce54;background:#ffce54}:host.active .check fa-icon{opacity:1;transform:scale(0);-webkit-text-stroke:0;animation:icon .3s cubic-bezier(1,.008,.565,1.65) .1s 1 forwards}@keyframes icon{0%{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}:host.circle .check{border-radius:50%}:host.rounded .check{border-radius:15%}:host.disabled{pointer-events:none}:host.disabled .check{color:#fff;border-style:dashed;transition:border-color .5s ease}:host.disabled .check,:host-context(.sfc-default-theme) :host.disabled .check{border-color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .check{border-color:#656d78}:host.disabled.active .check{transition:background .5s ease}:host.disabled.active .check,:host-context(.sfc-default-theme) :host.disabled.active .check{background:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled.active .check{background:#656d78}\n"], dependencies: [{ kind: "component", type: i1$2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: ShowHideElementDirective, selector: "[sfcShowHideElement]", inputs: ["sfcShowHideElement", "delay"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CheckmarkComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-checkmark', template: "<div class=\"container\">\r\n    <span class=\"check\">\r\n        <fa-icon [sfcShowHideElement]=\"active\" [icon]=\"icon\"></fa-icon>\r\n    </span>\r\n</div>", styles: [":host{display:inline-block;transition:color .5s ease}:host,:host-context(.sfc-default-theme) :host{color:#545e61}:host-context(.sfc-dark-theme) :host{color:#fff}:host .check{border:.125em solid;background:transparent;transition:border-color .5s ease,background .5s ease;transition:border-color .5s ease;width:1em;height:1em;cursor:pointer;display:flex;align-items:center;justify-content:center}:host .check,:host-context(.sfc-default-theme) :host .check{border-color:#545e61}:host-context(.sfc-dark-theme) :host .check{border-color:#fff}:host .check fa-icon{transition:opacity .5s ease;color:#fff;font-size:.8em;transition:opacity .3s ease}:host .check fa-icon,:host-context(.sfc-default-theme) :host .check fa-icon{opacity:.5}:host-context(.sfc-dark-theme) :host .check fa-icon{opacity:.8}:host .check:hover{border-color:#ffce54}:host .check:hover fa-icon{transition:opacity .5s ease}:host .check:hover fa-icon,:host-context(.sfc-default-theme) :host .check:hover fa-icon{opacity:.8}:host-context(.sfc-dark-theme) :host .check:hover fa-icon{opacity:1}:host.active .check{border-color:#ffce54;background:#ffce54}:host.active .check fa-icon{opacity:1;transform:scale(0);-webkit-text-stroke:0;animation:icon .3s cubic-bezier(1,.008,.565,1.65) .1s 1 forwards}@keyframes icon{0%{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}:host.circle .check{border-radius:50%}:host.rounded .check{border-radius:15%}:host.disabled{pointer-events:none}:host.disabled .check{color:#fff;border-style:dashed;transition:border-color .5s ease}:host.disabled .check,:host-context(.sfc-default-theme) :host.disabled .check{border-color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .check{border-color:#656d78}:host.disabled.active .check{transition:background .5s ease}:host.disabled.active .check,:host-context(.sfc-default-theme) :host.disabled.active .check{background:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled.active .check{background:#656d78}\n"] }]
+            args: [{ selector: 'sfc-checkmark', template: "<div class=\"container\">\r\n    <span class=\"check\">\r\n        <fa-icon [sfcShowHideElement]=\"active\" [icon]=\"icon\"></fa-icon>\r\n    </span>\r\n</div>", styles: [":host{display:inline-block;transition:color .5s ease}:host,:host-context(.sfc-default-theme) :host{color:#545e61}:host-context(.sfc-dark-theme) :host{color:#fff}:host .check{border:.125em solid;background:transparent;transition:border-color .5s ease,background .5s ease;transition:border-color .5s ease;width:1em;height:1em;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:.1em}:host .check,:host-context(.sfc-default-theme) :host .check{border-color:#545e61}:host-context(.sfc-dark-theme) :host .check{border-color:#fff}:host .check fa-icon{transition:opacity .5s ease;color:#fff;transition:opacity .3s ease}:host .check fa-icon,:host-context(.sfc-default-theme) :host .check fa-icon{opacity:.5}:host-context(.sfc-dark-theme) :host .check fa-icon{opacity:.8}:host .check:hover{border-color:#ffce54}:host .check:hover fa-icon{transition:opacity .5s ease}:host .check:hover fa-icon,:host-context(.sfc-default-theme) :host .check:hover fa-icon{opacity:.8}:host-context(.sfc-dark-theme) :host .check:hover fa-icon{opacity:1}:host.active .check{border-color:#ffce54;background:#ffce54}:host.active .check fa-icon{opacity:1;transform:scale(0);-webkit-text-stroke:0;animation:icon .3s cubic-bezier(1,.008,.565,1.65) .1s 1 forwards}@keyframes icon{0%{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}:host.circle .check{border-radius:50%}:host.rounded .check{border-radius:15%}:host.disabled{pointer-events:none}:host.disabled .check{color:#fff;border-style:dashed;transition:border-color .5s ease}:host.disabled .check,:host-context(.sfc-default-theme) :host.disabled .check{border-color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .check{border-color:#656d78}:host.disabled.active .check{transition:background .5s ease}:host.disabled.active .check,:host-context(.sfc-default-theme) :host.disabled.active .check{background:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled.active .check{background:#656d78}\n"] }]
         }], propDecorators: { active: [{
                 type: Input
             }, {
@@ -2717,6 +2937,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             }, {
                 type: HostBinding,
                 args: ['class']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
             }] } });
 
 var _a;
@@ -2826,6 +3049,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
 
 var LoadContainerLoadType;
 (function (LoadContainerLoadType) {
+    LoadContainerLoadType["Common"] = "common";
     LoadContainerLoadType["Button"] = "button";
     LoadContainerLoadType["Scroll"] = "scroll";
     LoadContainerLoadType["Pagination"] = "pagination";
@@ -2850,6 +3074,7 @@ var LoadContainerType;
 (function (LoadContainerType) {
     LoadContainerType["Dropdown"] = "dropdown";
     LoadContainerType["Table"] = "table";
+    LoadContainerType["Container"] = "container";
 })(LoadContainerType || (LoadContainerType = {}));
 
 class LoadMoreButtonComponent {
@@ -2877,11 +3102,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             }] } });
 
 class LoadContainerComponent {
-    constructor(loaderService, loadMoreService, paginationService, sortingService) {
+    constructor(loaderService, loadMoreService, paginationService, sortingService, reloadService) {
         this.loaderService = loaderService;
         this.loadMoreService = loadMoreService;
         this.paginationService = paginationService;
         this.sortingService = sortingService;
+        this.reloadService = reloadService;
         this.ComponentSize = ComponentSize;
         this.Position = Position;
         this.type = LoadContainerType.Dropdown;
@@ -2936,7 +3162,7 @@ class LoadContainerComponent {
             this.source == LoadContainerChangesSource.Page ||
             this.source == LoadContainerChangesSource.Data;
     }
-    get pagination() { return this.model.loadType == LoadContainerLoadType.Pagination; }
+    get pagination() { return this.model.loadType == LoadContainerLoadType.Pagination && isDefined(this.model.pagination); }
     ngOnDestroy() {
         if (this._subscription)
             this._subscription.unsubscribe();
@@ -2966,11 +3192,14 @@ class LoadContainerComponent {
     subscribe() {
         if (!this.model)
             return;
-        if (!isDefined(this.model.pagination))
-            this.model.pagination = PaginationConstants.DEFAULT_PAGINATION;
-        else
-            this.paginationService.pageValue = this.model.pagination?.page;
-        const parameters$ = this.buildParameters(this.model.predicate$), data$ = isDefined(this.model.loader)
+        this.paginationService.pageValue = this.model.pagination?.page || PaginationConstants.DEFAULT_PAGINATION.page;
+        if (!this.model.predicate$) {
+            this.model.predicate$ = EMPTY.pipe(startWith(null));
+        }
+        const predicate$ = combineLatest([
+            this.model.predicate$,
+            this.reloadService.reload$.pipe(startWith(null))
+        ]).pipe(map(([model, _]) => model)), parameters$ = this.buildParameters(predicate$), data$ = isDefined(this.model.loader)
             ? this.buildDynamic(parameters$, this.model.loader)
             : this.buildStatic(parameters$, this.model);
         if (isDefined(this._subscription))
@@ -2981,8 +3210,8 @@ class LoadContainerComponent {
         });
     }
     buildParameters(predicate$) {
-        const parameters$ = (predicate$ || EMPTY.pipe(startWith(null))).pipe(tap(() => {
-            if (this.source != LoadContainerChangesSource.Initial)
+        const parameters$ = predicate$.pipe(tap((params) => {
+            if (this.source != LoadContainerChangesSource.Initial && !params?.reload)
                 this.resetParameters();
             this.source = LoadContainerChangesSource.Predicate;
             this.predicateChanged = true;
@@ -3014,8 +3243,8 @@ class LoadContainerComponent {
                 parameters = { params: parameters.params, page: this.page, sorting: parameters.sorting };
             }
             const filtered = model.filter ? model.filter(items, parameters) : items, sorted = parameters.sorting ? sortBy([...filtered], parameters.sorting.id, parameters.sorting.direction) : filtered, data = sorted ? {
-                items: skip(sorted, parameters.page, this.model.pagination?.size),
-                next: parameters.page < Math.ceil(sorted.length / this.model.pagination?.size),
+                items: this.model.pagination ? skip(sorted, parameters.page, this.model.pagination?.size) : sorted,
+                next: this.model.pagination ? parameters.page < Math.ceil(sorted.length / this.model.pagination?.size) : false,
                 reset: this.reset,
                 total: sorted.length,
                 page: parameters.page
@@ -3032,12 +3261,12 @@ class LoadContainerComponent {
             this.loadMoreService.reset();
     }
 }
-LoadContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LoadContainerComponent, deps: [{ token: LoaderService }, { token: LoadMoreService }, { token: PaginationService }, { token: SortingService }], target: i0.ɵɵFactoryTarget.Component });
-LoadContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: LoadContainerComponent, selector: "sfc-load-container", inputs: { id: "id", type: "type", open: "open", loadMore: "loadMore", loadMoreLabel: "loadMoreLabel", showEmpty: "showEmpty", emptyLabel: "emptyLabel", model: "model", scrollTarget: "scrollTarget", paginationCount: "paginationCount", paginationLimits: "paginationLimits", showLoading: "showLoading" }, outputs: { handleError: "handleError", handleSuccess: "handleSuccess", handleLoading: "handleLoading" }, host: { properties: { "class": "this.type", "class.open": "this.open", "class.empty": "this.isEmpty", "class.loading": "this._loading" } }, providers: [LoadMoreService, PaginationService], viewQueries: [{ propertyName: "contentEl", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: "<div class=\"container\">\r\n    <sfc-bounce-loader *ngIf=\"showLoading\" [id]=\"id\" [sfcComponentSize]=\"ComponentSize.Small\"></sfc-bounce-loader>\r\n    <div #content class=\"content\" [sfcScrollIntoView]=\"scrollTarget\" (sfcScrollTracker)=\"onScroll()\"\r\n        [positions]=\"scrollPosition\">\r\n        <div class=\"items\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n        <div class=\"actions\" (sfcMouseDown)=\"$event.preventDefault()\">\r\n            <sfc-load-more-button [hidden]=\"hideLoadMoreButton\" (more)=\"more($event)\" [label]=\"loadMoreLabel\">\r\n            </sfc-load-more-button>\r\n            <sfc-pagination *ngIf=\"showPagination\" [limits]=\"paginationLimits\" [count]=\"paginationCount\" [full]=\"false\"\r\n                [total]=\"total\" [size]=\"model.pagination?.size!\" [page]=\"page\">\r\n            </sfc-pagination>\r\n            <sfc-delimeter *ngIf=\"isEmpty\" [label]=\"emptyLabel\"></sfc-delimeter>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{width:100%;height:inherit;position:relative}:host .container{height:inherit}:host .container .content{transition:background .5s ease;cursor:initial;overflow-y:auto;overflow-x:hidden;height:inherit}:host .container .content,:host-context(.sfc-default-theme) :host .container .content{background:transparent}:host-context(.sfc-dark-theme) :host .container .content{background:transparent}:host .container .content sfc-delimeter{font-style:italic;font-weight:700}:host.dropdown .container .content{display:none;opacity:0;max-height:12.5em;box-shadow:0 .125em .125em #00000024,0 .18em .06em -.125em #0000001f,0 .06em .31em #0003}:host.dropdown.open .container .content{display:block;opacity:1}:host ::ng-deep ::-webkit-scrollbar{width:.375em;height:.375em}:host ::ng-deep ::-webkit-scrollbar-track{border-radius:.625em;background:#e9e9e9}:host ::ng-deep ::-webkit-scrollbar-thumb{border-radius:.625em;background:rgba(0,0,0,.2)}:host ::ng-deep ::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.4)}:host ::ng-deep ::-webkit-scrollbar-thumb:active{background:rgba(0,0,0,.6)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: MouseDownDirective, selector: "[sfcMouseDown]", inputs: ["button"], outputs: ["sfcMouseDown"] }, { kind: "directive", type: ComponentSizeDirective, selector: "[sfcComponentSize]", inputs: ["sfcComponentSize", "customSize"] }, { kind: "directive", type: ScrollTrackerDirective, selector: "[sfcScrollTracker]", inputs: ["positions"], outputs: ["sfcScrollTracker"] }, { kind: "directive", type: ScrollIntoViewDirective, selector: "[sfcScrollIntoView]", inputs: ["sfcScrollIntoView", "local", "options"] }, { kind: "component", type: DelimeterComponent, selector: "sfc-delimeter", inputs: ["label", "direction"] }, { kind: "component", type: PaginationComponent, selector: "sfc-pagination", inputs: ["count", "full", "limits", "page", "total", "size"] }, { kind: "component", type: LoadMoreButtonComponent, selector: "sfc-load-more-button", inputs: ["label", "icon"], outputs: ["more"] }, { kind: "component", type: BounceLoaderComponent, selector: "sfc-bounce-loader" }] });
+LoadContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LoadContainerComponent, deps: [{ token: LoaderService }, { token: LoadMoreService }, { token: PaginationService }, { token: SortingService }, { token: ReloadService }], target: i0.ɵɵFactoryTarget.Component });
+LoadContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: LoadContainerComponent, selector: "sfc-load-container", inputs: { id: "id", type: "type", open: "open", loadMore: "loadMore", loadMoreLabel: "loadMoreLabel", showEmpty: "showEmpty", emptyLabel: "emptyLabel", model: "model", scrollTarget: "scrollTarget", paginationCount: "paginationCount", paginationLimits: "paginationLimits", showLoading: "showLoading" }, outputs: { handleError: "handleError", handleSuccess: "handleSuccess", handleLoading: "handleLoading" }, host: { properties: { "class": "this.type", "class.open": "this.open", "class.empty": "this.isEmpty", "class.loading": "this._loading" } }, providers: [LoadMoreService, PaginationService, ReloadService], viewQueries: [{ propertyName: "contentEl", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: "<div class=\"container\">\r\n    <sfc-bounce-loader *ngIf=\"showLoading\" [id]=\"id\" [sfcComponentSize]=\"ComponentSize.Small\"></sfc-bounce-loader>\r\n    <div #content class=\"content\" [sfcScrollIntoView]=\"scrollTarget\" (sfcScrollTracker)=\"onScroll()\"\r\n        [positions]=\"scrollPosition\">\r\n        <div class=\"items\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n        <div class=\"actions\" (sfcMouseDown)=\"$event.preventDefault()\">\r\n            <sfc-load-more-button [hidden]=\"hideLoadMoreButton\" (more)=\"more($event)\" [label]=\"loadMoreLabel\">\r\n            </sfc-load-more-button>\r\n            <sfc-pagination *ngIf=\"showPagination\" [limits]=\"paginationLimits\" [count]=\"paginationCount\" [full]=\"false\"\r\n                [total]=\"total\" [size]=\"model.pagination?.size!\" [page]=\"page\">\r\n            </sfc-pagination>\r\n            <sfc-delimeter *ngIf=\"isEmpty\" [label]=\"emptyLabel\"></sfc-delimeter>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{width:100%;height:inherit;position:relative}:host .container{height:inherit}:host .container .content{transition:background .5s ease;cursor:initial;overflow-y:auto;overflow-x:hidden;height:inherit}:host .container .content,:host-context(.sfc-default-theme) :host .container .content{background:transparent}:host-context(.sfc-dark-theme) :host .container .content{background:transparent}:host .container .content sfc-delimeter{padding:.5em 0;font-size:.8em;font-style:italic;font-weight:700}:host.dropdown .container .content{display:none;opacity:0;max-height:12.5em;box-shadow:0 .125em .125em #00000024,0 .18em .06em -.125em #0000001f,0 .06em .31em #0003}:host.dropdown.open .container .content{display:block;opacity:1}:host ::ng-deep ::-webkit-scrollbar{width:.375em;height:.375em}:host ::ng-deep ::-webkit-scrollbar-track{border-radius:.625em;background:#e9e9e9}:host ::ng-deep ::-webkit-scrollbar-thumb{border-radius:.625em;background:rgba(0,0,0,.2)}:host ::ng-deep ::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.4)}:host ::ng-deep ::-webkit-scrollbar-thumb:active{background:rgba(0,0,0,.6)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: MouseDownDirective, selector: "[sfcMouseDown]", inputs: ["button"], outputs: ["sfcMouseDown"] }, { kind: "directive", type: ComponentSizeDirective, selector: "[sfcComponentSize]", inputs: ["sfcComponentSize", "customSize"] }, { kind: "directive", type: ScrollTrackerDirective, selector: "[sfcScrollTracker]", inputs: ["positions"], outputs: ["sfcScrollTracker"] }, { kind: "directive", type: ScrollIntoViewDirective, selector: "[sfcScrollIntoView]", inputs: ["sfcScrollIntoView", "local", "options"] }, { kind: "component", type: DelimeterComponent, selector: "sfc-delimeter", inputs: ["label", "direction"] }, { kind: "component", type: PaginationComponent, selector: "sfc-pagination", inputs: ["count", "full", "limits", "page", "total", "size"] }, { kind: "component", type: LoadMoreButtonComponent, selector: "sfc-load-more-button", inputs: ["label", "icon"], outputs: ["more"] }, { kind: "component", type: BounceLoaderComponent, selector: "sfc-bounce-loader" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LoadContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-load-container', providers: [LoadMoreService, PaginationService], template: "<div class=\"container\">\r\n    <sfc-bounce-loader *ngIf=\"showLoading\" [id]=\"id\" [sfcComponentSize]=\"ComponentSize.Small\"></sfc-bounce-loader>\r\n    <div #content class=\"content\" [sfcScrollIntoView]=\"scrollTarget\" (sfcScrollTracker)=\"onScroll()\"\r\n        [positions]=\"scrollPosition\">\r\n        <div class=\"items\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n        <div class=\"actions\" (sfcMouseDown)=\"$event.preventDefault()\">\r\n            <sfc-load-more-button [hidden]=\"hideLoadMoreButton\" (more)=\"more($event)\" [label]=\"loadMoreLabel\">\r\n            </sfc-load-more-button>\r\n            <sfc-pagination *ngIf=\"showPagination\" [limits]=\"paginationLimits\" [count]=\"paginationCount\" [full]=\"false\"\r\n                [total]=\"total\" [size]=\"model.pagination?.size!\" [page]=\"page\">\r\n            </sfc-pagination>\r\n            <sfc-delimeter *ngIf=\"isEmpty\" [label]=\"emptyLabel\"></sfc-delimeter>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{width:100%;height:inherit;position:relative}:host .container{height:inherit}:host .container .content{transition:background .5s ease;cursor:initial;overflow-y:auto;overflow-x:hidden;height:inherit}:host .container .content,:host-context(.sfc-default-theme) :host .container .content{background:transparent}:host-context(.sfc-dark-theme) :host .container .content{background:transparent}:host .container .content sfc-delimeter{font-style:italic;font-weight:700}:host.dropdown .container .content{display:none;opacity:0;max-height:12.5em;box-shadow:0 .125em .125em #00000024,0 .18em .06em -.125em #0000001f,0 .06em .31em #0003}:host.dropdown.open .container .content{display:block;opacity:1}:host ::ng-deep ::-webkit-scrollbar{width:.375em;height:.375em}:host ::ng-deep ::-webkit-scrollbar-track{border-radius:.625em;background:#e9e9e9}:host ::ng-deep ::-webkit-scrollbar-thumb{border-radius:.625em;background:rgba(0,0,0,.2)}:host ::ng-deep ::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.4)}:host ::ng-deep ::-webkit-scrollbar-thumb:active{background:rgba(0,0,0,.6)}\n"] }]
-        }], ctorParameters: function () { return [{ type: LoaderService }, { type: LoadMoreService }, { type: PaginationService }, { type: SortingService }]; }, propDecorators: { id: [{
+            args: [{ selector: 'sfc-load-container', providers: [LoadMoreService, PaginationService, ReloadService], template: "<div class=\"container\">\r\n    <sfc-bounce-loader *ngIf=\"showLoading\" [id]=\"id\" [sfcComponentSize]=\"ComponentSize.Small\"></sfc-bounce-loader>\r\n    <div #content class=\"content\" [sfcScrollIntoView]=\"scrollTarget\" (sfcScrollTracker)=\"onScroll()\"\r\n        [positions]=\"scrollPosition\">\r\n        <div class=\"items\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n        <div class=\"actions\" (sfcMouseDown)=\"$event.preventDefault()\">\r\n            <sfc-load-more-button [hidden]=\"hideLoadMoreButton\" (more)=\"more($event)\" [label]=\"loadMoreLabel\">\r\n            </sfc-load-more-button>\r\n            <sfc-pagination *ngIf=\"showPagination\" [limits]=\"paginationLimits\" [count]=\"paginationCount\" [full]=\"false\"\r\n                [total]=\"total\" [size]=\"model.pagination?.size!\" [page]=\"page\">\r\n            </sfc-pagination>\r\n            <sfc-delimeter *ngIf=\"isEmpty\" [label]=\"emptyLabel\"></sfc-delimeter>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{width:100%;height:inherit;position:relative}:host .container{height:inherit}:host .container .content{transition:background .5s ease;cursor:initial;overflow-y:auto;overflow-x:hidden;height:inherit}:host .container .content,:host-context(.sfc-default-theme) :host .container .content{background:transparent}:host-context(.sfc-dark-theme) :host .container .content{background:transparent}:host .container .content sfc-delimeter{padding:.5em 0;font-size:.8em;font-style:italic;font-weight:700}:host.dropdown .container .content{display:none;opacity:0;max-height:12.5em;box-shadow:0 .125em .125em #00000024,0 .18em .06em -.125em #0000001f,0 .06em .31em #0003}:host.dropdown.open .container .content{display:block;opacity:1}:host ::ng-deep ::-webkit-scrollbar{width:.375em;height:.375em}:host ::ng-deep ::-webkit-scrollbar-track{border-radius:.625em;background:#e9e9e9}:host ::ng-deep ::-webkit-scrollbar-thumb{border-radius:.625em;background:rgba(0,0,0,.2)}:host ::ng-deep ::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.4)}:host ::ng-deep ::-webkit-scrollbar-thumb:active{background:rgba(0,0,0,.6)}\n"] }]
+        }], ctorParameters: function () { return [{ type: LoaderService }, { type: LoadMoreService }, { type: PaginationService }, { type: SortingService }, { type: ReloadService }]; }, propDecorators: { id: [{
                 type: Input
             }], type: [{
                 type: Input
@@ -3185,6 +3414,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 args: ['click']
             }] } });
 
+class MessageComponent {
+    constructor() {
+        this.type = NotificationType.Info;
+    }
+}
+MessageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: MessageComponent, selector: "sfc-message", inputs: { message: "message", type: "type" }, host: { properties: { "class": "this.type" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"content\">\r\n        <span class=\"message\">{{message}}</span>\r\n    </div>    \r\n</div>", styles: [":host .container .content .message{text-align:center;font-weight:700;font-size:.8em;padding:0}:host .container .content .message:empty{display:none}:host.info .container .content .message{color:#4fc1e9}:host.success .container .content .message{color:#4ec07d}:host.failed .container .content .message{color:#e96075}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MessageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-message', template: "<div class=\"container\">\r\n    <div class=\"content\">\r\n        <span class=\"message\">{{message}}</span>\r\n    </div>    \r\n</div>", styles: [":host .container .content .message{text-align:center;font-weight:700;font-size:.8em;padding:0}:host .container .content .message:empty{display:none}:host.info .container .content .message{color:#4fc1e9}:host.success .container .content .message{color:#4ec07d}:host.failed .container .content .message{color:#e96075}\n"] }]
+        }], propDecorators: { message: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
 class NgxSfcCommonModule {
 }
 NgxSfcCommonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NgxSfcCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -3223,6 +3471,7 @@ NgxSfcCommonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", vers
         CollapseExpandComponent,
         CollapseExpandContainerComponent,
         ToggleComponent,
+        MessageComponent,
         // loaders
         BounceLoaderComponent,
         CircleLoaderComponent,
@@ -3234,7 +3483,8 @@ NgxSfcCommonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", vers
         DefaultModalFooterComponent,
         // pipes
         SwitchMultiCasePipe,
-        SortByPipe], imports: [CommonModule,
+        SortByPipe,
+        RepeatPipe], imports: [CommonModule,
         FontAwesomeModule], exports: [
         // directives
         ClickOutsideDirective,
@@ -3270,6 +3520,7 @@ NgxSfcCommonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", vers
         CollapseExpandComponent,
         CollapseExpandContainerComponent,
         ToggleComponent,
+        MessageComponent,
         // loaders
         BounceLoaderComponent,
         CircleLoaderComponent,
@@ -3281,7 +3532,8 @@ NgxSfcCommonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", vers
         DefaultModalFooterComponent,
         // pipes
         SwitchMultiCasePipe,
-        SortByPipe] });
+        SortByPipe,
+        RepeatPipe] });
 NgxSfcCommonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NgxSfcCommonModule, providers: [DOCUMENT_PROVIDERS, WINDOW_PROVIDERS], imports: [CommonModule,
         FontAwesomeModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NgxSfcCommonModule, decorators: [{
@@ -3322,6 +3574,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                         CollapseExpandComponent,
                         CollapseExpandContainerComponent,
                         ToggleComponent,
+                        MessageComponent,
                         // loaders
                         BounceLoaderComponent,
                         CircleLoaderComponent,
@@ -3333,7 +3586,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                         DefaultModalFooterComponent,
                         // pipes
                         SwitchMultiCasePipe,
-                        SortByPipe
+                        SortByPipe,
+                        RepeatPipe
                     ],
                     imports: [
                         CommonModule,
@@ -3374,6 +3628,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                         CollapseExpandComponent,
                         CollapseExpandContainerComponent,
                         ToggleComponent,
+                        MessageComponent,
                         // loaders
                         BounceLoaderComponent,
                         CircleLoaderComponent,
@@ -3385,7 +3640,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                         DefaultModalFooterComponent,
                         // pipes
                         SwitchMultiCasePipe,
-                        SortByPipe
+                        SortByPipe,
+                        RepeatPipe
                     ],
                     providers: [DOCUMENT_PROVIDERS, WINDOW_PROVIDERS]
                 }]
@@ -3399,5 +3655,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BounceLoaderComponent, BrowserDocumentRef, BrowserWindowRef, ButtonComponent, ButtonType, CheckmarkComponent, CheckmarkType, CircleLoaderComponent, CircleLoaderType, ClickOutsideDirective, CloseComponent, CollapseExpandComponent, CollapseExpandContainerComponent, CollapseExpandDirective, CommonConstants, Compare, ComponentReferenceDirective, ComponentSize, ComponentSizeDirective, DOCUMENT, DOCUMENT_PROVIDERS, DateTimeConstants, DefaultModalFooterComponent, DefaultModalHeaderComponent, DelimeterComponent, DestroyParentDirective, Direction, DocumentRef, DomChangesDirective, DotComponent, DotsComponent, HamburgerComponent, HamburgerMenuComponent, IconComponent, IfDirective, ImageLoadDirective, ImageLoadService, LoadContainerChangesSource, LoadContainerComponent, LoadContainerLoadType, LoadContainerType, LoadMoreButtonComponent, LoadMoreService, LoaderService, MediaLimits, ModalComponent, ModalOpenDirective, ModalOpenOnClickDirective, ModalService, ModalTemplate, MouseDownDirective, NgxSfcCommonModule, PaginationComponent, PaginationConstants, PaginationService, Position, ResizeService, ScrollIntoViewDirective, ScrollTrackerDirective, Sequence, ShowHideElementDirective, SortByPipe, SortingDirection, SortingService, SwitchMultiCasePipe, TemplateContentComponent, TemplateReferenceDirective, Theme, ThrowElementOnHoverDirective, ToggleComponent, ToggleSwitcherComponent, TooltipComponent, TooltipType, UIClass, UIConstants, WINDOW, WINDOW_PROVIDERS, WindowRef, addClasses, addItem, addPropertyToObject, all, any, browserDocumentProvider, browserWindowProvider, buildHttpParams, contains, convertDateToTimestamp, convertFromBase64String, convertTimestampToDate, convertToBase64String, convertUTCDateToLocalDate, count, distinct, documentFactory, documentProvider, firstItem, firstOrDefault, generateGuid, getAge, getCalcValue, getCollectionOrEmpty, getCssLikeValue, getFileExtension, getFirstDayOfMonth, getFirstDayOfMonthByYearAndMonth, getFirstDayOfYear, getLastDayOfMonth, getLastDayOfMonthByYearAndMonth, getLastDayOfYear, getNextDate, getNextMonth, getNextYear, getPreviousDate, getPreviousMonth, getPreviousYear, getRotateValue, getValueFromCssLikeValue, getWeeksNumberInMonth, hasItem, hasItemBy, hasObjectItem, hexToRgb, isAsyncData, isChromeBrowser, isDateGreat, isDateGreatOrEqual, isDateTimeGreat, isDateTimeGreatOrEqual, isDefined, isEmail, isEqual, isEqualDateTimes, isEqualDates, isImage, isNullOrEmptyString, isNumeric, isObject, lastItem, max, mergeDeep, nameof, parseBoolean, parseFileSize, readAsDataURL, remove, removeClasses, removeItem, removeItemBy, removePropertyFromObject, replaceRgbOpacity, rgbToHex, setDay, setDefaultSecondsAndMiliseconds, setHours, setMilliseconds, setMinutes, setSeconds, setYear, skip, sort, sortBy, sortByPath, sum, trim, updateItemBy, where, windowFactory, windowProvider };
+export { BounceLoaderComponent, BrowserDocumentRef, BrowserWindowRef, ButtonComponent, ButtonType, CheckmarkComponent, CheckmarkType, CircleLoaderComponent, CircleLoaderType, ClickOutsideDirective, CloseComponent, CollapseExpandComponent, CollapseExpandContainerComponent, CollapseExpandDirective, CommonConstants, Compare, ComponentReferenceDirective, ComponentSize, ComponentSizeDirective, DOCUMENT, DOCUMENT_PROVIDERS, DateTimeConstants, DefaultModalFooterComponent, DefaultModalHeaderComponent, DelimeterComponent, DestroyParentDirective, Direction, DocumentRef, DomChangesDirective, DotComponent, DotsComponent, HamburgerComponent, HamburgerMenuComponent, IconComponent, IfDirective, ImageLoadDirective, ImageLoadService, ItemsView, LoadContainerChangesSource, LoadContainerComponent, LoadContainerLoadType, LoadContainerType, LoadMoreButtonComponent, LoadMoreService, LoaderService, MediaLimits, MessageComponent, ModalComponent, ModalOpenDirective, ModalOpenOnClickDirective, ModalService, ModalTemplate, MouseDownDirective, NgxSfcCommonModule, NotificationType, ObservableModel, PaginationComponent, PaginationConstants, PaginationService, Position, ReloadService, RepeatPipe, ResizeService, ScrollIntoViewDirective, ScrollTrackerDirective, Select, Sequence, ShowHideElementDirective, SortByPipe, SortingDirection, SortingService, State, SwitchMultiCasePipe, TemplateContentComponent, TemplateReferenceDirective, Theme, ThrowElementOnHoverDirective, ToggleComponent, ToggleSwitcherComponent, TooltipComponent, TooltipType, UIClass, UIConstants, WINDOW, WINDOW_PROVIDERS, WindowRef, addClasses, addItem, addPropertyToObject, all, any, browserDocumentProvider, browserWindowProvider, buildHttpParams, contains, convertDateToTimestamp, convertFromBase64String, convertTimestampToDate, convertToBase64String, convertUTCDateToLocalDate, count, distinct, documentFactory, documentProvider, firstItem, firstOrDefault, generateGuid, getAge, getCalcValue, getCollectionOrEmpty, getCssLikeValue, getFileExtension, getFirstDayOfMonth, getFirstDayOfMonthByYearAndMonth, getFirstDayOfYear, getLastDayOfMonth, getLastDayOfMonthByYearAndMonth, getLastDayOfYear, getNextDate, getNextMonth, getNextYear, getPreviousDate, getPreviousMonth, getPreviousYear, getRotateValue, getValueFromCssLikeValue, getWeeksNumberInMonth, hasAnyItem, hasItem, hasItemBy, hasObjectItem, hexToRgb, isArraysEquals, isAsyncData, isChromeBrowser, isDateGreat, isDateGreatOrEqual, isDateTimeGreat, isDateTimeGreatOrEqual, isDateTimeLessOrEqual, isDefined, isEmail, isEqual, isEqualDateTimes, isEqualDates, isImage, isJsonString, isNullOrEmptyString, isNumeric, isObject, isString, isTimeGreatOrEqual, isTimeLessOrEqual, lastItem, max, mergeDeep, nameof, parseBoolean, parseFileSize, readAsDataURL, remove, removeClasses, removeItem, removeItemBy, removePropertyFromObject, replaceRgbOpacity, rgbToHex, setDay, setDefaultSecondsAndMiliseconds, setHours, setMilliseconds, setMinutes, setSeconds, setYear, skip, sort, sortBy, sortByPath, stopAndPreventPropagation, sum, trim, updateItemBy, where, windowFactory, windowProvider };
 //# sourceMappingURL=ngx-sfc-common.mjs.map