@colijnit/corecomponents_v12 254.1.10 → 255.1.1

package/projects/corecomponents/src/lib/core/utils/search-utils.ts

@@ -0,0 +1,121 @@
+import {SearchProperty} from "../interface/search-property";
+import {SearchPropertyState} from "../enum/search-property-state";
+import {isNill} from "../function/is-nill.function";
+import {StringUtils} from "./string-utils";
+import {ValueComparisonType} from "../enum/value-comparison-type";
+import {SearchDataType} from "../enum/search-data-type";
+
+// utils around SearchProperty's and collections
+export class SearchUtils {
+
+    public static GetSearchFilteredCollection<T>(collection: T[], searchProperties: SearchProperty[]): T[] {
+        if (!collection) {
+            return [];
+        } else if (!searchProperties || searchProperties.length === 0) {
+            return collection;
+        }
+
+        let filteredCollection: T[] = [];
+        for (let iColl: number = 0, lenCollection: number = collection.length; iColl < lenCollection; iColl++) {
+            let item: T = collection[iColl];
+            for (let iFilters: number = 0, lenFilters: number = searchProperties.length; iFilters < lenFilters; iFilters++) {
+                let searchProp: SearchProperty = searchProperties[iFilters];
+                if (SearchUtils._checkItemSearchPropPass(item, searchProp)) {
+                    filteredCollection.push(item);
+                    break;
+                }
+            }
+        }
+        return filteredCollection;
+    }
+
+    public static GetNotInactiveSearchProps(searchProps: SearchProperty[]): SearchProperty[] {
+        if (!searchProps) {
+            return [];
+        }
+        return searchProps.filter((item: SearchProperty) => {
+            return item && (item.state === SearchPropertyState.Active || item.state === SearchPropertyState.LockedActive);
+        });
+    }
+
+    // returns [], not undefiend
+    public static GetActiveSearchProps(searchProps: SearchProperty[]): SearchProperty[] {
+        if (!searchProps) {
+            return [];
+        }
+        return searchProps.filter((item: SearchProperty) => {
+            return item && (item.state === SearchPropertyState.Active);
+        });
+    }
+
+    public static GetInactiveSearchProps(searchProps: SearchProperty[]): SearchProperty[] {
+        if (!searchProps) {
+            return [];
+        }
+        return searchProps.filter((item: SearchProperty) => {
+            return item && item.state === SearchPropertyState.Inactive || isNill(item.state); // state can be number 0
+        });
+    }
+
+    public static ToString(searchProperties: SearchProperty[], enabledPropsOnly: boolean = true): string {
+        let text: string = "";
+        if (searchProperties) {
+            for (let i: number = 0, len: number = searchProperties.length; i < len; i++) {
+                let prop: SearchProperty = searchProperties[i];
+                if (enabledPropsOnly && (prop.state === undefined || prop.state === SearchPropertyState.Inactive)) {
+                    continue;
+                }
+                text += StringUtils.Format("{0} {1}, ", [prop.property, prop.values]);
+            }
+            text = StringUtils.RemoveLastChars(text, 2);
+        }
+        return text;
+    }
+
+    private static _checkItemSearchPropPass(item: any, searchProp: SearchProperty): boolean {
+        if (!item || !searchProp) {
+            return false;
+        }
+        if (!searchProp.values || searchProp.values.length === 0) {
+            return true;
+        }
+
+        let itemPropVal: any = item[searchProp.property];
+        // default to Equal if there is no comparisonType
+        if (searchProp.comparisonType === ValueComparisonType.Equal || !searchProp.comparisonType) {
+            return SearchUtils._checkEqualPass(itemPropVal, searchProp.values, searchProp.dataType);
+        } else if (searchProp.comparisonType === ValueComparisonType.NotEqual) {
+            return SearchUtils._checkNotEqualPass(itemPropVal, searchProp.values, searchProp.dataType);
+        }
+
+        return true; // let unimplemented filter types pass for now
+    }
+
+    // valueToCheck must be equal to at least one checkValue
+    private static _checkEqualPass(valueToCheck: any, checkValues: any[], dataType: SearchDataType = SearchDataType.String): boolean {
+        if (dataType === SearchDataType.String) {
+            valueToCheck = StringUtils.AsLowerCaseIfString(valueToCheck);
+        }
+
+        for (let i: number = 0, len: number = checkValues.length; i < len; i++) {
+            let checkVal: any = checkValues[i];
+            switch (dataType) {
+                case SearchDataType.String:
+                default:
+                    checkVal = StringUtils.AsLowerCaseIfString(checkVal);
+                    if (valueToCheck) {
+                        if (valueToCheck.toString().indexOf(checkVal) > -1) {
+                            return true;
+                        }
+                    }
+                    break;
+            }
+        }
+        return false;
+    }
+
+    // valueToCheck must be inequal to all checkValues
+    private static _checkNotEqualPass(valueToCheck: any, checkValues: any[], dataType: SearchDataType = SearchDataType.String): boolean {
+        return !SearchUtils._checkEqualPass(valueToCheck, checkValues, dataType);
+    }
+}

