ngx-sfc-common 0.0.0-watch

package/fesm2020/ngx-sfc-common.mjs

@@ -0,0 +1,3088 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, Injectable, PLATFORM_ID, EventEmitter, Directive, Inject, Input, Output, HostListener, Pipe, Component, HostBinding, ContentChildren, ViewChild, NgModule } from '@angular/core';
+import * as i1$1 from '@angular/common';
+import { isPlatformBrowser, CommonModule } from '@angular/common';
+import * as i3 from '@fortawesome/angular-fontawesome';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { Subject, fromEvent, Observable, distinctUntilChanged, startWith, BehaviorSubject, filter, map, EMPTY, combineLatest, tap, switchMap, of } from 'rxjs';
+import * as i1 from '@angular/platform-browser';
+import { trigger, state, style, transition, group, query, animate, animateChild } from '@angular/animations';
+import { faTimes, faWindowRestore, faCheck, faChevronLeft, faChevronRight, faChevronUp, faChevronDown, faChevronCircleDown } from '@fortawesome/free-solid-svg-icons';
+
+/**
+ * Component sizes
+ */
+var ComponentSize;
+(function (ComponentSize) {
+    ComponentSize["Small"] = "small";
+    ComponentSize["Medium"] = "medium";
+    ComponentSize["Large"] = "large";
+    ComponentSize["Custom"] = "custom";
+})(ComponentSize || (ComponentSize = {}));
+
+/**
+ * Direction types
+ */
+var Direction;
+(function (Direction) {
+    Direction["Horizontal"] = "horizontal";
+    Direction["Vertical"] = "vertical";
+})(Direction || (Direction = {}));
+
+/**
+ * CSS Media limits
+ */
+var MediaLimits;
+(function (MediaLimits) {
+    MediaLimits[MediaLimits["LaptopLarge"] = 1440] = "LaptopLarge";
+    MediaLimits[MediaLimits["Laptop"] = 1024] = "Laptop";
+    MediaLimits[MediaLimits["Tablet"] = 768] = "Tablet";
+    MediaLimits[MediaLimits["MobileLarge"] = 425] = "MobileLarge";
+    MediaLimits[MediaLimits["Mobile"] = 375] = "Mobile";
+    MediaLimits[MediaLimits["MobileSmall"] = 320] = "MobileSmall";
+})(MediaLimits || (MediaLimits = {}));
+
+/**
+ * Position directions
+ */
+var Position;
+(function (Position) {
+    Position["Top"] = "top";
+    Position["Bottom"] = "bottom";
+    Position["Left"] = "left";
+    Position["Right"] = "right";
+    Position["Center"] = "center";
+})(Position || (Position = {}));
+
+/**
+ * Type of sorting
+ */
+var SortingDirection;
+(function (SortingDirection) {
+    SortingDirection["Ascending"] = "ascending";
+    SortingDirection["Descending"] = "descending";
+})(SortingDirection || (SortingDirection = {}));
+
+/**
+ * Theme types
+ */
+var Theme;
+(function (Theme) {
+    Theme["Default"] = "sfc-default-theme";
+    Theme["Dark"] = "sfc-dark-theme";
+})(Theme || (Theme = {}));
+
+/**
+ * UI classes
+ */
+var UIClass;
+(function (UIClass) {
+    UIClass["Active"] = "active";
+    UIClass["Valid"] = "valid";
+    UIClass["Invalid"] = "invalid";
+    UIClass["InnerInvalid"] = "inner-invalid";
+    UIClass["Enabled"] = "enabled";
+    UIClass["Disabled"] = "disabled";
+    UIClass["Selected"] = "selected";
+    UIClass["Empty"] = "empty";
+    UIClass["Focus"] = "focus";
+    UIClass["Open"] = "open";
+    UIClass["Loading"] = "loading";
+    UIClass["Removed"] = "removed";
+    UIClass["Visible"] = "visible";
+    UIClass["Hidden"] = "hidden";
+    UIClass["Animated"] = "animated";
+    UIClass["Expanded"] = "expanded";
+    UIClass["Fixed"] = "fixed";
+    UIClass["Bordered"] = "bordered";
+    UIClass["Even"] = "even";
+    UIClass["Pointer"] = "pointer";
+    UIClass["Default"] = "default";
+    UIClass["Initialization"] = "initialization";
+})(UIClass || (UIClass = {}));
+;
+
+/**
+ * Sequence types
+ */
+var Sequence;
+(function (Sequence) {
+    Sequence["Previous"] = "previous";
+    Sequence["Next"] = "next";
+})(Sequence || (Sequence = {}));
+
+/**
+ * Create a new injection token for injecting the Document into a component.
+ */
+const DOCUMENT = new InjectionToken('DocumentToken');
+/**
+ * Define abstract class for obtaining reference to the global Document object.
+ */
+class DocumentRef {
+    get nativeDocument() {
+        throw new Error('Not implemented.');
+    }
+}
+/**
+ * Define class that implements the abstract class and returns the native Document object.
+ */
+class BrowserDocumentRef extends DocumentRef {
+    constructor() {
+        super();
+    }
+    /**
+     * @returns Document object
+     */
+    get nativeDocument() {
+        return document;
+    }
+}
+BrowserDocumentRef.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BrowserDocumentRef, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+BrowserDocumentRef.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BrowserDocumentRef });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BrowserDocumentRef, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return []; } });
+/**
+ * Create an factory function that returns the native Document object.
+ * @param browserDocumentRef Native Document object
+ * @param platformId id of platform
+ * @returns type of platform of empty object
+ */
+function documentFactory(browserDocumentRef, platformId) {
+    if (isPlatformBrowser(platformId)) {
+        return browserDocumentRef.nativeDocument;
+    }
+    const doc = {
+        hidden: false,
+        visibilityState: UIClass.Visible
+    };
+    return doc;
+}
+/**
+ * Create a injectable provider for the DocumentRef token that uses the BrowserDocumentRef class.
+ */
+const browserDocumentProvider = {
+    provide: DocumentRef,
+    useClass: BrowserDocumentRef
+};
+/**
+ * Create an injectable provider that uses the DocumentFactory function for returning the native Document object.
+ */
+const documentProvider = {
+    provide: DOCUMENT,
+    useFactory: documentFactory,
+    deps: [DocumentRef, PLATFORM_ID]
+};
+/**
+ * Create an array of providers.
+ */
+const DOCUMENT_PROVIDERS = [browserDocumentProvider, documentProvider];
+
+/**
+ * Create a new injection token for injecting the window into a component.
+ */
+const WINDOW = new InjectionToken('WindowToken');
+/**
+ * Define abstract class for obtaining reference to the global window object.
+ */
+class WindowRef {
+    get nativeWindow() {
+        throw new Error('Not implemented.');
+    }
+}
+/**
+ * Define class that implements the abstract class and returns the native window object.
+ */
+class BrowserWindowRef extends WindowRef {
+    constructor() {
+        super();
+    }
+    /**
+     * @returns window object
+     */
+    get nativeWindow() {
+        return window;
+    }
+}
+BrowserWindowRef.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BrowserWindowRef, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+BrowserWindowRef.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BrowserWindowRef });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BrowserWindowRef, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return []; } });
+/**
+ * Create an factory function that returns the native window object.
+ * @param browserWindowRef Native window object
+ * @param platformId id of platform
+ * @returns type of platform of empty object
+ */
+function windowFactory(browserWindowRef, platformId) {
+    if (isPlatformBrowser(platformId)) {
+        return browserWindowRef.nativeWindow;
+    }
+    const obj = {
+        setTimeout: (func, time) => { },
+        clearTimeout: (a) => { }
+    };
+    return obj;
+}
+/**
+ * Create a injectable provider for the WindowRef token that uses the BrowserWindowRef class.
+ */
+const browserWindowProvider = {
+    provide: WindowRef,
+    useClass: BrowserWindowRef
+};
+/**
+ * Create an injectable provider that uses the windowFactory function for returning the native window object.
+ */
+const windowProvider = {
+    provide: WINDOW,
+    useFactory: windowFactory,
+    deps: [WindowRef, PLATFORM_ID]
+};
+/**
+ * Create an array of providers.
+ */
+const WINDOW_PROVIDERS = [browserWindowProvider, windowProvider];
+
+class ResizeService {
+    constructor(eventManager) {
+        this.eventManager = eventManager;
+        this.resizeSubject = new Subject();
+        this.eventManager.addGlobalEventListener('window', 'resize', this.onResize.bind(this));
+        this.eventManager.addGlobalEventListener('window', 'onload', this.onLoaded.bind(this));
+    }
+    /**
+     * Makes resizeSubject become Observable
+     * @returns Observable of resizeSubject
+     */
+    get onResize$() {
+        return this.resizeSubject.asObservable();
+    }
+    /**
+     * Handler of 'resize' event. Passes data throw resizeSubject
+     * @param event Event Object of 'resize' event
+     */
+    onResize(event) {
+        this.resizeSubject.next(event.target);
+    }
+    /**
+     * Handler of 'onload' event. Defines the width of window
+     * @param event Event Object of 'onload' event
+     */
+    onLoaded(event) {
+        this.windowWidth = event.target;
+    }
+}
+ResizeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ResizeService, deps: [{ token: i1.EventManager }], target: i0.ɵɵFactoryTarget.Injectable });
+ResizeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ResizeService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ResizeService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.EventManager }]; } });
+
+class ClickOutsideDirective {
+    constructor(elementRef, document) {
+        this.elementRef = elementRef;
+        this.document = document;
+        /**
+         * Toggler for checking ouside click event
+         */
+        this.listening = false;
+        /**
+         * Emitter for click event
+         */
+        this.action = new EventEmitter();
+    }
+    ngAfterViewInit() {
+        this._clickSubscription = fromEvent(this.document, 'click')
+            .subscribe(event => this.onClick(event));
+    }
+    ngOnDestroy() {
+        this._clickSubscription?.unsubscribe();
+    }
+    onClick(event) {
+        if (event instanceof MouseEvent && this.listening) {
+            const clickOutsideEvent = {
+                target: event.target,
+                value: !this.isDescendant(this.elementRef.nativeElement, event.target)
+            };
+            this.action.emit(clickOutsideEvent);
+        }
+    }
+    isDescendant(parent, child) {
+        let node = child;
+        while (node !== null) {
+            if (node === parent) {
+                return true;
+            }
+            else {
+                node = node.parentNode;
+            }
+        }
+        return false;
+    }
+}
+ClickOutsideDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ClickOutsideDirective, deps: [{ token: i0.ElementRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive });
+ClickOutsideDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: ClickOutsideDirective, selector: "[sfcClickOutside]", inputs: { listening: ["sfcClickOutside", "listening"] }, outputs: { action: "action" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ClickOutsideDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[sfcClickOutside]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }]; }, propDecorators: { listening: [{
+                type: Input,
+                args: ['sfcClickOutside']
+            }], action: [{
+                type: Output
+            }] } });
+
+class CommonConstants {
+}
+CommonConstants.NOT_FOUND_INDEX = -1;
+CommonConstants.EMPTY_STRING = '';
+CommonConstants.MOUSE_BUTTON_LEFT = 0;
+CommonConstants.FULL_PERCENTAGE = 100;
+CommonConstants.COMMON_TEXT_DELIMETER = '/';
+CommonConstants.PERCENTAGE_SYMBOL = '%';
+
+class DateTimeConstants {
+}
+DateTimeConstants.DAYS_IN_WEEK = 7;
+DateTimeConstants.HOURS_IN_SHORT_TIME = 12;
+DateTimeConstants.HOURS_IN_TIME = 24;
+DateTimeConstants.MIDNIGHT_HOUR = 0;
+DateTimeConstants.MINUTES_IN_HOUR = 60;
+DateTimeConstants.DAYS_OF_WEEK = ["S", "M", "T", "W", "T", "F", "S"];
+DateTimeConstants.DAYS_OF_WEEK_3 = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"];
+
+class UIConstants {
+}
+UIConstants.CSS_PIXELS = 'px';
+UIConstants.CSS_PERCENTAGE = '%';
+UIConstants.CSS_DEGREES = 'deg';
+UIConstants.CSS_EM = 'em';
+UIConstants.CSS_CH = 'ch';
+UIConstants.CSS_INITIAL = 'initial';
+UIConstants.CSS_INHERIT = 'inherit';
+UIConstants.CSS_NONE = 'none';
+UIConstants.CSS_VISIBILITY_VISIBLE = 'visible';
+UIConstants.CSS_VISIBILITY_HIDDEN = 'hidden';
+UIConstants.CSS_WIDTH = 'width';
+UIConstants.CSS_LEFT = 'left';
+UIConstants.CSS_RIGHT = 'right';
+UIConstants.CSS_START = 'start';
+UIConstants.CSS_END = 'end';
+UIConstants.CSS_CENTER = 'center';
+UIConstants.CSS_CLASS_FIXED = 'fixed';
+UIConstants.CSS_CLASS_BACKGROUND = 'background';
+UIConstants.CSS_CLASS_TOP = 'top';
+UIConstants.RGB_OPACITY_PLACEHOLDER = '{opacity}';
+
+class ShowHideElementDirective {
+    constructor(el) {
+        this.el = el;
+        this.SHOW_HIDE_TRANSITION_DELAY_DEFAULT = 0.5;
+        this.style.transition = this.getTransitionValue();
+    }
+    set showHideElement(show) {
+        this.style.visibility = show
+            ? UIConstants.CSS_VISIBILITY_VISIBLE
+            : UIConstants.CSS_VISIBILITY_HIDDEN;
+        this.style.opacity = show ? 1 : 0;
+    }
+    set delay(value) {
+        this.style.transition = this.getTransitionValue(value);
+    }
+    ;
+    get style() {
+        return this.el.nativeElement.style;
+    }
+    getTransitionValue(delay = this.SHOW_HIDE_TRANSITION_DELAY_DEFAULT) {
+        return `visibility ${delay}s, 
+            opacity ${delay}s 
+            linear`;
+    }
+}
+ShowHideElementDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ShowHideElementDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+ShowHideElementDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: ShowHideElementDirective, selector: "[sfcShowHideElement]", inputs: { showHideElement: ["sfcShowHideElement", "showHideElement"], delay: "delay" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ShowHideElementDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[sfcShowHideElement]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { showHideElement: [{
+                type: Input,
+                args: ['sfcShowHideElement']
+            }], delay: [{
+                type: Input
+            }] } });
+
+class IfDirective {
+    constructor(el) {
+        this.el = el;
+        this.display = this.style.display;
+    }
+    set sfcIf(show) {
+        this.style.display = show
+            ? this.display || UIConstants.CSS_INITIAL
+            : UIConstants.CSS_NONE;
+    }
+    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 });
+IfDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: IfDirective, selector: "[sfcIf]", inputs: { sfcIf: "sfcIf" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: IfDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[sfcIf]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { sfcIf: [{
+                type: Input
+            }] } });
+
+/**
+ * Set minutes for date
+ * @param date Date value
+ * @param minute Minute value
+ * @returns Date with minute value
+ */
+function setMinutes(date, minute) {
+    const result = new Date(date);
+    result.setMinutes(minute);
+    return result;
+}
+/**
+ * Set hours for date
+ * @param date Date value
+ * @param hour Hour value
+ * @returns Date with hour value
+ */
+function setHours(date, hour) {
+    const result = new Date(date);
+    result.setHours(hour);
+    return result;
+}
+/**
+ * Set day for date value
+ * @param date Date value
+ * @param dayNumber Day number
+ * @returns Date with day number
+ */
+function setDay(date, dayNumber) {
+    const nextDate = new Date(date);
+    nextDate.setDate(dayNumber);
+    return nextDate;
+}
+/**
+ * Set year for date
+ * @param date Date value
+ * @param year Year value
+ * @returns Date with year value
+ */
+function setYear(date, year) {
+    const result = new Date(date);
+    result.setFullYear(year);
+    return result;
+}
+/**
+ * Set seconds for date
+ * @param date Date value
+ * @param value Seconds value
+ * @returns Date with minute value
+ */
+function setSeconds(date, value) {
+    const result = new Date(date);
+    result.setSeconds(value);
+    return result;
+}
+/**
+ * Set milliseconds for date
+ * @param date Date value
+ * @param value Milliseconds value
+ * @returns Date with minute value
+ */
+function setMilliseconds(date, value) {
+    const result = new Date(date);
+    result.setMilliseconds(value);
+    return result;
+}
+/**
+ * Set 0 for seconds and milliseconds of date
+ * @param date Date value
+ * @returns Date with minute value
+ */
+function setDefaultSecondsAndMiliseconds(date) {
+    const result = new Date(date);
+    result.setSeconds(0);
+    result.setMilliseconds(0);
+    return result;
+}
+/**
+ * Get next date
+ * @param date Date value
+ * @returns Next date
+ */
+function getNextDate(date) {
+    const nextDate = new Date(date);
+    nextDate.setDate(date.getDate() + 1);
+    return nextDate;
+}
+/**
+ * Get next month as date
+ * @param date Date value
+ * @returns Next month as date
+ */
+function getNextMonth(date) {
+    const nextMonth = new Date(date);
+    nextMonth.setMonth(date.getMonth() + 1);
+    return nextMonth;
+}
+/**
+ * Get previous month as date
+ * @param date Date value
+ * @returns Previous month as date
+ */
+function getPreviousMonth(date) {
+    const prevMonth = new Date(date);
+    prevMonth.setMonth(date.getMonth() - 1);
+    return prevMonth;
+}
+/**
+ * Get next year as date
+ * @param date Date value
+ * @returns Next year as date
+ */
+function getNextYear(date) {
+    const nextYear = new Date(date);
+    nextYear.setFullYear(date.getFullYear() + 1);
+    return nextYear;
+}
+/**
+ * Get previous year as date
+ * @param date Date value
+ * @returns Previous year as date
+ */
+function getPreviousYear(date) {
+    const prevYear = new Date(date);
+    prevYear.setFullYear(date.getFullYear() - 1);
+    return prevYear;
+}
+/**
+ * Return first day of month as date from date value
+ * @param date Date value
+ * @returns First day of month as date
+ */
+function getFirstDayOfMonth(date) {
+    if (isDefined(date) && date instanceof Date) {
+        const year = date.getFullYear(), month = date.getMonth();
+        return new Date(year, month, 1);
+    }
+    return date;
+}
+/**
+ * Return last day of month as date from date value
+ * @param date Date value
+ * @returns Last day of month as date
+ */
+function getLastDayOfMonth(date) {
+    if (isDefined(date) && date instanceof Date) {
+        const year = date.getFullYear(), month = date.getMonth();
+        return new Date(year, month + 1, 0);
+    }
+    return date;
+}
+/**
+ * Return first day of year as date from date value
+ * @param date Date value
+ * @returns First day of year as date
+ */
+function getFirstDayOfYear(date) {
+    if (isDefined(date) && date instanceof Date) {
+        return new Date(date.getFullYear(), 0, 1);
+    }
+    return date;
+}
+/**
+ * Return last day of year as date from date value
+ * @param date Date value
+ * @returns Last day of year as date
+ */
+function getLastDayOfYear(date) {
+    if (isDefined(date) && date instanceof Date) {
+        return new Date(date.getFullYear(), 12, 0);
+    }
+    return date;
+}
+/**
+ * Return first day of month as date
+ * @param year Year value
+ * @param month Month value
+ * @returns First day of month
+ */
+function getFirstDayOfMonthByYearAndMonth(year, month) {
+    return new Date(year, month, 1);
+}
+/**
+ * Return last day of month as date
+ * @param year Year value
+ * @param month Month value
+ * @returns Last day of month
+ */
+function getLastDayOfMonthByYearAndMonth(year, month) {
+    return new Date(year, month + 1, 0);
+}
+/**
+ * Return week number in month from date value
+ * @param date Date value
+ * @returns Week number
+ */
+function getWeeksNumberInMonth(date) {
+    const firstOfMonth = getFirstDayOfMonth(date), lastOfMonth = getLastDayOfMonth(date), used = firstOfMonth.getDay() + lastOfMonth.getDate();
+    return Math.ceil(used / DateTimeConstants.DAYS_IN_WEEK);
+}
+/**
+ * Return true if first and second date are equal
+ * @param date1 First date value
+ * @param date2 Second date value
+ * @returns True if first and second date are equal
+ */
+function isEqualDates(date1, date2) {
+    const date1Value = new Date(date1), date2Value = new Date(date2);
+    date1Value.setHours(0, 0, 0, 0);
+    date2Value.setHours(0, 0, 0, 0);
+    return date1Value.getTime() === date2Value.getTime();
+}
+/**
+ * Return true if first and second datetime are equal
+ * @param date1 First datetime value
+ * @param date2 Second datetime value
+ * @returns True if first and second datetime are equal
+ */
+function isEqualDateTimes(date1, date2) {
+    const date1Value = new Date(date1), date2Value = new Date(date2);
+    return date1Value.getTime() === date2Value.getTime();
+}
+/**
+ * Return true if first date greater than second date
+ * @param date1 First date value
+ * @param date2 Second date value
+ * @returns True if first date greater than second date
+ */
+function isDateGreat(date1, date2) {
+    return new Date(date1.getFullYear(), date1.getMonth(), date1.getDate())
+        > new Date(date2.getFullYear(), date2.getMonth(), date2.getDate());
+}
+/**
+ * Return true if first date greater or equal to second date
+ * @param date1 First date value
+ * @param date2 Second date value
+ * @returns True if first date greater or equal to second date
+ */
+function isDateGreatOrEqual(date1, date2) {
+    return new Date(date1.getFullYear(), date1.getMonth(), date1.getDate())
+        >= new Date(date2.getFullYear(), date2.getMonth(), date2.getDate());
+}
+/**
+ * Return true if first date time greater than second date time
+ * @param date1 First date time value
+ * @param date2 Second date time value
+ * @returns True if first date time greater than second date time
+ */
+function isDateTimeGreat(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 date time greater or equal to second date time
+ * @param date1 First date time value
+ * @param date2 Second date time value
+ * @returns True if first date time greater or equal to second date time
+ */
+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 value defined
+ * @param value Value to check
+ * @returns True if value is not null and defined
+ */
+function isDefined(value) {
+    return value !== undefined && value !== null;
+}
+/**
+ * Return true if value is object
+ * @param value Value to check
+ * @returns True if value is object
+ */
+function isObject(value) {
+    return (isDefined(value) && typeof value === 'object'
+        && !Array.isArray(value)
+        && !(value instanceof Date || value instanceof File));
+}
+/**
+ * Return true if data is observable
+ * @param data Object to check
+ * @returns True if data is observable
+ */
+function isAsyncData(data) {
+    return data instanceof Observable;
+}
+/**
+ * Return extended object with new property
+ * @param obj Object to extend by property
+ * @param property New property name
+ * @param value Value for new property
+ * @returns Extended object with new property
+ */
+function addPropertyToObject(obj, property, value = null) {
+    if (isDefined(property) && !obj.hasOwnProperty(property)) {
+        let newObj = {};
+        newObj[property] = value;
+        obj = { ...obj, ...newObj };
+    }
+    return obj;
+}
+/**
+ * Remove property from object
+ * @param obj Object for removing property
+ * @param property Property name to remove
+ */
+function removePropertyFromObject(obj, property) {
+    if (obj.hasOwnProperty(property)) {
+        delete obj[property];
+    }
+}
+/**
+  * Deep merge object with others
+  * @param target Object to merge
+  * @param sources
+  */
+/**
+ * Deep merge object with others
+ * @param target  Object to merge
+ * @param sources Objects to be merged with target
+ * @returns Merged object
+ */
+function mergeDeep(target, ...sources) {
+    if (!sources.length)
+        return target;
+    const source = sources.shift();
+    if (isObject(target) && isObject(source)) {
+        for (const key in source) {
+            if (isObject(source[key])) {
+                if (!target[key])
+                    Object.assign(target, { [key]: {} });
+                mergeDeep(target[key], source[key]);
+            }
+            else {
+                Object.assign(target, { [key]: source[key] });
+            }
+        }
+    }
+    return mergeDeep(target, ...sources);
+}
+/**
+ * Get type's property name safety
+ * @param name KeyOf property
+ * @returns Type's property name
+ */
+const nameof = (name) => name;
+/**
+   * Determines if the input is a Number or something that can be coerced to a Number
+   * @param - The input to be tested
+   * @returns - An indication if the input is a Number or can be coerced to a Number
+   */
+function isNumeric(number) {
+    return !isNaN(parseFloat(number));
+}
+/**
+ * Return true if current browser is Chrome
+ * @returns If current browser is Chrome
+ */
+function isChromeBrowser() {
+    return /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
+}
+/**
+ * Return true if value is valid email address
+ * @returns True if it's valid email address
+ */
+function isEmail(value) {
+    return isDefined(value.match(/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/));
+}
+/**
+ * Return true if string is "true"
+ * @returns parsed string as boolean
+ */
+function parseBoolean(value) {
+    return /^true$/i.test(value);
+}
+/**
+ * Return true if values equal
+ * @param obj1 First value to compare
+ * @param obj2 Second value to compare
+ * @returns True if equal
+ */
+function isEqual(obj1, obj2) {
+    /**
+     * More accurately check the type of a JavaScript object
+     * @param  {Object} obj The object
+     * @return {String}     The object type
+     */
+    function getType(obj) {
+        return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();
+    }
+    function areArraysEqual() {
+        // Check length
+        if (obj1.length !== obj2.length)
+            return false;
+        // Check each item in the array
+        for (let i = 0; i < obj1.length; i++) {
+            if (!isEqual(obj1[i], obj2[i]))
+                return false;
+        }
+        // If no errors, return true
+        return true;
+    }
+    function areObjectsEqual() {
+        if (Object.keys(obj1).length !== Object.keys(obj2).length)
+            return false;
+        // Check each item in the object
+        for (let key in obj1) {
+            if (Object.prototype.hasOwnProperty.call(obj1, key)) {
+                if (!isEqual(obj1[key], obj2[key])) {
+                    return false;
+                }
+            }
+        }
+        // If no errors, return true
+        return true;
+    }
+    function areFunctionsEqual() {
+        return obj1.toString() === obj2.toString();
+    }
+    function arePrimativesEqual() {
+        return obj1 === obj2;
+    }
+    function areDatesEqual() {
+        return isEqualDateTimes(obj1, obj2);
+    }
+    // Get the object type
+    let type = getType(obj1);
+    // If the two items are not the same type, return false
+    if (type !== getType(obj2))
+        return false;
+    // Compare based on type
+    if (type === 'array')
+        return areArraysEqual();
+    if (type === 'date')
+        return areDatesEqual();
+    if (type === 'object')
+        return areObjectsEqual();
+    if (type === 'function')
+        return areFunctionsEqual();
+    return arePrimativesEqual();
+}
+
+/**
+ * Return true if string has value(not empty string)
+ * @param value String value to check
+ * @returns True if string is not null and defined(not empty string)
+ */
+function isNullOrEmptyString(value) {
+    return !isDefined(value) || value === CommonConstants.EMPTY_STRING;
+}
+/**
+ * Return true if value contains includeValue
+ * @param value String value to check
+ * @param includeValue Value to check if it include
+ * @returns True if value contains includeValue
+ */
+function contains(value, includeValue) {
+    return !isNullOrEmptyString(value) && !isNullOrEmptyString(includeValue)
+        ? value.toLowerCase()
+            .includes(includeValue.toLowerCase())
+        : false;
+}
+/**
+ * Return trimed value
+ * @param value Value for trim modification
+ * @returns Trimed value
+ */
+function trim(value) {
+    return isNullOrEmptyString(value) ? value : value.replace(/\s/g, '');
+}
+
+/**
+ * Return parsed file size as string
+ * @param bytes Bytes count
+ * @param decimals Value after dot
+ * @returns Parsed file size
+ */
+function parseFileSize(bytes, decimals = 2) {
+    if (bytes === 0)
+        return '0';
+    const k = 1024;
+    const dm = decimals < 0 ? 0 : decimals;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+}
+/**
+ * Return file extension
+ * @param file File value
+ * @returns File extension
+ */
+function getFileExtension(file) {
+    if (!isDefined(file))
+        return CommonConstants.EMPTY_STRING;
+    if (file.name.indexOf('.') === CommonConstants.NOT_FOUND_INDEX) {
+        return CommonConstants.EMPTY_STRING;
+    }
+    return file.name.split('.').pop();
+}
+/**
+ * Read file as data URL
+ * @param file File value
+ * @param onLoad On load action
+ */
+function readAsDataURL(file, onLoad) {
+    if (isDefined(file)) {
+        const reader = new FileReader();
+        reader.onload = () => onLoad(reader.result);
+        reader.readAsDataURL(file);
+    }
+    else
+        throw new Error('File utils | Read as data URL function --> File is empty.');
+}
+/**
+ * Return true if file is image
+ * @param file File value
+ * @returns True if file is image
+ */
+function isImage(file) {
+    return isDefined(file) && (/\.(gif|jpe?g|jpg|tiff|png|webp|bmp)$/i).test(file.name);
+}
+
+/**
+ * Return CSS like value
+ * @param value Value as number
+ * @returns Value as '1px'
+ */
+function getCssLikeValue(value, type = UIConstants.CSS_PIXELS) {
+    return value + type;
+}
+/**
+ * Parse CSS like value to number
+ * @param value CSS like value
+ * @returns Number value
+ */
+function getValueFromCssLikeValue(value, type = UIConstants.CSS_PIXELS) {
+    return +value.replace(type, CommonConstants.EMPTY_STRING);
+}
+/**
+ * Return CCS like calc value
+ * @param value All value (100% by default)
+ * @param part Part value
+ * @returns Calc value
+ */
+function getCalcValue(part, value = 100) {
+    return `calc(${value}${UIConstants.CSS_PERCENTAGE} / ${part} )`;
+}
+/**
+ * Return CCS like rotate value
+ * @param value value as degrees
+ * @returns Rotate value
+ */
+function getRotateValue(value) {
+    return `rotate(${value}deg)`;
+}
+/**
+ * Add classes to HTML element
+ * @param element HTML element
+ * @param classNames Array of CSS classes
+ */
+function addClasses(element, ...classNames) {
+    if (isDefined(element)) {
+        classNames.forEach((className) => element.classList.add(className));
+    }
+}
+/**
+ * Remove classes to HTML element
+ * @param element HTML element
+ * @param classNames Array of CSS classes
+ */
+function removeClasses(element, ...classNames) {
+    if (isDefined(element)) {
+        classNames.forEach((className) => element.classList.remove(className));
+    }
+}
+/**
+ * Convert RGB color to HEX
+ * @param r Red
+ * @param g Green
+ * @param b Blue
+ * @returns HEX value
+ */
+function rgbToHex(r, g, b) {
+    return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
+}
+/**
+ * Convert HEX to RGB value
+ * @param hex HEX value
+ * @returns RGB value
+ */
+function hexToRgb(hex) {
+    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    if (result) {
+        var r = parseInt(result[1], 16);
+        var g = parseInt(result[2], 16);
+        var b = parseInt(result[3], 16);
+        return `rgb(${r}, ${g}, ${b})`;
+    }
+    return null;
+}
+/**
+ * Set opacity for RGB value
+ * @param rgb Rgb value with {opacity} placeholder
+ * @param opacity Opacity value
+ * @returns RGB value with relevant opacity
+ */
+function replaceRgbOpacity(rgb, opacity) {
+    return rgb.replace(UIConstants.RGB_OPACITY_PLACEHOLDER, opacity.toString());
+}
+
+/**
+ * Return true if collection not empty
+ * @param collection Array of items
+ * @returns True if collection not empty
+ */
+function any(collection) {
+    return isDefined(collection) && collection.length > 0;
+}
+/**
+ * Return true if collection has such value
+ * @param collection Array of items
+ * @param value Value to check
+ * @returns True if found value in collection
+ */
+function hasItem(collection, value) {
+    return any(collection)
+        && collection.findIndex(item => item === value) !== CommonConstants.NOT_FOUND_INDEX;
+}
+/**
+ * Return true if collection has such value by predicate function
+ * @param collection Array of items
+ * @param predicate Function to define check logic
+ * @returns True if found value in collection
+ */
+function hasItemBy(collection, predicate) {
+    return any(collection) && collection.findIndex(predicate) !== CommonConstants.NOT_FOUND_INDEX;
+}
+/**
+ * Return true if collection of objects has such value as object
+ * @param collection Array of objects
+ * @param property Property name
+ * @param value Value to check
+ * @returns True if found value in collection
+ */
+function hasObjectItem(collection, // TODO <-- Array<T>
+property, value) {
+    return any(collection)
+        && collection.findIndex(item => item.hasOwnProperty(property)
+            && item[property] === value) !== CommonConstants.NOT_FOUND_INDEX;
+}
+/**
+ * Return value from collection by predicate function
+ * @param collection Array of items
+ * @param predicate Function to define search logic
+ * @returns Value from collection
+ */
+function firstOrDefault(collection, predicate) {
+    return any(collection) ? collection?.find(predicate) : undefined;
+}
+/**
+ * Return first item from collection
+ * @param collection Array of items
+ * @returns First value from collection
+ */
+function firstItem(collection) {
+    return any(collection) ? collection[0] : null;
+}
+/**
+ * Return last item from collection
+ * @param collection Array of items
+ * @returns Last value from collection
+ */
+function lastItem(collection) {
+    return any(collection) ? collection[collection.length - 1] : null;
+}
+/**
+ * Return True if all values match predicate function
+ * @param collection Array of objects
+ * @param predicate Function to define check logic
+ * @returns True if all values match predicate
+ */
+function all(collection, predicate) {
+    return any(collection) ? collection.filter(predicate).length == collection.length : false;
+}
+/**
+ * Return count by predicate
+ * @param collection Array of objects
+ * @param predicate Function to define check logic
+ * @returns Items count
+ */
+function count(collection, predicate) {
+    return collection.filter(predicate).length;
+}
+/**
+ * Return items from collection by predicate function
+ * @param collection Array of items
+ * @param predicate Function to define search logic
+ * @returns Values from collection
+ */
+function where(collection, predicate) {
+    return any(collection) ? collection.filter(predicate) : null;
+}
+/**
+ * Return sliced collection by page number and page size
+ * @param collection Array of items
+ * @param page Page number
+ * @param size Page size
+ * @returns Sliced collection
+ */
+function skip(collection, page, size) {
+    if (any(collection)) {
+        let start = (page - 1) * size;
+        return collection.slice(start, start + size);
+    }
+    return collection;
+}
+function sort(collection, direction = SortingDirection.Ascending) {
+    if (any(collection)) {
+        return direction == SortingDirection.Ascending
+            ? collection.sort((a, b) => a - b)
+            : collection.sort((a, b) => b - a);
+    }
+    return collection;
+}
+/**
+ * Return sorted collection of objects by property
+ * @param collection Array of items
+ * @param property Property name
+ * @param direction Sorting direction
+ * @returns Sorted collection
+ */
+function sortBy(collection, property, direction) {
+    if (any(collection)) {
+        let _sortFunc = (a, b) => (t1, t2) => (a[property] > b[property] ? t1 : t2);
+        return direction == SortingDirection.Ascending
+            ? collection.sort((a, b) => _sortFunc(a, b)(1, -1))
+            : collection.sort((a, b) => _sortFunc(a, b)(-1, 1));
+    }
+    return collection;
+}
+/**
+ * Return sorted collection of objects by path
+ * @param collection Array of items
+ * @param path Path to property
+ * @param direction Sorting direction
+ * @returns Sorted collection
+ */
+function sortByPath(collection, path, direction) {
+    if (any(collection)) {
+        if (isNullOrEmptyString(path))
+            throw new Error('Collection utils | Sort By Path function --> Path is empty.');
+        const pathParts = path.split('.');
+        if (!any(pathParts))
+            throw new Error('Collection utils | Sort By Path function --> Path is incorrect.');
+        const partsLength = pathParts.length;
+        collection.sort((a, b) => {
+            var i = 0;
+            while (i < partsLength) {
+                a = a[pathParts[i]];
+                b = b[pathParts[i]];
+                i++;
+            }
+            return direction == SortingDirection.Ascending
+                ? a >= b ? 1 : -1
+                : a > b ? -1 : 1;
+        });
+        return collection;
+    }
+    return collection;
+}
+/**
+ * Return collection without matches
+ * @param collection Array of items
+ * @returns Collection without matches
+ */
+function distinct(collection) {
+    return any(collection)
+        ? collection.filter((value, index, self) => self.indexOf(value) === index)
+        : collection;
+}
+/**
+ * Return sum value from collection items by map function
+ * @param collection Array of items
+ * @param select Map function
+ * @returns Sum value of colection items
+ */
+function sum(collection, select) {
+    return any(collection)
+        ? collection
+            .map(select)
+            .reduce((a, b) => { return a + b; }, 0)
+        : 0;
+}
+/**
+ * Return max value from collection items by map function
+ * @param collection Array of items
+ * @param select Map function
+ * @returns Max value of collection items
+ */
+function max(collection, select) {
+    if (any(collection))
+        return Math.max(...collection.map(select));
+    throw new Error('Collection utils | Max function --> Collection is empty.');
+}
+/**
+ * Delete items from collection by predicate
+ * @param collection Array of items
+ * @param predicate Function to define remove logic
+ */
+function remove(collection, predicate) {
+    var i = collection.length;
+    while (i--) {
+        if (predicate(collection[i])) {
+            collection.splice(i, 1);
+        }
+    }
+}
+/**
+ * Add item to collection
+ * @param collection Array of items
+ * @param item New item
+ * @param predicate Function to define if allowed to add new item
+ * @returns True if successfully added
+ */
+function addItem(collection, item, predicate) {
+    if (!isDefined(collection))
+        collection = new Array();
+    if (isDefined(predicate) && predicate(item))
+        return false;
+    collection.push(item);
+    return true;
+}
+/**
+ * Delete item from collection
+ * @param collection Array of items
+ * @param item Item to delete
+ * @returns True if successfully removed
+ */
+function removeItem(collection, item) {
+    if (isDefined(item) && hasItem(collection, item)) {
+        collection.splice(collection.indexOf(item), 1);
+        return true;
+    }
+    return false;
+}
+/**
+ * Delete item from collection by predicate
+ * @param collection Array of items
+ * @param predicate Function to define remove logic
+ * @returns True if successfully removed
+ */
+function removeItemBy(collection, predicate) {
+    const foundItem = firstOrDefault(collection, predicate);
+    if (isDefined(foundItem)) {
+        collection.splice(collection.indexOf(foundItem), 1);
+        return true;
+    }
+    return false;
+}
+/**
+ * Update item in collection by predicate
+ * @param collection Array of items
+ * @param predicate Function to define item for deleting
+ * @returns True if successfully removed
+ */
+function updateItemBy(collection, predicate, newItem) {
+    const itemIndex = collection.findIndex(predicate);
+    if (itemIndex !== CommonConstants.NOT_FOUND_INDEX) {
+        const result = collection.slice(0);
+        result[itemIndex] = {
+            ...collection[itemIndex],
+            ...newItem
+        };
+        return result;
+    }
+    return null;
+}
+/**
+ * Return collection or empty if collection is not defined
+ * @param collection Array of items
+ * @returns Collection or empty
+ */
+function getCollectionOrEmpty(collection) {
+    return isDefined(collection) ? collection : [];
+}
+
+class ThrowElementOnHoverDirective {
+    constructor(el) {
+        this.el = el;
+    }
+    onMouseEnter() {
+        this.throw(this.throwValue);
+    }
+    onMouseLeave() {
+        this.throw(null);
+    }
+    get style() {
+        return this.el.nativeElement.style;
+    }
+    throw(value) {
+        this.style.transform = value ? `translateY(${getCssLikeValue(value)})` : null;
+    }
+}
+ThrowElementOnHoverDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ThrowElementOnHoverDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+ThrowElementOnHoverDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: ThrowElementOnHoverDirective, selector: "[sfcThrowElementOnHover]", inputs: { throwValue: ["sfcThrowElementOnHover", "throwValue"] }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ThrowElementOnHoverDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[sfcThrowElementOnHover]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { throwValue: [{
+                type: Input,
+                args: ['sfcThrowElementOnHover']
+            }], onMouseEnter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }] } });
+
+class TemplateReferenceDirective {
+    constructor(template) {
+        this.template = template;
+        this.templateName = CommonConstants.EMPTY_STRING;
+    }
+}
+TemplateReferenceDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TemplateReferenceDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+TemplateReferenceDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: TemplateReferenceDirective, selector: "[sfcTemplateReference]", inputs: { templateName: ["sfcTemplateReference", "templateName"], data: "data" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TemplateReferenceDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[sfcTemplateReference]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; }, propDecorators: { templateName: [{
+                type: Input,
+                args: ['sfcTemplateReference']
+            }], data: [{
+                type: Input
+            }] } });
+
+class MouseDownDirective {
+    constructor() {
+        /**
+         * Allowed mouse button
+         */
+        this.button = CommonConstants.MOUSE_BUTTON_LEFT;
+        this.action = new EventEmitter();
+    }
+    onMouseDown($event) {
+        if ($event.button === this.button) {
+            this.action.emit($event);
+        }
+        else {
+            $event.preventDefault();
+        }
+    }
+}
+MouseDownDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MouseDownDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+MouseDownDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: MouseDownDirective, selector: "[sfcMouseDown]", inputs: { button: "button" }, outputs: { action: "sfcMouseDown" }, host: { listeners: { "mousedown": "onMouseDown($event)" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MouseDownDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[sfcMouseDown]'
+                }]
+        }], propDecorators: { button: [{
+                type: Input
+            }], action: [{
+                type: Output,
+                args: ['sfcMouseDown']
+            }], onMouseDown: [{
+                type: HostListener,
+                args: ['mousedown', ['$event']]
+            }] } });
+
+class ComponentSizeDirective {
+    constructor(el) {
+        this.el = el;
+        this._customSize = null;
+        this.style.fontSize = getCssLikeValue(this.getSizeProportion(), UIConstants.CSS_EM);
+    }
+    set size(value) {
+        this._size = value;
+        this.style.fontSize = getCssLikeValue(this.getSizeProportion(), UIConstants.CSS_EM);
+    }
+    get size() {
+        return this._size;
+    }
+    set customSize(value) {
+        this._customSize = value;
+        if (this._customSize)
+            this.style.fontSize = getCssLikeValue(this._customSize, UIConstants.CSS_EM);
+    }
+    get customSize() {
+        return this._customSize;
+    }
+    get proportion() {
+        return this.customSize || this.getSizeProportion();
+    }
+    get style() {
+        return this.el.nativeElement.style;
+    }
+    getSizeProportion() {
+        switch (this.size) {
+            case ComponentSize.Small:
+                return 0.5;
+            case ComponentSize.Medium:
+                return 1;
+            case ComponentSize.Large:
+                return 2;
+            default:
+                return 1;
+        }
+    }
+}
+ComponentSizeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ComponentSizeDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+ComponentSizeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: ComponentSizeDirective, selector: "[sfcComponentSize]", inputs: { size: ["sfcComponentSize", "size"], customSize: "customSize" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ComponentSizeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[sfcComponentSize]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { size: [{
+                type: Input,
+                args: ['sfcComponentSize']
+            }], customSize: [{
+                type: Input
+            }] } });
+
+class DestroyParentDirective {
+    constructor(el) {
+        this.el = el;
+        this.delay = 0;
+    }
+    set destroyParent(value) {
+        if (value) {
+            setTimeout(() => this.el.nativeElement.parentElement?.remove(), this.delay);
+        }
+    }
+}
+DestroyParentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DestroyParentDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+DestroyParentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: DestroyParentDirective, selector: "[sfcDestroyParent]", inputs: { destroyParent: ["sfcDestroyParent", "destroyParent"], delay: "delay" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DestroyParentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[sfcDestroyParent]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { destroyParent: [{
+                type: Input,
+                args: ['sfcDestroyParent']
+            }], delay: [{
+                type: Input
+            }] } });
+
+class DomChangesDirective {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        this.sfcDomChanges = new EventEmitter();
+        this.options = {
+            attributes: true,
+            childList: true,
+            characterData: true
+        };
+        const element = this.elementRef.nativeElement;
+        this.changes = new MutationObserver((mutations) => mutations.forEach((mutation) => this.sfcDomChanges.emit(mutation)));
+        this.changes.observe(element, this.options);
+    }
+    ngOnDestroy() {
+        this.changes.disconnect();
+    }
+}
+DomChangesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DomChangesDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+DomChangesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: DomChangesDirective, selector: "[sfcDomChanges]", inputs: { options: "options" }, outputs: { sfcDomChanges: "sfcDomChanges" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DomChangesDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[sfcDomChanges]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { sfcDomChanges: [{
+                type: Output
+            }], options: [{
+                type: Input
+            }] } });
+
+class ScrollTrackerDirective {
+    constructor() {
+        this.positions = [];
+        this.sfcScrollTracker = new EventEmitter();
+    }
+    onScroll(event) {
+        const position = this.getPosition(event);
+        if (position && hasItem(this.positions, position))
+            this.sfcScrollTracker.emit(position);
+    }
+    getPosition(event) {
+        const tracker = event.target, limit = tracker.scrollHeight - tracker.clientHeight, scrollTopFixed = tracker.scrollTop.toFixed();
+        if (scrollTopFixed >= limit)
+            return Position.Bottom;
+        else if (scrollTopFixed <= 0)
+            return Position.Top;
+        return null;
+    }
+}
+ScrollTrackerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ScrollTrackerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+ScrollTrackerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: ScrollTrackerDirective, selector: "[sfcScrollTracker]", inputs: { positions: "positions" }, outputs: { sfcScrollTracker: "sfcScrollTracker" }, host: { listeners: { "scroll": "onScroll($event)" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ScrollTrackerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[sfcScrollTracker]'
+                }]
+        }], propDecorators: { positions: [{
+                type: Input
+            }], sfcScrollTracker: [{
+                type: Output
+            }], onScroll: [{
+                type: HostListener,
+                args: ['scroll', ['$event']]
+            }] } });
+
+class ScrollIntoViewDirective {
+    constructor() {
+        /**
+         * Scroll into middle of local container(not whole page)
+         */
+        this.local = false;
+        this.options = { behavior: 'smooth', block: 'center', inline: 'start' };
+    }
+    set sfcScrollIntoView(target) {
+        if (!isDefined(target))
+            return;
+        if (this.local)
+            target.scrollTop = target.offsetHeight / 2;
+        else {
+            if (isChromeBrowser())
+                target.scrollIntoViewIfNeeded();
+            else
+                target.scrollIntoView(this.options);
+        }
+    }
+}
+ScrollIntoViewDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ScrollIntoViewDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+ScrollIntoViewDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: ScrollIntoViewDirective, selector: "[sfcScrollIntoView]", inputs: { sfcScrollIntoView: "sfcScrollIntoView", local: "local", options: "options" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ScrollIntoViewDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[sfcScrollIntoView]'
+                }]
+        }], propDecorators: { sfcScrollIntoView: [{
+                type: Input
+            }], local: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }] } });
+
+class ImageLoadService {
+    constructor() {
+        this.loadSubject = new Subject();
+        this.load$ = this.loadSubject.asObservable()
+            .pipe(distinctUntilChanged());
+    }
+    load(value) {
+        this.loadSubject.next(value);
+    }
+}
+ImageLoadService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImageLoadService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ImageLoadService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImageLoadService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImageLoadService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class ImageLoadDirective {
+    constructor(el, loadService) {
+        this.el = el;
+        this.loadService = loadService;
+        this.action = new EventEmitter();
+    }
+    onLoad(event) {
+        const loadEvent = {
+            natural: {
+                height: this.el.nativeElement.naturalHeight,
+                width: this.el.nativeElement.naturalWidth
+            },
+            offset: {
+                height: this.el.nativeElement.offsetHeight,
+                width: this.el.nativeElement.offsetWidth
+            }
+        };
+        this.loadService.load(loadEvent);
+        if (isDefined(this.action))
+            this.action.emit(event);
+    }
+}
+ImageLoadDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImageLoadDirective, deps: [{ token: i0.ElementRef }, { token: ImageLoadService }], target: i0.ɵɵFactoryTarget.Directive });
+ImageLoadDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: ImageLoadDirective, selector: "[sfcImageLoad]", outputs: { action: "sfcImageLoad" }, host: { listeners: { "load": "onLoad($event)" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImageLoadDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[sfcImageLoad]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: ImageLoadService }]; }, propDecorators: { action: [{
+                type: Output,
+                args: ['sfcImageLoad']
+            }], onLoad: [{
+                type: HostListener,
+                args: ['load', ['$event']]
+            }] } });
+
+class SwitchMultiCasePipe {
+    transform(cases, switchOption) {
+        return cases.includes(switchOption) ? switchOption : !switchOption;
+    }
+}
+SwitchMultiCasePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SwitchMultiCasePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+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'
+                }]
+        }] });
+
+var ButtonType;
+(function (ButtonType) {
+    ButtonType["Bordered"] = "bordered";
+    ButtonType["Filled"] = "filled";
+    ButtonType["Rounded"] = "rounded";
+    ButtonType["Circled"] = "circled";
+    ButtonType["Texted"] = "texted";
+})(ButtonType || (ButtonType = {}));
+
+class ButtonComponent {
+    constructor() {
+        this.BUTTON_DEFAULT_TEXT = 'Button';
+        this.disabled = false;
+        this.types = [ButtonType.Bordered];
+    }
+    get label() {
+        return isNullOrEmptyString(this.text) && !isDefined(this.iconBefore) && !isDefined(this.iconAfter)
+            ? this.BUTTON_DEFAULT_TEXT
+            : this.text;
+    }
+    get classes() {
+        const classes = {};
+        distinct(this.types).forEach(type => classes[type] = true);
+        return classes;
+    }
+}
+ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ButtonComponent, selector: "sfc-button", inputs: { text: "text", iconBefore: "iconBefore", iconAfter: "iconAfter", disabled: "disabled", types: "types" }, host: { properties: { "class.disabled": "this.disabled" } }, ngImport: i0, template: "<a class=\"button\" [ngClass]=\"classes\">\r\n    <fa-icon *ngIf=\"iconBefore\" class=\"icon before\" [icon]=\"iconBefore\"></fa-icon>\r\n    <span class=\"text\">{{label}}</span>\r\n    <fa-icon *ngIf=\"iconAfter\" class=\"icon after\" [icon]=\"iconAfter\"></fa-icon>\r\n</a>", styles: [":host .button.bordered{border:solid 2px}:host .button.bordered,:host-context(.sfc-default-theme) :host .button.bordered{color:#545e61}:host-context(.sfc-dark-theme) :host .button.bordered{color:#fff}:host .button.bordered,:host-context(.sfc-default-theme) :host .button.bordered{border-color:#545e61}:host-context(.sfc-dark-theme) :host .button.bordered{border-color:#fff}:host .button.filled{color:#fff!important}:host .button.filled,:host-context(.sfc-default-theme) :host .button.filled{border-color:#545e61}:host-context(.sfc-dark-theme) :host .button.filled{border-color:#545e61}:host .button.filled,:host-context(.sfc-default-theme) :host .button.filled{background:#545e61}:host-context(.sfc-dark-theme) :host .button.filled{background:#545e61}:host.disabled .button.filled{color:#fff!important}:host.disabled .button.filled,:host-context(.sfc-default-theme) :host.disabled .button.filled{border-color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .button.filled{border-color:#bdbdbd}:host.disabled .button.filled,:host-context(.sfc-default-theme) :host.disabled .button.filled{background:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .button.filled{background:#bdbdbd}:host:hover .button.filled{color:#fff!important}:host:hover .button.filled,:host-context(.sfc-default-theme) :host:hover .button.filled{border-color:#ffce54}:host-context(.sfc-dark-theme) :host:hover .button.filled{border-color:#ffce54}:host:hover .button.filled,:host-context(.sfc-default-theme) :host:hover .button.filled{background:#ffce54}:host-context(.sfc-dark-theme) :host:hover .button.filled{background:#ffce54}:host .button.rounded{border:solid 2px;border-radius:1.25em;padding:.4em 1.2em}:host .button.rounded,:host-context(.sfc-default-theme) :host .button.rounded{color:#545e61}:host-context(.sfc-dark-theme) :host .button.rounded{color:#fff}:host .button.rounded,:host-context(.sfc-default-theme) :host .button.rounded{border-color:#545e61}:host-context(.sfc-dark-theme) :host .button.rounded{border-color:#fff}:host .button.rounded.filled,:host-context(.sfc-default-theme) :host .button.rounded.filled{border-color:#545e61}:host-context(.sfc-dark-theme) :host .button.rounded.filled{border-color:#545e61}:host.disabled .button.rounded.filled{border-color:#bdbdbd}:host:not(.disabled):hover .button.rounded.filled{border-color:#ffce54}:host .button.circled{border:solid 2px;width:5em;height:5em;border-radius:50%}:host .button.circled,:host-context(.sfc-default-theme) :host .button.circled{color:#545e61}:host-context(.sfc-dark-theme) :host .button.circled{color:#fff}:host .button.circled,:host-context(.sfc-default-theme) :host .button.circled{border-color:#545e61}:host-context(.sfc-dark-theme) :host .button.circled{border-color:#fff}:host .button.circled .text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host{display:inline-block;font-size:1em}:host .button{box-sizing:border-box;display:inline-flex;justify-content:center;flex-wrap:wrap;align-items:center;overflow:hidden;text-align:center;text-decoration:none;white-space:nowrap;font-size:.9em;cursor:pointer;-webkit-user-select:none;user-select:none;width:inherit;transition:color .5s ease,border-color .5s ease,background .5s ease}:host .button,:host-context(.sfc-default-theme) :host .button{color:#545e61}:host-context(.sfc-dark-theme) :host .button{color:#fff}:host .button .icon{padding:3px}:host .button .text{padding:3px;white-space:initial;text-overflow:ellipsis;overflow:hidden}:host .button .text:empty{display:none}:host.disabled{pointer-events:none}:host.disabled .button,:host-context(.sfc-default-theme) :host.disabled .button{color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .button{color:#656d78}:host.disabled .button,:host-context(.sfc-default-theme) :host.disabled .button{border-color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .button{border-color:#656d78}:host:not(.disabled):hover .button{color:#ffce54;border-color:#ffce54}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-button', template: "<a class=\"button\" [ngClass]=\"classes\">\r\n    <fa-icon *ngIf=\"iconBefore\" class=\"icon before\" [icon]=\"iconBefore\"></fa-icon>\r\n    <span class=\"text\">{{label}}</span>\r\n    <fa-icon *ngIf=\"iconAfter\" class=\"icon after\" [icon]=\"iconAfter\"></fa-icon>\r\n</a>", styles: [":host .button.bordered{border:solid 2px}:host .button.bordered,:host-context(.sfc-default-theme) :host .button.bordered{color:#545e61}:host-context(.sfc-dark-theme) :host .button.bordered{color:#fff}:host .button.bordered,:host-context(.sfc-default-theme) :host .button.bordered{border-color:#545e61}:host-context(.sfc-dark-theme) :host .button.bordered{border-color:#fff}:host .button.filled{color:#fff!important}:host .button.filled,:host-context(.sfc-default-theme) :host .button.filled{border-color:#545e61}:host-context(.sfc-dark-theme) :host .button.filled{border-color:#545e61}:host .button.filled,:host-context(.sfc-default-theme) :host .button.filled{background:#545e61}:host-context(.sfc-dark-theme) :host .button.filled{background:#545e61}:host.disabled .button.filled{color:#fff!important}:host.disabled .button.filled,:host-context(.sfc-default-theme) :host.disabled .button.filled{border-color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .button.filled{border-color:#bdbdbd}:host.disabled .button.filled,:host-context(.sfc-default-theme) :host.disabled .button.filled{background:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .button.filled{background:#bdbdbd}:host:hover .button.filled{color:#fff!important}:host:hover .button.filled,:host-context(.sfc-default-theme) :host:hover .button.filled{border-color:#ffce54}:host-context(.sfc-dark-theme) :host:hover .button.filled{border-color:#ffce54}:host:hover .button.filled,:host-context(.sfc-default-theme) :host:hover .button.filled{background:#ffce54}:host-context(.sfc-dark-theme) :host:hover .button.filled{background:#ffce54}:host .button.rounded{border:solid 2px;border-radius:1.25em;padding:.4em 1.2em}:host .button.rounded,:host-context(.sfc-default-theme) :host .button.rounded{color:#545e61}:host-context(.sfc-dark-theme) :host .button.rounded{color:#fff}:host .button.rounded,:host-context(.sfc-default-theme) :host .button.rounded{border-color:#545e61}:host-context(.sfc-dark-theme) :host .button.rounded{border-color:#fff}:host .button.rounded.filled,:host-context(.sfc-default-theme) :host .button.rounded.filled{border-color:#545e61}:host-context(.sfc-dark-theme) :host .button.rounded.filled{border-color:#545e61}:host.disabled .button.rounded.filled{border-color:#bdbdbd}:host:not(.disabled):hover .button.rounded.filled{border-color:#ffce54}:host .button.circled{border:solid 2px;width:5em;height:5em;border-radius:50%}:host .button.circled,:host-context(.sfc-default-theme) :host .button.circled{color:#545e61}:host-context(.sfc-dark-theme) :host .button.circled{color:#fff}:host .button.circled,:host-context(.sfc-default-theme) :host .button.circled{border-color:#545e61}:host-context(.sfc-dark-theme) :host .button.circled{border-color:#fff}:host .button.circled .text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host{display:inline-block;font-size:1em}:host .button{box-sizing:border-box;display:inline-flex;justify-content:center;flex-wrap:wrap;align-items:center;overflow:hidden;text-align:center;text-decoration:none;white-space:nowrap;font-size:.9em;cursor:pointer;-webkit-user-select:none;user-select:none;width:inherit;transition:color .5s ease,border-color .5s ease,background .5s ease}:host .button,:host-context(.sfc-default-theme) :host .button{color:#545e61}:host-context(.sfc-dark-theme) :host .button{color:#fff}:host .button .icon{padding:3px}:host .button .text{padding:3px;white-space:initial;text-overflow:ellipsis;overflow:hidden}:host .button .text:empty{display:none}:host.disabled{pointer-events:none}:host.disabled .button,:host-context(.sfc-default-theme) :host.disabled .button{color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .button{color:#656d78}:host.disabled .button,:host-context(.sfc-default-theme) :host.disabled .button{border-color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .button{border-color:#656d78}:host:not(.disabled):hover .button{color:#ffce54;border-color:#ffce54}\n"] }]
+        }], propDecorators: { text: [{
+                type: Input
+            }], iconBefore: [{
+                type: Input
+            }], iconAfter: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: [`class.${UIClass.Disabled}`]
+            }], types: [{
+                type: Input
+            }] } });
+
+var TooltipType;
+(function (TooltipType) {
+    TooltipType["Hover"] = "hover";
+    TooltipType["Click"] = "click";
+})(TooltipType || (TooltipType = {}));
+
+class TooltipComponent {
+    constructor(resizeService, window) {
+        this.resizeService = resizeService;
+        this.window = window;
+        this.tooltipType = TooltipType.Hover;
+        this.tooltipPosition = Position.Top;
+        this.tooltipShow = false;
+        // preserved position
+        this._position = Position.Top;
+    }
+    click() {
+        if (this.tooltipType == TooltipType.Click) {
+            this.tooltipShow = !this.tooltipShow;
+        }
+    }
+    ngOnInit() {
+        this._position = this.tooltipPosition;
+    }
+    ngAfterContentInit() {
+        this._resizeSubscription = this.resizeService.onResize$
+            .pipe(startWith(this.window))
+            .subscribe(window => this.tooltipPosition = window.innerWidth <= MediaLimits.Tablet
+            ? Position.Bottom : this._position);
+    }
+    ngOnDestroy() {
+        this._resizeSubscription?.unsubscribe();
+    }
+}
+TooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TooltipComponent, deps: [{ token: ResizeService }, { token: WINDOW }], target: i0.ɵɵFactoryTarget.Component });
+TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TooltipComponent, selector: "[sfc-tooltip]", inputs: { value: ["sfc-tooltip", "value"], tooltipType: "tooltipType", tooltipPosition: "tooltipPosition", tooltipShow: "tooltipShow" }, host: { listeners: { "click": "click()" }, properties: { "attr.value": "this.value", "attr.type": "this.tooltipType", "attr.position": "this.tooltipPosition", "class.show": "this.tooltipShow" } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":host{position:relative}:host:before,:host:after{position:absolute;left:50%;bottom:calc(100% + 5px);pointer-events:none;transition:.2s;will-change:transform}:host:hover:before,:host.show:before{content:attr(value);padding:.4em .7em;font-size:.8em;font-weight:initial;width:inherit;max-width:18.75em;border-radius:6px;background-color:#545e61;box-shadow:0 0 20.25em #aab2bd;color:#fff;text-align:center;white-space:pre-wrap;overflow:hidden;word-wrap:break-word;z-index:9999}:host:after{content:\"\";border-style:solid;transition-duration:0s;transform:translate(-50%) scaleY(0)}:host[type=hover]:before,:host[type=hover]:after,:host:not(.show):before,:host:not(.show):after{visibility:hidden;opacity:0}:host[type=hover]:hover:before,:host[type=hover]:hover:after,:host.show:before,:host.show:after{visibility:visible;opacity:1}:host[type=hover]:hover:before,:host.show:before{transition-delay:.1s}:host[type=hover]:hover:after,:host.show:after{transition-delay:.3s;transition-duration:.2s;transform:translate(-50%) scaleY(1)}:host[position=top]:before,:host[position=top]:after{left:50%;bottom:calc(100% + 5px)}:host[position=top]:before{transform:translate(-50%,-5px) scale(.5)}:host[position=top]:hover:before,:host[position=top].show:before{transform:translate(-50%,-.25em) scale(1)}:host[position=top]:after{border-width:.25em .25em 0;border-color:#545e61 transparent transparent transparent;transform-origin:top}:host[position=left]:before,:host[position=left]:after{left:auto;right:calc(100% + 5px);bottom:50%}:host[position=left]:before{transform:translate(-.25em,50%) scale(.5)}:host[position=left]:hover:before,:host[position=left].show:before{transform:translate(-.31em,50%) scale(1)}:host[position=left]:after{border-width:.25em 0 .25em .25em;border-color:transparent transparent transparent #545e61;transform-origin:left;transform:translateY(50%) scaleX(0)}:host[position=left]:hover:after,:host[position=left].show:after{transform:translateY(50%) scaleX(1)}:host[position=right]:before,:host[position=right]:after{left:calc(100% + 5px);bottom:50%}:host[position=right]:before{transform:translate(5px,50%) scale(.5)}:host[position=right]:hover:before,:host[position=right].show:before{transform:translate(.31em,50%) scale(1)}:host[position=right]:after{border-width:.25em .25em .25em 0;border-color:transparent #545e61 transparent transparent;transform-origin:right;transform:translateY(50%) scaleX(0)}:host[position=right]:hover:after,:host[position=right].show:after{transform:translateY(50%) scaleX(1)}:host[position=bottom]:before,:host[position=bottom]:after{top:calc(100% + 5px);bottom:auto}:host[position=bottom]:before{transform:translate(-50%,5px) scale(.5)}:host[position=bottom]:hover:before,:host[position=bottom].show:before{transform:translate(-50%,.31em) scale(1)}:host[position=bottom]:after{border-width:0 .25em .25em;border-color:transparent transparent #545e61 transparent;transform-origin:bottom}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TooltipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: '[sfc-tooltip]', template: `<ng-content></ng-content>`, styles: [":host{position:relative}:host:before,:host:after{position:absolute;left:50%;bottom:calc(100% + 5px);pointer-events:none;transition:.2s;will-change:transform}:host:hover:before,:host.show:before{content:attr(value);padding:.4em .7em;font-size:.8em;font-weight:initial;width:inherit;max-width:18.75em;border-radius:6px;background-color:#545e61;box-shadow:0 0 20.25em #aab2bd;color:#fff;text-align:center;white-space:pre-wrap;overflow:hidden;word-wrap:break-word;z-index:9999}:host:after{content:\"\";border-style:solid;transition-duration:0s;transform:translate(-50%) scaleY(0)}:host[type=hover]:before,:host[type=hover]:after,:host:not(.show):before,:host:not(.show):after{visibility:hidden;opacity:0}:host[type=hover]:hover:before,:host[type=hover]:hover:after,:host.show:before,:host.show:after{visibility:visible;opacity:1}:host[type=hover]:hover:before,:host.show:before{transition-delay:.1s}:host[type=hover]:hover:after,:host.show:after{transition-delay:.3s;transition-duration:.2s;transform:translate(-50%) scaleY(1)}:host[position=top]:before,:host[position=top]:after{left:50%;bottom:calc(100% + 5px)}:host[position=top]:before{transform:translate(-50%,-5px) scale(.5)}:host[position=top]:hover:before,:host[position=top].show:before{transform:translate(-50%,-.25em) scale(1)}:host[position=top]:after{border-width:.25em .25em 0;border-color:#545e61 transparent transparent transparent;transform-origin:top}:host[position=left]:before,:host[position=left]:after{left:auto;right:calc(100% + 5px);bottom:50%}:host[position=left]:before{transform:translate(-.25em,50%) scale(.5)}:host[position=left]:hover:before,:host[position=left].show:before{transform:translate(-.31em,50%) scale(1)}:host[position=left]:after{border-width:.25em 0 .25em .25em;border-color:transparent transparent transparent #545e61;transform-origin:left;transform:translateY(50%) scaleX(0)}:host[position=left]:hover:after,:host[position=left].show:after{transform:translateY(50%) scaleX(1)}:host[position=right]:before,:host[position=right]:after{left:calc(100% + 5px);bottom:50%}:host[position=right]:before{transform:translate(5px,50%) scale(.5)}:host[position=right]:hover:before,:host[position=right].show:before{transform:translate(.31em,50%) scale(1)}:host[position=right]:after{border-width:.25em .25em .25em 0;border-color:transparent #545e61 transparent transparent;transform-origin:right;transform:translateY(50%) scaleX(0)}:host[position=right]:hover:after,:host[position=right].show:after{transform:translateY(50%) scaleX(1)}:host[position=bottom]:before,:host[position=bottom]:after{top:calc(100% + 5px);bottom:auto}:host[position=bottom]:before{transform:translate(-50%,5px) scale(.5)}:host[position=bottom]:hover:before,:host[position=bottom].show:before{transform:translate(-50%,.31em) scale(1)}:host[position=bottom]:after{border-width:0 .25em .25em;border-color:transparent transparent #545e61 transparent;transform-origin:bottom}\n"] }]
+        }], ctorParameters: function () { return [{ type: ResizeService }, { type: Window, decorators: [{
+                    type: Inject,
+                    args: [WINDOW]
+                }] }]; }, propDecorators: { value: [{
+                type: Input,
+                args: ['sfc-tooltip']
+            }, {
+                type: HostBinding,
+                args: ['attr.value']
+            }], tooltipType: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['attr.type']
+            }], tooltipPosition: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['attr.position']
+            }], tooltipShow: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.show']
+            }], click: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+class DelimeterComponent {
+    constructor() {
+        this.direction = Direction.Horizontal;
+    }
+    get _empty() { return isNullOrEmptyString(this.label); }
+    ;
+}
+DelimeterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DelimeterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DelimeterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DelimeterComponent, selector: "sfc-delimeter", inputs: { label: "label", direction: "direction" }, host: { properties: { "class": "this.direction", "class.empty": "this._empty" } }, ngImport: i0, template: `<span>{{label}}</span>`, isInline: true, styles: [":host{padding:.3em 0}:host span{font-size:.8em}:host span,:host-context(.sfc-default-theme) :host span{color:#545e61}:host-context(.sfc-dark-theme) :host span{color:#fff}:host.vertical{display:inline-table;text-align:center;height:100%;min-height:4em;padding:0 .3em}:host.vertical span{position:relative;display:table-cell;vertical-align:middle}:host.vertical span:before,:host.vertical span:after{position:absolute;content:\"\";left:50%;border-left:1px solid;transition:border-image .5s ease}:host.vertical span:before{bottom:50%;top:0;margin-bottom:.8em}:host.vertical span:before,:host-context(.sfc-default-theme) :host.vertical span:before{border-image:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 1 100%}:host-context(.sfc-dark-theme) :host.vertical span:before{border-image:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,.4) 47%,rgba(255,255,255,.4) 53%,rgba(255,255,255,.4) 100%) 1 100%}:host.vertical span:after{top:50%;bottom:0;margin-top:.8em}:host.vertical span:after,:host-context(.sfc-default-theme) :host.vertical span:after{border-image:linear-gradient(to top,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 1 100%}:host-context(.sfc-dark-theme) :host.vertical span:after{border-image:linear-gradient(to top,rgba(255,255,255,0) 0%,rgba(255,255,255,.4) 47%,rgba(255,255,255,.4) 53%,rgba(255,255,255,.4) 100%) 1 100%}:host.vertical.empty{min-height:2em}:host.vertical.empty span:before{margin-bottom:0}:host.vertical.empty span:after{margin-top:0}:host.horizontal{display:flex;align-items:center;text-align:center;-webkit-user-select:none;user-select:none}:host.horizontal:before,:host-context(.sfc-default-theme) :host.horizontal:before{border-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host-context(.sfc-dark-theme) :host.horizontal:before{border-image:linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,.4) 47%,rgba(255,255,255,.4) 53%,rgba(255,255,255,.4) 100%) 100% 1}:host.horizontal:after,:host-context(.sfc-default-theme) :host.horizontal:after{border-image:linear-gradient(to left,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host-context(.sfc-dark-theme) :host.horizontal:after{border-image:linear-gradient(to left,rgba(255,255,255,0) 0%,rgba(255,255,255,.4) 47%,rgba(255,255,255,.4) 53%,rgba(255,255,255,.4) 100%) 100% 1}:host.horizontal:before,:host.horizontal:after{content:\"\";flex:1;border-bottom:1px solid}:host.horizontal.empty span{display:none}:host.horizontal:not(.empty):before{margin-right:.5em}:host.horizontal:not(.empty):after{margin-left:.5em}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DelimeterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-delimeter', template: `<span>{{label}}</span>`, styles: [":host{padding:.3em 0}:host span{font-size:.8em}:host span,:host-context(.sfc-default-theme) :host span{color:#545e61}:host-context(.sfc-dark-theme) :host span{color:#fff}:host.vertical{display:inline-table;text-align:center;height:100%;min-height:4em;padding:0 .3em}:host.vertical span{position:relative;display:table-cell;vertical-align:middle}:host.vertical span:before,:host.vertical span:after{position:absolute;content:\"\";left:50%;border-left:1px solid;transition:border-image .5s ease}:host.vertical span:before{bottom:50%;top:0;margin-bottom:.8em}:host.vertical span:before,:host-context(.sfc-default-theme) :host.vertical span:before{border-image:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 1 100%}:host-context(.sfc-dark-theme) :host.vertical span:before{border-image:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,.4) 47%,rgba(255,255,255,.4) 53%,rgba(255,255,255,.4) 100%) 1 100%}:host.vertical span:after{top:50%;bottom:0;margin-top:.8em}:host.vertical span:after,:host-context(.sfc-default-theme) :host.vertical span:after{border-image:linear-gradient(to top,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 1 100%}:host-context(.sfc-dark-theme) :host.vertical span:after{border-image:linear-gradient(to top,rgba(255,255,255,0) 0%,rgba(255,255,255,.4) 47%,rgba(255,255,255,.4) 53%,rgba(255,255,255,.4) 100%) 1 100%}:host.vertical.empty{min-height:2em}:host.vertical.empty span:before{margin-bottom:0}:host.vertical.empty span:after{margin-top:0}:host.horizontal{display:flex;align-items:center;text-align:center;-webkit-user-select:none;user-select:none}:host.horizontal:before,:host-context(.sfc-default-theme) :host.horizontal:before{border-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host-context(.sfc-dark-theme) :host.horizontal:before{border-image:linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,.4) 47%,rgba(255,255,255,.4) 53%,rgba(255,255,255,.4) 100%) 100% 1}:host.horizontal:after,:host-context(.sfc-default-theme) :host.horizontal:after{border-image:linear-gradient(to left,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host-context(.sfc-dark-theme) :host.horizontal:after{border-image:linear-gradient(to left,rgba(255,255,255,0) 0%,rgba(255,255,255,.4) 47%,rgba(255,255,255,.4) 53%,rgba(255,255,255,.4) 100%) 100% 1}:host.horizontal:before,:host.horizontal:after{content:\"\";flex:1;border-bottom:1px solid}:host.horizontal.empty span{display:none}:host.horizontal:not(.empty):before{margin-right:.5em}:host.horizontal:not(.empty):after{margin-left:.5em}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], direction: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class']
+            }], _empty: [{
+                type: HostBinding,
+                args: [`class.${UIClass.Empty}`]
+            }] } });
+
+class LoaderConstants {
+}
+LoaderConstants.GLOBAL_LOADER_ID = 'global';
+LoaderConstants.LOCAL_LOADER_ID = 'local';
+LoaderConstants.CSS_CLASS_BACKGROUND = 'background';
+
+class LoaderService {
+    constructor() {
+        this.loaderSubject = new BehaviorSubject([]);
+        this.loaders$ = this.loaderSubject
+            .asObservable()
+            .pipe(filter(loaders => any(loaders)), distinctUntilChanged());
+    }
+    /**
+     * Show loader by Id
+     * @param id Loader Id
+     * @param register If true register loader and show it
+     */
+    show(id = LoaderConstants.GLOBAL_LOADER_ID, register = false) {
+        return this.setLoaderStatus(id, true, register);
+    }
+    /**
+     * Hide loader
+     * @param id Loader Id
+     */
+    hide(id = LoaderConstants.GLOBAL_LOADER_ID) {
+        this.setLoaderStatus(id, false);
+    }
+    /**
+     * Register loader for next use
+     * @param event Loader event
+     * @returns Registred loade observable
+     */
+    register(event) {
+        const loaders = this.loaderSubject.getValue();
+        if (addItem(loaders, event, () => hasObjectItem(loaders, nameof('id'), event.id))) {
+            this.loaderSubject.next(loaders);
+        }
+        return this.selectLoaderById(event.id);
+    }
+    /**
+     * Remove loader
+     * @param id Loader Id
+     */
+    remove(id = LoaderConstants.GLOBAL_LOADER_ID) {
+        const loaders = this.loaderSubject.getValue();
+        if (removeItemBy(loaders, loader => loader.id == id)) {
+            this.loaderSubject.next(loaders);
+        }
+    }
+    selectLoaderById(id) {
+        return this.loaders$
+            .pipe(map(loaders => loaders.find(loader => loader.id == id)), distinctUntilChanged());
+    }
+    setLoaderStatus(id, status, register = false) {
+        const loaders = this.loaderSubject.getValue(), ILoaderEvent = { id, status }, loader = firstOrDefault(loaders, (loader) => loader.id == id);
+        if (isDefined(loader) && loader?.status == status)
+            return this.selectLoaderById(id);
+        const updatedLoaders = updateItemBy(loaders, (loader) => loader.id == id, ILoaderEvent);
+        if (isDefined(updatedLoaders)) {
+            this.loaderSubject.next(updatedLoaders);
+        }
+        if (register) {
+            return this.register(ILoaderEvent);
+        }
+        return null;
+    }
+}
+LoaderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LoaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+LoaderService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LoaderService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LoaderService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class LoaderBaseComponent {
+    constructor(loaderService) {
+        this.loaderService = loaderService;
+        this.UIClass = UIClass;
+        /**
+        * Loader identificator (global by default)
+        */
+        this.id = LoaderConstants.GLOBAL_LOADER_ID;
+        /**
+         * Is start on init (loader register with show = True)
+         */
+        this.start = false;
+        /**
+         * Loader when active(show) has background(low opacity)
+         */
+        this.background = true;
+        this.show$ = EMPTY;
+    }
+    ngOnInit() {
+        // register new loader
+        this.show$ = this.loaderService.register({ id: this.id, status: this.start })
+            .pipe(map((event) => this.id === event.id && event.status));
+    }
+    get preLoaderClasses() {
+        let classes = {};
+        if (this.id === LoaderConstants.GLOBAL_LOADER_ID)
+            classes[LoaderConstants.GLOBAL_LOADER_ID] = true;
+        else
+            classes[LoaderConstants.LOCAL_LOADER_ID] = true;
+        classes[LoaderConstants.CSS_CLASS_BACKGROUND] = this.background;
+        return classes;
+    }
+}
+LoaderBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LoaderBaseComponent, deps: [{ token: LoaderService }], target: i0.ɵɵFactoryTarget.Directive });
+LoaderBaseComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: LoaderBaseComponent, inputs: { id: "id", start: "start", background: "background" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LoaderBaseComponent, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: LoaderService }]; }, propDecorators: { id: [{
+                type: Input
+            }], start: [{
+                type: Input
+            }], background: [{
+                type: Input
+            }] } });
+
+class BounceLoaderComponent extends LoaderBaseComponent {
+}
+BounceLoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BounceLoaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+BounceLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: BounceLoaderComponent, selector: "sfc-bounce-loader", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"show$ | async\" class=\"preloader\" [ngClass]=\"preLoaderClasses\">\r\n    <div class=\"spinner\">\r\n        <div class=\"bounce\"></div>\r\n        <div class=\"bounce\"></div>\r\n        <div class=\"bounce\"></div>\r\n    </div>\r\n</div>", styles: [".preloader{position:relative;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center}.preloader.background{opacity:.7}.preloader.background,:host-context(.sfc-default-theme) .preloader.background{background-color:#fff}:host-context(.sfc-dark-theme) .preloader.background{background-color:#656d78}.preloader.global{z-index:9999;position:fixed}.preloader.local{z-index:9998;position:absolute}\n", ".spinner{text-align:center}.spinner .bounce{border-radius:100%;display:inline-block;animation:bounce-delay 1.4s infinite ease-in-out both;width:1em;height:1em}.spinner .bounce,:host-context(.sfc-default-theme) .spinner .bounce{background-color:#545e61}:host-context(.sfc-dark-theme) .spinner .bounce{background-color:#fff}.spinner .bounce:nth-child(1){animation-delay:-.32s}.spinner .bounce:nth-child(2){animation-delay:-.16s}@keyframes bounce-delay{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BounceLoaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-bounce-loader', template: "<div *ngIf=\"show$ | async\" class=\"preloader\" [ngClass]=\"preLoaderClasses\">\r\n    <div class=\"spinner\">\r\n        <div class=\"bounce\"></div>\r\n        <div class=\"bounce\"></div>\r\n        <div class=\"bounce\"></div>\r\n    </div>\r\n</div>", styles: [".preloader{position:relative;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center}.preloader.background{opacity:.7}.preloader.background,:host-context(.sfc-default-theme) .preloader.background{background-color:#fff}:host-context(.sfc-dark-theme) .preloader.background{background-color:#656d78}.preloader.global{z-index:9999;position:fixed}.preloader.local{z-index:9998;position:absolute}\n", ".spinner{text-align:center}.spinner .bounce{border-radius:100%;display:inline-block;animation:bounce-delay 1.4s infinite ease-in-out both;width:1em;height:1em}.spinner .bounce,:host-context(.sfc-default-theme) .spinner .bounce{background-color:#545e61}:host-context(.sfc-dark-theme) .spinner .bounce{background-color:#fff}.spinner .bounce:nth-child(1){animation-delay:-.32s}.spinner .bounce:nth-child(2){animation-delay:-.16s}@keyframes bounce-delay{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}\n"] }]
+        }] });
+
+var CircleLoaderType;
+(function (CircleLoaderType) {
+    CircleLoaderType["Default"] = "default";
+    CircleLoaderType["Fading"] = "fading";
+})(CircleLoaderType || (CircleLoaderType = {}));
+
+class CircleLoaderComponent extends LoaderBaseComponent {
+    constructor() {
+        super(...arguments);
+        this.type = CircleLoaderType.Default;
+    }
+}
+CircleLoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CircleLoaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+CircleLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: CircleLoaderComponent, selector: "sfc-circle-loader", inputs: { type: "type" }, usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"show$ | async\" class=\"preloader\" [ngClass]=\"preLoaderClasses\">\r\n    <div class=\"circles-container\" [ngClass]=\"type\">\r\n        <div class=\"circle1\"></div>\r\n        <div class=\"circle2\"></div>\r\n        <div class=\"circle3\"></div>\r\n        <div class=\"circle4\"></div>\r\n        <div class=\"circle5\"></div>\r\n        <div class=\"circle6\"></div>\r\n        <div class=\"circle7\"></div>\r\n        <div class=\"circle8\"></div>\r\n        <div class=\"circle9\"></div>\r\n        <div class=\"circle10\"></div>\r\n        <div class=\"circle11\"></div>\r\n        <div class=\"circle12\"></div>\r\n    </div>\r\n</div>", styles: [".preloader{position:relative;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center}.preloader.background{opacity:.7}.preloader.background,:host-context(.sfc-default-theme) .preloader.background{background-color:#fff}:host-context(.sfc-dark-theme) .preloader.background{background-color:#656d78}.preloader.global{z-index:9999;position:fixed}.preloader.local{z-index:9998;position:absolute}\n", ".circles-container{position:relative;width:2.5em;height:2.5em}.circles-container div{width:100%;height:100%;position:absolute;left:0;top:0}.circles-container div:before{content:\"\";display:block;margin:0 auto;width:15%;height:15%;border-radius:100%;animation:bounce-delay 1.2s infinite ease-in-out both}.circles-container div:before,:host-context(.sfc-default-theme) .circles-container div:before{background-color:#545e61}:host-context(.sfc-dark-theme) .circles-container div:before{background-color:#fff}.circles-container.fading div:before{animation-name:circle-fade-delay}.circles-container .circle2{transform:rotate(30deg)}.circles-container .circle2:before{animation-delay:-1.1s}.circles-container .circle3{transform:rotate(60deg)}.circles-container .circle3:before{animation-delay:-1s}.circles-container .circle4{transform:rotate(90deg)}.circles-container .circle4:before{animation-delay:-.9s}.circles-container .circle5{transform:rotate(120deg)}.circles-container .circle5:before{animation-delay:-.8s}.circles-container .circle6{transform:rotate(150deg)}.circles-container .circle6:before{animation-delay:-.7s}.circles-container .circle7{transform:rotate(180deg)}.circles-container .circle7:before{animation-delay:-.6s}.circles-container .circle8{transform:rotate(210deg)}.circles-container .circle8:before{animation-delay:-.5s}.circles-container .circle9{transform:rotate(240deg)}.circles-container .circle9:before{animation-delay:-.4s}.circles-container .circle10{transform:rotate(270deg)}.circles-container .circle10:before{animation-delay:-.3s}.circles-container .circle11{transform:rotate(300deg)}.circles-container .circle11:before{animation-delay:-.2s}.circles-container .circle12{transform:rotate(330deg)}.circles-container .circle12:before{animation-delay:-.1s}@keyframes bounce-delay{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}@keyframes circle-fade-delay{0%,39%,to{opacity:0}40%{opacity:1}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CircleLoaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-circle-loader', template: "<div *ngIf=\"show$ | async\" class=\"preloader\" [ngClass]=\"preLoaderClasses\">\r\n    <div class=\"circles-container\" [ngClass]=\"type\">\r\n        <div class=\"circle1\"></div>\r\n        <div class=\"circle2\"></div>\r\n        <div class=\"circle3\"></div>\r\n        <div class=\"circle4\"></div>\r\n        <div class=\"circle5\"></div>\r\n        <div class=\"circle6\"></div>\r\n        <div class=\"circle7\"></div>\r\n        <div class=\"circle8\"></div>\r\n        <div class=\"circle9\"></div>\r\n        <div class=\"circle10\"></div>\r\n        <div class=\"circle11\"></div>\r\n        <div class=\"circle12\"></div>\r\n    </div>\r\n</div>", styles: [".preloader{position:relative;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center}.preloader.background{opacity:.7}.preloader.background,:host-context(.sfc-default-theme) .preloader.background{background-color:#fff}:host-context(.sfc-dark-theme) .preloader.background{background-color:#656d78}.preloader.global{z-index:9999;position:fixed}.preloader.local{z-index:9998;position:absolute}\n", ".circles-container{position:relative;width:2.5em;height:2.5em}.circles-container div{width:100%;height:100%;position:absolute;left:0;top:0}.circles-container div:before{content:\"\";display:block;margin:0 auto;width:15%;height:15%;border-radius:100%;animation:bounce-delay 1.2s infinite ease-in-out both}.circles-container div:before,:host-context(.sfc-default-theme) .circles-container div:before{background-color:#545e61}:host-context(.sfc-dark-theme) .circles-container div:before{background-color:#fff}.circles-container.fading div:before{animation-name:circle-fade-delay}.circles-container .circle2{transform:rotate(30deg)}.circles-container .circle2:before{animation-delay:-1.1s}.circles-container .circle3{transform:rotate(60deg)}.circles-container .circle3:before{animation-delay:-1s}.circles-container .circle4{transform:rotate(90deg)}.circles-container .circle4:before{animation-delay:-.9s}.circles-container .circle5{transform:rotate(120deg)}.circles-container .circle5:before{animation-delay:-.8s}.circles-container .circle6{transform:rotate(150deg)}.circles-container .circle6:before{animation-delay:-.7s}.circles-container .circle7{transform:rotate(180deg)}.circles-container .circle7:before{animation-delay:-.6s}.circles-container .circle8{transform:rotate(210deg)}.circles-container .circle8:before{animation-delay:-.5s}.circles-container .circle9{transform:rotate(240deg)}.circles-container .circle9:before{animation-delay:-.4s}.circles-container .circle10{transform:rotate(270deg)}.circles-container .circle10:before{animation-delay:-.3s}.circles-container .circle11{transform:rotate(300deg)}.circles-container .circle11:before{animation-delay:-.2s}.circles-container .circle12{transform:rotate(330deg)}.circles-container .circle12:before{animation-delay:-.1s}@keyframes bounce-delay{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}@keyframes circle-fade-delay{0%,39%,to{opacity:0}40%{opacity:1}}\n"] }]
+        }], propDecorators: { type: [{
+                type: Input
+            }] } });
+
+var ModalTemplate;
+(function (ModalTemplate) {
+    ModalTemplate["Body"] = "body";
+    ModalTemplate["Header"] = "header";
+    ModalTemplate["Footer"] = "footer";
+})(ModalTemplate || (ModalTemplate = {}));
+
+class ModalService {
+    constructor() {
+        this.subject = new BehaviorSubject({ open: false });
+        this.modal$ = this.subject.asObservable();
+    }
+    get isOpen() {
+        return this.subject.value.open;
+    }
+    toggle() {
+        this.subject.next({ open: !this.isOpen });
+    }
+    close() {
+        this.subject.next({ open: false });
+    }
+    open(args) {
+        this.args = args;
+        this.subject.next({ open: true, args: args });
+    }
+}
+ModalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ModalService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ModalService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ModalService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class TemplateContentComponent {
+    get showDefault() {
+        return !isDefined(this.referenceContent)
+            && !isDefined(this.templateContent);
+    }
+    get templateContent() {
+        const templateRef = firstOrDefault(this.templatesContent?.toArray(), t => t.templateName == this.templateType);
+        return templateRef?.template || null;
+    }
+}
+TemplateContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TemplateContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TemplateContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TemplateContentComponent, selector: "sfc-template-content", inputs: { contextData: "contextData", referenceContent: "referenceContent", templateType: "templateType", templatesContent: "templatesContent", defaultContent: "defaultContent" }, ngImport: i0, template: "<ng-container *ngIf=\"referenceContent;else template\">\r\n    <ng-container *ngTemplateOutlet=\"referenceContent;context:{$implicit: contextData}\"></ng-container>\r\n</ng-container>\r\n\r\n<ng-template #template>\r\n    <ng-container *ngTemplateOutlet=\"templateContent;context:{$implicit: contextData}\">\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<ng-container *ngIf=\"defaultContent && showDefault\">\r\n    <ng-container *ngTemplateOutlet=\"defaultContent;context:{$implicit: contextData}\"></ng-container>\r\n</ng-container>", styles: [":host{display:contents}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TemplateContentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-template-content', template: "<ng-container *ngIf=\"referenceContent;else template\">\r\n    <ng-container *ngTemplateOutlet=\"referenceContent;context:{$implicit: contextData}\"></ng-container>\r\n</ng-container>\r\n\r\n<ng-template #template>\r\n    <ng-container *ngTemplateOutlet=\"templateContent;context:{$implicit: contextData}\">\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<ng-container *ngIf=\"defaultContent && showDefault\">\r\n    <ng-container *ngTemplateOutlet=\"defaultContent;context:{$implicit: contextData}\"></ng-container>\r\n</ng-container>", styles: [":host{display:contents}\n"] }]
+        }], propDecorators: { contextData: [{
+                type: Input
+            }], referenceContent: [{
+                type: Input
+            }], templateType: [{
+                type: Input
+            }], templatesContent: [{
+                type: Input
+            }], defaultContent: [{
+                type: Input
+            }] } });
+
+class CloseComponent {
+    constructor() {
+        this.faTimes = faTimes;
+    }
+}
+CloseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CloseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CloseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: CloseComponent, selector: "sfc-close", ngImport: i0, template: "<div class=\"container\">\r\n    <fa-icon [icon]=\"faTimes\"></fa-icon>\r\n</div>", styles: [":host{color:#545e61;cursor:pointer}:host:hover{color:#ffce54}\n"], dependencies: [{ kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CloseComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-close', template: "<div class=\"container\">\r\n    <fa-icon [icon]=\"faTimes\"></fa-icon>\r\n</div>", styles: [":host{color:#545e61;cursor:pointer}:host:hover{color:#ffce54}\n"] }]
+        }] });
+
+class DefaultModalHeaderComponent {
+    constructor(modalService) {
+        this.modalService = modalService;
+        this.DEFAULT_MODAL_HEADER_MODEL = {
+            icon: faWindowRestore,
+            showCloseIcon: true,
+            text: 'Modal'
+        };
+    }
+    get icon() {
+        return this.model?.icon || faWindowRestore;
+    }
+    ngOnInit() {
+        if (!isDefined(this.model))
+            this.model = this.DEFAULT_MODAL_HEADER_MODEL;
+    }
+    onClose() {
+        this.modalService.close();
+    }
+}
+DefaultModalHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DefaultModalHeaderComponent, deps: [{ token: ModalService }], target: i0.ɵɵFactoryTarget.Component });
+DefaultModalHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DefaultModalHeaderComponent, selector: "sfc-default-modal-header", inputs: { model: "model" }, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"content\">\r\n        <fa-icon *ngIf=\"icon\" class=\"icon\" [icon]=\"icon\"></fa-icon>\r\n        <span *ngIf=\"model.text\" class=\"label\">{{model.text}}</span>\r\n        <sfc-close *ngIf=\"model.showCloseIcon\" (click)=\"onClose()\"></sfc-close>\r\n    </div>\r\n\r\n    <sfc-delimeter></sfc-delimeter>\r\n</div>", styles: [":host{display:inline-flex;width:100%}:host .container{width:100%;padding-bottom:.5em}:host .container .content{display:flex;align-items:center;justify-content:center;padding:.5em 0}:host .container .content .icon{position:absolute;left:1.5em;font-size:1.3em}:host .container .content .label{font-size:1.2em;font-weight:700;-webkit-user-select:none;user-select:none;padding:0 .7em}:host .container .content sfc-close{position:absolute;right:1.5em}:host .container ::ng-deep sfc-delimeter.horizontal:before,:host-context(.sfc-default-theme) :host .container ::ng-deep sfc-delimeter.horizontal:before{border-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host-context(.sfc-dark-theme) :host .container ::ng-deep sfc-delimeter.horizontal:before{border-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host .container ::ng-deep sfc-delimeter.horizontal:after,:host-context(.sfc-default-theme) :host .container ::ng-deep sfc-delimeter.horizontal:after{border-image:linear-gradient(to left,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host-context(.sfc-dark-theme) :host .container ::ng-deep sfc-delimeter.horizontal:after{border-image:linear-gradient(to left,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "component", type: DelimeterComponent, selector: "sfc-delimeter", inputs: ["label", "direction"] }, { kind: "component", type: CloseComponent, selector: "sfc-close" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DefaultModalHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-default-modal-header', template: "<div class=\"container\">\r\n    <div class=\"content\">\r\n        <fa-icon *ngIf=\"icon\" class=\"icon\" [icon]=\"icon\"></fa-icon>\r\n        <span *ngIf=\"model.text\" class=\"label\">{{model.text}}</span>\r\n        <sfc-close *ngIf=\"model.showCloseIcon\" (click)=\"onClose()\"></sfc-close>\r\n    </div>\r\n\r\n    <sfc-delimeter></sfc-delimeter>\r\n</div>", styles: [":host{display:inline-flex;width:100%}:host .container{width:100%;padding-bottom:.5em}:host .container .content{display:flex;align-items:center;justify-content:center;padding:.5em 0}:host .container .content .icon{position:absolute;left:1.5em;font-size:1.3em}:host .container .content .label{font-size:1.2em;font-weight:700;-webkit-user-select:none;user-select:none;padding:0 .7em}:host .container .content sfc-close{position:absolute;right:1.5em}:host .container ::ng-deep sfc-delimeter.horizontal:before,:host-context(.sfc-default-theme) :host .container ::ng-deep sfc-delimeter.horizontal:before{border-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host-context(.sfc-dark-theme) :host .container ::ng-deep sfc-delimeter.horizontal:before{border-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host .container ::ng-deep sfc-delimeter.horizontal:after,:host-context(.sfc-default-theme) :host .container ::ng-deep sfc-delimeter.horizontal:after{border-image:linear-gradient(to left,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host-context(.sfc-dark-theme) :host .container ::ng-deep sfc-delimeter.horizontal:after{border-image:linear-gradient(to left,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}\n"] }]
+        }], ctorParameters: function () { return [{ type: ModalService }]; }, propDecorators: { model: [{
+                type: Input
+            }] } });
+
+class DefaultModalFooterComponent {
+    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;
+    }
+    ngOnInit() {
+        if (!this.model) {
+            this.model = Object.assign({}, this.DEFAULT_MODAL_FOOTER_MODEL);
+        }
+        else {
+            if (isNullOrEmptyString(this.model.applyButtonText))
+                this.model.applyButtonText = this.DEFAULT_MODAL_FOOTER_MODEL.applyButtonText;
+            if (isNullOrEmptyString(this.model.cancelButtonText))
+                this.model.cancelButtonText = this.DEFAULT_MODAL_FOOTER_MODEL.cancelButtonText;
+            if (!isDefined(this.model.applyButton))
+                this.model.applyButton = this.DEFAULT_MODAL_FOOTER_MODEL.applyButton;
+            if (!isDefined(this.model.cancelButton))
+                this.model.cancelButton = this.DEFAULT_MODAL_FOOTER_MODEL.cancelButton;
+        }
+    }
+    onButtonClick(isCancelButton = false) {
+        if (isCancelButton) {
+            if (this.model.onCancel) {
+                return this.model?.onCancel(this.modalService.args);
+            }
+        }
+        else {
+            if (this.model.onApply) {
+                return this.model.onApply(this.modalService.args);
+            }
+        }
+        this.modalService.toggle();
+    }
+}
+DefaultModalFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DefaultModalFooterComponent, deps: [{ token: ModalService }], target: i0.ɵɵFactoryTarget.Component });
+DefaultModalFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DefaultModalFooterComponent, selector: "sfc-default-modal-footer", inputs: { model: "model" }, ngImport: i0, template: "<div class=\"container\">\r\n    <sfc-button *ngIf=\"model.applyButton\" [sfcComponentSize] [customSize]=\"BUTTON_CUSTOM_SIZE\" [text]=\"model.applyButtonText\"\r\n        [types]=\"[ButtonType.Rounded]\" (click)=\"onButtonClick()\">\r\n    </sfc-button>\r\n    <sfc-button *ngIf=\"model.cancelButton\" [sfcComponentSize] [customSize]=\"BUTTON_CUSTOM_SIZE\" [text]=\"model.cancelButtonText\"\r\n        [types]=\"[ButtonType.Rounded]\" (click)=\"onButtonClick(true)\">\r\n    </sfc-button>\r\n</div>", styles: [":host{display:inline-flex;width:100%}:host .container{display:flex;justify-content:center;align-items:center;width:100%}:host .container sfc-button:first-child{padding-right:.3em}:host .container sfc-button:nth-child(2){padding-left:.3em}:host .container ::ng-deep sfc-button .button.rounded{min-width:5em}:host .container ::ng-deep sfc-button .button:not(:hover){color:#545e61!important;border-color:#545e61!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ComponentSizeDirective, selector: "[sfcComponentSize]", inputs: ["sfcComponentSize", "customSize"] }, { kind: "component", type: ButtonComponent, selector: "sfc-button", inputs: ["text", "iconBefore", "iconAfter", "disabled", "types"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DefaultModalFooterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-default-modal-footer', template: "<div class=\"container\">\r\n    <sfc-button *ngIf=\"model.applyButton\" [sfcComponentSize] [customSize]=\"BUTTON_CUSTOM_SIZE\" [text]=\"model.applyButtonText\"\r\n        [types]=\"[ButtonType.Rounded]\" (click)=\"onButtonClick()\">\r\n    </sfc-button>\r\n    <sfc-button *ngIf=\"model.cancelButton\" [sfcComponentSize] [customSize]=\"BUTTON_CUSTOM_SIZE\" [text]=\"model.cancelButtonText\"\r\n        [types]=\"[ButtonType.Rounded]\" (click)=\"onButtonClick(true)\">\r\n    </sfc-button>\r\n</div>", styles: [":host{display:inline-flex;width:100%}:host .container{display:flex;justify-content:center;align-items:center;width:100%}:host .container sfc-button:first-child{padding-right:.3em}:host .container sfc-button:nth-child(2){padding-left:.3em}:host .container ::ng-deep sfc-button .button.rounded{min-width:5em}:host .container ::ng-deep sfc-button .button:not(:hover){color:#545e61!important;border-color:#545e61!important}\n"] }]
+        }], ctorParameters: function () { return [{ type: ModalService }]; }, propDecorators: { model: [{
+                type: Input
+            }] } });
+
+class ModalComponent {
+    constructor(modalService) {
+        this.modalService = modalService;
+        this.ModalTemplate = ModalTemplate;
+        // End Defaults
+        this.hideOnEsc = true;
+        this.hideOnClickOutside = true;
+        // hide modal header (even default)
+        this.showHeader = true;
+        // hide modal footer (even default)
+        this.showFooter = true;
+    }
+    onEscapeKeyDownHandler() {
+        if (this.hideOnEsc)
+            this.close();
+    }
+    close() {
+        this.modalService.close();
+    }
+}
+ModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ModalComponent, deps: [{ token: ModalService }], target: i0.ɵɵFactoryTarget.Component });
+ModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ModalComponent, selector: "sfc-modal", inputs: { body: "body", header: "header", footer: "footer", defaultHeaderModel: "defaultHeaderModel", defaultFooterModel: "defaultFooterModel", hideOnEsc: "hideOnEsc", hideOnClickOutside: "hideOnClickOutside", showHeader: "showHeader", showFooter: "showFooter" }, host: { listeners: { "document:keydown.escape": "onEscapeKeyDownHandler()" } }, queries: [{ propertyName: "templates", predicate: TemplateReferenceDirective, read: TemplateReferenceDirective }], ngImport: i0, template: "<div class=\"overlay\" [@hideOverlay] (click)=\"hideOnClickOutside && close()\">\r\n    <div class=\"content\" [@hideContent] (click)=\"$event.stopPropagation()\">\r\n\r\n        <div *ngIf=\"showHeader\" class=\"header\">\r\n\r\n            <sfc-template-content [referenceContent]=\"header\" [templatesContent]=\"templates\"\r\n                [templateType]=\"ModalTemplate.Header\" [defaultContent]=\"defaultHeader\">\r\n            </sfc-template-content>\r\n\r\n            <ng-template #defaultHeader>\r\n                <sfc-default-modal-header [model]=\"defaultHeaderModel\"> </sfc-default-modal-header>\r\n            </ng-template>\r\n\r\n        </div>\r\n\r\n        <div class=\"body\">\r\n\r\n            <sfc-template-content [referenceContent]=\"body\" [templatesContent]=\"templates\"\r\n                [templateType]=\"ModalTemplate.Body\">\r\n            </sfc-template-content>\r\n\r\n        </div>\r\n\r\n        <div *ngIf=\"showFooter\" class=\"footer\">\r\n\r\n            <sfc-template-content [referenceContent]=\"footer\" [templatesContent]=\"templates\"\r\n                [templateType]=\"ModalTemplate.Footer\" [defaultContent]=\"defaultFooter\">\r\n            </sfc-template-content>\r\n\r\n            <ng-template #defaultFooter>\r\n                <sfc-default-modal-footer [model]=\"defaultFooterModel\"></sfc-default-modal-footer>\r\n            </ng-template>\r\n\r\n        </div>\r\n    </div>\r\n</div>", styles: [".overlay{display:flex;align-items:center;justify-content:center;position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;background-color:#0009;-webkit-backface-visibility:visible;backface-visibility:visible;animation:expand-overlay .4s cubic-bezier(.55,0,.1,1)}@keyframes expand-overlay{0%{visibility:hidden;opacity:0}}.overlay .content{display:flex;align-items:center;position:relative;padding:.9em 1.5em;margin:auto;background-color:#f5f7fa;max-width:calc(100% - 3em);max-height:calc(100% - 3em);border-radius:3px;box-shadow:0 .125em .625em #656d78;transform:scale(1);flex-direction:column;animation:expand-modal .4s cubic-bezier(.55,0,.1,1)}@keyframes expand-modal{0%{visibility:hidden;opacity:0;transform:scale(1.2)}}.overlay .content>div{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#545e61;flex-direction:row;display:flex;flex:0 0 auto;justify-content:center}.overlay .content>div.body{overflow-y:auto;flex:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TemplateContentComponent, selector: "sfc-template-content", inputs: ["contextData", "referenceContent", "templateType", "templatesContent", "defaultContent"] }, { kind: "component", type: DefaultModalHeaderComponent, selector: "sfc-default-modal-header", inputs: ["model"] }, { kind: "component", type: DefaultModalFooterComponent, selector: "sfc-default-modal-footer", inputs: ["model"] }], animations: [
+        trigger('hideOverlay', [
+            state('initial', style({ opacity: 1, visibility: 'visible' })),
+            state('void', style({ opacity: 0, visibility: 'hidden' })),
+            transition('* => void', [
+                group([
+                    query(':self', [
+                        animate('400ms cubic-bezier(.55, 0, .1, 1)', style({
+                            opacity: 0,
+                            visibility: 'hidden'
+                        }))
+                    ]),
+                    query('@hideContent', [animateChild()])
+                ])
+            ])
+        ]),
+        trigger('hideContent', [
+            state('initial', style({ opacity: 1, visibility: 'visible', transform: 'scale(1)' })),
+            state('void', style({ opacity: 0, visibility: 'hidden', transform: 'scale(1.2)' })),
+            transition('* => void', animate('400ms cubic-bezier(.55, 0, .1, 1)'))
+        ])
+    ] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-modal', animations: [
+                        trigger('hideOverlay', [
+                            state('initial', style({ opacity: 1, visibility: 'visible' })),
+                            state('void', style({ opacity: 0, visibility: 'hidden' })),
+                            transition('* => void', [
+                                group([
+                                    query(':self', [
+                                        animate('400ms cubic-bezier(.55, 0, .1, 1)', style({
+                                            opacity: 0,
+                                            visibility: 'hidden'
+                                        }))
+                                    ]),
+                                    query('@hideContent', [animateChild()])
+                                ])
+                            ])
+                        ]),
+                        trigger('hideContent', [
+                            state('initial', style({ opacity: 1, visibility: 'visible', transform: 'scale(1)' })),
+                            state('void', style({ opacity: 0, visibility: 'hidden', transform: 'scale(1.2)' })),
+                            transition('* => void', animate('400ms cubic-bezier(.55, 0, .1, 1)'))
+                        ])
+                    ], template: "<div class=\"overlay\" [@hideOverlay] (click)=\"hideOnClickOutside && close()\">\r\n    <div class=\"content\" [@hideContent] (click)=\"$event.stopPropagation()\">\r\n\r\n        <div *ngIf=\"showHeader\" class=\"header\">\r\n\r\n            <sfc-template-content [referenceContent]=\"header\" [templatesContent]=\"templates\"\r\n                [templateType]=\"ModalTemplate.Header\" [defaultContent]=\"defaultHeader\">\r\n            </sfc-template-content>\r\n\r\n            <ng-template #defaultHeader>\r\n                <sfc-default-modal-header [model]=\"defaultHeaderModel\"> </sfc-default-modal-header>\r\n            </ng-template>\r\n\r\n        </div>\r\n\r\n        <div class=\"body\">\r\n\r\n            <sfc-template-content [referenceContent]=\"body\" [templatesContent]=\"templates\"\r\n                [templateType]=\"ModalTemplate.Body\">\r\n            </sfc-template-content>\r\n\r\n        </div>\r\n\r\n        <div *ngIf=\"showFooter\" class=\"footer\">\r\n\r\n            <sfc-template-content [referenceContent]=\"footer\" [templatesContent]=\"templates\"\r\n                [templateType]=\"ModalTemplate.Footer\" [defaultContent]=\"defaultFooter\">\r\n            </sfc-template-content>\r\n\r\n            <ng-template #defaultFooter>\r\n                <sfc-default-modal-footer [model]=\"defaultFooterModel\"></sfc-default-modal-footer>\r\n            </ng-template>\r\n\r\n        </div>\r\n    </div>\r\n</div>", styles: [".overlay{display:flex;align-items:center;justify-content:center;position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;background-color:#0009;-webkit-backface-visibility:visible;backface-visibility:visible;animation:expand-overlay .4s cubic-bezier(.55,0,.1,1)}@keyframes expand-overlay{0%{visibility:hidden;opacity:0}}.overlay .content{display:flex;align-items:center;position:relative;padding:.9em 1.5em;margin:auto;background-color:#f5f7fa;max-width:calc(100% - 3em);max-height:calc(100% - 3em);border-radius:3px;box-shadow:0 .125em .625em #656d78;transform:scale(1);flex-direction:column;animation:expand-modal .4s cubic-bezier(.55,0,.1,1)}@keyframes expand-modal{0%{visibility:hidden;opacity:0;transform:scale(1.2)}}.overlay .content>div{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#545e61;flex-direction:row;display:flex;flex:0 0 auto;justify-content:center}.overlay .content>div.body{overflow-y:auto;flex:0}\n"] }]
+        }], ctorParameters: function () { return [{ type: ModalService }]; }, propDecorators: { body: [{
+                type: Input
+            }], header: [{
+                type: Input
+            }], footer: [{
+                type: Input
+            }], defaultHeaderModel: [{
+                type: Input
+            }], defaultFooterModel: [{
+                type: Input
+            }], hideOnEsc: [{
+                type: Input
+            }], hideOnClickOutside: [{
+                type: Input
+            }], showHeader: [{
+                type: Input
+            }], showFooter: [{
+                type: Input
+            }], onEscapeKeyDownHandler: [{
+                type: HostListener,
+                args: ['document:keydown.escape']
+            }], templates: [{
+                type: ContentChildren,
+                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;
+        this.onClick = () => this.open = !this.open;
+    }
+}
+HamburgerBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: HamburgerBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+HamburgerBaseComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: HamburgerBaseComponent, inputs: { open: "open" }, host: { listeners: { "click": "onClick()" }, properties: { "class.open": "this.open" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: HamburgerBaseComponent, decorators: [{
+            type: Directive
+        }], propDecorators: { open: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.' + UIClass.Open]
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+class HamburgerComponent extends HamburgerBaseComponent {
+}
+HamburgerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: HamburgerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+HamburgerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: HamburgerComponent, selector: "sfc-hamburger", usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"line half start\"></div>\r\n    <div class=\"line\"></div>\r\n    <div class=\"line half end\"></div>\r\n</div>", styles: [".container{width:1em;height:1em;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;transition:transform .33s ease-out}:host(.open) .container{transform:rotate(-45deg)}.container .line{transition:background-color .5s ease;border-radius:.31em;width:100%;height:.25em}.container .line,:host-context(.sfc-default-theme) .container .line{background-color:#545e61}:host-context(.sfc-dark-theme) .container .line{background-color:#fff}.container .line.half{width:50%}.container .line.start{transition:transform .33s cubic-bezier(.54,-.81,.57,.57),background-color .5s ease;transform-origin:right}:host(.open) .container .line.start{transform:rotate(-90deg) translate(.1375em)}.container .line.end{align-self:flex-end;transition:transform .33s cubic-bezier(.54,-.81,.57,.57),background-color .5s ease;transform-origin:left}:host(.open) .container .line.end{transform:rotate(-90deg) translate(-.1875em)}.container:hover .line{background-color:#ffce54!important}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: HamburgerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-hamburger', template: "<div class=\"container\">\r\n    <div class=\"line half start\"></div>\r\n    <div class=\"line\"></div>\r\n    <div class=\"line half end\"></div>\r\n</div>", styles: [".container{width:1em;height:1em;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;transition:transform .33s ease-out}:host(.open) .container{transform:rotate(-45deg)}.container .line{transition:background-color .5s ease;border-radius:.31em;width:100%;height:.25em}.container .line,:host-context(.sfc-default-theme) .container .line{background-color:#545e61}:host-context(.sfc-dark-theme) .container .line{background-color:#fff}.container .line.half{width:50%}.container .line.start{transition:transform .33s cubic-bezier(.54,-.81,.57,.57),background-color .5s ease;transform-origin:right}:host(.open) .container .line.start{transform:rotate(-90deg) translate(.1375em)}.container .line.end{align-self:flex-end;transition:transform .33s cubic-bezier(.54,-.81,.57,.57),background-color .5s ease;transform-origin:left}:host(.open) .container .line.end{transform:rotate(-90deg) translate(-.1875em)}.container:hover .line{background-color:#ffce54!important}\n"] }]
+        }] });
+
+class HamburgerMenuComponent extends HamburgerBaseComponent {
+    constructor() {
+        super(...arguments);
+        this.label = 'Menu';
+    }
+}
+HamburgerMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: HamburgerMenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+HamburgerMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: HamburgerMenuComponent, selector: "sfc-hamburger-menu", inputs: { label: "label" }, usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\r\n    <span> &nbsp;</span>\r\n    <span> &nbsp;</span>\r\n    <span> &nbsp;</span>\r\n    <span> &nbsp;</span>\r\n    <span class=\"text\">{{label}}</span>\r\n</div>", styles: [":host .container{display:inline-block;cursor:pointer}:host .container span{position:relative;transition:background .5s ease;display:block;height:.125em;margin-bottom:.1875em}:host .container span,:host-context(.sfc-default-theme) :host .container span{background:#545e61}:host-context(.sfc-dark-theme) :host .container span{background:#fff}:host .container span.text{font-size:.4375em;letter-spacing:.4px;transition:opacity 1s ease-in-out,color .5s ease;background:none!important;opacity:1;text-transform:uppercase}:host .container span.text,:host-context(.sfc-default-theme) :host .container span.text{color:#545e61}:host-context(.sfc-dark-theme) :host .container span.text{color:#fff}:host .container:hover span{background:#ffce54}:host .container:hover span.text{color:#ffce54}:host.open .container span:nth-child(1){transform:rotate(-45deg);top:.625em}:host.open .container span:nth-child(2),:host.open .container span:nth-child(3){width:0;opacity:0}:host.open .container span:nth-child(4){transform:rotate(45deg);top:-.3125em}:host.open .container span.text{opacity:0}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: HamburgerMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-hamburger-menu', template: "<div class=\"container\">\r\n    <span> &nbsp;</span>\r\n    <span> &nbsp;</span>\r\n    <span> &nbsp;</span>\r\n    <span> &nbsp;</span>\r\n    <span class=\"text\">{{label}}</span>\r\n</div>", styles: [":host .container{display:inline-block;cursor:pointer}:host .container span{position:relative;transition:background .5s ease;display:block;height:.125em;margin-bottom:.1875em}:host .container span,:host-context(.sfc-default-theme) :host .container span{background:#545e61}:host-context(.sfc-dark-theme) :host .container span{background:#fff}:host .container span.text{font-size:.4375em;letter-spacing:.4px;transition:opacity 1s ease-in-out,color .5s ease;background:none!important;opacity:1;text-transform:uppercase}:host .container span.text,:host-context(.sfc-default-theme) :host .container span.text{color:#545e61}:host-context(.sfc-dark-theme) :host .container span.text{color:#fff}:host .container:hover span{background:#ffce54}:host .container:hover span.text{color:#ffce54}:host.open .container span:nth-child(1){transform:rotate(-45deg);top:.625em}:host.open .container span:nth-child(2),:host.open .container span:nth-child(3){width:0;opacity:0}:host.open .container span:nth-child(4){transform:rotate(45deg);top:-.3125em}:host.open .container span.text{opacity:0}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }] } });
+
+class DotsComponent {
+    constructor() {
+        this.open = false;
+        this.direction = Direction.Horizontal;
+        this.onClick = () => this.open = !this.open;
+    }
+}
+DotsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DotsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DotsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DotsComponent, selector: "sfc-dots", inputs: { open: "open", direction: "direction" }, host: { listeners: { "click": "onClick()" }, properties: { "class.open": "this.open", "class": "this.direction" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"dots-container\">\r\n        <div class=\"dot\"></div>\r\n        <div class=\"dot\"></div>\r\n        <div class=\"dot\"></div>\r\n    </div>\r\n</div>", styles: [":host{display:inline-flex;transform:rotate(0);transition:all .3s cubic-bezier(.175,.885,.32,1.275);cursor:pointer}:host.open{transform:rotate(90deg)}:host.vertical{transform:rotate(90deg)}:host.vertical.open{transform:rotate(0)}:host .container{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;flex:1;margin:.25em}:host .container .dots-container{display:flex;flex-flow:row wrap;justify-content:center;align-items:center;position:relative}:host .container .dots-container .dot{width:.3125em;height:.3125em;transition:background .3s ease;margin:.06em;border-radius:50%;display:block}:host .container .dots-container .dot,:host-context(.sfc-default-theme) :host .container .dots-container .dot{background:#545e61}:host-context(.sfc-dark-theme) :host .container .dots-container .dot{background:#fff}:host:hover .container,:host:focus .container{outline:none}:host:hover .container .dots-container .dot,:host-context(.sfc-default-theme) :host:hover .container .dots-container .dot,:host:focus .container .dots-container .dot,:host-context(.sfc-default-theme) :host:focus .container .dots-container .dot{background:#ffce54}:host-context(.sfc-dark-theme) :host:hover .container .dots-container .dot,:host-context(.sfc-dark-theme) :host:focus .container .dots-container .dot{background:#ffce54}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DotsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-dots', template: "<div class=\"container\">\r\n    <div class=\"dots-container\">\r\n        <div class=\"dot\"></div>\r\n        <div class=\"dot\"></div>\r\n        <div class=\"dot\"></div>\r\n    </div>\r\n</div>", styles: [":host{display:inline-flex;transform:rotate(0);transition:all .3s cubic-bezier(.175,.885,.32,1.275);cursor:pointer}:host.open{transform:rotate(90deg)}:host.vertical{transform:rotate(90deg)}:host.vertical.open{transform:rotate(0)}:host .container{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;flex:1;margin:.25em}:host .container .dots-container{display:flex;flex-flow:row wrap;justify-content:center;align-items:center;position:relative}:host .container .dots-container .dot{width:.3125em;height:.3125em;transition:background .3s ease;margin:.06em;border-radius:50%;display:block}:host .container .dots-container .dot,:host-context(.sfc-default-theme) :host .container .dots-container .dot{background:#545e61}:host-context(.sfc-dark-theme) :host .container .dots-container .dot{background:#fff}:host:hover .container,:host:focus .container{outline:none}:host:hover .container .dots-container .dot,:host-context(.sfc-default-theme) :host:hover .container .dots-container .dot,:host:focus .container .dots-container .dot,:host-context(.sfc-default-theme) :host:focus .container .dots-container .dot{background:#ffce54}:host-context(.sfc-dark-theme) :host:hover .container .dots-container .dot,:host-context(.sfc-dark-theme) :host:focus .container .dots-container .dot{background:#ffce54}\n"] }]
+        }], propDecorators: { open: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.' + UIClass.Open]
+            }], direction: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+class ToggleSwitcherComponent {
+    constructor() {
+        this.active = false;
+        this.disabled = false;
+        this.onClick = () => this.active = !this.active;
+        this.leftModel = { label: 'Left' };
+        this.rightModel = { label: 'Right' };
+    }
+}
+ToggleSwitcherComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ToggleSwitcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ToggleSwitcherComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ToggleSwitcherComponent, selector: "sfc-toggle-switcher", inputs: { active: "active", disabled: "disabled", leftModel: "leftModel", rightModel: "rightModel" }, host: { listeners: { "click": "onClick()" }, properties: { "class.active": "this.active", "class.disabled": "this.disabled" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"toggle\"></div>\r\n    <div class=\"names\">\r\n        <p class=\"left\">\r\n            <fa-icon *ngIf=\"leftModel.icon\" [icon]=\"leftModel.icon\"></fa-icon>\r\n            <span>{{leftModel.label}}</span>\r\n        </p>\r\n        <p class=\"right\">\r\n            <fa-icon *ngIf=\"rightModel.icon\" [icon]=\"rightModel.icon\"></fa-icon>\r\n            <span>{{rightModel.label}}</span>\r\n        </p>\r\n    </div>\r\n</div>", styles: [":host .container,:host .toggle{height:100%;border-radius:100px}:host .container{width:100%;background-color:#e6e9ed;color:#545e61;border-radius:100px;position:relative;cursor:pointer}:host .container .toggle{position:absolute;width:50%;background-color:#fff;box-shadow:0 .125em .5em #656d78;transition:transform .3s cubic-bezier(.25,.46,.45,.94)}:host .container .names{font-size:90%;font-weight:bolder;width:100%;height:100%;position:relative;display:flex;justify-content:space-around;align-items:center;-webkit-user-select:none;user-select:none;overflow:hidden}:host .container .names p{font-size:90%;text-align:center;margin:0;padding:.5em 1em}:host .container .names p.right{opacity:.5}:host.active .container{background-color:#e6e9ed}:host.active .container .toggle{transform:translate(100%);background-color:#fff}:host.active .container .names{color:#545e61}:host.active .container .names .left{opacity:.5}:host.active .container .names .right{opacity:1}:host.disabled{pointer-events:none}:host.disabled .container,:host-context(.sfc-default-theme) :host.disabled .container{background-color:#f6f6f6}:host-context(.sfc-dark-theme) :host.disabled .container{background-color:#656d78}:host.disabled .container .toggle{box-shadow:none}:host.disabled .container .toggle,:host-context(.sfc-default-theme) :host.disabled .container .toggle{background-color:#e6e9ed}:host-context(.sfc-dark-theme) :host.disabled .container .toggle{background-color:#aab2bd}:host.disabled .container .names,:host-context(.sfc-default-theme) :host.disabled .container .names{color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .container .names{color:#e9e9e9}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ToggleSwitcherComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-toggle-switcher', template: "<div class=\"container\">\r\n    <div class=\"toggle\"></div>\r\n    <div class=\"names\">\r\n        <p class=\"left\">\r\n            <fa-icon *ngIf=\"leftModel.icon\" [icon]=\"leftModel.icon\"></fa-icon>\r\n            <span>{{leftModel.label}}</span>\r\n        </p>\r\n        <p class=\"right\">\r\n            <fa-icon *ngIf=\"rightModel.icon\" [icon]=\"rightModel.icon\"></fa-icon>\r\n            <span>{{rightModel.label}}</span>\r\n        </p>\r\n    </div>\r\n</div>", styles: [":host .container,:host .toggle{height:100%;border-radius:100px}:host .container{width:100%;background-color:#e6e9ed;color:#545e61;border-radius:100px;position:relative;cursor:pointer}:host .container .toggle{position:absolute;width:50%;background-color:#fff;box-shadow:0 .125em .5em #656d78;transition:transform .3s cubic-bezier(.25,.46,.45,.94)}:host .container .names{font-size:90%;font-weight:bolder;width:100%;height:100%;position:relative;display:flex;justify-content:space-around;align-items:center;-webkit-user-select:none;user-select:none;overflow:hidden}:host .container .names p{font-size:90%;text-align:center;margin:0;padding:.5em 1em}:host .container .names p.right{opacity:.5}:host.active .container{background-color:#e6e9ed}:host.active .container .toggle{transform:translate(100%);background-color:#fff}:host.active .container .names{color:#545e61}:host.active .container .names .left{opacity:.5}:host.active .container .names .right{opacity:1}:host.disabled{pointer-events:none}:host.disabled .container,:host-context(.sfc-default-theme) :host.disabled .container{background-color:#f6f6f6}:host-context(.sfc-dark-theme) :host.disabled .container{background-color:#656d78}:host.disabled .container .toggle{box-shadow:none}:host.disabled .container .toggle,:host-context(.sfc-default-theme) :host.disabled .container .toggle{background-color:#e6e9ed}:host-context(.sfc-dark-theme) :host.disabled .container .toggle{background-color:#aab2bd}:host.disabled .container .names,:host-context(.sfc-default-theme) :host.disabled .container .names{color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .container .names{color:#e9e9e9}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { active: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.' + UIClass.Active]
+            }], disabled: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.' + UIClass.Disabled]
+            }], leftModel: [{
+                type: Input
+            }], rightModel: [{
+                type: Input
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+var CheckmarkType;
+(function (CheckmarkType) {
+    CheckmarkType["Square"] = "square";
+    CheckmarkType["Rounded"] = "rounded";
+    CheckmarkType["Circle"] = "circle";
+})(CheckmarkType || (CheckmarkType = {}));
+
+class CheckmarkComponent {
+    constructor() {
+        this.active = false;
+        this.disabled = false;
+        this.icon = faCheck;
+        this.type = CheckmarkType.Rounded;
+    }
+}
+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}: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;width:1em;height:1em;cursor:pointer;display:flex;align-items:center;justify-content:center}:host .check,:host-context(.sfc-default-theme) :host .check{border-color:#545e61}:host-context(.sfc-dark-theme) :host .check{border-color:#fff}:host .check fa-icon{font-size:.8em;transition:opacity .3s ease}:host .check fa-icon,:host-context(.sfc-default-theme) :host .check fa-icon{opacity:.5}:host-context(.sfc-dark-theme) :host .check fa-icon{opacity:.8}:host .check:hover{border-color:#ffce54}:host .check:hover fa-icon{color:#ffce54}:host .check:hover fa-icon,:host-context(.sfc-default-theme) :host .check:hover fa-icon{opacity:.8}:host-context(.sfc-dark-theme) :host .check:hover fa-icon{opacity:1}:host.active .check{border-color:#ffce54;background:#ffce54}:host.active .check fa-icon{opacity:1;transform:scale(0);color:#fff;-webkit-text-stroke:0;animation:icon .3s cubic-bezier(1,.008,.565,1.65) .1s 1 forwards}@keyframes icon{0%{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}:host.circle .check{border-radius:50%}:host.rounded .check{border-radius:15%}:host.disabled{pointer-events:none}:host.disabled .check{color:#fff;border-style:dashed}:host.disabled .check,:host-context(.sfc-default-theme) :host.disabled .check{border-color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .check{border-color:#656d78}:host.disabled.active .check,:host-context(.sfc-default-theme) :host.disabled.active .check{background:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled.active .check{background:#656d78}\n"], dependencies: [{ kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: ShowHideElementDirective, selector: "[sfcShowHideElement]", inputs: ["sfcShowHideElement", "delay"] }] });
+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}: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;width:1em;height:1em;cursor:pointer;display:flex;align-items:center;justify-content:center}:host .check,:host-context(.sfc-default-theme) :host .check{border-color:#545e61}:host-context(.sfc-dark-theme) :host .check{border-color:#fff}:host .check fa-icon{font-size:.8em;transition:opacity .3s ease}:host .check fa-icon,:host-context(.sfc-default-theme) :host .check fa-icon{opacity:.5}:host-context(.sfc-dark-theme) :host .check fa-icon{opacity:.8}:host .check:hover{border-color:#ffce54}:host .check:hover fa-icon{color:#ffce54}:host .check:hover fa-icon,:host-context(.sfc-default-theme) :host .check:hover fa-icon{opacity:.8}:host-context(.sfc-dark-theme) :host .check:hover fa-icon{opacity:1}:host.active .check{border-color:#ffce54;background:#ffce54}:host.active .check fa-icon{opacity:1;transform:scale(0);color:#fff;-webkit-text-stroke:0;animation:icon .3s cubic-bezier(1,.008,.565,1.65) .1s 1 forwards}@keyframes icon{0%{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}:host.circle .check{border-radius:50%}:host.rounded .check{border-radius:15%}:host.disabled{pointer-events:none}:host.disabled .check{color:#fff;border-style:dashed}:host.disabled .check,:host-context(.sfc-default-theme) :host.disabled .check{border-color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .check{border-color:#656d78}:host.disabled.active .check,:host-context(.sfc-default-theme) :host.disabled.active .check{background:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled.active .check{background:#656d78}\n"] }]
+        }], propDecorators: { active: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.' + UIClass.Active]
+            }], disabled: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.' + UIClass.Disabled]
+            }], icon: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class PaginationConstants {
+}
+PaginationConstants.DEFAULT_SIZE = 5;
+PaginationConstants.DEFAULT_PAGE = 1;
+PaginationConstants.DEFAULT_COUNT = 3;
+
+class PaginationService {
+    constructor() {
+        /**
+         * Handle page changing
+         */
+        this.pageSubject = new Subject();
+        this.page$ = this.pageSubject.asObservable();
+    }
+    /** Need for init pagination observables */
+    init(data$, page = PaginationConstants.DEFAULT_PAGE, pageSize = PaginationConstants.DEFAULT_SIZE) {
+        if (isDefined(data$))
+            this.initObservables(data$, page, pageSize);
+    }
+    /**
+     * Move to page
+     */
+    page(page) {
+        this.pageSubject.next(page);
+    }
+    initObservables(data$, page, pageSize) {
+        this.total$ = data$.pipe(map((p) => p.length));
+        this.totalPages$ = this.total$.pipe(map((total) => Math.ceil(total / pageSize)));
+        this.pagination$ = combineLatest([this.totalPages$, this.page$.pipe(startWith(page))])
+            .pipe(map(([total, page]) => {
+            return {
+                page: page > total ? PaginationConstants.DEFAULT_PAGE : page,
+                next: Math.min(page + 1, total),
+                previous: Math.max(1, page - 1),
+                total: total
+            };
+        }));
+    }
+}
+PaginationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PaginationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+PaginationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PaginationService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PaginationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class PaginationComponent {
+    constructor(service) {
+        this.service = service;
+        this.faChevronLeft = faChevronLeft;
+        this.faChevronRight = faChevronRight;
+        // max limit for pagination bts
+        this.count = PaginationConstants.DEFAULT_COUNT;
+        /**
+        * show full range of data
+        */
+        this.full = false;
+        /**
+         * show first and last page's btn
+         */
+        this.limits = false;
+    }
+    ngOnInit() {
+        if (!isDefined(this.service.pagination$))
+            this.service.init(this.data$);
+        if (isDefined(this.service.pagination$)) {
+            this.vm$ = this.service.pagination$.pipe(map((event) => {
+                const range = this.initRange(event);
+                return {
+                    range: range,
+                    any: event.total > 0,
+                    firstPage: this.showStartLimit(range, event),
+                    lastPage: this.showEndLimit(range, event),
+                    previousPage: event.page != PaginationConstants.DEFAULT_PAGE,
+                    nextPage: event.total > event.page,
+                    page: event.page,
+                    previous: event.previous,
+                    next: event.next,
+                    total: event.total
+                };
+            }));
+        }
+    }
+    onPageClick(page) {
+        this.service.page(page);
+    }
+    get showLimitPages() {
+        return this.limits && !this.full;
+    }
+    showStartLimit(range, event) {
+        return this.showLimitPages && event.page !== PaginationConstants.DEFAULT_PAGE
+            && !hasItem(range, PaginationConstants.DEFAULT_PAGE);
+    }
+    showEndLimit(range, event) {
+        return this.showLimitPages && event.total !== event.page && !hasItem(range, event.total);
+    }
+    initRange(event) {
+        let start = 1, end = event.total + 1;
+        if (!this.full) {
+            const fullRange = this.range(1, event.total + 1), pageIndex = fullRange.indexOf(event.page), pageCount = Math.min(event.total, this.count);
+            let rangeStart = 0, rangeEnd = 0;
+            if (pageCount == PaginationConstants.DEFAULT_PAGE) {
+                rangeStart = rangeEnd = pageIndex;
+            }
+            else {
+                let allowedCount = pageCount - 1, partValue = Math.ceil(allowedCount / 2), leftValue = pageIndex - partValue < 0 ? pageIndex : partValue, rightToExtend = allowedCount - leftValue, rightValue = rightToExtend < 0 ? 0 : rightToExtend;
+                if (pageIndex + rightValue >= event.total)
+                    leftValue += pageIndex + rightValue - event.total + 1;
+                rangeStart = pageIndex - leftValue;
+                rangeEnd = pageIndex + rightValue;
+            }
+            start = rangeStart + 1;
+            end = Math.min(event.total + 1, rangeEnd + 2);
+        }
+        return this.range(start, end);
+    }
+    range(start, stop, step = 1) {
+        if (!stop) {
+            start = 0;
+            stop = start;
+        }
+        return Array.from(new Array(Number((stop - start) / step)), (_, i) => start + i * step);
+    }
+}
+PaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PaginationComponent, deps: [{ token: PaginationService }], target: i0.ɵɵFactoryTarget.Component });
+PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: PaginationComponent, selector: "sfc-pagination", inputs: { count: "count", full: "full", limits: "limits", data$: "data$" }, ngImport: i0, template: "<div class=\"container\" *ngIf=\"vm$ | async as vm\">\r\n    <sfc-delimeter></sfc-delimeter>\r\n    <ul *ngIf=\"vm.any\">\r\n        <li [sfcShowHideElement]=\"vm.previousPage\" (click)=\"onPageClick(vm.previous)\">\r\n            <button class=\"limit\">\r\n                <fa-icon [icon]=\"faChevronLeft\"></fa-icon>\r\n            </button>\r\n        </li>\r\n        <li *ngIf=\"vm.firstPage\" (click)=\"onPageClick(1)\">\r\n            <button>1</button>\r\n        </li>\r\n        <li *ngIf=\"vm.firstPage\">\r\n            <span>...</span>\r\n        </li>\r\n        <li *ngFor=\"let page of vm.range\" (click)=\"onPageClick(page)\">\r\n            <button [class.active]=\"vm.page === page\">{{page}}</button>\r\n        </li>\r\n        <li *ngIf=\"vm.lastPage\">\r\n            <span>...</span>\r\n        </li>\r\n        <li *ngIf=\"vm.lastPage\" (click)=\"onPageClick(vm.total)\">\r\n            <button>{{vm.total}}</button>\r\n        </li>\r\n        <li [sfcShowHideElement]=\"vm.nextPage\" (click)=\"onPageClick(vm.next)\">\r\n            <button class=\"limit\">\r\n                <fa-icon [icon]=\"faChevronRight\"></fa-icon>\r\n            </button>\r\n        </li>\r\n    </ul>\r\n    <sfc-delimeter></sfc-delimeter>\r\n</div>", styles: [":host{width:100%;display:inline-block}:host .container{position:relative;text-align:center}:host .container ul{list-style:none;margin:0;padding:0;display:flex;justify-content:center;-webkit-user-select:none;user-select:none}:host .container ul li{display:block;float:left;padding:.31em}:host .container ul li:first-child{border:none}:host .container ul li button,:host .container ul li span{background:none;border:none;border-radius:50%;box-sizing:border-box;display:block;font-size:1em;height:2.5em;min-width:2.5em;line-height:2.5em;padding:0}:host .container ul li button,:host-context(.sfc-default-theme) :host .container ul li button,:host .container ul li span,:host-context(.sfc-default-theme) :host .container ul li span{color:#0009}:host-context(.sfc-dark-theme) :host .container ul li button,:host-context(.sfc-dark-theme) :host .container ul li span{color:#fff}:host .container ul li button{outline:none;position:relative;transition:all .17s linear}:host .container ul li button,:host-context(.sfc-default-theme) :host .container ul li button{color:#545e61}:host-context(.sfc-dark-theme) :host .container ul li button{color:#fff}:host .container ul li button:before{border-radius:50%;content:\"\";cursor:pointer;height:0;left:50%;opacity:0;position:absolute;transform:translate(-50%,-50%);transition:all .17s linear;top:50%;width:0}:host .container ul li button:before,:host-context(.sfc-default-theme) :host .container ul li button:before{background:#545e61}:host-context(.sfc-dark-theme) :host .container ul li button:before{background:#f5f7fa}:host .container ul li button:hover:not(.active),:host-context(.sfc-default-theme) :host .container ul li button:hover:not(.active){color:#545e61}:host-context(.sfc-dark-theme) :host .container ul li button:hover:not(.active){color:#fff}:host .container ul li button:hover:not(.active):before{animation:hover-animation .51s linear forwards;width:2.5em;height:2.5em}:host .container ul li button.active{color:#545e61!important}:host .container ul li button.active,:host-context(.sfc-default-theme) :host .container ul li button.active{background:rgba(0,0,0,.1019607843)}:host-context(.sfc-dark-theme) :host .container ul li button.active{background:#f5f7fa}@keyframes hover-animation{0%{opacity:1}to{opacity:0}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: ShowHideElementDirective, selector: "[sfcShowHideElement]", inputs: ["sfcShowHideElement", "delay"] }, { kind: "component", type: DelimeterComponent, selector: "sfc-delimeter", inputs: ["label", "direction"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PaginationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-pagination', template: "<div class=\"container\" *ngIf=\"vm$ | async as vm\">\r\n    <sfc-delimeter></sfc-delimeter>\r\n    <ul *ngIf=\"vm.any\">\r\n        <li [sfcShowHideElement]=\"vm.previousPage\" (click)=\"onPageClick(vm.previous)\">\r\n            <button class=\"limit\">\r\n                <fa-icon [icon]=\"faChevronLeft\"></fa-icon>\r\n            </button>\r\n        </li>\r\n        <li *ngIf=\"vm.firstPage\" (click)=\"onPageClick(1)\">\r\n            <button>1</button>\r\n        </li>\r\n        <li *ngIf=\"vm.firstPage\">\r\n            <span>...</span>\r\n        </li>\r\n        <li *ngFor=\"let page of vm.range\" (click)=\"onPageClick(page)\">\r\n            <button [class.active]=\"vm.page === page\">{{page}}</button>\r\n        </li>\r\n        <li *ngIf=\"vm.lastPage\">\r\n            <span>...</span>\r\n        </li>\r\n        <li *ngIf=\"vm.lastPage\" (click)=\"onPageClick(vm.total)\">\r\n            <button>{{vm.total}}</button>\r\n        </li>\r\n        <li [sfcShowHideElement]=\"vm.nextPage\" (click)=\"onPageClick(vm.next)\">\r\n            <button class=\"limit\">\r\n                <fa-icon [icon]=\"faChevronRight\"></fa-icon>\r\n            </button>\r\n        </li>\r\n    </ul>\r\n    <sfc-delimeter></sfc-delimeter>\r\n</div>", styles: [":host{width:100%;display:inline-block}:host .container{position:relative;text-align:center}:host .container ul{list-style:none;margin:0;padding:0;display:flex;justify-content:center;-webkit-user-select:none;user-select:none}:host .container ul li{display:block;float:left;padding:.31em}:host .container ul li:first-child{border:none}:host .container ul li button,:host .container ul li span{background:none;border:none;border-radius:50%;box-sizing:border-box;display:block;font-size:1em;height:2.5em;min-width:2.5em;line-height:2.5em;padding:0}:host .container ul li button,:host-context(.sfc-default-theme) :host .container ul li button,:host .container ul li span,:host-context(.sfc-default-theme) :host .container ul li span{color:#0009}:host-context(.sfc-dark-theme) :host .container ul li button,:host-context(.sfc-dark-theme) :host .container ul li span{color:#fff}:host .container ul li button{outline:none;position:relative;transition:all .17s linear}:host .container ul li button,:host-context(.sfc-default-theme) :host .container ul li button{color:#545e61}:host-context(.sfc-dark-theme) :host .container ul li button{color:#fff}:host .container ul li button:before{border-radius:50%;content:\"\";cursor:pointer;height:0;left:50%;opacity:0;position:absolute;transform:translate(-50%,-50%);transition:all .17s linear;top:50%;width:0}:host .container ul li button:before,:host-context(.sfc-default-theme) :host .container ul li button:before{background:#545e61}:host-context(.sfc-dark-theme) :host .container ul li button:before{background:#f5f7fa}:host .container ul li button:hover:not(.active),:host-context(.sfc-default-theme) :host .container ul li button:hover:not(.active){color:#545e61}:host-context(.sfc-dark-theme) :host .container ul li button:hover:not(.active){color:#fff}:host .container ul li button:hover:not(.active):before{animation:hover-animation .51s linear forwards;width:2.5em;height:2.5em}:host .container ul li button.active{color:#545e61!important}:host .container ul li button.active,:host-context(.sfc-default-theme) :host .container ul li button.active{background:rgba(0,0,0,.1019607843)}:host-context(.sfc-dark-theme) :host .container ul li button.active{background:#f5f7fa}@keyframes hover-animation{0%{opacity:1}to{opacity:0}}\n"] }]
+        }], ctorParameters: function () { return [{ type: PaginationService }]; }, propDecorators: { count: [{
+                type: Input
+            }], full: [{
+                type: Input
+            }], limits: [{
+                type: Input
+            }], data$: [{
+                type: Input
+            }] } });
+
+class SortingConstants {
+}
+SortingConstants.DEFAULT_ASCENDING_ICON = faChevronUp;
+SortingConstants.DEFAULT_DESCENDING_ICON = faChevronDown;
+
+class SortingService {
+    constructor() {
+        this.sortingSubject = new Subject();
+        this.sorting$ = this.sortingSubject.asObservable();
+    }
+    sort(event) {
+        this.sortingSubject.next(event);
+    }
+}
+SortingService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SortingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SortingService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SortingService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SortingService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class SortingComponent {
+    constructor(service) {
+        this.service = service;
+        this.SortingDirection = SortingDirection;
+        this.id = CommonConstants.EMPTY_STRING;
+        this.model = { active: false, enabled: false, direction: SortingDirection.Ascending };
+    }
+    get enabled() {
+        return this.model.enabled;
+    }
+    get active() {
+        return this.model.active || false;
+    }
+    sort() {
+        if (this.enabled) {
+            if (this.active) {
+                this.model.direction = this.model.direction === SortingDirection.Ascending
+                    ? SortingDirection.Descending
+                    : SortingDirection.Ascending;
+            }
+            this.service.sort({ id: this.id, direction: this.model.direction });
+        }
+    }
+    get icon() {
+        const modelIcon = firstOrDefault(this.model.icons, i => i.direction == this.model.direction);
+        return modelIcon ? modelIcon.icon : this.model.direction === SortingDirection.Ascending
+            ? SortingConstants.DEFAULT_ASCENDING_ICON : SortingConstants.DEFAULT_DESCENDING_ICON;
+    }
+    ngOnInit() {
+        if (!isDefined(this.model))
+            this.model = { active: false, enabled: false, direction: SortingDirection.Ascending };
+        // subscribe to sort changes so we can react when other columns are sorted
+        this._subscription = this.service.sorting$.subscribe(event => {
+            // reset this column's sort direction to hide the sort icons
+            if (this.id != event.id)
+                this.model.direction = SortingDirection.Ascending;
+        });
+    }
+    ngOnDestroy() {
+        this._subscription.unsubscribe();
+    }
+}
+SortingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SortingComponent, deps: [{ token: SortingService }], target: i0.ɵɵFactoryTarget.Component });
+SortingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SortingComponent, selector: "sfc-sorting", inputs: { id: "id", model: "model" }, host: { listeners: { "click": "sort()" }, properties: { "class.enabled": "this.enabled", "class.active": "this.active" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"content\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n    <div *ngIf=\"enabled\" class=\"icons\">\r\n        <fa-icon [icon]=\"icon\"></fa-icon>\r\n    </div>\r\n</div>", styles: [":host{cursor:default;text-overflow:ellipsis;overflow:hidden}:host.enabled{cursor:pointer}:host .container{display:flex;min-width:0}:host .container,:host-context(.sfc-default-theme) :host .container{color:#545e61}:host-context(.sfc-dark-theme) :host .container{color:#fff}:host .container:hover{color:#ffce54}:host .container .content{display:flex;-webkit-user-select:none;user-select:none}:host .container .icons{margin:0 .31em;font-size:.7em;display:flex;align-items:center;transition:all .3s}:host.active .container{color:#ffce54}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SortingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-sorting', template: "<div class=\"container\">\r\n    <div class=\"content\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n    <div *ngIf=\"enabled\" class=\"icons\">\r\n        <fa-icon [icon]=\"icon\"></fa-icon>\r\n    </div>\r\n</div>", styles: [":host{cursor:default;text-overflow:ellipsis;overflow:hidden}:host.enabled{cursor:pointer}:host .container{display:flex;min-width:0}:host .container,:host-context(.sfc-default-theme) :host .container{color:#545e61}:host-context(.sfc-dark-theme) :host .container{color:#fff}:host .container:hover{color:#ffce54}:host .container .content{display:flex;-webkit-user-select:none;user-select:none}:host .container .icons{margin:0 .31em;font-size:.7em;display:flex;align-items:center;transition:all .3s}:host.active .container{color:#ffce54}\n"] }]
+        }], ctorParameters: function () { return [{ type: SortingService }]; }, propDecorators: { id: [{
+                type: Input
+            }], model: [{
+                type: Input
+            }], enabled: [{
+                type: HostBinding,
+                args: [`class.${UIClass.Enabled}`]
+            }], active: [{
+                type: HostBinding,
+                args: [`class.${UIClass.Active}`]
+            }], sort: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+class LoadMoreService {
+    constructor() {
+        this._page = LoadMoreService.START_PAGE;
+        this.moreSubject = new Subject();
+        this.more$ = this.moreSubject.asObservable();
+    }
+    more() {
+        this._page++;
+        this.moreSubject.next(this._page);
+    }
+    reset() {
+        this._page = LoadMoreService.START_PAGE;
+    }
+}
+LoadMoreService.START_PAGE = 1;
+LoadMoreService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LoadMoreService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+LoadMoreService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LoadMoreService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LoadMoreService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+var LoadContainerType;
+(function (LoadContainerType) {
+    LoadContainerType["Dropdown"] = "dropdown";
+    LoadContainerType["Table"] = "table";
+})(LoadContainerType || (LoadContainerType = {}));
+var LoadChangesSource;
+(function (LoadChangesSource) {
+    LoadChangesSource["Parameters"] = "parameters";
+    LoadChangesSource["Data"] = "data";
+})(LoadChangesSource || (LoadChangesSource = {}));
+
+class LoadContainerConstants {
+}
+LoadContainerConstants.DEFAULT_PAGE_SIZE = 5;
+LoadContainerConstants.DEFAULT_NOT_FOUND_LABEL = 'Not found';
+
+class LoadMoreButtonComponent {
+    constructor() {
+        this.DEFAULT_LABEL = 'Show more';
+        this.icon = faChevronCircleDown;
+        this.more = new EventEmitter();
+    }
+    ngOnInit() {
+        if (isNullOrEmptyString(this.label))
+            this.label = this.DEFAULT_LABEL;
+    }
+}
+LoadMoreButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LoadMoreButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+LoadMoreButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: LoadMoreButtonComponent, selector: "sfc-load-more-button", inputs: { label: "label", icon: "icon" }, outputs: { more: "more" }, ngImport: i0, template: "<div class=\"container\">\r\n    <sfc-delimeter></sfc-delimeter>\r\n    <div class=\"button\" (sfcMouseDown)=\"more.emit($event)\">\r\n        <fa-icon [icon]=\"icon\"></fa-icon>\r\n        <span>{{label}}</span>\r\n    </div>\r\n</div>", styles: [":host{cursor:default}:host .container{text-align:center;background-color:#fff}:host .container .button{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;cursor:pointer;transition:color .5s;padding:.5em 0 1em}:host .container .button,:host-context(.sfc-default-theme) :host .container .button{color:#545e61}:host-context(.sfc-dark-theme) :host .container .button{color:#fff}:host .container .button fa-icon{font-size:.7em;margin-right:.31em}:host .container .button span{font-size:.6em;font-weight:700;text-transform:uppercase}:host .container .button:hover{color:#ffce54}\n"], dependencies: [{ kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: MouseDownDirective, selector: "[sfcMouseDown]", inputs: ["button"], outputs: ["sfcMouseDown"] }, { kind: "component", type: DelimeterComponent, selector: "sfc-delimeter", inputs: ["label", "direction"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LoadMoreButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-load-more-button', template: "<div class=\"container\">\r\n    <sfc-delimeter></sfc-delimeter>\r\n    <div class=\"button\" (sfcMouseDown)=\"more.emit($event)\">\r\n        <fa-icon [icon]=\"icon\"></fa-icon>\r\n        <span>{{label}}</span>\r\n    </div>\r\n</div>", styles: [":host{cursor:default}:host .container{text-align:center;background-color:#fff}:host .container .button{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;cursor:pointer;transition:color .5s;padding:.5em 0 1em}:host .container .button,:host-context(.sfc-default-theme) :host .container .button{color:#545e61}:host-context(.sfc-dark-theme) :host .container .button{color:#fff}:host .container .button fa-icon{font-size:.7em;margin-right:.31em}:host .container .button span{font-size:.6em;font-weight:700;text-transform:uppercase}:host .container .button:hover{color:#ffce54}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], more: [{
+                type: Output
+            }] } });
+
+class LoadContainerComponent {
+    constructor(loaderService, loadMoreService) {
+        this.loaderService = loaderService;
+        this.loadMoreService = loadMoreService;
+        this.ComponentSize = ComponentSize;
+        this.Position = Position;
+        this.type = LoadContainerType.Dropdown;
+        this.open = false;
+        this.loadMore = true;
+        this.showEmpty = true;
+        this.showLoadMoreButton = true;
+        this.notFoundLabel = LoadContainerConstants.DEFAULT_NOT_FOUND_LABEL;
+        this.handleError = new EventEmitter();
+        this.handleSuccess = new EventEmitter();
+        this.handleLoading = new EventEmitter();
+        this.next = false;
+        this.empty = false;
+        this._loading = false;
+        // define what source emit changes for data (1. data changes, 2. predicate conditions)
+        this.source = LoadChangesSource.Data;
+    }
+    set model(model) {
+        if (isDefined(model)) {
+            const parameters$ = this.buildParameters(model.predicate$), data$ = isDefined(model.loader) ?
+                this.buildDynamic(parameters$, model.loader) : this.buildStatic(parameters$, model);
+            if (isDefined(this._subscription))
+                this._subscription.unsubscribe();
+            this._subscription = data$.subscribe({
+                next: (result) => this.success(result),
+                error: (error) => this.error(error)
+            });
+        }
+    }
+    get scrollPosition() {
+        return !this.allowLoadMore || this.showLoadMoreButton ? [] : [Position.Bottom];
+    }
+    get allowLoadMore() { return this.next && this.loadMore; }
+    get hideLoadMoreButton() { return !(this.allowLoadMore && this.showLoadMoreButton); }
+    get isEmpty() { return this.empty && this.showEmpty; }
+    set loading(value) {
+        this._loading = value;
+        if (value)
+            this.loaderService.show(this.id, true);
+        else
+            this.loaderService.hide(this.id);
+        this.handleLoading.emit(value);
+    }
+    ngOnDestroy() {
+        if (this._subscription)
+            this._subscription.unsubscribe();
+    }
+    more(event) {
+        event.preventDefault();
+        this.loadMoreService.more();
+    }
+    onScroll() {
+        if (this.allowLoadMore)
+            this.loadMoreService.more();
+    }
+    success(result) {
+        this.next = result.next;
+        this.loading = false;
+        this.empty = !any(result.items);
+        this.handleSuccess.emit(result);
+    }
+    error(error) {
+        this.loading = false;
+        this.empty = false;
+        this.handleError.emit(error);
+    }
+    buildParameters(predicate$) {
+        const parameters$ = (predicate$ || EMPTY.pipe(startWith(null))).pipe(tap((predicateParameters) => {
+            if (predicateParameters)
+                this.resetParameters();
+        }), switchMap((value) => {
+            return this.loadMoreService.more$.pipe(startWith(LoadMoreService.START_PAGE), tap(() => {
+                this.source = LoadChangesSource.Parameters;
+                this.loading = true;
+            }), map((page) => {
+                return { params: value, page: page };
+            }));
+        }));
+        return parameters$;
+    }
+    buildDynamic(parameters$, loader) {
+        return parameters$.pipe(switchMap((parameters) => loader(parameters, this.source).pipe(tap((model) => {
+            if (model.reset) {
+                this.source = LoadChangesSource.Data;
+                this.resetParameters();
+            }
+        }))));
+    }
+    buildStatic(parameters$, model) {
+        const data$ = (model.data$ || of([])).pipe(tap(_ => this.source = LoadChangesSource.Data));
+        return combineLatest([parameters$, data$]).pipe(map(([parameters, items]) => {
+            const reset = this.source == LoadChangesSource.Data;
+            if (reset && parameters.page != LoadMoreService.START_PAGE) {
+                // if data changed need to start from start
+                this.resetParameters();
+                parameters = { params: parameters.params, page: 1 };
+            }
+            const filtered = model.filter ? model.filter(items, parameters) : items, size = model.size || LoadContainerConstants.DEFAULT_PAGE_SIZE, data = filtered ? {
+                items: skip(filtered, parameters.page, size),
+                next: parameters.page < Math.ceil(filtered.length / size),
+                reset
+            } : { items: [], next: false, reset };
+            return data;
+        }));
+    }
+    resetParameters() {
+        if (isDefined(this.contentEl))
+            this.contentEl.nativeElement.scrollTop = 0;
+        this.loadMoreService.reset();
+    }
+}
+LoadContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LoadContainerComponent, deps: [{ token: LoaderService }, { token: LoadMoreService }], target: i0.ɵɵFactoryTarget.Component });
+LoadContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: LoadContainerComponent, selector: "sfc-load-container", inputs: { id: "id", type: "type", open: "open", loadMore: "loadMore", showEmpty: "showEmpty", showLoadMoreButton: "showLoadMoreButton", loadMoreLabel: "loadMoreLabel", notFoundLabel: "notFoundLabel", model: "model", scrollTarget: "scrollTarget" }, outputs: { handleError: "handleError", handleSuccess: "handleSuccess", handleLoading: "handleLoading" }, host: { properties: { "class": "this.type", "class.open": "this.open", "class.empty": "this.isEmpty", "class.loading": "this._loading" } }, providers: [LoadMoreService], viewQueries: [{ propertyName: "contentEl", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: "<div class=\"container\">\r\n    <sfc-bounce-loader [id]=\"id\" [sfcComponentSize]=\"ComponentSize.Small\"></sfc-bounce-loader>\r\n    <div #content class=\"content\" [sfcScrollIntoView]=\"scrollTarget\" (sfcScrollTracker)=\"onScroll()\" [positions]=\"scrollPosition\">\r\n        <ng-content></ng-content>\r\n        <div (sfcMouseDown)=\"$event.preventDefault()\">\r\n            <sfc-load-more-button [hidden]=\"hideLoadMoreButton\" (more)=\"more($event)\" [label]=\"loadMoreLabel\">\r\n            </sfc-load-more-button>\r\n            <div *ngIf=\"isEmpty\" class=\"empty\">{{notFoundLabel}}</div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{width:100%;height:inherit;position:relative}:host .container{height:inherit}:host .container .content{cursor:initial;overflow-y:auto;height:inherit}:host .container .content,:host-context(.sfc-default-theme) :host .container .content{background:#fff}:host-context(.sfc-dark-theme) :host .container .content{background:#fff}:host .container .content sfc-load-more-button ::ng-deep .container ::ng-deep sfc-delimeter.horizontal:before,:host-context(.sfc-default-theme) :host .container .content sfc-load-more-button ::ng-deep .container ::ng-deep sfc-delimeter.horizontal:before{border-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host-context(.sfc-dark-theme) :host .container .content sfc-load-more-button ::ng-deep .container ::ng-deep sfc-delimeter.horizontal:before{border-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host .container .content sfc-load-more-button ::ng-deep .container ::ng-deep sfc-delimeter.horizontal:after,:host-context(.sfc-default-theme) :host .container .content sfc-load-more-button ::ng-deep .container ::ng-deep sfc-delimeter.horizontal:after{border-image:linear-gradient(to left,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host-context(.sfc-dark-theme) :host .container .content sfc-load-more-button ::ng-deep .container ::ng-deep sfc-delimeter.horizontal:after{border-image:linear-gradient(to left,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host .container .content sfc-load-more-button ::ng-deep .container .button,:host-context(.sfc-default-theme) :host .container .content sfc-load-more-button ::ng-deep .container .button{color:#545e61}:host-context(.sfc-dark-theme) :host .container .content sfc-load-more-button ::ng-deep .container .button{color:#545e61}:host .container .content sfc-load-more-button ::ng-deep .container .button:hover{color:#ffce54}:host .container .content .empty{display:flex;align-items:center;justify-content:center;color:#545e61;cursor:default;height:100%;font-size:.8em;-webkit-user-select:none;user-select:none;padding:.7em}:host.dropdown .container .content{display:none;opacity:0;max-height:12.5em;box-shadow:0 .125em .125em #00000024,0 .18em .06em -.125em #0000001f,0 .06em .31em #0003}:host.dropdown.open .container .content{display:block;opacity:1}:host ::ng-deep ::-webkit-scrollbar{width:.375em;height:.375em}:host ::ng-deep ::-webkit-scrollbar-track{border-radius:.625em;background:#e9e9e9}:host ::ng-deep ::-webkit-scrollbar-thumb{border-radius:.625em;background:rgba(0,0,0,.2)}:host ::ng-deep ::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.4)}:host ::ng-deep ::-webkit-scrollbar-thumb:active{background:rgba(0,0,0,.6)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: MouseDownDirective, selector: "[sfcMouseDown]", inputs: ["button"], outputs: ["sfcMouseDown"] }, { kind: "directive", type: ComponentSizeDirective, selector: "[sfcComponentSize]", inputs: ["sfcComponentSize", "customSize"] }, { kind: "directive", type: ScrollTrackerDirective, selector: "[sfcScrollTracker]", inputs: ["positions"], outputs: ["sfcScrollTracker"] }, { kind: "directive", type: ScrollIntoViewDirective, selector: "[sfcScrollIntoView]", inputs: ["sfcScrollIntoView", "local", "options"] }, { kind: "component", type: LoadMoreButtonComponent, selector: "sfc-load-more-button", inputs: ["label", "icon"], outputs: ["more"] }, { kind: "component", type: BounceLoaderComponent, selector: "sfc-bounce-loader" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LoadContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-load-container', providers: [LoadMoreService], template: "<div class=\"container\">\r\n    <sfc-bounce-loader [id]=\"id\" [sfcComponentSize]=\"ComponentSize.Small\"></sfc-bounce-loader>\r\n    <div #content class=\"content\" [sfcScrollIntoView]=\"scrollTarget\" (sfcScrollTracker)=\"onScroll()\" [positions]=\"scrollPosition\">\r\n        <ng-content></ng-content>\r\n        <div (sfcMouseDown)=\"$event.preventDefault()\">\r\n            <sfc-load-more-button [hidden]=\"hideLoadMoreButton\" (more)=\"more($event)\" [label]=\"loadMoreLabel\">\r\n            </sfc-load-more-button>\r\n            <div *ngIf=\"isEmpty\" class=\"empty\">{{notFoundLabel}}</div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{width:100%;height:inherit;position:relative}:host .container{height:inherit}:host .container .content{cursor:initial;overflow-y:auto;height:inherit}:host .container .content,:host-context(.sfc-default-theme) :host .container .content{background:#fff}:host-context(.sfc-dark-theme) :host .container .content{background:#fff}:host .container .content sfc-load-more-button ::ng-deep .container ::ng-deep sfc-delimeter.horizontal:before,:host-context(.sfc-default-theme) :host .container .content sfc-load-more-button ::ng-deep .container ::ng-deep sfc-delimeter.horizontal:before{border-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host-context(.sfc-dark-theme) :host .container .content sfc-load-more-button ::ng-deep .container ::ng-deep sfc-delimeter.horizontal:before{border-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host .container .content sfc-load-more-button ::ng-deep .container ::ng-deep sfc-delimeter.horizontal:after,:host-context(.sfc-default-theme) :host .container .content sfc-load-more-button ::ng-deep .container ::ng-deep sfc-delimeter.horizontal:after{border-image:linear-gradient(to left,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host-context(.sfc-dark-theme) :host .container .content sfc-load-more-button ::ng-deep .container ::ng-deep sfc-delimeter.horizontal:after{border-image:linear-gradient(to left,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host .container .content sfc-load-more-button ::ng-deep .container .button,:host-context(.sfc-default-theme) :host .container .content sfc-load-more-button ::ng-deep .container .button{color:#545e61}:host-context(.sfc-dark-theme) :host .container .content sfc-load-more-button ::ng-deep .container .button{color:#545e61}:host .container .content sfc-load-more-button ::ng-deep .container .button:hover{color:#ffce54}:host .container .content .empty{display:flex;align-items:center;justify-content:center;color:#545e61;cursor:default;height:100%;font-size:.8em;-webkit-user-select:none;user-select:none;padding:.7em}:host.dropdown .container .content{display:none;opacity:0;max-height:12.5em;box-shadow:0 .125em .125em #00000024,0 .18em .06em -.125em #0000001f,0 .06em .31em #0003}:host.dropdown.open .container .content{display:block;opacity:1}:host ::ng-deep ::-webkit-scrollbar{width:.375em;height:.375em}:host ::ng-deep ::-webkit-scrollbar-track{border-radius:.625em;background:#e9e9e9}:host ::ng-deep ::-webkit-scrollbar-thumb{border-radius:.625em;background:rgba(0,0,0,.2)}:host ::ng-deep ::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.4)}:host ::ng-deep ::-webkit-scrollbar-thumb:active{background:rgba(0,0,0,.6)}\n"] }]
+        }], ctorParameters: function () { return [{ type: LoaderService }, { type: LoadMoreService }]; }, propDecorators: { id: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class']
+            }], open: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: [`class.${UIClass.Open}`]
+            }], loadMore: [{
+                type: Input
+            }], showEmpty: [{
+                type: Input
+            }], showLoadMoreButton: [{
+                type: Input
+            }], loadMoreLabel: [{
+                type: Input
+            }], notFoundLabel: [{
+                type: Input
+            }], model: [{
+                type: Input
+            }], scrollTarget: [{
+                type: Input
+            }], handleError: [{
+                type: Output
+            }], handleSuccess: [{
+                type: Output
+            }], handleLoading: [{
+                type: Output
+            }], contentEl: [{
+                type: ViewChild,
+                args: ['content']
+            }], isEmpty: [{
+                type: HostBinding,
+                args: [`class.${UIClass.Empty}`]
+            }], _loading: [{
+                type: HostBinding,
+                args: [`class.${UIClass.Loading}`]
+            }] } });
+
+class IconComponent {
+    get showImage() {
+        return !isNullOrEmptyString(this.imageSrc) && !isDefined(this.icon);
+    }
+}
+IconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+IconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: IconComponent, selector: "sfc-icon", inputs: { icon: "icon", imageSrc: "imageSrc" }, ngImport: i0, template: "<div class=\"container\">\r\n    <fa-icon *ngIf=\"icon\" [icon]=\"icon\"></fa-icon>\r\n    <img *ngIf=\"showImage\" [src]=\"imageSrc\">\r\n</div>", styles: [":host{display:inline-block}:host .container{display:flex;align-items:center;justify-content:center}:host .container img{max-width:1.3em}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: IconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-icon', template: "<div class=\"container\">\r\n    <fa-icon *ngIf=\"icon\" [icon]=\"icon\"></fa-icon>\r\n    <img *ngIf=\"showImage\" [src]=\"imageSrc\">\r\n</div>", styles: [":host{display:inline-block}:host .container{display:flex;align-items:center;justify-content:center}:host .container img{max-width:1.3em}\n"] }]
+        }], propDecorators: { icon: [{
+                type: Input
+            }], imageSrc: [{
+                type: Input
+            }] } });
+
+class NgxSfcCommonModule {
+}
+NgxSfcCommonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NgxSfcCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NgxSfcCommonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: NgxSfcCommonModule, declarations: [
+        // directives
+        ClickOutsideDirective,
+        ShowHideElementDirective,
+        IfDirective,
+        ThrowElementOnHoverDirective,
+        TemplateReferenceDirective,
+        MouseDownDirective,
+        ComponentSizeDirective,
+        DestroyParentDirective,
+        DomChangesDirective,
+        ScrollTrackerDirective,
+        ScrollIntoViewDirective,
+        ImageLoadDirective,
+        // components
+        ButtonComponent,
+        TooltipComponent,
+        DelimeterComponent,
+        ToggleSwitcherComponent,
+        CheckmarkComponent,
+        TemplateContentComponent,
+        CloseComponent,
+        HamburgerComponent,
+        HamburgerMenuComponent,
+        DotsComponent,
+        PaginationComponent,
+        SortingComponent,
+        LoadMoreButtonComponent,
+        LoadContainerComponent,
+        IconComponent,
+        // loaders
+        BounceLoaderComponent,
+        CircleLoaderComponent,
+        // modal
+        ModalComponent,
+        ModalOpenDirective,
+        ModalOpenOnClickDirective,
+        DefaultModalHeaderComponent,
+        DefaultModalFooterComponent,
+        // pipes
+        SwitchMultiCasePipe], imports: [CommonModule,
+        FontAwesomeModule], exports: [
+        // directives
+        ClickOutsideDirective,
+        ShowHideElementDirective,
+        IfDirective,
+        ThrowElementOnHoverDirective,
+        TemplateReferenceDirective,
+        MouseDownDirective,
+        ComponentSizeDirective,
+        DestroyParentDirective,
+        DomChangesDirective,
+        ScrollTrackerDirective,
+        ScrollIntoViewDirective,
+        ImageLoadDirective,
+        // components
+        ButtonComponent,
+        TooltipComponent,
+        DelimeterComponent,
+        CloseComponent,
+        CheckmarkComponent,
+        TemplateContentComponent,
+        ToggleSwitcherComponent,
+        DotsComponent,
+        HamburgerComponent,
+        HamburgerMenuComponent,
+        PaginationComponent,
+        SortingComponent,
+        LoadMoreButtonComponent,
+        LoadContainerComponent,
+        IconComponent,
+        // loaders
+        BounceLoaderComponent,
+        CircleLoaderComponent,
+        // modal
+        ModalComponent,
+        ModalOpenDirective,
+        ModalOpenOnClickDirective,
+        DefaultModalHeaderComponent,
+        DefaultModalFooterComponent,
+        // pipes
+        SwitchMultiCasePipe] });
+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: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        // directives
+                        ClickOutsideDirective,
+                        ShowHideElementDirective,
+                        IfDirective,
+                        ThrowElementOnHoverDirective,
+                        TemplateReferenceDirective,
+                        MouseDownDirective,
+                        ComponentSizeDirective,
+                        DestroyParentDirective,
+                        DomChangesDirective,
+                        ScrollTrackerDirective,
+                        ScrollIntoViewDirective,
+                        ImageLoadDirective,
+                        // components
+                        ButtonComponent,
+                        TooltipComponent,
+                        DelimeterComponent,
+                        ToggleSwitcherComponent,
+                        CheckmarkComponent,
+                        TemplateContentComponent,
+                        CloseComponent,
+                        HamburgerComponent,
+                        HamburgerMenuComponent,
+                        DotsComponent,
+                        PaginationComponent,
+                        SortingComponent,
+                        LoadMoreButtonComponent,
+                        LoadContainerComponent,
+                        IconComponent,
+                        // loaders
+                        BounceLoaderComponent,
+                        CircleLoaderComponent,
+                        // modal
+                        ModalComponent,
+                        ModalOpenDirective,
+                        ModalOpenOnClickDirective,
+                        DefaultModalHeaderComponent,
+                        DefaultModalFooterComponent,
+                        // pipes
+                        SwitchMultiCasePipe
+                    ],
+                    imports: [
+                        CommonModule,
+                        FontAwesomeModule
+                    ],
+                    exports: [
+                        // directives
+                        ClickOutsideDirective,
+                        ShowHideElementDirective,
+                        IfDirective,
+                        ThrowElementOnHoverDirective,
+                        TemplateReferenceDirective,
+                        MouseDownDirective,
+                        ComponentSizeDirective,
+                        DestroyParentDirective,
+                        DomChangesDirective,
+                        ScrollTrackerDirective,
+                        ScrollIntoViewDirective,
+                        ImageLoadDirective,
+                        // components
+                        ButtonComponent,
+                        TooltipComponent,
+                        DelimeterComponent,
+                        CloseComponent,
+                        CheckmarkComponent,
+                        TemplateContentComponent,
+                        ToggleSwitcherComponent,
+                        DotsComponent,
+                        HamburgerComponent,
+                        HamburgerMenuComponent,
+                        PaginationComponent,
+                        SortingComponent,
+                        LoadMoreButtonComponent,
+                        LoadContainerComponent,
+                        IconComponent,
+                        // loaders
+                        BounceLoaderComponent,
+                        CircleLoaderComponent,
+                        // modal
+                        ModalComponent,
+                        ModalOpenDirective,
+                        ModalOpenOnClickDirective,
+                        DefaultModalHeaderComponent,
+                        DefaultModalFooterComponent,
+                        // pipes
+                        SwitchMultiCasePipe
+                    ],
+                    providers: [DOCUMENT_PROVIDERS, WINDOW_PROVIDERS]
+                }]
+        }] });
+
+/*
+ * Public API Surface of ngx-sfc-common
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BounceLoaderComponent, BrowserDocumentRef, BrowserWindowRef, ButtonComponent, ButtonType, CheckmarkComponent, CheckmarkType, CircleLoaderComponent, CircleLoaderType, ClickOutsideDirective, CloseComponent, CommonConstants, ComponentSize, ComponentSizeDirective, DOCUMENT, DOCUMENT_PROVIDERS, DateTimeConstants, DefaultModalFooterComponent, DefaultModalHeaderComponent, DelimeterComponent, DestroyParentDirective, Direction, DocumentRef, DomChangesDirective, DotsComponent, HamburgerComponent, HamburgerMenuComponent, IconComponent, IfDirective, ImageLoadDirective, ImageLoadService, LoadChangesSource, LoadContainerComponent, LoadContainerType, LoadMoreButtonComponent, LoaderService, MediaLimits, ModalComponent, ModalOpenDirective, ModalOpenOnClickDirective, ModalService, ModalTemplate, MouseDownDirective, NgxSfcCommonModule, PaginationComponent, PaginationService, Position, ResizeService, ScrollIntoViewDirective, ScrollTrackerDirective, Sequence, ShowHideElementDirective, SortingComponent, SortingDirection, SortingService, SwitchMultiCasePipe, TemplateContentComponent, TemplateReferenceDirective, Theme, ThrowElementOnHoverDirective, ToggleSwitcherComponent, TooltipComponent, TooltipType, UIClass, UIConstants, WINDOW, WINDOW_PROVIDERS, WindowRef, addClasses, addItem, addPropertyToObject, all, any, browserDocumentProvider, browserWindowProvider, contains, count, distinct, documentFactory, documentProvider, firstItem, firstOrDefault, getCalcValue, getCollectionOrEmpty, getCssLikeValue, getFileExtension, getFirstDayOfMonth, getFirstDayOfMonthByYearAndMonth, getFirstDayOfYear, getLastDayOfMonth, getLastDayOfMonthByYearAndMonth, getLastDayOfYear, getNextDate, getNextMonth, getNextYear, getPreviousMonth, getPreviousYear, getRotateValue, getValueFromCssLikeValue, getWeeksNumberInMonth, hasItem, hasItemBy, hasObjectItem, hexToRgb, isAsyncData, isChromeBrowser, isDateGreat, isDateGreatOrEqual, isDateTimeGreat, isDateTimeGreatOrEqual, isDefined, isEmail, isEqual, isEqualDateTimes, isEqualDates, isImage, isNullOrEmptyString, isNumeric, isObject, lastItem, max, mergeDeep, nameof, parseBoolean, parseFileSize, readAsDataURL, remove, removeClasses, removeItem, removeItemBy, removePropertyFromObject, replaceRgbOpacity, rgbToHex, setDay, setDefaultSecondsAndMiliseconds, setHours, setMilliseconds, setMinutes, setSeconds, setYear, skip, sort, sortBy, sortByPath, sum, trim, updateItemBy, where, windowFactory, windowProvider };
+//# sourceMappingURL=ngx-sfc-common.mjs.map
+//# sourceMappingURL=ngx-sfc-common.mjs.map