ngx-sfc-common 0.0.1

package/fesm2015/ngx-sfc-common.mjs

@@ -0,0 +1,1908 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, Injectable, PLATFORM_ID, EventEmitter, Directive, Inject, Input, Output, HostListener, Component, HostBinding, ContentChildren, NgModule } from '@angular/core';
+import * as i1$1 from '@angular/common';
+import { isPlatformBrowser, CommonModule } from '@angular/common';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { Subject, fromEvent, Observable, startWith, BehaviorSubject, filter, distinctUntilChanged, map, EMPTY } from 'rxjs';
+import * as i1 from '@angular/platform-browser';
+import { trigger, state, style, transition, group, query, animate, animateChild } from '@angular/animations';
+
+/**
+ * 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: "13.2.6", ngImport: i0, type: BrowserDocumentRef, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+BrowserDocumentRef.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: BrowserDocumentRef });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: BrowserDocumentRef, decorators: [{
+            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: '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: "13.2.6", ngImport: i0, type: BrowserWindowRef, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+BrowserWindowRef.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: BrowserWindowRef });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: BrowserWindowRef, decorators: [{
+            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: "13.2.6", ngImport: i0, type: ResizeService, deps: [{ token: i1.EventManager }], target: i0.ɵɵFactoryTarget.Injectable });
+ResizeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ResizeService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ResizeService, decorators: [{
+            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();
+    }
+    ngOnInit() {
+        this._clickSubscription = fromEvent(this.document, 'click')
+            .subscribe(event => {
+            this.onClick(event);
+        });
+    }
+    ngOnDestroy() {
+        var _a;
+        (_a = this._clickSubscription) === null || _a === void 0 ? void 0 : _a.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: "13.2.6", ngImport: i0, type: ClickOutsideDirective, deps: [{ token: i0.ElementRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive });
+ClickOutsideDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: ClickOutsideDirective, selector: "[sfcClickOutside]", inputs: { listening: ["sfcClickOutside", "listening"] }, outputs: { action: "action" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ClickOutsideDirective, decorators: [{
+            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;
+
+class DateTimeConstants {
+}
+DateTimeConstants.DAYS_IN_WEEK = 7;
+DateTimeConstants.HOURS_IN_SHORT_TIME = 12;
+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_VISIBILITY_VISIBLE = 'visible';
+UIConstants.CSS_VISIBILITY_HIDDEN = 'hidden';
+UIConstants.DEFAULT_THEME = 'sfc-default-theme';
+UIConstants.DARK_THEME = 'sfc-dark-theme';
+UIConstants.CSS_WIDTH = 'width';
+UIConstants.CSS_LEFT = 'left';
+UIConstants.CSS_CLASS_FIXED = 'fixed';
+UIConstants.CSS_CLASS_BACKGROUND = 'background';
+UIConstants.CSS_CLASS_TOP = 'top';
+
+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: "13.2.6", ngImport: i0, type: ShowHideElementDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+ShowHideElementDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: ShowHideElementDirective, selector: "[sfcShowHideElement]", inputs: { showHideElement: ["sfcShowHideElement", "showHideElement"], delay: "delay" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ShowHideElementDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[sfcShowHideElement]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { showHideElement: [{
+                type: Input,
+                args: ['sfcShowHideElement']
+            }], delay: [{
+                type: Input
+            }] } });
+
+/**
+ * Return true if value defined
+ * @param value Value to check
+ * @returns True if value is not null and defined
+ */
+function isDefined(value) {
+    return value !== undefined && value !== null;
+}
+/**
+ * Return true if value is object
+ * @param value Value to check
+ * @returns True if value is object
+ */
+function isObject(value) {
+    return (isDefined(value) && typeof value === 'object' && !Array.isArray(value));
+}
+/**
+ * Return true if data is observable
+ * @param data Object to check
+ * @returns True if data is observable
+ */
+function isAsyncData(data) {
+    return data instanceof Observable;
+}
+/**
+ * Return extended object with new property
+ * @param obj Object to extend by property
+ * @param property New property name
+ * @param value Value for new property
+ * @returns Extended object with new property
+ */
+function addPropertyToObject(obj, property, value = null) {
+    if (!isDefined(property) && !obj.hasOwnProperty(property)) {
+        let newObj = {};
+        newObj[property] = value;
+        obj = Object.assign(Object.assign({}, 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 (!isDefined(sources))
+        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;
+
+/**
+ * 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, '');
+}
+
+/**
+ * Set minutes for date
+ * @param date Date value
+ * @param minute Minute value
+ * @returns Date with minute value
+ */
+function setMinutes(date, minute) {
+    date.setMinutes(minute);
+    return new Date(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes());
+}
+/**
+ * Set hours for date
+ * @param date Date value
+ * @param hour Hour value
+ * @returns Date with hour value
+ */
+function setHours(date, hour) {
+    date.setHours(hour);
+    return new Date(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes());
+}
+/**
+ * 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) {
+    date.setFullYear(year);
+    return new Date(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes());
+}
+/**
+ * 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) {
+    date1.setHours(0, 0, 0, 0);
+    date2.setHours(0, 0, 0, 0);
+    return date1.getTime() === date2.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 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);
+    }
+    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 (/\.(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);
+}
+/**
+ * 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));
+    }
+}
+
+/**
+ * Component sizes
+ */
+var ComponentSize;
+(function (ComponentSize) {
+    ComponentSize["Small"] = "small";
+    ComponentSize["Medium"] = "medium";
+    ComponentSize["Large"] = "large";
+    ComponentSize["Custom"] = "custom";
+})(ComponentSize || (ComponentSize = {}));
+/**
+ * Type of sorting
+ */
+var SortingDirection;
+(function (SortingDirection) {
+    SortingDirection["Ascending"] = "ascending";
+    SortingDirection["Descending"] = "descending";
+})(SortingDirection || (SortingDirection = {}));
+/**
+ * UI classes
+ */
+var UIClass;
+(function (UIClass) {
+    UIClass["Active"] = "active";
+    UIClass["Valid"] = "valid";
+    UIClass["Invalid"] = "invalid";
+    UIClass["Enabled"] = "enabled";
+    UIClass["Disabled"] = "disabled";
+    UIClass["Selected"] = "selected";
+    UIClass["Empty"] = "empty";
+    UIClass["Focus"] = "focus";
+    UIClass["Open"] = "open";
+    UIClass["Loading"] = "loading";
+    UIClass["Removed"] = "removed";
+    UIClass["Visible"] = "visible";
+    UIClass["Hidden"] = "hidden";
+    UIClass["Animated"] = "animated";
+    UIClass["Expanded"] = "expanded";
+    UIClass["Fixed"] = "fixed";
+})(UIClass || (UIClass = {}));
+;
+/**
+ * Position directions
+ */
+var Position;
+(function (Position) {
+    Position["Top"] = "top";
+    Position["Bottom"] = "bottom";
+    Position["Left"] = "left";
+    Position["Right"] = "right";
+})(Position || (Position = {}));
+/**
+ * CSS Media limits
+ */
+var MediaLimits;
+(function (MediaLimits) {
+    MediaLimits[MediaLimits["Laptop"] = 1200] = "Laptop";
+    MediaLimits[MediaLimits["Tablet"] = 767] = "Tablet";
+    MediaLimits[MediaLimits["Phone"] = 430] = "Phone";
+})(MediaLimits || (MediaLimits = {}));
+/**
+ * Direction types
+ */
+var Direction;
+(function (Direction) {
+    Direction["Horizontal"] = "horizontal";
+    Direction["Vertical"] = "vertical";
+})(Direction || (Direction = {}));
+
+/**
+ * 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 === null || collection === void 0 ? void 0 : 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 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;
+}
+/**
+ * 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 by predicate
+ * @param collection Array of items
+ * @param predicate Function to define remove logic
+ * @returns True if successfully removed
+ */
+function removeItem(collection, predicate) {
+    const foundItem = firstOrDefault(collection, predicate);
+    if (isDefined(foundItem)) {
+        collection.splice(collection.indexOf(foundItem), 1);
+        return true;
+    }
+    return false;
+}
+function updateItem(collection, predicate, newItem) {
+    const itemIndex = collection.findIndex(predicate);
+    if (itemIndex !== CommonConstants.NOT_FOUND_INDEX) {
+        const result = collection.slice(0);
+        result[itemIndex] = Object.assign(Object.assign({}, 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: "13.2.6", ngImport: i0, type: ThrowElementOnHoverDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+ThrowElementOnHoverDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: ThrowElementOnHoverDirective, selector: "[sfcThrowElementOnHover]", inputs: { throwValue: ["sfcThrowElementOnHover", "throwValue"] }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ThrowElementOnHoverDirective, decorators: [{
+            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: "13.2.6", ngImport: i0, type: TemplateReferenceDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+TemplateReferenceDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: TemplateReferenceDirective, selector: "[sfcTemplateReference]", inputs: { templateName: ["sfcTemplateReference", "templateName"] }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: TemplateReferenceDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[sfcTemplateReference]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; }, propDecorators: { templateName: [{
+                type: Input,
+                args: ['sfcTemplateReference']
+            }] } });
+
+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: "13.2.6", ngImport: i0, type: MouseDownDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+MouseDownDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: MouseDownDirective, selector: "[sfcMouseDown]", inputs: { button: "button" }, outputs: { action: "sfcMouseDown" }, host: { listeners: { "mousedown": "onMouseDown($event)" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MouseDownDirective, decorators: [{
+            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.style.fontSize = this.getSizeValue(this.size);
+    }
+    set size(value) {
+        this.style.fontSize = this.getSizeValue(value);
+    }
+    set customSize(value) {
+        this.style.fontSize = getCssLikeValue(value, UIConstants.CSS_EM);
+    }
+    get style() {
+        return this.el.nativeElement.style;
+    }
+    getSizeValue(value) {
+        switch (value) {
+            case ComponentSize.Small:
+                return getCssLikeValue(0.5, UIConstants.CSS_EM);
+            case ComponentSize.Medium:
+                return getCssLikeValue(1, UIConstants.CSS_EM);
+            case ComponentSize.Large:
+                return getCssLikeValue(2, UIConstants.CSS_EM);
+            default:
+                return getCssLikeValue(1, UIConstants.CSS_EM);
+        }
+    }
+}
+ComponentSizeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ComponentSizeDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+ComponentSizeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: ComponentSizeDirective, selector: "[sfcComponentSize]", inputs: { size: ["sfcComponentSize", "size"], customSize: "customSize" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ComponentSizeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[sfcComponentSize]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { size: [{
+                type: Input,
+                args: ['sfcComponentSize']
+            }], customSize: [{
+                type: Input
+            }] } });
+
+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.text = this.BUTTON_DEFAULT_TEXT;
+        this.disabled = false;
+        this.types = [ButtonType.Bordered];
+    }
+    get classes() {
+        const classes = {};
+        if (this.disabled)
+            classes[UIClass.Disabled] = true;
+        distinct(this.types).forEach(type => classes[type] = true);
+        return classes;
+    }
+}
+ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.6", type: ButtonComponent, selector: "sfc-button", inputs: { text: "text", iconBefore: "iconBefore", iconAfter: "iconAfter", disabled: "disabled", types: "types" }, ngImport: i0, template: "<a class=\"button\" [ngClass]=\"classes\">\r\n    <i *ngIf=\"iconBefore\" class=\"icon before\" [ngClass]=\"iconBefore\"></i>\r\n    <span class=\"text\">{{text}}</span>\r\n    <i *ngIf=\"iconAfter\" class=\"icon after\" [ngClass]=\"iconAfter\"></i>\r\n</a>", styles: [":host-context(.sfc-default-theme) .button.texted:not(:hover):not(.disabled){color:#545e61}:host-context(.sfc-dark-theme) .button.texted:not(:hover):not(.disabled){color:#ccd1d9}.button.bordered{border:solid 2px}:host-context(.sfc-default-theme) .button.bordered:not(:hover):not(.disabled){color:#545e61}:host-context(.sfc-dark-theme) .button.bordered:not(:hover):not(.disabled){color:#ccd1d9}:host-context(.sfc-default-theme) .button.bordered:not(:hover):not(.disabled){border-color:#545e61}:host-context(.sfc-dark-theme) .button.bordered:not(:hover):not(.disabled){border-color:#ccd1d9}.button.filled{color:#fff!important;border-color:#545e61;background:#545e61}.button.filled:hover{color:#fff!important;border-color:#aab2bd;background:#aab2bd}.button.filled.disabled{color:#fff!important;border-color:#bdbdbd;background:#bdbdbd}.button.rounded{border:solid 2px;border-radius:20px;padding:.4em 1.2em}:host-context(.sfc-default-theme) .button.rounded:not(:hover):not(.disabled){color:#545e61}:host-context(.sfc-dark-theme) .button.rounded:not(:hover):not(.disabled){color:#ccd1d9}:host-context(.sfc-default-theme) .button.rounded:not(:hover):not(.disabled){border-color:#545e61}:host-context(.sfc-dark-theme) .button.rounded:not(:hover):not(.disabled){border-color:#ccd1d9}.button.circled{border:solid 2px;width:5em;height:5em;border-radius:50%}:host-context(.sfc-default-theme) .button.circled:not(:hover):not(.disabled){color:#545e61}:host-context(.sfc-dark-theme) .button.circled:not(:hover):not(.disabled){color:#ccd1d9}:host-context(.sfc-default-theme) .button.circled:not(:hover):not(.disabled){border-color:#545e61}:host-context(.sfc-dark-theme) .button.circled:not(:hover):not(.disabled){border-color:#ccd1d9}.button.circled .text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host{display:inline-block;font-size:1em}.button{box-sizing:border-box;display:inline-flex;justify-content:center;flex-wrap:wrap;align-items:center;overflow:hidden;text-align:center;text-decoration:none;white-space:nowrap;font-size:.8em;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .5s ease,border-color .5s ease,background .5s ease}.button:hover{color:#2bbbad;border-color:#2bbbad}.button.disabled{pointer-events:none}:host-context(.sfc-default-theme) .button.disabled{color:#bdbdbd}:host-context(.sfc-dark-theme) .button.disabled{color:#656d78}:host-context(.sfc-default-theme) .button.disabled{border-color:#bdbdbd}:host-context(.sfc-dark-theme) .button.disabled{border-color:#656d78}.button .icon{padding:3px}.button .text{padding:3px;white-space:initial}.button .text:empty{display:none}\n"], directives: [{ type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-button', template: "<a class=\"button\" [ngClass]=\"classes\">\r\n    <i *ngIf=\"iconBefore\" class=\"icon before\" [ngClass]=\"iconBefore\"></i>\r\n    <span class=\"text\">{{text}}</span>\r\n    <i *ngIf=\"iconAfter\" class=\"icon after\" [ngClass]=\"iconAfter\"></i>\r\n</a>", styles: [":host-context(.sfc-default-theme) .button.texted:not(:hover):not(.disabled){color:#545e61}:host-context(.sfc-dark-theme) .button.texted:not(:hover):not(.disabled){color:#ccd1d9}.button.bordered{border:solid 2px}:host-context(.sfc-default-theme) .button.bordered:not(:hover):not(.disabled){color:#545e61}:host-context(.sfc-dark-theme) .button.bordered:not(:hover):not(.disabled){color:#ccd1d9}:host-context(.sfc-default-theme) .button.bordered:not(:hover):not(.disabled){border-color:#545e61}:host-context(.sfc-dark-theme) .button.bordered:not(:hover):not(.disabled){border-color:#ccd1d9}.button.filled{color:#fff!important;border-color:#545e61;background:#545e61}.button.filled:hover{color:#fff!important;border-color:#aab2bd;background:#aab2bd}.button.filled.disabled{color:#fff!important;border-color:#bdbdbd;background:#bdbdbd}.button.rounded{border:solid 2px;border-radius:20px;padding:.4em 1.2em}:host-context(.sfc-default-theme) .button.rounded:not(:hover):not(.disabled){color:#545e61}:host-context(.sfc-dark-theme) .button.rounded:not(:hover):not(.disabled){color:#ccd1d9}:host-context(.sfc-default-theme) .button.rounded:not(:hover):not(.disabled){border-color:#545e61}:host-context(.sfc-dark-theme) .button.rounded:not(:hover):not(.disabled){border-color:#ccd1d9}.button.circled{border:solid 2px;width:5em;height:5em;border-radius:50%}:host-context(.sfc-default-theme) .button.circled:not(:hover):not(.disabled){color:#545e61}:host-context(.sfc-dark-theme) .button.circled:not(:hover):not(.disabled){color:#ccd1d9}:host-context(.sfc-default-theme) .button.circled:not(:hover):not(.disabled){border-color:#545e61}:host-context(.sfc-dark-theme) .button.circled:not(:hover):not(.disabled){border-color:#ccd1d9}.button.circled .text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host{display:inline-block;font-size:1em}.button{box-sizing:border-box;display:inline-flex;justify-content:center;flex-wrap:wrap;align-items:center;overflow:hidden;text-align:center;text-decoration:none;white-space:nowrap;font-size:.8em;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .5s ease,border-color .5s ease,background .5s ease}.button:hover{color:#2bbbad;border-color:#2bbbad}.button.disabled{pointer-events:none}:host-context(.sfc-default-theme) .button.disabled{color:#bdbdbd}:host-context(.sfc-dark-theme) .button.disabled{color:#656d78}:host-context(.sfc-default-theme) .button.disabled{border-color:#bdbdbd}:host-context(.sfc-dark-theme) .button.disabled{border-color:#656d78}.button .icon{padding:3px}.button .text{padding:3px;white-space:initial}.button .text:empty{display:none}\n"] }]
+        }], propDecorators: { text: [{
+                type: Input
+            }], iconBefore: [{
+                type: Input
+            }], iconAfter: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], 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() {
+        var _a;
+        (_a = this._resizeSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+    }
+}
+TooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: TooltipComponent, deps: [{ token: ResizeService }, { token: WINDOW }], target: i0.ɵɵFactoryTarget.Component });
+TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.6", type: TooltipComponent, selector: "[sfc-tooltip]", inputs: { value: ["sfc-tooltip", "value"], tooltipType: "tooltipType", tooltipPosition: "tooltipPosition", tooltipShow: "tooltipShow" }, host: { listeners: { "click": "click()" }, properties: { "attr.value": "this.value", "attr.type": "this.tooltipType", "attr.position": "this.tooltipPosition", "class.show": "this.tooltipShow" } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":host{position:relative}:host:before,:host:after{position:absolute;left:50%;bottom:calc(100% + 5px);pointer-events:none;transition:.2s;will-change:transform}:host:hover:before,:host.show:before{content:attr(value);padding:.4em .7em;font-size:.8em;font-weight:initial;width:inherit;max-width:18.75em;border-radius:6px;background-color:#545e61;box-shadow:0 0 20.25em #0003;color:#fff;text-align:center;white-space:pre-wrap;overflow:hidden;word-wrap:break-word;z-index:9999}:host:after{content:\"\";border-style:solid;transition-duration:0s;transform:translate(-50%) scaleY(0)}:host[type=hover]:before,:host[type=hover]:after,:host:not(.show):before,:host:not(.show):after{visibility:hidden;opacity:0}:host[type=hover]:hover:before,:host[type=hover]:hover:after,:host.show:before,:host.show:after{visibility:visible;opacity:1}:host[type=hover]:hover:before,:host.show:before{transition-delay:.1s}:host[type=hover]:hover:after,:host.show:after{transition-delay:.3s;transition-duration:.2s;transform:translate(-50%) scaleY(1)}:host[position=top]:before,:host[position=top]:after{left:50%;bottom:calc(100% + 5px)}:host[position=top]:before{transform:translate(-50%,-5px) scale(.5)}:host[position=top]:hover:before,:host[position=top].show:before{transform:translate(-50%,-.25em) scale(1)}:host[position=top]:after{border-width:.25em .25em 0;border-color:#545e61 transparent transparent transparent;transform-origin:top}:host[position=left]:before,:host[position=left]:after{left:auto;right:calc(100% + 5px);bottom:50%}:host[position=left]:before{transform:translate(-.25em,50%) scale(.5)}:host[position=left]:hover:before,:host[position=left].show:before{transform:translate(-.31em,50%) scale(1)}:host[position=left]:after{border-width:.25em 0 .25em .25em;border-color:transparent transparent transparent #545e61;transform-origin:left;transform:translateY(50%) scaleX(0)}:host[position=left]:hover:after,:host[position=left].show:after{transform:translateY(50%) scaleX(1)}:host[position=right]:before,:host[position=right]:after{left:calc(100% + 5px);bottom:50%}:host[position=right]:before{transform:translate(5px,50%) scale(.5)}:host[position=right]:hover:before,:host[position=right].show:before{transform:translate(.31em,50%) scale(1)}:host[position=right]:after{border-width:.25em .25em .25em 0;border-color:transparent #545e61 transparent transparent;transform-origin:right;transform:translateY(50%) scaleX(0)}:host[position=right]:hover:after,:host[position=right].show:after{transform:translateY(50%) scaleX(1)}:host[position=bottom]:before,:host[position=bottom]:after{top:calc(100% + 5px);bottom:auto}:host[position=bottom]:before{transform:translate(-50%,5px) scale(.5)}:host[position=bottom]:hover:before,:host[position=bottom].show:before{transform:translate(-50%,.31em) scale(1)}:host[position=bottom]:after{border-width:0 .25em .25em;border-color:transparent transparent #545e61 transparent;transform-origin:bottom}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: TooltipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: '[sfc-tooltip]', template: `<ng-content></ng-content>`, styles: [":host{position:relative}:host:before,:host:after{position:absolute;left:50%;bottom:calc(100% + 5px);pointer-events:none;transition:.2s;will-change:transform}:host:hover:before,:host.show:before{content:attr(value);padding:.4em .7em;font-size:.8em;font-weight:initial;width:inherit;max-width:18.75em;border-radius:6px;background-color:#545e61;box-shadow:0 0 20.25em #0003;color:#fff;text-align:center;white-space:pre-wrap;overflow:hidden;word-wrap:break-word;z-index:9999}:host:after{content:\"\";border-style:solid;transition-duration:0s;transform:translate(-50%) scaleY(0)}:host[type=hover]:before,:host[type=hover]:after,:host:not(.show):before,:host:not(.show):after{visibility:hidden;opacity:0}:host[type=hover]:hover:before,:host[type=hover]:hover:after,:host.show:before,:host.show:after{visibility:visible;opacity:1}:host[type=hover]:hover:before,:host.show:before{transition-delay:.1s}:host[type=hover]:hover:after,:host.show:after{transition-delay:.3s;transition-duration:.2s;transform:translate(-50%) scaleY(1)}:host[position=top]:before,:host[position=top]:after{left:50%;bottom:calc(100% + 5px)}:host[position=top]:before{transform:translate(-50%,-5px) scale(.5)}:host[position=top]:hover:before,:host[position=top].show:before{transform:translate(-50%,-.25em) scale(1)}:host[position=top]:after{border-width:.25em .25em 0;border-color:#545e61 transparent transparent transparent;transform-origin:top}:host[position=left]:before,:host[position=left]:after{left:auto;right:calc(100% + 5px);bottom:50%}:host[position=left]:before{transform:translate(-.25em,50%) scale(.5)}:host[position=left]:hover:before,:host[position=left].show:before{transform:translate(-.31em,50%) scale(1)}:host[position=left]:after{border-width:.25em 0 .25em .25em;border-color:transparent transparent transparent #545e61;transform-origin:left;transform:translateY(50%) scaleX(0)}:host[position=left]:hover:after,:host[position=left].show:after{transform:translateY(50%) scaleX(1)}:host[position=right]:before,:host[position=right]:after{left:calc(100% + 5px);bottom:50%}:host[position=right]:before{transform:translate(5px,50%) scale(.5)}:host[position=right]:hover:before,:host[position=right].show:before{transform:translate(.31em,50%) scale(1)}:host[position=right]:after{border-width:.25em .25em .25em 0;border-color:transparent #545e61 transparent transparent;transform-origin:right;transform:translateY(50%) scaleX(0)}:host[position=right]:hover:after,:host[position=right].show:after{transform:translateY(50%) scaleX(1)}:host[position=bottom]:before,:host[position=bottom]:after{top:calc(100% + 5px);bottom:auto}:host[position=bottom]:before{transform:translate(-50%,5px) scale(.5)}:host[position=bottom]:hover:before,:host[position=bottom].show:before{transform:translate(-50%,.31em) scale(1)}:host[position=bottom]:after{border-width:0 .25em .25em;border-color:transparent transparent #545e61 transparent;transform-origin:bottom}\n"] }]
+        }], 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 {
+}
+DelimeterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: DelimeterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DelimeterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.6", type: DelimeterComponent, selector: "sfc-delimeter", ngImport: i0, template: ``, isInline: true, styles: [":host{width:100%;height:.07em}:host :host-context(.sfc-default-theme){background:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 17%,rgba(0,0,0,.3) 83%,rgba(0,0,0,0) 100%)}:host :host-context(.sfc-dark-theme){background:linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,.4) 17%,rgba(255,255,255,.4) 83%,rgba(255,255,255,0) 100%)}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: DelimeterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-delimeter', template: ``, styles: [":host{width:100%;height:.07em}:host :host-context(.sfc-default-theme){background:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 17%,rgba(0,0,0,.3) 83%,rgba(0,0,0,0) 100%)}:host :host-context(.sfc-dark-theme){background:linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,.4) 17%,rgba(255,255,255,.4) 83%,rgba(255,255,255,0) 100%)}\n"] }]
+        }] });
+
+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 (removeItem(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 === null || loader === void 0 ? void 0 : loader.status) == status)
+            return this.selectLoaderById(id);
+        const updatedLoaders = updateItem(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: "13.2.6", ngImport: i0, type: LoaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+LoaderService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: LoaderService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: LoaderService, decorators: [{
+            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: "13.2.6", ngImport: i0, type: LoaderBaseComponent, deps: [{ token: LoaderService }], target: i0.ɵɵFactoryTarget.Directive });
+LoaderBaseComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: LoaderBaseComponent, inputs: { id: "id", start: "start", background: "background" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: LoaderBaseComponent, decorators: [{
+            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: "13.2.6", ngImport: i0, type: BounceLoaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+BounceLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.6", type: BounceLoaderComponent, selector: "sfc-bounce-loader", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"show$ | async\" class=\"preloader\" [ngClass]=\"preLoaderClasses\">\r\n    <div class=\"spinner\">\r\n        <div class=\"bounce\"></div>\r\n        <div class=\"bounce\"></div>\r\n        <div class=\"bounce\"></div>\r\n    </div>\r\n</div>", styles: [".preloader{position:relative;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center}.preloader.background{opacity:.7}:host-context(.sfc-default-theme) .preloader.background{background-color:#fff}:host-context(.sfc-dark-theme) .preloader.background{background-color:#656d78}.preloader.global{z-index:9999;position:fixed}.preloader.local{z-index:9998;position:absolute}\n", ".spinner{text-align:center}.spinner .bounce{border-radius:100%;display:inline-block;animation:bounce-delay 1.4s infinite ease-in-out both;width:1em;height:1em}:host-context(.sfc-default-theme) .spinner .bounce{background-color:#545e61}:host-context(.sfc-dark-theme) .spinner .bounce{background-color:#fff}.spinner .bounce:nth-child(1){animation-delay:-.32s}.spinner .bounce:nth-child(2){animation-delay:-.16s}@keyframes bounce-delay{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}\n"], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "async": i1$1.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: BounceLoaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-bounce-loader', template: "<div *ngIf=\"show$ | async\" class=\"preloader\" [ngClass]=\"preLoaderClasses\">\r\n    <div class=\"spinner\">\r\n        <div class=\"bounce\"></div>\r\n        <div class=\"bounce\"></div>\r\n        <div class=\"bounce\"></div>\r\n    </div>\r\n</div>", styles: [".preloader{position:relative;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center}.preloader.background{opacity:.7}:host-context(.sfc-default-theme) .preloader.background{background-color:#fff}:host-context(.sfc-dark-theme) .preloader.background{background-color:#656d78}.preloader.global{z-index:9999;position:fixed}.preloader.local{z-index:9998;position:absolute}\n", ".spinner{text-align:center}.spinner .bounce{border-radius:100%;display:inline-block;animation:bounce-delay 1.4s infinite ease-in-out both;width:1em;height:1em}:host-context(.sfc-default-theme) .spinner .bounce{background-color:#545e61}:host-context(.sfc-dark-theme) .spinner .bounce{background-color:#fff}.spinner .bounce:nth-child(1){animation-delay:-.32s}.spinner .bounce:nth-child(2){animation-delay:-.16s}@keyframes bounce-delay{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}\n"] }]
+        }] });
+
+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: "13.2.6", ngImport: i0, type: CircleLoaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+CircleLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.6", type: CircleLoaderComponent, selector: "sfc-circle-loader", inputs: { type: "type" }, usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"show$ | async\" class=\"preloader\" [ngClass]=\"preLoaderClasses\">\r\n    <div class=\"circles-container\" [ngClass]=\"type\">\r\n        <div class=\"circle1\"></div>\r\n        <div class=\"circle2\"></div>\r\n        <div class=\"circle3\"></div>\r\n        <div class=\"circle4\"></div>\r\n        <div class=\"circle5\"></div>\r\n        <div class=\"circle6\"></div>\r\n        <div class=\"circle7\"></div>\r\n        <div class=\"circle8\"></div>\r\n        <div class=\"circle9\"></div>\r\n        <div class=\"circle10\"></div>\r\n        <div class=\"circle11\"></div>\r\n        <div class=\"circle12\"></div>\r\n    </div>\r\n</div>", styles: [".preloader{position:relative;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center}.preloader.background{opacity:.7}:host-context(.sfc-default-theme) .preloader.background{background-color:#fff}:host-context(.sfc-dark-theme) .preloader.background{background-color:#656d78}.preloader.global{z-index:9999;position:fixed}.preloader.local{z-index:9998;position:absolute}\n", ".circles-container{position:relative;width:2.5em;height:2.5em}.circles-container div{width:100%;height:100%;position:absolute;left:0;top:0}.circles-container div:before{content:\"\";display:block;margin:0 auto;width:15%;height:15%;border-radius:100%;animation:bounce-delay 1.2s infinite ease-in-out both}:host-context(.sfc-default-theme) .circles-container div:before{background-color:#545e61}:host-context(.sfc-dark-theme) .circles-container div:before{background-color:#fff}.circles-container.fading div:before{animation-name:circle-fade-delay}.circles-container .circle2{transform:rotate(30deg)}.circles-container .circle2:before{animation-delay:-1.1s}.circles-container .circle3{transform:rotate(60deg)}.circles-container .circle3:before{animation-delay:-1s}.circles-container .circle4{transform:rotate(90deg)}.circles-container .circle4:before{animation-delay:-.9s}.circles-container .circle5{transform:rotate(120deg)}.circles-container .circle5:before{animation-delay:-.8s}.circles-container .circle6{transform:rotate(150deg)}.circles-container .circle6:before{animation-delay:-.7s}.circles-container .circle7{transform:rotate(180deg)}.circles-container .circle7:before{animation-delay:-.6s}.circles-container .circle8{transform:rotate(210deg)}.circles-container .circle8:before{animation-delay:-.5s}.circles-container .circle9{transform:rotate(240deg)}.circles-container .circle9:before{animation-delay:-.4s}.circles-container .circle10{transform:rotate(270deg)}.circles-container .circle10:before{animation-delay:-.3s}.circles-container .circle11{transform:rotate(300deg)}.circles-container .circle11:before{animation-delay:-.2s}.circles-container .circle12{transform:rotate(330deg)}.circles-container .circle12:before{animation-delay:-.1s}@keyframes bounce-delay{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}@keyframes circle-fade-delay{0%,39%,to{opacity:0}40%{opacity:1}}\n"], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "async": i1$1.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: CircleLoaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-circle-loader', template: "<div *ngIf=\"show$ | async\" class=\"preloader\" [ngClass]=\"preLoaderClasses\">\r\n    <div class=\"circles-container\" [ngClass]=\"type\">\r\n        <div class=\"circle1\"></div>\r\n        <div class=\"circle2\"></div>\r\n        <div class=\"circle3\"></div>\r\n        <div class=\"circle4\"></div>\r\n        <div class=\"circle5\"></div>\r\n        <div class=\"circle6\"></div>\r\n        <div class=\"circle7\"></div>\r\n        <div class=\"circle8\"></div>\r\n        <div class=\"circle9\"></div>\r\n        <div class=\"circle10\"></div>\r\n        <div class=\"circle11\"></div>\r\n        <div class=\"circle12\"></div>\r\n    </div>\r\n</div>", styles: [".preloader{position:relative;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center}.preloader.background{opacity:.7}:host-context(.sfc-default-theme) .preloader.background{background-color:#fff}:host-context(.sfc-dark-theme) .preloader.background{background-color:#656d78}.preloader.global{z-index:9999;position:fixed}.preloader.local{z-index:9998;position:absolute}\n", ".circles-container{position:relative;width:2.5em;height:2.5em}.circles-container div{width:100%;height:100%;position:absolute;left:0;top:0}.circles-container div:before{content:\"\";display:block;margin:0 auto;width:15%;height:15%;border-radius:100%;animation:bounce-delay 1.2s infinite ease-in-out both}:host-context(.sfc-default-theme) .circles-container div:before{background-color:#545e61}:host-context(.sfc-dark-theme) .circles-container div:before{background-color:#fff}.circles-container.fading div:before{animation-name:circle-fade-delay}.circles-container .circle2{transform:rotate(30deg)}.circles-container .circle2:before{animation-delay:-1.1s}.circles-container .circle3{transform:rotate(60deg)}.circles-container .circle3:before{animation-delay:-1s}.circles-container .circle4{transform:rotate(90deg)}.circles-container .circle4:before{animation-delay:-.9s}.circles-container .circle5{transform:rotate(120deg)}.circles-container .circle5:before{animation-delay:-.8s}.circles-container .circle6{transform:rotate(150deg)}.circles-container .circle6:before{animation-delay:-.7s}.circles-container .circle7{transform:rotate(180deg)}.circles-container .circle7:before{animation-delay:-.6s}.circles-container .circle8{transform:rotate(210deg)}.circles-container .circle8:before{animation-delay:-.5s}.circles-container .circle9{transform:rotate(240deg)}.circles-container .circle9:before{animation-delay:-.4s}.circles-container .circle10{transform:rotate(270deg)}.circles-container .circle10:before{animation-delay:-.3s}.circles-container .circle11{transform:rotate(300deg)}.circles-container .circle11:before{animation-delay:-.2s}.circles-container .circle12{transform:rotate(330deg)}.circles-container .circle12:before{animation-delay:-.1s}@keyframes bounce-delay{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}@keyframes circle-fade-delay{0%,39%,to{opacity:0}40%{opacity:1}}\n"] }]
+        }], propDecorators: { type: [{
+                type: Input
+            }] } });
+
+var ModalTemplate;
+(function (ModalTemplate) {
+    ModalTemplate["Body"] = "body";
+    ModalTemplate["Header"] = "header";
+    ModalTemplate["Footer"] = "footer";
+})(ModalTemplate || (ModalTemplate = {}));
+
+class ModalService {
+    constructor() {
+        this.subjectClose = new Subject();
+        this.subjectOpen = new Subject();
+        this.close$ = this.subjectClose.asObservable();
+        this.open$ = this.subjectOpen.asObservable();
+    }
+    close() {
+        this.subjectClose.next();
+    }
+    open(options) {
+        this.subjectOpen.next(options);
+    }
+}
+ModalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ModalService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ModalService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ModalService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class DefaultModalHeaderComponent {
+    constructor(modalService) {
+        this.modalService = modalService;
+        this.DEFAULT_MODAL_HEADER_MODEL = {
+            icon: 'fa fa-window-restore',
+            showCloseIcon: true,
+            text: 'Modal'
+        };
+    }
+    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: "13.2.6", ngImport: i0, type: DefaultModalHeaderComponent, deps: [{ token: ModalService }], target: i0.ɵɵFactoryTarget.Component });
+DefaultModalHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.6", type: DefaultModalHeaderComponent, selector: "sfc-default-modal-header", inputs: { model: "model" }, ngImport: i0, template: "<div class=\"container\">\r\n    <i *ngIf=\"model?.icon\" class=\"icon\" class=\"{{model?.icon}}\"></i>\r\n    <span *ngIf=\"model?.text\" class=\"label\">{{model?.text}}</span>\r\n    <span *ngIf=\"model?.showCloseIcon\" class=\"close\" (click)=\"onClose()\">\r\n        <i class=\"fa fa-times\"></i>\r\n    </span>\r\n</div>", styles: [":host{display:inline-flex;width:100%}:host .container{display:flex;align-items:flex-start;width:100%;justify-content:space-between}:host .container i{font-size:1em}:host .container .icon{padding-right:.7em}:host .container .label{font-size:1.2em;font-weight:700;-webkit-user-select:none;user-select:none;padding:0 .7em}:host .container .close{color:#545e61;cursor:pointer;display:flex;padding-left:.7em}:host .container .close:hover{color:#2bbbad}\n"], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: DefaultModalHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-default-modal-header', template: "<div class=\"container\">\r\n    <i *ngIf=\"model?.icon\" class=\"icon\" class=\"{{model?.icon}}\"></i>\r\n    <span *ngIf=\"model?.text\" class=\"label\">{{model?.text}}</span>\r\n    <span *ngIf=\"model?.showCloseIcon\" class=\"close\" (click)=\"onClose()\">\r\n        <i class=\"fa fa-times\"></i>\r\n    </span>\r\n</div>", styles: [":host{display:inline-flex;width:100%}:host .container{display:flex;align-items:flex-start;width:100%;justify-content:space-between}:host .container i{font-size:1em}:host .container .icon{padding-right:.7em}:host .container .label{font-size:1.2em;font-weight:700;-webkit-user-select:none;user-select:none;padding:0 .7em}:host .container .close{color:#545e61;cursor:pointer;display:flex;padding-left:.7em}:host .container .close:hover{color:#2bbbad}\n"] }]
+        }], 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
+        };
+        this.BUTTON_CUSTOM_SIZE = 0.9;
+        this.ComponentSize = ComponentSize;
+        this.ButtonType = ButtonType;
+    }
+    ngOnInit() {
+        if (!isDefined(this.model)) {
+            this.model = this.DEFAULT_MODAL_FOOTER_MODEL;
+        }
+    }
+    onButtonClick(isCancelButton = false) {
+        var _a, _b, _c, _d;
+        if (isCancelButton) {
+            if ((_a = this.model) === null || _a === void 0 ? void 0 : _a.onCancel) {
+                return (_b = this.model) === null || _b === void 0 ? void 0 : _b.onCancel();
+            }
+        }
+        else {
+            if ((_c = this.model) === null || _c === void 0 ? void 0 : _c.onApply) {
+                return (_d = this.model) === null || _d === void 0 ? void 0 : _d.onApply();
+            }
+        }
+        this.modalService.close();
+    }
+}
+DefaultModalFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: DefaultModalFooterComponent, deps: [{ token: ModalService }], target: i0.ɵɵFactoryTarget.Component });
+DefaultModalFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.6", type: DefaultModalFooterComponent, selector: "sfc-default-modal-footer", inputs: { model: "model" }, ngImport: i0, template: "<div class=\"container\">\r\n    <sfc-button *ngIf=\"model?.applyButton\" [sfcComponentSize] [customSize]=\"BUTTON_CUSTOM_SIZE\" text=\"Ok\"\r\n        [types]=\"[ButtonType.Rounded]\" (click)=\"onButtonClick()\">\r\n    </sfc-button>\r\n    <sfc-button *ngIf=\"model?.cancelButton\" [sfcComponentSize] [customSize]=\"BUTTON_CUSTOM_SIZE\" text=\"Cancel\"\r\n        [types]=\"[ButtonType.Rounded]\" (click)=\"onButtonClick(true)\">\r\n    </sfc-button>\r\n</div>", styles: [":host{display:inline-flex;width:100%}:host .container{display:flex;justify-content:center;align-items:center;width:100%}:host .container sfc-button:first-child{padding-right:.3em}:host .container sfc-button:nth-child(2){padding-left:.3em}:host .container ::ng-deep sfc-button .button.rounded{width:5em}:host .container ::ng-deep sfc-button .button:not(:hover){color:#545e61!important;border-color:#545e61!important}\n"], components: [{ type: ButtonComponent, selector: "sfc-button", inputs: ["text", "iconBefore", "iconAfter", "disabled", "types"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ComponentSizeDirective, selector: "[sfcComponentSize]", inputs: ["sfcComponentSize", "customSize"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: DefaultModalFooterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-default-modal-footer', template: "<div class=\"container\">\r\n    <sfc-button *ngIf=\"model?.applyButton\" [sfcComponentSize] [customSize]=\"BUTTON_CUSTOM_SIZE\" text=\"Ok\"\r\n        [types]=\"[ButtonType.Rounded]\" (click)=\"onButtonClick()\">\r\n    </sfc-button>\r\n    <sfc-button *ngIf=\"model?.cancelButton\" [sfcComponentSize] [customSize]=\"BUTTON_CUSTOM_SIZE\" text=\"Cancel\"\r\n        [types]=\"[ButtonType.Rounded]\" (click)=\"onButtonClick(true)\">\r\n    </sfc-button>\r\n</div>", styles: [":host{display:inline-flex;width:100%}:host .container{display:flex;justify-content:center;align-items:center;width:100%}:host .container sfc-button:first-child{padding-right:.3em}:host .container sfc-button:nth-child(2){padding-left:.3em}:host .container ::ng-deep sfc-button .button.rounded{width:5em}:host .container ::ng-deep sfc-button .button:not(:hover){color:#545e61!important;border-color:#545e61!important}\n"] }]
+        }], ctorParameters: function () { return [{ type: ModalService }]; }, propDecorators: { model: [{
+                type: Input
+            }] } });
+
+class ModalComponent {
+    constructor(modalService) {
+        this.modalService = modalService;
+        this.ModalTemplate = ModalTemplate;
+        // End Defaults
+        this.hideOnEsc = true;
+        this.hideOnClickOutside = true;
+    }
+    onEscapeKeyDownHandler() {
+        if (this.hideOnEsc)
+            this.close();
+    }
+    getTemplate(template) {
+        var _a;
+        if (!isDefined(this.templates))
+            return null;
+        const templateRef = firstOrDefault((_a = this.templates) === null || _a === void 0 ? void 0 : _a.toArray(), t => t.templateName == template);
+        return isDefined(templateRef) ? templateRef === null || templateRef === void 0 ? void 0 : templateRef.template : null;
+    }
+    isShowDefault(template) {
+        return !isDefined(this.getTemplate(template))
+            && (template == ModalTemplate.Header
+                ? !isDefined(this.header)
+                : !isDefined(this.footer));
+    }
+    close() {
+        this.modalService.close();
+    }
+}
+ModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ModalComponent, deps: [{ token: ModalService }], target: i0.ɵɵFactoryTarget.Component });
+ModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.6", type: ModalComponent, selector: "sfc-modal", inputs: { body: "body", header: "header", footer: "footer", defaultHeaderModel: "defaultHeaderModel", defaultFooterModel: "defaultFooterModel", hideOnEsc: "hideOnEsc", hideOnClickOutside: "hideOnClickOutside" }, host: { listeners: { "document:keydown.escape": "onEscapeKeyDownHandler()" } }, queries: [{ propertyName: "templates", predicate: TemplateReferenceDirective, read: TemplateReferenceDirective }], ngImport: i0, template: "<div class=\"overlay\" [@hideOverlay] (click)=\"hideOnClickOutside && close()\">\r\n    <div class=\"content\" [@hideContent] (click)=\"$event.stopPropagation()\">\r\n\r\n        <div class=\"header\">\r\n\r\n            <ng-container *ngIf=\"header;else headerTemplate\">\r\n                <ng-container *ngTemplateOutlet=\"header;\"></ng-container>\r\n            </ng-container>\r\n\r\n            <ng-template #headerTemplate>\r\n                <ng-container *ngTemplateOutlet=\"getTemplate(ModalTemplate.Header)\">\r\n                </ng-container>\r\n            </ng-template>\r\n\r\n            <ng-container *ngIf=\"isShowDefault(ModalTemplate.Header)\">\r\n                <sfc-default-modal-header [model]=\"defaultHeaderModel\">\r\n                </sfc-default-modal-header>\r\n            </ng-container>\r\n\r\n        </div>\r\n\r\n        <div class=\"body\">\r\n\r\n            <ng-container *ngIf=\"body;else bodyTemplate\">\r\n                <ng-container *ngTemplateOutlet=\"body;\"></ng-container>\r\n            </ng-container>\r\n\r\n            <ng-template #bodyTemplate>\r\n                <ng-container #bodyTemplate *ngTemplateOutlet=\"getTemplate(ModalTemplate.Body)\">\r\n                </ng-container>\r\n            </ng-template>\r\n\r\n        </div>\r\n\r\n        <div class=\"footer\">\r\n\r\n            <ng-container *ngIf=\"footer;else footerTemplate\">\r\n                <ng-container *ngTemplateOutlet=\"footer;\"></ng-container>\r\n            </ng-container>\r\n\r\n            <ng-template #footerTemplate>\r\n                <ng-container *ngTemplateOutlet=\"getTemplate(ModalTemplate.Footer)\">\r\n                </ng-container>\r\n            </ng-template>\r\n\r\n            <ng-container *ngIf=\"isShowDefault(ModalTemplate.Footer)\">\r\n                <sfc-default-modal-footer [model]=\"defaultFooterModel\">\r\n                </sfc-default-modal-footer>\r\n            </ng-container>\r\n\r\n        </div>\r\n    </div>\r\n</div>", styles: [".overlay{display:flex;align-items:center;justify-content:center;position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;background-color:#0009;-webkit-backface-visibility:visible;backface-visibility:visible;animation:expand-overlay .4s cubic-bezier(.55,0,.1,1)}@keyframes expand-overlay{0%{visibility:hidden;opacity:0}}.overlay .content{display:flex;align-items:center;position:relative;padding:.7em;margin:auto;background-color:#f5f7fa;max-width:calc(100% - 3em);max-height:calc(100% - 3em);border-radius:3px;overflow-y:auto;box-shadow:0 .125em .625em #0003;transform:scale(1);flex-direction:column;animation:expand-modal .4s cubic-bezier(.55,0,.1,1)}@keyframes expand-modal{0%{visibility:hidden;opacity:0;transform:scale(1.2)}}.overlay .content>div{width:100%;flex:0 0 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#545e61;flex-direction:row;display:flex;justify-content:center}\n"], components: [{ type: DefaultModalHeaderComponent, selector: "sfc-default-modal-header", inputs: ["model"] }, { type: DefaultModalFooterComponent, selector: "sfc-default-modal-footer", inputs: ["model"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], animations: [
+        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: "13.2.6", 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 class=\"header\">\r\n\r\n            <ng-container *ngIf=\"header;else headerTemplate\">\r\n                <ng-container *ngTemplateOutlet=\"header;\"></ng-container>\r\n            </ng-container>\r\n\r\n            <ng-template #headerTemplate>\r\n                <ng-container *ngTemplateOutlet=\"getTemplate(ModalTemplate.Header)\">\r\n                </ng-container>\r\n            </ng-template>\r\n\r\n            <ng-container *ngIf=\"isShowDefault(ModalTemplate.Header)\">\r\n                <sfc-default-modal-header [model]=\"defaultHeaderModel\">\r\n                </sfc-default-modal-header>\r\n            </ng-container>\r\n\r\n        </div>\r\n\r\n        <div class=\"body\">\r\n\r\n            <ng-container *ngIf=\"body;else bodyTemplate\">\r\n                <ng-container *ngTemplateOutlet=\"body;\"></ng-container>\r\n            </ng-container>\r\n\r\n            <ng-template #bodyTemplate>\r\n                <ng-container #bodyTemplate *ngTemplateOutlet=\"getTemplate(ModalTemplate.Body)\">\r\n                </ng-container>\r\n            </ng-template>\r\n\r\n        </div>\r\n\r\n        <div class=\"footer\">\r\n\r\n            <ng-container *ngIf=\"footer;else footerTemplate\">\r\n                <ng-container *ngTemplateOutlet=\"footer;\"></ng-container>\r\n            </ng-container>\r\n\r\n            <ng-template #footerTemplate>\r\n                <ng-container *ngTemplateOutlet=\"getTemplate(ModalTemplate.Footer)\">\r\n                </ng-container>\r\n            </ng-template>\r\n\r\n            <ng-container *ngIf=\"isShowDefault(ModalTemplate.Footer)\">\r\n                <sfc-default-modal-footer [model]=\"defaultFooterModel\">\r\n                </sfc-default-modal-footer>\r\n            </ng-container>\r\n\r\n        </div>\r\n    </div>\r\n</div>", styles: [".overlay{display:flex;align-items:center;justify-content:center;position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;background-color:#0009;-webkit-backface-visibility:visible;backface-visibility:visible;animation:expand-overlay .4s cubic-bezier(.55,0,.1,1)}@keyframes expand-overlay{0%{visibility:hidden;opacity:0}}.overlay .content{display:flex;align-items:center;position:relative;padding:.7em;margin:auto;background-color:#f5f7fa;max-width:calc(100% - 3em);max-height:calc(100% - 3em);border-radius:3px;overflow-y:auto;box-shadow:0 .125em .625em #0003;transform:scale(1);flex-direction:column;animation:expand-modal .4s cubic-bezier(.55,0,.1,1)}@keyframes expand-modal{0%{visibility:hidden;opacity:0;transform:scale(1.2)}}.overlay .content>div{width:100%;flex:0 0 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#545e61;flex-direction:row;display:flex;justify-content:center}\n"] }]
+        }], 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
+            }], 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 = ((event) => {
+            this.viewContainer.clear();
+            this.viewContainer.createEmbeddedView(this.templateRef);
+            this.modalService.open(event.currentTarget);
+        }).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.close$
+            .subscribe(() => {
+            this.viewContainer.clear();
+        });
+    }
+    ngOnDestroy() {
+        var _a;
+        (_a = this._closeSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+        this.elements.forEach(el => el.removeEventListener('click', this.clickHandler));
+    }
+}
+ModalOpenOnClickDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ModalOpenOnClickDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: ModalService }], target: i0.ɵɵFactoryTarget.Directive });
+ModalOpenOnClickDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: ModalOpenOnClickDirective, selector: "[sfcModalOpenOnClick]", inputs: { modalOpenOnClick: ["sfcModalOpenOnClick", "modalOpenOnClick"] }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ModalOpenOnClickDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[sfcModalOpenOnClick]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }, { type: ModalService }]; }, propDecorators: { modalOpenOnClick: [{
+                type: Input,
+                args: ['sfcModalOpenOnClick']
+            }] } });
+
+class HamburgerComponent {
+    constructor() {
+        this.open = false;
+        this.onClick = () => this.open = !this.open;
+    }
+}
+HamburgerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: HamburgerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+HamburgerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.6", type: HamburgerComponent, selector: "sfc-hamburger", inputs: { open: "open" }, host: { listeners: { "click": "onClick()" }, properties: { "class.open": "this.open" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"line half start\"></div>\r\n    <div class=\"line\"></div>\r\n    <div class=\"line half end\"></div>\r\n</div>", styles: [".container{width:1em;height:1em;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;transition:transform .33s ease-out}:host(.open) .container{transform:rotate(-45deg)}.container .line{border-radius:.31em;width:100%;height:.25em}:host-context(.sfc-default-theme) .container .line{background-color:#545e61}:host-context(.sfc-dark-theme) .container .line{background-color:#ccd1d9}.container .line.half{width:50%}.container .line.start{transition:transform .33s cubic-bezier(.54,-.81,.57,.57);transform-origin:right}:host(.open) .container .line.start{transform:rotate(-90deg) translate(.1875em)}.container .line.end{align-self:flex-end;transition:transform .33s cubic-bezier(.54,-.81,.57,.57);transform-origin:left}:host(.open) .container .line.end{transform:rotate(-90deg) translate(-.1875em)}.container:hover .line{background-color:#2bbbad!important}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: HamburgerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-hamburger', template: "<div class=\"container\">\r\n    <div class=\"line half start\"></div>\r\n    <div class=\"line\"></div>\r\n    <div class=\"line half end\"></div>\r\n</div>", styles: [".container{width:1em;height:1em;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;transition:transform .33s ease-out}:host(.open) .container{transform:rotate(-45deg)}.container .line{border-radius:.31em;width:100%;height:.25em}:host-context(.sfc-default-theme) .container .line{background-color:#545e61}:host-context(.sfc-dark-theme) .container .line{background-color:#ccd1d9}.container .line.half{width:50%}.container .line.start{transition:transform .33s cubic-bezier(.54,-.81,.57,.57);transform-origin:right}:host(.open) .container .line.start{transform:rotate(-90deg) translate(.1875em)}.container .line.end{align-self:flex-end;transition:transform .33s cubic-bezier(.54,-.81,.57,.57);transform-origin:left}:host(.open) .container .line.end{transform:rotate(-90deg) translate(-.1875em)}.container:hover .line{background-color:#2bbbad!important}\n"] }]
+        }], propDecorators: { open: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.' + UIClass.Open]
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+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: "13.2.6", ngImport: i0, type: DotsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DotsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.6", type: DotsComponent, selector: "sfc-dots", inputs: { open: "open", direction: "direction" }, host: { listeners: { "click": "onClick()" }, properties: { "class.open": "this.open", "class": "this.direction" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"dots-container\">\r\n        <div class=\"dot\"></div>\r\n        <div class=\"dot\"></div>\r\n        <div class=\"dot\"></div>\r\n    </div>\r\n</div>", styles: [":host{display:inline-flex;transform:rotate(90deg);transition:all .3s cubic-bezier(.175,.885,.32,1.275);cursor:pointer}:host.open{transform:rotate(0)}:host.vertical{transform:rotate(0)}:host.vertical.open{transform:rotate(90deg)}:host .container{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;flex:1;margin:.25em}:host .container .dots-container{display:flex;flex-flow:column,wrap;justify-content:center;align-items:center;position:relative}:host .container .dots-container .dot{width:.3125em;height:.3125em;transition:background .3s ease;margin:.06em;border-radius:50%;display:block}:host-context(.sfc-default-theme) :host .container .dots-container .dot{background:#545e61}:host-context(.sfc-dark-theme) :host .container .dots-container .dot{background:#ccd1d9}:host .container:hover,:host .container.open,:host .container:focus{outline:none}:host-context(.sfc-default-theme) :host .container:hover .dots-container .dot,:host-context(.sfc-default-theme) :host .container.open .dots-container .dot,:host-context(.sfc-default-theme) :host .container:focus .dots-container .dot{background:#2bbbad}:host-context(.sfc-dark-theme) :host .container:hover .dots-container .dot,:host-context(.sfc-dark-theme) :host .container.open .dots-container .dot,:host-context(.sfc-dark-theme) :host .container:focus .dots-container .dot{background:#2bbbad}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: DotsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-dots', template: "<div class=\"container\">\r\n    <div class=\"dots-container\">\r\n        <div class=\"dot\"></div>\r\n        <div class=\"dot\"></div>\r\n        <div class=\"dot\"></div>\r\n    </div>\r\n</div>", styles: [":host{display:inline-flex;transform:rotate(90deg);transition:all .3s cubic-bezier(.175,.885,.32,1.275);cursor:pointer}:host.open{transform:rotate(0)}:host.vertical{transform:rotate(0)}:host.vertical.open{transform:rotate(90deg)}:host .container{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;flex:1;margin:.25em}:host .container .dots-container{display:flex;flex-flow:column,wrap;justify-content:center;align-items:center;position:relative}:host .container .dots-container .dot{width:.3125em;height:.3125em;transition:background .3s ease;margin:.06em;border-radius:50%;display:block}:host-context(.sfc-default-theme) :host .container .dots-container .dot{background:#545e61}:host-context(.sfc-dark-theme) :host .container .dots-container .dot{background:#ccd1d9}:host .container:hover,:host .container.open,:host .container:focus{outline:none}:host-context(.sfc-default-theme) :host .container:hover .dots-container .dot,:host-context(.sfc-default-theme) :host .container.open .dots-container .dot,:host-context(.sfc-default-theme) :host .container:focus .dots-container .dot{background:#2bbbad}:host-context(.sfc-dark-theme) :host .container:hover .dots-container .dot,:host-context(.sfc-dark-theme) :host .container.open .dots-container .dot,:host-context(.sfc-dark-theme) :host .container:focus .dots-container .dot{background:#2bbbad}\n"] }]
+        }], 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.onClick = () => this.active = !this.active;
+        this.leftModel = { label: 'Left' };
+        this.rightModel = { label: 'Right' };
+    }
+}
+ToggleSwitcherComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ToggleSwitcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ToggleSwitcherComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.6", type: ToggleSwitcherComponent, selector: "sfc-toggle-switcher", inputs: { active: "active", leftModel: "leftModel", rightModel: "rightModel" }, host: { listeners: { "click": "onClick()" }, properties: { "class.active": "this.active" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"toggle\"></div>\r\n    <div class=\"names\">\r\n        <p class=\"left\">\r\n            <i *ngIf=\"leftModel.icon\" class=\"{{leftModel.icon}}\"></i>\r\n            <span>{{leftModel.label}}</span>\r\n        </p>\r\n        <p class=\"right\">\r\n            <i *ngIf=\"rightModel.icon\" class=\"{{rightModel.icon}}\"></i>\r\n            <span>{{rightModel.label}}</span>\r\n        </p>\r\n    </div>\r\n</div>", styles: [":host .container,:host .toggle{height:100%;border-radius:100px}:host .container{width:100%;background-color:#e6e9ed;color:#545e61;border-radius:100px;position:relative;cursor:pointer}:host .container .toggle{position:absolute;width:50%;background-color:#fff;box-shadow:0 .125em 1em #0003;transition:transform .3s cubic-bezier(.25,.46,.45,.94)}:host .container .names{font-size:90%;font-weight:bolder;width:100%;height:100%;position:relative;display:flex;justify-content:space-around;align-items:center;-webkit-user-select:none;user-select:none;overflow:hidden}:host .container .names p{font-size:90%;text-align:center;margin:0;padding:.5em 1em}:host .container .names p.right{opacity:.5}:host .container .names p i{margin-right:.25em}:host.active .container{background-color:#e6e9ed}:host.active .container .toggle{transform:translate(100%);background-color:#fff}:host.active .container .names{color:#545e61}:host.active .container .names .left{opacity:.5}:host.active .container .names .right{opacity:1}\n"], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ToggleSwitcherComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-toggle-switcher', template: "<div class=\"container\">\r\n    <div class=\"toggle\"></div>\r\n    <div class=\"names\">\r\n        <p class=\"left\">\r\n            <i *ngIf=\"leftModel.icon\" class=\"{{leftModel.icon}}\"></i>\r\n            <span>{{leftModel.label}}</span>\r\n        </p>\r\n        <p class=\"right\">\r\n            <i *ngIf=\"rightModel.icon\" class=\"{{rightModel.icon}}\"></i>\r\n            <span>{{rightModel.label}}</span>\r\n        </p>\r\n    </div>\r\n</div>", styles: [":host .container,:host .toggle{height:100%;border-radius:100px}:host .container{width:100%;background-color:#e6e9ed;color:#545e61;border-radius:100px;position:relative;cursor:pointer}:host .container .toggle{position:absolute;width:50%;background-color:#fff;box-shadow:0 .125em 1em #0003;transition:transform .3s cubic-bezier(.25,.46,.45,.94)}:host .container .names{font-size:90%;font-weight:bolder;width:100%;height:100%;position:relative;display:flex;justify-content:space-around;align-items:center;-webkit-user-select:none;user-select:none;overflow:hidden}:host .container .names p{font-size:90%;text-align:center;margin:0;padding:.5em 1em}:host .container .names p.right{opacity:.5}:host .container .names p i{margin-right:.25em}:host.active .container{background-color:#e6e9ed}:host.active .container .toggle{transform:translate(100%);background-color:#fff}:host.active .container .names{color:#545e61}:host.active .container .names .left{opacity:.5}:host.active .container .names .right{opacity:1}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { active: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.' + UIClass.Active]
+            }], leftModel: [{
+                type: Input
+            }], rightModel: [{
+                type: Input
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+class CheckmarkComponent {
+    constructor() {
+        this.active = false;
+        this.icon = 'fa fa-check';
+        this.onClick = () => this.active = !this.active;
+    }
+}
+CheckmarkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: CheckmarkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CheckmarkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.6", type: CheckmarkComponent, selector: "sfc-checkmark", inputs: { active: "active", icon: "icon" }, host: { listeners: { "click": "onClick()" }, properties: { "class.active": "this.active" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <span class=\"check\">\r\n        <i class=\"{{icon}}\"></i>\r\n    </span>\r\n</div>", styles: [":host{display:inline-block}:host .check{border-radius:50%;border:.18em solid;background:#fff;border-color:#ccd1d9;width:1em;height:1em;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .3s ease}:host .check i{font-size:.8em;transition:opacity .3s ease;color:transparent;-webkit-text-stroke:1px #0003}:host-context(.sfc-default-theme) :host .check i{opacity:.5}:host-context(.sfc-dark-theme) :host .check i{opacity:.8}:host .check:hover{border-color:#2bbbad}:host .check:hover i{-webkit-text-stroke:initial;color:#2bbbad}:host-context(.sfc-default-theme) :host .check:hover i{opacity:.8}:host-context(.sfc-dark-theme) :host .check:hover i{opacity:1}:host.active .check{border-color:#2bbbad;background:#2bbbad}:host.active .check i{opacity:1;transform:scale(0);color:#fff;-webkit-text-stroke:0;animation:icon .3s cubic-bezier(1,.008,.565,1.65) .1s 1 forwards}@keyframes icon{0%{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: CheckmarkComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-checkmark', template: "<div class=\"container\">\r\n    <span class=\"check\">\r\n        <i class=\"{{icon}}\"></i>\r\n    </span>\r\n</div>", styles: [":host{display:inline-block}:host .check{border-radius:50%;border:.18em solid;background:#fff;border-color:#ccd1d9;width:1em;height:1em;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .3s ease}:host .check i{font-size:.8em;transition:opacity .3s ease;color:transparent;-webkit-text-stroke:1px #0003}:host-context(.sfc-default-theme) :host .check i{opacity:.5}:host-context(.sfc-dark-theme) :host .check i{opacity:.8}:host .check:hover{border-color:#2bbbad}:host .check:hover i{-webkit-text-stroke:initial;color:#2bbbad}:host-context(.sfc-default-theme) :host .check:hover i{opacity:.8}:host-context(.sfc-dark-theme) :host .check:hover i{opacity:1}:host.active .check{border-color:#2bbbad;background:#2bbbad}:host.active .check i{opacity:1;transform:scale(0);color:#fff;-webkit-text-stroke:0;animation:icon .3s cubic-bezier(1,.008,.565,1.65) .1s 1 forwards}@keyframes icon{0%{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}\n"] }]
+        }], propDecorators: { active: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.' + UIClass.Active]
+            }], icon: [{
+                type: Input
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+class NgxSfcCommonModule {
+}
+NgxSfcCommonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: NgxSfcCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NgxSfcCommonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: NgxSfcCommonModule, declarations: [
+        // directives
+        ClickOutsideDirective,
+        ShowHideElementDirective,
+        ThrowElementOnHoverDirective,
+        TemplateReferenceDirective,
+        MouseDownDirective,
+        ComponentSizeDirective,
+        // components
+        ButtonComponent,
+        TooltipComponent,
+        DelimeterComponent,
+        // loaders
+        BounceLoaderComponent,
+        CircleLoaderComponent,
+        // modal
+        ModalComponent,
+        ModalOpenOnClickDirective,
+        DefaultModalHeaderComponent,
+        DefaultModalFooterComponent,
+        // hamburger
+        HamburgerComponent,
+        // dots
+        DotsComponent,
+        //toggle
+        ToggleSwitcherComponent,
+        CheckmarkComponent
+    ], imports: [CommonModule,
+        BrowserAnimationsModule], exports: [
+        // directives
+        ClickOutsideDirective,
+        ShowHideElementDirective,
+        ThrowElementOnHoverDirective,
+        TemplateReferenceDirective,
+        MouseDownDirective,
+        ComponentSizeDirective,
+        // components
+        ButtonComponent,
+        TooltipComponent,
+        DelimeterComponent,
+        // loaders
+        BounceLoaderComponent,
+        CircleLoaderComponent,
+        // modal
+        ModalComponent,
+        ModalOpenOnClickDirective,
+        DefaultModalHeaderComponent,
+        DefaultModalFooterComponent,
+        // hamburger
+        HamburgerComponent,
+        // dots
+        DotsComponent,
+        //toggle
+        ToggleSwitcherComponent,
+        CheckmarkComponent
+    ] });
+NgxSfcCommonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: NgxSfcCommonModule, providers: [DOCUMENT_PROVIDERS, WINDOW_PROVIDERS], imports: [[
+            CommonModule,
+            BrowserAnimationsModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: NgxSfcCommonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        // directives
+                        ClickOutsideDirective,
+                        ShowHideElementDirective,
+                        ThrowElementOnHoverDirective,
+                        TemplateReferenceDirective,
+                        MouseDownDirective,
+                        ComponentSizeDirective,
+                        // components
+                        ButtonComponent,
+                        TooltipComponent,
+                        DelimeterComponent,
+                        // loaders
+                        BounceLoaderComponent,
+                        CircleLoaderComponent,
+                        // modal
+                        ModalComponent,
+                        ModalOpenOnClickDirective,
+                        DefaultModalHeaderComponent,
+                        DefaultModalFooterComponent,
+                        // hamburger
+                        HamburgerComponent,
+                        // dots
+                        DotsComponent,
+                        //toggle
+                        ToggleSwitcherComponent,
+                        CheckmarkComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        BrowserAnimationsModule
+                    ],
+                    exports: [
+                        // directives
+                        ClickOutsideDirective,
+                        ShowHideElementDirective,
+                        ThrowElementOnHoverDirective,
+                        TemplateReferenceDirective,
+                        MouseDownDirective,
+                        ComponentSizeDirective,
+                        // components
+                        ButtonComponent,
+                        TooltipComponent,
+                        DelimeterComponent,
+                        // loaders
+                        BounceLoaderComponent,
+                        CircleLoaderComponent,
+                        // modal
+                        ModalComponent,
+                        ModalOpenOnClickDirective,
+                        DefaultModalHeaderComponent,
+                        DefaultModalFooterComponent,
+                        // hamburger
+                        HamburgerComponent,
+                        // dots
+                        DotsComponent,
+                        //toggle
+                        ToggleSwitcherComponent,
+                        CheckmarkComponent
+                    ],
+                    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, CircleLoaderComponent, CircleLoaderType, ClickOutsideDirective, CommonConstants, ComponentSize, ComponentSizeDirective, DOCUMENT, DOCUMENT_PROVIDERS, DateTimeConstants, DefaultModalFooterComponent, DefaultModalHeaderComponent, DelimeterComponent, Direction, DocumentRef, DotsComponent, HamburgerComponent, LoaderService, MediaLimits, ModalComponent, ModalOpenOnClickDirective, ModalService, ModalTemplate, MouseDownDirective, NgxSfcCommonModule, Position, ResizeService, ShowHideElementDirective, SortingDirection, TemplateReferenceDirective, ThrowElementOnHoverDirective, ToggleSwitcherComponent, TooltipComponent, TooltipType, UIClass, UIConstants, WINDOW, WINDOW_PROVIDERS, WindowRef, addClasses, addItem, addPropertyToObject, all, any, browserDocumentProvider, browserWindowProvider, contains, distinct, documentFactory, documentProvider, firstItem, firstOrDefault, getCollectionOrEmpty, getCssLikeValue, getFileExtension, getFirstDayOfMonth, getFirstDayOfMonthByYearAndMonth, getFirstDayOfYear, getLastDayOfMonth, getLastDayOfMonthByYearAndMonth, getLastDayOfYear, getNextMonth, getNextYear, getPreviousMonth, getPreviousYear, getValueFromCssLikeValue, getWeeksNumberInMonth, hasItem, hasItemBy, hasObjectItem, isAsyncData, isDateGreat, isDateGreatOrEqual, isDateTimeGreat, isDateTimeGreatOrEqual, isDefined, isEqualDates, isImage, isNullOrEmptyString, isObject, lastItem, max, mergeDeep, nameof, parseFileSize, readAsDataURL, remove, removeClasses, removeItem, removePropertyFromObject, setDay, setHours, setMinutes, setYear, skip, sortBy, sortByPath, sum, trim, updateItem, where, windowFactory, windowProvider };
+//# sourceMappingURL=ngx-sfc-common.mjs.map