package/projects/corecomponents/src/lib/core/utils/sort-utils.ts

@@ -0,0 +1,108 @@
+import {SortProperty} from "../interface/sort-property";
+import {SortDirection} from "../enum/sort-direction";
+import {StringUtils} from "./string-utils";
+import {NumberUtils} from "./number-utils";
+import {SortDataType} from "../enum/sort-data-type";
+
+export class SortUtils {
+    // Sorts given (in-out manipulated) array using the given sort properties, in order.
+    public static SortObjectArray<T>(array: T[], sortProperties: SortProperty[]): void {
+        if (!array || !sortProperties) {
+            return;
+        }
+
+        let tempArr: T[] = array.map((data: T, index: number) => {
+            let values: any = {};
+            sortProperties.forEach((sorter: SortProperty) => {
+                values[sorter.property] = SortUtils._getSortValueAndSetEvalType(data[sorter.property], sorter);
+                sorter.switcher = SortUtils._switcherFromSortDirection(sorter.direction);
+            });
+            return {index: index, values: values};
+        }).sort((a: { index: number, values: any[] }, b: { index: number, values: any[] }) => {
+            let sort: number = 0;
+            for (let sortProperty of sortProperties) {
+                if (sortProperty.evalType === Number) {
+                    sort = SortUtils._compareNumberValue(
+                        a.values[sortProperty.property],
+                        b.values[sortProperty.property],
+                        sortProperty.switcher
+                    );
+                } else {
+                    sort = SortUtils._compareValue(
+                        a.values[sortProperty.property],
+                        b.values[sortProperty.property],
+                        sortProperty.switcher
+                    );
+                }
+                if (sort !== 0) {
+                    break;
+                }
+            }
+            return sort;
+        }).map(sorter => array[sorter.index]);
+
+        array.length = 0;
+
+        tempArr.forEach(item => array.push(item));
+    }
+
+    public static SortArray<T>(array: any[], direction: SortDirection = SortDirection.Ascending, evalType: any = String): void {
+        let switcher: number = SortUtils._switcherFromSortDirection(direction);
+        if (evalType === Number) {
+            array.sort((a, b) => {
+                return SortUtils._compareNumberValue(a, b, switcher)
+            });
+        } else {
+            array.sort((a, b) => {
+                return SortUtils._compareValue(a, b, switcher)
+            });
+        }
+    }
+
+    public static ToString(sortProperties: SortProperty[], activeOnly: boolean = true): string {
+        let str: string = "";
+        if (sortProperties) {
+            for (let i: number = 0, len: number = sortProperties.length; i < len; i++) {
+                let prop: SortProperty = sortProperties[i];
+                if (activeOnly && prop.active === false) {
+                    continue;
+                }
+                str += prop.property + ": " + prop.direction + ", "
+            }
+            str = str.substring(0, str.length - 2);
+        }
+        return str;
+    }
+
+    private static _getSortValueAndSetEvalType(value: any, sorter: SortProperty): number | string {
+        switch (sorter.type) {
+            case SortDataType.Number:
+            case SortDataType.Boolean:
+                value = NumberUtils.ParseNumberOrDefault(value, 0);
+                sorter.evalType = Number;
+                break;
+            case SortDataType.Date :
+                value = value instanceof Date ? value.getTime() : 0;
+                sorter.evalType = Number;
+                break;
+            case SortDataType.String:
+            default:
+                value = StringUtils.ParseString(value, '').toLocaleLowerCase();
+                sorter.evalType = String;
+                break;
+        }
+        return value;
+    }
+
+    private static _compareValue(a: any, b: any, switcher: number = 1): number {
+        return (a > b ? 1 : (a < b ? -1 : 0)) * switcher;
+    }
+
+    private static _compareNumberValue(a: any, b: any, switcher: number = 1): number {
+        return (a - b) * switcher;
+    }
+
+    private static _switcherFromSortDirection(direction: SortDirection = SortDirection.Ascending): number {
+        return direction === SortDirection.Ascending ? 1 : -1;
+    }
+}

package/projects/corecomponents/src/lib/core/utils/string-utils.ts

@@ -0,0 +1,100 @@
+import {notNill} from "../function/not-nill.function";
+import { ArrayUtils } from './array-utils';
+
+// @dynamic
+export class StringUtils {
+    // Returns the given argument as a string. Returns given defaultValue if conversion of argument to string was impossible.
+    public static ParseString(arg: any, defaultValue: string = ''): string {
+        if (!StringUtils.IsString(arg)) {
+            if (arg && typeof arg.toString === 'function') {
+                arg = arg.toString();
+            } else {
+                arg = defaultValue;
+            }
+        }
+        return arg;
+    }
+
+    public static AsLowerCaseIfString(str: any): any {
+        if (StringUtils.IsString(str)) {
+            return str.toLowerCase();
+        } else {
+            return str;
+        }
+    }
+
+    /**
+     * Example usage:
+     * str = 'File is to large to upload. Maximum file size is {0} Mb'
+     * format = [FileUtils.MaxUploadSizeInMb]
+     * output = File is to large to upload. Maximum file size is 3 Mb
+     *
+     * str = '{0} is way better than {1}'
+     * format = ['Angular2','Angular1']
+     * output = Angular2 is way better than Angular1
+     *
+     * @param str The string that contains {0} and {1} etc, for replacement by given format data
+     * @param format The format replacement data
+     */
+    public static Format(str: string, format: any[]): string {
+        let args: any = Array.prototype.slice.call(format);
+        return str.replace(/{(\d+)}/g, function (match: any, number: any): string {
+            return typeof args[number] !== 'undefined' ? (args[number] !== null ? args[number] : "") : "";
+        });
+    }
+
+    public static IsString(str: any): boolean {
+        return typeof str === 'string';
+    }
+
+    // Returns whether given str is a string and has a length > 0.
+    public static IsStringWithLength(str: any): boolean {
+        return notNill(str) && StringUtils.IsString(str) && str.length > 0;
+    }
+
+    // Returns a new string string with N amount of characters removed from the end of it.
+    public static RemoveLastChars(str: string, amount: number): string {
+        if (str) {
+            return str.slice(0, -1 * amount);
+        } else {
+            return str;
+        }
+    }
+
+    public static StringToStringArray(str: string): string[] {
+        if (!str) {
+            return [];
+        }
+
+        const strArray: string[] = str.split(" ");
+        ArrayUtils.RemoveElementsByFilter(strArray, (txt: string) => {
+            return !txt || txt === "";
+        });
+        return strArray;
+    }
+
+    public static CloneStringArray(strArray: string[]): string[] {
+        const clone: string[] = [];
+        if (strArray) {
+            for (let i: number = 0, len: number = strArray.length; i < len; i++) {
+                clone.push(strArray[i]);
+            }
+        }
+        return clone;
+    }
+
+    public static ToStringOrDefault(arg: any, defaultReturnVal: string = ""): string {
+        if (notNill(arg) && arg.toString) {
+            return arg.toString();
+        } else {
+            return defaultReturnVal;
+        }
+    }
+
+    public static CreateGuid(): string {
+        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c: string) => {
+            const r: number = Math.random() * 16 | 0;
+            return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
+        });
+    }
+}

package/projects/corecomponents/src/lib/core/validator/email.validator.ts

@@ -0,0 +1,10 @@
+import {AbstractControl, ValidationErrors} from '@angular/forms';
+
+export function emailValidator(control: AbstractControl): ValidationErrors | null {
+
+    const emailRegex: any = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+    const isValid: boolean = !!emailRegex.test(control.value);
+
+    return isValid ? null : {'email': 'MESSAGE_EMAIL_NOT_CORRECT'};
+
+}

package/projects/corecomponents/src/lib/core/validator/equal.validator.ts

@@ -0,0 +1,14 @@
+import {FormControl, ValidationErrors, ValidatorFn} from "@angular/forms";
+
+export function equalValidator(valueGetterFn: () => any): ValidatorFn {
+    return function (control: FormControl): ValidationErrors | null {
+        let isValid: boolean = true;
+
+        if (valueGetterFn) {
+            const mustBeEqualTo: any = valueGetterFn.call(this);
+            isValid = control.value === mustBeEqualTo;
+        }
+
+        return isValid ? null : {"equality": "MESSAGE_FIELD_WRONG_VALUE"};
+    };
+}

package/projects/corecomponents/src/lib/core/validator/max-string-length.validator.ts

@@ -0,0 +1,11 @@
+import { FormControl, ValidationErrors, ValidatorFn } from '@angular/forms';
+
+export function maxStringLengthValidator(length: number): ValidatorFn {
+    return function (control: FormControl): ValidationErrors | null {
+        let isValid: boolean = true;
+        if (control.value && typeof control.value === 'string') {
+            isValid = control.value.length <= length;
+        }
+        return isValid ? null : {"max-length": {message: "MESSAGE_FIELD_TOO_LONG", placeholder: "" + length}};
+    };
+}

package/projects/corecomponents/src/lib/core/validator/password.validator.ts

@@ -0,0 +1,35 @@
+import {FormControl, ValidationErrors, ValidatorFn} from "@angular/forms";
+import {StringUtils} from '../utils/string-utils';
+
+export function passwordValidator(userNameGetterFn: () => string): ValidatorFn {
+    return function (control: FormControl): ValidationErrors | null {
+        if (control && control.value) {
+            const username: string = userNameGetterFn.call(this);
+            const errorString: string = getValidatePasswordErrorString(StringUtils.ToStringOrDefault(control.value), username);
+            if (errorString) {
+                return {"password": errorString};
+            }
+        }
+    };
+}
+
+// @returns undefined if valid, or an error string if there's an error
+export function getValidatePasswordErrorString(password: string, username: string): string {
+    const minimumPasswordLength: number = 10;
+    const lengthOk: boolean = password && minimumPasswordLength <= password.length;
+    if (!lengthOk) {
+        return "PASSWORD_MUST_BE_10_CHARACTERS";
+    }
+
+    const atLeastOneNumber: boolean = RegExp(".*[0-9].*").test(password);
+    const atLeastOneLetter: boolean = RegExp(".*[a-zA-Z].*").test(password);
+    const atLeastOneSpecial: boolean = RegExp(".*[!@#$%&*()'+,\\-./:;<=>?\\[\\]^_`{|}\\\\].*").test(password);
+    if (!atLeastOneNumber || !atLeastOneLetter || !atLeastOneSpecial) {
+        return "PASSWORD_MUST_CONTAIN_LETTER_NUMBER_SPECIAL";
+    }
+
+    const hasUsernameInPassword: boolean = username && RegExp(".*" + username.trim() + ".*", "i").test(password);
+    if (hasUsernameInPassword) {
+        return "PASSWORD_CONTAINS_USERNAME";
+    }
+}

package/projects/corecomponents/src/lib/core/validator/precision-scale.validator.ts

@@ -0,0 +1,14 @@
+import { FormControl, ValidationErrors, ValidatorFn } from '@angular/forms';
+import { NumberUtils } from '../utils/number-utils';
+
+export function precisionScaleValidator(precision: number, scale: number): ValidatorFn {
+    return function (control: FormControl): ValidationErrors | null {
+        let isValid: boolean = true;
+
+        if (control) {
+            isValid = NumberUtils.CheckPrecisionAndScale(control.value, precision, scale).isOk;
+        }
+
+        return isValid ? null : {'precision-scale': "MESSAGE_FIELD_PRECISION_OVERRIDDEN||" + precision};
+    };
+}

package/projects/corecomponents/src/lib/core/validator/required.validator.ts

@@ -0,0 +1,9 @@
+import { AbstractControl, ValidationErrors } from '@angular/forms';
+
+export function requiredValidator(control: AbstractControl): ValidationErrors | null {
+
+    const isValid: boolean = !(control.value === null || control.value === undefined || control.value === "");
+
+    return isValid ? null : {'required': 'MESSAGE_FIELD_REQUIRED'};
+
+}

package/projects/corecomponents/src/lib/directives/align-with/align-with.directive.ts

@@ -0,0 +1,158 @@
+import {
+    AfterViewInit,
+    Directive,
+    ElementRef,
+    HostBinding,
+    Input,
+    NgZone,
+    OnChanges,
+    OnDestroy,
+    OnInit
+} from '@angular/core';
+import {InputBoolean} from "../../core/decorator/input-boolean.decorator";
+import {EventUtils} from "../../core/utils/event-utils";
+import {ElementPosition} from "../../core/model/element-position";
+import {BrowserUtils} from "../../core/utils/browser-utils";
+
+@Directive({
+    selector: '[alignWith]'
+})
+export class AlignWithDirective implements OnInit, AfterViewInit, OnChanges, OnDestroy {
+    // a native OR custom element
+    @Input()
+    public set alignWith(alignWith: any | ElementRef) {
+        if (alignWith) {
+            // enables simple #templateVars passing to [alignWith] for native elements like <div>; Angular passes these as HTMLElement's
+            if (alignWith instanceof HTMLElement) {
+                this._hostNativeEl = alignWith;
+            } else {
+                this._hostNativeEl = alignWith.nativeElement;
+            }
+        }
+    }
+
+    @Input() @InputBoolean()
+    public enableAlign: boolean;
+
+    @Input() @InputBoolean()
+    public keepInView: boolean = true;
+
+    @Input() @InputBoolean()
+    public keepInViewHorizontal: boolean = true;
+
+    @Input() @InputBoolean()
+    public keepInViewVertical: boolean = true;
+
+    @Input() @InputBoolean()
+    public alignRight: boolean;
+
+    @Input() @InputBoolean()
+    public noWidthAlign: boolean;
+
+    @Input()
+    public alignTopOffsetPx: number = 0;
+
+    @Input()
+    public alignLeftOffsetPx: number = 0;
+
+    @Input()
+    public viewElement: ElementRef;
+
+    @HostBinding('style.position')
+    public fixed: string = 'fixed';
+
+    @HostBinding('style.left.px')
+    public left: number;
+
+    @HostBinding('style.top.px')
+    public top: number;
+
+    @HostBinding('style.width.px')
+    public width: number;
+
+    private _hostNativeEl: any;
+
+    private get _shouldDoAlign(): boolean {
+        return this._hostNativeEl && this.enableAlign;
+    }
+
+    constructor(private _ngZone: NgZone, private _elementRef: ElementRef) {
+    }
+
+    ngAfterViewInit(): void {
+        this.align();
+        // align again after hosts 'animation finished'
+        setTimeout(() => {
+            this.align();
+        }, 200);
+    }
+
+    ngOnChanges(): void {
+        this.align();
+    }
+
+    ngOnDestroy(): void {
+        window.removeEventListener('scroll', this.scroll, EventUtils.passiveCapture);
+        window.removeEventListener('resize', this.resize, EventUtils.passiveCapture);
+        window.removeEventListener('keyup', this.handleKeyUp, EventUtils.passiveCapture);
+        this._elementRef = undefined;
+        this._hostNativeEl = undefined;
+        this.viewElement = undefined;
+    }
+
+    ngOnInit(): void {
+        this._ngZone.runOutsideAngular(() => {
+            window.addEventListener('scroll', this.scroll, EventUtils.passiveCapture);
+            window.addEventListener('resize', this.resize, EventUtils.passiveCapture);
+            window.addEventListener('keyup', this.handleKeyUp, EventUtils.passiveCapture);
+        });
+    }
+
+    public align(): void {
+        if (this._shouldDoAlign) {
+            const rect: ClientRect = this._hostNativeEl.getBoundingClientRect();
+            this.left = rect.left + this.alignLeftOffsetPx;
+            this.top = rect.top + this.alignTopOffsetPx;
+            if (this.alignRight) {
+                this.left = rect.right - this._elementRef.nativeElement.clientWidth;
+            }
+            if (!this.noWidthAlign) {
+                this.width = rect.width;
+            }
+            const dimensions: ElementPosition = {
+                top: this.top,
+                right: this.left + this._elementRef.nativeElement.clientWidth,
+                bottom: this.top + this._elementRef.nativeElement.clientHeight,
+                left: this.left
+            };
+            if (this.keepInView && !BrowserUtils.AreDimensionsInView(dimensions, this.viewElement)) {
+                if (!BrowserUtils.HorizontalFitInView(dimensions, this.viewElement) && this.keepInViewHorizontal) {
+                    this.left = BrowserUtils.GetDimensions(this.viewElement).right - this._elementRef.nativeElement.clientWidth;
+                }
+                if (!BrowserUtils.VerticalFitInView(dimensions, this.viewElement) && this.keepInViewVertical) {
+                    this.top = rect.top - this._elementRef.nativeElement.clientHeight + rect.height - this.alignTopOffsetPx;
+                }
+            }
+        }
+    }
+
+    public scroll = (): void => {
+        this._alignWithZone();
+    };
+
+    public resize = (): void => {
+        this._alignWithZone();
+    };
+
+    public handleKeyUp = (): void => {
+        this._alignWithZone();
+    };
+
+    private _alignWithZone(): void {
+        if (this._shouldDoAlign) {
+            this._ngZone.run(() => {
+                this.align();
+            });
+        }
+    }
+}

package/projects/corecomponents/src/lib/directives/align-with/align-with.module.ts

@@ -0,0 +1,13 @@
+import {NgModule} from "@angular/core";
+import {AlignWithDirective} from "./align-with.directive";
+
+@NgModule({
+    declarations: [
+        AlignWithDirective
+    ],
+    exports: [
+        AlignWithDirective
+    ]
+})
+export class AlignWithModule {
+}

package/projects/corecomponents/src/lib/directives/clickoutside/click-outside-master.service.ts

@@ -0,0 +1,64 @@
+import {Injectable, NgZone, OnDestroy} from "@angular/core";
+import {ClickOutsideDirective} from "./click-outside.directive";
+import {EventUtils} from "../../core/utils/event-utils";
+import {KeyboardKey} from "../../core/enum/keyboard-key.enum";
+import {ArrayUtils} from "../../core/utils/array-utils";
+
+
+@Injectable()
+export class ClickOutsideMasterService implements OnDestroy {
+
+    public get currentClick(): MouseEvent {
+        return this._currentClick;
+    }
+
+    private _clickOutsideRefs: ClickOutsideDirective[] = [];
+
+    private _currentClick: MouseEvent;
+
+    constructor(private readonly _ngZone: NgZone) {
+        document.addEventListener('click', this.onClick, true);
+        window.addEventListener('keydown', this.onKeyDown, EventUtils.passiveBubble);
+    }
+
+    ngOnDestroy(): void {
+        document.removeEventListener('click', this.onClick, true);
+        window.removeEventListener('keydown', this.onKeyDown, EventUtils.passiveBubble);
+    }
+
+    public onClick = (event: MouseEvent): void => {
+        this._currentClick = event;
+        const first: ClickOutsideDirective = this._clickOutsideRefs[0];
+        const targets: ClickOutsideDirective[] = this._clickOutsideRefs.filter(co => co.alwaysTrigger);
+        if (first) {
+            targets.push(first);
+        }
+        setTimeout(() => {
+            targets.forEach(clickOutside => this.checkEmit(clickOutside, event));
+        });
+    }
+
+    public checkEmit(clickOutside: ClickOutsideDirective, event: Event, force?: boolean): void {
+        if (clickOutside && (clickOutside.currentClick !== this.currentClick || force) && this._clickOutsideRefs.indexOf(clickOutside) !== -1) {
+            this._ngZone.run(() => clickOutside.clickOutside.emit(event));
+        }
+    }
+
+    public onKeyDown = (event: KeyboardEvent): void => {
+        if (event.key === KeyboardKey.Escape) {
+            const first: ClickOutsideDirective = this._clickOutsideRefs[0];
+            if (first) {
+                this.checkEmit(first, event, true);
+            }
+        }
+    }
+
+    public addClickOutside(clickOutside: ClickOutsideDirective): void {
+        this.removeClickOutside(clickOutside);
+        this._clickOutsideRefs.unshift(clickOutside);
+    }
+
+    public removeClickOutside(clickOutside: ClickOutsideDirective): void {
+        ArrayUtils.RemoveElement(clickOutside, this._clickOutsideRefs);
+    }
+}